/*
 * LexSheet marketing site.
 *
 * The palette and the control metrics are lifted from apps/portal/src/styles.css
 * rather than re-picked, so the site and the product a firm signs into are
 * visibly the same system. Manrope is loaded for display type: brand/README.md
 * specifies it for the wordmark, and the apps currently fall back to SF Pro
 * because Inter is declared but never loaded — which Apple's licence does not
 * permit for a wordmark.
 *
 * Both faces are self-hosted rather than fetched from Google Fonts. The
 * stylesheet request blocked first render, and the two font files behind it
 * were a third-party chain the browser could not begin until that stylesheet
 * had answered: on a throttled mobile connection Lighthouse measured a 2,420ms
 * LCP render delay and estimated 1,900ms of savings. Serving them from this
 * origin also removes fonts.googleapis.com and fonts.gstatic.com from the CSP.
 *
 * These are the LATIN subsets only, which is what the copy on this site needs:
 * the range covers U+0000-00FF and U+2000-206F, so the em dashes, curly
 * apostrophes, and middots the copy uses are all present. Anything outside it
 * falls back down the stack rather than failing.
 *
 * Both files are variable fonts — one file per family covers every weight the
 * site uses, which is why there are two files and not seven.
 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --brand: #17594d;
  --brand-hover: #10483e;
  --brand-mark: #1d6659;
  --brand-tint: #b9d6cf;
  --aqua: #39ab96;
  --mint: #d2f1e9;
  --wash: #e5f7f1;
  --ink: #163f38;
  --muted: #526e67;
  --subtle: #657b75;
  --canvas: #f4faf8;
  --recessed: #eef5f2;
  --surface: #ffffff;
  --border: #d5e3df;
  --border-strong: #aec9c2;
  --focus: #82cdbd;
  --danger: #b42318;

  --wrap: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --section: clamp(56px, 9vw, 88px);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.035em;
  margin: 0;
  line-height: 1.06;
}
p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.on-white { background: var(--surface); border-block: 1px solid var(--border); }
.on-dark { background: var(--ink); color: #fff; }
.on-dark h2, .on-dark h3, .on-dark strong { color: #fff; }
.on-dark p { color: var(--brand-tint); }

.eyebrow {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.on-dark .eyebrow { color: var(--focus); }

.lede { color: var(--muted); font-size: clamp(16px, 2vw, 18px); text-wrap: pretty; }
.small { color: var(--subtle); font-size: 13px; }

h1 { font-size: clamp(34px, 5.4vw, 58px); text-wrap: balance; }
h2 { font-size: clamp(28px, 3.6vw, 40px); text-wrap: balance; }
h3 { font-size: clamp(17px, 1.6vw, 19px); }

/* ---------------------------------------------------------------- header */
.masthead { background: var(--surface); border-bottom: 1px solid var(--border); }
.masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark span {
  font-family: Manrope, sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--brand);
}
.nav { display: flex; align-items: center; gap: 28px; }
/* A nav label is one thing to read, so it never breaks across two lines. In the
   band between the 720px rule that hides these links and the width where they
   fit comfortably, "How It Works" and "Request a License" were wrapping
   mid-phrase and doubling the masthead's height. */
.nav a { white-space: nowrap; }
.nav a:not(.btn) { font-size: 14px; font-weight: 600; color: var(--muted); }
.nav a:not(.btn)[aria-current="page"] { color: var(--brand); font-weight: 700; }
/* `.nav a` out-specifies `.btn-primary`, which painted muted text on the brand
   fill — a real contrast failure on the site's only call to action. Excluding
   buttons from the nav link rule is the fix; raising the button's specificity
   instead would just move the collision somewhere else. */

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-grid;
  place-items: center;
  min-height: 50px;
  padding: 0 26px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.btn-primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { color: #fff; background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-secondary { color: var(--brand); background: transparent; border-color: var(--border-strong); }
.btn-compact { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn[disabled] { opacity: 0.72; cursor: wait; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------------------------------------------------------------- blocks */
.card {
  padding: clamp(22px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 13px;
}
.card-recessed { background: var(--recessed); }
.card-quiet { background: var(--canvas); }
.on-dark .card {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(185 214 207 / 22%);
}

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 16px; }
.stack-tight { display: flex; flex-direction: column; gap: 10px; }
.measure { max-width: 42rem; }

.ticks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.55; }
.ticks svg { flex: 0 0 17px; margin-top: 3px; }

.step-badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--mint);
  color: var(--brand);
  font-family: Manrope, sans-serif;
  font-size: 14px;
  font-weight: 800;
}
.pill {
  display: inline-block;
  padding: 6px 12px;
  color: var(--brand);
  background: var(--mint);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- hero */
.hero { background: radial-gradient(circle at 88% 0%, var(--mint), transparent 640px), var(--canvas); border-bottom: 1px solid var(--border); }
.hero .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-centered .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }

/* ---------------------------------------------------------------- estimate card */
.estimate {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgb(22 63 56 / 9%);
  overflow: hidden;
}
.estimate-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.firm-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--wash);
  color: var(--brand);
  font-family: Manrope, sans-serif;
  font-weight: 800;
}
.totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 20px 22px; }
.total { padding: 14px; border: 1px solid var(--border); border-radius: 9px; }
.total span { display: block; font-size: 11px; font-weight: 700; color: var(--subtle); }
.total strong { display: block; margin-top: 5px; font-family: Manrope, sans-serif; font-size: 22px; letter-spacing: -0.035em; }
.total-wide { grid-column: 1 / -1; color: #fff; background: var(--brand); border-color: var(--brand); }
.total-wide span { color: rgb(255 255 255 / 70%); }
.total-wide strong { font-size: 26px; }
.lines { display: flex; flex-direction: column; padding: 0 22px 22px; }
.line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--recessed); font-size: 13px; }
.line span:first-child { color: var(--muted); }
.line span:last-child { font-weight: 700; }

/* ---------------------------------------------------------------- pricing */
.plan { padding: clamp(26px, 3.4vw, 38px); background: var(--surface); border: 2px solid var(--brand); border-radius: 16px; box-shadow: 0 20px 56px rgb(22 63 56 / 10%); }
.price { display: flex; align-items: baseline; gap: 10px; margin-top: 26px; }
.price strong { font-family: Manrope, sans-serif; font-size: clamp(52px, 7vw, 74px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.price span { color: var(--muted); font-size: 17px; font-weight: 600; }
.rowline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rowline + .rowline { margin-top: 16px; }
.toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; }
.toggle button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.toggle button[aria-pressed="true"] { background: var(--brand); color: #fff; }

.bar-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 650; color: var(--muted); }
.bar { height: 12px; margin-top: 7px; border-radius: 999px; background: var(--recessed); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--border-strong); }
.bar-ours > i { background: var(--brand); }
.bar-ours .bar-label { color: var(--ink); }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 7px; }
.field > label { font-size: 13.5px; font-weight: 700; }
.field .hint { font-size: 12.5px; color: var(--subtle); line-height: 1.5; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 13px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
}
textarea { min-height: 104px; resize: vertical; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}
.choice:has(input:checked) { border: 2px solid var(--brand); padding: 14px; }
.choice input { width: 18px; min-height: 18px; margin-top: 2px; accent-color: var(--brand); }
.choice b { display: block; font-size: 14px; font-weight: 750; }
.choice em { display: block; margin-top: 3px; color: var(--subtle); font-size: 12.5px; font-style: normal; line-height: 1.5; }
.form-note { color: var(--subtle); font-size: 12.5px; line-height: 1.6; }
.form-error { padding: 12px 14px; color: var(--danger); background: #fef0ee; border-radius: 7px; font-size: 14px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- code */
.snippet { padding: 24px; background: var(--ink); border-radius: 13px; overflow-x: auto; }
.snippet pre {
  margin: 14px 0 0;
  color: var(--mint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre;
}

/* ---------------------------------------------------------------- footer */
.sitefoot { background: var(--surface); border-top: 1px solid var(--border); }
.sitefoot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; padding-block: 52px; }
.sitefoot nav { display: flex; gap: clamp(32px, 6vw, 64px); }
.sitefoot h2 { font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sitefoot ul { display: flex; flex-direction: column; gap: 9px; margin: 10px 0 0; padding: 0; list-style: none; }
.sitefoot a { font-size: 14px; color: var(--muted); }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 10px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--brand);
  border-radius: 7px;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  /* Buy the room back by closing the gaps rather than shrinking the type. */
  .nav { gap: 18px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .split { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 720px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .nav a:not(.btn) { display: none; }
  .masthead .wrap { min-height: 62px; }
  .sitefoot .wrap { flex-direction: column; gap: 28px; }
  .sitefoot nav { flex-wrap: wrap; gap: 32px; }
  .btn-row .btn { width: 100%; }
  .totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: no-preference) {
  .card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  a.card:hover { border-color: var(--border-strong); box-shadow: 0 .55rem 1.5rem rgb(22 63 56 / 8%); transform: translateY(-1px); }
}

@media print {
  .masthead, .sitefoot, .btn { display: none; }
  body { background: #fff; }
}