/* ==========================================================================
   Secure with Juan: photos, video and the interactive demos.
   Loaded after styles.css, which holds the tokens, layout and base components.
   ========================================================================== */

.btn--sm { min-height: 40px; padding: 0 1.05em; font-size: .94rem; }

/* ---------- Photos: blueprint blue until they scroll into view, then full color ---------- */

.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ink);
  isolation: isolate;
}
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cobalt);
  mix-blend-mode: color;
  opacity: 0;
  pointer-events: none;
}
.shot figcaption,
.reel figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 6px 10px;
  background: rgba(10, 18, 48, .72);
  color: #fff;
  border-radius: 6px;
  font: 700 .74rem/1.2 var(--f-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.shot--tall { aspect-ratio: 4 / 5; }

@media (prefers-reduced-motion: no-preference) {
  .shot img { transition: transform 1.6s var(--ease), filter 1.1s var(--ease); }
  .shot::after { transition: opacity 1.1s var(--ease); }
  .js .shot[data-inview]:not(.in) img { transform: scale(1.06); filter: contrast(1.1) brightness(.82); }
  .js .shot[data-inview]:not(.in)::after { opacity: 1; }
}

/* ---------- Video ---------- */

.reel {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink) center / cover no-repeat;
}
.reel video,
.band__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .6s ease;
}
.is-fading video { opacity: 0; }
.reel--frame { aspect-ratio: 16 / 9; border-radius: 12px; }

.reel__toggle {
  --focus: var(--lit);
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(10, 18, 48, .6);
  border: 1.5px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.reel__toggle:hover { background: var(--lit); border-color: var(--lit); color: var(--ink); }
.reel__toggle .ico { width: 16px; height: 16px; }
.reel__toggle .ico--play { display: none; fill: currentColor; }
.is-paused > .reel__toggle .ico--play { display: block; }
.is-paused > .reel__toggle .ico--pause { display: none; }

/* A full-width band with video or a photo behind the copy */
.band {
  --focus: var(--lit);
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.band__media {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
}
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10, 18, 48, .93), rgba(10, 18, 48, .74) 48%, rgba(10, 18, 48, .36));
  pointer-events: none;
}
.band__scrim--even { background: linear-gradient(180deg, rgba(10, 18, 48, .82), rgba(10, 18, 48, .58)); }
.band__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(64px, 9vw, 120px);
}
.band .eyebrow { color: var(--lit); }
.band .facts { border-top-color: rgba(255, 255, 255, .55); }
.band .facts > div { border-bottom-color: rgba(255, 255, 255, .2); }
.band .facts dt { color: var(--lit); }
.band .facts dd { color: rgba(255, 255, 255, .86); }
.band .steps p { color: rgba(255, 255, 255, .8); }
.band .lede { color: rgba(255, 255, 255, .92); }
.band__copy { max-width: 40rem; }
.band--photo .band__inner { padding-block: clamp(80px, 12vw, 168px); }

/* ---------- Home: the four systems as opening panels ---------- */

.panels {
  display: flex;
  gap: 10px;
  height: clamp(420px, 44vw, 560px);
}
.panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: flex-grow .7s var(--ease);
}
.panel.is-open { flex-grow: 3.6; }
.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.panel.is-open img { transform: scale(1.04); }
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.panel::before {
  background: var(--cobalt);
  mix-blend-mode: color;
  transition: opacity .7s var(--ease);
}
.panel.is-open::before { opacity: 0; }
.panel::after { background: linear-gradient(to top, rgba(10, 18, 48, .94), rgba(10, 18, 48, .2) 55%, rgba(10, 18, 48, .1)); }

