/* Sky Schedule redesign (Ramp layout): styles for our components. */

:root {
  --sky-blue: #3d7ef2;
  --sky-blue-hover: #2f6ee0;
  --sky-blue-tint: #dce8fd;
  --sky-ink: #1c1b17;
  --sky-muted: #6b6a66;
  --sky-line: #ebe6df;
  --sky-tile: #f4f2f0;
  --sky-ph-light: #f2f3f5;
  --sky-ph-dark: #232327;
  --sky-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::selection {
  background: var(--sky-blue-tint);
  color: #0b1b3a;
}

/* ── Brand ─────────────────────────────────────────────────────────────── */
.sky-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: currentColor;
  white-space: nowrap;
}
.sky-brand img {
  width: 19px;
  height: 19px;
  border-radius: 4px;
}

/* ── Header: sticky + transparent, border once scrolled, theme follows section ── */
[data-sky-header] > [class*="NavbarClient-module"] {
  transition:
    color 0.12s ease-out,
    background-color 0.15s ease-out;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
/* Once scrolled: frosted glass. Mostly see-through, tinted with the section behind it (clear over
   the hero's gradient), so the page shows through the header. */
[data-sky-header].sky-scrolled > [class*="NavbarClient-module"] {
  background-color: color-mix(in srgb, var(--sky-header-bg, #fff) 55%, transparent) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
}
[data-sky-header].sky-on-light [class*="text-primaryReverse"] {
  color: var(--sky-ink);
}
.sky-nav-actions {
  column-gap: 6px !important;
}
/* Minimal header buttons: "Sign in" is a text link, "Contact sales" a compact button. */
/* Sign in: compact outlined container (matches Contact sales size). */
[data-sky-header] a[href^="https://app.skyschedule.io"] {
  padding: 9px 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  background: rgb(255 255 255 / 0.06) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22) !important;
  transition: background-color 0.15s ease-out;
}
[data-sky-header] a[href^="https://app.skyschedule.io"]:hover {
  background: rgb(255 255 255 / 0.12) !important;
}
[data-sky-header] .sky-nav-actions a[href="/contact"],
[data-sky-header] .sky-nav-actions [data-sky-contact] {
  padding: 9px 14px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
}
[data-sky-header].sky-on-light a[href^="https://app.skyschedule.io"] {
  color: var(--sky-ink);
  background: rgb(0 0 0 / 0.03) !important;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12) !important;
}
[data-sky-header].sky-on-light a[href^="https://app.skyschedule.io"]:hover {
  background: rgb(0 0 0 / 0.06) !important;
}

/* Active dropdown trigger. */
/* Nav items: tight gray pill on hover/open (like the app), no tinted highlight. */
[data-sky-header] [data-sky-nav-item] {
  padding: 7px 10px !important;
  margin: 10px 1px !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: inherit !important;
  transition: background-color 0.12s ease-out !important;
}
[data-sky-header].sky-on-dark [data-sky-nav-item]:hover,
[data-sky-header].sky-on-dark [data-sky-nav-item].sky-trigger-open,
[data-sky-header].sky-on-dark [data-sky-nav-item]:focus-visible {
  background: rgb(255 255 255 / 0.1) !important;
}
[data-sky-header].sky-on-light [data-sky-nav-item]:hover,
[data-sky-header].sky-on-light [data-sky-nav-item].sky-trigger-open,
[data-sky-header].sky-on-light [data-sky-nav-item]:focus-visible {
  background: rgb(0 0 0 / 0.05) !important;
}
[data-sky-header] [data-sky-nav-item]:focus-visible {
  outline: 2px solid var(--sky-blue) !important;
  outline-offset: 1px;
}

/* ── Accent buttons: white text on our blue ─────────────────────────────── */
[class~="bg-solar"],
[class*="hover:bg-solar"]:hover,
[class*="hover:bg-solarLight"]:hover {
  color: #fff !important;
}
[class~="bg-solar"] *,
[class*="hover:bg-solar"]:hover * {
  color: inherit !important;
}

/* ── Email capture (hero + footer): minimal, no dark focus ring ─────────── */
.sky-email-form {
  max-width: 420px !important;
}
.sky-email-form > div {
  max-width: 420px !important;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgb(0 0 0 / 0.08) !important;
  border-radius: 12px !important;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  transition:
    border-color 0.15s ease-out,
    box-shadow 0.15s ease-out;
}
.sky-email-form > div:focus-within {
  border-color: var(--sky-blue) !important;
  box-shadow: 0 0 0 3px rgb(61 126 242 / 0.18);
}
.sky-email-form input {
  height: 38px !important;
  padding-left: 12px !important;
  padding-right: 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 14px !important;
  box-shadow: none !important;
  outline: none !important;
}
.sky-email-form input:focus,
.sky-email-form input:focus-visible,
.sky-email-form button:focus {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}
.sky-email-form button:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: -4px !important;
}
.sky-email-form button {
  height: 38px !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
}
.sky-email-form > div > div:last-child {
  min-width: 0 !important;
  width: auto;
}
/* Hero version: as wide as the subheading's longest line (468px at desktop sizes). The hero's
   desktop layout starts at 992px (the reference's lg breakpoint). */
@media (max-width: 991px) {
  #hero-section .sky-email-form,
  #hero-section .sky-email-form > div,
  #hero-section div:has(> .sky-email-form) {
    margin-right: auto !important;
    margin-left: auto !important;
  }
}
@media (min-width: 992px) {
  #hero-section .sky-email-form,
  #hero-section .sky-email-form > div {
    max-width: 468px !important;
  }
  #hero-section div:has(> .sky-email-form) {
    width: 468px !important;
  }
  #hero-section .sky-email-form input,
  #hero-section .sky-email-form button {
    height: 36px !important;
    font-size: 13.5px !important;
  }
}
/* Footer version: smaller. */
.sky-email-form-footer,
.sky-email-form-footer > div {
  max-width: 360px !important;
}
.sky-email-form-footer > div {
  padding: 4px;
  border-radius: 10px !important;
  background: rgb(255 255 255 / 0.06) !important;
  border-color: rgb(255 255 255 / 0.16) !important;
  box-shadow: none;
}
.sky-email-form-footer > div:focus-within {
  border-color: var(--sky-blue) !important;
}
.sky-email-form-footer input {
  color: #fff !important;
}
.sky-email-form-footer input::placeholder {
  color: rgb(255 255 255 / 0.55) !important;
}
.sky-email-form-footer input,
.sky-email-form-footer button {
  height: 34px !important;
  font-size: 13px !important;
}
@media (max-width: 991px) {
  .sky-email-form > div {
    flex-direction: column;
    align-items: stretch;
  }
  .sky-email-form > div > div:last-child {
    width: 100%;
    margin-top: 0 !important;
  }
  .sky-email-form button {
    width: 100%;
  }
  .sky-email-form input {
    text-align: center;
  }
}

/* ── Hero: real <img> so it can be saved with right-click ──────────────── */
.sky-hero-has-img {
  background-image: none !important;
}
.sky-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}
.sky-hero-root * {
  pointer-events: none;
}
.sky-hero-root :is(a, button, input, select, textarea, label, form, .sky-hero-img, [role="button"]) {
  pointer-events: auto;
}

/* ── Logo strip ────────────────────────────────────────────────────────── */
/* More room above the line (away from the hero), logos closer below it. */
.sky-logo-label {
  margin-top: 44px !important;
  margin-bottom: 0 !important;
}
div:has(> .sky-logo-label) {
  margin-bottom: 26px !important;
}
.sky-logo {
  display: block;
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.sky-logo-item:hover .sky-logo {
  opacity: 1;
  transform: scale(1.04);
}
/* Every logo sits in the same 40px-tall slot, centered, so the row reads as one line. */
.sky-logo-item {
  height: 40px;
  justify-content: center !important;
  align-self: center;
}
.sky-logo-item > :last-child:not(img) {
  position: absolute !important;
  top: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.sky-logo-item:hover > :last-child:not(img) {
  opacity: 1;
}

/* ── Placeholders where UI components will go ─────────────────────────── */
.sky-ph {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.sky-ph-blank {
  background: transparent;
}
.sky-ph-gray {
  background: var(--sky-ph-light);
  min-height: 360px;
}
[class~="bg-black"] .sky-ph-gray,
[data-navbar-reverse="true"] .sky-ph-gray {
  background: var(--sky-ph-dark);
}
.sky-card-media {
  height: 280px;
}
.sky-ph-slot {
  display: flex;
  min-height: 360px;
  aspect-ratio: 7 / 5;
}
@media (max-width: 991px) {
  .sky-card-media {
    height: 200px;
  }
  .sky-ph-slot {
    min-height: 240px;
  }
}

/* ── "More time" customer cards: 4 visible + 1 peeking, free scroll, scroll bar ── */
.sky-slider-track {
  display: flex !important;
  /* No gaps: spacing lives inside each card so the whole row is one scroll surface. */
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  /* First card lines up with the page content; the row runs off the right edge. */
  --sky-gutter: calc(max(0px, (100vw - 1536px) / 2) + clamp(16px, 4.45vw, 64px));
  padding: 8px var(--sky-gutter) 14px;
  scroll-padding-left: var(--sky-gutter);
  margin: 0 !important;
  touch-action: pan-x pan-y;
}
.sky-slider-track::-webkit-scrollbar {
  display: none;
}
.sky-slider-track.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.sky-slider-track.is-dragging .sky-slide-link {
  pointer-events: none;
}
.sky-slide {
  flex: 0 0 auto !important;
  box-sizing: content-box;
  width: clamp(240px, calc((min(100vw, 1440px) - 240px) / 4.35), 310px) !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 20px !important;
}
.sky-slide:last-child {
  padding-right: 0 !important;
}
.sky-slide-link > div {
  aspect-ratio: 310 / 450 !important;
  transition:
    transform 0.35s var(--sky-ease),
    box-shadow 0.35s var(--sky-ease);
}
.sky-slide-link > div::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.45), rgb(0 0 0 / 0) 55%);
  opacity: 0;
  transition: opacity 0.35s var(--sky-ease);
  pointer-events: none;
}
.sky-slide-link:hover > div,
.sky-slide-link:focus-visible > div {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.45);
}
.sky-slide-link:hover > div::after,
.sky-slide-link:focus-visible > div::after {
  opacity: 1;
}
.sky-slide-link:focus-visible {
  outline: none;
}
.sky-slide-link:focus-visible > div {
  outline: 3px solid var(--sky-blue);
  outline-offset: 3px;
}
/* Scroll bar under the cards. */
.sky-scrollbar {
  --sky-gutter: calc(max(0px, (100vw - 1536px) / 2) + clamp(16px, 4.45vw, 64px));
  position: relative;
  height: 4px;
  margin: 20px var(--sky-gutter) 0;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.08);
  cursor: pointer;
  touch-action: none;
}
.sky-scrollbar::before {
  /* Larger hit area. */
  content: "";
  position: absolute;
  inset: -10px 0;
}
.sky-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--sky-ink);
  transition: background 0.15s ease-out;
}
.sky-scrollbar:hover .sky-scrollbar-thumb,
.sky-scrollbar.is-active .sky-scrollbar-thumb {
  background: var(--sky-blue);
}
@media (max-width: 767px) {
  .sky-slide {
    width: 78vw !important;
  }
}

/* ── Desktop mega menu (reference layout) ─────────────────────────────── */
.sky-mm-layer {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  translate: -50% 0;
  z-index: 90;
  width: min(1170px, calc(100vw - 48px));
  pointer-events: none;
}
.sky-mm-layer.is-open {
  pointer-events: auto;
}
.sky-mm {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  color: var(--sky-ink);
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.05),
    0 24px 48px -12px rgb(0 0 0 / 0.25);
  transform-origin: top center;
  animation: sky-mm-in 0.2s var(--sky-ease);
}
.sky-mm.has-aside {
  grid-template-columns: 1fr 260px;
}
.sky-mm[hidden] {
  display: none;
}
.sky-mm.is-switch {
  animation: sky-mm-fade 0.15s ease-out;
}
@keyframes sky-mm-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.99);
  }
}
@keyframes sky-mm-fade {
  from {
    opacity: 0.4;
  }
}
.sky-mm-main {
  padding: 28px 32px 30px;
}
.sky-mm-section + .sky-mm-section {
  margin-top: 26px;
}
.sky-mm-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #3d3c38;
}
.sky-mm-headlink {
  font-size: 12.5px;
  color: var(--sky-muted);
  text-decoration: none;
}
.sky-mm-headlink:hover {
  color: var(--sky-ink);
}
.sky-mm-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sky-mi {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px;
  margin-left: -8px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  transition: background 0.15s ease-out;
}
.sky-mi:hover,
.sky-mi:focus-visible {
  background: #f8f7f5;
}
.sky-mi:focus-visible {
  outline: 2px solid var(--sky-blue);
  outline-offset: 0;
}
.sky-mi-icon {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--sky-tile);
  color: var(--sky-ink);
  font-size: 20px !important;
  line-height: 1 !important;
  transition:
    background 0.15s ease-out,
    color 0.15s ease-out;
}
.sky-mi:hover .sky-mi-icon {
  background: var(--sky-blue);
  color: #fff;
}
.sky-mi-text {
  min-width: 0;
}
.sky-mi-title {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
}
.sky-mi-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--sky-muted);
}
.sky-mm-aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 28px 30px;
  border-left: 1px solid var(--sky-line);
  color: inherit;
  text-decoration: none;
}
.sky-mm-aside-media {
  display: block;
  aspect-ratio: 16 / 10;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--sky-tile);
}
.sky-mm-aside-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  transition: transform 0.4s var(--sky-ease);
}
.sky-mm-aside:hover .sky-mm-aside-media img {
  transform: scale(1.04);
}
.sky-mm-aside-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}
.sky-mm-aside-desc {
  font-size: 13px;
  color: var(--sky-muted);
}
.sky-mm-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgb(10 10 12 / 0.18);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease-out,
    visibility 0s linear 0.2s;
}
.sky-mm-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-out;
}
@media (max-width: 1100px) {
  .sky-mm.has-aside {
    grid-template-columns: 1fr;
  }
  .sky-mm-aside {
    display: none;
  }
}
@media (max-width: 991px) {
  .sky-mm-layer,
  .sky-mm-scrim {
    display: none;
  }
}

