/* ==========================================================================
   THEME CORRECTIONS
   --------------------------------------------------------------------------
   Two jobs:

   1. Replace the inline style="" attributes the original markup carried.
      Each rule below is annotated with the declaration it replaces so the
      visual comparison can be checked against the original.

   2. Support the markup corrections made during conversion — chiefly the
      lists that were invalid HTML and are now real <ol>/<ul> elements.

   Nothing here introduces new design. If a rule changes how the page looks,
   it is a bug.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · REPLACES INLINE STYLES
   -------------------------------------------------------------------------- */

/* was: <div class="section-label" style="justify-content:center;"> */
.section-label-center {
  justify-content: center;
}

/* was: <div style="margin-top:28px;"> wrapping the solution CTA */
.sol-cta {
  margin-top: 28px;
}

/* was: <p style="margin:12px auto 0; text-align:center; max-width:58ch;"> */
.cta-body {
  margin: 12px auto 0;
  text-align: center;
  max-width: 58ch;
}

.cta-body p {
  margin: 0 0 1em;
}

.cta-body p:last-child {
  margin-bottom: 0;
}

/* was: <p class="fine-print" style="text-align:center;"> */
.fine-print {
  text-align: center;
}

/* was: <a style="color:inherit;"> in the footer */
.footer-mail {
  color: inherit;
}

/* was: two <br> tags before the hero's secondary link */
.hero-aside-link {
  margin-top: 24px;
}

/* was: a trailing <br> after the target-fit block */
.target-fit-note {
  margin-top: 12px;
}


/* --------------------------------------------------------------------------
   2 · SUPPORTS MARKUP CORRECTIONS

   The original nested <div> and <p> as direct children of <ul>, which is
   invalid HTML. Those lists are now proper list elements. The numbers that
   were typed into the copy ("1. Structure…") are gone — an <ol> carries the
   sequence, so reordering in the admin renumbers automatically.

   These rules restore the original appearance now that real list semantics
   are in place.
   -------------------------------------------------------------------------- */

.target-fit-list {
  list-style: none;
  counter-reset: fit;
  margin: 0;
  padding: 0;
}

.target-fit-list > li {
  counter-increment: fit;
  position: relative;
  padding-left: 1.4em;
}

.target-fit-list > li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--accent-1);
}

/* .steps-grid is an <ol> now; it was a <div> */
.steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.steps-grid > .step-item {
  list-style: none;
}

/* The source had <div class="hero-logo"> inside the <h1> — a block element
   inside a heading, which is invalid. It is a <span> here, so it needs the
   block display back or the headline wraps differently from the original. */
.hero-logo {
  display: block;
  margin-bottom: 18px;
}

/* wrapper introduced around the solution text column, which was a bare <div> */
.sol-text {
  display: block;
}


/* --------------------------------------------------------------------------
   3 · ACCESSIBILITY

   The quality floor: a skip link, visible keyboard focus, and honouring a
   reduced-motion preference. The original site animates continuously (the
   node graph, the scan line), which is exactly what that preference exists
   to switch off.
   -------------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed !important;
  top: 8px;
  left: 8px;
  z-index: 10000;
  width: auto;
  height: auto;
  clip: auto;
  padding: 10px 16px;
  background: var(--accent-1);
  color: var(--pure-white);
  text-decoration: none;
  border-radius: 4px;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scan-line,
  .nodes-canvas .nd,
  .nodes-canvas .nl {
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   4 · WORDPRESS OUTPUT

   Classes WordPress emits that the original static site never had.
   -------------------------------------------------------------------------- */

.entry-content > * + * {
  margin-top: 1.2em;
}

.entry-content img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

.alignleft  { float: left;  margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 40px;
}

.pagination .page-numbers {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  text-decoration: none;
  color: var(--neutral-mid);
}

.pagination .page-numbers.current {
  background: var(--accent-1);
  color: var(--pure-white);
  border-color: var(--accent-1);
}

/* admin bar offset, so it does not cover the fixed nav for logged-in users */
.admin-bar nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar nav {
    top: 46px;
  }
}

/* --------------------------------------------------------------------------
   5 · FOOTER LOGO

   Replaces style="pointer-events:none;" that was inline on the footer logo.
   The footer logo is decorative — it repeats the site name already present
   as text — so it should not intercept pointer events from sibling links.
   -------------------------------------------------------------------------- */

