/* ==========================================================================
   Automation Tactics · Workbench landing (index.html only)

   Laid out like a 37signals product page (basecamp.com): a pale page,
   a hero with the product screenshot beside a list of links, a letter
   from the founder on a small paper stack, white cards with a soft
   shadow, highlighter marks on the client quotes, a pill list of
   numbers, a cloud of link chips at the foot, and a floating call to
   action once the hero scrolls away.

   Loads after portal.css, which still supplies the Basecoat theme tokens
   and the form helpers (.p-form-grid, .p-field-error). Every class here
   is prefixed `lp-`. Light only, like the rest of the workbench.
   ========================================================================== */

:root {
  --lp-page: #f2f5f8;
  --lp-card: #ffffff;
  --lp-ink: #0d1b2a;
  --lp-text: #33434f;
  --lp-muted: #5b6b7c;
  --lp-line: #dfe5ea;
  --lp-red: #fd1528;        /* Signal Red: rules, the divider dot, chip edge */
  --lp-red-text: #c20d1b;   /* red as text, 6:1 on white */
  --lp-btn: #e0101f;        /* button fill, 4.9:1 with white text at any size */
  --lp-btn-hover: #c20d1b;
  --lp-link: #1f3fb0;       /* the light homepage's --cool */
  --lp-chip: #e3eaf6;
  --lp-mark: #fff0a6;       /* highlighter */
  --lp-shadow: 0 1px 2px rgb(13 27 42 / 0.06), 0 14px 36px -10px rgb(13 27 42 / 0.16);
  --lp-gutter: clamp(1rem, 3vw, 1.5rem);
  --lp-card-px: clamp(1.25rem, 5vw, 4rem);
  --lp-wrap: 75rem;
  --lp-card-w: 62rem;
}

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

body.lp {
  background: var(--lp-page);
  color: var(--lp-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}

.lp h1,
.lp h2,
.lp h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.032em;
  color: var(--lp-ink);
  text-wrap: balance;
}

.lp a {
  color: var(--lp-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.lp a:hover { text-decoration-thickness: 3px; }

[id] { scroll-margin-top: 1.5rem; }

.lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons. Basecoat's rules sit in a cascade layer, so the unlayered
   `.lp a` rule above would repaint an <a class="btn">; every colour a
   button needs is set here with a higher specificity. */
.lp .lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: auto;
  padding: 0.8rem 1.35rem;
  border: 0;
  border-radius: 4px;
  background: var(--lp-btn);
  color: #ffffff;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgb(13 27 42 / 0.1);
}

.lp .lp-btn:hover { background: var(--lp-btn-hover); color: #ffffff; }
.lp .lp-btn:focus-visible { outline: 3px solid rgb(224 16 31 / 0.35); outline-offset: 2px; }
.lp .lp-btn-sm { padding: 0.55rem 0.95rem; font-size: 0.9375rem; }
.lp .lp-btn-lg { padding: 1.05rem 1.9rem; font-size: 1.25rem; }
.lp .lp-btn-ink { background: var(--lp-ink); }
.lp .lp-btn-ink:hover { background: #1d3147; }

/* --------------------------------------------------------------------------
   Top bar: help pill, centered logo, setup button
   -------------------------------------------------------------------------- */

.lp-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--lp-wrap);
  margin: 0 auto;
  padding: 1rem var(--lp-gutter);
}

.lp .lp-top-help {
  justify-self: start;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  background: var(--lp-card);
  box-shadow: 0 1px 2px rgb(13 27 42 / 0.08);
  color: var(--lp-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.lp .lp-top-help:hover { background: var(--lp-chip); }
.lp-top-help u { text-decoration-thickness: 1px; text-underline-offset: 2px; }

.lp-logo img { display: block; height: 1.3rem; width: auto; }
.lp-top .lp-btn { justify-self: end; }
.lp-short { display: none; }

@media (max-width: 44.99rem) {
  .lp-top { grid-template-columns: 1fr auto; }
  .lp .lp-top-help { display: none; }
  .lp-logo img { height: 1.1rem; }
}

@media (max-width: 29.99rem) {
  .lp-long { display: none; }
  .lp-short { display: inline; }
}

/* --------------------------------------------------------------------------
   Hero, in the order Ogilvy's research gives for a reader: the picture,
   then the headline, then the copy, then one action. DOM order is
   headline, action, proof line, demo; from 62rem the demo moves to the
   left and the words stack on the right.
   -------------------------------------------------------------------------- */

.lp-hero {
  display: grid;
  grid-template-areas: "head" "cta" "demo";
  gap: 1.5rem;
  max-width: var(--lp-wrap);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2.5rem) var(--lp-gutter) 0;
}

@media (min-width: 62rem) {
  .lp-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "demo head" "demo cta";
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    row-gap: 1.6rem;
    align-items: start;
  }
}

.lp-head { grid-area: head; }

.lp-h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1rem + 2.1vw, 2.9rem);
  line-height: 1.08;
}