/* ── Mobile menu sheet ────────────────────────────────────────────────── */
.sky-sheet {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: #fff;
  color: var(--sky-ink);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition:
    opacity 0.2s var(--sky-ease),
    transform 0.2s var(--sky-ease),
    visibility 0s linear 0.2s;
}
.sky-sheet.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity 0.2s var(--sky-ease),
    transform 0.2s var(--sky-ease);
}
.sky-sheet-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--sky-line);
}
.sky-sheet .sky-brand {
  font-size: 20px;
  color: var(--sky-ink);
  text-decoration: none;
}
.sky-sheet .sky-brand img {
  width: 28px;
  height: 28px;
}
.sky-sheet-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.sky-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 24px;
  -webkit-overflow-scrolling: touch;
}
.sky-sheet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--sky-line);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sky-sheet-chevron {
  transition: transform 0.2s var(--sky-ease);
}
.sky-sheet-row[aria-expanded="true"] .sky-sheet-chevron {
  transform: rotate(180deg);
}
.sky-sheet-panel {
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--sky-line);
}
.sky-sheet-heading {
  margin: 14px 0 6px;
  font-size: 13px;
  color: var(--sky-muted);
}
.sky-sheet-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sky-sheet .sky-mi {
  margin: 0;
  padding: 8px 4px;
}
.sky-sheet .sky-mi-icon {
  width: 36px;
  height: 36px;
}
.sky-sheet .sky-mi-title {
  font-size: 15px;
}
.sky-sheet-actions {
  display: grid;
  flex: none;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sky-line);
}
.sky-sheet-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
}
.sky-sheet-actions .is-primary {
  background: var(--sky-blue);
  color: #fff;
}
.sky-sheet-actions .is-secondary {
  border: 1px solid #d2cecb;
  color: inherit;
}
html.sky-sheet-open,
html.sky-sheet-open body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .sky-mm,
  .sky-mm.is-switch,
  .sky-mm-scrim,
  .sky-sheet,
  .sky-sheet.is-open,
  .sky-logo,
  .sky-mi,
  .sky-mi-icon,
  .sky-slide-link > div,
  .sky-slide-link > div::after,
  .sky-scrollbar-thumb,
  .sky-mm-aside-media img {
    animation: none;
    transition: none;
  }
}

/* Mobile hero: breathing room where the review badge used to be. */
@media (max-width: 991px) {
  .sky-hero-root h1 {
    margin-top: 40px;
  }
}

/* KbCard grid: cards without their own media slot get one; background art removed. */
.sky-card-no-art {
  background-image: none !important;
}
.sky-card-no-art::before,
.sky-card-no-art::after {
  background-image: none !important;
}
/* Empty media area: keeps the cards at their previous height. */
.sky-kb-media {
  min-height: 240px;
}
.sky-card-no-art > .sky-kb-media:last-child:not([class*="kbcard-media"]) {
  margin-top: 24px;
}

/* Page chrome: no rubber-band/back-swipe flashes of the dark root background. */
html,
body {
  overscroll-behavior: none;
}

/* Hero: a little more room under the header. */
.sky-hero-root {
  padding-top: 28px;
}
.sky-hero-has-img {
  top: 40px !important;
}

/* ══ Customers page ═══════════════════════════════════════════════════════ */
.sky-cs-wrap {
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4.45vw, 64px);
}
.sky-cs-center {
  text-align: center;
}
.sky-cs-hero {
  padding-top: calc(var(--nav-height, 62px) + 40px);
}
.sky-cs-title {
  margin: 0;
  font-size: clamp(56px, 10.6vw, 168px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--sky-ink);
}
.sky-cs-trusted {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 18px 0 28px;
  color: var(--sky-muted);
  font-size: 14px;
}
.sky-cs-trusted p {
  flex: none;
  margin: 0;
}
.sky-cs-strip {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sky-cs-strip-track {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
  animation: sky-cs-marquee 60s linear infinite;
}
.sky-cs-strip img {
  width: auto;
  max-width: none;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@keyframes sky-cs-marquee {
  to {
    transform: translateX(-50%);
  }
}

/* Featured grid: one large card + 2×2 small cards. */
.sky-cs-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.sky-cs-feature {
  position: relative;
  display: block;
  min-height: 560px;
  overflow: hidden;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
}
.sky-cs-feature img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--sky-ease);
}
.sky-cs-feature:hover img {
  transform: scale(1.03);
}
.sky-cs-feature-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.05) 55%);
}
.sky-cs-feature-body {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: grid;
  gap: 10px;
}
.sky-cs-feature-co {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.9;
}
.sky-cs-feature-title {
  max-width: 18ch;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.sky-cs-feature .sky-cs-tags {
  color: rgb(255 255 255 / 0.8);
}
.sky-cs-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 20px;
}
.sky-cs-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 20px;
}
.sky-cs-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--sky-ink);
  text-decoration: none;
}
.sky-cs-card-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  background: var(--sky-tile);
}
.sky-cs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--sky-ease);
}
.sky-cs-card:hover .sky-cs-card-media img {
  transform: scale(1.04);
}
.sky-cs-card-title {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.sky-cs-card:hover .sky-cs-card-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sky-cs-tags {
  margin: 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sky-muted);
}
.sky-cs-card:focus-visible,
.sky-cs-feature:focus-visible,
.sky-cs-seeall:focus-visible {
  outline: 2px solid var(--sky-blue);
  outline-offset: 4px;
  border-radius: 12px;
}
.sky-cs-seeall {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border-radius: 8px;
  background: var(--sky-tile);
  color: var(--sky-ink);
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s ease-out;
}
.sky-cs-seeall:hover {
  background: #ebe8e4;
}
.sky-cs-seeall .material-symbols-outlined {
  font-size: 18px;
}

/* CTA bar */
.sky-cs-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 56px 0 96px;
  padding: 28px 0;
  border-top: 1px solid var(--sky-line);
  border-bottom: 1px solid var(--sky-line);
}
.sky-cs-cta p {
  margin: 0;
  font-size: 17px;
  color: var(--sky-ink);
}
.sky-cs-cta-btn {
  flex: none;
  padding: 11px 18px;
  border-radius: 8px;
  background: var(--sky-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease-out;
}
.sky-cs-cta-btn:hover {
  background: var(--sky-blue-hover);
}

/* Photo quote */
.sky-cs-quote {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(76vh, 720px);
  padding: 80px 0 64px;
  background:
    linear-gradient(to top, rgb(0 0 0 / 0.65), rgb(0 0 0 / 0.1) 60%),
    var(--sky-cs-quote-img) center / cover no-repeat;
  color: #fff;
}
.sky-cs-quote blockquote {
  max-width: 900px;
  margin: 0;
}
.sky-cs-quote p {
  margin: 0 0 20px;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.sky-cs-quote footer {
  font-size: 14px;
  opacity: 0.85;
}

/* Logo / stat wall */
.sky-cs-wall-section {
  padding: 112px 0 40px;
}
.sky-cs-h2 {
  margin: 0;
  color: var(--sky-ink);
}
.sky-cs-sub {
  max-width: 520px;
  margin: 16px auto 0;
  color: var(--sky-muted);
  font-size: 16px;
}
.sky-cs-wall {
  margin-top: 48px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sky-cs-wall-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 172px);
  grid-auto-columns: 220px;
  gap: 12px;
  width: max-content;
  animation: sky-cs-marquee 90s linear infinite;
}
.sky-cs-wall:hover .sky-cs-wall-track,
.sky-cs-strip:hover .sky-cs-strip-track {
  animation-play-state: paused;
}
.sky-cs-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid var(--sky-line);
  border-radius: 10px;
  background: #fff;
}
.sky-cs-tile.is-logo {
  align-items: center;
  justify-content: center;
  background: #fbfaf9;
}
.sky-cs-tile.is-logo img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.sky-cs-tile.is-stat {
  background: #eef3fe;
  border-color: #dce8fd;
}
.sky-cs-stat {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sky-blue);
}
.sky-cs-stat-label {
  font-size: 13px;
  color: var(--sky-ink);
}
.sky-cs-stat-co {
  font-size: 12px;
  color: var(--sky-muted);
}

/* All stories */
.sky-cs-all {
  padding: 96px clamp(16px, 4.45vw, 64px) 128px;
}
.sky-cs-filters {
  display: flex;
  justify-content: center;
  margin: 28px 0 40px;
}
.sky-cs-search {
  position: relative;
  width: min(520px, 100%);
}
.sky-cs-search .material-symbols-outlined {
  position: absolute;
  left: 12px;
  top: 50%;
  translate: 0 -50%;
  font-size: 20px;
  color: var(--sky-muted);
  pointer-events: none;
}
.sky-cs-search input {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border: 1px solid #d9d5cf;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--sky-ink);
}
.sky-cs-search input:focus {
  outline: none;
  border-color: var(--sky-blue);
  box-shadow: 0 0 0 3px rgb(61 126 242 / 0.18);
}
.sky-cs-empty {
  margin-top: 24px;
  text-align: center;
  color: var(--sky-muted);
}
.sky-cs-card[hidden] {
  display: none;
}

@media (max-width: 991px) {
  .sky-cs-featured {
    grid-template-columns: 1fr;
  }
  .sky-cs-feature {
    min-height: 420px;
  }
  .sky-cs-seeall {
    grid-column: 1;
  }
  .sky-cs-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .sky-cs-trusted {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .sky-cs-strip {
    width: 100%;
  }
  .sky-cs-grid-2,
  .sky-cs-grid-3 {
    grid-template-columns: 1fr;
  }
  .sky-cs-cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .sky-cs-wall-track {
    grid-template-rows: repeat(2, 140px);
    grid-auto-columns: 170px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-cs-strip-track,
  .sky-cs-wall-track {
    animation: none;
  }
  .sky-cs-feature img,
  .sky-cs-card-media img {
    transition: none;
  }
}

/* Footer bottom block (below the nav columns). */
.sky-foot {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.6);
  font-size: 13px;
}
.sky-foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
}
.sky-foot-left {
  display: grid;
  gap: 14px;
  width: min(400px, 100%);
}
.sky-foot-join {
  margin: 0;
  font-size: 15px;
  color: #fff;
}
.sky-foot-form form {
  max-width: 400px !important;
}
.sky-foot-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.sky-foot-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 6px;
  color: rgb(255 255 255 / 0.82);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease-out, color 0.15s ease-out;
}
a.sky-foot-badge:hover {
  background: rgb(255 255 255 / 0.06);
  color: #fff;
}
.sky-foot-icon {
  width: 32px;
  justify-content: center;
  padding: 0;
}
.sky-foot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgb(34 197 94 / 0.18);
}
.sky-foot-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}
.sky-foot-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.sky-foot-legal-link {
  color: rgb(255 255 255 / 0.6);
  text-decoration: none;
  transition: color 0.15s ease-out;
}
.sky-foot-legal-link:hover {
  color: #fff;
}
@media (max-width: 767px) {
  .sky-foot-top,
  .sky-foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══ Shared page parts (switching, careers) ══════════════════════════════ */
.sw-eyebrow {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--sky-muted);
}
.sw-lead {
  max-width: 640px;
  margin: 20px 0 0;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.45;
  color: var(--sky-muted);
}
.sw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.sw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #d9d5cf;
  border-radius: 6px;
  background: #fff;
  color: var(--sky-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease-out, border-color 0.15s ease-out;
}
.sw-btn:hover {
  background: #f8f7f5;
}
.sw-btn.is-primary {
  border-color: var(--sky-blue);
  background: var(--sky-blue);
  color: #fff;
}
.sw-btn.is-primary:hover {
  background: var(--sky-blue-hover);
}
.sw-btn:focus-visible {
  outline: 2px solid var(--sky-blue);
  outline-offset: 2px;
}
.sw-section {
  padding-top: 112px;
}
.sw-left {
  margin-left: 0;
}

