/*
 * Google Ads landing pages.
 *
 * Loaded only on the page-landing template, so nothing here can reach the rest
 * of the site and nothing on the site can restyle these pages. That separation
 * is deliberate: the landing pages are a different visual system from the
 * marketing site.
 *
 * Geometry comes from Figma node 244:842 (1440 wide, 1280 container, 80 gutter).
 * Colours are the existing Hungry Minds tokens; the PDF export confirmed the
 * design uses no colour outside that palette.
 *
 * The quote form is NOT styled here. It reuses the theme's own
 * .hm-contact-gravity treatment from /contact/, so the two forms stay identical.
 */

:root {
  --lp-max: 1280px;
  /* 16, not 80: the design's content is the full 1280 of the container, and
     the 80px page margin comes from centring that in a 1440 page. Padding of
     80 here shrank every section's content to 1120. */
  --lp-gutter: 16px;
  --lp-bg: var(--hm-cream-soft);      /* #FAF5EC */
  --lp-bg-alt: var(--hm-paper);       /* #EFE7D9 */
  --lp-ink: var(--hm-ink);            /* #1E1414 */
  --lp-red: var(--hm-red);            /* #FF4B3E */
  --lp-red-deep: var(--hm-red-deep);  /* #D93A2E */
  --lp-cream: var(--hm-cream);        /* #F5EEE4 */
  --lp-muted: var(--hm-charcoal);     /* #3B2E2A */
  --lp-hairline: rgba(30, 20, 20, 0.14);
  --lp-radius-card: 16px;
  --lp-radius-slab: 24px;
}

body {
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--hm-font-sans);
  font-size: 17px;
  line-height: 1.55;
}

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

/* The theme reserves --hm-nav-height (73px) of top padding on every page but
   the home page, because the site nav is fixed. This page's header is sticky,
   so that reservation is just a gap above it. Same selector as the theme's, and
   this sheet loads later, so no !important is needed. */
body:not(.home) .wp-site-blocks { padding-top: 0; }

.lp-container { max-width: var(--lp-max); margin-inline: auto; padding-inline: var(--lp-gutter); }

.lp-section { padding-block: 96px; }
.lp-section--tight { padding-block: 64px; }
.lp-section--flush { padding-block: 0; }
/* The CTA slab sits on the same ground as whatever precedes it, so its own top
   padding stacks on the section above and reads as a gap rather than a break. */
.lp-section--flush-top { padding-block-start: 0; }
.lp-section--alt { background: var(--lp-bg-alt); }

/* ---------- heading colours ----------
   The theme sets `body.page .entry-content h3 { color: var(--hm-red) }`. At
   (0,3,2) that outranks anything scoped to a block class, so it is neutralised
   once here at the same specificity - this sheet loads later - and every heading
   then inherits from its own panel. Each panel names its own colour below, so
   light cards, ink sections and red slabs all resolve without !important. */
body.page .entry-content h1,
body.page .entry-content h2,
body.page .entry-content h3,
body.page .entry-content h4 { color: inherit; }

/* The theme also sets colour directly on h2, h3 and p. A directly-set colour
   beats an inherited one, so any panel that flips its background has to name the
   colour on the descendants too. */
.lp-callout, .lp-callout h2, .lp-callout h3, .lp-callout p,
.lp-ctaslab, .lp-ctaslab h2, .lp-ctaslab h3, .lp-ctaslab p,
.lp-stat-card, .lp-stat-card p, .lp-stat-card div,
.lp-card--filled, .lp-card--filled h3, .lp-card--filled p,
.lp-choice--red, .lp-choice--red h3, .lp-choice--red p, .lp-choice--red li,
.lp-choice--ink, .lp-choice--ink h3, .lp-choice--ink p, .lp-choice--ink li,
.lp-tile--accent, .lp-tile--accent p,
.lp-marquee, .lp-marquee span,
.lp-footer, .lp-footer span, .lp-footer a { color: var(--lp-cream); }

