/* The U.S. section's own styles, loaded on /us/ pages only (after styles.css), so Canadian pages never change.
   Uses the tokens from styles.css: navy, gold, slate, cream. Gold is never used for text on a light background. */

/* ---------- page-wide ---------- */

/* jumps to the form are instant: smooth scrolling is unreliable in in-app browsers */
html { scroll-behavior: auto; }
/* ad pages have no sticky header, so nothing needs clearing above a jump target */
html:has(> body.lp) { scroll-padding-top: 12px; }
/* 44px tap targets on the conversion path; the breadcrumb's tap area grows without moving the layout */
.trigger-go .btn--sm, .lf-continue, .site-foot .btn--sm { min-height: 44px; }
.us .crumbs a { display: inline-block; padding: 11px 0; margin: -11px 0; }
/* /us/thanks/ steps use h2 (no heading skip) but keep the look of the shared .stage h3 */
.stage h2 { align-self: end; font-size: clamp(1.16rem, 1.6vw, 1.3rem); line-height: 1.25; letter-spacing: -0.012em; }

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

/* the contact row has three cells until a Florida address is set: share the width instead of leaving a gap */
@media (min-width: 801px) { .us .foot-contact { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* ---------- hero with the form card ---------- */

.us-hero { background: var(--cream); padding-block: clamp(18px, 4vw, 64px) clamp(36px, 5vw, 64px); }
.us-hero-grid {
  display: grid; gap: 18px 56px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "form" "proof";
}
.us-hero-copy { grid-area: copy; display: grid; gap: 12px; justify-items: start; }
.us-hero-copy .crumbs { margin-bottom: 4px; }
.us-hero-form { grid-area: form; }
.us-hero-proof { grid-area: proof; display: grid; gap: 14px; align-content: start; }
.us-hero h1 { font-size: clamp(1.7rem, 7.4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.03em; }
.us-hero .lede { font-size: clamp(1rem, 3.9vw, 1.15rem); line-height: 1.5; max-width: 52ch; }
.us-hero .kicker { font-size: 0.7rem; }
@media (min-width: 960px) {
  .us-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas: "copy form" "proof form";
    align-items: start;
  }
  .us-hero-copy { gap: 20px; padding-top: 12px; }
  .us-hero-form { position: relative; }
}
/* the optional-monthly line under the hero promise: smaller and quieter than the lede */
.us-subnote { margin-top: -4px; font-size: 0.95rem; line-height: 1.45; color: var(--slate); max-width: 52ch; }
.us-proof { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.95rem; color: var(--ink-2); }
.us-proof li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.us-proof li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--navy) var(--check-gold) center / 10px 11px no-repeat; }
.us-micro { font-size: 0.92rem; color: var(--slate); max-width: 52ch; }

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

.lf-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(16px, 4vw, 28px); color: var(--ink-2);
}
.on-navy .lf-card { color: var(--ink-2); }
.on-navy .lf-card h2, .on-navy .lf-card h3, .on-navy .lf-card strong { color: var(--ink); }
.lead-form { display: grid; gap: 16px; margin: 0; }
.lead-form[hidden] { display: none; }
/* focus rings in the white card are navy, also inside navy sections (gold on white is nearly invisible) */
.lf-card :focus-visible { outline-color: var(--navy); }
.lf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; }
.lf-title { margin: 0; font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.lf-count { margin: 0; font-size: 0.82rem; color: var(--slate); }
.lf-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--stone); overflow: hidden; }
.lf-bar i { display: block; height: 100%; width: 25%; background: var(--navy); border-radius: 4px; transition: width 0.25s ease; }
.lead-form:not(.is-js) .lf-bar { display: none; }

.lf-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; }
.lf-step > legend { padding: 0; margin: 0 0 12px; font-family: var(--ff-display); font-size: clamp(1.14rem, 4.6vw, 1.35rem); font-weight: 600; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; }
.lead-form.is-js .lf-step:not(.is-current) { display: none; }
.lead-form.is-js .lf-step.is-current > legend:focus { outline: none; }