/* ══ Switching page ═════════════════════════════════════════════════════ */
/* Pages we generate sit on white (the reference page body is dark navy). */
main[data-sky-page] {
  position: relative;
  background: #fff;
}
.sw-hero {
  padding: calc(var(--nav-height, 62px) + 64px) 0 0;
}
/* Headings use the reference type scale (headline-xl / headline-l) so they match the homepage. */
.sw-title,
.cr-title,
.sw-h2 {
  max-width: none;
  margin: 0;
  color: var(--sky-ink);
  text-wrap: balance;
}
.sw-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 36px 0 0;
  font-size: 13px;
  color: var(--sky-muted);
}
.sw-sources > span:first-child {
  margin-right: 4px;
}
.sw-source {
  padding: 5px 10px;
  border: 1px solid var(--sky-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sky-ink);
}
/* App window mock */
.sw-window {
  margin: 56px 0 0;
  overflow: hidden;
  border: 1px solid #e3dfd9;
  border-radius: 14px 14px 0 0;
  border-bottom: 0;
  background: #fff;
  box-shadow: 0 30px 80px -30px rgb(20 30 60 / 0.25);
}
.sw-window-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--sky-line);
  background: #fbfaf9;
}
.sw-window-bar > span:not(.sw-window-title) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e2ded8;
}
.sw-window-title {
  margin-left: 10px;
  font-size: 12px;
  color: var(--sky-muted);
}
.sw-window-body {
  display: grid;
  grid-template-columns: 200px 1fr;
  min-height: 380px;
}
.sw-window-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--sky-line);
}
.sw-side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--sky-muted);
}
.sw-side-item .material-symbols-outlined {
  font-size: 18px;
}
.sw-side-item.is-active {
  background: #eef3fe;
  color: var(--sky-blue);
}
.sw-window-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 26px;
}
.sw-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  margin-bottom: 6px;
  border: 1.5px dashed #cfd9ef;
  border-radius: 10px;
  background: #f7f9fe;
  color: var(--sky-blue);
}
.sw-job {
  display: grid;
  grid-template-columns: 22px 170px 1fr 22px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--sky-line);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--sky-ink);
}
.sw-job .material-symbols-outlined {
  font-size: 20px;
  color: var(--sky-muted);
}
.sw-job-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef0f4;
}
.sw-job-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--sky-blue);
  animation: sw-fill 1.6s var(--sky-ease) forwards;
  animation-delay: calc(0.3s + var(--d, 0s));
}
.sw-job-done {
  color: var(--sky-blue) !important;
  opacity: 0;
  animation: sw-pop 0.3s ease-out forwards;
  animation-delay: calc(1.9s + var(--d, 0s));
}
@keyframes sw-fill {
  to {
    width: 100%;
  }
}
@keyframes sw-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Skeleton primitives */
.sk {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-bar {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: #e8e5e0;
}
.sk-bar.sk-thin {
  height: 6px;
  background: #efede9;
}
.w-15 { width: 15%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.sk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 0 0 1px #e7e4df,
    0 1px 2px rgb(0 0 0 / 0.04);
}
.sk-lines {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}
.sk-lines .sk-bar {
  max-width: 100%;
}
.sk-avatar {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #dfe6f5;
}
.sk-avatar.sk-sm {
  width: 18px;
  height: 18px;
}
.sk-pill {
  flex: none;
  width: 44px;
  height: 16px;
  border-radius: 999px;
  background: #eceae6;
}
.sk-pill.is-done,
.sk-chip.is-paid {
  background: #dce8fd;
}
.sk-chip {
  flex: none;
  width: 40px;
  height: 14px;
  margin-left: auto;
  border-radius: 999px;
  background: #e8e5e0;
}
.sk-amount {
  flex: none;
  width: 54px;
  height: 10px;
  margin-left: auto;
  border-radius: 999px;
  background: #dce8fd;
}
.sk-amount.is-neg {
  background: #e8e5e0;
}
.sk-row .sk-bar {
  flex: none;
}
.sk-check {
  flex: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #d6d2cc;
  border-radius: 4px;
}
.sk-check.is-done {
  border-color: var(--sky-blue);
  background: var(--sky-blue);
}
.sk-due {
  flex: none;
  width: 48px;
  height: 14px;
  margin-left: auto;
  border-radius: 999px;
  background: #eceae6;
}
.sk-due.is-soon {
  background: #dce8fd;
}
.sk-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef0f4;
}
.sk-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sky-blue);
}
.sk-cal {
  flex-direction: row;
  gap: 8px;
}
.sk-cal-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
}
.sk-block {
  display: block;
  border-radius: 6px;
  border-left: 3px solid var(--sky-blue);
  background: #e7efff;
}
.sk-block.b1 {
  border-color: #1c1b17;
  background: #efedea;
}
.sk-block.b2 {
  border-color: #9fbcf6;
  background: #f1f5fd;
}
.sk-block.b3 {
  border-color: #b9b5ae;
  background: #f6f5f3;
}
.sk-gap {
  display: block;
  height: 22px;
}
.sk-aircraft {
  gap: 8px;
}
.sk-plane {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 0 0 1px #eceae6;
}
.sk-material {
  font-size: 18px !important;
  color: var(--sky-blue);
  transform: rotate(45deg);
}
.sk-tail {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sky-ink);
}
.sk-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--sky-blue);
}
.sk-dot.is-warn {
  background: #c9c5be;
}
.sk-kanban {
  flex-direction: row;
  gap: 8px;
}
.sk-col {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  background: #f1efec;
}
.sk-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.sk-card .sk-bar:last-child {
  width: 60%;
  height: 6px;
}
/* Data grid */
.sw-head {
  max-width: 720px;
}
.sw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.sw-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #ece9e4;
  border-radius: 12px;
  background: #fafaf9;
}
.sw-card-art {
  height: 190px;
  padding: 18px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
  mask-image: linear-gradient(to bottom, #000 75%, transparent);
}
.sw-card-body {
  padding: 4px 20px 22px;
}
.sw-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--sky-ink);
}
.sw-card h3 .material-symbols-outlined {
  font-size: 20px;
  color: var(--sky-blue);
}
.sw-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sky-muted);
}
.sw-card .sw-from {
  margin-top: 12px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #8b8984;
}
/* Steps (dark band) */
.sw-steps-section {
  margin-top: 112px;
  padding: 112px 0;
  background: #0b0f1c;
  color: #fff;
}
.sw-on-dark {
  color: #fff;
}
.sw-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.sw-steps li {
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.15);
}
.sw-step-n {
  font-size: 13px;
  color: #8ab4ff;
}
.sw-steps h3 {
  margin: 14px 0 10px;
  font-size: 20px;
  font-weight: 500;
}
.sw-steps p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: rgb(255 255 255 / 0.65);
}
/* FAQ */
.sw-faq {
  max-width: 860px;
  margin-top: 36px;
  border-top: 1px solid var(--sky-line);
}
.sw-faq details {
  border-bottom: 1px solid var(--sky-line);
}
.sw-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  font-size: 17px;
  color: var(--sky-ink);
  list-style: none;
  cursor: pointer;
}
.sw-faq summary::-webkit-details-marker {
  display: none;
}
.sw-faq summary .material-symbols-outlined {
  transition: transform 0.2s var(--sky-ease);
}
.sw-faq details[open] summary .material-symbols-outlined {
  transform: rotate(45deg);
}
.sw-faq details p {
  max-width: 680px;
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sky-muted);
}
.sw-final.is-dark {
  background: #1a1919;
  color: #fff;
}
.sw-final.is-dark .sw-h2 {
  color: #fff;
}
.sw-final.is-dark p {
  color: rgb(255 255 255 / 0.65);
}
.sw-final {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 128px;
  padding: 72px 24px;
  border-radius: 16px;
  background: #f6f5f3;
  text-align: center;
}
.sw-final p {
  margin: 0;
  color: var(--sky-muted);
  font-size: 17px;
}
@media (max-width: 1100px) {
  .sw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .sw-window-body {
    grid-template-columns: 1fr;
  }
  .sw-window-side {
    display: none;
  }
  .sw-job {
    grid-template-columns: 22px 1fr 22px;
  }
  .sw-job-track {
    grid-column: 1 / -1;
    order: 4;
  }
  .sw-grid,
  .sw-steps {
    grid-template-columns: 1fr;
  }
  .sw-section {
    padding-top: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sw-job-track span {
    animation: none;
    width: 100%;
  }
  .sw-job-done {
    animation: none;
    opacity: 1;
  }
}

/* ══ Careers page ═══════════════════════════════════════════════════════ */
.cr-hero {
  padding: calc(var(--nav-height, 62px) + 64px) 0 8px;
}

.cr-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.cr-value {
  padding: 28px;
  border-radius: 12px;
  background: #f6f5f3;
}
.cr-value .material-symbols-outlined {
  color: var(--sky-blue);
}
.cr-value h3 {
  margin: 14px 0 8px;
  font-size: 18px;
  font-weight: 500;
  color: var(--sky-ink);
}
.cr-value p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sky-muted);
}
.cr-team {
  margin-top: 44px;
}
.cr-team-name {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--sky-muted);
}
.cr-role {
  border-top: 1px solid var(--sky-line);
}
.cr-role:last-child {
  border-bottom: 1px solid var(--sky-line);
}
.cr-role summary {
  display: grid;
  grid-template-columns: 1fr auto 24px;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  list-style: none;
  cursor: pointer;
}
.cr-role summary::-webkit-details-marker {
  display: none;
}
.cr-role summary:hover .cr-role-title {
  color: var(--sky-blue);
}
.cr-role-title {
  font-size: 19px;
  color: var(--sky-ink);
  transition: color 0.15s ease-out;
}
.cr-role-meta {
  font-size: 14px;
  color: var(--sky-muted);
}
.cr-role-chevron {
  color: var(--sky-muted);
  transition: transform 0.2s var(--sky-ease);
}
.cr-role[open] .cr-role-chevron {
  transform: rotate(180deg);
}
.cr-role-body {
  max-width: 760px;
  padding: 0 0 32px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sky-muted);
}
.cr-role-body h4 {
  margin: 22px 0 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sky-ink);
}
.cr-role-body ul {
  margin: 0 0 4px;
  padding-left: 20px;
}
.cr-role-body li {
  margin: 4px 0;
}
.cr-role-body .sw-btn {
  margin-top: 22px;
}
.cr-general {
  margin-top: 28px;
  color: var(--sky-muted);
}
.cr-link {
  border: 0;
  padding: 0;
  background: none;
  color: var(--sky-blue);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.cr-eeo {
  max-width: 860px;
  margin-bottom: 128px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--sky-muted);
}
.cr-eeo a {
  color: inherit;
}
@media (max-width: 767px) {
  .cr-values {
    grid-template-columns: 1fr;
  }
  .cr-role summary {
    grid-template-columns: 1fr 24px;
    padding: 12px 0;
  }
  .cr-role-meta {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
  }
  .cr-role-chevron {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

/* ══ Modals (contact sales, apply) ══════════════════════════════════════ */
.sky-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgb(10 12 20 / 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease-out,
    visibility 0s linear 0.2s;
}
.sky-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease-out;
}
.sky-modal-panel {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 28px;
  border-radius: 14px;
  background: #fff;
  color: var(--sky-ink);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.4);
  transform: translateY(10px) scale(0.98);
  transition: transform 0.25s var(--sky-ease);
}
.sky-modal.is-open .sky-modal-panel {
  transform: none;
}
.sky-modal h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sky-modal-sub {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--sky-muted);
}
.sky-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--sky-muted);
  cursor: pointer;
}
.sky-modal-close:hover {
  background: #f4f2f0;
  color: var(--sky-ink);
}
.sky-form {
  display: grid;
  gap: 14px;
}
.sky-form .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sky-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.sky-field input,
.sky-field select,
.sky-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d9d5cf;
  border-radius: 6px;
  background: #fff;
  color: var(--sky-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 400;
}
.sky-field textarea {
  min-height: 84px;
  resize: vertical;
}
.sky-field input:focus,
.sky-field select:focus,
.sky-field textarea:focus {
  outline: none;
  border-color: var(--sky-blue);
  box-shadow: 0 0 0 3px rgb(61 126 242 / 0.18);
}
.sky-field input[type="file"] {
  padding: 8px;
  font-size: 14px;
}
.sky-field-hint {
  font-weight: 400;
  color: var(--sky-muted);
  font-size: 12px;
}
.sky-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  font-weight: 400;
  color: var(--sky-muted);
}
.sky-check input {
  margin-top: 2px;
  accent-color: var(--sky-blue);
}
.sky-check a,
.sky-form-note a {
  color: inherit;
}
.sky-form-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sky-muted);
}
.sky-form-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #fdecec;
  color: #a12626;
  font-size: 13px;
}
.sky-form .sw-btn {
  width: 100%;
}
.sky-form .sw-btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.sky-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.sky-modal-done {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 16px 0 4px;
  text-align: center;
}
.sky-modal-done .sw-btn {
  width: auto;
  margin-top: 14px;
}
/* Apple Pay-style success mark (timing mirrors the app's IosSuccessHud). */
.sky-done-mark {
  width: 76px;
  height: 76px;
  margin-bottom: 10px;
  overflow: visible;
  animation: sky-done-pop 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.sky-done-circle,
.sky-done-check {
  fill: none;
  stroke: #007aff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sky-done-circle {
  animation: sky-done-draw 0.46s cubic-bezier(0.65, 0, 0.35, 1) 0.06s forwards;
}
.sky-done-check {
  animation: sky-done-draw 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.sky-done-text {
  opacity: 0;
  animation: sky-done-text 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}
@keyframes sky-done-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes sky-done-pop {
  0% {
    opacity: 0;
    transform: scale(0.84);
  }
  18% {
    opacity: 1;
  }
  40% {
    transform: scale(1);
  }
  70% {
    transform: scale(1);
  }
  82% {
    transform: scale(1.045);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes sky-done-text {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-done-mark,
  .sky-done-circle,
  .sky-done-check,
  .sky-done-text {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}
@media (max-width: 520px) {
  .sky-form .row-2 {
    grid-template-columns: 1fr;
  }
  .sky-modal {
    align-items: flex-end;
    padding: 0;
  }
  .sky-modal-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-modal,
  .sky-modal-panel {
    transition: none;
  }
}

/* Footer status badge + popover. */
.sky-status-wrap {
  position: relative;
  display: inline-flex;
}
button.sky-foot-badge {
  background: none;
  font: inherit;
  cursor: pointer;
}
button.sky-foot-badge:hover,
.sky-status-wrap.is-open button.sky-foot-badge {
  background: rgb(255 255 255 / 0.06);
  color: #fff;
}
button.sky-foot-badge:focus-visible {
  outline: 2px solid var(--sky-blue);
  outline-offset: 2px;
}
.sky-status-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 50;
  width: min(340px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: #242323;
  color: #fff;
  box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out,
    visibility 0s linear 0.18s;
}
.sky-status-wrap.is-open .sky-status-pop {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out;
}
.sky-status-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  font-size: 14px;
}
.sky-status-head strong {
  font-weight: 500;
}
.sky-status-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sky-status-list li {
  padding: 10px 0;
}
.sky-status-list li + li {
  border-top: 1px solid rgb(255 255 255 / 0.06);
}
.sky-status-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.sky-status-ok {
  color: #4ade80;
  font-size: 12px;
}
.sky-status-bars {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 2px;
  margin-top: 8px;
}
.sky-status-bars span {
  height: 16px;
  border-radius: 2px;
  background: #22c55e;
  opacity: 0.85;
  transform-origin: bottom;
  animation: sky-status-bar 0.4s ease-out both;
}
.sky-status-wrap.is-open .sky-status-bars span:nth-child(3n) {
  animation-delay: 0.04s;
}
.sky-status-wrap.is-open .sky-status-bars span:nth-child(3n + 1) {
  animation-delay: 0.08s;
}
@keyframes sky-status-bar {
  from {
    transform: scaleY(0.3);
    opacity: 0;
  }
}
.sky-status-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: rgb(255 255 255 / 0.4);
}
@media (max-width: 767px) {
  .sky-status-pop {
    right: auto;
    left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-status-pop,
  .sky-status-bars span {
    transition: none;
    animation: none;
  }
}

/* Schedule skeleton: day view with aircraft lanes. */
.sk-day {
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow:
    0 0 0 1px #e7e4df,
    0 1px 2px rgb(0 0 0 / 0.04);
}
.sk-day-head {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-left: 30px;
  padding: 9px 8px;
  border-bottom: 1px solid #efede9;
}
.sk-day-head .sk-bar {
  width: 60%;
}
.sk-day-body {
  position: relative;
  display: grid;
  grid-template-columns: 30px repeat(4, 1fr);
  height: 104px;
  background-image: linear-gradient(#f3f1ee 1px, transparent 1px);
  background-size: 100% 26px;
}
.sk-day-gutter {
  display: grid;
  align-content: space-between;
  padding: 6px 6px;
  border-right: 1px solid #efede9;
}
.sk-day-gutter .sk-bar {
  width: 100%;
}
.sk-lane {
  position: relative;
  border-right: 1px solid #f3f1ee;
}
.sk-lane:last-child {
  border-right: 0;
}
.sk-res {
  position: absolute;
  left: 4px;
  right: 4px;
  display: block;
  padding: 6px;
  border-left: 3px solid var(--sky-blue);
  border-radius: 5px;
  background: #e9f0fe;
}
.sk-res .sk-bar {
  width: 70%;
  background: #c9d9fb;
}
.sk-res.is-dark {
  border-color: #1c1b17;
  background: #efedea;
}
.sk-res.is-dark .sk-bar {
  background: #d9d5cf;
}
.sky-cs-all .sky-cs-grid-3 {
  margin-top: 44px;
}

/* Page titles on white: a touch heavier than the regular cut (Lausanne ships 400 and 700 only, so a
   hairline stroke in the text color adds the weight). */
.sw-title,
.cr-title {
  -webkit-text-stroke: 0.012em currentColor;
  letter-spacing: -0.015em;
}

/* Titles stay on one line on wider screens. */
@media (min-width: 768px) {
  .sw-title,
  .cr-title {
    white-space: nowrap;
  }
}

/* ══ Contact page ══════════════════════════════════════════════════════ */
.ct-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 64px;
  align-items: start;
  padding-top: calc(var(--nav-height, 62px) + 64px);
  padding-bottom: 128px;
}
.ct-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
.ct-option {
  display: flex;
  gap: 14px;
}
.ct-option-icon {
  flex: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--sky-tile);
  font-size: 20px !important;
}
.ct-option h2 {
  margin: 2px 0 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--sky-ink);
}
.ct-option p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--sky-muted);
}
.ct-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sky-blue);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.ct-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ct-card {
  padding: 28px;
  border: 1px solid #ece9e4;
  border-radius: 14px;
  background: #fafaf9;
}
.ct-card-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 500;
  color: var(--sky-ink);
}
@media (max-width: 991px) {
  .ct-page {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 640px) {
  .ct-options {
    grid-template-columns: 1fr;
  }
}

/* Inline SVG icons (replace the Material Symbols font). Size follows font-size. */
.ms {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
:where(.ms):not([class*="icon"]) {
  font-size: 24px;
  width: 1em;
  height: 1em;
}
.ms > svg {
  display: block;
  width: 1em;
  height: 1em;
  flex: none;
}

/* Page hero rhythm (switching, careers, contact): eyebrow → title → lead → actions. */
.sw-hero .sw-eyebrow,
.cr-hero .sw-eyebrow {
  margin: 0 0 22px;
}
.sw-hero .sw-lead,
.cr-hero .sw-lead,
.ct-page .sw-lead {
  max-width: 560px;
  margin-top: 26px;
}
.sw-hero .sw-actions,
.cr-hero .sw-actions {
  margin-top: 32px;
}

/* ══ Legal pages ═══════════════════════════════════════════════════════ */
.lg-page {
  display: grid;
  grid-template-columns: minmax(0, 760px) 220px;
  justify-content: space-between;
  gap: 64px;
  padding-top: calc(var(--nav-height, 62px) + 64px);
  padding-bottom: 128px;
}
.lg-doc {
  color: var(--sky-muted);
  font-size: 15.5px;
  line-height: 1.65;
}
.lg-doc .lg-title {
  margin: 0 0 20px;
  color: var(--sky-ink);
}
.lg-doc header {
  margin-bottom: 48px;
}
.lg-doc header p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
}
.lg-doc header strong {
  color: var(--sky-ink);
  font-weight: 500;
}
.lg-doc section {
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid var(--sky-line);
}
.lg-doc section:first-of-type {
  margin-top: 0;
}
.lg-doc h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--sky-ink);
  scroll-margin-top: 96px;
}
.lg-doc h3 {
  margin: 28px 0 10px;
  font-size: 17px;
  font-weight: 500;
  color: var(--sky-ink);
  scroll-margin-top: 96px;
}
.lg-doc p {
  margin: 0 0 14px;
}
.lg-doc ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.lg-doc li {
  margin: 6px 0;
}
.lg-doc strong {
  color: var(--sky-ink);
  font-weight: 500;
}
.lg-doc a {
  color: var(--sky-blue);
  text-decoration: underline;
  text-decoration-color: rgb(61 126 242 / 0.35);
  text-underline-offset: 2px;
}
.lg-doc a:hover {
  text-decoration-color: currentColor;
}
.lg-doc code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--sky-tile);
  font-size: 13px;
}
.lg-doc .sky-legal-callout {
  margin: 0 0 24px;
  padding: 16px 20px;
  border-left: 3px solid var(--sky-blue);
  border-radius: 0 8px 8px 0;
  background: #f3f7fe;
  color: var(--sky-ink);
}
.lg-doc .sky-legal-callout p {
  margin: 0;
}
.lg-doc .sky-legal-table {
  margin: 8px 0 18px;
  overflow-x: auto;
  border: 1px solid var(--sky-line);
  border-radius: 8px;
}
.lg-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.45;
}
.lg-doc th,
.lg-doc td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--sky-line);
}
.lg-doc th {
  background: #fafaf9;
  color: var(--sky-ink);
  font-weight: 500;
  white-space: nowrap;
}
.lg-doc tr:last-child td {
  border-bottom: 0;
}
.lg-doc .sky-legal-button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #d9d5cf;
  border-radius: 6px;
  background: #fff;
  color: var(--sky-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.lg-doc .sky-legal-button:hover {
  background: #f8f7f5;
}
.lg-more {
  position: sticky;
  top: calc(var(--nav-height, 62px) + 32px);
  display: grid;
  align-content: start;
  gap: 10px;
  font-size: 14px;
}
.lg-more p {
  margin: 0 0 4px;
  color: var(--sky-muted);
}
.lg-more a {
  color: var(--sky-ink);
  text-decoration: none;
}
.lg-more a:hover {
  color: var(--sky-blue);
}
@media (max-width: 991px) {
  /* minmax(0, 1fr): a wide table scrolls inside the column instead of widening the page. */
  .lg-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .lg-doc {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .lg-doc table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  .lg-doc th {
    white-space: normal;
  }
  .lg-more {
    position: static;
    padding-top: 24px;
    border-top: 1px solid var(--sky-line);
  }
}

/* Product cards: one-line descriptions; inline agent icons. */
/* Copy is kept short enough for one line; no clipping (it cut off descenders and icons). */
.sky-card-desc {
  white-space: nowrap;
  overflow: visible;
}
.sky-agent-icons {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  vertical-align: middle;
}
/* App icons as-is (they have their own rounded corners), tilted left, right, left. */
.sky-agent-icons img {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform 0.25s var(--sky-ease);
}
.sky-agent-icons img + img {
  margin-left: -2px;
}
.sky-agent-icons img:nth-child(odd) {
  transform: rotate(-8deg);
}
.sky-agent-icons img:nth-child(even) {
  transform: rotate(7deg);
}
.sky-agent-icons img:nth-child(2) {
  position: relative;
  z-index: 1;
}
.sky-agent-icons img:nth-child(3) {
  position: relative;
  z-index: 2;
}
/* Hovering the icons themselves straightens them and fans them out slightly. */
.sky-agent-icons:hover img {
  transform: rotate(0deg) translateY(-1px);
}
.sky-agent-icons:hover img + img {
  margin-left: 3px;
}
.sky-agent-icons img {
  transition:
    transform 0.25s var(--sky-ease),
    margin 0.25s var(--sky-ease);
}

.sky-card-desc {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}
/* Keep the "For startups…" cards at their earlier height after the copy got shorter. */
@media (min-width: 992px) {
  .sky-card-no-art {
    min-height: 388px;
  }
}

/* App-icon hover card on suite cards (same dark style as the status popover). */
.sky-agent-icons {
  position: relative;
  outline: none;
}
.sky-agent-icons:focus-visible img {
  transform: rotate(0deg) translateY(-1px);
}
.sky-agent-icons:focus-visible img + img {
  margin-left: 3px;
}
.sky-app-tip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  z-index: 50;
  display: block;
  width: 260px;
  padding: 14px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 12px;
  background: #242323;
  color: #fff;
  box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.5);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out,
    visibility 0s linear 0.18s;
}
.sky-agent-icons:hover .sky-app-tip,
.sky-agent-icons:focus-visible .sky-app-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity 0.18s ease-out 0.05s,
    transform 0.18s ease-out 0.05s;
}
/* Suite cards clip their media; the hover card needs to escape the card. */
.overflow-hidden:has(.sky-agent-icons) {
  overflow: visible;
}
.overflow-hidden:has(.sky-agent-icons:hover),
.overflow-hidden:has(.sky-agent-icons:focus-visible) {
  position: relative;
  z-index: 5;
}
.sky-app-tip-lead {
  display: block;
  padding-bottom: 10px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
  color: rgb(255 255 255 / 0.85);
}
.sky-app-tip-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-top: 10px;
}
.sky-agent-icons .sky-app-tip-row img {
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
  border-radius: 7px;
  transform: none;
}
.sky-app-tip-row strong {
  display: block;
  margin-bottom: 2px;
  font-weight: 500;
}
.sky-app-tip-pt {
  display: block;
  padding-left: 10px;
  position: relative;
  color: rgb(255 255 255 / 0.6);
  font-size: 12px;
}
.sky-app-tip-pt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}
@media (hover: none) {
  .sky-app-tip {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-app-tip {
    transition: none;
  }
}

/* Training card: live Flight Replay (public/ramp/replay/training-replay.js). */
.sky-card-media.has-replay {
  position: relative;
}
.sky-replay {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Fades out at the sides and top, so the flight appears out of the card. */
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.12) 5%, rgb(0 0 0 / 0.4) 11%, rgb(0 0 0 / 0.75) 18%, #000 27%, #000 73%, rgb(0 0 0 / 0.75) 82%, rgb(0 0 0 / 0.4) 89%, rgb(0 0 0 / 0.12) 95%, transparent), linear-gradient(180deg, transparent, rgb(0 0 0 / 0.35) 10%, rgb(0 0 0 / 0.8) 22%, #000 32%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, rgb(0 0 0 / 0.12) 5%, rgb(0 0 0 / 0.4) 11%, rgb(0 0 0 / 0.75) 18%, #000 27%, #000 73%, rgb(0 0 0 / 0.75) 82%, rgb(0 0 0 / 0.4) 89%, rgb(0 0 0 / 0.12) 95%, transparent), linear-gradient(180deg, transparent, rgb(0 0 0 / 0.35) 10%, rgb(0 0 0 / 0.8) 22%, #000 32%);
  mask-composite: intersect;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.sky-replay.is-ready {
  opacity: 1;
}
/* Beats mapbox-gl.css's .mapboxgl-map { position: relative }, which would collapse it. */
.sky-replay .sky-replay-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 991px) {
  .sky-card-media.has-replay {
    height: 240px;
  }
}

