/* ============================================================
   system.css — the cloned iOS-page design system, shared by
   every public page. Skeleton measured from the reference:
   dark ribbon nav, black welcome lockups, #1D1D1F highlight
   galleries (radius-28 cards, dot nav), alternating feature
   sections of caption tiles, compatibility strip. Their
   skeleton, our content.
   ============================================================ */
/* ================= The iOS-page skeleton, cloned =================
     Structure taken from apple.com/os/ios: a thin local-nav ribbon; a black
     full-viewport welcome (small H1, giant centred lockup); a dark highlights
     gallery of viewport-wide rounded media cards with a dot nav; then feature
     sections alternating dark/light, each an eyebrow + centred lockup +
     stacked full-bleed caption tiles (radius 28). Their skeleton, our
     content — no Apple copy, imagery or assets. */

/* The local-nav ribbon, cloned to the reference's metrics: 48px tall,
     translucent near-black with blur, product name left at 19px/600,
     12px quiet links, one small pill CTA. */
.nav {
  background: rgba(22, 22, 23, 0.8) !important;
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.nav-inner {
  min-height: 48px !important;
  height: 48px;
  padding-block: 0 !important;
}
.nav .wordmark {
  color: #f5f5f7 !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  gap: 8px;
}
.nav .wordmark .pin svg {
  width: 18px;
  height: 18px;
}
.nav .wordmark .by {
  display: none;
}
.nav-links {
  gap: 24px !important;
}
.nav-links a {
  color: #d2d2d7 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
}
.nav-links a:hover {
  color: #f5f5f7 !important;
}
.nav-links .btn {
  background: var(--brand, #3d6fd4) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  min-height: 0 !important;
  border-radius: 999px !important;
}
.nav-links span {
  color: #c7c7cc !important;
}
.nav-links .btn {
  background: #f5f5f7 !important;
  color: #0d1a2e !important;
  border-color: transparent !important;
}

/* "Sign in" — the way an existing customer gets to their real dashboard.
   Quieter than "Get alerts" (which is the primary consumer CTA), but distinct
   enough that an admin scanning for the way back in sees it. */
.nav-links a.nav-signin {
  color: #f5f5f7 !important;
  font-weight: 500 !important;
  border: 1px solid rgba(245, 245, 247, 0.28) !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
}
.nav-links a.nav-signin:hover {
  border-color: rgba(245, 245, 247, 0.55) !important;
}

.welcome {
  background: #000;
  color: #f5f5f7;
  text-align: center;
  padding: 84px 20px 0;
  overflow: hidden;
}
.welcome .pre {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.011em;
  line-height: 1.19;
  color: #f5f5f7;
  margin-bottom: 8px;
}
.welcome .lockup {
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.003em;
  line-height: 1.0835;
  margin: 0 auto;
  max-width: 24ch;
}
.welcome .lockup .dim {
  color: #6e6e73;
}
.welcome .sub2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: #86868b;
  margin: 20px auto 0;
  max-width: 55ch;
  line-height: 1.176;
}
.welcome .w-ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
  flex-wrap: wrap;
}
.welcome .w-phones {
  position: relative;
  max-width: 660px;
  margin: 64px auto -2px;
}

.hl {
  background: #1d1d1f;
  color: #f5f5f7;
  padding: 110px 0 144px;
}
.hl-head {
  text-align: left;
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.003em;
  line-height: 1.0835;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.gallery {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 64px max(24px, calc((100vw - 1000px) / 2)) 8px;
  scrollbar-width: none;
}
.gallery::-webkit-scrollbar {
  display: none;
}
.gcard {
  flex: 0 0 min(86vw, 1000px);
  scroll-snap-align: center;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  min-height: min(74vh, 620px);
  display: flex;
  flex-direction: column;
}
.gcard .gmedia {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px;
  position: relative;
  overflow: hidden;
}
.gcard .gcap {
  padding: 0 40px 36px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.3;
  max-width: 56ch;
}
.gcard .gcap b {
  font-weight: 700;
}
.dots {
  display: flex;
  gap: 9px;
  justify-content: center;
  margin-top: 34px;
}
/* 24px hit target (WCAG 2.2 target-size), 9px visual dot */
.dots button {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.dots button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.34);
  transition:
    background 0.2s,
    transform 0.2s;
}
.dots button.on::after {
  background: #f5f5f7;
  transform: translate(-50%, -50%) scale(1.15);
}