.footer-inner .nav-logo {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6 · NATIVE SELECT OPTIONS

   The open <option> list is drawn by the operating system, not the page.
   Chrome and Firefox on Windows honour these declarations; Safari and macOS
   ignore them. A partial fix by nature — the alternative is replacing the
   select with a custom widget, which is more code than the problem warrants.
   -------------------------------------------------------------------------- */

.roi-currency-select option {
  background: var(--bg-card);
  color: var(--neutral-light);
}

/* --------------------------------------------------------------------------
   7 · MOUSE SPOTLIGHT

   Disabled at the client's request. This is an original design effect with
   its own opacity transition and per-theme colour tokens, not a migration
   artefact — it appeared unfamiliar only because a JavaScript error
   (an undefined `matrix` reference in script.js) stopped the script from
   ever reaching it on production.

   Delete this rule to restore the intended behaviour.
   -------------------------------------------------------------------------- */

.spotlight { display: none !important; }

/* --------------------------------------------------------------------------
   8 · FORM SUBMISSION NOTICES

   The PHP handlers redirect back with ?status=... after a submission. Until
   now nothing displayed it, so a visitor who missed a required field saw the
   form reload with no explanation and their answers gone.

   Colours come from the status tokens rather than literals, so these follow
   the theme through all three colour modes.
   -------------------------------------------------------------------------- */

.form-notice {
  max-width: var(--max-w);
  margin: 0 auto 28px;
  padding: 16px 20px;
  border-radius: 6px;
  border: 1px solid var(--border);
  outline: none;
}

.form-notice-heading {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.form-notice-body {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--neutral-dim);
}

.form-notice-success {
  background: var(--status-success-bg);
  border-color: var(--status-success);
}

.form-notice-success .form-notice-heading {
  color: var(--status-success);
}

.form-notice-error {
  background: var(--status-error-bg);
  border-color: var(--status-error);
}

.form-notice-error .form-notice-heading {
  color: var(--status-error);
}

/* Focus lands here after a redirect; make that visible for keyboard users. */
.form-notice:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9 · SUPPRESS THE STATUS TOAST

   script.js builds a floating .toast for form results. It is hidden here in
   favour of the notice inc/form-status.php renders at the top of the content,
   for two reasons:

   The surveys are long. Someone submitting from the foot of the form is
   returned to the top of the page, where a toast near the bottom of the
   viewport is easy to miss entirely.

   The toast also claims "confirmation email was sent", which the server
   cannot currently honour — outbound mail has been failing since July. The
   replacement notice says only what is verifiable.

   Hidden rather than removed from script.js because install.sh copies that
   file from the live site on every deploy; an edit there would not survive.
   -------------------------------------------------------------------------- */

.toast {
  display: none !important;
}

/* --------------------------------------------------------------------------
   10 · SURVEY FORM CONTROLS

   The COMMON survey was built standalone. Its markup now uses the site's
   classes, but a few must keep their original names because
   page-common2026-survey.js queries them — querySelectorAll('.opt') and
   sixteen element IDs. Renaming those breaks badge capture and step
   navigation, so they are restyled here instead.

   Input styling is repeated rather than reused: .form-block input carries
   the right appearance but .form-block also sets max-width: 420px, which
   would squeeze a full-width survey. The declarations below match lines
   125-141 of style.css exactly — if those change, change these too.
   -------------------------------------------------------------------------- */

#survey-form input[type="text"],
#survey-form input[type="email"],
#survey-form input[type="tel"],
#survey-form textarea {
  width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
  color: var(--neutral-light);
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.8rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

#survey-form input::placeholder,
#survey-form textarea::placeholder {
  color: var(--neutral-dim);
}

#survey-form input:focus,
#survey-form textarea:focus {
  border-color: rgba(198, 90, 47, 0.5);
  background: var(--surface-input-focus);
}

/* The file input is triggered by the button; it should never be visible. */
#badge-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Hidden until the script populates them, so they do not render as an empty
   bar or a broken-image icon on load. */
#error-banner:empty,
#q6-notice:empty {
  display: none;
}

#photo-preview[hidden],
#photo-preview:not([style*="block"]) img[src=""] {
  display: none;
}

#photo-img {
  max-width: 260px;
  border-radius: 4px;
  border: 1px solid var(--border);
  margin: 10px 0 0;
}