.panel__tab {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: opacity .3s;
}
.panel__tab b {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 800 1.33rem/1.12 var(--f-display);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.panel.is-open .panel__tab { opacity: 0; }

.panel__body {
  position: absolute;
  left: clamp(18px, 2.4vw, 30px);
  bottom: clamp(18px, 2.4vw, 28px);
  z-index: 2;
  display: grid;
  gap: 10px;
  width: clamp(250px, 32vw, 420px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s, transform .5s var(--ease);
}
.panel.is-open .panel__body { opacity: 1; transform: none; transition-delay: .2s; }
.panel__body strong {
  font: 800 clamp(1.6rem, 2.72vw, 2.32rem)/1.06 var(--f-display);
  letter-spacing: -.02em;
}
.panel__body > span:not(.key) { color: rgba(255, 255, 255, .9); }
.panel__body em {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-style: normal;
  font-weight: 600;
  color: var(--lit);
}
.panel__body .ico { transition: transform .25s var(--ease); }
.panel:hover .panel__body .ico { transform: translateX(4px); }

@media (max-width: 820px) {
  .panels { flex-direction: column; height: auto; }
  .panel, .panel.is-open { flex: none; height: 250px; }
  .panel::before { opacity: 0; }
  .panel__tab { display: none; }
  .panel__body { right: 18px; width: auto; opacity: 1; transform: none; }
}

/* ---------- Detail drawings you can operate ---------- */

.detail--live .detail__label { top: 14px; right: 16px; bottom: auto; left: auto; }
.detail__console {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  background: rgba(10, 18, 48, .78);
  border-top: 1px solid var(--bp-rule);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 .76rem/1.25 var(--f-label);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.status i {
  width: 10px;
  height: 10px;
  flex: none;
  background: rgba(255, 255, 255, .4);
  border-radius: 50%;
}
.status.is-on i { background: var(--lit); box-shadow: 0 0 0 4px rgba(255, 196, 46, .25); }
.status.is-bad i { background: #ff6b5e; box-shadow: 0 0 0 4px rgba(255, 107, 94, .25); }
.status.is-wait i { background: var(--lit); animation: blink .45s steps(1) infinite; }
@keyframes blink { 50% { opacity: .15; } }

/* Internet detail: the wireless backup and the cut main line */
.bp .backup, .bp .cutmark { display: none; }
.bp--net .backup, .bp--net .cutmark { display: block; }
.bp .bar { fill: var(--bp-dim); opacity: .5; transition: fill .3s, opacity .3s; transition-delay: calc(var(--n) * .12s); }
.bp.is-backup .bar { fill: var(--lit); opacity: 1; }
.bp .cutmark line { stroke: #ff6b5e; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transition: opacity .25s; }
.bp.is-cut .cutmark line { opacity: 1; }
.bp.is-cut .sys .main { stroke: #ff6b5e; animation: none; opacity: .7; }

/* ---------- Point of sale: the working register ---------- */

.till {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 12px 16px;
  align-items: end;
}
.till__hint {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 .76rem/1.2 var(--f-label);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.till__hint::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--lit);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 196, 46, .25);
}
.till__bezel {
  padding: 12px;
  background: var(--ink);
  border-radius: 18px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .4), 0 36px 60px -34px rgba(0, 0, 0, .7);
}
.till__screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  background: var(--paper);
  border-radius: 8px;
  color: var(--ink);
}
.till__menu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  align-content: start;
}
.till__item {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 7px;
  font: 600 .84rem/1.15 var(--f-body);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, transform .1s;
}
.till__item b { font: 500 .74rem/1 var(--f-label); color: var(--muted); }
.till__item:hover { border-color: var(--cobalt); }
.till__item.is-hit { background: var(--lit); border-color: var(--lit); transform: scale(.96); }
.till__item.is-hit b { color: var(--ink); }

.till__ticket {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 7px;
}
.till__label {
  display: flex;
  justify-content: space-between;
  font: 700 .68rem/1 var(--f-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.till__lines {
  flex: 1 1 96px;
  min-height: 96px;
  margin-top: 8px;
  font-size: .82rem;
}
.till__lines li {
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr) auto;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--rule);
}
.till__lines li b { font-weight: 600; color: var(--cobalt); }
.till__lines .till__empty { display: block; border: 0; color: var(--muted); }
.till__totals {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  font-size: .8rem;
}
.till__totals > div { display: flex; justify-content: space-between; }
.till__totals .till__total {
  margin-top: 3px;
  padding-top: 5px;
  border-top: 1.5px solid var(--ink);
  font-size: .98rem;
  font-weight: 600;
}
.till__pay {
  min-height: 42px;
  margin-top: 10px;
  background: var(--cobalt);
  border: 0;
  border-radius: 7px;
  color: #fff;
  font: 600 .95rem/1 var(--f-body);
  cursor: pointer;
  transition: background-color .2s;
}
.till__pay:hover { background: var(--cobalt-deep); }
.till__pay:disabled { background: var(--rule); color: var(--muted); cursor: not-allowed; }

.till__done {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  background: rgba(242, 245, 252, .97);
  border-radius: 8px;
  text-align: center;
}
.till__done strong { font: 800 1.6rem/1.12 var(--f-display); letter-spacing: -.02em; }
.till__done > span[data-donetotal] { margin-bottom: 8px; font: 500 .9rem var(--f-label); color: var(--muted); }
.till__check {
  width: 52px;
  height: 52px;
  background: #1fa866 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 30px no-repeat;
  border-radius: 50%;
}
.till__neck {
  width: 74px;
  height: 24px;
  margin: 0 auto;
  background: var(--ink);
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
.till__base {
  width: min(200px, 60%);
  height: 10px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .3);
}

.till__reader {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 12px 10px 16px;
  background: var(--ink);
  border-radius: 14px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .4);
}
.till__readout {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 50px;
  padding: 4px;
  background: #18234f;
  border-radius: 6px;
  color: #fff;
  font: 700 .66rem/1.25 var(--f-label);
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  transition: background-color .25s, color .25s;
}
.till__keys { display: grid; grid-template-columns: repeat(3, 8px); gap: 7px; }
.till__keys i { width: 8px; height: 8px; background: rgba(255, 255, 255, .3); border-radius: 50%; }
.till__waves { position: absolute; left: 50%; top: -6px; opacity: 0; transition: opacity .2s; }
.till__waves i {
  position: absolute;
  left: 0;
  border: 2.5px solid transparent;
  border-top-color: var(--lit);
  border-radius: 50%;
  transform: translateX(-50%);
}
.till__waves i:nth-child(1) { width: 22px; height: 22px; bottom: -12px; }
.till__waves i:nth-child(2) { width: 40px; height: 40px; bottom: -22px; }
.till__waves i:nth-child(3) { width: 58px; height: 58px; bottom: -32px; }
.till.is-paying .till__waves { opacity: 1; }
.till.is-paying .till__waves i { animation: bp-pulse 1s ease-in-out infinite; }
.till.is-paying .till__waves i:nth-child(2) { animation-delay: .15s; }
.till.is-paying .till__waves i:nth-child(3) { animation-delay: .3s; }
.till.is-paying .till__readout { background: var(--lit); color: var(--ink); }
.till.is-approved .till__readout { background: #1fa866; }

@media (max-width: 560px) {
  .till { grid-template-columns: minmax(0, 1fr); }
  .till__screen { grid-template-columns: minmax(0, 1fr); }
  .till__menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .till__item { padding: 8px 6px; font-size: .74rem; }
  .till__neck, .till__base { display: none; }
  .till__reader { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 14px; }
  .till__lines { min-height: 64px; flex-basis: 64px; }
}

/* System matcher */
.matcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 22px;
}
.matcher__q {
  font: 800 1.25rem/1.12 var(--f-display);
  letter-spacing: -.01em;
}
.matcher__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 16px;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font: 600 .96rem/1 var(--f-body);
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { background: var(--ink); color: #fff; }
.chip[aria-pressed="true"] { background: var(--lit); border-color: var(--lit); color: var(--ink); }
.matcher__why {
  flex-basis: 100%;
  padding-left: 14px;
  border-left: 3px solid var(--lit);
  font-weight: 500;
}

.tabs__panel--media { align-items: center; }
.tabs__panel--media .checks { margin-top: 18px; }
.tabs__panel--media .shot { aspect-ratio: 3 / 2; }

/* Hardware stations */
.hardware {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.hardware__lead { position: sticky; top: calc(var(--header-h) + 24px); }
.hardware__lead .section__head { margin-bottom: 24px; }
.stations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 18px;
}
.station__art {
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 10px;
  background-size: 100% 100%, 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}
.bp--icon { width: min(100%, 190px); --sw: 1.5; }
.station .bp .ln { transition: stroke .35s; }
.station:hover .bp .ln { stroke: var(--lit); }
.station:hover .bp { filter: drop-shadow(0 0 5px rgba(255, 196, 46, .5)); }
.station h3 {
  margin-top: 12px;
  font: 700 1.09rem/1.12 var(--f-display);
  letter-spacing: -.01em;
}
.station p { margin-top: 4px; color: var(--muted); }
@media (max-width: 900px) {
  .hardware { grid-template-columns: minmax(0, 1fr); }
  .hardware__lead { position: static; }
}
@media (max-width: 480px) {
  .stations { grid-template-columns: minmax(0, 1fr); }
}

/* Payments: claims and the fee calculator */
.claims { display: grid; border-top: 1.5px solid rgba(255, 255, 255, .5); }
.claims li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.claims b {
  font: 800 clamp(1.44rem, 2.28vw, 1.9rem)/1 var(--f-display);
  letter-spacing: -.02em;
  color: var(--lit);
}
.claims span { color: rgba(255, 255, 255, .84); }
.claims ~ .fine { margin-top: 18px; max-width: 34em; }
@media (max-width: 480px) {
  .claims li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

.calc {
  --focus: var(--cobalt);
  padding: clamp(22px, 3vw, 36px);
  background: #fff;
  border-radius: 14px;
  color: var(--ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.calc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: baseline;
}
.calc__row + .calc__row { margin-top: 24px; }
.calc__row label { font-weight: 600; }
.calc__row output {
  font: 800 1.29rem/1 var(--f-display);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--cobalt);
}
.calc__row input, .calc__help { grid-column: 1 / -1; }
.calc__help { font-size: .9rem; color: var(--muted); }

.calc input[type="range"] {
  --p: 50%;
  touch-action: pan-y;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(90deg, var(--cobalt) var(--p), var(--rule) var(--p));
  border-radius: 99px;
}
.calc input[type="range"]::-moz-range-track { height: 8px; background: var(--rule); border-radius: 99px; }
.calc input[type="range"]::-moz-range-progress { height: 8px; background: var(--cobalt); border-radius: 99px; }
.calc input[type="range"]::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -9px;
  background: var(--lit);
  border: 3px solid var(--ink);
  border-radius: 50%;
  -webkit-appearance: none;
  appearance: none;
}
.calc input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--lit);
  border: 3px solid var(--ink);
  border-radius: 50%;
}