.lp-lede { max-width: 34rem; margin: 1rem 0 0; font-size: 1.1875rem; line-height: 1.5; }

.lp-hero-cta { grid-area: cta; display: grid; justify-items: start; gap: 0.55rem; }
.lp-cta-note { margin: 0; font-size: 0.9375rem; color: var(--lp-muted); }

/* --------------------------------------------------------------------------
   Hero demo: an abstract workbench window, drawn in HTML, that maps five
   steps of a month-end close (an illustration written for this page; the
   app's own example map is the submittal review). Gray bars stand in for
   the descriptions. Red marks a step Copilot could draft, navy a step
   that stays with a person. With motion on it loops: the steps drop in,
   the marks land, a pointer opens the prompt for the variance commentary
   step, the prompt types itself, the pointer clicks Copy prompt, and the
   status reads Mapped. Every pre-animation state lives under
   `.anim .lp-demo.build`, so reduced motion, no JavaScript, or a script
   error all show the finished window.
   -------------------------------------------------------------------------- */

.lp-demo { grid-area: demo; margin: 0; }

.lp-win {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  border-radius: 8px;
  background: var(--lp-card);
  box-shadow: var(--lp-shadow);
}

.lp-win-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--lp-ink);
  color: #9fb0bf;
}

.lp-win-chrome i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #3a4b5c; }

.lp-win-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lp-line);
}

.lp-win-title { display: grid; min-width: 0; margin: 0; line-height: 1.25; }
.lp-win-title b { font-size: 0.9375rem; font-weight: 700; color: var(--lp-ink); }
.lp-win-title span { font-size: 0.75rem; color: var(--lp-muted); }

.lp-win-status {
  flex: none;
  margin-left: auto;
  padding: 2px 9px;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-ink);
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.lp-win-status.is-done { border-color: var(--lp-ink); background: var(--lp-ink); color: #ffffff; }

/* The canvas: the flat dot grid of the real map */
.lp-win-body {
  display: grid;
  gap: 16px;
  align-items: center;
  padding: 18px;
  background-color: var(--lp-page);
  background-image: radial-gradient(#cfd8e0 1px, transparent 1.5px);
  background-size: 16px 16px;
}

@container (min-width: 29rem) {
  .lp-win-body { grid-template-columns: 13.5rem minmax(0, 1fr); padding: 20px; }
}

.lp-nodes { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }

.lp-nodes > li {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 8px 10px 9px;
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-card);
  transition: border-color 0.35s ease;
}

.lp-nodes > li[data-kind="ai"] { border-left-color: var(--lp-red); }

.lp-nodes > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 16px;
  margin-left: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' viewBox='0 0 10 16'%3E%3Cpath d='M5 1v13M1.5 10.5 5 14.5l3.5-4' fill='none' stroke='%238AA0AE' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center;
}

