/* Public pages: marketing, legal and trust.
   Standalone rather than an extension of styles.css. The application sheet is
   built around a fixed 100vh two-column shell that hides its own hero below
   900px - correct for a sign-in form, fatal for a landing page. The design
   tokens are the same so the two surfaces match. */

:root {
  --navy-950: #0d172b;
  --navy-900: #14213b;
  --navy-800: #1c2b49;
  --ink: #172033;
  --muted: #657189;
  /* #8792a7 measured 3.13:1 on white and 2.95:1 on --surface-soft, against the
     4.5:1 body-text minimum - and it carries the pricing fine print, every
     module price, every legal "last updated" and the whole footer bar. #687286
     is the same hue at 4.84:1 and 4.56:1, so it still reads as secondary
     without being unreadable in daylight. */
  --muted-2: #687286;
  --line: #e5e9f0;
  --line-strong: #d8dee9;
  --surface: #ffffff;
  --surface-soft: #f7f8fb;
  --surface-tint: #eef6f5;
  --canvas: #f2f4f8;
  --teal: #147d73;
  --teal-dark: #0f625b;
  --teal-soft: #dff3ef;
  --amber: #b56b00;
  --amber-soft: #fff1d8;
  --shadow-sm: 0 1px 2px rgba(18, 31, 53, .06);
  --shadow-md: 0 10px 28px rgba(24, 39, 69, .10);
  --shadow-lg: 0 24px 70px rgba(16, 29, 51, .20);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --wrap: 1140px;
  /* The horizontal inset every full-width surface shares. Tinted sections
     compute their padding from this and --wrap so their content column lands on
     exactly the same left edge as an untinted section's; before, the two
     differed by 24px and the module grid rendered 3 columns on / and 4 on /docs
     from identical markup. */
  --gutter: 24px;
}

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

.m-body {
  margin: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.m-body img { max-width: 100%; height: auto; display: block; }
/* Zero specificity on purpose. As `.m-body a` this was (0,1,1) and out-ranked
   every `.m-btn-*` colour at (0,1,0), so all seven button variants rendered in
   --teal-dark: 1.44:1 on the primary fill, 2.01:1 on the dark band. styles.css
   solves the same problem with `a { color: inherit }`; :where() is the same
   idea, keeping the link colour for prose. */
:where(.m-body a) { color: var(--teal-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.m-body h1, .m-body h2, .m-body h3 { letter-spacing: -.03em; line-height: 1.15; }
.m-body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-soft);
  font-size: .92em;
}

/* Dressed exactly like `.m-btn` -- a background, a radius, padding on the same
   scale -- so it takes the same rule about the underline. `:where(.m-body a)`
   above sets link colour at zero specificity and leaves `text-decoration` to the
   UA, which is right for a link in a sentence and wrong for a box. This is the
   first element a keyboard user reaches, and it was the last anchor in the
   product still wearing a link underline inside a control. */
.m-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 12px 18px;
  background: var(--navy-900);
  color: white;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}
.m-skip:focus { left: 0; }

/* The only focus rule in this stylesheet used to be the one above. Everything
   else fell back to the UA ring, which on a teal button or over the dark band is
   close to invisible - and the buttons are the site's entire conversion path.
   :focus-visible so a mouse click does not draw a ring. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.m-band :where(a, button):focus-visible,
.m-btn-primary:focus-visible {
  outline-color: white;
}

/* ---------------------------------------------------------------- header */

