/* ==========================================================================
   LiteByte Insights: Guides
   Same layout as the guides on litebyte.co.uk, moved here in Nov 2026.
   The two blocks below are the main site's compliance-article and guide
   styles with their class names prefixed (ca- and g-); only the variables,
   the button and a few Insights adjustments at the end are written for
   this site. Pages are generated by scripts/build-guides.js.
   ========================================================================== */

.lbg {
  --font-poppins: "Poppins";
  --font-instrument-sans: "Instrument Sans";
  --font-jetbrains-mono: "JetBrains Mono";
  --site-layout-growth: 0px;
  --site-reading-growth: 0px;
  --site-sidebar-growth: 0px;
  --site-gap-growth: 0px;
  --site-button-block-padding: 15px;
  --site-button-inline-padding: 32px;
  --site-button-radius: 8px;
  color: #0b1017;
  font-family: var(--font-instrument-sans), -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: normal;
}

@media (min-width: 1441px) {
  .lbg {
    --site-layout-growth: clamp(0px, calc(40vw - 576px), 320px);
    --site-reading-growth: clamp(0px, calc(26vw - 374.4px), 208px);
    --site-sidebar-growth: clamp(0px, calc(8vw - 115.2px), 64px);
    --site-gap-growth: clamp(0px, calc(6vw - 86.4px), 48px);
    --site-button-block-padding: clamp(15px, calc(7.8px + 0.5vw), 17.5px);
  }
}

/* Button (from the main site's .btn / .btn-light) */
.lbg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 44px;
  padding: var(--site-button-block-padding) var(--site-button-inline-padding);
  border: 1px solid transparent;
  border-radius: var(--site-button-radius);
  font-family: var(--font-instrument-sans), sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: normal;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s cubic-bezier(0.16,1,0.3,1), background 0.35s ease, color 0.35s ease;
}
.lbg-btn-light { background: #f3f6fa; color: #0a0e17; }
.lbg-btn-light:hover { background: #ffffff; color: #0a0e17; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,0.25); }
.lbg-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The main site resets all margins; Insights' base styles add bottom margins
   to p and headings. Zero them here (lowest specificity) so the rules below
   behave as they did on the main site. */
.lbg :where(p, h1, h2, h3, h4, ul, ol, dl, dd) { margin: 0; }

/* ---- Compliance article layout (main site), prefixed ca- ---- */
.ca-page {
  min-height: 100vh;
  color: #0b1017;
  background: #f4f6f8;
}

.ca-hero {
  position: relative;
  padding: 146px 24px 88px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 82% 20%,
      rgba(10, 143, 88, 0.11),
      transparent 31%
    ),
    linear-gradient(145deg, #fff 0%, #f4f6f8 72%);
  border-bottom: 1px solid rgba(11, 16, 23, 0.08);
}

.ca-heroGrid {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(11, 16, 23, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 16, 23, 0.045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 18%,
    #000 82%,
    transparent
  );
  pointer-events: none;
}

.ca-heroInner {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: calc(1120px + var(--site-layout-growth));
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: clamp(54px, 8vw, 112px);
  align-items: center;
  margin: 0 auto;
}

.ca-heroCopy {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ca-backLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 42px;
  color: #536071;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.ca-backLink:hover {
  color: #076b41;
  transform: translateX(-3px);
}

.ca-eyebrow,
.ca-contentsLabel,
.ca-cta > div > span {
  color: #0a8f58;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ca-hero h1 {
  max-width: 760px;
  margin: 15px 0 0;
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: clamp(2.7rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}

.ca-qualifier {
  max-width: 660px;
  margin-top: 14px;
  color: #536071;
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.4;
}

.ca-tagline {
  max-width: 680px;
  margin-top: 30px;
  color: #162233;
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  font-weight: 550;
  line-height: 1.5;
}

.ca-standfirst {
  max-width: 640px;
  margin-top: 10px;
  color: #69758a;
  font-size: 0.94rem;
  line-height: 1.65;
}

.ca-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: #4e5969;
  font-size: 0.76rem;
  font-weight: 650;
}

.ca-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a8f58;
  box-shadow: 0 0 0 5px rgba(10, 143, 88, 0.11);
}

.ca-badgePanel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
}