/* Request a Demo success: "Book a demo here" link under the main button. */
.sky-done-alt {
  margin: 14px 0 0;
  font-size: 14px;
  color: #6b6b6b;
}
.sky-done-alt a {
  color: var(--sky-blue);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Feature popups ("Get to know" cards, Features menu). */
.sky-feature-modal .sky-modal-panel {
  width: min(920px, 100%);
  padding: 44px 48px;
}
.sky-ft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.sky-ft-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 10px;
  background: rgb(61 126 242 / 0.1);
  color: var(--sky-blue);
}
.sky-ft-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.sky-feature-modal h2 {
  margin: 0 0 12px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.sky-ft-lead {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.55;
  color: #5c5c5c;
}
.sky-ft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sky-ft-apps-label {
  margin: 28px 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.sky-ft-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sky-ft-apps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.sky-ft-apps img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.sky-ft-points {
  display: grid;
  gap: 18px;
  align-content: start;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.sky-ft-points li {
  display: flex;
  gap: 12px;
}
.sky-ft-check {
  flex: none;
  margin-top: 1px;
  color: var(--sky-blue);
}
.sky-ft-check svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.sky-ft-points strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.sky-ft-points span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}
@media (max-width: 767px) {
  .sky-feature-modal .sky-modal-panel {
    padding: 28px 20px 32px;
  }
  .sky-ft-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .sky-feature-modal h2 {
    font-size: 24px;
  }
}

/* Footer link columns (content.footerColumns): reference link style, our structure. */
.sky-foot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 24px;
}
.sky-foot-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  text-align: left;
  cursor: default;
  pointer-events: none;
}
.sky-foot-chev {
  display: none;
  margin-left: auto;
}
.sky-foot-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.sky-foot-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
a.sky-foot-link:hover,
button.sky-foot-link:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sky-foot-link.is-planned {
  cursor: default;
}
@media (max-width: 991px) {
  .sky-foot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Phones: each column is an accordion (ramp-site.js → footerAccordions). */
@media (max-width: 767px) {
  .sky-foot-grid {
    display: block;
  }
  .sky-foot-col {
    border-top: 1px solid rgb(255 255 255 / 0.12);
  }
  .sky-foot-head {
    margin: 0;
    padding: 20px 0;
    cursor: pointer;
    pointer-events: auto;
  }
  .sky-foot-chev {
    display: block;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.2s;
  }
  .sky-foot-head[aria-expanded="true"] .sky-foot-chev {
    transform: rotate(-135deg) translateY(-3px);
  }
  .sky-foot-col:not(.is-open) .sky-foot-links {
    display: none;
  }
  /* Compact on phones: smaller links, tight rows, and the bottom block starts right after. */
  .sky-foot-head {
    padding: 16px 0;
    font-size: 15px;
  }
  .sky-foot-links {
    gap: 11px;
    padding-bottom: 18px;
  }
  .sky-foot-link {
    font-size: 15px;
    line-height: 20px;
  }
  .sky-foot {
    margin-top: 0 !important;
    padding-top: 28px !important;
  }
}

/* "All systems operational": the green dot pulses. */
.sky-foot-dot {
  position: relative;
}
.sky-foot-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #22c55e;
  animation: sky-dot-pulse 2s ease-out infinite;
}
@keyframes sky-dot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-foot-dot::after {
    animation: none;
  }
}