.m-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(10px);
}
.m-nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 66px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.m-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.02em;
  text-decoration: none;
  flex: 0 0 auto;
}
.m-brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: white;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(140deg, var(--navy-800), var(--teal));
}
.m-nav-links { display: flex; gap: 22px; margin-right: auto; }
.m-nav-links a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.m-nav-links a:hover { color: var(--ink); }
.m-nav-links a[aria-current="page"] { color: var(--teal-dark); }
.m-nav-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.m-nav-mobile { display: none; margin-left: auto; position: relative; }
.m-nav-mobile summary {
  width: 40px;
  height: 40px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 0 9px;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.m-nav-mobile summary::-webkit-details-marker { display: none; }
.m-nav-mobile summary span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
.m-nav-drawer {
  position: absolute;
  right: 0;
  top: 48px;
  width: 240px;
  display: grid;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}
.m-nav-drawer a {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.m-nav-drawer a:hover { background: var(--surface-soft); }

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

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.m-btn:active { transform: translateY(1px); }
.m-btn-lg { padding: 13px 24px; font-size: 15px; }
.m-btn-primary { color: white; background: var(--teal); }
.m-btn-primary:hover { background: var(--teal-dark); }
.m-btn-secondary { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.m-btn-secondary:hover { background: var(--surface-soft); }
.m-btn-ghost { color: var(--ink); background: transparent; border-color: var(--line-strong); }
.m-btn-ghost:hover { background: var(--surface-soft); }
.m-btn-invert { color: var(--navy-950); background: white; }
.m-btn-invert:hover { background: #eef1f6; }
.m-btn-onDark { color: white; background: transparent; border-color: rgba(255, 255, 255, .32); }
.m-btn-onDark:hover { background: rgba(255, 255, 255, .1); }
.m-btn-arrow { width: 17px; height: 17px; }

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

.m-hero {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 76px var(--gutter) 0;
}
.m-hero-inner { max-width: 780px; }
.m-eyebrow {
  margin: 0 0 14px;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.m-hero h1 {
  margin: 0 0 22px;
  font-size: clamp(38px, 6vw, 66px);
  letter-spacing: -.045em;
  font-weight: 760;
}
.m-lede {
  margin: 0;
  max-width: 720px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.65;
}
.m-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.m-cta-center { justify-content: center; }
.m-hero-note { margin: 16px 0 0; color: var(--muted-2); font-size: 13px; }
.m-hero-shot {
  max-width: var(--wrap);
  margin: 48px auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* -------------------------------------------------------------- sections */

.m-section { max-width: var(--wrap); margin: 0 auto; padding: 84px var(--gutter); }
.m-section-top { padding-top: 44px; }
.m-section-tint {
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  background: var(--surface-soft);
  border-block: 1px solid var(--line);
}
/* margin shorthand, not margin-bottom. The longhand let an inherited
   margin-inline through and that is what misaligned every tinted section. */
.m-section-head { max-width: 720px; margin: 0 0 40px; }
.m-section-head h2 { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 38px); }
.m-section-head p { margin: 0; color: var(--muted); font-size: 17px; }
.m-prose { max-width: 720px; margin: 0 0 18px; color: var(--muted); font-size: 16.5px; }
.m-prose:last-child { margin-bottom: 0; }
.m-fineprint { max-width: 720px; margin: 28px 0 0; color: var(--muted-2); font-size: 13px; }

.m-page-head {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 72px var(--gutter) 8px;
}
.m-page-head h1 { margin: 0 0 18px; font-size: clamp(34px, 5vw, 54px); }
.m-page-head-center { text-align: center; }
.m-page-head-center .m-lede { margin-inline: auto; }
.m-page-head-legal { max-width: 820px; }

/* ---------------------------------------------------------------- grids  */

.m-module-grid,
.m-value-grid,
.m-fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 16px;
}
.m-module, .m-value, .m-fact {
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.m-section-tint .m-module,
.m-section-tint .m-fact { background: var(--surface); }
.m-module h3, .m-value h3, .m-fact h3 { margin: 12px 0 8px; font-size: 16px; }
.m-fact h3 { display: flex; align-items: center; gap: 9px; }
.m-fact h3 svg { width: 18px; height: 18px; color: var(--teal-dark); flex: 0 0 auto; }
.m-module p, .m-value p, .m-fact p { margin: 0; color: var(--muted); font-size: 14px; }
.m-fact p + p { margin-top: 8px; }

/* The check list inside an `.m-fact`. Modelled on `.m-plan-list` below, which
   is the same construct on the pricing page: one icon and one line of copy per
   item, first-line aligned.

   It shipped used-but-unstyled, which this sheet punishes twice. The UA draws
   bullets and an indent no other list here has -- and because every icon in
   this stylesheet is sized by its own component rule, with no bare `svg` rule
   to fall back on, the four check marks had no width or height at all and
   rendered at the replaced-element default. `.m-fineprint` below the list
   supplies no top margin inside an `.m-split`, so the bottom margin is here. */
.m-check-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 11px; }
.m-check-list li { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 14px; }
.m-check-list svg { width: 16px; height: 16px; margin-top: 3px; color: var(--teal); flex: 0 0 auto; }
.m-module-icon, .m-value-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--teal-dark);
  background: var(--teal-soft);
}
.m-module-icon svg, .m-value-icon svg { width: 20px; height: 20px; }
/* Pinned to the card's bottom rather than trailing its description. The grid
   stretches every card to the tallest, and the eight module descriptions are not
   the same length, so the prices landed up to 22px apart on a row that reads as
   a price list. `padding-top` keeps the 14px gap when there is no free space. */
.m-module-price {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  color: var(--muted-2);
  font-size: 12px;
  font-weight: 650;
}

/* --------------------------------------------------------------- splits  */

.m-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.m-split h2 { margin: 0 0 16px; font-size: clamp(26px, 3.4vw, 36px); }
.m-split p { margin: 0 0 16px; color: var(--muted); font-size: 16.5px; }
.m-split-shot {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.m-split-reverse .m-split-shot { order: -1; }
.m-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

/* --------------------------------------------------------------- pricing */

.m-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.m-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.m-plan-featured { border-color: var(--teal); box-shadow: var(--shadow-md); }
.m-plan-flag {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 3px 10px;
  border-radius: 999px;
  color: white;
  background: var(--teal);
  font-size: 11px;
  font-weight: 750;
}
.m-plan h2 { margin: 0 0 6px; font-size: 18px; }
.m-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 20px; }
.m-plan-price strong { font-size: 40px; letter-spacing: -.04em; }
.m-plan-price span { color: var(--muted-2); font-size: 13px; }
.m-plan-list { flex: 1 1 auto; list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.m-plan-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--muted); }
.m-plan-list svg { width: 16px; height: 16px; margin-top: 3px; color: var(--teal); flex: 0 0 auto; }
.m-plan-list strong { color: var(--ink); }

/* --------------------------------------------------------------- tables  */

.m-scroll { overflow-x: auto; }
.m-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
.m-table caption {
  padding: 0 0 12px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}
.m-table-wide { min-width: 640px; }
.m-table th, .m-table td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.m-table thead th { background: var(--surface-soft); font-size: 12.5px; }
.m-table tbody th { font-weight: 650; }
.m-table td { color: var(--muted); }

/* ---------------------------------------------------------- lists, steps */

.m-plain-list { max-width: 780px; margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.m-plain-list li {
  padding-left: 18px;
  border-left: 3px solid var(--line-strong);
  color: var(--muted);
  font-size: 15.5px;
}
.m-plain-list strong { color: var(--ink); }

.m-steps { counter-reset: step; margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; }
.m-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px 1fr;
  /* Column only. Once the heading and the paragraph are both in column 2 a row
     gap opens between them, and at 18px it exceeded the 20px between whole
     steps -- so each step read as less grouped than it was separated. The
     heading's own bottom margin spaces them. */
  column-gap: 18px;
  row-gap: 0;
  align-items: start;
}
.m-steps li::before {
  content: counter(step);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--teal-dark);
  background: var(--teal-soft);
  font-size: 14px;
  font-weight: 750;
}
/* Both real children belong beside the counter, not under it. Each <li> holds
   three grid items -- the ::before counter, an <h3> and a <p> -- so with only
   the counter placed, the paragraph wrapped onto a second row and inherited the
   40px counter column, rendering one word per line. */