#photo-status {
  display: block;
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--neutral-dim);
}

.survey-logo {
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--accent-1);
}

.form-field {
  margin: 0 0 18px;
}

.form-field label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--neutral-mid);
}

.field-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--neutral-dim);
}

.opt-group {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

/* Selectable row. Keeps its class name for the script. */
.opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.opt:hover,
.opt:has(input:checked) {
  border-color: rgba(198, 90, 47, 0.5);
  background: var(--surface-input-focus);
}

.opt input {
  flex: none;
  accent-color: var(--accent-1);
}

#error-banner,
#q6-notice {
  padding: 11px 16px;
  border-radius: 4px;
  background: var(--status-error-bg);
  border: 1px solid var(--status-error);
  color: var(--status-error);
  font-size: 0.8rem;
}

#success-screen {
  padding: 40px 24px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   11 · MOBILE NAVIGATION

   style.css hides .nav-links below the mobile breakpoint and nothing ever
   replaced it — on a phone the site had a logo, a theme toggle and no way to
   reach any other page. This is the missing control.

   The breakpoint below must match the one hiding .nav-links in style.css (line 1935, max-width 600px).
   If that changes, change this too.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: none;                      /* desktop: the links are visible */
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 32px;
  padding: 0 9px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  height: 1.5px;
  background: var(--neutral-light);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* Open state: the bars become a cross. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent-1);
  outline-offset: 2px;
}

@media (max-width: 1000px) {
  .nav-toggle {
    display: flex;
  }

  /* Overrides `.nav-links { display: none }` in style.css when opened.
     The panel drops below the nav bar rather than covering it, so the
     logo and theme toggle stay reachable. */
  .nav-links-open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  .nav-links-open > li {
    width: 100%;
  }

  .nav-links-open > li > a {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid var(--border);
  }

  .nav-links-open > li:last-child > a {
    border-bottom: none;
  }

  /* The CTAs keep their button treatment, full width in the stack. */
  .nav-links-open > li > a.nav-cta,
  .nav-links-open > li > a.nav-login,
  .nav-links-open > li > a.nav-signup-link {
    margin: 8px 0 0;
    text-align: center;
    border-bottom: none;
  }

  /* .nav-inner is the positioning context for the dropped panel. */
  nav .nav-inner {
    position: relative;
  }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .nav-toggle-bar {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   12 · HERO DESCRIPTION SPACING

   The source put three paragraphs inside one <p> separated by <br><br>, and
   opened with a single <br>. The gaps came from those breaks, not from CSS —
   so .hero-desc styles the container and nothing inside it.

   They are real paragraphs now, which is the correct markup, and they need
   the spacing the breaks used to provide.
   -------------------------------------------------------------------------- */

.hero-desc {
  padding-top: 0.9em;
}

.hero-desc p {
  margin: 0;
}

.hero-desc p + p {
  margin-top: 1.1em;
}

/* --------------------------------------------------------------------------
   13 · TRANSITION SECTION LEAD

   Replaces style="margin:12px auto 0; text-align:center; max-width:46ch;"
   that was inline on this paragraph in the source.
   -------------------------------------------------------------------------- */

.flow-lead {
  margin: 12px auto 0;
  text-align: center;
  max-width: 46ch;
}

/* Five nodes and four arrows overflow at most widths, dropping the last node
   onto a second row with an arrow pointing at nothing. Wrapping is fine — the
   dangling arrow is not — so the arrows are hidden once the row breaks and
   the nodes are given room to sit evenly.

   The live site has the same overflow. This is a fix, not a match. */
@media (max-width: 1100px) {
  .flow-diagram {
    gap: 10px;
    row-gap: 14px;
  }

  .flow-diagram .farrow {
    display: none;
  }
}

/* Keeps the flow on one line by shrinking the nodes rather than wrapping. */
@media (max-width: 1300px) {
  .flow-diagram .fn { padding: 10px 12px; min-width: 0; }
  .flow-diagram .fn-lbl { font-size: 0.56rem; }
  .flow-diagram .fn-name { font-size: 0.72rem; }
  .flow-diagram .farrow { width: 20px; display: block; }
}

/* --------------------------------------------------------------------------
   FLOW DIAGRAM

   Five nodes plus four arrows exceed the 1200px container at every width, so
   the last node drops to a second row leaving an arrow pointing at nothing.
   Shrinking the nodes and arrows keeps the sequence on one line, which is
   the whole point of a flow.

   The live site has the same overflow — this is a fix, not a match.
   -------------------------------------------------------------------------- */

.flow-diagram .fn {
  min-width: 0;
  padding: 11px 13px;
}

.flow-diagram .fn-name {
  font-size: 0.76rem;
}

.flow-diagram .farrow {
  width: 24px;
}

/* Below this the boxes cannot stay readable in one row, so wrapping is
   correct — but the arrows stop making sense, so they go. */
@media (max-width: 900px) {
  .flow-diagram {
    gap: 10px;
    row-gap: 14px;
  }

  .flow-diagram .farrow {
    display: none;
  }
}

/* Wrapping is acceptable; overflowing to the right is not. */
.flow-diagram {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 14px;
}

/* Left-aligns the transition heading to match the other sections. The live
   site centres it — a deliberate change, not a match. */
/*.flow-wrap {
  text-align: left;
}*/


/* --------------------------------------------------------------------------
   CENTRED SECTIONS

   Four sections centre their eyebrow label in the source, and their heading
   and lead follow suit. Only the label carried across in conversion.
   -------------------------------------------------------------------------- */

/*  */

#integrations > .container > p,
#how-it-works > .container > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
}

/* Four sections centre their eyebrow label in the source, and their heading
   and lead follow suit. Only the label carried across in conversion. */
#integrations > .container,
#how-it-works > .container,
#closing-cta .cta-inner {
  text-align: center;
}