/* feature sections */
.fsec {
  padding: 110px 0 144px;
}
.fsec.theme-dark {
  background: #1d1d1f;
  color: #f5f5f7;
}
.fsec.theme-light {
  background: #f5f5f7;
  color: #1d1d1f;
}
.lockup-wrap {
  text-align: left;
  max-width: 1000px;
  margin: 0 auto 56px;
  padding: 0 20px;
}
.eyebrow2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.011em;
  line-height: 1;
  margin-bottom: 12px;
}
.fsec.theme-dark .eyebrow2 {
  color: #f5f5f7;
}
.fsec.theme-light .eyebrow2 {
  color: #1d1d1f;
}
.lockup2 {
  font-size: clamp(32px, 3.4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.003em;
  line-height: 1.0835;
  max-width: 26ch;
  margin: 0 0 24px;
}
.lockup-sub {
  font-size: 21px;
  line-height: 1.381;
  font-weight: 600;
  letter-spacing: 0.011em;
  max-width: 52ch;
  margin: 0;
  color: #86868b;
}
.fsec.theme-dark .lockup-sub {
  color: #a1a1a6;
}
.fsec.theme-light .lockup-sub {
  color: #86868b;
}

.tiles {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  gap: 26px;
}
.tile2 {
  border-radius: 28px;
  overflow: hidden;
  display: grid;
}
.tile2 .tcap {
  padding: 42px 44px 8px;
}
.tile2 .tcap h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.235;
  margin-bottom: 4px;
}
.tile2 .tcap p {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.235;
  color: #86868b;
  max-width: 62ch;
}
.tile2 .tmedia {
  padding: 36px 44px 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tile2 .tmedia > * {
  width: 100%;
  max-width: 560px;
}
.tile2 a.tgo {
  display: inline-block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 650;
}
.t-light a.tgo {
  color: var(--brand-dark, #2b54a8);
}
.t-light {
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.05);
}
.t-light .tcap p {
  color: #86868b;
}
.fsec.theme-dark .t-light {
  box-shadow: none;
}
.t-dark {
  background: #000;
  color: #f5f5f7;
}
.t-dark .tcap p {
  color: #86868b;
}
.t-dim {
  background: #2c2c2e;
  color: #f5f5f7;
}
.t-dim .tcap p {
  color: #86868b;
}
.duo {
  grid-template-columns: 1fr 1fr;
  display: grid;
  gap: 26px;
}
@media (max-width: 780px) {
  .duo {
    grid-template-columns: 1fr;
  }
  .tile2 .tcap {
    padding: 32px 26px 4px;
  }
  .tile2 .tmedia {
    padding: 26px 26px 32px;
  }
}

/* ---- media artifacts inside tiles/cards (all CSS, honest content) ---- */
.m-count {
  text-align: center;
}
.m-count .n {
  font-size: clamp(64px, 9vw, 110px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m-count .n small {
  font-size: 0.38em;
  font-weight: 600;
  opacity: 0.55;
}
.m-count .lab {
  font-size: 15px;
  margin-top: 8px;
  opacity: 0.65;
}
.m-count .bar3 {
  height: 8px;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.22);
  margin-top: 26px;
  overflow: hidden;
}
.m-count .bar3 i {
  display: block;
  height: 100%;
  width: 91%;
  background: var(--safe);
  border-radius: 6px;
}

.m-contra {
  background: rgba(232, 185, 61, 0.14);
  border: 1px solid rgba(232, 185, 61, 0.4);
  border-radius: 18px;
  padding: 22px 24px;
  font-size: 16px;
  line-height: 1.55;
}
.m-contra b {
  color: #e8b93d;
}

.m-msgs .m {
  background: rgba(127, 127, 127, 0.1);
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.45;
}
.m-msgs .m + .m {
  margin-top: 12px;
}
.m-msgs .m .t {
  font-size: 12px;
  color: #6e6e73;
  display: block;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}
.t-dim .m-msgs .m .t,
.t-dark .m-msgs .m .t {
  color: #a1a1a6;
}
.m-msgs .m.final {
  background: var(--safe-text, #0f6b32);
  color: #fff;
  font-weight: 650;
}
.m-msgs .m.final .t {
  color: #c9e9d4;
}

.m-gate .grow {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
  font-size: 15.5px;
}
.m-gate .grow:last-child {
  border-bottom: none;
}
.m-gate .k {
  color: #6e6e73;
}
.t-dim .m-gate .k,
.t-dark .m-gate .k {
  color: #a1a1a6;
}
.m-gate .v {
  font-weight: 650;
}

.m-radar {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-radar .ring2 {
  position: absolute;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(232, 185, 61, 0.55);
  border-radius: 50%;
  animation: mring 3s ease-out infinite;
}
.m-radar .ring2:nth-child(2) {
  animation-delay: 1s;
}
.m-radar .ring2:nth-child(3) {
  animation-delay: 2s;
}
@keyframes mring {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(8.5);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .m-radar .ring2 {
    animation: none;
    transform: scale(4);
    opacity: 0.3;
  }
}
.m-radar .me3 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-light);
  border: 3px solid #fff;
}
.m-radar .found {
  position: absolute;
  top: 20%;
  right: 8%;
  background: #fff;
  color: #0f6b32;
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 650;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.m-desc {
  background: rgba(127, 127, 127, 0.12);
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 15.5px;
  line-height: 1.55;
}
.m-desc + .m-note {
  margin-top: 12px;
  font-size: 14px;
  opacity: 0.65;
}

.m-haptic {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  height: 240px;
}
.m-haptic i {
  display: block;
  width: 13px;
  border-radius: 8px;
  background: currentColor;
  height: 24px;
  opacity: 0.95;
}
.m-haptic i.tall {
  height: 86px;
}
.m-haptic i.gap {
  background: transparent;
  width: 22px;
}
.m-haptic i.long {
  height: 56px;
  width: 110px;
}

.m-equip .e2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(127, 127, 127, 0.22);
}
.m-equip .e2:last-child {
  border-bottom: none;
}
.m-equip h4 {
  font-size: 15.5px;
  font-weight: 650;
}
.m-equip p {
  font-size: 13px;
  color: #6e6e73;
}
.t-dim .m-equip p,
.t-dark .m-equip p {
  color: #a1a1a6;
}
.m-equip .tg {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 5px 11px;
  flex-shrink: 0;
}
.m-equip .ok2 {
  background: var(--safe-bg);
  color: var(--safe-text);
}
.m-equip .warn2 {
  background: #fff1d6;
  color: #92400e;
}

.m-qr {
  text-align: center;
}
.m-qr .q2 {
  width: 158px;
  height: 158px;
  margin: 0 auto;
  border-radius: 18px;
  background: #fff;
  padding: 15px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
}
.m-qr .px2 {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  opacity: 0.88;
  background:
    repeating-linear-gradient(0deg, #0d1a2e 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, #0d1a2e 0 8px, transparent 8px 16px);
}
.m-qr p {
  margin-top: 16px;
  font-size: 14px;
  opacity: 0.65;
}

.m-chat .bub2 {
  background: rgba(127, 127, 127, 0.1);
  border-radius: 16px;
  padding: 18px 20px;
}
.m-chat .who2 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 5px;
  opacity: 0.8;
}
.m-chat .txt2 {
  font-size: 15px;
  line-height: 1.5;
}
.m-chat .safe2 {
  margin-top: 14px;
  display: inline-block;
  background: var(--safe-text, #0f6b32);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 10px;
  padding: 11px 22px;
}
.m-chat .tly {
  margin-top: 13px;
  font-size: 13px;
  color: #6e6e73;
}

.m-hash {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.m-hash .hh {
  color: var(--brand-light);
  font-size: 13px;
  word-break: break-all;
  line-height: 1.7;
}
.m-hash .vv {
  margin-top: 16px;
  color: #7bd6a0;
  font-size: 15px;
  font-weight: 600;
}

/* compatibility strip */
.compat {
  background: #fff;
  padding: 120px 20px;
  text-align: center;
}
.compat h2 {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 650;
  letter-spacing: -0.025em;
  color: #1d1d1f;
}
.compat .row3 {
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 44px;
}
.compat .c {
  max-width: 240px;
}
.compat .c h4 {
  font-size: 17px;
  font-weight: 650;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.compat .c p {
  font-size: 14.5px;
  color: #6e6e73;
  line-height: 1.5;
}

/* ---- the drill phones (the product visual) ---- */
.device-stage {
  position: relative;
  height: 540px;
  pointer-events: none;
}
.dev-wrap {
  position: absolute;
  width: 264px;
}
.dev-wrap:first-child {
  left: 0;
  top: 46px;
}
.dev-wrap:last-child {
  right: 0;
  top: 0;
  z-index: 2;
}
.phone {
  background: #0b0b0f;
  border-radius: 40px;
  padding: 8px;
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.phone .screen {
  border-radius: 32px;
  overflow: hidden;
  background: var(--paper, #fff);
}
.phone.tilt-l {
  transform: rotate(-4deg);
  animation: floatA 7s ease-in-out infinite alternate;
}
.phone.tilt-r {
  transform: rotate(4deg);
  animation: floatB 8s ease-in-out infinite alternate;
}
@keyframes floatA {
  to {
    transform: rotate(-4deg) translateY(-10px);
  }
}
@keyframes floatB {
  to {
    transform: rotate(4deg) translateY(12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .phone.tilt-l,
  .phone.tilt-r {
    animation: none;
  }
}
.scr-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #86868b;
  letter-spacing: 0.02em;
}
.s-banner {
  background: #e8b93d;
  color: #52400a;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-align: center;
  padding: 8px;
}
.s-map {
  height: 158px;
  position: relative;
  background: linear-gradient(135deg, #dfe9f7 0%, #eef3fa 55%, #e4eee4 100%);
}
.s-map .route {
  position: absolute;
  left: 18%;
  top: 16%;
  width: 62%;
  height: 64%;
  border: 2.5px dashed var(--brand, #3d6fd4);
  border-radius: 46% 22% 42% 30%;
  border-top: none;
  border-left: none;
}
.s-map .you {
  position: absolute;
  left: 16%;
  top: 13%;
  width: 15px;
  height: 15px;
  background: var(--brand, #3d6fd4);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.s-map .goal {
  position: absolute;
  right: 13%;
  bottom: 9%;
  width: 22px;
  height: 22px;
  background: var(--safe, #16a34a);
  border-radius: 50%;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-body {
  padding: 14px 16px 16px;
}
.s-grab {
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.14);
  margin: 0 auto 12px;
}
.s-body h4 {
  font-size: 14.5px;
  font-weight: 650;
  color: var(--navy, #0d1a2e);
  letter-spacing: -0.01em;
}
.s-body .meta {
  font-size: 11.5px;
  color: #6e6e73;
  margin: 3px 0 13px;
}
.s-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.s-person:last-child {
  border-bottom: none;
}
.s-ava {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s-person .nm {
  font-size: 12.5px;
  font-weight: 620;
  color: #1d1d1f;
  line-height: 1.2;
}
.s-person .st {
  font-size: 10.5px;
  color: #6e6e73;
}
.s-pill {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.p-safe {
  background: var(--safe-bg, #e6f6ec);
  color: var(--safe-text, #0f6b32);
}
.p-move {
  background: #fff1d6;
  color: #92400e;
}
.s-safe {
  background: var(--safe-text, #0f6b32);
  color: #fff;
  border-radius: 999px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  padding: 12px;
  letter-spacing: 0.01em;
}
.s-help {
  text-align: center;
  font-size: 12px;
  color: #6e6e73;
  padding-top: 9px;
}
@media (max-width: 940px) {
  .device-stage {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 62px;
    margin-top: 8px;
  }
  .dev-wrap {
    position: static;
  }
  .phone.tilt-l,
  .phone.tilt-r {
    transform: none;
    animation: none;
  }
}

/* ---- go deeper: the tile plus-button and its overlay ----
   The reference pattern: a quiet circular plus in the tile corner opens an
   in-page overlay with the full story — deeper without going anywhere.
   Native <dialog> carries Esc and focus for free. */
.tile2,
.gcard {
  position: relative;
}
.tplus {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(210, 210, 215, 0.64);
  color: #1d1d1f;
  transition:
    transform 0.18s,
    background 0.18s;
  z-index: 3;
}
.tplus:hover {
  transform: scale(1.08);
  background: rgba(210, 210, 215, 0.9);
}
.tplus svg {
  width: 15px;
  height: 15px;
}
.t-dark .tplus,
.t-dim .tplus,
.gcard .tplus {
  background: rgba(255, 255, 255, 0.22);
  color: #f5f5f7;
}
.t-dark .tplus:hover,
.t-dim .tplus:hover,
.gcard .tplus:hover {
  background: rgba(255, 255, 255, 0.38);
}
.gcard .tplus {
  pointer-events: auto;
}

/* The reference's modal is full-bleed: a near-fullscreen sheet, content in a
   centred column, the close mirroring the tile's plus in the bottom-right.
   Explicit centring, because the site's CSS reset removes the native
   dialog's margin:auto and strands it in a corner. */
dialog.dlg {
  position: fixed;
  top: 12px;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  border: 0;
  padding: 0;
  width: min(100vw - 24px, 1040px);
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 28px;
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 60px 160px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
dialog.dlg::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
}
.dlg-in {
  height: 100%;
  overflow: auto;
  padding: clamp(48px, 8vh, 100px) 24px 120px;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
.dlg-in > * {
  width: 100%;
}
.dlg-in > * {
  max-width: 640px;
  margin-inline: auto;
}
.dlg h3 {
  font-size: clamp(32px, 4.6vw, 48px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 26px;
}
.dlg p {
  font-size: 18px;
  line-height: 1.65;
  color: #494949;
  margin-bottom: 18px;
}
.dlg p b {
  color: #1d1d1f;
}
.dlg .dlg-go {
  display: block;
  margin-top: 10px;
  font-size: 16.5px;
  font-weight: 650;
  color: var(--brand-dark, #2b54a8);
}
/* the plus rotated into an x, in the same corner it was pressed */
.dlg-x {
  position: absolute;
  bottom: 22px;
  right: 22px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: rgba(210, 210, 215, 0.72);
  color: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dlg-x svg {
  width: 17px;
  height: 17px;
  transform: rotate(45deg);
}
.dlg-x:hover {
  background: rgba(210, 210, 215, 0.95);
}
@media (prefers-reduced-motion: no-preference) {
  dialog.dlg[open] {
    animation: dlgin 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  @keyframes dlgin {
    from {
      transform: translateX(-50%) translateY(26px) scale(0.98);
      opacity: 0;
    }
    to {
      transform: translateX(-50%);
    }
  }
}

/* ---- integrations: small text tiles, grouped, honestly tagged ---- */
.int-group {
  max-width: 1000px;
  margin: 0 auto 34px;
  padding: 0 20px;
}
.int-group h3 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.015em;
  color: #1d1d1f;
  margin-bottom: 16px;
}
.int-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 860px) {
  .int-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .int-grid {
    grid-template-columns: 1fr;
  }
}
.int {
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  position: relative;
}
.int h4 {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: #1d1d1f;
  margin-bottom: 4px;
  padding-right: 64px;
}
.int p {
  font-size: 13.5px;
  line-height: 1.5;
  color: #6e6e73;
}
.int .itag {
  position: absolute;
  top: 20px;
  right: 18px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 4px 10px;
}
.int .now {
  background: var(--safe-bg, #e6f6ec);
  color: var(--safe-text, #0f6b32);
}
.int .soon {
  background: #eef1f6;
  color: #55606e;
}

/* ---- imagery placeholders + section icons ----
   The reference leans on imagery we do not have yet. Two stand-ins, both
   deliberately legible as stand-ins: an app-icon-style gradient chip above
   each section lockup, and a labelled slate wherever a screenshot or photo
   will eventually live — so the flow reads now and the asset list writes
   itself. */
.sicon {
  width: 54px;
  height: 54px;
  border-radius: 13px;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
}
.sicon svg {
  width: 28px;
  height: 28px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ph {
  border-radius: 20px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  border: 1.5px dashed rgba(110, 110, 115, 0.45);
  background: repeating-linear-gradient(
    -45deg,
    rgba(127, 127, 127, 0.06) 0 14px,
    rgba(127, 127, 127, 0.11) 14px 28px
  );
}
.t-dark .ph,
.t-dim .ph {
  border-color: rgba(255, 255, 255, 0.28);
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.05) 0 14px,
    rgba(255, 255, 255, 0.09) 14px 28px
  );
}
.ph .ph-kind {
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  color: #6e6e73;
}
.t-dark .ph .ph-kind,
.t-dim .ph .ph-kind {
  color: #a1a1a6;
}
.ph .ph-what {
  font-size: 15px;
  font-weight: 600;
  color: #494949;
  max-width: 34ch;
  line-height: 1.45;
}
.t-dark .ph .ph-what,
.t-dim .ph .ph-what {
  color: #d2d2d7;
}
.ph svg {
  width: 30px;
  height: 30px;
  stroke: #86868b;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.compat .c .cicon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f7;
}
.compat .c .cicon svg {
  width: 22px;
  height: 22px;
  stroke: #1d1d1f;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- per-section example galleries: the reference's in-section media-card
   carousels. Smaller cards than the highlights, one row per feature section,
   each card one example of the feature at work. ---- */
.gallery.gsm {
  padding-top: 44px;
  padding-bottom: 6px;
}
.gallery.gsm .gcard {
  flex: 0 0 min(80vw, 430px);
  min-height: 470px;
  border-radius: 24px;
}
.gallery.gsm .gcard .gmedia {
  padding: 30px;
}
.gallery.gsm .gcard .gcap {
  padding: 0 28px 26px;
  font-size: 15px;
}
.t-card {
  background: #fff;
  color: #1d1d1f;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
}
.t-card .gcap {
  color: #1d1d1f;
}
.dots.light button::after {
  background: rgba(29, 29, 31, 0.25);
}
.dots.light button.on::after {
  background: #1d1d1f;
}
.gallery .ph {
  width: 100%;
  min-height: 200px;
}

/* pricing cards, harmonised onto the system */
#pricing .plan {
  border-radius: 28px;
  border: 0;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.06);
}
#pricing .plan .amt {
  font-weight: 750;
  letter-spacing: -0.035em;
}
/* the register form card */
#register {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

#register .channel label {
  color: #55606e;
}

/* ---- footer, cloned to the reference's metrics: light ground, 12px text,
   left-aligned columns, hairline dividers, quiet legal block ---- */
footer {
  background: #f5f5f7 !important;
  color: #6e6e73 !important;
  padding: 40px 0 60px !important;
  border-top: 1px solid #d2d2d7;
}
footer .foot-grid {
  gap: 32px;
}
footer .foot-brand p {
  color: #6e6e73 !important;
  font-size: 12px !important;
  line-height: 1.5;
}
footer h2 {
  color: #1d1d1f !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 10px !important;
}
footer a {
  color: #424245 !important;
  font-size: 12px !important;
  line-height: 2.1 !important;
  font-weight: 400 !important;
}
footer a:hover {
  color: #1d1d1f !important;
  text-decoration: underline;
}
footer .wordmark {
  color: #1d1d1f !important;
  font-size: 17px !important;
}
footer .wordmark .by {
  color: #6e6e73 !important;
}
footer .lang {
  background: #fff;
  color: #1d1d1f;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  font-size: 12px;
}
footer .foot-legal,
footer .legal,
footer .foot-bottom {
  color: #6e6e73 !important;
  font-size: 12px !important;
  border-top: 1px solid #d2d2d7;
  margin-top: 28px;
  padding-top: 18px;
}
footer .foot-legal a,
footer .foot-bottom a {
  color: #424245 !important;
}
footer .pin {
  background: transparent !important;
}
footer .pin svg path {
  stroke: #1d1d1f;
}
footer .pin svg path + path {
  stroke: var(--brand);
}
/* the "small" utility inside system sections reads as footnote */
.fsec .small,
#pricing .small {
  font-size: 13px;
  color: #6e6e73;
  text-align: center;
}

/* ---- get-the-app pills: neutral, ours — never the stores' badge art ---- */
.store-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.store-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1d1d1f;
  color: #f5f5f7;
  border-radius: 14px;
  padding: 12px 22px;
  text-decoration: none;
}
.store-pill:hover {
  background: #000;
}
.store-pill svg {
  width: 20px;
  height: 20px;
  stroke: #f5f5f7;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.store-pill .s1 {
  display: block;
  font-size: 10.5px;
  color: #a1a1a6;
  line-height: 1.1;
}
.store-pill .s2 {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

footer .foot-bottom span,
footer .foot-legal span {
  color: #6e6e73 !important;
}

/* highlights cards: caption first, centred — the reference's gallery anatomy */
.gallery:not(.gsm) .gcard .gcap {
  order: -1;
  text-align: center;
  align-self: center;
  padding: 40px 40px 0;
}

/* in-section card sets: caption BELOW the card, outside, left — with arrows */
.gitem {
  flex: 0 0 min(80vw, 400px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
}
.gitem .gcard {
  flex: 1 1 auto;
  min-height: 420px;
}
.gcap-out {
  padding: 16px 4px 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.235;
  color: #86868b;
}
.theme-dark .gcap-out {
  color: #86868b;
}
.theme-light .gcap-out {
  color: #86868b;
}
.gcap-out b {
  font-weight: 600;
}
.theme-dark .gcap-out b {
  color: #f5f5f7;
}
.theme-light .gcap-out b {
  color: #1d1d1f;
}
.theme-light .gcap-out b {
  color: #1d1d1f;
}
.garrows {
  max-width: 1000px;
  margin: 22px auto 0;
  padding: 0 20px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.garr {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-dark .garr {
  background: rgba(255, 255, 255, 0.14);
  color: #f5f5f7;
}
.theme-dark .garr:hover {
  background: rgba(255, 255, 255, 0.26);
}
.theme-light .garr {
  background: rgba(29, 29, 31, 0.08);
  color: #1d1d1f;
}
.theme-light .garr:hover {
  background: rgba(29, 29, 31, 0.16);
}
.garr svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.garr:disabled {
  opacity: 0.35;
  cursor: default;
}

/* the chip sub-nav, the reference's pill bar */
.chipnav {
  position: sticky;
  top: 0;
  z-index: 39;
  background: rgba(22, 22, 23, 0.8);
  backdrop-filter: blur(20px) saturate(1.8);
}
.chipnav-inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  min-height: 60px;
  align-items: center;
  padding: 0 20px;
  justify-content: safe center;
  scrollbar-width: none;
}
.chipnav-inner::-webkit-scrollbar {
  display: none;
}
.chipnav a {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 400;
  color: #f5f5f7;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 8px 15px;
  transition: background 0.15s;
}
.chipnav a:hover {
  background: rgba(255, 255, 255, 0.2);
}

.theme-light .gcap-out a.tgo,
.theme-light .gcap-out a {
  color: var(--brand-dark, #2b54a8);
}
.theme-dark .gcap-out a.tgo,
.theme-dark .gcap-out a {
  color: #9dbcf5;
}
/* A link sitting inside a caption is a link in a text block: colour alone does
   not distinguish it (WCAG 1.4.1 / axe link-in-text-block, a procurement gate).
   Underline it. Hierarchy-by-colour is untouched — this only marks the link. */
.gcap-out a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* The reference's grey is #86868B everywhere — and on light grounds that
   fails WCAG AA, which for us is a procurement gate, not taste. The pattern
   survives (hierarchy carried by colour at equal size and weight); the value
   adapts to the darkest compliant grey per ground. #86868B itself passes on
   black and #1D1D1F, so dark sections keep it verbatim. */
.fsec.theme-light .lockup-sub,
.theme-light .gcap-out,
.t-light .tcap p {
  color: #545456;
}
.t-dim .tcap p,
.t-dim .gcap-out {
  color: #a1a1a6;
}
.theme-dark .gcap-out {
  color: #a1a1a6;
}