.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chips--1 { grid-template-columns: minmax(0, 1fr); }
.chips--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip-opt { position: relative; display: block; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-opt span {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; text-align: center;
  min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 12px;
  font-weight: 600; font-size: 1rem; color: var(--ink); background: var(--white);
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.chips--1 .chip-opt span { justify-content: flex-start; text-align: left; }
.chip-opt small { font-weight: 500; color: var(--slate); font-size: 0.86rem; }
.chip-opt:hover span { border-color: var(--navy); }
.chip-opt input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 2px; }
.chip-opt input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip-opt input:checked + span small { color: var(--on-navy); }
.chip-opt input:checked + span::before { content: ""; flex: none; width: 14px; height: 15px; background: var(--check-gold) center / contain no-repeat; }
.chip-opt--sm span { min-height: 48px; padding: 8px 6px; font-size: 0.92rem; }
/* three across: "Not sure" stays on one line at 360px (the navy fill already shows the pick) */
.chips--3 .chip-opt span { padding-inline: 6px; }
@media (max-width: 380px) { .chips--3 .chip-opt input:checked + span::before { display: none; } }

.lf-exit { display: grid; gap: 10px; padding: 14px 16px; border-left: 4px solid var(--navy); background: var(--cream); border-radius: 0 10px 10px 0; font-size: 0.95rem; }
.lf-exit[hidden] { display: none; }
.lf-link { justify-self: start; min-height: 44px; padding: 10px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }

.lf-field { display: grid; gap: 6px; }
.lf-field label, .lf-sub > legend { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.lf-sub { border: 0; margin: 0; padding: 0; min-width: 0; }
.lf-sub > legend { padding: 0; margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--slate); }
.lf-field label .opt, .lf-sub > legend .opt { font-size: 0.86rem; }
/* the contact step is the longest: keep the submit button as close to the first screen as the copy allows */
.lf-step[data-step="4"] { gap: 10px; }
.lf-field input, .lf-field select {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: 10px;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--white);
}
.lf-field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231C2436' stroke-width='2'/%3E%3C/svg%3E") right 14px center / 12px 8px no-repeat; }
.lf-field input:focus, .lf-field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(255, 220, 0, 0.55); }
.lf-field input[aria-invalid="true"] { border-color: var(--red); }
.lf-note { font-size: 0.88rem; color: var(--slate); }
.lf-err { font-size: 0.88rem; font-weight: 600; color: var(--red); }
.lf-err[hidden], .lf-continue[hidden], [data-deadline][hidden] { display: none; }
.lf-continue { justify-self: start; }
/* email and best time wait behind a small button (they show without JavaScript) */
.lf-more { font-size: 0.92rem; text-align: left; padding-block: 8px; }
.lf-more[hidden], .lf-more-fields[hidden] { display: none; }
.lf-more-fields { display: grid; gap: 10px; }
.lf-consent-lead { margin: 2px 0 -4px; font-size: 0.92rem; color: var(--ink-2); }
.lf-consent-lead b { color: var(--ink); font-weight: 600; }
.lf-consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 0.8rem; line-height: 1.35; color: var(--slate); cursor: pointer; }
.lf-consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.lf-privacy { font-size: 0.84rem; margin-top: -8px; }
.lf-privacy + .lf-submit { margin-top: -4px; }
.lf-privacy a { display: inline-block; padding: 12px 0; color: var(--navy); font-weight: 600; }
.lf-submit { width: 100%; }
.lf-small { font-size: 0.86rem; color: var(--slate); }
.lf-nav[hidden] { display: none; }
.lf-nav { margin-top: -4px; }
.lead-form.is-sending .lf-submit { opacity: 0.7; pointer-events: none; }