#integrations > .container > p,
#how-it-works > .container > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
}

/* Four sections centre their eyebrow label in the source, and their heading
   and lead follow suit. Only the label carried across in conversion. */
#integrations > .container,
#how-it-works > .container,
#closing-cta .cta-inner {
  text-align: center;
}

#integrations > .container > p,
#how-it-works > .container > p {
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
}

/* Widens the transition lead. The source caps it at 46ch. */
.flow-lead {
  max-width: 60ch;
}


/* .uc-card is a two-column grid — 42px for the number, the rest for content.
   card-grid.php renders the kicker, heading and body as three siblings, so
   the body lands in the 42px column and wraps one word per line. */
.uc-card p {
  grid-column: 2;
}

/* style.css hides .nav-links only below 600px, but the six items and three
   buttons stop fitting around 1000px — leaving a band where the nav wraps and
  .nav-toggle {
    display: flex;
  }
}

/* The open-panel styling lived in the 600px query while the toggle now
   appears at 1200px, so between those widths the links unhid with no
   positioning and overlapped the header. */
@media (max-width: 1200px) {
  .nav-links-open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    background: var(--nav-bg);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
  }

  .nav-links-open > li { width: 100%; }

  .nav-links-open > li > a {
    display: block;
    padding: 13px 4px;
    border-bottom: 1px solid var(--border);
  }

  .nav-links-open > li:last-child > a { border-bottom: none; }

  .nav-links-open > li > a.nav-cta,
  .nav-links-open > li > a.nav-login,
  .nav-links-open > li > a.nav-signup-link {
    margin: 8px 0 0;
    text-align: center;
    border-bottom: none;
  }

  nav .nav-inner { position: relative; }
}

/* --------------------------------------------------------------------------
   17 · QUICK SURVEY

   That page carried its own stylesheet; ten of its thirteen survey classes
   were already in style.css, so only these three needed bringing across.
   Copied from the original, which already used the site's tokens.
   -------------------------------------------------------------------------- */

.survey-question {
  font-size: clamp(1.12rem, 1.8vw, 1.35rem);
  line-height: 1.35;
}

.survey-section-time {
  margin: 0;
  font-size: 0.74rem;
  color: var(--neutral-mid);
  letter-spacing: 0.02em;
}

/* Numbered badge on ranked options. The script adds .show as they are picked. */
.rank-badge {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
  color: var(--pure-white);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.62rem;
  font-weight: 800;
}

.rank-badge.show {
  display: inline-flex;
}

/* The page's own slim header. Redundant now the site nav renders above it,
   so it is hidden rather than styled — remove this rule to restore it. */
.survey-topbar {
  display: none;
}