.lp-nodes b { font-size: 0.8125rem; font-weight: 700; line-height: 1.3; color: var(--lp-ink); }
.lp-sk { display: block; width: var(--w, 80%); height: 5px; border-radius: 3px; background: #e3e9ee; }

.lp-tag { font-size: 0.6875rem; font-weight: 700; line-height: 1.3; color: var(--lp-red-text); }
.lp-nodes > li.sel { outline: 2px solid var(--lp-ink); outline-offset: 2px; }

/* The prompt card for GC Completeness Review, with a working copy button */
.lp-prompt {
  padding: 12px;
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  background: var(--lp-card);
  box-shadow: 0 10px 24px -12px rgb(13 27 42 / 0.25);
}

.lp-prompt-kicker { margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-muted); }
.lp-prompt-title { margin: 2px 0 8px; font-size: 0.875rem; font-weight: 700; line-height: 1.3; color: var(--lp-ink); }

.lp-prompt-body {
  min-height: 9.4em;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--lp-line);
  border-radius: 3px;
  background: var(--lp-page);
  color: var(--lp-ink);
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
}

.lp-typed.typing::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--lp-ink);
}

.lp-copy {
  width: 100%;
  height: 32px;
  margin-top: 8px;
  border: 1px solid var(--lp-line);
  border-radius: 3px;
  background: var(--lp-card);
  color: var(--lp-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
}

.lp-copy:hover { background: var(--lp-page); }
.lp-copy.done { border-color: var(--lp-ink); background: var(--lp-ink); color: #ffffff; }

/* The legend under the canvas */
.lp-win-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--lp-line);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--lp-muted);
}

.lp-win-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lp-win-legend span::before { content: ""; width: 4px; height: 12px; border-radius: 1px; background: var(--lp-ink); }
.lp-win-legend [data-kind="ai"]::before { background: var(--lp-red); }

/* The demo pointer, shown only when the steps and the prompt card sit
   side by side */
.lp-cursor { display: none; position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; will-change: transform; }
@container (min-width: 29rem) { .anim .lp-cursor { display: block; } }
.lp-cursor svg { display: block; }
.lp-cursor::after { content: ""; position: absolute; top: -9px; left: -9px; width: 22px; height: 22px; border: 2px solid var(--lp-ink); border-radius: 50%; opacity: 0; }
.lp-cursor.click::after { animation: lp-click 0.5s ease-out; }
@keyframes lp-click { from { opacity: 0.9; transform: scale(0.3); } to { opacity: 0; transform: scale(1.5); } }

/* Pre-animation states: only while the demo script is running */
.anim .lp-demo.build .lp-nodes > li { opacity: 0; transform: translateY(-8px); transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.35s ease; }
.anim .lp-demo.build .lp-nodes > li.on { opacity: 1; transform: none; }
.anim .lp-demo.build .lp-nodes > li:not(.mk) { border-left-color: #cfd8e0; }
.anim .lp-demo.build .lp-tag { opacity: 0; transition: opacity 0.3s ease; }
.anim .lp-demo.build .lp-nodes > li.mk .lp-tag { opacity: 1; }
.anim .lp-demo.build .lp-prompt { opacity: 0; transform: translateX(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.anim .lp-demo.build .lp-prompt.on { opacity: 1; transform: none; }

.lp-demo figcaption { margin-top: 0.7rem; font-size: 0.875rem; color: var(--lp-muted); }

/* --------------------------------------------------------------------------
   Client logos, right under the hero. Primus Builders ships a white
   logo for dark grounds; assets/img/logos/primus-builders-on-light.png
   is that file with the white letters set in navy ink and the orange
   mark kept. The First Children Services file is their logo at 2x its
   display size. Each logo links to its case study.
   -------------------------------------------------------------------------- */

.lp-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 2.25rem;
  max-width: var(--lp-wrap);
  margin: clamp(2.25rem, 5vw, 3.25rem) auto 0;
  padding: 1.5rem var(--lp-gutter) 0;
  border-top: 1px solid var(--lp-line);
}

.lp-logos-label { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--lp-muted); }

.lp-logos ul {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-logos a { display: block; }
.lp-logos img { display: block; width: auto; }
.lp-logo-primus { height: 1.75rem; }
.lp-logo-fcs { height: 4.5rem; }

/* --------------------------------------------------------------------------
   The letter: one sheet on a small stack of paper
   -------------------------------------------------------------------------- */

.lp-letter-wrap { padding: clamp(3rem, 7vw, 5rem) var(--lp-gutter) 0; }

.lp-letter { position: relative; max-width: 43rem; margin: 0 auto; }

.lp-letter::before,
.lp-letter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--lp-card);
  box-shadow: var(--lp-shadow);
}