.lp-choice--paper, .lp-choice--paper h3, .lp-choice--paper p, .lp-choice--paper li,
.lp-card, .lp-card h3, .lp-card p,
.lp-tier, .lp-tier p, .lp-includes, .lp-includes p, .lp-includes li,
.lp-step, .lp-step p, .lp-tile, .lp-tile p, .lp-person, .lp-person p { color: var(--lp-ink); }

.lp-accent, .lp-eyebrow, .lp-tier-label { color: var(--lp-red); }
body.page .entry-content .lp-step-name, .lp-step-name { color: var(--lp-red); }
.lp-person .lp-person-role { color: var(--lp-red); }
.lp-tile--accent .lp-tile-value, .lp-tile--accent .lp-tile-note { color: var(--lp-cream); }
.lp-tier-note { color: var(--lp-muted); }

/* The filled card and the outlined cards share a class, so the ink rule for the
   outlined ones was overriding the cream rule at equal specificity purely on
   source order. Naming the parent settles it without reordering the blocks. */
.lp-cards .lp-card--filled,
.lp-cards .lp-card--filled h3,
.lp-cards .lp-card--filled p { color: var(--lp-cream); }

/* The work gallery is the site's own block, reused here on ink. It sets its
   background inline but not its text colour, because everywhere else on the
   site it sits on a light panel. */
.work-gallery-section,
.work-gallery-section h2,
.work-gallery-section p,
.work-gallery-section .section-head { color: var(--lp-cream); }

/* ---------- type ---------- */

.lp-display { color: inherit; font-family: var(--hm-font-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
.lp-h1 { font-size: clamp(38px, 5vw, 68px); }
.lp-h2 { font-size: clamp(32px, 3.7vw, 52px); line-height: 1.06; }
.lp-h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; }

.lp-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; }
.lp-eyebrow--ink { color: var(--lp-ink); letter-spacing: 0.12em; }

.lp-lead { font-size: 17px; line-height: 1.6; margin: 18px 0 0; max-width: 62ch; }
.lp-lead strong { font-weight: 700; }
.lp-center { text-align: center; }
.lp-center .lp-lead { margin-inline: auto; }

/* ---------- buttons ----------
   Matches the site's own .btn behaviour so the landing page and the rest of the
   site feel like one product: a 1px lift on hover, primary deepens to red-deep,
   the outlined one inverts to ink. Every variant carries the theme's arrow. */

