/* lp-suspended.css - the landing page for a suspended Google Business Profile.
   Loads after the shared site sheet.

   FIRST RULE, AND THE REASON FOR IT. The shared sheet defines a display-face token on
   :root and points it at a serif family, and 38 of its own selectors read that token.
   A page cannot escape that by naming the token with a fallback beside it: a var()
   fallback fires only when the token is UNSET, and this one is set, so the fallback is
   dead text and the page paints the serif anyway. The display serif is banned on every
   surface, so this sheet repoints the token itself and every carrier follows it. Same
   ruling, readable floor: body never below 16px, labels never below 13px, and nothing
   in this sheet goes under 0.85rem. */

:root {
  --serif: Arial, Helvetica, sans-serif;
}

/* ---------------------------------------------------------------- head */

/* Left-aligned, not a centred badge-headline-subhead-two-buttons stack. */
.lp-head {
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  padding-block: clamp(34px, 5.5vw, 78px) clamp(26px, 3.5vw, 44px);
}

.lp-head__h {
  margin: 10px 0 0;
  max-width: 20ch;
  font-size: clamp(1.95rem, 5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.lp-head__lede {
  margin: 20px 0 0;
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: #d7d6d1;
  color: var(--gray-1, #d7d6d1);
}

.lp-head__acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }

/* --------------------------------------------------------------- acts */

.lp-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #f1f0eb;
  border-color: var(--paper, #f1f0eb);
  border-radius: 2px;
  background: transparent;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
}

/* One filled action per view. */
.lp-act--first {
  background: #f1f0eb;
  background: var(--paper, #f1f0eb);
  color: #0a0a0a;
  color: var(--ink, #0a0a0a);
}

.lp-act:hover,
.lp-act:focus-visible { background: #d7d6d1; background: var(--gray-1, #d7d6d1); color: #0a0a0a; }
.lp-act:focus-visible { outline: 2px solid #f1f0eb; outline-offset: 3px; }

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

/* Spacing steps down the page: the opening breathes most, the form sits tightest. */
.lp-sec {
  padding-inline: clamp(24px, 3.2vw, 64px);
  padding-inline: var(--pad, clamp(24px, 3.2vw, 64px));
  border-top: 1px solid #2a2a28;
}

.lp-sec--open  { padding-block: 50px 44px; }
.lp-sec--mid   { padding-block: 42px 36px; }
.lp-sec--tight { padding-block: 34px 28px; }
.lp-sec--close { padding-block: 28px 56px; }

.lp-h {
  margin: 0 0 10px;
  max-width: 26ch;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lp-sub {
  margin: 0 0 24px;
  max-width: 64ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.lp-sub--wide { max-width: 72ch; }
.lp-sub a { color: #f1f0eb; color: var(--paper, #f1f0eb); }

.lp-p {
  margin: 0 0 16px;
  max-width: 66ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #d7d6d1;
  color: var(--gray-1, #d7d6d1);
}

.lp-p strong { color: #f1f0eb; color: var(--paper, #f1f0eb); }

/* The one paragraph on the page that has to survive skim-reading. */
.lp-p--flag {
  padding: 18px 20px;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  border-left-width: 3px;
  background: #0a0a0a;
}

/* ---------------------------------------------------------------- defs */

.lp-defs { margin: 0; display: grid; }

.lp-defs > div {
  display: grid;
  gap: 6px;
  padding: 20px 0 20px 20px;
  border-left: 2px solid #3b3b3b;
  border-left-color: var(--line, #3b3b3b);
}

@media (min-width: 820px) {
  .lp-defs > div { grid-template-columns: 17rem minmax(0, 1fr); gap: 8px 28px; align-items: baseline; }
}

.lp-defs dt { font-size: 1.05rem; font-weight: 700; color: #f1f0eb; color: var(--paper, #f1f0eb); }

.lp-defs dd {
  margin: 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

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

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

.lp-steps > li {
  padding: 20px 0 20px 20px;
  border-left: 2px solid #3b3b3b;
  border-left-color: var(--line, #3b3b3b);
}

@media (min-width: 820px) {
  .lp-steps > li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 28px; align-items: baseline; }
}

.lp-steps__n {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7a7a76;
  color: var(--gray-3, #7a7a76);
}

.lp-steps__d {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

@media (min-width: 820px) { .lp-steps__d { margin-top: 0; } }

.lp-steps__d strong { color: #f1f0eb; color: var(--paper, #f1f0eb); }

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

/* Two columns, and deliberately not two matching tinted cards: one carries a rule on the
   left, the other does not, because they are not the same kind of statement. */
.lp-split { display: grid; gap: 26px; margin: 8px 0 22px; }

@media (min-width: 820px) {
  .lp-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
}

.lp-split__h {
  margin: 0 0 10px;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.lp-split__col:first-child { padding-left: 20px; border-left: 2px solid #f1f0eb; border-left-color: var(--paper, #f1f0eb); }
.lp-split__col:last-child  { padding-left: 20px; border-left: 2px solid #3b3b3b; border-left-color: var(--line, #3b3b3b); }

.lp-list { margin: 0; padding-left: 18px; display: grid; gap: 9px; }

.lp-list li {
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.55;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

/* --------------------------------------------------------------- price */

/* Plain sans, by ruling. */
.lp-price {
  margin: 0 0 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
}

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

.lp-form { display: grid; gap: 16px; max-width: 62ch; }

@media (min-width: 700px) {
  .lp-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-field--wide,
  .lp-form__act,
  .lp-form__fine { grid-column: 1 / -1; }
}

.lp-field { display: grid; gap: 7px; min-width: 0; }

.lp-field > span {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a7a7a2;
  color: var(--gray-2, #a7a7a2);
}

.lp-field input,
.lp-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 1rem;
  color: #f1f0eb;
  color: var(--paper, #f1f0eb);
  background: #0a0a0a;
  border: 1px solid #3b3b3b;
  border-color: var(--line, #3b3b3b);
  border-radius: 2px;
}

.lp-field textarea { min-height: 110px; resize: vertical; }
.lp-field input:focus-visible,
.lp-field textarea:focus-visible { outline: 2px solid #f1f0eb; outline-offset: 2px; }

.lp-form__act { margin: 6px 0 0; }

.lp-form__fine {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #7a7a76;
  color: var(--gray-3, #7a7a76);
}

.lp-form__fine a { color: #a7a7a2; color: var(--gray-2, #a7a7a2); }

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-act { transition: none; }
}


/* ------------------------------------------------------- the readable floor */

/* His 08-30 ruling puts the label floor at 13px. The shared site sheet paints both of
   these at 12px, and both appear on this page. This sheet loads after it, so these two
   declarations are what actually decide the rendered size. Measured at 375px after the
   change: nothing on the page renders below 13px. */
/* The shared sheet pins .eyebrow with a triple-class hack (.eyebrow.eyebrow.eyebrow)
   at 0.75rem = 12px, which is under his 13px label floor and which a single-class rule
   cannot beat at any load position. This selector out-specifies it. Measured rendered at
   375px after the change, not assumed. */
body.lp .eyebrow.eyebrow { font-size: 0.85rem; }
body.lp .disclosure { font-size: 0.85rem; }