/* Shared by trailer.html and request-a-demo.html. Written with the good-css skill (.claude/skills/good-css). */

@font-face { font-family: "Manrope"; src: url(/assets/Manrope.ttf) format("truetype"); font-weight: 200 800; font-display: swap; }

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

:root {
  color-scheme: light;
  text-wrap: pretty;
  overflow-wrap: break-word;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;

  /* docs/DESIGN.md: surface-0, ink and line (Paper), route (Night) */
  --surface-0: oklch(1 0 none);
  --ink: oklch(12.5% 0.004 67);
  --ink-soft: oklch(34% 0.009 72);
  --ink-muted: oklch(50% 0.012 72);
  --line: oklch(88% 0.008 75);
  --route: oklch(80.5% 0.1753 156.3);
  /* Dark greens at the route's hue. A color-mix of ink and route drifts to olive. */
  --btn: oklch(25% 0.045 156.3);
  --btn-hover: oklch(33% 0.075 156.3);
  --danger: oklch(50% 0.17 25);

  /* Soft liquid glass: a lighter sheen at the top left, and a little blur of what is behind. */
  --glass: linear-gradient(135deg,
    color-mix(in oklch, var(--surface-0) 84%, transparent),
    color-mix(in oklch, var(--surface-0) 68%, transparent));
  --glass-blur: blur(7px) saturate(135%);
  /* A slight emboss: a bright glass rim, a lit top edge, a shaded bottom edge, and a soft lift. */
  --emboss:
    inset 0 0 0 1px color-mix(in oklch, var(--surface-0) 55%, transparent),
    inset 0 1.5px 0 color-mix(in oklch, var(--surface-0) 95%, transparent),
    inset 0 -1.5px 0 color-mix(in oklch, var(--ink) 9%, transparent),
    0 1px 2px color-mix(in oklch, var(--ink) 10%, transparent),
    0 14px 40px color-mix(in oklch, var(--ink) 10%, transparent);
  --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 3rem);
  --top-bar: 4.5rem; /* the header's height */
  --text-title: clamp(2.25rem, 1.26rem + 4.953vw, 5.23rem);
  --strip: clamp(7.5rem, 18svh, 12rem); /* the band's height above the Product Areas box */
  --text-lede: clamp(1rem, 0.946rem + 0.27vw, 1.1875rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  margin: 0;
  min-block-size: 100svh;
  overflow-x: clip;
  background: var(--surface-0);
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--ink);
}

/* A faint wash of green at the very top, fading out just below the top bar. It is static, so it costs nothing to run. */
body::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 7.125rem;
  pointer-events: none;
  background:
    radial-gradient(45% 100% at 18% 0, color-mix(in oklch, var(--route) 17%, transparent), transparent),
    radial-gradient(38% 75% at 55% 0, color-mix(in oklch, var(--route) 10%, transparent), transparent),
    radial-gradient(42% 110% at 88% 0, color-mix(in oklch, var(--route) 16%, transparent), transparent);
}

:focus-visible {
  outline: max(2px, 0.08em) solid currentColor;
  outline-offset: 0.25em;
}

/* The top bar: the logo at the far left, the button at the far right. */
.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem;
  padding-inline: clamp(1rem, 0.75rem + 1vw, 1.75rem);
}

.logo-link {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
}

.logo-mark {
  flex: none;
  display: block;
  inline-size: 1.875rem;
  block-size: 1.875rem;
}

.logo {
  display: block;
  inline-size: 5.5rem;
  block-size: auto;
  /* logo.png is the light Night logo. This renders it in ink for the white page. */
  filter: brightness(0);
}

.btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  padding-block: 0.5rem;
  padding-inline: 1.125rem;
  border: 0;
  border-radius: 6px;
  background: var(--btn);
  color: var(--surface-0);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.btn svg {
  flex: none;
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.btn:focus-visible { outline-color: var(--btn); }
.btn:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    background: var(--btn-hover);
    box-shadow: 0 2px 16px color-mix(in oklch, var(--route) 45%, transparent);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out); }
}