.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-family: var(--hm-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.lp-btn:hover, .lp-btn:focus-visible { transform: translateY(-1px); text-decoration: none; opacity: 1; }
.lp-btn--primary { background: var(--lp-red); color: var(--lp-cream); }
.lp-btn--primary:hover, .lp-btn--primary:focus-visible { background: var(--lp-red-deep); color: var(--lp-cream); }
.lp-btn--ghost { background: transparent; color: var(--lp-ink); border-color: var(--lp-ink); }
.lp-btn--ghost:hover, .lp-btn--ghost:focus-visible { background: var(--lp-ink); color: var(--lp-cream); border-color: var(--lp-ink); }
/* On red panels the fill inverts so the primary stays the loudest thing. */
.lp-btn--onred { background: var(--lp-cream); color: var(--lp-ink); }
.lp-btn--onred:hover, .lp-btn--onred:focus-visible { background: #fff; color: var(--lp-ink); }
.lp-btn--onred-ghost { background: transparent; color: var(--lp-cream); border-color: var(--lp-cream); }
.lp-btn--onred-ghost:hover, .lp-btn--onred-ghost:focus-visible { background: var(--lp-cream); color: var(--lp-ink); }

.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.lp-center .lp-actions { justify-content: center; }

.lp-textlink { font-size: 14px; font-weight: 600; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.lp-textlink:hover, .lp-textlink:focus-visible { text-decoration: underline; }

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

.lp-header { position: sticky; top: 0; z-index: 60; background: var(--lp-bg); border-bottom: 1px solid var(--lp-hairline); }
.lp-header-inner { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lp-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.lp-brand-mascot { height: 40px; width: auto; display: block; }
.lp-brand-logo { height: 28px; width: auto; display: block; }
.lp-brand-rule { width: 1px; height: 20px; background: var(--lp-hairline); flex: 0 0 1px; }
.lp-brand-page { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: none; color: var(--lp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-header-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }

/* Mobile header. The two actions do not fit beside the brand on a phone, so
   they move into a panel behind a toggle - the same shape as the site header,
   minus the navigation this page is not allowed to have. */
.lp-nav-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--lp-ink); cursor: pointer; }
.lp-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--lp-bg);
  padding: 16px 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transform: translateX(100%);
  transition: transform .28s ease;
  visibility: hidden;
}
.lp-mobile-menu.is-open { transform: none; visibility: visible; }
.lp-mobile-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.lp-mobile-menu-page { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: none; color: var(--lp-muted); margin: 0; }
.lp-mobile-menu-phone { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; color: var(--lp-ink); text-decoration: none; }
.lp-mobile-menu .lp-btn { justify-content: center; }
body.lp-menu-open { overflow: hidden; }

/* ---------- 02 hero ----------
   The illustration is 531x329 and sits level with the top of the copy, not
   centred against it. */

.lp-hero { padding-block: 110px 90px; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 531px; gap: 60px; align-items: start; }
.lp-hero-art { justify-self: end; width: 531px; max-width: 100%; }
.lp-hero-art img { width: 100%; height: auto; display: block; }

/* ---------- 03 marquee ----------
   The separator is a small cream brain, not a dot. */

.lp-marquee { background: var(--lp-ink); overflow: hidden; padding-block: 9px; }
.lp-marquee-track { display: flex; width: max-content; align-items: center; animation: lp-marquee 42s linear infinite; }
.lp-marquee-item { display: inline-flex; align-items: center; gap: 30px; padding-right: 30px; font-size: 15px; white-space: nowrap; }
.lp-marquee-brain { width: 20px; height: auto; flex: 0 0 20px; display: block; }
@keyframes lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .lp-marquee-track { animation: none; width: 100%; justify-content: space-between; flex-wrap: wrap; }
}

/* ---------- 04 logo wall ---------- */

.lp-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 34px 56px; margin-top: 46px; }
.lp-logos img { height: 56px; width: auto; max-width: 200px; object-fit: contain; display: block; }

/* ---------- 05 stat ---------- */

.lp-stat-grid { display: grid; grid-template-columns: 302px minmax(0, 737px); gap: 132px; align-items: start; }
.lp-stat-card { background: var(--lp-red); border-radius: var(--lp-radius-card); padding: 32px; }
/* Margo Beuys ships a single cut, and in it the symbol glyphs are drawn as
   hairlines while the digits are black. So font-weight: 900 is already applied
   and honoured - there is simply no heavier symbol to pick, which is why "~5%"
   reads as a bold 5 between two thin marks. Map just those symbols onto Gilroy
   Black, which is weight-matched, and let unicode-range drop every other
   character straight through to the brand face. */