.ca-badgeStage {
  display: grid;
  width: min(100%, 330px);
  aspect-ratio: 1;
  padding: 10%;
  place-items: center;
  overflow: visible;
  background: transparent;
  border: 0;
}

.ca-badgeImage {
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: contain;
}

.ca-textBadge {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 24px;
  color: #f3f6fa;
  background: #0a0e17;
  border: 4px solid #0a8f58;
  border-radius: 50%;
  text-align: center;
}

.ca-textBadge span {
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}

.ca-textBadge small {
  color: #3de79e;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ca-badgePanel > p {
  max-width: 250px;
  margin-top: 24px;
  color: #7a8590;
  font-size: 0.76rem;
  line-height: 1.6;
  text-align: center;
}

.ca-articleSection {
  padding: 78px 24px 120px;
  background: #fff;
}

.ca-layout {
  display: grid;
  max-width: calc(1120px + var(--site-layout-growth));
  grid-template-columns:
    calc(245px + var(--site-sidebar-growth))
    minmax(0, calc(760px + var(--site-reading-growth)));
  gap: calc(76px + var(--site-gap-growth));
  align-items: start;
  margin: 0 auto;
}

.ca-sidebar {
  position: sticky;
  top: 94px;
  max-height: calc(100vh - 124px);
  padding: 22px 20px 22px 0;
  overflow-y: auto;
  border-right: 1px solid rgba(11, 16, 23, 0.1);
  scrollbar-width: thin;
}

.ca-contentsLabel {
  margin-bottom: 16px;
}