.m-steps li > * { grid-column: 2; }
.m-steps h3 { margin: 5px 0 6px; font-size: 16px; }
.m-steps p { margin: 0; color: var(--muted); font-size: 15px; max-width: 680px; }

.m-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 34px; }
.m-timeline li { display: grid; grid-template-columns: 180px 1fr; gap: 28px; }
.m-timeline-meta { display: grid; gap: 2px; align-content: start; padding-top: 3px; }
.m-timeline-meta strong { font-size: 18px; letter-spacing: -.02em; }
.m-timeline-meta span { color: var(--muted-2); font-size: 13px; }
.m-timeline-body h2 { margin: 0 0 10px; font-size: 19px; }
.m-timeline-body p { margin: 0 0 10px; color: var(--muted); font-size: 15px; max-width: 680px; }
.m-timeline-body ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 15px; max-width: 680px; }
.m-timeline-body li { display: list-item; margin-bottom: 6px; }

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

.m-faq { max-width: 820px; display: grid; gap: 10px; }
.m-faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.m-faq summary {
  padding: 16px 18px;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 650;
  list-style: none;
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: "+"; float: right; color: var(--muted-2); font-weight: 400; }
.m-faq details[open] summary::after { content: "\2013"; }
.m-faq p { margin: 0; padding: 0 18px 18px; color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- bands  */

.m-band {
  padding: 76px var(--gutter);
  text-align: center;
  color: white;
  background:
    radial-gradient(circle at 78% 20%, rgba(72, 190, 173, .2), transparent 36%),
    radial-gradient(circle at 22% 82%, rgba(79, 117, 211, .18), transparent 32%),
    linear-gradient(145deg, #0c172b 0%, #17294a 58%, #173d4c 100%);
}
.m-band h2 { margin: 0 0 12px; font-size: clamp(26px, 3.6vw, 40px); }
.m-band p { margin: 0 auto; max-width: 560px; color: rgba(255, 255, 255, .72); font-size: 17px; }
.m-band .m-cta-row { justify-content: center; }

/* --------------------------------------------------------------- status  */

.m-status-card {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 620px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.m-status-card strong { display: block; font-size: 17px; }
.m-status-card span[data-status-detail] { color: var(--muted); font-size: 14px; }
.m-status-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--muted-2);
}
.m-status-dot[data-state="ok"] { background: #177245; box-shadow: 0 0 0 4px rgba(23, 114, 69, .14); }
.m-status-dot[data-state="down"] { background: #b93842; box-shadow: 0 0 0 4px rgba(185, 56, 66, .14); }
.m-note {
  max-width: 720px;
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.m-note p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ---------------------------------------------------------------- legal  */

.m-legal { max-width: 820px; margin: 0 auto; padding: 20px var(--gutter) 84px; }
.m-legal h2 {
  margin: 40px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 21px;
}
.m-legal h3 { margin: 24px 0 8px; font-size: 16px; }
.m-legal p, .m-legal li { color: var(--muted); font-size: 15.5px; }
.m-legal ul { padding-left: 22px; }
.m-legal li { margin-bottom: 8px; }
.m-legal strong { color: var(--ink); }
.m-legal-date { margin: 0; color: var(--muted-2); font-size: 14px; }
.m-draft {
  display: block;
  margin: 0 0 28px;
  padding: 16px 18px;
  border: 1px solid #cfe0f5;
  border-left: 4px solid #376ad8;
  border-radius: var(--radius-sm);
  background: #e8efff;
  color: var(--ink);
  font-size: 14.5px;
}
.m-draft-amber { border-color: #f0d9a8; border-left-color: var(--amber); background: var(--amber-soft); }
.m-draft a { color: var(--teal-dark); }

/* --------------------------------------------------------------- footer  */

.m-footer { border-top: 1px solid var(--line); background: var(--surface-soft); }
.m-footer-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 56px var(--gutter) 40px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap: 48px;
}
.m-footer-brand p { margin: 14px 0 0; max-width: 260px; color: var(--muted); font-size: 14px; }
.m-footer-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px; }
.m-footer-links h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.m-footer-links a {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.m-footer-links a:hover { color: var(--teal-dark); }
.m-footer-legal {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 12.5px;
}

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

@media (max-width: 900px) {
  .m-nav-links, .m-nav-actions { display: none; }
  .m-nav-mobile { display: block; }
  .m-hero { padding-top: 52px; }
  .m-section { padding-block: 60px; }
  /* Re-asserted after the line above, which sets both edges and would otherwise
     swallow the tighter gap under a page heading at every width below 900px. */
  .m-section-top { padding-top: 44px; }
  .m-split, .m-two-col { grid-template-columns: 1fr; gap: 32px; }
  .m-split-reverse .m-split-shot { order: 0; }
  .m-footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .m-timeline li { grid-template-columns: 1fr; gap: 10px; }
  .m-timeline-meta { display: flex; align-items: baseline; gap: 10px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .m-cta-row .m-btn { width: 100%; }
  .m-plan-price strong { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-btn { transition: none; }
}