/* ==========================================================================
   RideGrade account surface — /support/ and /dashboard/
   --------------------------------------------------------------------------
   Linked only by those two routes (see render.mjs), so none of this reaches the
   eight marketing routes. That is why it lives here rather than in global.css:
   the global decoded-CSS budget in tests/css-delivery.test.mjs is a real guard
   against bloat, and an authed surface no marketing visitor can reach has no
   business being weighed against it.

   Purple values are the #6544d9 / #6c4de6 pair from pro-plus-pricing.css, so a
   Pro+ plan badge reads identically on /pricing/ and in the dashboard.
   ========================================================================== */

.account-hero {
  --pro-plus-ink: #6544d9;
  --pro-plus-line: #6c4de6;
  display: grid;
  gap: 28px;
  align-items: start;
}

.account-intro {
  display: grid;
  gap: 18px;
  max-width: 72ch;
}

.account-intro-copy {
  display: grid;
  gap: 10px;
}

.account-intro h1 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: var(--font-weight-display);
  color: var(--ink);
}

.account-intro p,
.account-intro-copy p {
  margin: 0;
  color: var(--muted);
  font-weight: var(--font-weight-body);
}

/* You-are-here on the utility links. Lives here so marketing routes never pay
   for an account-only current state. */
body[data-page="support"] .header-utility-link[href="/support/"],
body[data-page="dashboard"] .header-utility-link[href="/dashboard/"],
body[data-page="support"] .mobile-nav-util[href="/support/"],
body[data-page="dashboard"] .mobile-nav-util[href="/dashboard/"] {
  background: var(--wash);
  color: var(--blue);
}

/* --- shared: the unconfigured notice ------------------------------------- */

.account-unconfigured {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid #e8c56a;
  border-radius: 12px;
  background: var(--yellow-soft);
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--font-weight-body);
  line-height: 1.4;
}

.account-unconfigured .rg-icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

/* --- /support/ ------------------------------------------------------------ */

.support-form {
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px #172c500c;
}

.support-form-head {
  display: grid;
  gap: 6px;
}

.support-form h2 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: var(--font-weight-heading);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
}

.support-form-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--font-weight-body);
}

.support-form select,
.support-form textarea,
.support-form .field input {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid #d4dfed;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
}

.support-form textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.45;
}

.support-form select:focus-visible,
.support-form textarea:focus-visible,
.support-form .field input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}

.support-form .field input[aria-invalid="true"],
.support-form select[aria-invalid="true"],
.support-form textarea[aria-invalid="true"] {
  border-color: rgba(201, 42, 42, 0.48);
  background: #fffdfd;
  box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.08);
}

.field-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--font-weight-body);
  line-height: 1.35;
}

.field-hint:empty {
  display: none;
}

.support-form .button-primary {
  justify-self: start;
  min-width: 168px;
}

.support-form .form-status[data-state] {
  border-radius: 8px;
  padding: 10px 12px;
}

.support-form .form-status[data-state="error"] {
  border: 1px solid rgba(201, 42, 42, 0.2);
  background: var(--error-soft);
  color: var(--error);
}

.support-form .form-status[data-state="success"] {
  border: 1px solid rgba(22, 163, 74, 0.32);
  background: var(--green-soft);
  color: var(--green-text);
}

.support-form .form-status[data-state="pending"] {
  border: 1px solid var(--line);
  background: var(--wash);
  color: var(--muted);
}

.support-form .form-status[data-state="fallback"] {
  border: 1px solid #e8c56a;
  background: var(--yellow-soft);
  color: var(--ink);
}

.support-form .form-status[data-state="fallback"] .text-link {
  color: var(--blue);
  font-weight: 800;
}

/* --- /dashboard/ ---------------------------------------------------------- */

.account-gate {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--wash);
}

.account-signedout {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.account-signedout p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--font-weight-body);
}

.account-signedin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.account-who {
  color: var(--ink);
  font-weight: var(--font-weight-ui-strong);
}

/* --- the sign-in panel: Google or an emailed link (2026-10-03) --------------
   The app's two ways in, in the app's order (AuthScreen.kt): Google, an "or"
   rule, then the email form. A state card takes the choice's place while a link
   is on its way or coming back, with its actions under it. The lead rule above
   (.account-signedout p) lays out the shield line; the card's own paragraphs
   are plain text blocks, so they reset it. Every block sets a display, so
   [hidden] is restated for the whole panel at the end of this group. */