.lf-done { display: grid; gap: 14px; outline: none; }
.lf-done[hidden] { display: none; }
.lf-done-h { font-family: var(--ff-display); font-size: clamp(1.4rem, 5vw, 1.8rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.lf-next { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.lf-next li::marker { font-weight: 700; color: var(--navy); }
.lf-cal { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.lf-cal iframe { width: 100%; min-height: 800px; border: 0; }
@media (min-width: 700px) { .lf-cal iframe { min-height: 700px; } }

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

.us-proofstrip { background: var(--white); border-bottom: 1px solid var(--line); padding-block: clamp(28px, 4vw, 44px); }
.us-proof-grid { display: grid; gap: 20px 48px; align-items: center; }
@media (min-width: 900px) { .us-proof-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.quote { margin: 0; display: grid; gap: 10px; }
.quote blockquote { margin: 0; padding-left: 16px; border-left: 3px solid var(--gold-deep); }
.quote blockquote p { font-family: var(--ff-display); font-size: clamp(1.08rem, 2vw, 1.3rem); line-height: 1.4; color: var(--ink); }
.quote blockquote p::before { content: "\201C"; }
.quote blockquote p::after { content: "\201D"; }
.quote figcaption { display: grid; gap: 2px; padding-left: 19px; font-size: 0.86rem; color: var(--slate); }
.quote figcaption b { color: var(--ink); font-weight: 600; }
.us-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; font-size: 0.9rem; color: var(--ink-2); }
.us-facts li { padding-left: 12px; border-left: 2px solid var(--gold-deep); }
.us-extra-band { background: var(--white); padding-bottom: clamp(24px, 4vw, 40px); }
/* ad pages: who signs and what it costs, right under the review */
.us-sum { background: var(--white); padding-top: clamp(20px, 4vw, 36px); }
.us-sum:not(:has(+ .us-extra-band)) { padding-bottom: clamp(20px, 4vw, 36px); }
.us-sum + .us-extra-band { padding-top: 12px; }
.us-sum-grid { display: grid; gap: 12px; }
@media (min-width: 760px) { .us-sum-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; align-items: start; } }
.us-sum-card { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: 12px; background: var(--cream); }
.us-sum-card--price { background: var(--stone); }
.us-sum-card > p:not(.plan-k) { font-size: 0.95rem; }
.us-sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--ff-display); font-size: 1.02rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.us-sum-list li { position: relative; padding-left: 16px; }
.us-sum-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--navy); }
.us-sum-card > p.us-sum-fine { font-size: 0.86rem; color: var(--slate); }
.us-extra { max-width: 70ch; padding: 16px 20px; border-left: 4px solid var(--navy); background: var(--cream); border-radius: 0 10px 10px 0; }

/* ---------- at a glance ---------- */

.us-glance { display: grid; gap: 14px; max-width: 78ch; }
.us-glance h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.us-glance p { font-size: 1.04rem; }

/* ---------- is this you? ---------- */