.lp-letter::before { transform: rotate(-0.9deg) translate(-4px, 10px); background: #fbfcfd; }
.lp-letter::after { transform: rotate(0.6deg) translate(5px, 5px); background: #f7f9fb; }

.lp-letter-sheet {
  position: relative;
  z-index: 1;
  padding: clamp(1.75rem, 5.5vw, 3.75rem) clamp(1.25rem, 6vw, 4.25rem);
  border-radius: 2px;
  background: var(--lp-card);
  box-shadow: 0 1px 2px rgb(13 27 42 / 0.06);
  color: #2a3a48;
  font-size: 1.125rem;
  line-height: 1.66;
}

.lp-letter-sheet p { margin: 0 0 1.1em; }
.lp-letter-sheet dfn { font-style: normal; font-weight: 700; color: var(--lp-ink); }

.lp-sign { margin-top: 1.6rem; }

.lp-sign-script {
  display: block;
  width: 11rem;
  height: auto;
  margin: 0 0 0.6rem -0.35rem;
  mix-blend-mode: multiply;
}

.lp-sign-who { display: flex; align-items: center; gap: 0.85rem; font-size: 1rem; line-height: 1.4; }
.lp-sign-who p { margin: 0; }
.lp-sign-who b { color: var(--lp-ink); }
.lp-sign-who i { color: var(--lp-muted); }

.lp-avatar { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Cards and the divider between them
   -------------------------------------------------------------------------- */

.lp-squiggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: clamp(2.5rem, 6vw, 3.75rem) auto;
}

.lp-squiggle::before,
.lp-squiggle::after {
  content: "";
  width: clamp(5rem, 16vw, 8rem);
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 4 Q3 0.5 6 4 T12 4' fill='none' stroke='%23aebbc7' stroke-width='1.3'/%3E%3C/svg%3E") repeat-x center;
}

.lp-squiggle i { width: 9px; height: 9px; border-radius: 50%; background: var(--lp-red); }

.lp-section { max-width: calc(var(--lp-card-w) + 2 * var(--lp-gutter)); margin: 0 auto; padding: 0 var(--lp-gutter); }
.lp-letter-wrap + .lp-squiggle { margin-top: clamp(3rem, 7vw, 4.5rem); }

.lp-card {
  padding: clamp(1.75rem, 4.5vw, 3.25rem) var(--lp-card-px);
  border-radius: 4px;
  background: var(--lp-card);
  box-shadow: var(--lp-shadow);
}

.lp-card-head { max-width: 44rem; margin: 0 auto clamp(1.75rem, 4vw, 2.75rem); text-align: center; }
.lp-card-head h2 { margin: 0 0 0.6rem; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); line-height: 1.1; }
.lp-card-head p { margin: 0; font-size: 1.1875rem; }

/* Show your boss: the example map's change record */
.lp-record { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.45; }

.lp-record caption {
  padding-bottom: 8px;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-record thead th {
  padding: 0 8px 5px;
  border-bottom: 1px solid var(--lp-ink);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lp-ink);
  white-space: nowrap;
}

.lp-record tbody th,
.lp-record tbody td { padding: 7px 8px; border-bottom: 1px solid #eef2f5; vertical-align: top; text-align: left; }
.lp-record tbody tr:nth-child(3n) > * { border-bottom-color: #c3ced8; }
.lp-record tbody th { width: 11.5rem; font-weight: 700; color: var(--lp-ink); }
.lp-record thead th:first-child, .lp-record tbody th { padding-left: 0; }
.lp-record thead th:last-child, .lp-record tbody td:last-child { padding-right: 0; }

.lp-record .num {
  text-align: right;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 39.99rem) {
  .lp-record thead { display: none; }
  .lp-record,
  .lp-record caption,
  .lp-record tbody,
  .lp-record tbody th,
  .lp-record tbody td { display: block; }
  .lp-record tbody th { width: auto; }
  .lp-record tr { display: flex; flex-wrap: wrap; column-gap: 18px; padding: 10px 0; border-bottom: 1px solid #eef2f5; }
  .lp-record tbody th,
  .lp-record td:not(.num) { flex: 0 0 100%; }
  .lp-record td:not(.num) { order: 2; }
  .lp-record tbody tr:nth-child(3n) { border-bottom-color: #c3ced8; }
  .lp-record tbody th,
  .lp-record tbody td { padding: 3px 0; border: 0; }
  .lp-record tbody tr:nth-child(3n) > * { border-bottom: 0; }
  .lp-record .num { display: flex; order: 1; gap: 6px; align-items: baseline; text-align: left; }
  .lp-record td.num[data-label]::before { display: inline; }
  .lp-record td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-muted);
  }
}

/* Setup: the gate form beside the example map it opens */
.lp-setup { display: grid; gap: 2rem; }

@media (min-width: 56rem) {
  .lp-setup { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; }
}

.lp-setup h2 { margin: 0 0 0.7rem; font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.6rem); line-height: 1.1; }
.lp-setup-copy > p { margin: 0; font-size: 1.125rem; }

.lp-example {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem 1.2rem;
  border-left: 3px solid var(--lp-red);
  border-radius: 0 4px 4px 0;
  background: var(--lp-page);
}

.lp-example-kicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-example-title {
  display: block;
  margin: 0.2rem 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--lp-ink);
}

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-chip {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--lp-line);
  border-radius: 999px;
  background: var(--lp-card);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--lp-ink);
  white-space: nowrap;
}

