/*
 * The Launderworks sales site, built from the Claude Design marketing
 * composition in docs/design/.
 *
 * WHY THIS IS A STYLESHEET AND NOT THE DESIGN FILE AS SHIPPED. The composition
 * carries its whole appearance in 226 inline style attributes and pulls two
 * font families from api.fontshare.com and fonts.googleapis.com. The marketing
 * Content-Security-Policy in functions/_middleware.js is
 *
 *     default-src 'none'; script-src 'none'; style-src 'self';
 *     img-src 'self' data:; font-src 'self'
 *
 * so a browser drops every one of those attributes and both font sheets before
 * a visitor sees the page. Serving the composition unchanged would publish
 * valid markup with no appearance at all, which is the exact failure CLAUDE.md
 * records against four earlier surfaces: asserting on markup cannot catch it,
 * because the markup is fine. Every value below is lifted from the composition
 * so the rendered result matches it, and lives here so the policy permits it.
 *
 * The font stacks name the designed families first. They are not self-hosted
 * yet, so a visitor without them installed gets the fallback: the metrics move,
 * the layout does not. See the note in docs/ before adding @font-face, because
 * font-src 'self' means the files have to be served from this origin and
 * reachable through PLATFORM_PAGES like every other asset in this directory.
 */

:root {
  --sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ink: #10131A;
  --brand: #2447E0;
  --brand-dark: #1A34AE;
  --brand-wash: #EEF1FE;
  --mint: #7DE0B4;

  --ground: #FDFCFA;
  --ground-2: #F7F6F3;
  --card: #ffffff;

  --text: #565C68;
  --text-strong: #454B57;
  --text-2: #616772;
  --muted: #767C88;
  --muted-2: #8A9098;
  --faint: #9BA1A9;

  --line: rgba(16, 19, 26, .09);
  --line-2: rgba(16, 19, 26, .11);
  --line-soft: rgba(16, 19, 26, .06);
  --line-strong: rgba(16, 19, 26, .18);

  --ok-bg: #E7F6EE;   --ok-fg: #1B7F5A;
  --warn-bg: #FDF8EF; --warn-fg: #B4690E;
  --bad-bg: #FDF3F2;  --bad-fg: #C0392B;
  --idle-bg: #F1F0EC; --idle-fg: #565C68;
  --blue-bg: #EEF1FE; --blue-fg: #2447E0;

  --pad: 44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-dark); }

img { max-width: 100%; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font: 600 14px var(--sans);
  z-index: 60;
}
.skip:focus { left: 0; color: #fff; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--ground);
}