.ca-contentsList {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.ca-contentsList a {
  display: block;
  padding: 5px 0;
  color: #7a8590;
  font-size: 0.76rem;
  line-height: 1.45;
  text-decoration: none;
  transition:
    color 180ms ease,
    transform 180ms ease;
}

.ca-contentsList a:hover,
.ca-contentsList a:focus-visible {
  color: #076b41;
  transform: translateX(3px);
}

.ca-article {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ca-article p {
  margin: 0 0 19px;
  color: #434d5c;
  font-size: 1rem;
  line-height: 1.82;
}

.ca-article .ca-introduction {
  color: #25303e;
  font-size: 1.07rem;
  line-height: 1.8;
}

.ca-article h2 {
  scroll-margin-top: 108px;
  margin: 58px 0 22px;
  padding-top: 43px;
  border-top: 1px solid rgba(11, 16, 23, 0.1);
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: clamp(1.5rem, 2.7vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.24;
  text-wrap: balance;
}

.ca-article h2:first-of-type {
  margin-top: 48px;
}

.ca-article h3 {
  scroll-margin-top: 108px;
  margin: 35px 0 13px;
  color: #0b1017;
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: 1.08rem;
  font-weight: 550;
  line-height: 1.4;
}

.ca-article ul {
  display: grid;
  gap: 8px;
  margin: 5px 0 26px;
  padding: 0;
  list-style: none;
}

.ca-article li {
  position: relative;
  padding-left: 23px;
  color: #434d5c;
  font-size: 0.98rem;
  line-height: 1.68;
}

.ca-article li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #0a8f58;
}

.ca-article strong {
  color: #0b1017;
  font-weight: 650;
}

.ca-article blockquote,
.ca-article .ca-emphasis {
  margin: 28px 0;
  padding: 19px 22px 19px 25px;
  color: #1d2938;
  background: rgba(10, 143, 88, 0.06);
  border: 1px solid rgba(10, 143, 88, 0.14);
  border-left: 3px solid #0a8f58;
  border-radius: 0 10px 10px 0;
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.67;
}

.ca-mobileContents {
  display: none;
  max-width: calc(760px + var(--site-reading-growth));
  margin: 0 auto 38px;
}

.ca-mobileContents details {
  overflow: hidden;
  background: #f4f6f8;
  border: 1px solid rgba(11, 16, 23, 0.1);
  border-radius: 11px;
}

.ca-mobileContents summary {
  padding: 16px 18px;
  color: #0b1017;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ca-mobileContents .ca-contentsList {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 24px;
  padding: 0 18px 18px;
}

.ca-articleNavigation {
  display: grid;
  max-width: calc(1120px + var(--site-layout-growth));
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 0 auto;
  overflow: hidden;
  background: rgba(243, 246, 250, 0.13);
  border: 1px solid rgba(243, 246, 250, 0.13);
  border-radius: 14px;
}

.ca-articleNavigation a {
  display: flex;
  min-width: 0;
  padding: 26px 28px;
  flex-direction: column;
  gap: 8px;
  color: #f3f6fa;
  background: #0a0e17;
  text-decoration: none;
  transition: background 220ms ease;
}

.ca-articleNavigation a:last-child {
  align-items: flex-end;
  text-align: right;
}

.ca-articleNavigation a:hover {
  background: #151c2a;
}

.ca-articleNavigation span {
  color: rgba(243, 246, 250, 0.5);
  font-size: 0.67rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ca-articleNavigation strong {
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: clamp(0.95rem, 2vw, 1.16rem);
  font-weight: 450;
  overflow-wrap: anywhere;
}

.ca-cta {
  display: flex;
  max-width: calc(1120px + var(--site-layout-growth));
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin: 28px auto 0;
  padding: 66px 0 108px;
}

.ca-cta h2 {
  max-width: 680px;
  margin-top: 13px;
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.16;
}

.ca-cta p {
  max-width: 650px;
  margin-top: 13px;
  color: #69758a;
  font-size: 0.94rem;
  line-height: 1.7;
}

.ca-cta > a {
  flex: 0 0 auto;
  color: #0a0e17;
  text-decoration: none;
}

.ca-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

@media (max-width: 940px) {
  .ca-heroInner {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 42px;
  }

  .ca-layout {
    display: block;
  }

  .ca-sidebar {
    display: none;
  }

  .ca-mobileContents {
    display: block;
  }

  .ca-mobileContents .ca-contentsList a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    font-size: 0.88rem;
  }

  .ca-article {
    max-width: calc(760px + var(--site-reading-growth));
    margin: 0 auto;
  }

  .ca-articleNavigation,
  .ca-cta {
    margin-right: 24px;
    margin-left: 24px;
  }
}

@media (max-width: 700px) {
  .ca-hero {
    padding: 130px 20px 68px;
  }

  .ca-heroInner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ca-backLink {
    min-height: 44px;
    margin-bottom: 20px;
  }

  .ca-hero h1 {
    font-size: clamp(2.2rem, 9vw, 3.4rem);
  }

  .ca-badgePanel {
    align-items: flex-start;
  }

  .ca-badgeStage {
    width: min(72vw, 240px);
  }

  .ca-badgePanel > p {
    text-align: left;
  }

  .ca-articleSection {
    padding: 46px 20px 84px;
  }

  .ca-mobileContents .ca-contentsList {
    grid-template-columns: 1fr;
  }

  .ca-article h2 {
    margin-top: 48px;
    padding-top: 36px;
  }

  .ca-articleNavigation {
    grid-template-columns: 1fr;
    margin: 0 20px;
  }

  .ca-articleNavigation a:last-child {
    align-items: flex-start;
    text-align: left;
  }

  .ca-cta {
    align-items: flex-start;
    flex-direction: column;
    gap: 28px;
    margin: 0 20px;
    padding: 62px 0 86px;
  }

  .ca-cta > a {
    width: 100%;
  }
}


/* ---- Guide pieces (main site), prefixed g- ---- */
/* Guide-only pieces. Layout, hero, contents rail, reading column and the
   closing CTA come from compliance-article-page.module.css. */

.g-guideTitle {
  font-size: clamp(2.4rem, 5vw, 4.1rem) !important;
  line-height: 1.04 !important;
}

.g-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 28px;
  color: #4e5969;
  font-size: 0.76rem;
  font-weight: 650;
}

.g-meta span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 22px 2px -13px;
  border-radius: 50%;
  background: rgba(11, 16, 23, 0.25);
}