.lp-chip.is-hot { border-color: var(--lp-red); color: var(--lp-red-text); }
.lp-chip-arrow { color: var(--lp-muted); font-size: 0.85rem; }

.lp-example-meta { margin: 0.8rem 0 0; font-size: 0.8125rem; color: var(--lp-muted); font-variant-numeric: tabular-nums; }

.lp .lp-form-card {
  gap: 0;
  padding: 1.5rem;
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  background: var(--lp-page);
  box-shadow: none;
  font-size: 1rem;
}

.lp .lp-form-card > section,
.lp .lp-form-card > footer { padding: 0; }

.lp-form-card .field label { font-size: 0.9375rem; font-weight: 600; color: var(--lp-ink); }

.lp-form-card .field input {
  height: auto;
  padding: 0.7rem 0.85rem;
  border-radius: 4px;
  background: var(--lp-card);
  font-size: 1rem;
}

.lp .lp-form-card .lp-btn { width: 100%; margin-top: 0.3rem; }
.lp-form-card > footer { margin-top: 1rem; justify-content: center; font-size: 0.875rem; color: var(--lp-muted); }
.lp-form-card > footer p { margin: 0; }

/* What's inside: feature rows with real screenshots */
.lp-feature { display: grid; gap: 1.5rem; align-items: center; }

.lp-feature + .lp-feature {
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  border-top: 1px solid var(--lp-line);
}

@media (min-width: 56rem) {
  .lp-feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
  .lp-feature.lp-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .lp-feature.lp-flip .lp-feature-copy { order: 2; }
}

.lp-feature-copy h3 { margin: 0 0 0.6rem; font-size: 1.6rem; line-height: 1.15; }
.lp-feature-copy p { margin: 0; }

.lp-feature-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  background: var(--lp-page);
  box-shadow: var(--lp-shadow);
}