/* ---------------------------------------------------------------- nav ---- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--pad);
  border-bottom: 1px solid var(--line);
  background: rgba(253, 252, 250, .92);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}

.nav-left { display: flex; align-items: center; gap: 38px; }

.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--brand);
  position: relative;
  flex: none;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1.6px solid #fff;
}
.brand-name {
  font: 700 18px var(--sans);
  color: var(--ink);
  letter-spacing: -.02em;
}
a.brand:hover .brand-name { color: var(--ink); }

.nav-links {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 500 14px var(--sans);
  color: var(--text-strong);
}
.nav-links a { color: var(--text-strong); }
.nav-links a:hover { color: var(--ink); }
.nav-links .quiet { color: var(--faint); }

.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-signin { font: 500 14px var(--sans); color: var(--text-strong); }
.nav-signin:hover { color: var(--ink); }

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

.btn-primary,
.btn-ghost,
.btn-dark,
.btn-dark-sm,
.btn-white,
.btn-outline-light {
  display: inline-block;
  border-radius: 9px;
  font-family: var(--sans);
  cursor: pointer;
  text-align: center;
  border: 1px solid transparent;
}

.btn-primary {
  padding: 13px 22px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.btn-primary:hover { background: var(--brand-dark); color: #fff; }

.btn-ghost {
  padding: 13px 22px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn-dark {
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
}
.btn-dark:hover { background: #000; color: #fff; }

.btn-dark-sm {
  padding: 9px 15px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
}
.btn-dark-sm:hover { background: #000; color: #fff; }

.btn-white {
  padding: 13px 22px;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}
.btn-white:hover { background: #f2f2f2; color: var(--ink); }

.btn-outline-light {
  padding: 13px 22px;
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.btn-outline-light:hover { border-color: #fff; color: #fff; }

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

.hero {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 52px;
  padding: 70px var(--pad) 60px;
}

.pill {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid rgba(36, 71, 224, .28);
  border-radius: 20px;
  font: 500 11.5px var(--mono);
  color: var(--brand);
  background: var(--brand-wash);
}

.hero-title {
  margin: 20px 0 0;
  font: 700 56px/1.03 var(--sans);
  letter-spacing: -.034em;
  color: var(--ink);
  text-wrap: balance;
}

.hero-sub {
  margin: 22px 0 0;
  font: 400 18px/1.6 var(--sans);
  color: var(--text);
  max-width: 500px;
  text-wrap: pretty;
}

.cta-row { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.hero-note {
  font: 400 13px var(--sans);
  color: var(--muted-2);
  margin-top: 14px;
}

.stats {
  display: flex;
  gap: 34px;
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(16, 19, 26, .10);
  flex-wrap: wrap;
}
.stat-num { font: 500 27px var(--mono); color: var(--ink); }
.stat-label { font: 400 13px var(--sans); color: var(--muted); margin-top: 4px; }

/* The live operations panel beside the hero. */