@font-face {
  font-family: 'HM Display Symbols';
  src: url('fonts/Radomir_Tinkov_-_Gilroy-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0025, U+002B, U+0026, U+007E, U+2248; /* % + & ~ ≈ */
}

.lp-stat-value { font-family: 'HM Display Symbols', var(--hm-font-display); font-weight: 900; font-size: 62px; line-height: 1; letter-spacing: -0.03em; }
/* The hairline sits above the statement, separating it from the figure. The
   24px is padding-top rather than padding-bottom so the rule keeps its distance
   from the text it now sits above; left on the bottom it would have hugged the
   statement and stranded the space under it. */
.lp-stat-statement { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 18px 0 0; padding-top: 24px; border-top: 1px solid #F5EEE466; }
.lp-stat-cite { font-size: 12px; font-style: italic; line-height: 1.4; margin: 20px 0 0; opacity: 0.85; }
.lp-stat-body { font-size: 24px; }
.lp-stat-body p { margin: 0 0 18px; }
.lp-stat-body p:last-child { margin-bottom: 0; }

/* ---------- 06 split cards ----------
   All four show their body copy; the first is filled dark. This was an
   accordion, which hid three quarters of the section. */

.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 80px; align-items: start; }
.lp-split-art { margin-top: 54px; }
.lp-split-art img { width: 100%; max-width: 470px; height: auto; display: block; }
.lp-cards { display: grid; gap: 20px; }
.lp-card { border: 1px solid var(--lp-hairline); border-radius: var(--lp-radius-card); padding: 26px 28px 28px; background: transparent; }
.lp-card--filled { background: var(--lp-ink); border-color: var(--lp-ink); }
.lp-card-title { font-family: var(--hm-font-display); font-weight: 900; font-size: 19px; letter-spacing: -0.01em; margin: 0 0 14px; }
.lp-card-body { font-size: 15px; line-height: 1.6; margin: 0; }

/* ---------- 07 red callout slab ---------- */

.lp-callout { background: var(--lp-red); border-radius: var(--lp-radius-slab); padding: 54px 60px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: center; }
.lp-callout-art img { width: 100%; height: auto; display: block; }
.lp-callout .lp-lead { margin-top: 12px; }

/* ---------- 08 pricing ----------
   The featured tier's flag is a tab that the card sits on top of, so it reads
   as tucked behind rather than as a rounded strip glued on. */

.lp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.lp-tier-slot { position: relative; display: flex; }
/* Cards in a row share one height even when their feature lists differ in
   length: the grid default (stretch) equalises the slots, and the tier's own
   flex: 1 fills the slot. The 26px flag strip is reserved on every card
   whenever any card carries a tab, so tops and bottoms still line up exactly
   as they did under the old align-items: end, where the slot padding only
   existed on the flagged card. */
.lp-tiers:has(.lp-tier-flag) .lp-tier-slot { padding-top: 26px; }
.lp-tier-flag {
  position: absolute;
  inset: 0 0 auto 0;
  height: 56px;
  background: var(--lp-red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 8px;
  text-align: center;
  border-radius: var(--lp-radius-card) var(--lp-radius-card) 0 0;
}
.lp-tier { position: relative; z-index: 1; flex: 1; background: var(--lp-bg); border: 1px solid var(--lp-hairline); border-radius: var(--lp-radius-card); padding: 30px 32px 34px; }
.lp-tier--featured { border-color: var(--lp-red); }
.lp-tier-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.lp-tier-price { font-family: var(--hm-font-display); font-weight: 900; font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; margin-top: 10px; }
.lp-tier-note { font-size: 13px; margin-top: 8px; }
/* Four-card variant of the same design: tighter cards so four still fit the
   1280 container. */
.lp-tiers--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.lp-tiers--4 .lp-tier { padding: 26px 24px 28px; }
.lp-tiers--4 .lp-tier-price { font-size: 30px; }

.lp-tier-feats { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--lp-hairline); display: grid; gap: 10px; }
.lp-tier-feats li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.45; }

.lp-includes { margin-top: 22px; border: 1px solid var(--lp-hairline); border-radius: var(--lp-radius-card); padding: 30px 34px 34px; background: var(--lp-bg); }
.lp-includes-title { font-size: 15px; font-weight: 700; margin: 0 0 20px; }
/* Column flow, not row flow: the design reads down the left column then down
   the right, so filling by row would put the DOM order at odds with it. */
.lp-includes-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 14px 48px; }
.lp-includes-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: 15px; }
/* The tick is an inline SVG (the hand-drawn check from the design file), not a
   text glyph, so this span is a fixed-size box that only sizes and colours it. */
.lp-tick { display: inline-flex; width: 11px; height: 12px; margin-top: 3px; color: var(--lp-red); }
.lp-tick svg { width: 100%; height: 100%; }

/* ---------- 09 process ---------- */