.lp-feature-shot img { display: block; width: 100%; height: auto; }

/* A 4:3 window on the map screenshot, framed on the two marked nodes
   (source pixels x 677-1277, y 440-890 of 1920 x 1290). */
.lp-crop { position: relative; aspect-ratio: 4 / 3; }
.lp-crop img { position: absolute; top: -97.8%; left: -112.8%; width: 320%; max-width: none; }

/* Client quotes with highlighter marks */
.lp-quote-grid { display: grid; gap: 2rem; }

@media (min-width: 48rem) {
  .lp-quote-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.lp-quote { margin: 0; text-align: center; }
.lp-quote p { margin: 0 0 0.8rem; font-size: 1.125rem; font-style: italic; line-height: 1.6; color: #2a3a48; }

.lp-quote mark {
  padding: 0 0.1em;
  background: var(--lp-mark);
  color: var(--lp-ink);
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lp-quote footer { font-size: 0.9375rem; color: var(--lp-muted); }
.lp-quote footer b { color: var(--lp-ink); }

.lp-more { margin: 2rem 0 0; text-align: center; }


/* Numbers: a navy band across the card, then the pills */
.lp-band {
  margin: 0 calc(-1 * var(--lp-card-px));
  padding: clamp(2rem, 5vw, 3rem) var(--lp-card-px);
  background: var(--lp-ink);
  color: #c9d4de;
  text-align: center;
}

.lp-band-num {
  display: block;
  margin: 0 0 0.35rem;
  font-size: clamp(3.5rem, 2rem + 8vw, 7rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.lp-band-num::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin: 1rem auto 0;
  background: var(--lp-red);
}

.lp-band p { max-width: 36rem; margin: 0 auto; font-size: 1.0625rem; }

.lp-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.lp-pills li {
  padding: 0.45rem 1rem;
  border: 1px solid var(--lp-line);
  border-radius: 1.25rem;
  background: var(--lp-card);
  box-shadow: 0 1px 2px rgb(13 27 42 / 0.05);
  font-size: 1rem;
  line-height: 1.4;
}

.lp-pills b { font-weight: 800; color: var(--lp-ink); font-variant-numeric: tabular-nums; }

.lp-note { margin: 1.25rem 0 0; font-size: 0.9375rem; color: var(--lp-muted); text-align: center; }

/* Talk to a person */
.lp-talk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem 1.1rem;
}

.lp-talk-actions span { color: var(--lp-muted); }

/* --------------------------------------------------------------------------
   Close, link chips, footer, floating button
   -------------------------------------------------------------------------- */

.lp-end {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--lp-gutter) 0;
  text-align: center;
}

.lp-end h2 { margin: 0 0 0.75rem; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.25rem); line-height: 1.02; }
.lp-end > p { margin: 0 0 1.75rem; font-size: 1.1875rem; }
.lp .lp-plans { margin: 1.4rem 0 0; font-size: 1rem; color: var(--lp-muted); }

.lp-linkcloud { max-width: calc(var(--lp-card-w) + 2 * var(--lp-gutter)); margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; padding: 0 var(--lp-gutter); }

.lp-linkcloud ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp .lp-linkcloud a {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  background: var(--lp-chip);
  font-size: 0.9375rem;
  text-decoration: none;
}

.lp .lp-linkcloud a:hover { background: #d3def2; }

.lp-foot { padding: 2rem var(--lp-gutter) 6.5rem; text-align: center; font-size: 0.9375rem; color: var(--lp-muted); }
.lp-foot p { margin: 0 0 0.35rem; }
.lp .lp-foot a { color: inherit; }
.lp-foot b { color: var(--lp-ink); }
.lp-motto b { color: var(--lp-red-text); }

.lp .lp-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 40;
  box-shadow: 0 12px 30px -8px rgb(13 27 42 / 0.45);
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}

.lp .lp-float.is-on {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.2s, transform 0.2s, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .lp .lp-float,
  .lp .lp-float.is-on { transform: none; transition: none; }
}