/* The band: it fades into the white above and below, and takes no input. */
.band {
  position: relative;
  block-size: clamp(26rem, 70svh, 46rem);
  margin-block: 0 clamp(2rem, 1rem + 4vh, 5rem);
  pointer-events: none;
  contain: layout paint style;
  /* Shows when WebGL is not available. The canvases cover it otherwise. */
  background: linear-gradient(115deg,
    color-mix(in oklch, var(--route) 45%, var(--surface-0)),
    color-mix(in oklch, var(--route) 75%, var(--surface-0)));
  mask-image: linear-gradient(to bottom, transparent, black 34%, black 70%, transparent);
}

.band canvas {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

#dots { opacity: 0.65; }

/* Each line arrives once, in order. */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: rise 700ms var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 180ms + 80ms);
  }

  @keyframes rise {
    from { opacity: 0; translate: 0 1.25rem; }
  }
}

/* The landing page */
.hero {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2rem;
  padding-inline: var(--gutter);
  /* With the strip and the 4.5rem top bar, this puts the Product Areas box's top just below the
     first screen. The start padding keeps the words centered on the screen, not in this box. */
  min-block-size: calc(100svh - var(--top-bar) + 0.5rem - var(--strip));
  align-content: center;
  padding-block-start: max(0rem, calc(var(--strip) - var(--top-bar) - 0.5rem));
  text-align: center;
}

.hero .lede {
  font-size: clamp(1.125rem, 1.05rem + 0.374vw, 1.35rem);
  line-height: 1.4;
}

.hero .btn {
  min-block-size: 3.0625rem;
}

/* The stage: the band fills it, and the Product Areas card floats inside the band. */
.stage {
  position: relative;
  /* The band starts 6rem higher, so its waves rise beside the button. */
  margin-block-start: -6rem;
  /* The green ends in a hard line a fixed distance below the box's top, however tall the box is.
     The rest of the box hangs past that line, over the white. */
  --green-height: calc(var(--strip) + 6rem + 23.75rem);
  padding-block: calc(var(--strip) + 6rem) 0;
  padding-inline: var(--gutter);
}

.stage .band {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--green-height);
  margin: 0;
}

/* Layers, bottom to top: the band, the graph, the box. The box's glass dims and blurs the graph. */
.stage #dots {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: block;
  inline-size: 100%;
  block-size: var(--green-height);
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black 6rem);
}

.areas {
  position: relative;
  z-index: 1;
  /* A lighter blur than the other box, so a thin route stays faintly visible through the glass. */
  background: var(--glass);
  backdrop-filter: blur(2.5px) saturate(135%);
  box-shadow: var(--emboss);
  display: grid;
  gap: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  max-inline-size: 72rem;
  margin-inline: auto;
  /* The text sits 1rem below center. The two paddings still add up to the same box height. */
  --areas-pad: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  --areas-side: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  padding-block: calc(var(--areas-pad) + 1rem) calc(var(--areas-pad) - 1rem);
  padding-inline: var(--areas-side);
  border-radius: 8px;
}

.areas-head {
  /* The row sits in the box's top corners: its top gap equals the side padding. The end margin sets
     the gap to the columns below it. */
  --head-shift: calc(var(--areas-side) - var(--areas-pad) - 1rem);
  margin-block: var(--head-shift) calc(-1rem - var(--head-shift));
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}