/* Cards with a visual from the previous homepage (public/ramp/v1-cards.css). */
.sky-card-media.has-art {
  position: relative;
}
.sky-v1-art {
  position: absolute;
  inset: 0;
  --feature-card-bg: #f4f3f1;
  --feature-card-visual-mask: linear-gradient(to bottom, #000 0%, #000 78%, transparent 96%);
}

/* Popup buttons: compact. */
.sky-ft-actions .sw-btn {
  height: 36px;
  min-height: 0;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
}
/* Training popup: the live Flight Replay across the top. */
.sky-ft-media {
  position: relative;
  height: 300px;
  margin: -44px -48px 32px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: #2a2a3a;
}
.sky-ft-media .sky-replay {
  -webkit-mask-image: none;
  mask-image: none;
}
@media (max-width: 767px) {
  .sky-ft-media {
    height: 220px;
    margin: -28px -20px 24px;
    border-radius: 16px 16px 0 0;
  }
}

/* Previous-homepage visuals fill the card's media area (they were sized for a shorter copy block). */
.sky-v1-art .built-for-mobile-visual,
.sky-v1-art .enrollment-automation-visual,
.sky-v1-art .compliance-scanner-stage {
  top: 0;
  bottom: 0;
}
.sky-v1-art .compliance-scanner-scene {
  top: 8%;
}
/* The phone's notifications slide up on card hover (as on the previous homepage). */
[data-sky-feature]:hover .built-for-mobile-notifications,
[data-sky-feature]:focus-within .built-for-mobile-notifications {
  width: 14.5rem;
  opacity: 1;
  transform: translateX(-50%) translateY(-3.25rem) scale(1.02);
}
[data-sky-feature]:hover .built-for-mobile-notification--secondary,
[data-sky-feature]:focus-within .built-for-mobile-notification--secondary {
  margin-top: 0.375rem;
  opacity: 1;
  transform: scale(1);
}
[data-sky-feature]:hover .built-for-mobile-phone-wrap {
  transform: translateX(-50%) translateY(48%) scale(1.03);
}
[data-sky-feature]:hover .enrollment-automation-form-wrap {
  transform: translateX(-50%) translateY(30%) scale(1.03);
}
.sky-feature-modal .sky-modal-close {
  z-index: 3;
  background: rgb(255 255 255 / 0.9);
  border-radius: 8px;
}

/* Replay: "Lesson logged" card after the landing (training-replay.ts → lessonCard). */
.sky-lesson {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  width: 196px;
  padding: 12px 14px 10px;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.94);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.45);
  color: #1a1919;
  font-size: 12px;
  opacity: 0;
  transform: translate(-50%, 10px) scale(0.98);
  transition:
    opacity 0.45s ease-out,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.sky-lesson.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}
.sky-lesson-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
}
.sky-lesson-check {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sky-blue);
}
.sky-lesson-check svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sky-lesson-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: #555;
}
.sky-lesson-stars {
  color: #f5b301;
  letter-spacing: 1px;
}
.sky-lesson-sign {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #ececec;
}
.sky-lesson-sign svg {
  display: block;
  width: 120px;
  height: 30px;
  fill: none;
  stroke: #1a1919;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sky-lesson-sign path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.sky-lesson.is-shown .sky-lesson-sign path {
  transition: stroke-dashoffset 1.4s ease-in-out 0.6s;
  stroke-dashoffset: 0;
}
.sky-lesson-sign span {
  display: block;
  font-size: 10px;
  color: #999;
}
/* Mapbox's logo is required by its terms; keep it small and quiet in the faded corner. */
.sky-replay .mapboxgl-ctrl-logo {
  opacity: 0.35;
  transform: scale(0.75);
  transform-origin: bottom left;
}

/* Previous-homepage visuals: same width as the card text, rising from the bottom. */
.sky-v1-art {
  left: 24px;
  right: 24px;
}
.sky-v1-art .built-for-mobile-visual,
.sky-v1-art .enrollment-automation-visual {
  left: 0;
  right: 0;
}
.sky-v1-art .enrollment-automation-form-wrap,
.sky-v1-art .built-for-mobile-phone-wrap {
  width: 100%;
}
/* The phone hangs from the top of the card's media area, so its status bar shows at every card width. */
.sky-v1-art .built-for-mobile-phone-wrap {
  top: 12px;
  bottom: auto;
  width: min(100%, 17rem);
  transform: translateX(-50%);
  transform-origin: top center;
}
[data-sky-feature]:hover .sky-v1-art .built-for-mobile-phone-wrap,
a:hover .sky-v1-art .built-for-mobile-phone-wrap {
  transform: translateX(-50%) translateY(-4px);
}