.lp-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.lp-step { border: 1px solid var(--lp-hairline); border-radius: var(--lp-radius-card); padding: 26px 22px 30px; }
.lp-step-icon { height: 42px; margin-bottom: 20px; }
.lp-step-icon img { height: 100%; width: auto; display: block; }
.lp-step-name { font-family: var(--hm-font-display); font-weight: 900; font-size: 19px; letter-spacing: 0.01em; text-transform: none; margin: 0; }
.lp-step-kicker { font-size: 15px; font-weight: 700; margin: 6px 0 12px; }
.lp-step p { font-size: 14px; line-height: 1.5; margin: 0; }

/* ---------- 10 choice cards ---------- */

.lp-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.lp-choice { border-radius: var(--lp-radius-card); padding: 30px 32px 34px; }
.lp-choice--paper { background: var(--lp-bg-alt); }
.lp-choice--red { background: var(--lp-red); }
.lp-choice--ink { background: var(--lp-ink); }
.lp-choice-title { font-family: var(--hm-font-display); font-weight: 900; font-size: 21px; margin: 0 0 18px; }
.lp-choice-rule { height: 1px; background: currentColor; opacity: 0.22; margin-bottom: 18px; }
.lp-choice-sub { font-size: 15px; font-weight: 700; line-height: 1.45; margin: 0 0 16px; }
.lp-choice ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.7; }

/* ---------- 11 team ----------
   Three tiles the same size with their content centred both ways; the middle
   one sits proud of the row rather than simply being larger. */

.lp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 56px; align-items: stretch; max-width: 900px; margin-inline: auto; }
/* Square-ish: the tiles are about 285 across in the 900 track, and the old
   176px floor made them read as wide letterboxes. */
.lp-tile { background: var(--lp-bg); border-radius: var(--lp-radius-card); padding: 28px 26px; aspect-ratio: 1 / 1; min-height: 176px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lp-tile--accent { background: var(--lp-red); transform: translateY(-26px); }
/* 1.1, not the body's 1.55: at 28px display type a two-line value like "Based in
   Australia" was falling apart into two separate-looking lines. */
.lp-tile-value { font-family: var(--hm-font-display); font-weight: 900; font-size: 28px; line-height: 1.1; letter-spacing: 0.01em; text-transform: none; margin: 0; }
.lp-tile-note { font-size: 14px; line-height: 1.45; margin: 10px 0 0; }

/* Three people in view, advancing one at a time. */
.lp-people-carousel { margin-top: 72px; }
.lp-people-viewport { overflow: hidden; }
.lp-people-track { display: flex; gap: 44px; transition: transform .42s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.lp-person { flex: 0 0 calc((100% - 88px) / 3); text-align: center; }
.lp-person-photo { width: 205px; margin: 0 auto 26px; }
.lp-person-photo img { width: 100%; height: auto; display: block; }
.lp-person-role { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: none; margin: 0; }
.lp-person-name { font-family: var(--hm-font-display); font-weight: 900; font-size: 26px; letter-spacing: 0.01em; text-transform: none; margin: 8px 0 14px; }
.lp-person p { font-size: 15px; line-height: 1.6; margin: 0; }

.lp-carousel-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 46px; }
.lp-round { all: unset; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--lp-hairline); border-radius: 999px; cursor: pointer; color: var(--lp-ink); transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.lp-round:hover, .lp-round:focus-visible { background: var(--lp-ink); color: var(--lp-cream); border-color: var(--lp-ink); transform: translateY(-1px); }
.lp-round[disabled] { opacity: 0.35; cursor: default; }
.lp-round[disabled]:hover { background: transparent; color: var(--lp-ink); border-color: var(--lp-hairline); transform: none; }

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

.lp-faq-grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 80px; align-items: start; }
.lp-faq-list { border-top: 1px solid var(--lp-hairline); }
.lp-faq-item { border-bottom: 1px solid var(--lp-hairline); }
.lp-faq-head { all: unset; box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; font-family: var(--hm-font-display); font-weight: 900; font-size: 21px; letter-spacing: -0.01em; color: var(--lp-ink); }
/* Slides open on a max-height transition rather than snapping with display:none,
   so this accordion behaves exactly like the site's own on /elearning/. The JS
   sets the open height; box-sizing is border-box, so max-height:0 collapses the
   padding along with the text. */