/* Seven links and three buttons need more room than the earlier breakpoint
   allowed. Below this the hamburger takes over. */

/* Seven links and three buttons need more room than earlier breakpoints
   allowed. Below this the hamburger takes over. */

/* Seven links and three buttons need more room than earlier breakpoints
   allowed. Below this the hamburger takes over. */

/* The nav holds seven links and three buttons in a monospace stack, and
   starts wrapping at about 1570px. Below this the hamburger takes over.

   That is a wide breakpoint — most laptops will see the menu button rather
   than the full nav. Removing an item, or moving "Log in to SOFEEI-EYE" to
   the footer, would let this drop to around 1100px. */
@media (max-width: 1100px) {
  .nav-links:not(.nav-links-open) { display: none; }
  .nav-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   NAV DENSITY

   Seven links, three buttons and the mode toggle overflow the 1200px
   container at every practical width. Rather than hiding items behind a
   hamburger on desktop, the nav is tightened: smaller gaps, less button
   padding, and no wrapping inside an item.
   -------------------------------------------------------------------------- */

.nav-links {
  gap: 16px;
  flex-wrap: nowrap;
}

.nav-links > li > a {
  white-space: nowrap;
  font-size: 0.72rem;
}

.nav-links .nav-cta,
.nav-links .nav-login,
.nav-links .nav-signup-link {
  padding: 6px 11px;
  white-space: nowrap;
}

.nav-inner {
  gap: 18px;
}

.theme-toggle {
  white-space: nowrap;
  flex-shrink: 0;
}

.nav-logo {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   NAV DROPDOWNS

   The source nav is flat, so style.css has no submenu rules. Opens on hover
   and on keyboard focus — hover alone leaves the submenu unreachable without
   a mouse. In the mobile panel it renders inline, since hover is no use on a
   touch screen.
   -------------------------------------------------------------------------- */

.nav-links li { position: relative; }

.nav-links .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 200;
}

.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-links .sub-menu a {
  display: block;
  padding: 9px 16px;
  white-space: nowrap;
}

.nav-links .sub-menu a:hover {
  background: var(--surface-input-focus);
}

.nav-links .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 6px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}

@media (max-width: 1100px) {
  .nav-links-open .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 0 0 0 14px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }

  .nav-links-open .sub-menu a {
    padding: 11px 4px;
    border-bottom: 1px solid var(--border);
  }
}

/* The source separated the "Best fit" paragraph from the list heading with
   markup that did not survive conversion. */
.target-fit p + .target-fit-title {
  margin-top: 14px;
}

/* The lead paragraph sits between the heading and the steps grid, which the
   source did not have — .steps-grid's own top margin was sized without it. */
#how-it-works > .container > p {
  margin-bottom: 8px;
}

/* The lead paragraph sits between the heading and the steps grid — the
   source had no lead there, so .steps-grid's top margin was sized without
   one, and adjacent margins collapse. */
#how-it-works > .container > p {
  margin-bottom: 0;
}

#how-it-works .steps-grid {
  margin-top: 52px;
}

/* The benefit cards use an emoji in .b-icon; card-grid.php renders the
   kicker as .card-kicker, so it needs the same boxed treatment. */
.benefit-card .card-kicker {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(198, 90, 47, 0.38);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

/* The source uses .uc-num for the card number and wraps the heading and body
   in a div, giving a clean two-column grid. card-grid.php renders three
   siblings with the number as .card-kicker, so the number takes .uc-num's
   styling and the heading and body are placed into the second column. */
.uc-card .card-kicker {
  grid-row: 1;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: rgba(198, 90, 47, 0.22);
  line-height: 1;
  margin: 0;
}

.uc-card h3 {
  grid-column: 2;
  grid-row: 1;
}

.uc-card p {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
}

.uc-card h3 {
  margin-bottom: 0;
}

/* The card grid's 14px gap applies between rows too, where the source had
   only the heading's 6px bottom margin. */
.uc-card {
  row-gap: 6px;
}

/* The persona cards label the role with .p-role; card-grid.php renders the
   kicker as .card-kicker. Values copied from style.css lines 949-953. */
.persona-card .card-kicker {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--accent-1);
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* survey-summary.php has no logout form, so .nav-inner's space-between
   pushes its links hard right. An empty third child restores the balance. */
.nav-spacer {
  flex: 0 0 auto;
  width: 1px;
}