/* Homepage slider: customer story cards (build-ramp.mjs → homeSlides). */
.sky-slide-card {
  background-color: #1a1919;
  background-size: cover;
  background-position: center;
}
.sky-slide-card.is-logo {
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--slide-accent, #3d7ef2) 42%, transparent), transparent 62%), #161616;
}
/* School logo on the photo: the school's own colored logo, no container. */
.sky-slide-logo {
  display: block;
  max-width: 78%;
  color: #fff;
  font-size: 18px;
}
.sky-slide-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 46px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 1px 6px rgb(0 0 0 / 0.25));
}
.sky-slide-logo.is-outlined img {
  filter: drop-shadow(0 0 0.6px #fff) drop-shadow(0 0 0.6px #fff) drop-shadow(0 0 0.6px #fff);
}
.sky-slide-hover {
  transition: opacity 0.3s;
}
/* Fade in the school's logo color (--slide-accent, set per slide): short at rest, and it rises
   up the photo on hover. */
.sky-slide-shade {
  background: linear-gradient(
    to top,
    color-mix(in oklab, var(--slide-accent, #111) 80%, #000) 0%,
    color-mix(in oklab, var(--slide-accent, #111) 62%, transparent) 42%,
    transparent 78%
  );
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s;
}
@media (min-width: 992px) {
  .sky-slide-hover {
    opacity: 0;
  }
  .sky-slide-shade {
    opacity: 0.75;
    transform: scaleY(0.3);
  }
  .sky-slide-card:hover .sky-slide-hover {
    opacity: 1;
  }
  .sky-slide-card:hover .sky-slide-shade {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sky-slide-shade {
    transition: opacity 0.3s;
  }
}
.sky-mobile-suite-icon svg {
  width: 28px;
  height: 28px;
  fill: var(--sky-ink);
}
.sky-mobile-suite-arrow svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.sky-replay .sky-replay-map {
  transition: opacity 0.4s ease-out;
}
.sky-replay.is-fading .sky-replay-map {
  opacity: 0;
}
/* Enrollment visual: a little narrower and higher so the form's rounded corners show. */
.sky-v1-art .enrollment-automation-form-wrap {
  width: 88%;
  transform: translateX(-50%) translateY(20%) scale(1);
}
[data-sky-feature]:hover .enrollment-automation-form-wrap,
a:hover .sky-v1-art .enrollment-automation-form-wrap {
  transform: translateX(-50%) translateY(18%) scale(1.01);
}
a:hover .sky-v1-art .built-for-mobile-notifications {
  width: 14.5rem;
  opacity: 1;
  transform: translateX(-50%) translateY(-3.25rem) scale(1.02);
}
a:hover .sky-v1-art .built-for-mobile-notification--secondary {
  margin-top: 0.375rem;
  opacity: 1;
  transform: scale(1);
}
.sky-slide-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Behind a light logo: a soft dark fade at the top of the photo. */
.sky-slide-scrim {
  position: absolute;
  inset: 0 0 auto;
  height: 42%;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.22) 45%, transparent);
  pointer-events: none;
}
/* Behind a colored logo on blue sky: the same fade, light. */
.sky-slide-scrim.is-light {
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.3) 45%, transparent);
}
.sky-font-icon > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Footer: "Proudly built in San Diego (KCRQ)" next to the copyright, same size. */
.sky-foot-copy {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
.sky-foot-built {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sky-foot-flag {
  flex: none;
  width: 1.45em;
  height: auto;
  aspect-ratio: 19 / 10;
}

/* Billing card: a payments table like the app's Billing table, running off the card's right edge
   (build-ramp.mjs → billingArt). */
.sky-card-media.has-billing {
  position: relative;
  container-type: inline-size;
}
.sky-billing {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 97%);
}
.sky-billing-panel {
  position: absolute;
  top: 4px;
  left: 24px;
  width: 360px;
  width: calc(100cqw + 40px);
  overflow: hidden;
  border: 1px solid rgb(229 229 229 / 0.7);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 14px 30px -22px rgb(0 0 0 / 0.16);
  font-variant-numeric: tabular-nums;
}
.sky-billing-row {
  display: grid;
  grid-template-columns: 120px 104px 1fr;
  /* The amount starts 54px before the card's edge: "$800.00" shows and "USD" runs off it. */
  grid-template-columns: calc((100cqw - 88px) * 0.55) calc((100cqw - 88px) * 0.45) 1fr;
  align-items: center;
  height: 31px;
  padding-left: 10px;
  border-top: 1px solid #f5f5f5;
  color: #171717;
  font-size: 11px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.sky-billing-row.is-head {
  height: 26px;
  border-top: 0;
  border-bottom: 1px solid rgb(229 229 229 / 0.7);
  background: #fafafa;
  color: #737373;
  font-size: 10.5px;
  font-weight: 500;
}
.sky-billing-row.is-head + .sky-billing-row {
  border-top: 0;
}
.sky-billing-customer {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Gray with white initials, like Apple's contact avatars. */
.sky-billing-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: linear-gradient(180deg, #a5aab4, #858a94);
  color: #fff;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sky-billing-name {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
}
.sky-billing-card {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #525252;
  font-size: 10.5px;
}
.sky-billing-card img {
  flex: none;
  width: 16px;
  height: 10px;
  border-radius: 1.5px;
}
.sky-billing-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-weight: 500;
}
.sky-billing-amount span {
  color: #737373;
  font-size: 9.5px;
  font-weight: 400;
}

/* Hero heading: the Dispatch takeoff icon after "Save both.", as tall as the capitals. */
.sky-hero-end {
  white-space: nowrap;
}
.sky-hero-plane {
  display: inline-block;
  width: auto;
  height: 0.72em;
  margin-left: 0.14em;
  vertical-align: baseline;
}

/* AI Agents card: Arlo's home screen, then a conversation (build-ramp.mjs → arloArt; played by
   ramp-site.js → arloDemo). Sizes and colors follow the app's Arlo page, scaled to the card. */
.sky-card-media.has-arlo {
  position: relative;
}
.sky-arlo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #171717;
  transition: opacity 0.45s ease;
}
.sky-arlo.is-out {
  opacity: 0;
}
/* Home screen: the heading (left-aligned, as in the app) and composer, centered in the card. When
   the prompt sends, they rise and fade away and the conversation takes the card. */
.sky-arlo-dock {
  position: absolute;
  right: 24px;
  bottom: calc(50% + 8px);
  left: 24px;
  transform: translateY(50%);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sky-arlo.is-docked .sky-arlo-dock {
  opacity: 0;
  transform: translateY(calc(50% - 18px));
}
.sky-arlo-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sky-arlo-composer {
  border: 1px solid rgb(229 229 229 / 0.9);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}
.sky-arlo-input {
  position: relative;
  /* Two lines tall from the start, so typing fills the box instead of growing it. */
  height: 46px;
  overflow: hidden;
  padding: 9px 12px 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.sky-arlo-ph {
  position: absolute;
  inset: 9px 12px auto;
  overflow: hidden;
  color: #a3a3a3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sky-arlo.is-typing .sky-arlo-ph {
  opacity: 0;
  transition: none;
}
.sky-arlo-typed {
  display: block;
}
.sky-arlo.is-typing .sky-arlo-typed::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -2px;
  background: #3d7ef2;
  animation: sky-arlo-caret 1s steps(1) infinite;
}
.sky-arlo-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 8px 7px;
}
.sky-arlo-mic svg {
  display: block;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #a3a3a3;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sky-arlo-send {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #eef4fe;
  color: rgb(61 126 242 / 0.5);
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.sky-arlo.has-text .sky-arlo-send {
  background: #3d7ef2;
  color: #fff;
}
.sky-arlo-send.is-press,
.sky-arlo-btn.is-press {
  transform: scale(0.94);
}
.sky-arlo-send svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The conversation, from the top of the card down: each item grows in below the last. */
.sky-arlo-log {
  position: absolute;
  inset: 0 24px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, #000 90%, transparent);
}
.sky-arlo-log > .sky-arlo-item:first-child p {
  margin-top: 2px;
}
.sky-arlo-item {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(6px);
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sky-arlo-item > div {
  min-height: 0;
  overflow: hidden;
}
.sky-arlo-item.is-in {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}
.sky-arlo-item.is-leaving {
  transform: translateY(-10px);
}
.sky-arlo-user {
  width: fit-content;
  max-width: 88%;
  margin: 10px 0 0 auto;
  padding: 6px 10px;
  border-radius: 8px;
  /* The app's neutral-100 on white, adjusted for the card's warmer background. */
  background: #e9e7e3;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.sky-arlo-shine {
  display: inline-block;
  margin-top: 10px;
  background-image: linear-gradient(110deg, #404040 35%, #fff 50%, #404040 75%, #404040);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 11px;
  line-height: 16px;
  animation: sky-arlo-shine 2s linear infinite;
}
.sky-arlo-reply {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.sky-arlo-draft {
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid #ececec;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.04);
  color: #181818;
  font-size: 11px;
}
.sky-arlo-draft-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-bottom: 1px solid #ececec;
  font-weight: 500;
}
.sky-arlo-draft-head svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #6f6f6f;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sky-arlo-draft-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0 11px;
  padding: 5px 0;
  border-bottom: 1px solid #ececec;
  white-space: nowrap;
}
.sky-arlo-draft-row > span:first-child {
  color: #6f6f6f;
  font-size: 10.5px;
}
.sky-arlo-draft-row strong {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
}
.sky-arlo-to {
  padding: 1px 6px;
  border: 1px solid #ececec;
  border-radius: 4px;
  background: #f5f5f5;
  color: #6f6f6f;
  font-size: 10px;
  font-weight: 500;
}
.sky-arlo-draft-body {
  margin: 0;
  padding: 6px 11px 7px;
  font-size: 11px;
  line-height: 1.5;
}
.sky-arlo-draft-actions {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  padding: 5px 9px;
  border-top: 1px solid #ececec;
}
.sky-arlo-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background: #fff;
  color: #404040;
  font-size: 10.5px;
  font-weight: 500;
  transition: transform 0.15s, background-color 0.2s, border-color 0.2s;
}
.sky-arlo-btn.is-primary {
  border-color: #3d7ef2;
  background: #3d7ef2;
  color: #fff;
}
.sky-arlo-sending,
.sky-arlo-sent,
.sky-arlo-draft.is-sending .sky-arlo-send-label,
.sky-arlo-draft.is-sent .sky-arlo-send-label,
.sky-arlo-draft.is-sent .sky-arlo-sending {
  display: none;
}
.sky-arlo-draft.is-sending .sky-arlo-sending,
.sky-arlo-draft.is-sent .sky-arlo-sent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sky-arlo-draft.is-sent .sky-arlo-btn.is-primary {
  border-color: #c9e8d4;
  background: #e8f5ec;
  color: #18794e;
}
.sky-arlo-draft.is-sent .sky-arlo-btn:not(.is-primary) {
  display: none;
}
.sky-arlo-sent svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes sky-arlo-caret {
  50% { opacity: 0; }
}
@keyframes sky-arlo-shine {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* "Three ways" rows: floating product UI in the dark containers (build-ramp.mjs → waysArtHtml).
   Each scene is a 560 × 400 stage, centered and scaled to the container's width; on phones the
   cards show one at a time at full size. */
.sky-ph-slot.has-ways {
  container-type: inline-size;
}
.sky-ph-slot.has-ways .sky-ph {
  position: relative;
  overflow: hidden;
}
.sky-ways-art {
  position: absolute;
  inset: 0;
}
.sky-ways-stage {
  --s: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 560px;
  height: 400px;
  translate: -50% -50%;
  scale: var(--s);
  color: #171717;
  font-size: 12.5px;
  letter-spacing: -0.005em;
}
@container (max-width: 700px) {
  .sky-ways-stage { --s: 0.86; }
}
@container (max-width: 600px) {
  .sky-ways-stage { --s: 0.74; }
}
.sky-ways-card {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 24px 48px -20px rgb(0 0 0 / 0.55);
  animation: sky-ways-float 7s ease-in-out infinite;
}
.sky-ways-card.is-b {
  animation-delay: -3.5s;
}
.sky-ways-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #f0f0f0;
}
.sky-ways-head strong {
  font-size: 13px;
  font-weight: 600;
}
.sky-ways-tag {
  padding: 2px 7px;
  border: 1px solid #ececec;
  border-radius: 5px;
  background: #f5f5f5;
  color: #6f6f6f;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.sky-ways-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 38px;
  margin: 0 14px;
  border-bottom: 1px solid #f5f5f5;
}
.sky-ways-row:last-child {
  border-bottom: 0;
}
.sky-ways-value {
  color: #525252;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.sky-ways-toggle {
  position: relative;
  flex: none;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: #e5e5e5;
  transition: background-color 0.25s;
}
.sky-ways-toggle i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 0.25s;
}
.sky-ways-toggle.is-on {
  background: #22a35a;
}
.sky-ways-toggle.is-on i {
  transform: translateX(12px);
}
/* One toggle switches on and back off, so the panel feels live. */
.sky-ways-toggle.is-flip {
  animation: sky-ways-flip-track 6s ease-in-out infinite;
}
.sky-ways-toggle.is-flip i {
  animation: sky-ways-flip-knob 6s ease-in-out infinite;
}
/* Rules: role permissions, with booking rules overlapping below right. */
.is-rules .sky-ways-card.is-a {
  top: 28px;
  left: 24px;
  width: 300px;
}
.is-rules .sky-ways-card.is-b {
  right: 16px;
  bottom: 26px;
  width: 296px;
}
/* Dispatch: the report, with compliance flags overlapping right. */
.is-dispatch .sky-ways-card.is-a {
  top: 22px;
  left: 20px;
  width: 330px;
}
.is-dispatch .sky-ways-card.is-b {
  right: 18px;
  bottom: 34px;
  width: 236px;
}
.sky-ways-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 12px 14px 0;
}
.sky-ways-tiles > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  background: #fafafa;
}
.sky-ways-tiles span {
  color: #737373;
  font-size: 10.5px;
}
.sky-ways-tiles strong {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.sky-ways-tiles strong i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22a35a;
}
.sky-ways-risk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 4px;
}
.sky-ways-risk > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sky-ways-risk strong {
  font-size: 13px;
  font-weight: 600;
}
.sky-ways-risk span {
  color: #737373;
  font-size: 11px;
}
.sky-ways-ring {
  flex: none;
  width: 52px;
  height: 52px;
  transform: rotate(-90deg);
}
.sky-ways-ring circle {
  fill: none;
  stroke: #eef0ee;
  stroke-width: 6;
}
.sky-ways-ring circle.is-value {
  stroke: #22a35a;
  stroke-linecap: round;
}
.sky-ways-ring text {
  fill: #171717;
  font-size: 17px;
  font-weight: 600;
  transform: rotate(90deg);
  transform-origin: 32px 32px;
}
.sky-ways-factors {
  margin: 0;
  padding: 6px 14px 14px;
  list-style: none;
}
.sky-ways-factors li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  padding: 5px 8px;
  border-radius: 6px;
  background: #fafafa;
  font-size: 11.5px;
}
.sky-ways-factors b {
  min-width: 22px;
  padding: 1px 0;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  background: #fff;
  color: #525252;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}
.sky-ways-factors strong {
  font-weight: 500;
}
.sky-ways-factors span {
  color: #737373;
}
.sky-ways-factors span strong {
  color: #171717;
}
.sky-ways-flag {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid #f5f5f5;
}
.sky-ways-flag:last-child {
  border-bottom: 0;
}
.sky-ways-flag svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
}
.sky-ways-flag.is-warn svg {
  fill: #d97706;
}
.sky-ways-flag.is-ok svg {
  fill: #22a35a;
}
.sky-ways-flag > span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sky-ways-flag strong {
  font-size: 12px;
  font-weight: 500;
}
.sky-ways-flag span span {
  color: #737373;
  font-size: 11px;
}
/* Flow: the school's tools feeding one Sky Schedule. */
.sky-ways-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sky-ways-lines path {
  fill: none;
  stroke: rgb(255 255 255 / 0.12);
  stroke-width: 1.5;
}
.sky-ways-lines path.is-flow {
  stroke: #3d7ef2;
  stroke-dasharray: 3 11;
  stroke-linecap: round;
  stroke-width: 2;
  animation: sky-ways-flow 1.6s linear infinite;
}
.sky-ways-node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  translate: -50% -50%;
  border: 1px solid rgb(0 0 0 / 0.06);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px -14px rgb(0 0 0 / 0.6);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  animation: sky-ways-float 7s ease-in-out infinite;
}
.sky-ways-node:nth-of-type(2n) {
  animation-delay: -2.3s;
}
.sky-ways-node:nth-of-type(3n) {
  animation-delay: -4.6s;
}
.sky-ways-node-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #eef4fe;
}
.sky-ways-node-icon svg {
  width: 16px;
  height: 16px;
  fill: #3d7ef2;
}
.sky-ways-node-icon img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.sky-ways-hub {
  position: absolute;
  top: 200px;
  left: 280px;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  translate: -50% -50%;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 0 8px rgb(61 126 242 / 0.14), 0 24px 48px -16px rgb(0 0 0 / 0.6);
  animation: sky-ways-pulse 2.4s ease-in-out infinite;
}
.sky-ways-hub img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
/* Phones: one card at a time, full size; the flow scene scales down. */
@container (max-width: 470px) {
  .is-rules .sky-ways-stage,
  .is-dispatch .sky-ways-stage {
    --s: 1;
  }
  .is-dispatch .sky-ways-card.is-a {
    width: 318px;
  }
  .is-rules .sky-ways-card.is-b,
  .is-dispatch .sky-ways-card.is-b {
    display: none;
  }
  .is-rules .sky-ways-card.is-a,
  .is-dispatch .sky-ways-card.is-a {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .is-flow .sky-ways-stage {
    --s: 0.62;
  }
}
@keyframes sky-ways-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes sky-ways-flip-track {
  0%, 40%, 100% { background: #e5e5e5; }
  50%, 90% { background: #22a35a; }
}
@keyframes sky-ways-flip-knob {
  0%, 40%, 100% { transform: none; }
  50%, 90% { transform: translateX(12px); }
}
@keyframes sky-ways-flow {
  to { stroke-dashoffset: -28; }
}
@keyframes sky-ways-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgb(61 126 242 / 0.14), 0 24px 48px -16px rgb(0 0 0 / 0.6); }
  50% { box-shadow: 0 0 0 14px rgb(61 126 242 / 0.06), 0 24px 48px -16px rgb(0 0 0 / 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-ways-card,
  .sky-ways-node,
  .sky-ways-hub,
  .sky-ways-toggle.is-flip,
  .sky-ways-toggle.is-flip i,
  .sky-ways-lines path.is-flow {
    animation: none;
  }
}

/* "One platform…" cards: product UI in each card's media area (build-ramp.mjs → platformArt).
   Cards rise from the bottom of the card and fade out at its edge. */
.sky-kb-media.has-pf {
  position: relative;
  height: 280px;
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
}
.sky-pf-art {
  position: absolute;
  inset: 0 24px;
  color: #171717;
  font-size: 12px;
  letter-spacing: -0.005em;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}
.sky-pf-card {
  border: 1px solid #e7e7ea;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 15 15 / 0.04), 0 18px 36px -24px rgb(15 15 15 / 0.22);
}
.sky-pf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
}
.sky-pf-head strong {
  font-size: 12.5px;
  font-weight: 600;
}
.sky-pf-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  background: #f4f4f5;
  color: #52525b;
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
}
.sky-pf-chip.is-red { background: #fdecec; color: #c02626; }
.sky-pf-chip.is-amber { background: #fdf3e1; color: #a15c07; }
.sky-pf-chip.is-green { background: #e8f5ec; color: #18794e; }
.sky-pf-chip.is-blue { background: #e9f0fe; color: #2c5fd0; }
.sky-pf-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #a5aab4, #858a94);
  color: #fff;
  font-size: 8.5px;
  font-weight: 600;
}
.sky-pf-avatar.is-lg {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

/* Maintenance: a squawk, a note on it, the work order, and an aircraft's inspections. */
.is-maintenance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 14px;
  align-items: start;
}
.sky-pf-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sky-pf-item {
  display: flex;
  gap: 10px;
  padding: 10px;
}
.sky-pf-thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #f1f1f3;
}
.sky-pf-thumb svg {
  width: 18px;
  height: 18px;
  fill: #a1a1aa;
}
.sky-pf-thumb {
  overflow: hidden;
}
.sky-pf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sky-pf-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.sky-pf-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.sky-pf-chips {
  display: flex;
  gap: 4px;
}
.sky-pf-tail {
  color: #71717a;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.sky-pf-item strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sky-pf-desc {
  overflow: hidden;
  color: #52525b;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sky-pf-meta {
  color: #71717a;
  font-size: 10.5px;
}
.sky-pf-note {
  display: flex;
  gap: 8px;
  margin-left: 22px;
  padding: 8px 10px;
}
.sky-pf-note > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sky-pf-note-head {
  display: flex;
  gap: 6px;
  align-items: baseline;
}
.sky-pf-note-head strong {
  font-size: 11.5px;
  font-weight: 600;
}
.sky-pf-note-head span {
  color: #a1a1aa;
  font-size: 10.5px;
}
.sky-pf-note-text {
  color: #3f3f46;
  font-size: 11.5px;
  line-height: 1.4;
}
.sky-pf-insp-cols,
.sky-pf-insp-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 12px;
}
.sky-pf-insp-cols {
  padding: 7px 0 5px;
  color: #71717a;
  font-size: 10.5px;
  font-weight: 500;
}
.sky-pf-insp-row {
  padding: 7px 0;
  border-top: 1px solid #f4f4f5;
  font-size: 11.5px;
}
.sky-pf-insp-row > span:first-child {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sky-pf-insp-row > span:last-child {
  flex: none;
  color: #52525b;
  font-variant-numeric: tabular-nums;
}
.sky-pf-insp-row.is-due > span:last-child {
  color: #a15c07;
  font-weight: 600;
}

/* Integrations: one app per row, each its own card (name with a short line under it), all six in view. */
.sky-kb-media.has-pf {
  height: 300px;
}
.sky-pf-art.is-integrations {
  -webkit-mask-image: none;
  mask-image: none;
}
.sky-pf-int {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sky-pf-int-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 50px;
  padding: 0 10px 0 11px;
  border-radius: 11px;
}
.sky-pf-int-tile img {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}
/* White app icons: a soft edge and shadow so they sit off the card. */
.sky-pf-int-tile img.is-light {
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 3px rgb(0 0 0 / 0.14);
}
.sky-pf-int-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  white-space: nowrap;
}
.sky-pf-int-name strong {
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.sky-pf-int-name span {
  overflow: hidden;
  color: #71717a;
  font-size: 10.5px;
  line-height: 1.25;
  text-overflow: ellipsis;
}
.sky-pf-int-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 5px;
  background: #3d7ef2;
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
}

/* Reports: total flight hours over time, with an airport's visits from the flight map. */
.is-reports .sky-pf-hours {
  width: min(100%, 340px);
  padding: 14px 14px 10px;
}
.is-reports .sky-pf-seg {
  margin-top: 12px;
}
.sky-pf-hours-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.sky-pf-hours-top > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sky-pf-big {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.sky-pf-big small {
  font-size: 15px;
  letter-spacing: -0.01em;
}
.sky-pf-sub {
  color: #71717a;
  font-size: 11px;
}
.sky-pf-month {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  color: #71717a;
  font-size: 10.5px;
}
.sky-pf-month strong {
  color: #171717;
  font-size: 12px;
  font-weight: 600;
}
.sky-pf-line {
  display: block;
  width: 100%;
  height: 74px;
  margin: 12px 0 4px;
  overflow: visible;
}
.sky-pf-line path {
  fill: none;
  stroke: #1d8cf8;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.sky-pf-line circle {
  fill: #1d8cf8;
}
.sky-pf-seg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  color: #71717a;
  font-size: 10.5px;
  text-align: center;
  white-space: nowrap;
}
.sky-pf-seg span {
  padding: 5px 0;
  border-radius: 6px;
}
.sky-pf-seg .is-on {
  background: #f4f4f5;
  color: #171717;
  font-weight: 500;
}
.sky-pf-rev {
  position: absolute;
  top: 118px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 190px;
  padding: 10px 12px;
}
.sky-pf-rev-label {
  color: #71717a;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sky-pf-rev-value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.sky-pf-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 30px;
  margin-top: 6px;
}
.sky-pf-bars i {
  flex: 1;
  border-radius: 3px 3px 1px 1px;
  background: #d6e6fd;
}
.sky-pf-bars i.is-now {
  background: #1d8cf8;
}

/* Workflow: the canvas (trigger and steps, in the app's step colors) and its status and log. */
.is-workflow {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 14px;
  align-items: start;
}
.sky-pf-canvas {
  height: 280px;
}
.sky-pf-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 320px);
  margin: 0 auto;
}
.sky-pf-art.is-workflow {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}
.sky-pf-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
}
.sky-pf-tile {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fdf1e7;
  color: #171717;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.1;
}
.sky-pf-tile small {
  color: #c2410c;
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sky-pf-trigger > span:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.sky-pf-trigger strong {
  font-size: 13.5px;
  font-weight: 600;
}
.sky-pf-step-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #71717a;
  font-size: 10.5px;
}
.sky-pf-step-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  border: 1px solid #ececec;
  border-radius: 5px;
  background: #fff;
  color: #3f3f46;
  font-size: 10px;
  font-weight: 500;
}
.sky-pf-step-chip svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.sky-pf-step-chip img {
  width: 11px;
  height: 11px;
}
.sky-pf-link {
  display: block;
  width: 1px;
  height: 18px;
  background: #cfcfd4;
}
.sky-pf-step {
  --frame: #e6f2ea;
  --dot: #1b7a4a;
  width: 100%;
  padding: 0 3px 3px;
  border-radius: 10px;
  background: var(--frame);
}
.sky-pf-step.is-ai { --frame: #f3ebe3; --dot: #c17a4a; }
.sky-pf-step.is-email { --frame: #e4eef8; --dot: #3d7ef2; }
.sky-pf-step-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px 6px;
  color: #3f3f46;
  font-size: 11px;
  font-weight: 500;
}
.sky-pf-step-label b {
  margin-left: auto;
  color: #a1a1aa;
  font-weight: 500;
}
.sky-pf-step-label i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dot);
}
.sky-pf-step {
  padding: 0 4px 4px;
}
.sky-pf-step-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 12px 11px;
  border-radius: 8px;
  background: #fff;
}
.sky-pf-step-body strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sky-pf-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sky-pf-status {
  padding: 12px;
}
.sky-pf-status-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.sky-pf-status-top > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sky-pf-status-top strong {
  font-size: 14px;
  font-weight: 600;
}
.sky-pf-status-top span span {
  color: #71717a;
  font-size: 11px;
}
.sky-pf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 10px;
}
.sky-pf-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 7px;
  border-radius: 7px;
  background: #f4f4f5;
}
.sky-pf-stats span {
  color: #71717a;
  font-size: 9.5px;
}
.sky-pf-stats strong {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sky-pf-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 12px;
  padding: 7px 0;
  border-top: 1px solid #f4f4f5;
  font-size: 10.5px;
  white-space: nowrap;
}
.sky-pf-log-row:first-of-type {
  border-top: 0;
}
.sky-pf-log-row > span:nth-child(2) {
  color: #71717a;
}