.account-signin-methods {
  display: grid;
  gap: 14px;
  width: min(100%, 420px);
}

.account-google-choice {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.account-signedout .account-signin-or {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: var(--muted);
  font-size: 13px;
}

.account-signedout .account-signin-or::before,
.account-signedout .account-signin-or::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.account-email-form {
  display: grid;
  gap: 8px;
}

.account-email-form .field input {
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 1px solid #d4dfed;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
}

.account-email-form .field input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}

.account-email-form .field input[aria-invalid="true"] {
  border-color: rgba(201, 42, 42, 0.48);
  background: #fffdfd;
  box-shadow: 0 0 0 3px rgba(201, 42, 42, 0.08);
}

.account-email-form .button {
  justify-self: start;
}

.account-signedout .account-email-error {
  display: block;
  color: var(--error);
  font-size: 13px;
  font-weight: var(--font-weight-ui-strong);
}

.account-signedout .account-email-error:empty {
  display: none;
}

.account-link-state {
  display: grid;
  gap: 8px;
  width: min(100%, 520px);
}

.account-link-state h2 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: var(--font-weight-heading);
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}

/* Focus moves to the title so a screen reader hears the new state; the title is
   not a control, so it draws no focus ring. */
.account-link-state h2:focus {
  outline: none;
}

.account-signedout .account-link-state p {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

.account-signedout .account-link-state .account-link-email {
  justify-self: start;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-weight: var(--font-weight-ui-strong);
  overflow-wrap: anywhere;
}

.account-signedout .account-link-state .account-link-detail {
  color: var(--muted);
  font-size: 14px;
}

.account-signin-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--font-weight-body);
}

.account-signin-note:empty {
  display: none;
}

.account-signedout [hidden] {
  display: none !important;
}

.account-panels {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
}

.account-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.account-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.account-panel h2 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: var(--font-weight-heading);
  font-size: 18px;
  color: var(--ink);
}

.account-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--font-weight-body);
}

.account-panel-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
}

.account-panel-link {
  color: var(--blue);
  font-size: 14px;
  font-weight: var(--font-weight-ui-strong);
}

/* Plan badge. `data-plan-tier` is stamped by site.js from the entitlement doc;
   Pro+ borrows the pricing table's purple so the tier reads as one thing. */
.account-plan-badge {
  padding: 3px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--gray-soft);
  color: var(--gray);
  font-size: 13px;
  font-weight: var(--font-weight-ui-strong);
}

.account-plan-badge[data-plan-tier="pro"] {
  border-color: var(--plan-pro-line);
  background: var(--plan-pro-soft);
  color: var(--plan-pro-ink);
}

.account-plan-badge[data-plan-tier="pro-plus"] {
  border-color: var(--pro-plus-line);
  background: rgba(108, 77, 230, 0.075);
  color: var(--pro-plus-ink);
}

.account-plan-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}

.account-plan-facts dt {
  color: var(--muted);
  font-size: 14px;
}

.account-plan-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--font-weight-ui-strong);
}

.account-device-list,
.account-ticket-list,
.account-sync-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-device-list li,
.account-ticket-list li {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  font-size: 14px;
  color: var(--ink);
}

.account-empty {
  color: var(--muted);
  font-weight: var(--font-weight-body);
}

.account-sync-list li {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
}

.account-sync-name {
  color: var(--ink);
  font-weight: var(--font-weight-ui-strong);
  font-size: 14px;
}

.account-sync-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.account-sync-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--font-weight-body);
}

/* A domain whose cloud half does not exist is drawn as visibly inert, so an
   empty panel can never be misread as "you have no history". */
.account-sync-list li[data-sync-state="not-built"] {
  background: var(--wash);
}

.account-sync-list li[data-sync-state="live"] .account-sync-state {
  color: var(--green-text);
}

.account-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button.button-danger {
  border: 1px solid var(--error);
  background: var(--error-soft);
  color: var(--error);
}

.button.button-danger:hover {
  background: var(--red-soft);
}