/* Hero figures panel: the navy card that sits where a compliance badge would. */
.g-figuresPanel {
  display: flex;
  min-width: 0;
  justify-content: center;
}

.g-figures {
  display: grid;
  width: min(100%, 330px);
  gap: 22px;
  padding: 30px 28px 24px;
  color: #f3f6fa;
  background: #0a0e17;
  border-radius: 16px;
  box-shadow: 0 24px 60px -30px rgba(10, 14, 23, 0.55);
}

.g-figure strong {
  display: block;
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}

.g-figure + .g-figure strong {
  color: #3de79e;
}

.g-figure span {
  display: block;
  margin-top: 9px;
  color: rgba(243, 246, 250, 0.64);
  font-size: 0.8rem;
  line-height: 1.5;
}

.g-figureFoot {
  padding-top: 16px;
  color: rgba(243, 246, 250, 0.4);
  border-top: 1px solid rgba(243, 246, 250, 0.14);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Reading column additions */
.g-answer {
  margin: 0 0 8px;
  padding: 24px 26px 22px;
  background: rgba(10, 143, 88, 0.06);
  border: 1px solid rgba(10, 143, 88, 0.14);
  border-radius: 12px;
}

.g-answer > span {
  display: block;
  margin-bottom: 10px;
  color: #0a8f58;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.g-answer p {
  margin: 0 !important;
  color: #1d2938 !important;
  font-size: 1.06rem !important;
}

.g-body h2 {
  scroll-margin-top: 108px;
}

.g-tableWrap {
  margin: 8px 0 30px;
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgba(11, 16, 23, 0.12);
  border-radius: 16px;
}

.g-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.g-table th {
  padding: 16px 20px;
  color: #7a8590;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(11, 16, 23, 0.1);
}

.g-table td {
  padding: 16px 20px;
  color: #434d5c;
  font-size: 0.9rem;
  line-height: 1.45;
  vertical-align: top;
  border-bottom: 1px solid rgba(11, 16, 23, 0.06);
  white-space: nowrap;
}

.g-table tr:last-child td {
  border-bottom: 0;
}

.g-table td:first-child {
  white-space: normal;
}

.g-table td a {
  color: #0b1017;
  font-weight: 650;
  text-decoration: none;
}

.g-table td a:hover {
  color: #076b41;
}

.g-table td small {
  display: block;
  margin-top: 3px;
  color: #7a8590;
  font-size: 0.76rem;
}

.g-table .g-delivered {
  color: #076b41;
  font-weight: 650;
}

.g-mobileCellLabel {
  display: none;
}

/* Common questions */
.g-faq {
  border-top: 1px solid rgba(11, 16, 23, 0.1);
}

.g-faq details {
  border-bottom: 1px solid rgba(11, 16, 23, 0.1);
}

.g-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  color: #0b1017;
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: 1.04rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.g-faq summary::-webkit-details-marker {
  display: none;
}

.g-faq summary i {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

.g-faq summary i::before,
.g-faq summary i::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 1.5px;
  background: #0a8f58;
  transition: transform 220ms ease;
}

.g-faq summary i::after {
  transform: rotate(90deg);
}

.g-faq details[open] summary i::after {
  transform: rotate(0deg);
}

.g-faq details p {
  margin: -4px 0 22px !important;
  max-width: 640px;
}

/* Guides index */
.g-indexSection {
  padding: 78px 24px 40px;
}

.g-indexList {
  display: grid;
  max-width: calc(1120px + var(--site-layout-growth));
  gap: 18px;
  margin: 0 auto;
}

.g-card {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 34px 36px;
  color: #0b1017;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(11, 16, 23, 0.12);
  border-radius: 16px;
  transition:
    border-color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.g-card:hover {
  border-color: rgba(10, 143, 88, 0.28);
  box-shadow: 0 14px 34px rgba(10, 14, 23, 0.07);
  transform: translateY(-2px);
}

.g-cardNumber {
  color: #0a8f58;
  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
  font-size: 0.82rem;
}

.g-cardTopline {
  color: #7a8590;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.g-card h2 {
  margin: 10px 0 8px;
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.g-card p {
  max-width: 640px;
  color: #69758a;
  font-size: 0.92rem;
  line-height: 1.65;
}

.g-cardAction {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #0b1017;
  font-size: 0.86rem;
  font-weight: 650;
  white-space: nowrap;
}

.g-cardAction svg,
.g-cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transition: transform 200ms ease;
}

.g-card:hover .g-cardAction svg {
  transform: translateX(3px);
}

/* "At a glance" hero card (guides that aren't about cost). Same navy card as
   the figures panel. */
.g-glanceLabel {
  color: #3de79e;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.g-glanceList {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.g-glanceList li {
  position: relative;
  padding-left: 18px;
  color: rgba(243, 246, 250, 0.84);
  font-size: 0.88rem;
  line-height: 1.55;
}

.g-glanceList li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3de79e;
}

.g-glanceLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  color: #f3f6fa;
  border-top: 1px solid rgba(243, 246, 250, 0.14);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: none;
}