.lp-faq-body { padding: 0 0 26px; font-size: 15px; line-height: 1.6; max-width: 70ch; overflow: hidden; transition: max-height 0.24s var(--hm-ease-out); }
.lp-faq-item:not(.is-open) .lp-faq-body { max-height: 0; padding-bottom: 0; }
/* The plus rotates into a cross, the way the site's icon does. Swapping the
   glyph for a "times" character instead meant the mark changed instantly while
   the panel animated. */
.lp-faq-mark { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--lp-hairline); border-radius: 999px; font-size: 17px; line-height: 1; transition: transform 0.2s var(--hm-ease-out), background-color 0.2s var(--hm-ease-out), border-color 0.2s var(--hm-ease-out), color 0.2s var(--hm-ease-out); }
.lp-faq-item.is-open .lp-faq-mark { background: var(--lp-red); border-color: var(--lp-red); color: #fff; transform: rotate(45deg); }

/* ---------- 13 cta slab ---------- */

.lp-ctaslab { background: var(--lp-red); border-radius: var(--lp-radius-slab); padding: 72px 60px 76px; text-align: center; }
.lp-ctaslab .lp-lead { margin-inline: auto; }

/* ---------- 14 form ----------
   Deliberately thin: .hm-contact-gravity carries the field, label and submit
   styling, shared with /contact/. */

.lp-form-wrap { max-width: 800px; margin-inline: auto; }
.lp-form-wrap .lp-h2 { text-align: center; }
.lp-form-shell { margin-top: 42px; }
/* The theme's shared contact styling does not set a width, and this form's
   submit spans the field column. */
.lp-form-shell .gform_wrapper input[type="submit"].gform_button {
  width: 100% !important;
  inline-size: 100% !important;
  min-height: 52px !important;
}

/* The honeypot must stay reachable by bots but never by people. */
.lp-form-shell .gform_wrapper .gfield--type-honeypot { position: absolute !important; left: -9999px !important; }

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

.lp-footer { background: var(--lp-ink); }
.lp-footer-inner { min-height: 83px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.lp-footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.lp-footer a { text-decoration: none; opacity: 0.8; }
.lp-footer a:hover, .lp-footer a:focus-visible { opacity: 1; text-decoration: underline; }

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

@media (max-width: 1180px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr) 420px; }
  .lp-hero-art { width: 420px; }
  .lp-stat-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 52px; }
  .lp-split { gap: 48px; }
  .lp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-person { flex: 0 0 calc((100% - 44px) / 2); }
  .lp-people-track { gap: 44px; }
}

@media (max-width: 900px) {
  /* Below this the phone number and the CTA stop fitting beside the brand. */
  .lp-header-actions { display: none; }
  .lp-nav-toggle { display: inline-flex; align-items: center; }
  .lp-brand-page { max-width: 40vw; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .lp-hero-art { justify-self: start; width: 100%; max-width: 460px; }
  .lp-split, .lp-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lp-split-art { margin-top: 0; order: 3; }
  .lp-stat-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-tiers, .lp-choices, .lp-tiles { grid-template-columns: minmax(0, 1fr); }
  /* One column here, so a square tile would be as tall as the viewport is wide.
     Back to a height that suits the copy. */
  .lp-tile { aspect-ratio: auto; }
  .lp-tile--accent { transform: none; }
  .lp-includes-list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lp-callout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 32px; }
  .lp-callout-art { max-width: 200px; }
  .lp-person { flex: 0 0 100%; }
  .lp-people-track { gap: 0; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .lp-section { padding-block: 62px; }
  .lp-hero { padding-block: 56px 52px; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); }
  .lp-ctaslab { padding: 48px 24px 52px; }
  .lp-stat-card { padding: 26px; }
  .lp-brand-rule, .lp-brand-page { display: none; }
  .lp-header-inner { min-height: 64px; }
  .lp-brand-mascot { height: 32px; }
  .lp-brand-logo { height: 22px; }
  .lp-btn { padding: 0 18px; }
}