.button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ==========================================================================
   [hidden] must actually hide
   --------------------------------------------------------------------------
   Every block below sets an explicit `display`, and a `display` declaration
   beats the UA's `[hidden] { display: none }`. So .hidden = true set the
   attribute and changed nothing: the signed-out prompt and the signed-in
   identity row rendered SIMULTANEOUSLY, and the unconfigured notice stayed
   visible even when a config was present.

   Caught by capturing the page, not by the test suite -- the tests asserted the
   .hidden PROPERTY rather than computed visibility, so they passed against a
   visibly broken page. tests/account-surface.test.mjs now asserts display.

   2026-10-05: the same bug, one level down. `.account-delete-confirm` sets
   `display: grid`, so its `hidden` attribute hid nothing, and "Yes, delete
   everything" was on the page before "Delete my account" was pressed. The last
   selector below hides every `hidden` element INSIDE the panels, as
   `.account-signedout [hidden]` does for the sign-in panel: today the confirm
   box, the receipt and the Pro+ preview line. Nothing in the panels is meant to
   show while it carries `hidden`.
   ========================================================================== */
.account-unconfigured[hidden],
.account-signedout[hidden],
.account-signedin[hidden],
.account-panels[hidden],
.account-panels [hidden] {
  display: none !important;
}

/* Cards size to their own content. Grid items stretch to row height by default,
   which left the Plan card carrying ~270px of empty space below its note just
   because Cloud sync in the same row is tall. Ragged bottoms read better than
   large voids when the panels genuinely differ in length. */
.account-panels {
  align-items: start;
}

/* --- M8: the deletion panel and the summary states it renders ---------------
   The old data panel offered two buttons and a note. Deletion now needs three
   things the note could not carry: the §10.3 consequences BEFORE the request,
   a confirmation step the driver has to cross deliberately, and a receipt shown
   exactly once. Each gets the weight its consequence deserves — the
   consequences read as a list, the confirmation sits in a bordered well so it
   cannot be mistaken for body copy, and the receipt is monospace and
   selectable, because a driver has to be able to copy it accurately.

   These live in account.css, which is linked only by /support/ and /dashboard/,
   so none of it enters the eight marketing routes' decoded CSS budget. */

.account-delete-consequences {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--ink);
  font-weight: var(--font-weight-body);
}

.account-delete-confirm {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--error);
  border-radius: 12px;
  background: var(--error-soft);
}

.account-delete-confirm p {
  margin: 0;
  font-size: 14px;
  color: var(--error);
  font-weight: var(--font-weight-ui-strong);
}

/* The receipt is the only copy that exists. It must be readable character by
   character and selectable in one gesture, so it is monospace, wrapped on
   any character, and given its own well rather than run into the note below. */
.account-delete-receipt {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--soft-line);
  border-radius: 12px;
  background: var(--wash);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
}

/* A domain that is being erased is drawn inert for the same reason a not-built
   one is: a zero next to "Being erased" must not read as "you never had any". */
.account-sync-list li[data-sync-state="PURGING"],
.account-sync-list li[data-sync-state="DISABLED_RETAINED"] {
  background: var(--wash);
}

.account-sync-list li[data-sync-state="ENABLED"] .account-sync-state {
  color: var(--green-text);
}

/* ==========================================================================
   Support help centre (/support/)
   --------------------------------------------------------------------------
   The live ridegrade.app styles of 2026-10-01 for the three help paths, the
   FAQ section (#faq, which replaced the /faq/ page) and the "Personal support"
   column beside the ticket form, ported from the deployed account stylesheet.
   The live rules that also restyle /dashboard/ are scoped to .account-support
   here, so the dashboard keeps its own layout.
   ========================================================================== */

.account-hero.account-support {
  gap: 32px;
}

.section.account-hero.account-support {
  width: calc(100% - 32px);
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 0 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.account-support .account-intro {
  max-width: none;
  justify-items: center;
  text-align: center;
  padding: 12px 12px 16px;
}

.account-support .account-intro h1 {
  text-wrap: balance;
}

.account-support .account-intro p {
  max-width: 54ch;
  line-height: 1.65;
}

.account-support .account-intro-copy {
  gap: 20px;
}

.account-support .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.account-kicker {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.support-paths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.support-paths a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 18px #172c5006;
  transition: border-color 180ms ease, transform 180ms ease;
}

.support-paths a:hover {
  border-color: #8fb5f0;
  transform: translateY(-2px);
}

.support-paths a > .rg-icon:first-child,
.account-section-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 12px;
  border-radius: 14px;
  background: #eff5ff;
}