.calc__result {
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--ink);
  border-radius: 10px;
  color: rgba(255, 255, 255, .86);
}
.calc__label {
  font: 700 .74rem/1 var(--f-label);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lit);
}
.calc__big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 10px;
  color: #fff;
}
.calc__big span {
  font: 800 clamp(2.28rem, 4.56vw, 3.34rem)/1 var(--f-display);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.calc__big small { font: 600 1rem var(--f-body); }
.calc__result strong { color: var(--lit); font-weight: 600; white-space: nowrap; }
.calc__fine { margin-top: 14px; font-size: .86rem; color: var(--muted); }

/* ---------- Security: floor plan and camera wall ---------- */

.fp {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 48px);
  align-items: start;
}
.fp__plan {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: clamp(12px, 2vw, 22px);
  border-radius: 14px;
}
.fpsvg { display: block; width: 100%; height: auto; }
.fp-wall, .fp-thin, .fp-win { fill: none; stroke: rgba(255, 255, 255, .9); stroke-linecap: square; }
.fp-thin { stroke-width: 1.2; stroke: rgba(255, 255, 255, .6); }
.fp-gap { fill: var(--cobalt); }
.fp-win { fill: var(--cobalt); stroke-width: 1.2; }
.fp-label { fill: rgba(255, 255, 255, .55); font: 500 10px var(--f-label); letter-spacing: 2px; }
.fp-cov { opacity: 0; transition: opacity .4s; }
.fp-cov.on { opacity: 1; }
.fp-cov .fill { fill: var(--lit); opacity: .22; }
.fp-cov .stroke { fill: none; stroke: var(--lit); stroke-width: 2.2; stroke-linecap: round; }
.fp-cov .dashed { stroke-dasharray: 5 6; stroke-width: 1.6; }
.fp-cov .solid { fill: var(--lit); }
.fp-mark { cursor: pointer; }
.fp-mark circle { fill: var(--cobalt); stroke: rgba(255, 255, 255, .9); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.fp-mark text { fill: #fff; font: 500 11px var(--f-label); pointer-events: none; transition: fill .25s; }
.fp-mark:hover circle { stroke: var(--lit); }
.fp-mark.on circle { fill: var(--lit); stroke: var(--lit); }
.fp-mark.on text { fill: var(--ink); }
.fp__note {
  margin-top: 10px;
  font: 500 .72rem/1.3 var(--f-label);
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .7);
}

.fp__list { border-top: 1.5px solid var(--ink); }
.fp__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 0 14px;
  align-items: center;
  width: 100%;
  padding: 13px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
}
.fp__item .key { color: var(--muted); transition: background-color .25s, border-color .25s, color .25s; }
.fp__name {
  font: 700 1.05rem/1.2 var(--f-display);
  letter-spacing: -.01em;
  transition: color .2s;
}
.fp__item:hover .fp__name { color: var(--cobalt); }
.fp__item { position: relative; }
.fp__desc { grid-column: 2; margin-top: 6px; color: var(--muted); }
/* With scripting the active description shows on the plan; the row copy stays for screen readers. */
.js .fp__desc {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.fp__item[aria-pressed="true"] .key { background: var(--lit); border-color: var(--lit); color: var(--ink); }
.fp__item[aria-pressed="true"] .fp__name { color: var(--cobalt); }
.fp__caption {
  min-height: 5.4em;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bp-rule);
}
.fp__caption b {
  display: block;
  font: 700 1.01rem/1.2 var(--f-display);
  letter-spacing: -.01em;
  color: var(--lit);
}
.fp__caption span { display: block; margin-top: 4px; color: rgba(255, 255, 255, .9); }
html:not(.js) .fp__caption { display: none; }
@media (max-width: 900px) {
  .fp { grid-template-columns: minmax(0, 1fr); }
  .fp__plan { top: calc(var(--header-h) + 8px); z-index: 2; }
  .fp__note { display: none; }
  .fp__caption { min-height: 6.2em; }
}