.triggers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .triggers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1080px) { .triggers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trigger { display: grid; gap: 14px; align-content: space-between; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.trigger h3 { font-size: 1.08rem; line-height: 1.35; }
.trigger-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.trigger-go .textlink { font-size: 0.9rem; }
.triggers[data-first="s-corp"] [data-key="s-corp"], .triggers[data-first="notice"] [data-key="notice"],
.triggers[data-first="sunbiz"] [data-key="sunbiz"], .triggers[data-first="lender"] [data-key="lender"],
.triggers[data-first="sales-tax"] [data-key="sales-tax"], .triggers[data-first="books"] [data-key="books"] { order: -1; }
.trigger.is-picked { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.us-shame { margin-top: 22px; font-size: 1.02rem; max-width: 66ch; }

/* ---------- what a catch-up includes ---------- */

.us-asapply { margin-bottom: 16px; font-weight: 600; color: var(--ink); }
.us-notinc { margin-top: 28px; max-width: 80ch; font-size: 0.95rem; }
/* included per year (navy ticks) beside what's added to the same quote (outlined plus signs) */
.inc-grid { display: grid; gap: 16px; }
@media (min-width: 860px) { .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.inc-col { display: grid; gap: 14px; align-content: start; padding: clamp(18px, 4vw, 26px); border-radius: 12px; background: var(--white); border: 1px solid var(--line); }
.inc-col h3 { font-size: 1.08rem; line-height: 1.3; }
.inc-col .checks { gap: 10px; font-size: 0.95rem; }
.inc-col--added { background: transparent; border-style: dashed; border-color: var(--line-2); }
.checks--plus li::before { display: grid; place-items: center; content: "+"; box-sizing: border-box; background: var(--white); border: 1.5px solid var(--navy); color: var(--navy); font-weight: 700; font-size: 15px; line-height: 1; }
.inc-note { font-size: 0.92rem; color: var(--ink-2); }

/* ---------- the plan card ---------- */

.plan { display: grid; gap: 22px; padding: clamp(20px, 4vw, 40px); border: 2px solid var(--navy); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.plan-steps { display: grid; gap: 22px; }
@media (min-width: 760px) { .plan-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
.plan-step { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 12px; background: var(--cream); }
.plan-step--2 { background: var(--stone); }
.plan-k { font-family: var(--ff-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.plan-big { font-family: var(--ff-display); font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
.plan-big small { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--slate); }
.plan-promise { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 600; color: var(--ink); }
.plan-promise li { display: flex; align-items: center; gap: 8px; }
.plan-promise li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--navy) var(--check-gold) center / 9px 10px no-repeat; }
.plan-fine { font-size: 0.88rem; color: var(--slate); max-width: 90ch; }
/* payment, timing and exclusions: one tap away, so the card stays short on a phone */
.plan-details-sum { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 0.92rem; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.plan-details-sum::-webkit-details-marker { display: none; }
.plan-details-sum::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(45deg); }
.plan-details[open] > .plan-details-sum::after { margin-top: 3px; transform: rotate(-135deg); }
.plan-details .plan-fine { margin-top: 8px; }
.plan-step .plan-big small { display: inline-block; }
/* nested padding (card + step) leaves too narrow a column on a phone */
@media (max-width: 600px) { .plan { padding: 12px; gap: 18px; } .plan-step { padding: 18px 16px; } .plan > :not(.plan-steps) { margin-inline: 16px; } }
.plan-lead { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.plan-list { gap: 8px; font-size: 0.95rem; }
.plan-note { font-size: 0.92rem; color: var(--ink-2); }
.plan-note .textlink { display: inline; line-height: 1.9; }

/* ---------- generated pricing: {{uspricing:table}} and {{uspricing:plans}} ---------- */

/* the starting guide: two columns that fit 320px (band labels wrap at spaces and dashes; a price never breaks),
   the price column right-aligned and set in the display face, the caption styled as a lede above the table */
.price-guide { max-width: 680px; }
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.98rem; }
.price-table caption { caption-side: top; text-align: left; padding: 0 0 14px; font-size: clamp(1rem, 3.6vw, 1.08rem); line-height: 1.5; color: var(--ink-2); }
.price-table th, .price-table td { padding: 12px clamp(12px, 3vw, 20px); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); background: var(--white); }
.price-table thead th:first-child { width: 62%; }
.price-table thead th { background: var(--stone); font-family: var(--ff-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1.4; text-transform: uppercase; color: var(--slate); border-top: 1px solid var(--line); }
.price-table tr > :first-child { border-left: 1px solid var(--line); }
.price-table tr > :last-child { border-right: 1px solid var(--line); }
.price-table thead th:first-child { border-top-left-radius: 12px; }
.price-table thead th:last-child { border-top-right-radius: 12px; }
.price-table tbody tr:last-child > :first-child { border-bottom-left-radius: 12px; }
.price-table tbody tr:last-child > :last-child { border-bottom-right-radius: 12px; }
.price-table thead th:last-child, .price-table td { text-align: right; }
.price-table tbody th { font-weight: 500; color: var(--ink-2); overflow-wrap: break-word; }
.price-table td { font-family: var(--ff-display); font-size: clamp(1rem, 3.8vw, 1.12rem); font-weight: 700; color: var(--ink); }
.price-table tbody tr:nth-child(even) > * { background: var(--cream); }

/* the monthly plans: stacked on phones, three across from 900px */
.plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.plan-card { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 4vw, 28px); border: 1px solid var(--line); border-top: 4px solid var(--navy); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.plan-card .plan-k { color: var(--navy); font-weight: 600; }
.plan-card .plan-big { font-size: clamp(1.8rem, 5.4vw, 2.2rem); }
.plan-card .checks { gap: 10px; font-size: 0.95rem; }

/* ---------- what waiting costs ---------- */

.wait { display: grid; gap: 14px; }
@media (min-width: 800px) { .wait { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wait-row, .wait-example { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); }
.wait-row h3 { font-size: 1.06rem; }
.wait-row p { font-size: 0.95rem; }
.wait-example { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.wait-example .plan-k { color: var(--gold); }
.wait-sum { font-family: var(--ff-display); font-size: clamp(1.15rem, 3vw, 1.4rem); font-weight: 600; color: var(--white); }
.wait-sum b { color: var(--gold); font-weight: 700; }
.wait[data-first="c-corp"] [data-key="c-corp"], .wait[data-first="sales-tax"] [data-key="sales-tax"], .wait[data-first="sunbiz"] [data-key="sunbiz"] { order: -1; }
.wait-key { margin-top: 24px; font-size: 1.02rem; max-width: 72ch; }
/* ad pages show the penalty that fits the ad; "Show every penalty" brings back the rest (all of it shows without JS) */
.wait.is-collapsed > .is-off { display: none; }
.wait-more { margin-top: 10px; }
.wait-src { margin: 14px 0 22px; font-size: 0.84rem; color: var(--slate); max-width: 90ch; }
.wait-src a { color: var(--navy); }

/* ---------- who does what ---------- */

.who-grid { display: grid; gap: 16px; }
@media (min-width: 800px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.who { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); }
.who-rep { margin: 20px 0 36px; max-width: 80ch; padding: 16px 20px; border-left: 4px solid var(--gold-deep); background: var(--white); border-radius: 0 10px 10px 0; }
/* the link under the representation note belongs to it, with room before the next block */
.who-link { margin: -16px 0 36px; }
.who-grid--plain > div { display: grid; gap: 12px; align-content: start; }

/* ---------- closing call to action with the form ---------- */

.cta-form-grid { display: grid; gap: 32px 64px; align-items: start; }
@media (min-width: 960px) { .cta-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cta--form .checks li { color: var(--on-navy); }
.cta--form a:not(.btn) { color: var(--white); }
.cta--form .lf-card a:not(.btn) { color: var(--navy); }

/* ---------- ad pages (layout: lp) ---------- */

.lp .site-head { position: static; }
.lp-head .head-row { min-height: 56px; }
.lp-head .brand img { height: 40px; width: auto; }
.lp-pill { margin-left: auto; padding: 5px 12px; border-radius: 999px; background: var(--navy); color: var(--white); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.lp-call { display: inline-flex; }
.lp-final-in { display: grid; gap: 20px; justify-items: start; max-width: 60ch; }
.lp-final a:not(.btn) { color: var(--white); }
.lp-foot { background: var(--navy); color: var(--on-navy); padding-block: 28px 36px; font-size: 0.82rem; border-top: 1px solid var(--on-navy-2); }
.lp-foot .wrap { display: grid; gap: 10px; }
.lp-foot a { display: inline-block; padding: 12px 0; color: var(--white); }
.lp .trigger { padding: 14px 16px; gap: 10px; }
.lp .trigger h3 { font-size: 1rem; }

/* ---------- phone action bar ---------- */

@media (max-width: 760px) {
  .mobile-bar--us { grid-template-columns: minmax(0, 1fr); }
  .mobile-bar--us.mobile-bar--2 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .mobile-bar--us.mobile-bar--3 { grid-template-columns: minmax(0, 0.7fr) minmax(0, 0.7fr) minmax(0, 1.6fr); }
  .mobile-bar.is-hidden-us { transform: translateY(110%); }
}

@media (prefers-reduced-motion: reduce) {
  .lf-bar i, .chip-opt span, .mobile-bar { transition: none; }
}

/* "Full guide" links at the end of a money-page section */
.guide-link { margin-top: 20px; }

/* the U.S. menu has six items: tighten it between the phone menu (1100px) and wide screens */
@media (min-width: 1101px) and (max-width: 1199px) { .us .nav > a { padding-inline: 8px; font-size: 0.9rem; } .us .head-row { gap: 14px; } }
.us .post-meta { align-items: baseline; }

/* the team on U.S. pages: a face row beside the review on ad pages, and in the closing call to action */
.us-proof-side { display: grid; gap: 18px; }
.us-team { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.us-team p { margin: 0; flex: 1 1 180px; font-size: 0.9rem; color: var(--ink-2); }
.us-proofstrip .face { --ring: var(--white); }
.cta-team { display: grid; gap: 12px; justify-items: start; }
/* /us/about/: two compact cards across on phones, so eleven people don't push the reviews and form 5,000px down */
@media (max-width: 560px) {
  #team .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #team .member-body { padding: 12px 12px 16px; gap: 4px; }
  #team .member-name { font-size: 1rem; }
}
/* a person reached from the /us/ roll is outlined */
.member:target { box-shadow: 0 0 0 3px var(--navy), var(--shadow); }
/* /us/ roll: everyone in view on desktop (it scrolls sideways only on phones), and a scrollbar that suits the navy */
.on-navy .roll { scrollbar-color: var(--on-navy-2) transparent; }
@media (min-width: 900px) { #team .roll { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); overflow: visible; row-gap: 24px; } }