/* Narrower cards: one panel each. */
@container (max-width: 520px) {
  .is-maintenance,
  .is-workflow {
    grid-template-columns: minmax(0, 1fr);
  }
  .sky-pf-insp,
  .sky-pf-side {
    display: none;
  }
}
@container (max-width: 400px) {
  .sky-pf-rev {
    display: none;
  }
}

.sky-ways-risk-label {
  color: #737373;
  font-size: 10px !important;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hero entrance: the copy slides in from the right, line by line, then the product image follows.
   CSS only, so nothing waits on JavaScript; skipped for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .sky-hero-copy > * {
    animation: sky-hero-copy-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .sky-hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .sky-hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .sky-hero-copy > :nth-child(4) { animation-delay: 0.24s; }
  .sky-hero-img,
  .sky-hero-art-mobile img {
    animation: sky-hero-art-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
  }
}
@keyframes sky-hero-copy-in {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes sky-hero-art-in {
  from {
    opacity: 0;
    transform: translate3d(7%, 2%, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Arlo's email card: a small Gmail mark on the draft and on "Email sent". */
.sky-arlo-gmail {
  flex: none;
  width: 12px;
  height: 12px;
  object-fit: contain;
}

/* First-month timeline: an icon on each card's heading. */
.sky-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sky-step-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #eef4fe;
}
.sky-step-icon svg {
  width: 17px;
  height: 17px;
  fill: #3d7ef2;
}

/* ══ About page (redesign/scripts/pages/about.mjs) ══════════════════════════ */
main[data-sky-page="about"] {
  background: #fff;
  color: var(--sky-ink);
}
.ab-hero {
  padding: calc(var(--nav-height, 62px) + 96px) 0 56px;
}
.ab-eyebrow {
  margin: 0 0 20px;
  color: #3d7ef2;
  font-size: 15px;
  font-weight: 500;
}
.ab-title {
  max-width: 980px;
  margin: 0;
  -webkit-text-stroke: 0.012em currentColor;
  text-wrap: balance;
}
.ab-lead {
  max-width: 680px;
  margin: 28px 0 0;
  color: var(--sky-muted);
  font-size: 20px;
  line-height: 1.5;
}
.ab-wide {
  padding-bottom: 24px;
}
.ab-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #f2f1ee;
}
.ab-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ab-photo.is-wide {
  aspect-ratio: 21 / 9;
}
.ab-photo.is-tall {
  aspect-ratio: 4 / 5;
}
/* Until a photo is set: a soft sky with a faint airplane, no text. */
.ab-photo.is-empty {
  background: linear-gradient(180deg, #dfe9f8 0%, #edf2f9 55%, #f5f3ef 100%);
}
.ab-photo.is-empty span {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}
.ab-photo.is-empty svg {
  width: 44px;
  height: 44px;
  fill: rgb(61 126 242 / 0.22);
  transform: rotate(45deg);
}
/* Vertical spacing only: the side padding comes from .sky-cs-wrap. */
.ab-section {
  padding-top: 72px;
  padding-bottom: 72px;
}
.ab-split {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 760px);
  gap: 48px;
  /* A divider as wide as the content (inside the wrap's side padding). */
  background: linear-gradient(var(--sky-line), var(--sky-line)) center top / calc(100% - 2 * clamp(16px, 4.45vw, 64px)) 1px no-repeat;
}
.ab-label {
  margin: 0;
  padding-top: 6px;
  color: var(--sky-muted);
  font-size: 15px;
  font-weight: 500;
}
.ab-copy p {
  margin: 0 0 20px;
  color: #4a4945;
  font-size: 18px;
  line-height: 1.65;
}
.ab-copy p:last-child {
  margin-bottom: 0;
}
.ab-copy .ab-big {
  margin-bottom: 28px;
  color: var(--sky-ink);
  font-size: 28px;
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.ab-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.ab-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--sky-ink);
}
.ab-stat strong {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ab-stat span {
  color: var(--sky-muted);
  font-size: 16px;
}
.ab-h2 {
  margin: 0 0 40px;
  color: var(--sky-ink);
}
.ab-principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 64px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-principles li {
  padding-top: 24px;
  border-top: 1px solid var(--sky-line);
}
.ab-num {
  display: block;
  margin-bottom: 14px;
  color: #3d7ef2;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ab-principles h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.ab-principles p {
  max-width: 520px;
  margin: 0;
  color: var(--sky-muted);
  font-size: 17px;
  line-height: 1.6;
}
.ab-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-top: 24px;
}
.ab-close {
  padding: 96px 0 128px;
  text-align: center;
}
.ab-close-line {
  max-width: 820px;
  margin: 0 auto;
  text-wrap: balance;
}
.ab-close-sub {
  margin: 20px 0 0;
  color: var(--sky-muted);
  font-size: 20px;
}
.ab-actions {
  justify-content: center;
  margin-top: 36px;
}
@media (max-width: 991px) {
  .ab-hero {
    padding: calc(var(--nav-height, 62px) + 56px) 0 40px;
  }
  .ab-lead {
    font-size: 18px;
  }
  .ab-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .ab-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ab-copy .ab-big {
    font-size: 23px;
  }
  .ab-copy p {
    font-size: 17px;
  }
  .ab-stats,
  .ab-principles {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ab-row {
    grid-template-columns: 1fr 1fr;
  }
  .ab-row > :nth-child(3) {
    display: none;
  }
  .ab-photo.is-wide {
    aspect-ratio: 4 / 3;
  }
  .ab-close {
    padding: 64px 0 96px;
  }
}

/* "Get to know" cards: the space between rows matches the space between cards. */
#product-suite-new {
  row-gap: 24px;
}
/* First-month heading: one line on wider screens. */
@media (min-width: 768px) {
  .sky-one-line {
    max-width: none !important;
    white-space: nowrap;
  }
}

/* Status history: an orange day for an incident, and a tooltip on every day. */
.sky-status-bars span {
  position: relative;
}
.sky-status-bars span.is-warn {
  background: #f59e0b;
  opacity: 1;
}
.sky-status-bars span:hover {
  opacity: 1;
  filter: brightness(0.92);
}
.sky-status-bars span[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 5;
  padding: 5px 8px;
  translate: -50% 0;
  border-radius: 6px;
  background: #18181b;
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}
.sky-status-bars span:first-child:hover::after {
  left: 0;
  translate: 0 0;
}
.sky-status-bars span:last-child:hover::after {
  right: 0;
  left: auto;
  translate: 0 0;
}
/* The status bars accept the pointer for their tooltips. */
.sky-status-pop .sky-status-bars,
.ss-bars {
  pointer-events: auto;
}
/* AI Agents card: "What can I help with?" a touch lighter. */
.sky-arlo-title {
  font-weight: 500 !important;
}

/* Scheduling and CRM cards: app UI peeking in from the card's corner (build-ramp.mjs →
   scheduleArt, leadsArt). Same panel style as the billing table. */
.sky-card-media.has-peek {
  position: relative;
  container-type: inline-size;
}
.sky-peek {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 97%);
}
.sky-sched,
.sky-leads {
  position: absolute;
  top: 4px;
  left: 24px;
  overflow: hidden;
  border: 1px solid rgb(229 229 229 / 0.7);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 14px 30px -22px rgb(0 0 0 / 0.16);
  color: #171717;
  font-variant-numeric: tabular-nums;
}
/* Schedule: the app's horizontal day view, scaled to the card. */
.sky-sched {
  width: calc(var(--ac) + var(--col) * 5);
}
.sky-sched-row {
  position: relative;
  display: flex;
  height: 50px;
  border-top: 1px solid #ececec;
}
.sky-sched-row::after {
  content: "";
  position: absolute;
  inset: 0 0 0 var(--ac);
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--col) - 1px), #f0f0f0 calc(var(--col) - 1px) var(--col));
  pointer-events: none;
}
.sky-sched-row.is-head {
  height: 28px;
  border-top: 0;
}
.sky-sched-row.is-head::after {
  display: none;
}
.sky-sched-ac {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: var(--ac);
  padding: 0 12px;
  border-right: 1px solid #ececec;
  overflow: hidden;
  white-space: nowrap;
}
.sky-sched-row.is-head .sky-sched-ac {
  align-items: center;
}
.sky-sched-ac svg {
  width: 15px;
  height: 15px;
  fill: #525252;
}
.sky-sched-name {
  overflow: hidden;
  color: #737373;
  font-size: 11px;
  font-weight: 500;
  text-overflow: ellipsis;
}
.sky-sched-name strong {
  color: #171717;
  font-weight: 600;
}
.sky-sched-ac small {
  color: #737373;
  font-size: 10px;
}
.sky-sched-hour {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--col);
  border-right: 1px solid #ececec;
  color: #737373;
  font-size: 10.5px;
}
/* A reservation bar: default style (activity fill, darker 4px left edge, 3px corners). */
.sky-sched-block {
  position: absolute;
  top: 2px;
  bottom: 2px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 7px;
  overflow: hidden;
  border-left: 4px solid #3062bd;
  border-radius: 3px;
  background: #3d7ef2;
  color: #fff;
  white-space: nowrap;
}
.sky-sched-block.is-discovery {
  border-left-color: #117f39;
  background: #16a34a;
}
.sky-sched-crew {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sky-sched-line {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: rgb(255 255 255 / 0.95);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.1;
}
.sky-sched-line > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sky-sched-line svg {
  flex: none;
  width: 9px;
  height: 9px;
  fill: rgb(255 255 255 / 0.7);
}
.sky-sched-time {
  color: rgb(255 255 255 / 0.72);
  font-size: 9px;
  font-weight: 500;
}
/* Leads: name, email, phone, and status, running off the card's right edge like the billing
   table (the status column is the one that gets cut). */
/* The status column starts 22px before the card's right edge, so only the start of each badge
   shows (like the billing amounts); name and email take any extra room. */
.sky-leads {
  width: max(calc(100cqw + 22px), max-content);
}
.sky-leads-row {
  display: grid;
  grid-template-columns: minmax(94px, 1fr) minmax(100px, 1.15fr) 74px 60px;
  align-items: center;
  gap: 6px;
  height: 31px;
  padding: 0 10px 0 10px;
  border-top: 1px solid #f5f5f5;
  font-size: 10px;
  white-space: nowrap;
}
.sky-leads-row.is-head {
  height: 26px;
  border-top: 0;
  border-bottom: 1px solid rgb(229 229 229 / 0.7);
  background: #fafafa;
  color: #737373;
  font-weight: 500;
}
.sky-leads-row.is-head + .sky-leads-row {
  border-top: 0;
}
.sky-leads-row > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sky-leads-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.sky-leads-name > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sky-leads-link {
  color: #2563eb;
}
/* The app's status badges: Follow up solid, Contacted gray, Not contacted outlined. */
.sky-leads-status {
  justify-self: start;
  padding: 0 5px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  background: #fff;
  color: #525252;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 14px;
}
.sky-leads-status.is-follow {
  border-color: #3d7ef2;
  background: #3d7ef2;
  color: #fff;
}
.sky-leads-status.is-contacted {
  border-color: #f0f0f0;
  background: #f0f0f0;
  color: #525252;
}
@container (max-width: 360px) {
  .sky-leads-name .sky-billing-avatar {
    display: none;
  }
  .sky-leads-row {
    grid-template-columns: minmax(64px, 1fr) minmax(96px, 1.15fr) 74px 60px;
    gap: 5px;
  }
}
/* The schedule shows all five rows: the fade starts lower than on the other cards. */
.sky-card-media.has-peek .sky-peek:has(.sky-sched) {
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

/* "Three ways" rows on phones: the panel fills its container instead of spilling over the text. */
.sky-ph-slot.has-ways > .sky-ph {
  position: absolute;
  inset: 0;
  min-height: 0;
}
@media (max-width: 991px) {
  .sky-ph-slot.has-ways {
    aspect-ratio: auto;
    min-height: 320px;
  }
}

/* Phone menu: drops down only as far as its content, with Sign in and Contact sales right under
   the last link, over a dim backdrop (tap to close). */
.sky-sheet {
  bottom: auto !important;
  max-height: 100dvh;
  overflow-y: auto;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.35);
}
.sky-sheet-body {
  flex: none !important;
  padding-bottom: 4px !important;
}
.sky-sheet-actions {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) !important;
  border-top: 0 !important;
}
.sky-sheet-actions a {
  min-height: 44px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
}
.sky-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 2147482999;
  background: rgb(0 0 0 / 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.sky-sheet-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}
/* The menu button matches "Sign in" next to it: same height, corners, and outline. */
[data-sky-header] [data-sky-mobile-menu] {
  width: 36px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: rgb(255 255 255 / 0.06) !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22) !important;
}
[data-sky-header].sky-on-light [data-sky-mobile-menu] {
  background: rgb(0 0 0 / 0.03) !important;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12) !important;
  color: var(--sky-ink) !important;
}
[data-sky-header] [data-sky-mobile-menu] svg {
  width: 18px;
  height: 18px;
}
/* The hamburger's icon box is sized to the icon so it sits dead center in the button. */
[data-sky-header] [data-sky-mobile-menu] > i {
  width: 18px !important;
  height: 18px !important;
}
[data-sky-header] [data-sky-mobile-menu] > i svg {
  display: block;
}
[data-sky-header] div:has(> [data-sky-mobile-menu]) > :not(:last-child) {
  margin-right: 8px !important;
}
/* Archived legal versions: the note sits above the document title. */
.lg-doc .lg-archived {
  margin-bottom: 32px;
}
.lg-doc .legal-callout + .legal-callout {
  margin-top: 16px;
}