.camwall__main {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 12px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .25);
}
.camwall__main img { width: 100%; height: 100%; object-fit: cover; }
.camwall__main > span { position: absolute; z-index: 2; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.camwall__name, .camwall__time, .camwall__live {
  font: 500 .74rem/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.camwall__live { top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; }
.camwall__live i { width: 9px; height: 9px; background: #ff4d3d; border-radius: 50%; }
.camwall__name { left: 14px; bottom: 14px; }
.camwall__time { right: 14px; bottom: 14px; font-variant-numeric: tabular-nums; }
.camwall__main .camwall__scan {
  inset: 0;
  z-index: 1;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.camwall__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.camwall__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  background: #000;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.camwall__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .2s; }
.camwall__thumb span {
  position: absolute;
  left: 6px;
  bottom: 5px;
  color: #fff;
  font: 500 .62rem/1 var(--f-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.camwall__thumb:hover img,
.camwall__thumb[aria-pressed="true"] img { opacity: 1; }
.camwall__thumb[aria-pressed="true"] { border-color: var(--lit); }
.camwall__fine { margin-top: 10px; font-size: .82rem; color: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: no-preference) {
  .camwall__live i { animation: blink 1.2s steps(1) infinite; }
  .camwall__main img { animation: cam-drift 16s ease-in-out infinite alternate; }
  .camwall__main.is-switching img { animation: cam-static .3s steps(4); }
}
@keyframes cam-drift { from { transform: scale(1.03) translateX(-.8%); } to { transform: scale(1.03) translateX(.8%); } }
@keyframes cam-static { 0% { filter: brightness(2.2) contrast(.4); transform: translateY(-3%); } 50% { filter: brightness(.4); transform: translateY(2%); } 100% { filter: none; transform: none; } }

.duo__card--media { padding: 0; overflow: hidden; }
.duo__card--media .shot { aspect-ratio: 16 / 9; border-radius: 0; }
.duo__card--media > h3 { margin-top: 24px; }
.duo__card--media > h3,
.duo__card--media > p,
.duo__card--media > .checks { margin-inline: clamp(22px, 3vw, 34px); }
.duo__card--media > .checks { margin-bottom: clamp(22px, 3vw, 34px); }

/* ---------- Internet: bandwidth builder ---------- */

.bw {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 48px);
  align-items: start;
}
.bw__inputs { border-top: 1.5px solid var(--ink); }
.stepper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 3ch 44px;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.stepper__name { font-weight: 600; }
.stepper button {
  width: 44px;
  height: 44px;
  padding: 0;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font: 600 1.3rem/1 var(--f-body);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.stepper button:hover { background: var(--ink); color: #fff; }
.stepper button:disabled { background: transparent; border-color: var(--rule); color: var(--rule); cursor: default; }
.stepper output {
  font: 800 1.29rem/1 var(--f-display);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.bw__result {
  --focus: var(--lit);
  position: sticky;
  top: calc(var(--header-h) + 24px);
  padding: clamp(22px, 3vw, 36px);
  background: var(--ink);
  border-radius: 14px;
  color: #fff;
}
.bw__label {
  font: 700 .74rem/1 var(--f-label);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lit);
}
.bw__big { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.bw__big span {
  font: 800 clamp(3.04rem, 6.08vw, 4.56rem)/1 var(--f-display);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.bw__big small { font: 600 1.05rem var(--f-body); }
.bw__up { margin-top: 6px; color: rgba(255, 255, 255, .8); }
.bw__up strong { color: #fff; }
.bw__meter {
  height: 10px;
  margin-top: 18px;
  overflow: hidden;
  background: rgba(255, 255, 255, .16);
  border-radius: 99px;
}
.bw__meter i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--lit);
  border-radius: 99px;
  transition: width .5s var(--ease);
}
.bw__tier { min-height: 3.2em; margin: 16px 0 20px; font-weight: 500; }
.bw__fine { margin-top: 16px; font-size: .86rem; color: rgba(255, 255, 255, .62); }
@media (max-width: 860px) {
  .bw { grid-template-columns: minmax(0, 1fr); }
  .bw__result { position: static; }
}

.rows { border-top: 1.5px solid var(--ink); }
.rows li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.rows b { font: 700 1.05rem/1.2 var(--f-display); letter-spacing: -.01em; }
.rows span { color: var(--muted); }
@media (max-width: 480px) {
  .rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.trio-cards {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.trio-cards .shot { min-height: 100%; }
@media (max-width: 960px) {
  .trio-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio-cards .shot { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 620px) {
  .trio-cards { grid-template-columns: minmax(0, 1fr); }
}

.tip__tag { display: inline-block; margin-bottom: 16px; }

/* ---------- Websites: the flagship example ---------- */

.showcase__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.showcase__head .section__head { margin-bottom: 0; }
.showcase__head > p { color: rgba(255, 255, 255, .82); }
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: end;
}
.browser {
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22), 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: #e8ecf7;
}
.browser__bar i { width: 10px; height: 10px; background: #c2cbe2; border-radius: 50%; }
.browser__url {
  flex: 0 1 340px;
  margin-left: 10px;
  padding: 5px 12px;
  background: #fff;
  border-radius: 99px;
  color: var(--muted);
  font: 500 .74rem/1.2 var(--f-label);
}
.browser__view {
  --pos: 50%;
  position: relative;
  aspect-ratio: 1600 / 950;
  overflow: hidden;
  background: #fff;
}
.compare__layer { position: absolute; inset: 0; }
.compare__layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  z-index: 3;
  width: 3px;
  margin-left: -1.5px;
  background: var(--lit);
  pointer-events: none;
}
.compare__handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  background: var(--lit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1230' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 24px no-repeat;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
}
.compare__tag {
  position: absolute;
  top: 12px;
  z-index: 3;
  padding: 6px 10px;
  background: rgba(10, 18, 48, .82);
  border-radius: 6px;
  color: #fff;
  font: 700 .72rem/1 var(--f-label);
  letter-spacing: .09em;
  text-transform: uppercase;
  pointer-events: none;
}
.compare__tag--before { left: 12px; }
.compare__tag--after { right: 12px; background: var(--lit); color: var(--ink); }
.compare__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}
.browser__view:has(.compare__range:focus-visible) { outline: 3px solid var(--lit); outline-offset: -3px; }

.phone { justify-self: center; text-align: center; }
.phone__screen {
  width: 270px;
  padding: 10px;
  background: var(--ink);
  border-radius: 36px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .35), 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.phone__clip {
  height: 500px;
  overflow: hidden;
  border-radius: 26px;
  background: #0e3b2e;
}
.phone__clip img {
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(0, calc(var(--t, 0) * -1 * (100% - 500px)), 0);
  will-change: transform;
}
.phone__note {
  margin-top: 12px;
  font: 700 .72rem/1.2 var(--f-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}
.showcase__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: clamp(24px, 3vw, 36px);
}
@media (max-width: 980px) {
  .showcase__head { grid-template-columns: minmax(0, 1fr); }
  .showcase { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- About: three promises ---------- */

.promise {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.promise__list { border-top: 1.5px solid var(--ink); }
.promise__item {
  display: block;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  cursor: pointer;
}
.promise__name {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 800 clamp(1.44rem, 2.72vw, 2.16rem)/1.12 var(--f-display);
  letter-spacing: -.02em;
  color: #9aa4c4;
  transition: color .3s;
}
.promise__name::before {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--rule);
  border-radius: 50%;
  transition: background-color .3s, box-shadow .3s;
}
.promise__desc {
  display: block;
  margin-top: 8px;
  padding-left: 26px;
  color: var(--muted);
  font-size: 1.08rem;
  opacity: .5;
  transition: opacity .3s;
}
.promise__item:hover .promise__name,
.promise__item[aria-pressed="true"] .promise__name { color: var(--ink); }
.promise__item[aria-pressed="true"] .promise__name::before { background: var(--lit); box-shadow: 0 0 0 5px rgba(255, 196, 46, .3); }
.promise__item[aria-pressed="true"] .promise__desc { opacity: 1; }
.promise__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink);
  border-radius: 14px;
}
.promise__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.promise__media img.is-on { opacity: 1; transform: none; }
@media (max-width: 820px) {
  .promise { grid-template-columns: minmax(0, 1fr); }
  .promise__media { aspect-ratio: 3 / 2; }
}

/* Contact: photo on the direct panel */
.direct__shot { aspect-ratio: 16 / 9; margin-bottom: 20px; border-radius: 10px; }
.direct__shot img { object-position: 50% 62%; }

/* A card that follows copy inside one column */
.split .reveal + .duo__card { margin-top: 28px; }

/* ==========================================================================
   Scroll-driven motion.
   site.js gives each [data-scroll] element three numbers as it travels:
     --e  0 to 1 while it rises into view (bottom edge to upper third)
     --p  0 to 1 across its whole pass through the screen
     --x  0 to 1 as it leaves past the top
   Every rule falls back to the finished state, so nothing depends on the script.
   The page always scrolls normally; nothing here pins it or takes over the scroll.
   ========================================================================== */

/* How far down the page you are, drawn along the header */
.fx .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--lit);
  transform: scaleX(var(--page, 0));
  transform-origin: 0 50%;
}

/* Headlines light up a word at a time */
[data-words] .w {
  opacity: clamp(.2, calc(var(--e, 1) * (var(--n, 1) + 3) - var(--i, 0) - .5), 1);
  transition: opacity .25s linear;
}

/* Photos and video drift inside their frames */
.fx .shot[data-scroll][data-inview] img {
  transform: translate3d(0, calc((var(--p, .5) - .5) * -10%), 0) scale(1.16);
  transition: filter 1.1s var(--ease);
}
.fx .band[data-scroll] .band__media {
  transform: translate3d(0, calc((var(--p, .5) - .5) * -12%), 0) scale(1.14);
}

/* Hero drawings sink a little as you leave them */
.fx .hero[data-scroll] .hero__art { transform: translate3d(0, calc(var(--x, 0) * 80px), 0); }
.fx .pagehero[data-scroll] :is(.detail, .till) { transform: translate3d(0, calc(var(--x, 0) * 48px), 0); }

/* Steps: the line fills and each number lights as it's reached */
.steps { position: relative; }
.steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2.5px;
  height: 3px;
  background: var(--lit);
  transform: scaleX(var(--e, 1));
  transform-origin: 0 50%;
  transition: transform .2s linear;
}
.steps > li { --on: clamp(0, calc((var(--e, 1) - var(--at, 0)) * 16), 1); }
.steps > li::before {
  position: relative;
  z-index: 1;
  background: linear-gradient(rgb(255 196 46 / var(--on)), rgb(255 196 46 / var(--on))), var(--ink);
  box-shadow: 0 0 0 1.5px var(--lit);
  color: var(--ink);
  color: color-mix(in srgb, var(--ink) calc(var(--on) * 100%), #fff);
  transition: color .2s;
}
.steps > li > * { opacity: calc(.38 + var(--on) * .62); transition: opacity .3s; }
/* Older iPhones can't blend the number's color, so their steps simply start lit. */
@supports not (color: color-mix(in srgb, red, blue)) {
  .steps > li { --on: 1; }
}
@media (max-width: 860px) {
  .steps::before {
    left: -2.5px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 3px;
    height: auto;
    transform: scaleY(var(--e, 1));
    transform-origin: 50% 0;
  }
}

/* Hardware drawings ink themselves in */
.fx .station__art[data-scroll] .bp .ln:not(.dash) {
  animation: none;
  stroke-dashoffset: calc(1 - clamp(0, calc(var(--e, 1) * 1.8 - .2), 1));
  transition: stroke-dashoffset .25s linear, stroke .35s;
}

/* Phones: each service photo turns from blueprint blue to color as it arrives */
@media (max-width: 820px) {
  .fx .panel[data-scroll]::before { opacity: calc(1 - clamp(0, calc(var(--e, 1) * 2.4 - .7), 1)); }
}

/* Keep phones smooth: no glow filters on small screens, and drawings rest while off screen */
.bp.is-resting * { animation-play-state: paused !important; }
@media (max-width: 700px) {
  .bp .sys.on,
  .bp.all-on .open-sign,
  html:not(.js) .bp--seq .sys { filter: none; }
}

/* ==========================================================================
   Night-watch skin
   Deep navy, warm light in the windows, and a shield. Everything from here down
   replaces the earlier blueprint look or adds the security deep-dive components.
   ========================================================================== */

body { font-size: 1.04rem; }

.site-header {
  background: rgba(7, 19, 48, .96);
  border-bottom-color: rgba(255, 255, 255, .1);
}
.brand__mark { width: 30px; height: 34px; }
.brand__word i { margin-inline: .26em; font-weight: 500; opacity: .78; }
.nav a { font-weight: 600; }
.eyebrow { letter-spacing: .12em; }
.btn { border-radius: 10px; font-weight: 700; }
.lede { line-height: 1.5; }

.key { width: 32px; height: 32px; }
.key .ico { width: 17px; height: 17px; }

.section--ink { background: var(--navy); }
.section--flush { padding-top: 0; }
.site-footer { background: #050d24; }
.site-footer__save {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--lit);
  font-weight: 700;
}

/* ---------- Home hero ---------- */

.hero__title { text-wrap: balance; }
.hero__lede {
  margin-top: 16px;
  max-width: 30em;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
.sysrow { grid-template-columns: 32px auto minmax(0, 1fr) 22px; padding-block: 12px; }
.sysrow__brands { font-weight: 500; font-size: .86rem; }
.js .hero .sysrow:not(.is-on) .sysrow__name { color: rgba(255, 255, 255, .42); -webkit-text-stroke-color: transparent; }
.js .hero:not(.is-running) .hero__title .lit-text { color: rgba(255, 255, 255, .42); -webkit-text-stroke-color: transparent; }
.js .hero .sysrow:not(.is-on) .key { border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .5); }

.secured {
  position: absolute;
  right: 3%;
  top: -6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: rgba(47, 208, 138, .14);
  border: 1.5px solid rgba(47, 208, 138, .65);
  border-radius: 999px;
  color: #8ff3c6;
  font: 700 .76rem/1 var(--f-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: opacity .6s, transform .6s var(--ease);
}
.secured .ico { width: 18px; height: 18px; }
.js .hero:not(.is-running) .secured { opacity: 0; transform: translateY(8px); }
@media (max-width: 940px) {
  .secured { position: static; margin-bottom: 10px; }
  .hero__art { margin-top: 8px; }
}
@media (max-width: 560px) {
  .sysrow { grid-template-columns: 32px minmax(0, 1fr) 22px; }
}

/* ---------- The storefront scene ---------- */

.bp--home { --sw: 2.2; }
.bp .sc { stroke: none; }
.bp .sc-ground { fill: #040b20; }
.bp .sc-wall { fill: #15307d; }
.bp .sc-room { fill: #0a1848; }
.bp .sc-trim { fill: #2247ae; }
.bp .sc-deep { fill: #071335; }
.bp .mask { fill: #0b1b4f; }
.bp .star { fill: #fff; opacity: .55; }
.bp .hit { fill: transparent; }

.bp .room-glow { fill: var(--lit); opacity: 0; transition: opacity 1.2s; }
.bp.all-on .room-glow,
html:not(.js) .bp--seq .room-glow { opacity: .13; }

.bp .dome {
  fill: rgba(72, 112, 255, .13);
  stroke: rgba(255, 255, 255, .16);
  stroke-width: var(--sw);
  stroke-linejoin: round;
  stroke-dasharray: 1;
  transition: stroke-dashoffset 1.5s var(--ease), stroke .8s, fill .8s;
}
.bp.all-on .dome,
html:not(.js) .bp--seq .dome {
  fill: rgba(255, 196, 46, .06);
  stroke: var(--lit);
  filter: drop-shadow(0 0 14px rgba(255, 196, 46, .35));
}
.js .bp--seq:not(.all-on) .dome { stroke-dashoffset: 1; }
.bp--detail :is(.dome, .star) { display: none; }

.bp .bp-sign { fill: rgba(255, 255, 255, .8); transition: fill .8s; }
.bp.all-on .bp-sign { fill: var(--lit); }

.bp .co .bub { fill: #0b1b4f; }
.bp .co .glyph {
  fill: none;
  stroke: var(--bp-dim);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .5s;
}
.bp .co.on .glyph,
html:not(.js) .bp--seq .co .glyph { stroke: var(--ink); }

.bp--num .num { font: 800 270px/1 var(--f-display); letter-spacing: -8px; }
.bp--num .num--outline { stroke: rgba(255, 255, 255, .7); }

/* Zoomed views on inner pages sit in a soft card instead of a drafting frame */
.detail {
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
  border-radius: 18px;
}
.detail::before, .detail::after { display: none; }
.detail__view { border-radius: inherit; }
.detail__label {
  padding: 7px 12px;
  background: rgba(7, 19, 48, .82);
  border: 0;
  border-radius: 999px;
  letter-spacing: .08em;
}
.detail__console { background: rgba(5, 13, 36, .86); }

.station__art {
  background: linear-gradient(160deg, #173489, #0a1a4d);
  color: #fff;
}
.station .bp .ln { stroke: rgba(255, 255, 255, .85); }

.fp__plan { background: #0c1e58; color: #fff; }
.fp-gap, .fp-win { fill: #0c1e58; }
.fp-mark circle { fill: #0c1e58; }
.fp__item[aria-pressed="true"] .fp__name { color: var(--cobalt); }

/* ---------- Photos: natural color, easing in as they arrive ---------- */

.shot::after { display: none; }
.js .shot[data-inview]:not(.in) img { filter: brightness(.72) saturate(.75); }
.panel::before { background: rgba(5, 13, 36, .6); mix-blend-mode: normal; }

/* ---------- Proof points ---------- */

.trust { background: #fff; border-bottom: 1px solid var(--rule); }
.trust__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust__item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: center;
  padding: 20px 22px;
  border-left: 1px solid var(--rule);
}
.trust__item:first-child { padding-left: 0; border-left: 0; }
.trust__item .ico { grid-row: span 2; width: 32px; height: 32px; color: var(--cobalt); }
.trust__item b { font: 800 1.1rem/1.15 var(--f-display); letter-spacing: -.01em; }
.trust__item span { font-size: .9rem; line-height: 1.3; color: var(--muted); }
@media (max-width: 900px) {
  .trust__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item { padding: 16px 14px; }
  .trust__item:nth-child(odd) { padding-left: 0; border-left: 0; }
  .trust__item:nth-child(n + 3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 420px) {
  .trust__item { grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; }
  .trust__item .ico { width: 26px; height: 26px; }
  .trust__item b { font-size: 1rem; }
}

/* ---------- Payment platforms ---------- */

.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.platform {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px;
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .2s, translate .3s var(--ease), box-shadow .3s;
}
.platform:hover { border-color: var(--cobalt); translate: 0 -3px; box-shadow: 0 22px 40px -28px rgba(10, 18, 48, .45); }
.platform__for { font: 700 .72rem/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.platform__name { font: 800 1.7rem/1 var(--f-display); letter-spacing: -.02em; }
.platform__text { flex: 1; color: var(--muted); }
.platform em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 700; color: var(--cobalt); }
.platform .ico { transition: transform .25s var(--ease); }
.platform:hover .ico { transform: translateX(4px); }
@media (max-width: 900px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 440px) { .platforms { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Security levels ---------- */

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 28px; }
.tier {
  padding: 24px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
}
.tier:last-child { background: rgba(255, 196, 46, .1); border-color: rgba(255, 196, 46, .5); }
.tier__n { font: 700 .72rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--lit); }
.tier b { display: block; margin-top: 10px; font: 800 1.9rem/1 var(--f-display); letter-spacing: -.02em; }
.tier em { display: block; margin-top: 4px; font-style: normal; font-weight: 600; color: rgba(255, 255, 255, .8); }
.tier p { margin-top: 12px; color: rgba(255, 255, 255, .76); }
@media (max-width: 760px) { .tiers { grid-template-columns: minmax(0, 1fr); } }

.levels__pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.level {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.level span { font: 700 .7rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--lit); }
.level b { font: 800 clamp(1.25rem, 2.6vw, 1.8rem)/1.05 var(--f-display); letter-spacing: -.02em; }
.level em { font-style: normal; font-size: .92rem; color: rgba(255, 255, 255, .74); }
.level:hover { border-color: var(--lit); }
.level[aria-pressed="true"] { background: var(--lit); border-color: var(--lit); color: var(--ink); }
.level[aria-pressed="true"] :is(span, em) { color: rgba(10, 18, 48, .78); }
.levels__sum { min-height: 3.2em; margin: 20px 0 22px; font-size: 1.14rem; font-weight: 500; }
.levels__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.levels__group {
  padding: 22px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  transition: opacity .45s, border-color .45s, background-color .45s;
}
.levels__group h3 { font: 800 1.2rem/1.15 var(--f-display); letter-spacing: -.01em; }
.levels__in { margin: 6px 0 12px; font: 700 .7rem/1.3 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--lit); }
.levels__group li {
  position: relative;
  padding: 9px 0 9px 30px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .95rem;
  line-height: 1.4;
}
.levels__group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 20px;
  height: 20px;
  background: var(--lit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1230' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
  border-radius: 50%;
  transition: background-color .45s;
}
.levels__group.is-in { border-color: rgba(255, 196, 46, .45); }
.levels__group:not(.is-in) { opacity: .4; }
.levels__group:not(.is-in) li::before { background-color: rgba(255, 255, 255, .28); background-image: none; }
@media (max-width: 900px) {
  .levels__cols { grid-template-columns: minmax(0, 1fr); }
  .level { padding: 14px 12px; }
  .level em { display: none; }
}

/* ---------- Smart camera wall ---------- */

.camwall__main img { animation: none !important; }
.camwall__boxes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cambox {
  position: absolute;
  border: 2px solid var(--lit);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .45);
}
.cambox span {
  position: absolute;
  left: -2px;
  bottom: 100%;
  padding: 3px 7px;
  background: var(--lit);
  border-radius: 3px 3px 3px 0;
  color: var(--ink);
  font: 700 .64rem/1.3 var(--f-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cambox--ignored { border-color: rgba(255, 255, 255, .7); border-style: dashed; }
.cambox--ignored span { background: rgba(255, 255, 255, .88); }
.camzone { position: absolute; inset: 0; width: 100%; height: 100%; }
.camzone polygon { fill: rgba(255, 196, 46, .16); stroke: var(--lit); stroke-width: 2; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.camzone text { fill: var(--lit); font: 700 4px var(--f-label); letter-spacing: .3px; }
@media (prefers-reduced-motion: no-preference) {
  .cambox, .camzone { animation: cam-find .4s var(--ease) both; }
}
@keyframes cam-find { from { opacity: 0; transform: scale(1.12); } }
.camwall__thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.camwall__thumb span { font-family: var(--f-label); font-weight: 700; letter-spacing: .04em; }
.camwall__note {
  min-height: 5.4em;
  margin-top: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .06);
  border-left: 3px solid var(--lit);
  border-radius: 0 10px 10px 0;
  color: rgba(255, 255, 255, .88);
}
.camwall__note b { display: block; margin-bottom: 2px; color: var(--lit); font: 800 1.05rem/1.2 var(--f-display); }
@media (max-width: 520px) {
  .camwall__thumb span { font-size: .52rem; left: 4px; }
  .cambox span { font-size: .56rem; padding: 2px 5px; }
}

/* An example phone alert inside a tab */
.notif {
  position: relative;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 16px 30px -22px rgba(10, 18, 48, .5);
  font-size: .96rem;
  line-height: 1.4;
}
.notif b { display: block; font: 700 .7rem/1.4 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.notif small { display: block; margin-top: 6px; color: var(--muted); }
.tabs__panel > div > p + .notif { color: var(--ink); }

/* ---------- Alarm Messenger demo ---------- */

.amsg {
  justify-self: center;
  width: min(100%, 380px);
  padding: 22px;
  background: var(--navy);
  border-radius: 28px;
  box-shadow: 0 0 0 1.5px rgba(10, 18, 48, .2), 0 40px 70px -40px rgba(10, 18, 48, .7);
  color: #fff;
}
.amsg__app {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 .74rem/1 var(--f-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.amsg__app .ico { width: 20px; height: 20px; color: var(--lit); }
.amsg__app span { margin-left: auto; padding: 4px 8px; background: rgba(255, 255, 255, .12); border-radius: 99px; font-size: .64rem; }
.amsg__title { margin-top: 18px; font: 800 1.6rem/1.1 var(--f-display); letter-spacing: -.02em; }
.amsg__where { margin-top: 4px; color: rgba(255, 255, 255, .7); }
.amsg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.amsg__btn {
  min-height: 84px;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  font: 700 1rem/1.2 var(--f-body);
  cursor: pointer;
  transition: filter .2s, transform .15s;
}
.amsg__btn:hover { filter: brightness(1.1); }
.amsg__btn:active { transform: scale(.97); }
.amsg__btn--police { background: #e5383b; }
.amsg__btn--cancel { background: #1fa866; }
.amsg__timer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--lit);
  border-radius: 16px;
  color: var(--ink);
}
.amsg__timer b { font: 800 2rem/1 var(--f-display); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
.amsg__timer span { font-weight: 600; line-height: 1.2; }
.amsg__timer button {
  padding: 8px 12px;
  background: rgba(10, 18, 48, .12);
  border: 0;
  border-radius: 99px;
  color: var(--ink);
  font: 700 .86rem/1 var(--f-body);
  cursor: pointer;
}
.amsg__result {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .08);
  border-radius: 14px;
  font-weight: 500;
}
.amsg__again {
  margin-top: 12px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--lit);
  font: 700 .96rem/1 var(--f-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.amsg.is-done :is(.amsg__btn, .amsg__timer button) { opacity: .4; pointer-events: none; }

/* ---------- Scott, the website partner ---------- */

.partner {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.partner__badge span {
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 120px);
  aspect-ratio: 1;
  background: var(--navy);
  border: 3px solid var(--lit);
  border-radius: 50%;
  color: #fff;
  font: 800 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-display);
  letter-spacing: -.02em;
}
.partner__quote { margin: 0; }
.partner__words {
  margin-top: 12px;
  font: 700 clamp(1.3rem, 2.3vw, 1.85rem)/1.3 var(--f-display);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.partner__quote footer { margin-top: 16px; color: var(--muted); }
.partner__quote footer b { display: block; color: var(--ink); font-size: 1.08rem; }
.partner__how { padding: clamp(20px, 3vw, 30px); background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; }
.partner__how h3 { font: 800 1.25rem/1.15 var(--f-display); letter-spacing: -.01em; }
.partner__how .checks { margin: 14px 0 18px; }
@media (max-width: 980px) {
  .partner { grid-template-columns: auto minmax(0, 1fr); }
  .partner__how { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .partner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Juan's business card ---------- */

.bcard { display: grid; gap: 16px; }
.bcard__face {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 32px);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(47, 91, 255, .5), transparent 70%),
    linear-gradient(150deg, #0d2468, #050d24);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 196, 46, .5), 0 30px 60px -36px rgba(10, 18, 48, .7);
  color: #fff;
}
.bcard__face::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -70px;
  width: 240px;
  height: 270px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 36' fill='none' stroke='%23ffffff' stroke-opacity='.09' stroke-width='1.6'%3E%3Cpath d='M16 2.2 29 7v9.6c0 8.1-5.3 14.4-13 17.2C8.3 31 3 24.7 3 16.6V7z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.bcard__top { display: flex; align-items: center; gap: 10px; }
.bcard__name { margin-top: 26px; font: 800 clamp(1.8rem, 3.4vw, 2.4rem)/1 var(--f-display); letter-spacing: -.02em; }
.bcard__role { margin-top: 8px; color: var(--lit); font-weight: 600; line-height: 1.4; }
.bcard__lines { position: relative; z-index: 1; display: grid; gap: 8px; margin-top: 22px; }
.bcard__lines a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.bcard__lines a:hover { color: var(--lit); }
.bcard__area { margin-top: 20px; font: 700 .72rem/1 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.bcard__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.bcard__acts .btn { flex: 1 1 auto; }

/* ---------- Small fits for the wider typeface ---------- */

.facts > div { grid-template-columns: 8.4rem minmax(0, 1fr); }
.claims li { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); }
.rows li { grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr); }
.promise__desc { font-size: 1.02rem; }
.tab { padding: 13px 20px; }
.chip { font-weight: 700; }
.steps > li::before { font-family: var(--f-label); font-weight: 700; }
.cb__step { font-family: var(--f-label); font-weight: 700; }
.till__item { font-size: .8rem; }
.direct .action__value { font-size: clamp(.98rem, 1.3vw, 1.12rem); }
@media (max-width: 480px) {
  .claims li, .rows li { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   Phone touch sizes: thumb-sized targets, nothing wider than the smallest iPhone
   ========================================================== */

@media (max-width: 760px), (pointer: coarse) {
  .site-footer ul { gap: 0; }
  .site-footer ul a,
  .site-footer__save { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__save { margin-top: 8px; }
  .bcard__lines { gap: 0; margin-top: 14px; }
  .bcard__lines a { min-height: 44px; }
  .header-phone,
  .site-header .brand { min-height: 44px; }
  .amsg__timer button { min-height: 44px; padding-inline: 16px; }
  .camwall__thumb { aspect-ratio: 4 / 3; min-height: 44px; }
  .chip { min-height: 44px; }
}

@media (max-width: 380px) {
  .btn { white-space: normal; text-align: center; line-height: 1.2; padding-block: 12px; }
}

/* iPhone SE, and bigger iPhones set to Display Zoom, are only 320 points wide. */
@media (max-width: 359px) {
  .brand { gap: 8px; }
  .brand__mark { width: 26px; height: 30px; }
  .brand__word { font-size: 1.06rem; }
}