/* Public marketing page, Carbon Gray 100 dark theme.

   Self-contained rather than loading app.css: the product stylesheet carries
   component chrome this page does not want, and the marketing page needs its
   own section rhythm. The earlier version of this page read as one flat gray
   because every section sat on the same background with nothing between them.
   Contrast here comes from Carbon's layer model, background #161616 against
   layer-01 #262626 with #393939 hairlines, plus one saturated blue band and a
   footer that steps up a layer. Same structure, dark palette. */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Mono is the second half of the Plex pairing and the product UI already sets
   every label in it. The marketing page was running on Sans alone, so labels
   and body text carried identical texture and the eyebrows read as small grey
   sentences rather than as labels. Used only for label-shaped things. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --primary: #0f62fe;
  --blue-hover: #0353e9;
  --blue-80: #002d9c;
  --link: #78a9ff;          /* Carbon's dark-theme link: #0f62fe fails contrast on #161616 */
  --ink: #f4f4f4;
  --ink-muted: #c6c6c6;
  --ink-subtle: #8d8d8d;
  --canvas: #161616;        /* Gray 100 background */
  --surface-1: #262626;     /* layer-01, the alternating band */
  --surface-2: #393939;     /* layer-02, hairlines and grid lines */
  --hairline: #393939;
  --inverse-canvas: #262626;
  --inverse-surface-1: #393939;
  --inverse-ink: #f4f4f4;
  --inverse-ink-muted: #c6c6c6;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.16px; /* Carbon precision detail, not a typo */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { color: #a6c8ff; text-decoration: underline; }

.shell { max-width: 1312px; margin: 0 auto; padding: 0 32px; }

/* ---------- utility bar + nav ---------- */

.utility {
  background: var(--surface-1);
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.32px;
  height: 32px;
}

.utility .shell { display: flex; align-items: center; height: 100%; gap: 20px; }
.utility .spacer { flex: 1; }
.utility a { color: var(--ink-muted); }

.nav {
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 40;
}