.support-paths a > span:not(.rg-icon) {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.support-paths strong {
  font-size: 15px;
}

.support-paths small {
  color: var(--muted);
  font-size: 12px;
}

.support-paths a > .rg-icon:last-child {
  flex: 0 0 16px;
}

.help-faq {
  padding: clamp(24px, 3.5vw, 40px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px #172c500c;
  scroll-margin-top: 100px;
}

.help-faq-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}

.help-faq h2 {
  margin: 8px 0 0;
  font: 800 clamp(23px, 2.5vw, 30px)/1.3 var(--font-ui);
  color: var(--ink);
}

.help-faq-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.help-faq-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0;
}

.help-faq-topics button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--muted);
  font: 700 13px/1.35 var(--font-ui);
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.help-faq-topics button > strong {
  display: none;
}

.help-faq-topics button:hover {
  background: #f6f9ff;
}

.help-faq-topics button.is-active {
  color: var(--blue);
  background: #eef5ff;
  border-color: #88b4ff;
}

.help-faq-list {
  border-top: 1px solid var(--line);
}

.help-faq-item {
  border-bottom: 1px solid var(--line);
}

.help-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px;
  color: var(--ink);
  font: 700 16px/1.5 var(--font-ui);
  cursor: pointer;
  list-style: none;
}

.help-faq-item > summary::-webkit-details-marker {
  display: none;
}

.help-faq-chevron {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f7fd;
  transform: rotate(90deg);
  transition: transform 180ms ease;
}

.help-faq-item[open] .help-faq-chevron {
  transform: rotate(-90deg);
}

.help-faq-item[open] > summary {
  color: var(--blue);
}

.help-faq-item > p {
  max-width: 78ch;
  margin: 0;
  padding: 0 42px 24px 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}

.help-faq-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.help-faq-footer a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-weight: 800;
}

.support-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: start;
  margin-top: 16px;
}

.support-contact-copy {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
}

.support-contact-copy h2 {
  margin: 16px 0;
  font: 800 clamp(28px, 3vw, 38px)/1.2 var(--font-brand);
}

.support-contact-copy > p,
.support-preflight {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.support-email {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 24px 0;
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* Helpdesk Tier 0 (2026-10-03, item W1): the answer window sits directly under the
   address it belongs to, then the usual 24px before the report checklist. */
.support-email + .support-promise {
  margin: -12px 0 24px;
}

.support-preflight {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.support-preflight h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font: 800 15px/1.5 var(--font-ui);
  margin: 0;
}

.support-preflight ul {
  padding-left: 20px;
}

.support-preflight li + li {
  margin-top: 8px;
}

.support-preflight p {
  margin: 18px 0 0;
  font-size: 13px;
}

.support-form {
  scroll-margin-top: 100px;
}

.support-form-head {
  gap: 12px;
}

.support-form small {
  line-height: 1.6;
}

.account-support :is(a, button, summary):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

@media (max-width: 899px) {
  .section.account-hero.account-support {
    padding-top: 28px;
  }

  .support-paths {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .support-paths a {
    padding: 18px 20px;
  }

  .help-faq-heading {
    display: block;
  }

  .help-faq-heading p {
    margin-top: 12px;
  }

  .support-contact {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .support-form .button-primary {
    width: 100%;
    justify-self: stretch;
  }
}

@media (max-width: 760px) {
  .account-hero.account-support {
    gap: 20px;
  }

  .support-form {
    padding: 24px;
  }
}

@media (max-width: 600px) {
  .support-contact-copy,
  .help-faq {
    padding: 24px 20px;
  }

  .help-faq-topics {
    gap: 7px;
    margin: 24px 0;
  }

  .help-faq-topics button {
    flex: 1 1 auto;
    padding: 10px;
    font-size: 12px;
  }

  .help-faq-item > summary {
    font-size: 15px;
    padding: 20px 0;
  }

  .help-faq-item > p {
    padding-right: 0;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .support-paths a,
  .help-faq-topics button,
  .help-faq-chevron {
    transition: none;
  }

  .support-paths a:hover {
    transform: none;
  }
}

.help-faq-item .ma-written-steps {
  display: grid;
  gap: 12px;
  padding: 0 24px 18px 44px;
  color: #526278;
  font: 500 14px/1.65 var(--font-ui);
}

.help-faq-item .ma-written-steps li {
  padding-left: 4px;
}

.help-faq-item .ma-source-links a {
  color: #0759bd;
  text-decoration: underline;
}