.g-glanceLink:hover {
  color: #3de79e;
}

.g-glanceLink svg,
.g-relatedCard svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  transition: transform 200ms ease;
}

.g-glanceLink:hover svg,
.g-relatedCard:hover svg {
  transform: translateX(3px);
}

/* Numbered steps */
.g-body .g-steps {
  display: grid;
  gap: 12px;
  margin: 8px 0 30px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.g-body .g-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 22px 18px;
  background: #fff;
  border: 1px solid rgba(11, 16, 23, 0.1);
  border-radius: 14px;
}

.g-body .g-steps li::before {
  content: none;
}

.g-stepNumber {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #0a8f58;
  background: rgba(10, 143, 88, 0.08);
  border-radius: 50%;
  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
  font-size: 0.78rem;
  font-weight: 600;
}

.g-body .g-steps h3 {
  margin: 6px 0 6px;
  font-size: 1.02rem;
}

.g-body .g-steps p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Options grid: one card per route, with what it suits and the catch. */
.g-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 30px;
}

.g-option {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  background: #fff;
  border: 1px solid rgba(11, 16, 23, 0.1);
  border-radius: 14px;
}

.g-body .g-option h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.g-body .g-option p {
  margin: 0 0 16px;
  font-size: 0.93rem;
  line-height: 1.68;
}

.g-option dl {
  display: grid;
  gap: 4px;
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 16, 23, 0.08);
}

.g-option dt {
  color: #0a8f58;
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.g-option dt + dd + dt {
  margin-top: 10px;
  color: #9a6b1e;
}

.g-option dd {
  margin: 0;
  color: #434d5c;
  font-size: 0.88rem;
  line-height: 1.6;
}

/* Comparison table: wraps text, row labels on the left. */
.g-compare {
  min-width: 600px;
}

.g-compare td {
  white-space: normal;
}

.g-compare tbody th {
  width: 22%;
  padding: 16px 20px;
  color: #0b1017;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  vertical-align: top;
  border-bottom: 1px solid rgba(11, 16, 23, 0.06);
}

.g-compare tr:last-child th {
  border-bottom: 0;
}

/* Related pages */
.g-related {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 30px;
}

.g-relatedCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: center;
  padding: 20px 22px;
  color: #0b1017;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(11, 16, 23, 0.12);
  border-radius: 14px;
  transition:
    border-color 240ms ease,
    box-shadow 240ms ease;
}