.panel {
  background: var(--ink);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel-tag {
  font: 500 11.5px var(--mono);
  color: rgba(255, 255, 255, .55);
  letter-spacing: .06em;
}
.panel-live { font: 500 11.5px var(--mono); color: var(--mint); }

.panel-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile { background: rgba(255, 255, 255, .07); border-radius: 10px; padding: 14px; }
.tile-num { font: 500 22px var(--mono); color: #fff; }
.tile-label { font: 400 12px var(--sans); color: rgba(255, 255, 255, .6); margin-top: 2px; }

.route {
  background: rgba(255, 255, 255, .07);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.route-label { font: 400 12px var(--sans); color: rgba(255, 255, 255, .6); }
.route-list { display: flex; flex-direction: column; gap: 9px; }
.route-row { display: flex; align-items: center; gap: 10px; }
.route-row.is-planned { opacity: .45; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot--done { background: var(--mint); }
.dot--held { background: #F0B357; }
.dot--planned { background: rgba(255, 255, 255, .4); }
.route-addr { font: 500 13px var(--sans); color: #fff; flex: 1; min-width: 0; }
.route-time { font: 400 12px var(--mono); color: rgba(255, 255, 255, .5); }

.runbar {
  background: var(--brand);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.runbar-title { font: 600 14px var(--sans); color: #fff; }
.runbar-sub { font: 400 12px var(--sans); color: rgba(255, 255, 255, .72); margin-top: 2px; }
.runbar-amount { font: 500 18px var(--mono); color: #fff; }

/* ------------------------------------------------------------ logo bar --- */

.logos {
  padding: 26px var(--pad);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ground-2);
}
.logos-inner { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.logos-tag {
  font: 500 11.5px var(--mono);
  color: var(--muted-2);
  letter-spacing: .06em;
}
.logo-chip {
  padding: 7px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 7px;
  font: 600 13px var(--sans);
  color: var(--faint);
}

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

.sec-eyebrow {
  font: 500 11.5px var(--mono);
  color: var(--brand);
  letter-spacing: .08em;
}
.sec-eyebrow--mint { color: var(--mint); }

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 12px;
}
.sec-title {
  margin: 0;
  font: 600 38px/1.1 var(--sans);
  letter-spacing: -.028em;
  color: var(--ink);
  max-width: 600px;
  text-wrap: balance;
}
.sec-note {
  margin: 0;
  font: 400 15px/1.6 var(--sans);
  color: var(--text-2);
  max-width: 330px;
}

.platform-intro { padding: 64px var(--pad) 20px; }

/* ------------------------------------------------------------- modules --- */

.modules { padding: 0 var(--pad); }

.module {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 44px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.module-head { display: flex; align-items: center; gap: 11px; }
.module-num {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--brand-wash);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 12px var(--mono);
  color: var(--brand);
  flex: none;
}
.module-title {
  margin: 0;
  font: 600 21px var(--sans);
  color: var(--ink);
  letter-spacing: -.018em;
}
.module-body {
  margin: 14px 0 0;
  font: 400 15.5px/1.65 var(--sans);
  color: var(--text);
  max-width: 430px;
  text-wrap: pretty;
}

.points {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.point {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 400 14.5px/1.5 var(--sans);
  color: var(--text-strong);
}
.point::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
  position: relative;
  top: -3px;
}

/* The product screenshot stand-in beside each module. */

.screen {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 19, 26, .05);
}
.screen-chrome {
  padding: 11px 14px;
  border-bottom: 1px solid rgba(16, 19, 26, .08);
  background: var(--ground-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.chrome-l { font: 500 11px var(--mono); color: var(--muted); letter-spacing: .05em; }
.chrome-r { font: 500 11px var(--mono); color: var(--faint); }
.screen-body { padding: 16px; }

.row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: center;
}
.row-main { min-width: 0; }
.row-a {
  font: 500 13.5px var(--sans);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-b { font: 400 11.5px var(--sans); color: var(--muted-2); margin-top: 2px; }
.row-c { font: 400 12.5px var(--mono); color: var(--ink); min-width: 62px; text-align: right; }

.badge {
  padding: 3px 8px;
  border-radius: 5px;
  font: 500 11.5px var(--sans);
  white-space: nowrap;
}
.badge--ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.badge--warn { background: var(--warn-bg); color: var(--warn-fg); }
.badge--bad  { background: var(--bad-bg);  color: var(--bad-fg); }
.badge--idle { background: var(--idle-bg); color: var(--idle-fg); }
.badge--blue { background: var(--blue-bg); color: var(--blue-fg); }

.screen-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 13px;
}
.foot-note { font: 400 12px var(--sans); color: var(--muted-2); }
.foot-link { font: 600 12.5px var(--sans); color: var(--brand); }

/* -------------------------------------------------------------- addons --- */

.addons { padding: 60px var(--pad); }
.addons .sec-head { margin-bottom: 26px; }
.addons .sec-title { font-size: 34px; line-height: 1.12; letter-spacing: -.026em; max-width: 520px; }
.addons .sec-note { max-width: 320px; }

.addons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.addon {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--card);
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.addon-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.addon-title {
  margin: 0;
  font: 600 20px var(--sans);
  color: var(--ink);
  letter-spacing: -.016em;
}
.addon-tag {
  padding: 4px 9px;
  border-radius: 5px;
  background: var(--brand-wash);
  font: 500 11.5px var(--sans);
  color: var(--brand);
  white-space: nowrap;
}
.addon-body {
  margin: 12px 0 0;
  font: 400 15px/1.6 var(--sans);
  color: var(--text);
}

.metrics {
  margin-top: 22px;
  padding: 16px;
  border-radius: 10px;
  background: var(--ground-2);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.metric-label { font: 400 11.5px var(--sans); color: var(--muted); }
.metric-value { font: 500 19px var(--mono); color: var(--ink); margin-top: 3px; }
.metric-value--good { color: var(--ok-fg); }

.addon-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 22px;
  flex-wrap: wrap;
}
.addon-price { font: 400 13.5px var(--sans); color: var(--muted); }

/* ----------------------------------------------------------- migration --- */

.migration { padding: 56px var(--pad); background: var(--ink); }
.migration-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.mig-title {
  margin: 14px 0 0;
  font: 600 32px/1.15 var(--sans);
  letter-spacing: -.024em;
  color: #fff;
  text-wrap: balance;
}
.mig-body {
  margin: 16px 0 0;
  font: 400 15.5px/1.65 var(--sans);
  color: rgba(255, 255, 255, .68);
  max-width: 440px;
}
.mig-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.mig-cta .btn-primary,
.mig-cta .btn-outline-light { padding: 12px 20px; font-size: 14.5px; }

.steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.step {
  display: flex;
  gap: 14px;
  padding: 16px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
  align-items: flex-start;
}
.step-n {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: none;
  background: rgba(125, 224, 180, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 11.5px var(--mono);
  color: var(--mint);
}
.step-title { font: 600 14.5px var(--sans); color: #fff; }
.step-body { font: 400 13px/1.55 var(--sans); color: rgba(255, 255, 255, .6); margin-top: 3px; }
.step-when {
  margin-left: auto;
  font: 400 11.5px var(--mono);
  color: rgba(255, 255, 255, .4);
  white-space: nowrap;
}

/* --------------------------------------------------------------- proof --- */

.proof { padding: 60px var(--pad); }
.proof-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: center;
}

.quote { border-left: 2px solid var(--brand); padding-left: 26px; margin: 0; }
.quote-text {
  font: 400 22px/1.5 var(--sans);
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
}
.quote-by { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--idle-bg);
  border: 1px dashed var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 9px var(--sans);
  color: var(--faint);
  flex: none;
}
/* Both are spans so the caption stays one element for a screen reader, so they
 * are made blocks here rather than relying on the tag to stack them. */
.by-name { display: block; font: 600 14px var(--sans); color: var(--ink); }
.by-role { display: block; font: 400 13px var(--sans); color: var(--muted); }

.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.outcome {
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--card);
  padding: 18px;
}
.outcome-value { font: 500 26px var(--mono); color: var(--brand); }
.outcome-label { font: 400 13px/1.5 var(--sans); color: var(--text); margin-top: 6px; }

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

.pricing {
  padding: 60px var(--pad);
  border-top: 1px solid var(--line);
  background: var(--ground-2);
}
.pricing .sec-head { align-items: flex-end; margin-top: 0; margin-bottom: 30px; }
.pricing .sec-title { font-size: 34px; line-height: 1.12; letter-spacing: -.026em; margin-top: 12px; }
.pricing .sec-note { max-width: 340px; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }

.tier {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 26px;
  background: var(--card);
  position: relative;
}
.tier--featured { border: 1.5px solid var(--brand); }
.tier-flag {
  position: absolute;
  top: -11px;
  left: 26px;
  padding: 3px 9px;
  border-radius: 5px;
  background: var(--brand);
  font: 600 10.5px var(--mono);
  color: #fff;
  letter-spacing: .04em;
}
.tier-name { font: 600 15px var(--sans); color: var(--ink); }
.tier-price { display: flex; align-items: baseline; gap: 5px; margin: 14px 0 4px; }
.tier-amount { font: 500 34px var(--mono); color: var(--ink); }
.tier-unit { font: 400 14px var(--sans); color: var(--muted); }
.tier-range { font: 400 13px var(--sans); color: var(--muted); }
.tier-rule { height: 1px; background: var(--line); margin: 20px 0; border: 0; }

.tier-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 14px/1.45 var(--sans);
  color: var(--text-strong);
}

.tier-cta {
  display: block;
  margin-top: 24px;
  padding: 11px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--line-strong);
  text-align: center;
  font: 600 14px var(--sans);
  color: var(--ink);
}
.tier-cta:hover { border-color: var(--ink); color: var(--ink); }
.tier-cta--solid { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.tier-cta--solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.addon-strip {
  display: flex;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line-2);
  align-items: center;
  flex-wrap: wrap;
}
.strip-title { font: 600 13.5px var(--sans); color: var(--ink); }
.strip-item { font: 400 13.5px var(--sans); color: var(--text); }
.strip-dot { color: #C3C7CD; }
.strip-link { margin-left: auto; font: 600 13px var(--sans); color: var(--brand); }

/* ---------------------------------------------------------------- faqs --- */

.faqs { padding: 56px var(--pad); border-top: 1px solid var(--line); }
.faqs-title {
  margin: 0 0 26px;
  font: 600 30px/1.15 var(--sans);
  letter-spacing: -.024em;
  color: var(--ink);
}
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 44px; }
.faq { padding: 18px 0; border-top: 1px solid var(--line); }
.faq-q { font: 600 15.5px var(--sans); color: var(--ink); margin: 0; }
.faq-a {
  font: 400 14.5px/1.6 var(--sans);
  color: var(--text-2);
  margin: 7px 0 0;
  text-wrap: pretty;
}

/* ---------------------------------------------------------- lead form --- */

.talk {
  padding: 60px var(--pad);
  border-top: 1px solid var(--line);
  background: var(--ground-2);
}
.talk-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items: start;
}
.talk-title {
  margin: 12px 0 0;
  font: 600 32px/1.14 var(--sans);
  letter-spacing: -.026em;
  color: var(--ink);
  text-wrap: balance;
}
.talk-body {
  margin: 16px 0 0;
  font: 400 15.5px/1.65 var(--sans);
  color: var(--text);
  max-width: 420px;
}
.talk-points { margin-top: 20px; }

.form {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--card);
  padding: 26px;
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }

.field label {
  font: 500 13px var(--sans);
  color: var(--text-strong);
}
.field .opt { color: var(--faint); font-weight: 400; }

.field input,
.field textarea {
  font: 400 15px var(--sans);
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 11px 12px;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus,
.field textarea:focus { border-color: var(--brand); }

.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.form-note { font: 400 12.5px/1.5 var(--sans); color: var(--muted); max-width: 340px; }

button.btn-primary { border: 1px solid var(--brand); font-family: var(--sans); }

/*
 * The honeypot's container. Never shown, never read out, never tabbed into.
 * functions/marketing-lead-form.test.mjs reads whatever class the page puts
 * the field in and then requires a rule for it here, so this rule and the
 * class on the page are one fact in two files. Moved out of the layout rather
 * than display:none, because some form fillers skip a field that is not
 * rendered at all and this one is meant to be filled by them.
 */
.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ cta band --- */

.cta-band {
  margin: 0 var(--pad) 44px;
  padding: 44px;
  border-radius: 14px;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-band-title {
  margin: 0;
  font: 600 30px/1.15 var(--sans);
  letter-spacing: -.024em;
  color: #fff;
  max-width: 520px;
  text-wrap: balance;
}
.cta-band-sub {
  margin: 12px 0 0;
  font: 400 15px var(--sans);
  color: rgba(255, 255, 255, .78);
}
.cta-band-actions { display: flex; gap: 12px; flex-wrap: wrap; }

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

.foot {
  padding: 34px var(--pad);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.foot-tag { font: 400 13px var(--sans); color: var(--muted-2); margin-top: 10px; max-width: 320px; }
.foot-cols { display: flex; gap: 52px; flex-wrap: wrap; }
.foot-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 13.5px var(--sans);
  color: var(--text);
}
.foot-col-title { font: 600 12px var(--sans); color: var(--ink); }
.foot-col a { color: var(--text); }
.foot-col a:hover { color: var(--ink); }
.foot .brand-mark { width: 20px; height: 20px; border-radius: 6px; }
.foot .brand-mark::after { inset: 5.5px; border-width: 1.5px; }
.foot .brand-name { font-size: 16px; }

/* ---------------------------------------------------------- documents --- */

/*
 * The utility pages: privacy, the lead receipt, the 404 and sign-in. They are
 * short documents rather than compositions, so they get the sales site's type
 * and colour and a single readable column.
 */

.doc { padding: 64px var(--pad) 72px; max-width: 760px; }
.doc h1 {
  margin: 14px 0 0;
  font: 700 40px/1.08 var(--sans);
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}
.doc h2 {
  margin: 38px 0 0;
  font: 600 21px var(--sans);
  letter-spacing: -.018em;
  color: var(--ink);
}
.doc p, .doc li {
  font: 400 15.5px/1.7 var(--sans);
  color: var(--text);
}
.doc p { margin: 12px 0 0; }
.doc ul { margin: 12px 0 0; padding-left: 20px; }
.doc li { margin-top: 6px; }
.doc .lede { font-size: 17.5px; color: var(--text-2); max-width: 620px; }
.doc dt { font: 600 15px var(--sans); color: var(--ink); margin-top: 18px; }
.doc dd { margin: 4px 0 0; font: 400 15px/1.65 var(--sans); color: var(--text); }
.doc .points { margin-top: 16px; }
.doc .note { font-size: 14px; color: var(--muted); margin-top: 18px; }
.doc .pill { margin-bottom: 4px; }

.notice {
  margin: 26px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--card);
}
.notice h2 { margin-top: 0; }

.doc--center { text-align: center; margin: 0 auto; }
.doc--center .cta-row { justify-content: center; }

/* ------------------------------------------------------------- sign in --- */

/*
 * The split from the Sign In composition: the argument on the dark half, the
 * form on the light one.
 *
 * WHAT IS DELIBERATELY MISSING. The composition also draws "Continue with
 * Google Workspace", "Single sign-on for your company", a "Forgot it?" link
 * and a "keep me signed in" checkbox. None of those exist behind this page:
 * there is no OAuth client, no SSO tenant and no password reset route, and the
 * session length is fixed at thirty days by PLATFORM_SESSION_COOKIE rather
 * than chosen here. A prototype's dead control is free; a dead control on the
 * live login screen is an operator clicking Google, nothing happening, and no
 * way to tell that from an outage. They come back when the routes behind them
 * do.
 */

.signin-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 760px;
}

.signin-aside {
  background: var(--ink);
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
}
.signin-aside .brand-name { color: #fff; }
.signin-aside a.brand:hover .brand-name { color: #fff; }

.signin-pitch { margin-top: auto; max-width: 400px; }
.signin-pitch h2 {
  margin: 0;
  font: 600 30px/1.18 var(--sans);
  color: #fff;
  letter-spacing: -.026em;
}
.signin-pitch p {
  margin: 14px 0 0;
  font: 400 14.5px/1.6 var(--sans);
  color: rgba(255, 255, 255, .6);
}

.signin-stats {
  margin-top: 36px;
  padding: 18px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .06);
  max-width: 400px;
}
.signin-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signin-stats-tag {
  font: 500 10.5px var(--mono);
  color: rgba(255, 255, 255, .45);
  letter-spacing: .06em;
}
.signin-stats-live { font: 500 10.5px var(--mono); color: var(--mint); }
.signin-stats-row { display: flex; gap: 22px; margin-top: 14px; flex-wrap: wrap; }
.signin-stat-num { font: 500 22px var(--mono); color: #fff; }
.signin-stat-num--warn { color: #F0B357; }
.signin-stat-label {
  font: 400 11.5px var(--sans);
  color: rgba(255, 255, 255, .55);
  margin-top: 2px;
}
.signin-status {
  margin-top: 36px;
  font: 400 12.5px var(--sans);
  color: rgba(255, 255, 255, .35);
}

.signin-main {
  background: var(--ground);
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.signin-form-wrap { max-width: 392px; width: 100%; }
.signin-form-wrap h1 {
  margin: 0;
  font: 600 27px var(--sans);
  color: var(--ink);
  letter-spacing: -.022em;
}
.signin-sub { margin: 7px 0 0; font: 400 14px var(--sans); color: var(--muted); }
.signin-form-wrap .field-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
.signin-form-wrap .btn-primary { width: 100%; margin-top: 18px; padding: 13px; }

/*
 * The failure line. Hidden until the script fills it, and role="alert" so a
 * screen reader is told the sign-in was refused rather than left waiting on a
 * button that appeared to do nothing.
 */
.msg {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--bad-bg);
  border: 1px solid rgba(192, 57, 43, .22);
  font: 400 13.5px/1.55 var(--sans);
  color: var(--bad-fg);
}
.msg[hidden] { display: none; }

.signin-note {
  margin-top: 24px;
  padding: 14px;
  border-radius: 9px;
  background: var(--ground-2);
  border: 1px solid var(--line);
}
.signin-note-title { font: 500 12.5px var(--sans); color: var(--ink); }
.signin-note p {
  font: 400 12.5px/1.55 var(--sans);
  color: var(--muted);
  margin: 3px 0 0;
}
.signin-note p + p { margin-top: 8px; }

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

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .module { grid-template-columns: 1fr; gap: 24px; }
  .module-body { max-width: none; }
  .migration-grid,
  .proof-grid,
  .talk-grid { grid-template-columns: 1fr; gap: 32px; }
  .tiers { grid-template-columns: 1fr; }
  .tier--featured { margin-top: 12px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sec-note { max-width: none; }
}

@media (max-width: 860px) {
  .addons-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: 0; }
  .nav-links { display: none; }

  /*
   * The sign-in stacks rather than squeezing, and the dark half keeps its
   * order: the brand and the argument are still what a person reads first,
   * and the form follows immediately under the fold on a phone.
   */
  .signin-split { grid-template-columns: 1fr; min-height: 0; }
  .signin-aside { padding: 36px 24px; }
  .signin-pitch { margin-top: 26px; }
  .signin-main { padding: 36px 24px; }
  .signin-form-wrap { max-width: none; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; }

  /*
   * The header at 360. Both actions wrapped to two lines each and made the
   * sticky bar three times its designed height, which is a third of a phone
   * screen spent on navigation. Found by photographing it: every element was
   * inside the viewport, so the overflow check said the page was fine.
   */
  .nav { padding: 14px var(--pad); gap: 10px; }
  .nav-left { gap: 0; }
  .nav-right { gap: 10px; }
  .brand-name { font-size: 16px; }
  .nav-signin, .btn-dark { white-space: nowrap; }
  .btn-dark { padding: 8px 12px; font-size: 12.5px; }

  .hero { padding-top: 44px; padding-bottom: 40px; }
  .hero-title { font-size: 34px; letter-spacing: -.026em; }
  .hero-sub { font-size: 16px; }
  .sec-title { font-size: 26px; }
  .addons .sec-title,
  .pricing .sec-title { font-size: 26px; }
  .mig-title { font-size: 24px; }
  .talk-title { font-size: 24px; }
  .faqs-title { font-size: 24px; }
  .cta-band-title { font-size: 24px; }
  .quote-text { font-size: 18px; }
  .doc h1 { font-size: 30px; }
  .stats { gap: 20px; }
  .stat-num { font-size: 22px; }
  .panel-tiles { grid-template-columns: 1fr 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr; }
  .cta-band { padding: 28px; margin-bottom: 28px; }
  .foot-cols { gap: 28px; }
  .cta-row .btn-primary,
  .cta-row .btn-ghost { flex: 1 1 100%; }

  /*
   * The module screenshots are dense three-column rows. On a narrow phone the
   * amount column and the badge collide with the name, so the row becomes two
   * lines rather than being squeezed. Found by photographing the page at
   * 360px, which is the only way this class of defect shows up.
   */
  .row { grid-template-columns: 1fr auto; }
  .row-c { grid-column: 2; min-width: 0; }
  .row-main { grid-column: 1 / -1; }
  .badge { grid-row: 2; grid-column: 1; justify-self: start; }
  .screen-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  .step { flex-wrap: wrap; }
  .step-when { margin-left: 0; }

  /* The separator between the two add-on lines is a middle dot between two
   * phrases on one row. Once the row stacks it is a dot alone on a line. */
  .strip-dot { display: none; }
  .strip-link { margin-left: 0; }
}