.areas h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.areas-note {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.area-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.area-photo {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  margin-block-start: calc(0.75rem + 10px);
  border-radius: 6px;
  object-fit: cover;
}

/* Subgrid lines up the names, photos, bold lines and lists across the columns. */
.area {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  padding-block-end: 1.5rem;
}

.area-name {
  margin: 0;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}

.area-line {
  margin-block: calc(1.5rem + 10px) 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.area ul {
  display: grid;
  align-content: start;
  gap: 0.875rem;
  margin: 0;
  padding-inline-start: 1.125rem;
  list-style: disc;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ink-soft);
}

.area a { color: inherit; }

.hero h1 {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hero h1 span { display: block; }

.lede {
  margin: 0;
  font-size: var(--text-lede);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* The request a demo page: the words on the left, the form card on the right. */
.demo {
  position: relative;
  padding-block: clamp(1.5rem, 0.5rem + 4vh, 4rem) clamp(4rem, 2rem + 8vh, 7rem);
  padding-inline: var(--gutter);
}

.demo .band {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: min(70%, 44rem);
  margin: 0;
  mask-image: linear-gradient(to bottom, transparent, black 45%);
}

.demo-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  max-inline-size: 82rem;
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.demo h1 {
  margin: 0;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 4.25rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.demo .lede {
  margin-block-start: 1.25rem;
  max-inline-size: 28rem;
}

.card {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-radius: 8px;
  background: var(--surface-0);
  box-shadow: 0 12px 40px color-mix(in oklch, var(--ink) 8%, transparent);
}

.names {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: 1rem;
}

.field { display: grid; }

/* A real label for screen readers. The placeholder shows the same words on screen. */
.sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: clip;
  clip-path: inset(50%);
  white-space: nowrap;
}

.card :is(input, select) {
  inline-size: 100%;
  min-block-size: 3.25rem;
  padding-block: 0.625rem;
  padding-inline: 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--surface-0);
  color: var(--ink);
  font: inherit;
  font-size: max(16px, 1rem);
  font-weight: 500;
}

.card input::placeholder { color: var(--ink-muted); opacity: 1; }

.card select {
  appearance: none;
  padding-inline-end: 2.75rem;
  /* The wordmark's chevron, pointing down. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 8 12 16.5 20.5 8' fill='none' stroke='%23040302' stroke-width='3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.75rem;
}

/* A select still on its empty first option looks like a placeholder. */
.card select:has(option[value=""]:checked) { color: var(--ink-muted); }

.card :is(input, select):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.card :is(input, select):user-invalid { border-color: var(--danger); }

.card .btn {
  inline-size: 100%;
  min-block-size: 3rem;
}

.status {
  margin: 0;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border-radius: 6px;
  background: color-mix(in oklch, var(--route) 18%, var(--surface-0));
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.status[hidden] { display: none; }

.form-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.form-note a { color: inherit; }

/* The privacy policy: one readable column of text. */
.legal {
  max-inline-size: 44rem;
  margin-inline: auto;
  padding-block: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding-inline: var(--gutter);
  line-height: 1.6;
  color: var(--ink-soft);
}

.legal h1 {
  margin: 0;
  font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
}

.legal-date { margin-block: 0.75rem 2rem; font-size: 0.9375rem; }

.legal h2 {
  margin-block: 2.25rem 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.legal p { margin-block: 0.75rem; }

.legal ul { margin-block: 0.75rem; padding-inline-start: 1.25rem; }

.legal li { margin-block: 0.35rem; }

.legal a { color: var(--ink); }

.legal-foot {
  max-inline-size: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.status-error {
  background: oklch(95% 0.03 25);
  color: oklch(40% 0.14 25);
}

.card .btn:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* The shader draws the band and its wavy fade. The CSS version above is for no WebGL. */
.band.live {
  /* The white gives the grain's blend a backdrop. Overlay leaves pure white unchanged, so grain shows only on the green. */
  background: var(--surface-0);
  mask-image: none;
}

/* The grain: one static tile, above the silk and the graph. It never animates. */
.band.live::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.6 .6 .6 0 -.4 .6 .6 .6 0 -.4 .6 .6 .6 0 -.4 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.4;
  /* The fade hides a faint line that this layer's top edge can draw on the white. */
  mask-image: linear-gradient(to bottom, transparent, black 3rem);
}

/* In-page links from the top bar */
html { scroll-padding-block-start: 1.5rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.top-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.top-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(0.75rem, 0.5rem + 1vw, 1.75rem);
}

.top-links a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .top-links a:hover { color: var(--btn-hover); }
}

/* On a narrow screen: the logo and button on the first row, the 3 links spread across the second. */
@media (max-width: 44rem) {
  :root { --top-bar: 7.25rem; }

  .top { flex-wrap: wrap; row-gap: 0; }

  .top-right { display: contents; }

  .top-links {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
  }
}

/* On the smallest phones: keep the logo and button on one row, and the 3 links on one row. */
@media (max-width: 24rem) {
  .top { column-gap: 0.5rem; }
  .logo { inline-size: 4.5rem; }
  .top .btn { padding-inline: 0.75rem; font-size: 0.875rem; }
  .top-links { flex-wrap: nowrap; column-gap: 0.5rem; }
  .top-links a { font-size: 0.875rem; }
}

/* How it works and security: plain white sections below the band */
.section {
  max-inline-size: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section-how { padding-block-start: clamp(5rem, 3rem + 6.5vw, 9rem); }
/* The security box, with the same space above and below it. */
.section-secure {
  --secure-gap: clamp(3.75rem, 2.5rem + 4vw, 5.75rem);
  position: relative;
  margin-block: var(--secure-gap);
  padding-inline: var(--gutter);
}

.section-advantages { padding-block-end: clamp(3rem, 1.5rem + 4.5vw, 5rem); }

.advantages {
  display: grid;
  /* The 34% allows 2 columns at most, so the 4 boxes make 2 even rows. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(17rem, 34%)), 1fr));
  gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem);
}

.adv-art {
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: clip;
  border-radius: 8px;
  background: color-mix(in oklch, var(--route) 10%, var(--surface-0));
}

.adv-art svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.adv-art svg text {
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  fill: var(--ink-soft);
}

.adv-art .wall {
  fill: var(--surface-0);
  stroke: var(--ink-soft);
  stroke-width: 2;
}

.adv-art .route {
  fill: none;
  stroke: var(--btn-hover);
  stroke-width: 3.5;
}

.adv-art .spot { fill: var(--btn-hover); }

.adv-art :is(.tag, .app, .hub) rect,
.adv-art .hub {
  fill: var(--surface-0);
  stroke: var(--line);
}

.adv-art .hub { stroke: var(--btn-hover); stroke-width: 1.5; }

.adv-art .upkeep rect { fill: var(--surface-0); stroke: var(--line); }
.adv-art .upkeep text { font-size: 13px; fill: var(--ink); }

/* The camera visual: the old ways are faded and crossed out, and the phone stays at full strength. */
.adv-art .nope { opacity: 0.6; }
.adv-art .qr { fill: var(--ink-soft); }
.adv-art .caret { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.adv-art .strike { fill: none; stroke: var(--ink); stroke-width: 2; }
.adv-art .phone-body { fill: var(--ink); }
.adv-art .scan { fill: none; stroke: var(--surface-0); stroke-width: 2.5; }
.adv-art .spot-ring { fill: none; stroke: var(--surface-0); stroke-width: 2; }
.adv-art .tick { fill: none; stroke: var(--btn-hover); stroke-width: 2.5; }
.adv-art .found rect { stroke: var(--btn-hover); }
.adv-art .found text { fill: var(--ink); }

.adv-shot {
  background: oklch(97.5% 0.001 none);
  box-shadow: inset 0 0 0 1px var(--line);
}

.adv-shot img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.advantages h3 {
  margin-block: 1.25rem 0.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.advantages p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* The page's end: the partner call and footer on green that fades in from the white above. */
.section-end {
  position: relative;
  padding-inline: var(--gutter);
}

/* The call to partners, on the green below the security box */
.partners {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 2rem;
  /* The start padding clears the band's wavy fade. */
  padding-block: 12rem clamp(2.5rem, 1.5rem + 3vw, 4rem);
  text-align: center;
}

.partners h2 {
  margin: 0;
  font-size: clamp(2.25rem, 1.964rem + 1.43vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-block: 1rem;
  border-block-start: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
  font-size: 0.875rem;
  font-weight: 500;
}

.foot p { margin: 0; }

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}

.foot a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  color: var(--ink);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .foot a:hover { text-decoration: underline; }
}

.foot-band {
  position: absolute;
  inset-inline: 0;
  inset-block: 0;
  block-size: auto;
  margin: 0;
}

.section-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: end;
  gap: 1rem clamp(2rem, 1rem + 4vw, 5rem);
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.section h2,
.secure-title h2 {
  margin: 0;
  font-size: clamp(2.25rem, 1.964rem + 1.43vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.section-head p {
  margin: 0;
  font-size: var(--text-lede);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Two wide steps with real building images, then four phones with real app screens. */
.steps-wide,
.steps-phones {
  display: grid;
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

.steps-phones {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
}

/* The image is absolute, so its own size can never stretch the tile. */
.step-art {
  --pad: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: clip;
  border-radius: 8px;
  background: color-mix(in oklch, var(--route) 10%, var(--surface-0));
}

.step-art img {
  position: absolute;
  inset: var(--pad);
  display: block;
  inline-size: calc(100% - 2 * var(--pad));
  block-size: calc(100% - 2 * var(--pad));
  object-fit: contain;
}

/* Step 2: the build film fills the tile. Its background is the tile's color. */
.step-art.model-film video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The floor plan is drawn on white, so it gets a white sheet with a hairline. */
.step-art.paper {
  background: var(--surface-0);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* The plan fills the sheet. */
.step-art.paper img {
  inset: 1px;
  inline-size: calc(100% - 2px);
  block-size: calc(100% - 2px);
  object-fit: cover;
  object-position: center bottom;
}

.phone-tile {
  display: grid;
  place-items: center;
  padding-block: 1.75rem;
  padding-inline: 1rem;
  border-radius: 8px;
  background: color-mix(in oklch, var(--route) 10%, var(--surface-0));
}

.phone {
  inline-size: min(100%, 11.5rem);
  aspect-ratio: 640 / 1390;
  overflow: clip;
  border: 5px solid var(--ink);
  border-radius: 1.75rem;
  background: var(--ink);
  box-shadow: 0 10px 28px color-mix(in oklch, var(--ink) 18%, transparent);
}

.phone img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Step 3: the same target as the "Found you" phone in Advantages, in the same coordinates. */
.phone-found {
  position: relative;
}

.phone-found svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.phone-found .target-frame { fill: none; stroke: var(--surface-0); stroke-width: 2.5; }
.phone-found .target-spot { fill: var(--btn-hover); }
.phone-found .target-ring { fill: none; stroke: var(--surface-0); stroke-width: 2; }

.step-title {
  margin-block: 1.25rem 0.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.step-title span {
  margin-inline-end: 0.5rem;
  color: var(--btn-hover);
}

.steps-wide p,
.steps-phones p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Security: large words on the left half and small notes on the right half, in a glass box. */
.secure-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center;
  gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
  max-inline-size: 72rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
  border-radius: 8px;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--emboss);
}

/* The words and the lock share one grid cell, so the lock sits behind the words. */
.secure-title {
  display: grid;
  align-items: center;
}

.secure-title > * { grid-area: 1 / 1; }

.secure-title h2 {
  position: relative;
  font-size: clamp(2.5rem, 2.036rem + 2.14vw, 3.75rem);
  text-align: center;
}

.secure-title svg {
  justify-self: center;
  inline-size: clamp(9rem, 7rem + 6vw, 13rem);
  block-size: clamp(9rem, 7rem + 6vw, 13rem);
  color: var(--btn-hover);
  opacity: 0.12;
}

.protect {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem 2rem;
}

.protect h3 {
  margin-block: 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
}

.protect p {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-muted);
}