.g-relatedCard:hover {
  border-color: rgba(10, 143, 88, 0.28);
  box-shadow: 0 14px 34px rgba(10, 14, 23, 0.07);
}

.g-relatedCard span {
  font-family: var(--font-poppins), "Instrument Sans", sans-serif;
  font-size: 1rem;
  font-weight: 500;
}

.g-body .g-relatedCard p {
  grid-column: 1;
  margin: 0;
  color: #69758a;
  font-size: 0.86rem;
  line-height: 1.55;
}

.g-relatedCard svg {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 860px) {
  .g-figuresPanel {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .g-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 26px 24px;
  }

  .g-options,
  .g-related {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Comparison table becomes one card per row, each cell labelled. */
  .g-compare {
    min-width: 0;
  }

  .g-compare thead {
    display: none;
  }

  .g-compare tbody,
  .g-compare tr,
  .g-compare tbody th,
  .g-compare td {
    display: block;
    width: auto;
  }

  .g-compare tr {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(11, 16, 23, 0.08);
  }

  .g-compare tr:last-child {
    border-bottom: 0;
  }

  .g-compare tbody th,
  .g-compare td {
    padding: 0;
    border-bottom: 0;
  }

  .g-compare tbody th {
    margin-bottom: 8px;
    font-size: 0.95rem;
  }

  .g-compare td + td {
    margin-top: 10px;
  }

  .g-compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: #7a8590;
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .g-body .g-steps li {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 18px 16px;
  }
}

@media (max-width: 700px) {
  .g-guideTitle {
    font-size: clamp(2rem, 8.5vw, 3rem) !important;
  }

  .g-meta {
    flex-direction: column;
    gap: 8px;
    margin-top: 22px;
  }

  .g-meta span + span::before {
    content: none;
  }

  .g-answer {
    padding: 22px 18px;
  }

  /* Each row keeps its project and both figures together without a swipe. */
  .g-tableWrap {
    overflow: visible;
  }

  .g-table {
    min-width: 0;
  }

  .g-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .g-table tbody,
  .g-table tr,
  .g-table td {
    display: block;
  }

  .g-table tr {
    padding: 20px 18px;
  }

  .g-table tr + tr {
    border-top: 1px solid rgba(11, 16, 23, 0.12);
  }

  .g-table td {
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .g-table td + td {
    margin-top: 14px;
  }

  .g-mobileCellLabel {
    display: block;
    margin-bottom: 4px;
    color: #69758a;
    font-size: 0.72rem;
    font-weight: 550;
  }

  .g-indexSection {
    padding: 42px 20px 24px;
  }

  .g-card {
    padding: 24px 20px;
  }

  .g-cardAction {
    min-height: 44px;
  }
}


/* ---- Insights adjustments ----
   The Insights header now works like the main site's (fixed, see-through at
   the top), so the guide hero runs up behind it with the main site's own top
   padding (146px, 130px at 700px and below). Anchor jumps need room for the
   header. */
.lbg > .ca-page { margin-top: calc(-1 * var(--hdr-h)); }
.lbg :where(section[id], h2[id], h3[id]) { scroll-margin-top: 100px; }
/* Insights' base h3 has tighter letter spacing; the guides use the browser default. */
.lbg :where(h3) { letter-spacing: normal; }
/* Insights turns links green on hover; the related cards stayed dark on the main site. */
.lbg .g-relatedCard:hover { color: #0b1017; }

/* The CTA band only had side margins at 940px and below, so between 941px
   and its 1,120px max width it touched the window edge. */
@media (max-width: 1168px) {
  .lbg .ca-cta { margin-left: 24px; margin-right: 24px; }
}