.nav .shell { display: flex; align-items: center; height: 48px; gap: 8px; }
.nav .spacer { flex: 1; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.brand:hover { text-decoration: none; color: var(--ink); }
.brand svg { width: 20px; height: 20px; color: var(--link); }

.nav-link {
  color: var(--ink);
  font-size: 14px;
  padding: 0 16px;
  height: 48px;
  display: inline-flex;
  align-items: center;
}

.nav-link:hover { background: var(--surface-1); text-decoration: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.16px;
  line-height: 1.29;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  min-height: 48px;
  transition: background 70ms;
}

.btn svg { width: 16px; height: 16px; flex: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); color: #fff; text-decoration: none; }
.btn-primary:active { background: var(--blue-80); }
.btn-tertiary { background: transparent; color: var(--link); border-color: var(--link); }
.btn-tertiary:hover { background: var(--link); color: var(--canvas); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--link); padding-left: 0; }
.btn-ghost:hover { text-decoration: underline; }
.btn-on-blue { background: #ffffff; color: var(--blue-80); }
.btn-on-blue:hover { background: #e8e8e8; color: var(--blue-80); text-decoration: none; }
.btn-inverse { background: transparent; color: #fff; border-color: #fff; }
.btn-inverse:hover { background: #fff; color: var(--primary); text-decoration: none; }

/* ---------- section rhythm: the two-surface alternation IS the rhythm ---------- */

.band { padding: 96px 0; }
.band-canvas { background: var(--canvas); }
.band-surface { background: var(--surface-1); }
.band-tight { padding: 64px 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin: 0 0 16px;
}

h1, h2, h3 { margin: 0; letter-spacing: 0; }

h1 {
  font-size: clamp(42px, 6vw, 76px);
  font-weight: 300;
  line-height: 1.17;
  letter-spacing: -0.5px;
  max-width: 16ch;
}

h2 {
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 300;
  line-height: 1.17;
  letter-spacing: -0.4px;
  max-width: 22ch;
}

h3 { font-size: 24px; font-weight: 400; line-height: 1.33; }

.lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 56ch;
  margin: 24px 0 0;
  letter-spacing: 0;
}

.section-lead { margin-top: 24px; margin-bottom: 48px; }

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

.hero { padding: 64px 0 0; background: var(--canvas); }

.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: start;
}

.hero-cta { display: flex; gap: 1px; margin-top: 40px; flex-wrap: wrap; }
.hero-cta .btn { min-width: 240px; }

/* the join text a technician actually receives, shown as a flat tile */
.sms-tile {
  border: 1px solid var(--hairline);
  background: var(--canvas);
  padding: 24px;
  margin-top: 48px;
  max-width: 420px;
}

.sms-tile .from { font-size: 12px; letter-spacing: 0.32px; color: var(--ink-subtle); margin-bottom: 12px; }
.sms-tile p { margin: 0; font-size: 16px; }
.sms-tile .code { color: var(--link); word-break: break-all; }

/* ---------- price anchor card ---------- */

/* One number in a bordered box, sitting where the hero photograph sits on the
   home page. Deliberately not a three-column tier table: the published price is
   an entry point and a filter, and the tier split belongs in a conversation.
   Blue top edge rather than a fill, because the blue band later in the page is
   the only saturated surface and two of them fight. */
.price-card {
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--primary);
  background: var(--surface-1);
  padding: 32px;
}

.price-card .pc-label { margin: 0; font-size: 14px; color: var(--ink-muted); }

.price-card .pc-figure {
  margin: 8px 0 0;
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.price-card .cur { font-size: 32px; color: var(--ink-muted); }
.price-card .num { font-size: 76px; color: var(--ink); }
.price-card .per { font-size: 20px; color: var(--ink-muted); margin-left: 6px; letter-spacing: 0; }

.price-card .pc-notes { list-style: none; margin: 32px 0 0; padding: 0; }

.price-card .pc-notes li {
  font-size: 14px;
  color: var(--ink);
  padding: 12px 0;
  border-top: 1px solid var(--surface-2);
}

.price-card .btn { margin-top: 32px; width: 100%; }

.price-card .pc-foot {
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* the current page in the nav, marked without shouting */
.nav-current { box-shadow: inset 0 -3px 0 var(--primary); }
.nav-current:hover { background: var(--surface-1); }

/* ---------- stat strip ---------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
.stats > div { padding: 32px 24px 32px 0; }
/* nowrap because the figures are not all bare numbers: "14 days" wrapped onto a
   second line and pushed that column's caption below the other three, which
   read as a broken grid rather than a deliberate one */
.stats .n { font-size: 42px; font-weight: 300; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.stats .t { font-size: 14px; color: var(--ink-muted); margin-top: 8px; }

/* ---------- industry / feature tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); }
.tiles-3 { grid-template-columns: repeat(3, 1fr); }

.tile {
  background: var(--canvas);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100%;
}

.band-surface .tile { background: var(--surface-1); }

.tile .ic { width: 24px; height: 24px; color: var(--link); }
.tile h3 { font-size: 20px; line-height: 1.4; }
.tile p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.tile .how { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 12px; letter-spacing: 0.32px; color: var(--ink); }
.band-surface .tile .how { border-top-color: var(--surface-2); }

/* ---------- image slots ---------- */

/* Photographs sit in flat frames with no rounding, per the brand. Until real
   photography is supplied these render as a labelled placeholder rather than a
   broken image, so the layout is finished and dropping files in is a copy. */
.shot {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.band-surface .shot { background: var(--canvas); }
.shot img { width: 100%; height: 100%; object-fit: cover; }

.shot-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink-subtle);
  text-align: center;
  padding: 24px;
}

.shot-empty svg { width: 32px; height: 32px; }
.shot-empty span { font-size: 12px; letter-spacing: 0.32px; }

.shot-wide { aspect-ratio: 16 / 9; }

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.step-n { font-family: var(--mono); font-size: 14px; letter-spacing: 0.32px; color: var(--link); padding-bottom: 12px; border-bottom: 1px solid var(--link); margin-bottom: 20px; }
.step h3 { margin-bottom: 12px; }
.step p { margin: 0; color: var(--ink-muted); font-size: 16px; }

/* ---------- split rows ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split + .split { margin-top: 96px; }
.split p { color: var(--ink-muted); margin: 16px 0 0; }
.split.flip .split-media { order: -1; }

/* ---------- capability list ---------- */

.caps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 48px; }
.caps li { display: flex; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; }
.caps svg { width: 16px; height: 16px; color: var(--link); flex: none; position: relative; top: 2px; }

/* ---------- blue CTA banner ---------- */

.cta-banner { background: var(--primary); color: #fff; padding: 96px 0; }
.cta-banner h2 { color: #fff; max-width: 20ch; }
.cta-banner p { color: #fff; opacity: 0.9; max-width: 52ch; font-size: 18px; margin: 24px 0 0; }
.cta-banner .row { display: flex; gap: 1px; margin-top: 40px; flex-wrap: wrap; }
.cta-banner .row .btn { min-width: 220px; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary { padding: 24px 0; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; margin-left: auto; color: var(--link); font-size: 24px; font-weight: 300; }
.faq details[open] summary::after { content: '\2013'; }
/* the question is an h3 inside the summary, so the page has no heading-level
   gap between the FAQ h2 and the footer. Sizing lives here rather than on the
   heading rules, which are tuned for section titles. */
.faq summary h3 { font-size: 20px; font-weight: 400; }
/* 62ch, not 72ch. At 72 these answers ran visibly wider than every other block
   of prose on the page, which sits between 56 and 59 characters. */
.faq p { margin: 0 0 24px; color: var(--ink-muted); max-width: 62ch; }

/* ---------- help pages ---------- */

/* Long-form prose, which the marketing page has none of. Narrower than the
   grid it sits in, because a help page is read start to finish rather than
   scanned, and 68ch is where that stops being work. */
.doc { max-width: 68ch; }
.doc h2 { font-size: 28px; margin: 64px 0 16px; }
.doc h3 { font-size: 20px; margin: 40px 0 12px; }
.doc h2 + h3 { margin-top: 24px; }
.doc p, .doc li { color: var(--ink-muted); font-size: 17px; line-height: 1.6; }
.doc p { margin: 0 0 20px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul, .doc ol { margin: 0 0 20px; padding-left: 22px; }
.doc li { margin-bottom: 10px; }
.doc a { text-decoration: underline; }

/* The steps a reader counts through. Numbered by CSS so the markup stays an
   ordered list and the numerals still look like the rest of the brand. */
.doc ol.steps-num { list-style: none; padding-left: 0; counter-reset: s; }
.doc ol.steps-num > li {
  counter-increment: s;
  padding-left: 44px;
  position: relative;
  margin-bottom: 20px;
}
.doc ol.steps-num > li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  text-align: center;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--link);
  border-bottom: 1px solid var(--link);
  padding-bottom: 2px;
}

.doc table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.doc th, .doc td {
  text-align: left;
  padding: 12px 20px 12px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  font-size: 16px;
  color: var(--ink-muted);
}
.doc th {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 400;
}
.doc td:first-child { color: var(--ink); white-space: nowrap; }

/* A thing that will cost the reader something if they skip it. */
.doc .heads-up {
  border-left: 3px solid var(--link);
  background: var(--surface-1);
  padding: 20px 24px;
  margin: 0 0 24px;
}
.doc .heads-up p:last-child { margin-bottom: 0; }

/* index cards, one per audience */
.help-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 48px; }
.help-card {
  background: var(--surface-1);
  border-top: 4px solid var(--primary);
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.help-card h2 { font-size: 24px; margin: 0 0 12px; }
.help-card p { color: var(--ink-muted); margin: 0 0 24px; }
.help-card .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 672px) {
  .help-cards { grid-template-columns: 1fr; }
  .doc table, .doc td:first-child { white-space: normal; }
}

/* ---------- footer: the only inverted surface ---------- */

.foot { background: var(--inverse-canvas); color: var(--inverse-ink-muted); padding: 64px 0 48px; border-top: 1px solid var(--hairline); }
.foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
/* .foot-h, not h4: these were h4 with no h3 anywhere above them, which left a
   gap in the heading outline. They are h3 now and carry their own class so the
   section-title h3 sizing does not reach them. */
.foot .foot-h { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--inverse-ink); }
.foot a { color: var(--inverse-ink-muted); font-size: 14px; display: block; padding: 6px 0; }
.foot a:hover { color: #ffffff; }
.foot .brand { color: var(--inverse-ink); }
.foot .brand:hover { color: #fff; }
.foot .note { margin-top: 12px; font-size: 14px; color: var(--inverse-ink-muted); max-width: 40ch; }
.foot .base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--inverse-surface-1); font-size: 12px; letter-spacing: 0.32px; }

/* ---------- responsive ---------- */

@media (max-width: 1056px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .caps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .split, .split + .split { grid-template-columns: 1fr; gap: 32px; }
  .split.flip .split-media { order: 0; }
  .steps { grid-template-columns: 1fr; gap: 40px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 672px) {
  .shell { padding: 0 16px; }
  .band { padding: 64px 0; }
  .utility { display: none; }
  /* links ran off the side at 375px; let the bar scroll instead of overflowing */
  .nav .shell { overflow-x: auto; scrollbar-width: none; }
  .nav .shell::-webkit-scrollbar { display: none; }
  .nav-link { padding: 0 12px; flex: none; }
  .brand { flex: none; }
  .tiles, .tiles-3, .caps { grid-template-columns: 1fr; }
  .hero-cta .btn, .cta-banner .row .btn { width: 100%; min-width: 0; }
  .foot .cols { grid-template-columns: 1fr; gap: 32px; }
  .cta-banner { padding: 64px 0; }
}