/* ==========================================================================
   Stuama.ie — main stylesheet
   1. Fonts        2. Tokens        3. Base           4. Utilities
   5. Layout       6. Components    7. Header / nav   8. Homepage sections
   9. Footer       10. Service hub pages  11. Guide articles
   12. Accounting guide components  13. Business insurance guide components
   14. Trust and governance pages   15. Business Guides index
   16. Contact form and legal pages 17. Cookie banner and settings
   ========================================================================== */

/* 1. Fonts — self-hosted, SIL Open Font License (see assets/fonts/LICENSE-*) */
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-latin-opsz-wght.woff2") format("woff2-variations"),
       url("/assets/fonts/source-serif-4-latin-opsz-wght.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin-wght.woff2") format("woff2-variations"),
       url("/assets/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens */
:root {
  /* Colour */
  --navy-950: #00122f;
  --navy-900: #001a46;   /* brand navy, matches the supplied logo files */
  --navy-800: #0b2a5b;
  --blue-700: #1d4e9a;
  --blue-600: #1a62d0;   /* primary CTA */
  --blue-650: #1553b5;   /* CTA hover */
  --blue-300: #8fb9f2;   /* accent on navy */
  --silver-400: #b3bcc9;
  --silver-300: #cfd6df;
  --grey-900: #14203a;
  --grey-700: #3c4860;
  --grey-600: #4f5b70;
  --line: #dde3ec;
  --line-strong: #c9d2de;
  --pale-100: #f5f7fb;
  --pale-200: #eef2f8;
  --pale-300: #e4ebf4;
  --white: #fff;

  --text: var(--grey-900);
  --text-muted: var(--grey-600);
  --heading: var(--navy-900);
  --link: var(--blue-600);
  --focus: var(--blue-600);
  --focus-on-dark: #9cc3ff;

  /* Typography */
  --font-serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs: 0.6875rem;   /* 11px eyebrow */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.125rem;    /* 18px */
  --fs-lg: 1.25rem;     /* 20px */
  --fs-h3: 1.25rem;
  --fs-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --fs-display: clamp(2.5rem, 1.5rem + 3.4vw, 3.75rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;

  /* Layout */
  --container: 1060px;
  --gutter: 20px;
  --header-h: 72px;

  /* Shape */
  --radius-sm: 4px;
  --radius: 6px;
  --shadow-sm: 0 1px 2px rgb(11 31 68 / 0.06), 0 2px 8px rgb(11 31 68 / 0.05);
  --shadow-md: 0 6px 24px rgb(11 31 68 / 0.12);
}

/* 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-4); }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  margin: 0;
  color: var(--heading);
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
p, ul { margin: 0; }
ul[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--link); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  html { scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 4. Utilities */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  top: var(--space-2); left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--navy-900);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

/* 5. Layout */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 6. Components */
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--lg { width: 2rem; height: 2rem; }
.icon--xl { width: 2.5rem; height: 2.5rem; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  color: var(--grey-700);
}
.eyebrow--light { color: #d5deeb; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.btn .icon { transition: transform 0.15s ease; }
.btn:hover .icon { transform: translateX(2px); }
.btn--primary { background: var(--blue-600); color: var(--white); }
.btn--primary:hover { background: var(--blue-650); }
.btn--navy { background: var(--navy-900); color: var(--white); }
.btn--navy:hover { background: var(--navy-800); }
.btn--lg { min-height: 2.75rem; padding: 0.6875rem 1.5rem; font-size: var(--fs-base); }

.text-link {
  display: inline-block;
  color: var(--link);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}
.nowrap { white-space: nowrap; }
.text-link .icon { display: inline-block; margin-left: 0.25rem; vertical-align: -0.2em; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.circle-arrow {
  display: inline-grid;
  place-items: center;
  width: 2.375rem; height: 2.375rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-600);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Panel — a contained band inside .container, so its edges line up with the
   service cards, editorial copy and featured guide. */
.panel {
  padding-inline: clamp(var(--space-5), 2.6vw, var(--space-7));
  background: var(--pale-200);
  border: 1px solid var(--pale-300);
  border-radius: var(--radius);
}
.panel--navy {
  background: var(--navy-900);
  border-color: var(--navy-900);
  color: var(--white);
}
.panel--navy :focus-visible { outline-color: var(--focus-on-dark); }

/* Logo crop — the supplied logo files are 1448x1086 canvases with the wordmark
   in the middle. The files are used unmodified; this wrapper shows only the
   wordmark area (x 145–1315, y 380–676). */
.logo-crop {
  position: relative;
  display: block;
  aspect-ratio: 1170 / 296;
  overflow: hidden;
}
.logo-crop img {
  position: absolute;
  top: -128.38%;          /* -380 / 296 */
  left: -12.393%;         /* -145 / 1170 */
  width: 123.761%;        /* 1448 / 1170 */
  max-width: none;
  height: auto;
}
.logo-crop--footer { width: 150px; }

/* 7. Header & navigation */
.site-header {
  position: relative;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-h);
}
.site-logo {
  display: flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}
.site-logo__img { width: 164px; height: auto; }

.site-nav__list { display: flex; align-items: center; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: none;
  color: var(--grey-900);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.site-nav__link:hover { color: var(--blue-600); }
.site-nav__chevron { transition: transform 0.15s ease; }
.site-nav__trigger[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }
.site-nav__item--dropdown { position: relative; }
.site-nav__dropdown a {
  display: block;
  padding: 0.625rem 1rem;
  color: var(--grey-900);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.site-nav__dropdown a:hover { background: var(--pale-200); color: var(--blue-600); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--navy-900);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* Desktop navigation */
@media (min-width: 960px) {
  .site-nav { display: flex; align-items: center; flex: 1; }
  .site-nav__list { margin-inline: auto; transform: translateX(3.5rem); }
  .site-nav__dropdown {
    position: absolute;
    top: calc(100% + 0.625rem);
    left: 0;
    min-width: 15rem;
    padding: 0.375rem 0;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
  }
  /* Without JS the dropdown opens on hover / keyboard focus */
  .no-js .site-nav__dropdown { display: none; }
  .no-js .site-nav__item--dropdown:hover .site-nav__dropdown,
  .no-js .site-nav__item--dropdown:focus-within .site-nav__dropdown { display: block; }
  .js .site-nav__trigger[aria-expanded="false"] + .site-nav__dropdown { display: none; }
}

/* Mobile / tablet navigation */
@media (max-width: 959.98px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    width: 100%;
    padding-bottom: var(--space-4);
  }
  .site-header__inner { flex-wrap: wrap; row-gap: 0; }
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-2) var(--gutter) var(--space-7);
    background: var(--white);
    border-top: 1px solid var(--line);
  }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav__list { flex-direction: column; align-items: stretch; }
  .site-nav__item { border-bottom: 1px solid var(--line); }
  .site-nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0.25rem;
    font-size: var(--fs-md);
    font-weight: 500;
  }
  .site-nav__dropdown { padding: 0 0 var(--space-3) var(--space-3); }
  .js .site-nav__trigger[aria-expanded="false"] + .site-nav__dropdown { display: none; }
  .site-nav__dropdown a { padding: 0.625rem 0.5rem; font-size: var(--fs-base); }
  .site-nav__cta { width: 100%; min-height: 3rem; margin-top: var(--space-6); font-size: var(--fs-base); }
  body.nav-open { overflow: hidden; }
}

/* 8. Homepage sections ----------------------------------------------------- */

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--white);
}
.hero__inner { position: relative; z-index: 1; }
.hero__content {
  max-width: 36rem;
  padding-block: 1.875rem 1.5rem;
}
.hero__title {
  margin-top: 0.625rem;
  color: var(--white);
  font-size: var(--fs-display);
  font-weight: 700;
  font-variation-settings: "opsz" 60;
  line-height: 1;
  letter-spacing: -0.025em;
}
.hero__accent { color: var(--blue-300); }
.hero__lede {
  max-width: 33rem;
  margin-top: 0.875rem;
  color: #e6ecf5;
  font-size: var(--fs-md);
  line-height: 1.45;
}
.hero .btn--lg { margin-top: 1.125rem; }
.hero .btn--primary:focus-visible { outline-color: var(--focus-on-dark); }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) 0;
  margin-top: 1.375rem;
}
.hero-points li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-right: 1.5rem;
  margin-right: 1.5rem;
  border-right: 1px solid rgb(255 255 255 / 0.22);
  color: #e6ecf5;
  font-size: var(--fs-sm);
  line-height: 1.25;
}
.hero-points li:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
.hero-points span { max-width: 6.5rem; }
.hero-points .icon { color: var(--white); }

/* stuama-homepage-hero.webp: the left ~40% of the artwork is empty navy and the
   terminal, phone and laptop sit on the right. On wide screens the image runs
   flush to the right edge and is anchored right, so any horizontal crop removes
   empty navy rather than the devices. */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 900px) {
  .hero__media,
  .hub-hero__media {
    position: absolute;
    inset: 0 0 0 calc(50% - 5.5rem);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, #000 30%);
  }
  .hero__media img { object-position: 100% 50%; }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .hero__content { max-width: 32rem; }
  .hero__lede { max-width: 27rem; }
  .hero__media,
  .hub-hero__media {
    left: 50%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18%);
  }
  .hero-points li { padding-right: 1rem; margin-right: 1rem; gap: 0.625rem; }
}
@media (max-width: 899.98px) {
  .hero__content { max-width: 40rem; padding-block: 2rem 1.5rem; }
  .hero__media {
    height: clamp(12rem, 45vw, 20rem);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%);
    mask-image: linear-gradient(180deg, transparent 0, #000 25%);
  }
  .hero__media img { object-position: 50% 40%; }
}
@media (max-width: 599.98px) {
  .hero__lede { font-size: var(--fs-base); }
  .hero .btn--lg { width: 100%; }
  .hero-points { flex-direction: column; gap: var(--space-3); }
  .hero-points li { margin: 0; padding: 0; border: 0; }
  .hero-points span { max-width: none; }
  .hero-points .icon { width: 1.625rem; height: 1.625rem; }
}
@media (max-width: 599.98px) {
  /* Zoom in and anchor right so the terminal and phone stay legible. */
  .hero__media img { width: 130%; max-width: none; margin-left: -30%; object-position: 100% 39%; }
}
/* Desktop: start the image box 3rem further left so the artwork sits closer to the
   copy. The right edge stays flush; the image is anchored right (100% 50%). */
@media (min-width: 1200px) {
  .hero__media { left: calc(50% - 8.5rem); }
}

/* Service cards */
.services { padding-block: 1.125rem 1rem; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.service-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.service-card__media { aspect-ratio: 520 / 240; overflow: hidden; background: var(--pale-200); }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Per-image focal points so each subject survives the shallower tablet/mobile crops */
.service-card__media--payments img { object-position: 50% 34%; }
.service-card__media--accounting img { object-position: 50% 32%; }
.service-card__media--websites img { object-position: 50% 24%; }
.service-card__media--insurance img { object-position: 50% 45%; }
.service-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 1.25rem 1.125rem;
}
.service-card__title { font-size: 1.1875rem; line-height: 1.2; }
.service-card__text {
  margin-top: 0.375rem;
  margin-bottom: 0.625rem;
  padding-right: 1.5rem;
  color: var(--grey-700);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.service-card__link { margin-top: auto; margin-right: 2.75rem; }
/* Whole card is clickable via the CTA link */
.service-card__link::after { content: ""; position: absolute; inset: 0; }
.service-card__link:focus-visible { outline: none; }
.service-card:has(.service-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.service-card .circle-arrow { position: absolute; right: 1rem; bottom: 0.75rem; }
.service-card:hover .circle-arrow { background: var(--blue-600); border-color: var(--blue-600); color: var(--white); }

@media (min-width: 1024px) and (max-width: 1199.98px) {
  .service-card .circle-arrow { display: none; }
  .service-card__link { margin-right: 0; }
}
@media (max-width: 1023.98px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
  .service-card__media { aspect-ratio: 520 / 200; }
}
@media (max-width: 599.98px) {
  .card-grid { grid-template-columns: 1fr; gap: 1rem; }
  .service-card__media { aspect-ratio: 520 / 170; }
}

/* Market strip */
.market-strip { padding-block: 0 var(--space-4); }
.market-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 3.75rem;
  padding-block: 0.625rem;
}
.market-strip__title {
  flex: none;
  max-width: 13rem;
  color: var(--navy-900);
  font-size: 0.625rem;
  line-height: 1.5;
}
.market-strip__list {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
}
.market-strip__list li {
  flex: 1;
  padding-inline: var(--space-3);
  border-left: 1px solid var(--line-strong);
  color: var(--navy-900);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .market-strip__title { max-width: none; white-space: nowrap; }
}
@media (max-width: 899.98px) {
  .market-strip__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-block: var(--space-5); }
  .market-strip__title { max-width: none; }
  .market-strip__list { flex-wrap: wrap; justify-content: flex-start; width: 100%; row-gap: var(--space-3); }
  .market-strip__list li { flex: 0 0 auto; padding-inline: var(--space-4); font-size: var(--fs-base); }
  .market-strip__list li:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 599.98px) {
  .market-strip__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .market-strip__list li { padding: 0; border: 0; text-align: left; white-space: normal; }
}

/* Irish business at a glance */
.stats { padding-block: 0; }
.stats__panel { padding-block: 1.1875rem 1rem; }
.stats__title { color: var(--white); font-size: 0.6875rem; }
.stats__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.5rem;
}
.stat { padding: 0.125rem 1rem 0.125rem 0; }
.stat + .stat { padding-left: clamp(1.25rem, 2.6vw, 2.25rem); border-left: 1px solid rgb(255 255 255 / 0.2); }
.stat__value {
  color: var(--white);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 1.5rem + 1.1vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.stat__label {
  max-width: 15rem;
  margin-top: 0.3125rem;
  color: #e6ecf5;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
}
.stats__source {
  margin-top: 0.875rem;
  color: var(--silver-300);
  font-size: 0.75rem;
  line-height: 1.5;
}
.stats__source a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.stats__source a:hover { color: var(--blue-300); }
@media (max-width: 899.98px) {
  .stats__panel { padding-block: var(--space-5) var(--space-4); }
  .stats__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) 0; margin-top: var(--space-4); }
  .stat, .stat + .stat { padding: 0 var(--space-4) 0 0; border: 0; }
  .stat:nth-child(even) { padding: 0 0 0 var(--space-4); border-left: 1px solid rgb(255 255 255 / 0.2); }
  .stats__source { margin-top: var(--space-4); }
}
@media (max-width: 599.98px) {
  .stat__label { font-size: 0.8125rem; }
}

/* Business services intro */
.intro { padding-block: var(--space-8) var(--space-6); }
.intro__title {
  color: var(--heading);
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.intro__body {
  max-width: 72rem;   /* effectively the full content width (--container) */
  margin-top: var(--space-3);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.intro__body p + p { margin-top: 0.75rem; }
.intro__body a {
  color: var(--link);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.intro__body a:hover { color: var(--blue-650); text-decoration-thickness: 2px; }
@media (max-width: 899.98px) {
  .intro { padding-block: var(--space-7) var(--space-1); }
}

/* Guides */
.guides { padding-block: 0.875rem 0.875rem; }
.guides__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.71fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}
.feature-guide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(90deg, var(--pale-200) 0, #e8eef6 100%);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature-guide__content {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  max-width: 23rem;
  padding: 1.125rem 1.5rem 1.25rem 1.625rem;
}
.feature-guide__title {
  margin-top: 0.375rem;
  font-size: 1.75rem;
  font-variation-settings: "opsz" 48;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.feature-guide__text {
  margin-top: 0.625rem;
  color: var(--grey-700);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.feature-guide .btn { margin-top: 0.875rem; }
.feature-guide__media {
  grid-area: 1 / 1;
  justify-self: end;
  width: 58%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36%);
}
.feature-guide__media img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }

.article-list { display: flex; flex-direction: column; }
.article-row {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
.article-row + .article-row { padding-top: 0.5rem; }
.article-row:last-child { border-bottom: 0; }
.article-row__thumb {
  width: 7rem;
  height: 3.75rem;
  object-fit: cover;
  border-radius: 2px;
}
.article-row__cat {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--grey-700);
}
.article-row__title {
  margin-top: 0.125rem;
  font-size: 0.9375rem;
  line-height: 1.2;
}
.article-row__title a { color: var(--heading); text-decoration: none; }
.article-row__title a::after { content: ""; position: absolute; inset: 0; }
.article-row__title a:focus-visible { outline: none; }
.article-row:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.article-row:hover .article-row__title a { color: var(--blue-600); }
.article-row__arrow { color: var(--blue-600); margin-right: 0.25rem; transition: transform 0.15s ease; }
.article-row:hover .article-row__arrow { transform: translateX(3px); }

/* Desktop: the article column takes the featured card's height. The first
   row's content sits flush with the card top and the last row's with its
   bottom; the spare height is shared out (1 : 2 : 1) so both gaps between rows
   are equal and each separator sits in the middle of its gap. */
@media (min-width: 900px) {
  .guides__inner { align-items: stretch; }
  .article-list { justify-content: space-between; }
  .article-row, .article-row + .article-row { flex: 1 1 auto; padding-block: 0; }
  .article-row:nth-child(2) { flex-grow: 2; }
  .article-row:first-child { align-content: start; }
  .article-row:last-child { align-content: end; }
}
@media (max-width: 899.98px) {
  .guides { padding-block: var(--space-7); }
  .guides__inner { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 599.98px) {
  .feature-guide { grid-template-rows: auto auto; }
  .feature-guide__content { grid-area: 1 / 1; max-width: none; padding: 1.5rem 1.25rem 1.25rem; }
  .feature-guide__title { font-size: 1.625rem; }
  .feature-guide__media {
    grid-area: 2 / 1;
    width: 100%;
    height: 11rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  }
  .article-row { grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: 1rem; }
  .article-row__thumb { width: 5.5rem; height: 3.5rem; }
  .article-row__arrow { margin-right: 0; }
}

/* Why choose */
.why { padding-block: var(--space-4) var(--space-8); }
.why__panel { padding-block: 0.75rem 0.875rem; background: var(--white); border-color: var(--line-strong); }
.why__title { font-size: var(--fs-xs); color: var(--grey-700); }
.why__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  margin-top: 0.375rem;
}
.why__list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.125rem 0.5rem 0.125rem 0;
  color: var(--navy-900);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.why__list li + li { padding-left: clamp(1rem, 1.8vw, 1.5rem); border-left: 1px solid var(--line-strong); }
.why__list span { max-width: 12rem; text-wrap: balance; }
.why__list li:last-child span { white-space: nowrap; }
.why__list .icon { width: 2.125rem; height: 2.125rem; color: var(--navy-900); }
@media (min-width: 1000px) and (max-width: 1099.98px) {
  .why__list li { gap: 0.625rem; padding-right: 0.25rem; }
  .why__list .icon { width: 2rem; height: 2rem; }
}
@media (max-width: 999.98px) {
  .why__panel { padding-block: var(--space-6); }
  .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin-top: var(--space-4); }
  .why__list li, .why__list li + li { padding: 0; border: 0; gap: var(--space-4); }
}
@media (max-width: 599.98px) {
  .why__list { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* 9. Footer */
.site-footer {
  background: var(--navy-900);   /* must match the navy canvas of stuama-logo-footer-navy.webp */
  color: #c6d0de;
  font-size: var(--fs-sm);
}
.site-footer a { color: #e8edf5; text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.site-footer :focus-visible { outline-color: var(--focus-on-dark); }
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  gap: var(--space-8);
  padding-block: 3rem 2.5rem;
}
.site-footer__brand p { max-width: 15rem; margin-top: var(--space-4); line-height: 1.5; }
.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
.site-footer__heading {
  margin-bottom: var(--space-3);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
}
.site-footer__col ul { padding: 0; list-style: none; }
.site-footer__col li + li { margin-top: var(--space-2); }
.site-footer__bottom {
  padding-block: var(--space-5);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.8125rem;
}
@media (max-width: 899.98px) {
  .site-footer__top { grid-template-columns: 1fr; gap: var(--space-7); }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
}

/* 10. Service hub pages (first used by /card-payments/) --------------------
   Built from the homepage tokens and components so future hubs (accounting
   software, business websites, business insurance) can reuse them. */

/* Hub hero — navy band like the homepage. From 900px the category photo uses
   the homepage hero__media treatment (see section 8): full-height, flush to the
   right edge and faded into the navy. Below 900px it sits in a contained frame. */
.hub-hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--white);
}
.hub-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  padding-block: 1.75rem 2.25rem;
}
.hub-hero__title {
  margin-top: 0.625rem;
  color: var(--white);
  font-size: clamp(2.25rem, 1.45rem + 2.7vw, 3.25rem);
  font-variation-settings: "opsz" 60;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.hub-hero__lede {
  max-width: 31rem;
  margin-top: 0.875rem;
  color: #e6ecf5;
  font-size: var(--fs-md);
  line-height: 1.45;
}
.hub-hero .btn--lg { margin-top: 1.25rem; }
.hub-hero :focus-visible { outline-color: var(--focus-on-dark); }
.hub-hero__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius);
  background: var(--navy-800);
}
.hub-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
@media (min-width: 900px) {
  .hub-hero__content { position: relative; z-index: 1; }
  .hub-hero__media {
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: none;
  }
  /* Anchor slightly right of centre so narrower crops keep the whole terminal. */
  .hub-hero__media img { object-position: 62% 50%; }
}
@media (max-width: 899.98px) {
  .hub-hero__inner { grid-template-columns: 1fr; padding-block: 1.5rem 1.75rem; }
  .hub-hero__media { aspect-ratio: 16 / 8; }
  .hub-hero__media img { object-position: 55% 55%; }
}
@media (max-width: 599.98px) {
  .hub-hero__lede { font-size: var(--fs-base); }
  .hub-hero .btn--lg { width: 100%; }
  .hub-hero__media { aspect-ratio: 16 / 9; }
}

/* Breadcrumb (on navy) */
.breadcrumb { margin-bottom: 1.125rem; font-size: 0.8125rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; color: #d5deeb; }
.breadcrumb li + li::before { content: "/"; margin-inline: 0.5rem; color: var(--silver-400); }
.breadcrumb a { color: var(--white); text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.4); text-underline-offset: 3px; }
.breadcrumb a:hover { text-decoration-color: currentColor; }

/* On-this-page links */
.page-nav { border-bottom: 1px solid var(--line); background: var(--white); }
.page-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-block: 0.75rem;
}
.page-nav__list a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--navy-900);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
}
.page-nav__list a:hover { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599.98px) {
  .page-nav__list { gap: 0.125rem 1rem; }
  .page-nav__list a { font-size: 0.8125rem; }
}

/* Section scaffolding */
.hub-section { padding-block: var(--space-9) 0; }
.hub-section--pale { margin-top: var(--space-9); padding-block: var(--space-9); background: var(--pale-100); border-block: 1px solid var(--line); }
.hub-section--pale + .hub-section { padding-top: var(--space-9); }
.hub-section--pale + .hub-section--pale { margin-top: 0; border-top: 0; }
.hub-section__head { max-width: 46rem; margin-bottom: var(--space-6); }
/* Short top-level hub prose (section intros, notes under a grid): run to the grid's width (--container, 1060px) rather than a reading measure. */
.hub-section__head--wide,
.compare__note { max-width: var(--container); }
.hub-section__title {
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hub-section__lede { margin-top: var(--space-3); color: var(--grey-700); font-size: var(--fs-base); line-height: 1.6; }
.hub-section p a, .hub-intro p a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hub-section p a:hover { color: var(--blue-650); text-decoration-thickness: 2px; }
@media (max-width: 899.98px) {
  .hub-section { padding-top: var(--space-8); }
  .hub-section--pale { margin-top: var(--space-8); padding-block: var(--space-8); }
  .hub-section--pale + .hub-section { padding-top: var(--space-8); }
}

/* Intro */
.hub-intro { padding-block: var(--space-8) 0; }
.hub-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.hub-intro__copy p { margin-top: var(--space-3); font-size: 0.9375rem; line-height: 1.65; }
.hub-intro__copy p:last-child { color: var(--grey-600); font-size: var(--fs-sm); }
.hub-intro__needs {
  padding: var(--space-5) var(--space-6);
  background: var(--pale-200);
  border: 1px solid var(--pale-300);
  border-radius: var(--radius);
}
.hub-intro__needs-title { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--navy-900); }
.tick-list { margin-top: var(--space-3); }
.tick-list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--grey-700);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.tick-list li + li { margin-top: 0.625rem; }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.3em;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--blue-600);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tick-list strong { color: var(--navy-900); font-weight: 600; }
@media (max-width: 899.98px) {
  .hub-intro__inner { grid-template-columns: 1fr; }
}

/* Provider comparison — cards on a shared grid. On wide screens each card's
   rows sit on a subgrid so the same fact lines up across providers; below
   that the cards stack and read top to bottom, with no sideways scrolling. */
.compare { scroll-margin-top: var(--space-2); }  /* spacing and background from .hub-section--pale */
.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}
.provider {
  display: grid;
  grid-row: span 7;           /* head + 5 facts + CTA */
  grid-template-rows: subgrid;
  row-gap: 0;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.provider__head { padding: 1.125rem 1.25rem 1rem; background: var(--navy-900); border-bottom: 1px solid var(--line); }
.provider__name { color: var(--white); font-size: 1.375rem; line-height: 1.15; }
.provider__fit { margin-top: 0.375rem; color: #e6ecf5; font-size: var(--fs-sm); line-height: 1.45; }
.provider__facts {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin: 0;
  padding: 0.25rem 1.25rem;
}
.provider__facts > div { padding-block: 0.75rem; }
.provider__facts > div + div { border-top: 1px solid var(--line); }
.provider__facts dt {
  color: var(--grey-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.provider__facts dd { margin: 0.25rem 0 0; color: var(--text); font-size: var(--fs-sm); line-height: 1.5; }
.provider__facts dd ul { margin: 0; padding-left: 1.1rem; }
.provider__facts dd li + li { margin-top: 0.25rem; }
.provider__facts dd small { display: block; margin-top: 0.25rem; color: var(--grey-600); font-size: 0.8125rem; }
.provider__cta { align-self: end; padding: 0.875rem 1.25rem 1.125rem; border-top: 1px solid var(--line); }
.compare__note { margin-top: var(--space-5); color: var(--grey-600); font-size: 0.8125rem; line-height: 1.55; }
@media (max-width: 1023.98px) {
  .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699.98px) {
  .provider-grid { grid-template-columns: 1fr; }
  .provider, .provider__facts { grid-row: auto; grid-template-rows: none; }
}

/* How to choose */
/* Shared info-card grid: "How to choose" factors and "Taking card payments online".
   Grid items stretch, so cards in the same row share a height. */
.factor-grid,
.online-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
}
.factor,
.online-list > div {
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--pale-100);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
}
.factor__title { font-size: 1.125rem; line-height: 1.25; }
.factor p { margin-top: var(--space-2); color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 899.98px) {
  .factor-grid, .online-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (max-width: 599.98px) {
  .factor-grid, .online-list { grid-template-columns: 1fr; gap: var(--space-3); }
  .factor, .online-list > div { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* Fees */
.fees__panel { padding-block: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); border-color: var(--line-strong); }
.fees__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.fees__copy > p { margin-top: var(--space-3); color: var(--grey-700); line-height: 1.6; }
.fee-list { margin: var(--space-5) 0 0; }
.fee-list > div { padding-block: 0.75rem; border-top: 1px solid var(--line); }
.fee-list dt { color: var(--navy-900); font-weight: 600; }
.fee-list dd { margin: 0.25rem 0 0; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
.fees__example {
  padding: var(--space-5) var(--space-6);
  background: var(--pale-200);
  border: 1px solid var(--pale-300);
  border-radius: var(--radius);
}
.fees__example-title { font-size: 1.25rem; line-height: 1.2; }
.fees__example > p { margin-top: 0.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.5; }
.fees__example .fees__example-note { margin-top: var(--space-4); }
.table-wrap { margin-top: var(--space-4); }
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.data-table th, .data-table td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th { color: var(--navy-900); font-weight: 600; background: var(--pale-100); }
.data-table tbody th { color: var(--grey-900); font-weight: 500; }
.data-table td { white-space: nowrap; }
.data-table strong { color: var(--navy-900); }
.data-table__sub { display: block; color: var(--grey-600); font-size: 0.75rem; font-weight: 500; }
@media (max-width: 899.98px) {
  .fees__inner { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
  .fees__example { padding: var(--space-4); }
  .data-table th, .data-table td { padding: 0.5rem; }
}

/* Card machines */
.device-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}
.device {
  display: flex;
  flex-direction: column;
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy-900);
  border-radius: var(--radius-sm);
}
.device__title { font-size: 1.125rem; line-height: 1.25; }
.device p { margin-top: 0.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
.device .device__suits { margin-top: auto; padding-top: 0.875rem; color: var(--navy-900); font-weight: 500; }
.device__suits span { display: block; margin-bottom: 0.125rem; color: var(--grey-700); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 1023.98px) {
  .device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .device-grid { grid-template-columns: 1fr; }
}

/* Online payments (cards share the info-card styles above; white on the pale section) */
.online-list > div { background: var(--white); }
.online-list dt { color: var(--navy-900); font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.online-list dd { margin: var(--space-2) 0 0; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }

/* Business types (navy panel) */
.types__panel { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.types__title { color: var(--white); }
.type-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--space-6);
}
.type { padding-right: 1.125rem; }
.type + .type { padding-left: 1.125rem; border-left: 1px solid rgb(255 255 255 / 0.2); }
.type__title { color: var(--white); font-size: 1.1875rem; line-height: 1.2; }
.type p { margin-top: 0.5rem; color: #d5deeb; font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 1023.98px) {
  .type-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) 0; }
  .type, .type + .type { padding: 0 var(--space-5) 0 0; border: 0; }
  .type:nth-child(even) { padding: 0 0 0 var(--space-5); border-left: 1px solid rgb(255 255 255 / 0.2); }
}
@media (max-width: 599.98px) {
  .type-list { grid-template-columns: 1fr; gap: 0; }
  .type, .type + .type, .type:nth-child(even) { padding: var(--space-4) 0; border: 0; }
  .type + .type { border-top: 1px solid rgb(255 255 255 / 0.2); }
}

/* Card payments in Ireland */
.ireland__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.ireland__copy p { margin-top: var(--space-3); line-height: 1.65; }
.ireland__stats {
  padding: var(--space-5) var(--space-6);
  background: var(--pale-200);
  border: 1px solid var(--pale-300);
  border-radius: var(--radius);
}
.ireland__stats .stat__value { color: var(--navy-900); }
.ireland__stats .stat__label { color: var(--grey-700); max-width: none; }
.ireland__stats li + li { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line-strong); }
.ireland__source { margin-top: var(--space-4); color: var(--grey-600); font-size: 0.75rem; line-height: 1.5; }
.ireland__source a { color: var(--link); }
@media (max-width: 899.98px) {
  .ireland__inner { grid-template-columns: 1fr; }
}

/* FAQ */
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.25rem, 4vw, 3rem);
  margin-top: var(--space-5);
}
.faq { padding-block: 1rem; border-top: 1px solid var(--line-strong); }
.faq__q { font-size: 1.125rem; line-height: 1.3; }
.faq p { margin-top: 0.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 899.98px) {
  .faq-list { grid-template-columns: 1fr; }
}

/* Closing CTA */
.hub-cta { padding-block: var(--space-9) var(--space-9); }
.hub-cta__panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-8);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}
.hub-cta__copy { max-width: 40rem; }
.hub-cta__title { color: var(--white); font-size: var(--fs-h2); line-height: 1.12; text-wrap: balance; }
.hub-cta__copy p { margin-top: var(--space-3); color: #e6ecf5; line-height: 1.6; }
.hub-cta__panel .btn { flex: none; }
.hub-cta__more { margin-top: var(--space-4); color: var(--grey-700); font-size: var(--fs-sm); }
.hub-cta__more a { color: var(--link); text-underline-offset: 3px; }
@media (max-width: 899.98px) {
  .hub-cta { padding-block: var(--space-8); }
  .hub-cta__panel { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599.98px) {
  .hub-cta__panel .btn { width: 100%; }
}

/* 10b. Accounting Software hub (/accounting-software/) ----------------------
   Page-specific pieces built on the section 10 hub scaffolding. Short hub copy
   runs to the grid width (--container), never to an article reading measure. */

/* Hero: the lede fills its column rather than the shared 31rem measure. The
   category image's laptop sits right of centre, so crops keep the screen. */
.hub-hero__lede--fill { max-width: 34rem; }
.hub-hero__media--accounting img { object-position: 60% 45%; }
@media (min-width: 900px) {
  .hub-hero__media--accounting img { object-position: 70% 50%; }
}

/* The comparison follows the on-this-page bar directly, so no white gap above it. */
.hub-section--first { margin-top: 0; border-top: 0; }

/* Provider cards in pairs: four providers read as 2 x 2 rather than four narrow columns. */
.provider-grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 699.98px) {
  .provider-grid--pairs { grid-template-columns: 1fr; }
}
.provider__facts dd a,
.feature-table a,
.fee-list dd a,
.online-list dd a,
.vat__aside a,
.switch__aside a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Features side by side. On phones each provider row becomes a labelled block
   (td[data-label]) so nothing scrolls sideways. */
.feature-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.feature-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.feature-table th, .feature-table td { padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.feature-table tbody tr:last-child > * { border-bottom: 0; }
.feature-table thead th { background: var(--navy-900); color: var(--white); font-family: var(--font-serif); font-size: 1.0625rem; font-weight: 700; }
.feature-table thead th:first-child { font-family: var(--font-sans); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: #d5deeb; }
.feature-table tbody th { width: 19%; background: var(--pale-100); color: var(--navy-900); font-weight: 600; }
.feature-table td { width: 20.25%; color: var(--grey-900); }
.feature-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.feature-table__sub { display: block; margin-top: 0.125rem; color: var(--grey-600); font-size: 0.8125rem; }
.feature-table__na { color: var(--grey-600); }
@media (max-width: 767.98px) {
  .feature-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .feature-table, .feature-table tbody, .feature-table tr, .feature-table th, .feature-table td { display: block; width: auto; }
  .feature-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .feature-table tbody tr { margin-bottom: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
  .feature-table tbody th { width: auto; padding: 0.625rem 0.875rem; background: var(--navy-900); color: var(--white); font-family: var(--font-serif); font-size: 1.0625rem; border-bottom: 0; }
  .feature-table td { position: relative; padding: 0.5rem 0.875rem 0.5rem calc(38% + 0.875rem); }
  .feature-table tbody tr:nth-child(even) td { background: var(--white); }
  .feature-table td::before { content: attr(data-label); position: absolute; top: 0.5rem; left: 0.875rem; width: calc(38% - 0.875rem); color: var(--grey-700); font-weight: 600; }
  .feature-table tbody tr:last-child > td:last-child { border-bottom: 0; }
}

/* How to choose: white cards in balanced columns, so each card keeps its natural length. */
.factor-flow { columns: 3; column-gap: var(--space-5); }
.factor-flow .factor { break-inside: avoid; margin-bottom: var(--space-5); background: var(--white); }
.factor p a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899.98px) {
  .factor-flow { columns: 2; column-gap: var(--space-4); }
  .factor-flow .factor { margin-bottom: var(--space-4); }
}
@media (max-width: 599.98px) {
  .factor-flow { columns: 1; }
  .factor-flow .factor { margin-bottom: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* What accounting software can do */
.task-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
}
.task { padding-top: 0.875rem; border-top: 3px solid var(--blue-600); }
.task__title { font-size: 1.125rem; line-height: 1.25; }
.task p { margin-top: 0.375rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 899.98px) {
  .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .task-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* VAT: white panel with the explanation beside a "what software does not do" box. */
.vat__panel { padding-block: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); border-color: var(--line-strong); }
.vat__head { max-width: var(--container); }
.vat__head > p { margin-top: var(--space-3); color: var(--grey-700); line-height: 1.6; }
.vat__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  margin-top: var(--space-2);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.vat__aside {
  margin-top: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--pale-200);
  border: 1px solid var(--pale-300);
  border-radius: var(--radius);
}
.vat__aside-title { font-size: 1.25rem; line-height: 1.2; }
.vat__aside > p { margin-top: var(--space-4); color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
.vat__aside .vat__sources { padding-top: var(--space-4); border-top: 1px solid var(--line-strong); font-size: 0.8125rem; }
.tick-list--cross li::before {
  top: 0.55em;
  left: 0.125rem;
  width: 0.7rem;
  height: 2px;
  border: 0;
  background: var(--navy-900);
  transform: none;
}
@media (max-width: 899.98px) {
  .vat__inner { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
  .vat__aside { padding: var(--space-4); }
}

/* A short paragraph closing a section, at the grid width. */
.hub-section__foot { max-width: var(--container); margin-top: var(--space-6); color: var(--grey-700); line-height: 1.6; }

/* Bank feeds: numbered steps */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow;
}
.flow-step {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--pale-100);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  counter-increment: flow;
}
.flow-step::before {
  content: counter(flow);
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.flow-step__title { font-size: 1.125rem; line-height: 1.25; }
.flow-step p { margin-top: var(--space-2); color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 899.98px) {
  .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (max-width: 599.98px) {
  .flow-steps { grid-template-columns: 1fr; gap: var(--space-3); }
  .flow-step { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* Payroll: three ways it is handled */
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.125rem;
}
.option {
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy-900);
  border-radius: var(--radius-sm);
}
.option__label { color: var(--grey-700); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.option__title { margin-top: 0.25rem; font-size: 1.1875rem; line-height: 1.25; }
.option p:not(.option__label) { margin-top: 0.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 899.98px) {
  .option-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Sole traders and limited companies: two columns under navy headers */
.split-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.split-compare__col {
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.split-compare__title { padding: 0.875rem 1.25rem; background: var(--navy-900); color: var(--white); font-size: 1.25rem; }
.split-compare__col .tick-list { margin: 0; padding: 1.125rem 1.25rem 0; }
.split-compare__col > p { margin: var(--space-4) 1.25rem 1.25rem; padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 767.98px) {
  .split-compare { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Accountant access (navy panel) */
.accountant__panel { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.accountant__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.accountant__title { color: var(--white); }
.accountant__copy p { margin-top: var(--space-3); color: #e6ecf5; line-height: 1.6; }
.accountant__list li { padding-block: 0.875rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
.accountant__list li:first-child { padding-top: 0; border-top: 0; }
.accountant__list h3 { color: var(--white); font-size: 1.125rem; line-height: 1.25; }
.accountant__list p { margin-top: 0.25rem; color: #d5deeb; font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 899.98px) {
  .accountant__inner { grid-template-columns: 1fr; }
  .accountant__list li:first-child { padding-top: 0.875rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
}

/* Switching: steps flow in rows of four, with a short last row centred as a
   group (4 + 3 on desktop). The records note sits centred underneath as a
   wide callout rather than another grid item. */
.switch__inner { counter-reset: switch; }
.switch-list {
  --switch-cols: 4;
  --switch-gap: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6) var(--switch-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.switch-list li {
  position: relative;
  flex: 0 0 calc((100% - (var(--switch-cols) - 1) * var(--switch-gap)) / var(--switch-cols));
  padding-left: 2.5rem;
  counter-increment: switch;
}
.switch-list li::before {
  content: counter(switch);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-900);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.switch-list h3 { font-size: 1.0625rem; line-height: 1.3; }
.switch-list p { margin-top: 0.25rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
.switch__aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  align-items: baseline;
  max-width: 50rem;
  margin: var(--space-8) auto 0;
  padding: var(--space-5) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--navy-900);
  border-radius: var(--radius-sm);
}
.switch__aside-title { font-size: 1.1875rem; line-height: 1.25; white-space: nowrap; }
.switch__aside p { color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
@media (max-width: 1023.98px) {
  .switch-list { --switch-cols: 3; }
}
@media (max-width: 699.98px) {
  .switch-list { --switch-cols: 2; }
  .switch__aside { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
  .switch-list { --switch-cols: 1; row-gap: var(--space-4); }
  .switch__aside { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); }
  .switch__aside-title { white-space: normal; }
}

/* 11. Guide articles (first used by the /guides/ card payments articles) -----
   A reading layout built from the same tokens as the hubs: a pale header band
   with breadcrumb, H1 and standfirst; an article column at a comfortable
   measure; and a sticky "In this guide" list beside it on wide screens.
   Hero image: add <figure class="guide-hero"> between .guide-header and
   .guide-layout (see README, "Guide articles"). The page needs no image. */

/* Header band */
.guide-header { background: var(--pale-100); border-bottom: 1px solid var(--line); }
.guide-header__inner { padding-block: 1.5rem 2.25rem; }
.guide-header__content { max-width: 48rem; }
.breadcrumb--dark li { color: var(--grey-600); }
.breadcrumb--dark li + li::before { color: var(--silver-400); }
.breadcrumb--dark a { color: var(--navy-900); text-decoration-color: rgb(0 26 70 / 0.35); }
.guide-header__title {
  margin-top: 0.625rem;
  font-size: clamp(2rem, 1.35rem + 2.2vw, 2.875rem);
  font-variation-settings: "opsz" 60;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.guide-header__standfirst {
  max-width: 42rem;
  margin-top: 0.875rem;
  color: var(--grey-700);
  font-size: var(--fs-md);
  line-height: 1.55;
}
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 1.125rem;
  color: var(--grey-600);
  font-size: 0.8125rem;
}
.guide-meta li + li { padding-left: 1rem; border-left: 1px solid var(--line-strong); }

/* Optional hero image, contained within the page width */
.guide-hero { margin: var(--space-7) auto 0; }
.guide-hero img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--pale-200);
}
/* The supplied heroes are wide compositions (about 2.8:1), so phones keep the
   16:7 crop too: a taller crop cuts off subjects near the left and right edges. */
@media (max-width: 599.98px) {
  .guide-hero { margin-top: var(--space-5); }
}

/* Layout: the short answer (.guide-lead), the aside and the article body, in
   that source order, so on narrow screens the answer comes first and the
   contents list sits between it and the article. On wide screens the aside
   spans both rows of the right-hand column. */
.guide-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15.5rem;
  gap: 1.125rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-top: var(--space-8);
}
.guide-lead { grid-column: 1; grid-row: 1; min-width: 0; }
.guide-aside { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: var(--space-6); }
.guide-body { grid-column: 1; grid-row: 2; min-width: 0; }
.guide-toc__title,
.guide-aside__hub-title {
  color: var(--grey-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.guide-toc ol { margin: 0.625rem 0 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.guide-toc li a {
  display: block;
  margin-left: -2px;
  padding: 0.3125rem 0 0.3125rem 0.875rem;
  border-left: 2px solid transparent;
  color: var(--navy-900);
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-decoration: none;
}
.guide-toc li a:hover { border-left-color: var(--blue-600); color: var(--blue-600); }
.guide-aside__hub {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--pale-200);
  border: 1px solid var(--pale-300);
  border-radius: var(--radius);
}
.guide-aside__hub p:not([class]) { margin-top: 0.375rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.5; }
.guide-aside__hub .text-link { margin-top: 0.625rem; }
@media (max-width: 1023.98px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-top: var(--space-6); }
  .guide-lead, .guide-aside, .guide-body { grid-column: 1; grid-row: auto; }
  .guide-aside { position: static; }
  .guide-toc { padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); }
  .guide-toc ol { columns: 2; column-gap: var(--space-6); border-left: 0; }
  .guide-toc li { break-inside: avoid; }
  .guide-toc li a { margin-left: 0; padding-left: 0; border-left: 0; }
  .guide-aside__hub { display: none; }  /* the article links to the hub in context and at the end */
}
@media (max-width: 599.98px) {
  .guide-toc ol { columns: 1; }
}

/* Article typography */
.prose { max-width: 43rem; color: var(--text); font-size: 1.0625rem; line-height: 1.7; }
.prose > * + * { margin-top: 1.125rem; }
.prose h2 {
  margin-top: 3rem;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
  scroll-margin-top: var(--space-4);
}
.prose h3 { margin-top: 2rem; font-size: 1.25rem; line-height: 1.25; }
.prose h2 + *, .prose h3 + * { margin-top: 0.75rem; }
.prose > :first-child { margin-top: 0; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--blue-700); }
.prose strong { color: var(--navy-900); font-weight: 650; }
.prose a:not([class]) { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:not([class]):hover { color: var(--blue-650); text-decoration-thickness: 2px; }
@media (max-width: 599.98px) {
  .prose { font-size: 1rem; }
  .prose h2 { margin-top: 2.5rem; }
}

/* Short answer near the top of each article */
.key-answer {
  padding: var(--space-5) var(--space-6);
  background: var(--pale-200);
  border: 1px solid var(--pale-300);
  border-left: 4px solid var(--blue-600);
  border-radius: var(--radius);
}
.key-answer__label { color: var(--navy-900); font-size: var(--fs-sm); font-weight: 700; }
.key-answer p + p, .key-answer p + ul, .key-answer ul { margin-top: 0.5rem; }
.key-answer ul { padding-left: 1.125rem; }
.key-answer li + li { margin-top: 0.25rem; }
.prose .key-answer { font-size: var(--fs-base); line-height: 1.6; }

/* Numbered steps */
.steps { padding: 0; list-style: none; counter-reset: step; }
.steps > li {
  position: relative;
  padding-left: 3rem;
  counter-increment: step;
}
.steps > li + li { margin-top: 1rem; }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
}
.steps strong { display: block; color: var(--navy-900); }
.steps a { color: var(--link); text-underline-offset: 3px; }

/* Callout for a practical tip or caution */
.callout {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.callout__label { display: block; margin-bottom: 0.25rem; color: var(--navy-900); font-size: var(--fs-sm); font-weight: 700; }

/* Tables: wrap text where possible; scroll sideways inside the frame only
   when a table is genuinely wider than the screen. */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.table-scroll:focus-visible { outline-offset: 2px; }
.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.guide-table caption {
  padding: 0.75rem 0.875rem;
  color: var(--navy-900);
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.guide-table th, .guide-table td { padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.guide-table tbody tr:last-child > * { border-bottom: 0; }
.guide-table thead th { background: var(--pale-100); color: var(--navy-900); font-weight: 600; }
.guide-table tbody th { color: var(--navy-900); font-weight: 600; }
.guide-table .num { text-align: right; white-space: nowrap; }
.guide-table--wide { min-width: 36rem; }
.table-note { color: var(--grey-600); font-size: var(--fs-sm); line-height: 1.55; }
.prose .table-scroll + .table-note { margin-top: 0.625rem; }
@media (max-width: 599.98px) {
  .guide-table th, .guide-table td { padding: 0.5rem 0.625rem; }
}

/* FAQ */
.guide-faq { margin-top: 1rem; }
.guide-faq > div { padding-block: 1rem; border-top: 1px solid var(--line-strong); }
.guide-faq > div:last-child { border-bottom: 1px solid var(--line-strong); }
.prose .guide-faq h3 { margin-top: 0; font-size: 1.125rem; }
.guide-faq p { margin-top: 0.5rem; }

/* Where to go next — contextual links to the hub and sibling guides */
.guide-next { display: grid; gap: var(--space-3); }
.guide-next li {
  position: relative;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.guide-next li + li { margin-top: 0; }
.guide-next li:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.guide-next a { color: var(--navy-900); font-family: var(--font-serif); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
.guide-next a::after { content: ""; position: absolute; inset: 0; }
.guide-next a:focus-visible { outline: none; }
.guide-next li:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.guide-next li:hover a { color: var(--blue-600); }
.guide-next p { margin-top: 0.25rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.5; }

/* Disclaimer line at the end of an article */
.guide-disclaimer { color: var(--grey-600); font-size: var(--fs-sm); line-height: 1.55; }

/* Phones: wide tables become one labelled block per row (labels come from
   each cell's data-label, which repeats its column heading). */
@media (max-width: 599.98px) {
  .guide-table--wide { min-width: 0; }
  .guide-table--wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .guide-table--wide tr { display: block; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--line); }
  .guide-table--wide tbody tr:last-child { border-bottom: 0; }
  .guide-table--wide th, .guide-table--wide td { display: block; padding: 0; border: 0; }
  .guide-table--wide tbody th { margin-bottom: 0.25rem; font-size: var(--fs-base); }
  .guide-table--wide td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; padding-block: 0.1875rem; text-align: left; white-space: normal; }
  .guide-table--wide td::before { content: attr(data-label); color: var(--grey-600); font-weight: 500; }
  .guide-table--wide .num { text-align: left; }
}

/* Hub "guides" block (first used on /card-payments/) --------------------------
   The homepage featured-guide pattern adapted for a hub: one larger featured
   guide on the left, three guide rows on the right. Text-only by default; the
   optional image slots (.hub-guide-feature--with-media + __media, and
   .hub-guide-list__thumb) slot in without other layout changes. */
.hub-guides__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: stretch;
}
.hub-guide-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(90deg, var(--pale-200) 0, #e8eef6 100%);
  border: 1px solid var(--pale-300);
  border-left: 4px solid var(--navy-900);
  border-radius: var(--radius);
  overflow: hidden;
}
.hub-guide-feature__content { padding: 1.5rem 1.75rem 1.625rem; }
.hub-guide-feature__title {
  margin-top: 0.375rem;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
  font-variation-settings: "opsz" 48;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hub-guide-feature__text { max-width: 34rem; margin-top: 0.75rem; color: var(--grey-700); font-size: 0.9375rem; line-height: 1.55; }
.hub-guide-feature__points { margin-top: 1rem; }
.hub-guide-feature .btn { margin-top: 1.25rem; }
.hub-guide-feature--with-media { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.hub-guide-feature__media img { width: 100%; height: 100%; object-fit: cover; }
/* Tall two-column crop of a wide image: keep the left-hand subject in frame. */
.hub-guide-feature__media--focus-left img { object-position: 30% 50%; }

.hub-guide-list { display: flex; flex-direction: column; }
.hub-guide-list__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  flex: 1 1 auto;
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
}
.hub-guide-list__item:first-child { padding-top: 0.25rem; }
.hub-guide-list__item:last-child { padding-bottom: 0.25rem; border-bottom: 0; }
.hub-guide-list__item:has(.hub-guide-list__thumb) { grid-template-columns: 7rem minmax(0, 1fr) auto; }
.hub-guide-list__thumb { width: 7rem; height: 3.75rem; object-fit: cover; border-radius: 2px; }
.hub-guide-list__cat { color: var(--grey-700); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; }
.hub-guide-list__title { margin-top: 0.1875rem; font-size: 1.0625rem; line-height: 1.25; }
.hub-guide-list__title a { color: var(--heading); text-decoration: none; }
.hub-guide-list__title a::after { content: ""; position: absolute; inset: 0; }
.hub-guide-list__title a:focus-visible { outline: none; }
.hub-guide-list__item:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.hub-guide-list__item:hover .hub-guide-list__title a { color: var(--blue-600); }
.hub-guide-list__text { margin-top: 0.25rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.45; }
.hub-guide-list__arrow { color: var(--blue-600); margin-right: 0.25rem; transition: transform 0.15s ease; }
.hub-guide-list__item:hover .hub-guide-list__arrow { transform: translateX(3px); }
@media (max-width: 899.98px) {
  .hub-guides__inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .hub-guide-list__item:first-child { padding-top: 1rem; }
}
@media (max-width: 599.98px) {
  .hub-guide-feature__content { padding: 1.25rem 1.25rem 1.375rem; }
  .hub-guide-feature .btn { width: 100%; }
  .hub-guide-feature--with-media { grid-template-columns: 1fr; }
  .hub-guide-list__item:has(.hub-guide-list__thumb) { grid-template-columns: 5.5rem minmax(0, 1fr) auto; }
  .hub-guide-list__thumb { width: 5.5rem; height: 3.5rem; }
  .hub-guide-list__arrow { margin-right: 0; }
}

/* 12. Accounting guide components (first used by the /guides/ accounting articles)
   Small additions to the guide-article system in section 11, for comparison
   and decision content inside .prose. All are optional per article. */

/* Two-provider comparison table: a fixed first column so the two provider
   columns share the remaining width evenly. On phones it becomes labelled
   blocks via .guide-table--wide. */
.guide-table--duo { table-layout: fixed; }
/* Numeric tables: let column headings wrap on phones so four columns fit. */
@media (max-width: 599.98px) {
  .guide-table thead th.num { white-space: normal; }
}
.guide-table--duo thead th:first-child,
.guide-table--duo tbody th { width: 28%; }
@media (max-width: 599.98px) {
  .guide-table--duo { table-layout: auto; }
  .guide-table--duo thead th:first-child,
  .guide-table--duo tbody th { width: auto; }
}

/* Essentials vs optional: two side-by-side cards (stacked on phones) */
.needs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.needs-card {
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.needs-card--core {
  background: var(--pale-200);
  border-color: var(--pale-300);
  box-shadow: inset 0 3px 0 var(--blue-600);
}
.prose .needs-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.needs-card__intro { margin-top: 0.375rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.5; }
.needs-card .tick-list li { font-size: 0.9375rem; line-height: 1.5; }
.needs-card .tick-list li + li { margin-top: 0.5rem; }
.needs-card--optional .tick-list li::before {
  top: 0.62em;
  width: 0.4rem;
  height: 0.4rem;
  border: 2px solid var(--silver-400);
  border-radius: 50%;
  transform: none;
}
@media (max-width: 719.98px) {
  .needs-grid { grid-template-columns: 1fr; }
}

/* Numbered "kinds of" list: each option as a bordered block with a short
   label, a heading, a description and a two-line summary. */
.kind-list { display: grid; gap: var(--space-4); padding: 0; list-style: none; counter-reset: kind; }
.prose .kind-list > li + li { margin-top: 0; }
.kind-list > li {
  padding: 1.125rem 1.25rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy-900);
  border-radius: var(--radius);
  counter-increment: kind;
}
.kind-list__label { color: var(--grey-600); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.kind-list__label::before { content: "Type " counter(kind) " · "; }
.prose .kind-list h3 { margin-top: 0.25rem; }
.kind-list p { margin-top: 0.5rem; }
.kind-list dl { display: grid; gap: 0.375rem; margin: 0.875rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.5; }
.kind-list dl div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.75rem; }
.kind-list dt { color: var(--navy-900); font-weight: 600; }
.kind-list dd { margin: 0; color: var(--grey-700); }
@media (max-width: 599.98px) {
  .kind-list dl div { grid-template-columns: 1fr; gap: 0.125rem; }
}

/* Official sources used in an article, listed before the disclaimer */
.guide-sources { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.prose .guide-sources h2 { margin-top: 0; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.guide-sources ul { margin-top: 0.625rem; padding-left: 1.125rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.5; }
.prose .guide-sources li + li { margin-top: 0.3125rem; }

/* 10c. Business Websites hub (/business-websites/) --------------------------
   Page-specific pieces on the section 10 hub scaffolding, reusing the shared
   hub components where they fit (.feature-table, .online-list, .task-grid,
   .option-grid, .split-compare, .ireland__stats). Section intros use
   .hub-section__head--wide so they run to the grid width beneath them. */

/* Hero: the category image's monitor sits just right of centre. */
.hub-hero__media--websites img { object-position: 52% 40%; }
@media (min-width: 900px) {
  .hub-hero__media--websites img { object-position: 60% 50%; }
}
/* Desktop: nudge the image 0.5rem down so the top of the monitor has a little room;
   a short top fade hides the seam above it. */
@media (min-width: 1200px) {
  .hub-hero__media--websites img {
    object-position: 60% calc(50% + 0.5rem);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1rem);
    mask-image: linear-gradient(180deg, transparent 0, #000 1rem);
  }
}

/* Links inside list items and cards (paragraph links are styled in section 10). */
.route a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.own__panel p a { color: var(--white); text-decoration-color: rgb(255 255 255 / 0.5); }
.own__panel p a:hover { color: var(--white); text-decoration-color: currentColor; }

/* Four ways to get a website: 2 x 2 route cards with a navy head. */
.route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.route {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.route__head { padding: 1.125rem 1.25rem 1rem; background: var(--navy-900); }
.route__label { color: var(--blue-300); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.route__title { margin-top: 0.25rem; color: var(--white); font-size: 1.375rem; line-height: 1.15; }
.route__summary { margin-top: 0.375rem; color: #e6ecf5; font-size: var(--fs-sm); line-height: 1.5; }
.route .route__points { margin: 0; padding: 1.125rem 1.25rem 0; }
.route__watch {
  margin: auto 1.25rem 0;
  padding: var(--space-4) 0 1.25rem;
  color: var(--grey-700);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.route__points + .route__watch { margin-top: var(--space-4); border-top: 1px solid var(--line); }
.route__watch span {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--navy-900);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .route-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Cost components and builders vs custom: three-column tables. On phones each
   row becomes a labelled block (td[data-label]), as with .feature-table. */
.cost-table-wrap,
.versus-table-wrap {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.cost-table,
.versus-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.cost-table th, .cost-table td,
.versus-table th, .versus-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cost-table tbody tr:last-child > *,
.versus-table tbody tr:last-child > * { border-bottom: 0; }
.cost-table thead th,
.versus-table thead th { background: var(--navy-900); color: var(--white); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.versus-table thead th + th { font-family: var(--font-serif); font-size: 1.0625rem; letter-spacing: 0; text-transform: none; }
.cost-table tbody th,
.versus-table tbody th { background: var(--pale-100); color: var(--navy-900); font-weight: 600; }
.cost-table tbody th { width: 22%; }
.cost-table td:nth-of-type(1) { width: 24%; }
.cost-table td:nth-of-type(2) { color: var(--grey-700); }
.versus-table tbody th { width: 22%; }
.versus-table td { width: 39%; color: var(--grey-900); }
.cost-table tbody tr:nth-child(even) td,
.versus-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.cost-tag {
  display: inline-block;
  margin: 0 0.25rem 0.25rem 0;
  padding: 0.0625rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--grey-700);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.cost-tag--once { border-color: var(--pale-300); background: var(--pale-200); color: var(--navy-900); }
.cost-tag--recur { border-color: var(--blue-700); background: var(--blue-700); color: var(--white); }
@media (max-width: 767.98px) {
  .cost-table-wrap, .versus-table-wrap { border: 0; border-radius: 0; overflow: visible; }
  .cost-table, .cost-table tbody, .cost-table tr, .cost-table th, .cost-table td,
  .versus-table, .versus-table tbody, .versus-table tr, .versus-table th, .versus-table td { display: block; width: auto; }
  .cost-table thead, .versus-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cost-table tbody tr, .versus-table tbody tr { margin-bottom: var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
  .cost-table tbody th, .versus-table tbody th { width: auto; padding: 0.625rem 0.875rem; background: var(--navy-900); color: var(--white); font-family: var(--font-serif); font-size: 1.0625rem; border-bottom: 0; }
  .cost-table td, .versus-table td,
  .cost-table td:nth-of-type(1) { width: auto; padding: 0.5rem 0.875rem; }
  .cost-table td::before, .versus-table td::before { content: attr(data-label); display: block; margin-bottom: 0.125rem; color: var(--grey-700); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
  .cost-table tbody tr:nth-child(even) td, .versus-table tbody tr:nth-child(even) td { background: var(--white); }
  .cost-table tbody tr > td:last-child, .versus-table tbody tr > td:last-child { border-bottom: 0; }
}

/* Year one vs later years, beside "why quotes differ". */
.cost__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.25rem;
  margin-top: var(--space-6);
}
.cost__panel {
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--navy-900);
  border-radius: var(--radius-sm);
}
.cost__panel-title { font-size: 1.25rem; line-height: 1.2; }
.cost__panel > p { margin-top: var(--space-3); color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
.cost__years { margin: var(--space-4) 0 0; }
.cost__years > div { padding: 0.75rem 0.875rem; background: var(--pale-200); border-radius: var(--radius-sm); }
.cost__years > div + div { margin-top: var(--space-2); }
.cost__years dt { color: var(--navy-900); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.cost__years dd { margin: 0.25rem 0 0; color: var(--grey-900); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 899.98px) {
  .cost__panels { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
  .cost__panel { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* What to include: essentials beside "where relevant". */
.include-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.include-group {
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.include-group--core { background: var(--pale-200); border-color: var(--pale-300); box-shadow: inset 0 3px 0 var(--blue-600); }
.include-group__title { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.include-list { display: grid; gap: 0.875rem 1.5rem; margin-top: var(--space-4); }
.include-group--core .include-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.include-list li { position: relative; padding-left: 1.5rem; }
.include-list li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.2em;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--blue-600);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.include-list--optional li::before {
  top: 0.45em;
  width: 0.45rem;
  height: 0.45rem;
  border: 2px solid var(--silver-400);
  border-radius: 50%;
  transform: none;
}
.include-list strong { display: block; color: var(--navy-900); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.include-list span { display: block; margin-top: 0.125rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 899.98px) {
  .include-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
  .include-group { padding: var(--space-4) var(--space-5) var(--space-5); }
  .include-group--core .include-list { grid-template-columns: 1fr; }
}

/* Types of website: simplest to most complex, with a three-step scale. */
.site-types,
.biz-grid {
  --cols: 4;
  --gap: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Rows of four; a short last row is centred as a group (4 + 3 on desktop). */
.site-types > li,
.biz-grid > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); }
.site-type {
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
}
.site-type__level {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--grey-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Three bars, filled to the level; decorative, the word carries the meaning. */
.site-type__level::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 0.375rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-600) 0 var(--fill), var(--pale-300) var(--fill) 100%);
}
.site-type__level[data-level="1"] { --fill: 33.4%; }
.site-type__level[data-level="2"] { --fill: 66.7%; }
.site-type__level[data-level="3"] { --fill: 100%; }
.site-type__title { margin-top: var(--space-3); font-size: 1.125rem; line-height: 1.25; }
.site-type p:not(.site-type__level) { margin-top: var(--space-2); color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 1023.98px) {
  .site-types, .biz-grid { --cols: 2; --gap: var(--space-4); }
}
@media (max-width: 559.98px) {
  .site-types, .biz-grid { --cols: 1; --gap: var(--space-3); }
  .site-type { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* Domain and ownership (navy panel): explanation beside the access checklist. */
.own__panel { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.own__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.own__title { color: var(--white); }
.own__copy p { margin-top: var(--space-3); color: #e6ecf5; line-height: 1.6; }
.own__copy .own__note { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid rgb(255 255 255 / 0.2); color: #d5deeb; font-size: var(--fs-sm); }
.own__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
}
.own__list li { padding-block: 0.875rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
.own__list li:nth-child(-n + 2) { padding-top: 0; border-top: 0; }
.own__list h3 { color: var(--white); font-size: 1.0625rem; line-height: 1.25; }
.own__list p { margin-top: 0.25rem; color: #d5deeb; font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 899.98px) {
  .own__inner { grid-template-columns: 1fr; }
  .own__list li:nth-child(-n + 2) { padding-top: 0.875rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
}
@media (max-width: 559.98px) {
  .own__list { grid-template-columns: 1fr; }
}

/* Hosting: managed vs unmanaged, then what to check. */
.split-compare__col > .split-compare__intro { margin: 1rem 1.25rem 0; padding-top: 0; border-top: 0; color: var(--grey-900); font-size: 0.9375rem; line-height: 1.5; }
.split-compare__intro + .tick-list { padding-bottom: 1.25rem; }
.hosting__checks,
.speed__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hosting__checks { margin-top: var(--space-8); }
@media (max-width: 899.98px) {
  .hosting__checks, .speed__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .hosting__checks, .speed__grid { grid-template-columns: 1fr; }
}

/* Maintenance: three ways it is handled beside what it covers. */
.maint__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.maint__options { grid-template-columns: 1fr; gap: var(--space-3); }
.maint__tasks {
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--pale-200);
  border: 1px solid var(--pale-300);
  border-radius: var(--radius);
}
.maint__tasks-title { font-size: 1.25rem; line-height: 1.2; }
.maint__tasks .maint__broken { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-strong); color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
.maint__broken strong { color: var(--navy-900); }
@media (min-width: 600px) and (max-width: 899.98px) {
  .maint__options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
  .maint__inner { grid-template-columns: 1fr; }
}
@media (max-width: 599.98px) {
  .maint__tasks { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* SEO: search-friendly factors in a 3 x 3 grid, questions for your web
   designer in a navy band beneath. */
.seo__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seo__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--space-2) clamp(1.5rem, 4vw, 3.25rem);
  margin-top: var(--space-5);
  padding: var(--space-6) clamp(var(--space-5), 2.6vw, var(--space-7));
  background: var(--navy-900);
  border-radius: var(--radius);
  color: var(--white);
}
.seo__aside-title { grid-column: 1; color: var(--white); font-size: 1.375rem; line-height: 1.2; }
.seo__aside > p { grid-column: 1; color: #d5deeb; font-size: var(--fs-sm); line-height: 1.55; }
.seo__aside .tick-list { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
.seo__aside .tick-list li { color: #e6ecf5; font-size: 0.9375rem; }
.seo__aside .tick-list li::before { border-color: var(--blue-300); }
@media (max-width: 899.98px) {
  .seo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo__aside { grid-template-columns: 1fr; gap: var(--space-4); }
  .seo__aside .tick-list { grid-column: 1; grid-row: auto; }
}
@media (max-width: 599.98px) {
  .seo__list { grid-template-columns: 1fr; }
  .seo__aside { padding: var(--space-5); }
}
/* Ecommerce: eight cards as two rows of four. */
@media (min-width: 1024px) {
  .online-list--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
  .online-list--four > div { padding: var(--space-5); }
}
.task p a { color: var(--link); }

/* Booking and enquiry features, beside the CSO figures. */
.booking__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.booking__copy > p { margin-top: var(--space-3); color: var(--grey-700); line-height: 1.6; }
.feature-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.feature-pills li {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-600);
  border-radius: var(--radius-sm);
  color: var(--grey-700);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.feature-pills strong { display: block; color: var(--navy-900); font-size: 0.9375rem; }
.booking__copy .feature-pills + p { margin-top: var(--space-5); }
.booking__stats { margin-top: 0.25rem; }
@media (max-width: 899.98px) {
  .booking__inner { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
  .feature-pills { grid-template-columns: 1fr; }
}

/* How to compare providers: four checklist cards. */
.check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}
.check-card {
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.check-card__title { display: flex; align-items: center; gap: 0.625rem; font-size: 1.1875rem; line-height: 1.2; }
.check-card__num {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.check-card .tick-list { margin-top: var(--space-4); }
@media (max-width: 1023.98px) {
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
  .check-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .check-card { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* Questions to ask: numbered, three columns. */
.ask-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ask;
}
.ask-list li {
  position: relative;
  padding: var(--space-4) 0 0 2.75rem;
  border-top: 1px solid var(--line-strong);
  counter-increment: ask;
}
.ask-list li::before {
  content: counter(ask, decimal-leading-zero);
  position: absolute;
  top: var(--space-4);
  left: 0;
  color: var(--blue-600);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ask-list h3 { font-size: 1.0625rem; line-height: 1.3; }
.ask-list p { margin-top: 0.25rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 899.98px) {
  .ask-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559.98px) {
  .ask-list { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Legal and privacy basics: five compact items. */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.125rem;
}
.legal-item {
  padding: 1.125rem 1.125rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy-900);
  border-radius: var(--radius-sm);
}
.legal-item__title { font-size: 1.0625rem; line-height: 1.25; }
.legal-item p { margin-top: 0.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 1023.98px) {
  .legal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 699.98px) {
  .legal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .legal-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Which option suits which business. */
.biz {
  display: flex;
  flex-direction: column;
  padding: 1.125rem 1.25rem 1.25rem;
  background: var(--pale-100);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
}
.biz__title { font-size: 1.125rem; line-height: 1.25; }
.biz p { margin-top: 0.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
.biz .biz__fit { margin-top: auto; padding-top: 0.875rem; color: var(--navy-900); font-weight: 500; }
.biz__fit span { display: block; margin-bottom: 0.125rem; padding-top: 0.75rem; border-top: 1px solid var(--line-strong); color: var(--grey-700); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* Four-route table on phones: the route names are long, so each label sits
   above its value rather than beside it (the shared .feature-table default). */
@media (max-width: 767.98px) {
  .feature-table--routes td { padding: 0.5rem 0.875rem; }
  .feature-table--routes td::before { position: static; display: block; width: auto; margin-bottom: 0.125rem; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; }
}
@media (min-width: 700px) and (max-width: 899.98px) {
  .seo__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
  .seo__list > div { padding: var(--space-4); }
}

/* Business Websites on-this-page bar: always one row. It fits the container at
   desktop widths (gap trimmed slightly around 1024px); narrower screens scroll
   the row sideways instead of wrapping. */
.page-nav--single .page-nav__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.page-nav--single .page-nav__list li { flex: none; }
.page-nav--single .page-nav__list a { white-space: nowrap; }
@media (max-width: 1099.98px) {
  .page-nav--single .page-nav__list { column-gap: 1.125rem; }
}

/* 10d. Business Insurance hub (/business-insurance/) ------------------------
   Page-specific pieces on the section 10 hub scaffolding, reusing shared hub
   components where they fit (.versus-table, .split-compare, .flow-steps,
   .ireland__stats, .faq-list, .hub-cta). Section intros use
   .hub-section__head--wide so they run to the grid width beneath them. */

/* Hero: the clipboard sits centre in the category image. Outbound CTA carries
   a one-line disclosure beneath it. */
.hub-hero__media--insurance img { object-position: 50% 55%; }
@media (min-width: 900px) {
  .hub-hero__media--insurance img { object-position: 55% 50%; }
}
.hub-hero__disclosure { margin-top: 0.75rem; color: #d5deeb; font-size: 0.8125rem; line-height: 1.5; }

/* Links inside list items and cards (paragraph links are styled in section 10). */
.decide a,
.cover a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.differ__panel a { color: var(--white); }

/* What is business insurance: short answer beside the factors that shape cover. */
.ins-what {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.ins-what__copy p { margin-top: var(--space-3); color: var(--grey-700); line-height: 1.65; }
.ins-what__copy .ins-what__answer { margin-top: var(--space-4); color: var(--grey-900); font-size: var(--fs-md); line-height: 1.55; }
.ins-what__shape {
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--navy-900);
  border-radius: var(--radius-sm);
}
.ins-what__shape-title { font-size: 1.1875rem; line-height: 1.25; }
.shape-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-5);
  margin-top: var(--space-3);
}
.shape-list li { padding-block: 0.625rem; border-top: 1px solid var(--line); }
.shape-list strong { display: block; color: var(--navy-900); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; }
.shape-list span { display: block; margin-top: 0.125rem; color: var(--grey-700); font-size: 0.8125rem; line-height: 1.45; }
@media (max-width: 899.98px) {
  .ins-what { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
  .ins-what__shape { padding: var(--space-4) var(--space-5) var(--space-5); }
  .shape-list { grid-template-columns: 1fr; }
}

/* Types of cover: one row per cover (name, what it covers, an example), so
   ten covers read as a reference list rather than a wall of equal cards. */
.cover-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.cover {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--space-2) clamp(1.25rem, 3vw, 2.25rem);
  padding: 1.25rem clamp(1.125rem, 2.4vw, 1.75rem);
  scroll-margin-top: var(--space-4);
}
.cover + .cover { border-top: 1px solid var(--line); }
.cover__tag {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--pale-200);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cover__title { margin-top: 0.5rem; font-size: 1.25rem; line-height: 1.2; }
.cover__what { color: var(--grey-900); font-size: 0.9375rem; line-height: 1.6; }
.cover__eg {
  align-self: start;
  padding: 0.75rem 0.875rem;
  background: var(--pale-100);
  border-left: 3px solid var(--blue-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--grey-700);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.cover__eg span {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--navy-900);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 1023.98px) {
  .cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  .cover__name { grid-row: span 2; }
}
@media (max-width: 679.98px) {
  .cover { grid-template-columns: 1fr; gap: var(--space-3); padding: 1.125rem; }
  .cover__name { grid-row: auto; }
}

/* Which cover might be relevant: situation -> cover, two columns of four. */
.decide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) 1.25rem;
}
.decide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.decide__if {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0.875rem 1.5rem 0.875rem 1rem;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}
/* Arrow notch between the situation and the cover. */
.decide__if::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.5rem;
  width: 1rem;
  height: 1rem;
  background: var(--navy-900);
  transform: translateY(-50%) rotate(45deg);
}
.decide__then { padding: 0.875rem 1rem 0.875rem 1.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.5; }
.decide__then a { color: var(--navy-900); font-weight: 600; }
@media (max-width: 899.98px) {
  .decide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 479.98px) {
  .decide { grid-template-columns: 1fr; }
  .decide__if { padding: 0.75rem 1rem; }
  .decide__if::after { top: auto; right: auto; bottom: -0.5rem; left: 1.5rem; transform: rotate(45deg); }
  .decide__then { padding: 1rem 1rem 0.875rem; }
}

/* Business types: two columns of five, with the covers often compared. */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.125rem 1.25rem;
}
.sector {
  display: flex;
  flex-direction: column;
  padding: 1.125rem 1.25rem 1.25rem;
  background: var(--pale-100);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
}
.sector__title { font-size: 1.1875rem; line-height: 1.25; }
.sector p { margin-top: 0.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
.sector .sector__covers { margin-top: auto; padding-top: 0.875rem; color: var(--navy-900); font-weight: 500; }
.sector__covers span { display: block; margin-bottom: 0.125rem; padding-top: 0.75rem; border-top: 1px solid var(--line-strong); color: var(--grey-700); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 767.98px) {
  .sector-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* Small business: five profiles beside the CSO figures and a package note. */
.small-biz {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.profile-list { margin: 0; padding: 0; list-style: none; counter-reset: profile; }
.profile-list li {
  position: relative;
  padding: 0.875rem 0 0.875rem 3rem;
  border-top: 1px solid var(--line-strong);
  counter-increment: profile;
}
.profile-list li:first-child { padding-top: 0; border-top: 0; }
.profile-list li::before {
  content: counter(profile);
  position: absolute;
  top: 0.875rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.profile-list li:first-child::before { top: 0; }
.profile-list h3 { font-size: 1.125rem; line-height: 1.25; }
.profile-list p { margin-top: 0.25rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.6; }
.small-biz__aside .ireland__stats { background: var(--white); border-color: var(--line-strong); }
.small-biz__note {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-600);
  border-radius: var(--radius-sm);
  color: var(--grey-700);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.small-biz__note strong { display: block; margin-bottom: 0.125rem; color: var(--navy-900); }
@media (max-width: 899.98px) {
  .small-biz { grid-template-columns: 1fr; }
}

/* What affects cost: three columns of grouped factors. */
.price-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.price-group {
  padding: var(--space-5) var(--space-5) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.price-group__title {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--navy-900);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.price-group__title--next { margin-top: var(--space-6); }
.price-list { margin: 0; }
.price-list > div { padding-block: 0.75rem; }
.price-list > div + div { border-top: 1px solid var(--line); }
.price-list dt { color: var(--navy-900); font-weight: 600; font-size: 0.9375rem; line-height: 1.35; }
.price-list dd { margin: 0.25rem 0 0; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 1023.98px) {
  .price-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-group:first-child { grid-column: 1 / -1; }
  .price-group:first-child .price-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  .price-group:first-child .price-list > div:nth-child(2) { border-top: 0; }
  .price-group:first-child .price-list > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 679.98px) {
  .price-groups { grid-template-columns: 1fr; gap: var(--space-3); }
  .price-group:first-child .price-list { display: block; }
  .price-group:first-child .price-list > div:nth-child(2) { border-top: 1px solid var(--line); }
  .price-group { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* Why quotes differ (navy panel): explanation beside six reasons. */
.differ__panel { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.differ__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.differ__title { color: var(--white); }
.differ__copy p { margin-top: var(--space-3); color: #e6ecf5; line-height: 1.6; }
.differ__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
}
.differ__list li { padding-block: 0.875rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
.differ__list li:nth-child(-n + 2) { padding-top: 0; border-top: 0; }
.differ__list h3 { color: var(--white); font-size: 1.0625rem; line-height: 1.25; }
.differ__list p { margin-top: 0.25rem; color: #d5deeb; font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 899.98px) {
  .differ__inner { grid-template-columns: 1fr; }
  .differ__list li:nth-child(-n + 2) { padding-top: 0.875rem; border-top: 1px solid rgb(255 255 255 / 0.2); }
}
@media (max-width: 559.98px) {
  .differ__list { grid-template-columns: 1fr; }
}

/* Mid-page CTA: a compact pale band (the closing CTA stays navy and strongest).
   It follows the navy "why quotes differ" panel, so the top gap is trimmed. */
.hub-section.mid-cta { padding-top: var(--space-6); }
.mid-cta__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2) var(--space-8);
  padding-block: var(--space-5);
  background: var(--pale-200);
  border-color: var(--pale-300);
  box-shadow: inset 4px 0 0 var(--blue-600);
}
.mid-cta__title { font-size: 1.375rem; line-height: 1.2; text-wrap: balance; }
.mid-cta__copy p { margin-top: 0.375rem; color: var(--grey-700); line-height: 1.55; text-wrap: pretty; }
.mid-cta__panel .btn { grid-column: 2; grid-row: 1; }
@media (min-width: 360px) {
  .mid-cta__panel .btn { white-space: nowrap; }
}
.mid-cta__disclosure { grid-column: 1 / -1; padding-top: var(--space-3); border-top: 1px solid var(--line-strong); color: var(--grey-600); font-size: 0.8125rem; line-height: 1.5; }
@media (max-width: 767.98px) {
  .mid-cta__panel { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .mid-cta__panel .btn { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (max-width: 599.98px) {
  .mid-cta__panel { padding-inline: var(--space-4) var(--space-4); }
  .mid-cta__panel .btn { width: 100%; }
}

/* Closing CTA on this page: keep the button label on one line on phones
   (from 360px; narrower screens may wrap rather than overflow). */
@media (min-width: 360px) {
  .hub-cta--insurance .btn { white-space: nowrap; }
}
@media (max-width: 599.98px) {
  .hub-cta--insurance .hub-cta__panel { padding-inline: var(--space-4); }
}

/* How to compare policies: a two-column checklist of fourteen items. */
.policy-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.25rem, 4vw, 3rem);
  counter-reset: check;
}
.policy-check li {
  position: relative;
  padding: 0.875rem 0 0.875rem 2.25rem;
  border-top: 1px solid var(--line-strong);
}
/* Decorative checkbox; the text carries the meaning. */
.policy-check li::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: 0;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--blue-600);
  border-radius: var(--radius-sm);
}
.policy-check li::after {
  content: "";
  position: absolute;
  top: 1.15rem;
  left: 0.45rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid var(--blue-600);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.policy-check strong { display: block; color: var(--navy-900); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.policy-check span { display: block; margin-top: 0.125rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 767.98px) {
  .policy-check { grid-template-columns: 1fr; }
}

/* Quote information: copy and the contextual outbound link beside four groups. */
.quote-prep {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}
.quote-prep__copy > p { margin-top: var(--space-3); color: var(--grey-700); line-height: 1.65; }
.quote-prep__cta {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--blue-600);
  border-radius: var(--radius-sm);
}
.quote-prep__cta p { color: var(--grey-900); font-size: 0.9375rem; line-height: 1.55; }
.quote-prep__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.quote-group {
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quote-group:first-child { grid-column: 1 / -1; }
.quote-group:first-child .tick-list { columns: 2; column-gap: var(--space-6); }
.quote-group:first-child .tick-list li { break-inside: avoid; margin: 0 0 0.625rem; }
.quote-group__title { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
/* The first and last groups run full width so the four groups leave no gap. */
.quote-group:last-child { grid-column: 1 / -1; }
.quote-group:last-child .tick-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem var(--space-5); }
.quote-group:last-child .tick-list li + li { margin-top: 0; }
@media (max-width: 899.98px) {
  .quote-prep { grid-template-columns: 1fr; }
}
@media (max-width: 559.98px) {
  .quote-prep__list { grid-template-columns: 1fr; }
  .quote-group:first-child .tick-list { columns: 1; }
  .quote-group:last-child .tick-list { grid-template-columns: 1fr; }
}

/* Policy terms: limit and excess as a pair, then claims basis and exclusions. */
.terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.term {
  padding: var(--space-5) var(--space-6) var(--space-6);
  background: var(--pale-100);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  scroll-margin-top: var(--space-4);
}
.term--limit, .term--excess { background: var(--white); border-color: var(--line-strong); border-top: 3px solid var(--navy-900); border-radius: var(--radius-sm); }
.term__label { color: var(--blue-700); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.term__title { margin-top: 0.25rem; font-size: 1.3125rem; line-height: 1.2; }
.term > p:not(.term__label) { margin-top: var(--space-3); color: var(--grey-700); font-size: 0.9375rem; line-height: 1.6; }
.term strong { color: var(--navy-900); }
@media (max-width: 767.98px) {
  .terms { grid-template-columns: 1fr; gap: var(--space-3); }
  .term { padding: var(--space-4) var(--space-5) var(--space-5); }
}

/* Business interruption steps sit on a pale section, so the cards are white. */
#business-interruption .flow-step { background: var(--white); border-color: var(--line-strong); }

/* Cyber: five compact risk areas in one row. */
.risk-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.125rem;
}
.risk { padding-top: 0.875rem; border-top: 3px solid var(--blue-600); }
.risk__title { font-size: 1.0625rem; line-height: 1.25; }
.risk p { margin-top: 0.375rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 1023.98px) {
  .risk-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-5); }
  .risk { grid-column: span 2; }
  .risk:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 599.98px) {
  .risk-row { grid-template-columns: 1fr; gap: var(--space-4); }
  .risk, .risk:nth-child(4) { grid-column: auto; }
}

/* Working from home and contractors: two panels, each with its own H2. */
.pair-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.pair {
  display: flex;
  flex-direction: column;
  padding: var(--space-6) clamp(var(--space-5), 2.6vw, var(--space-7)) var(--space-6);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  scroll-margin-top: var(--space-4);
}
.pair__title { font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.pair > p { margin-top: var(--space-3); color: var(--grey-700); line-height: 1.6; }
.pair .tick-list { margin-top: var(--space-4); }
.pair > .pair__note { margin-top: auto; padding-top: var(--space-5); color: var(--grey-600); font-size: var(--fs-sm); line-height: 1.55; }
.pair__note::before { content: ""; display: block; margin-bottom: var(--space-4); border-top: 1px solid var(--line); }
@media (max-width: 899.98px) {
  .pair-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 599.98px) {
  .pair { padding: var(--space-5); }
  .pair__title { font-size: 1.3125rem; }
}

/* Official sources: four cards. */
.source-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.125rem;
}
.source {
  padding: 1.125rem 1.125rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy-900);
  border-radius: var(--radius-sm);
}
.source__org { color: var(--grey-700); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.source__title { margin-top: 0.375rem; font-size: 1.0625rem; line-height: 1.25; }
.source p:not(.source__org) { margin-top: 0.5rem; color: var(--grey-700); font-size: var(--fs-sm); line-height: 1.55; }
@media (max-width: 1023.98px) {
  .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
  .source-grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* 13. Business insurance guide components (the /guides/ insurance articles)
   Small additions to the guide-article system (sections 11 and 12). */

/* Mid-article CTA: the hub's pale .mid-cta__panel (section 10d), placed inside
   .prose. Stacked (copy, button, disclosure) because the article column is too
   narrow for the hub's side-by-side layout; resets the article h2 styles. */
.prose .guide-mid-cta {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-block: 3rem;
  padding-block: var(--space-5);
}
.prose .guide-mid-cta .btn { grid-column: 1; grid-row: auto; justify-self: start; }
.prose .guide-mid-cta + * { margin-top: 0; }
.prose .mid-cta__title { margin-top: 0; font-size: 1.375rem; line-height: 1.2; letter-spacing: 0; }
.prose .mid-cta__copy p { margin-top: 0.375rem; font-size: var(--fs-base); }
.prose .mid-cta__disclosure { margin-top: 0; }
@media (max-width: 599.98px) {
  .prose .guide-mid-cta { margin-block: 2.5rem; }
}

/* Illustrative scenarios: the .kind-list blocks, labelled "Scenario n". */
.kind-list--scenario .kind-list__label::before { content: "Scenario " counter(kind) " · "; }
.prose .kind-list h4 { margin-top: 0.25rem; font-size: 1.125rem; line-height: 1.3; }

/* "Worth investigating" line under each small business scenario. */
.prose .scenario-covers {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--pale-200);
  border-left: 3px solid var(--blue-600);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.scenario-covers span { display: block; margin-bottom: 0.125rem; color: var(--navy-900); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* 14. Trust and governance pages (/about/, /editorial-standards/,
   /corrections-policy/, /our-partnerships/, /accessibility/)
   The guide-article system (section 11) without a hero image or short-answer
   block: .guide-header band, then .guide-layout--page with the contents list
   in the aside and the text in .guide-body. The aside comes first in the
   source so phones see the contents list before the text. */
.guide-layout--page { padding-bottom: var(--space-9); }
.guide-layout--page .guide-body { grid-row: 1; }
.guide-layout--page .guide-aside { grid-row: 1; }
.guide-aside__hub ul { margin-top: 0.5rem; padding: 0; list-style: none; }
.guide-aside__hub li + li { margin-top: 0.25rem; }
.guide-aside__hub li a { color: var(--link); font-size: var(--fs-sm); text-underline-offset: 3px; }
@media (max-width: 1023.98px) {
  .guide-layout--page .guide-aside, .guide-layout--page .guide-body { grid-row: auto; }
}

/* Key facts as a two-column list of terms and values (operator details). */
.fact-list {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.fact-list > div { display: contents; }
.fact-list dt, .fact-list dd { margin: 0; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.fact-list dt { background: var(--pale-100); color: var(--navy-900); font-weight: 600; }
.fact-list > div:last-child > * { border-bottom: 0; }
@media (max-width: 599.98px) {
  .fact-list { grid-template-columns: minmax(0, 1fr); }
  .fact-list dt { padding-bottom: 0.25rem; border-bottom: 0; }
  .fact-list dd { padding-top: 0.25rem; }
}

/* Three-way distinction (e.g. error vs judgement vs later change). */
.prose .def-list { margin-top: 1rem; }
.def-list > div { padding: 1rem 1.25rem; border: 1px solid var(--line); border-left: 4px solid var(--navy-900); border-radius: var(--radius); }
.def-list > div + div { margin-top: 0.75rem; }
.def-list dt { color: var(--navy-900); font-weight: 650; }
.def-list dd { margin: 0.25rem 0 0; color: var(--grey-700); font-size: var(--fs-base); line-height: 1.6; }

/* 15. Business Guides index (/guides/)
   One .hub-section per topic, reusing the hub guides block (section 10):
   a featured guide with its image and three guide rows with thumbnails. */
.guides-index .hub-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-7); max-width: var(--container); }
.guides-index .hub-section__head > div { max-width: 44rem; }
.guides-index .hub-section__head .text-link { flex: none; }
.guides-index .hub-section:last-of-type { padding-bottom: var(--space-9); }
.guides-about { margin-top: var(--space-9); }

/* 16. Contact form and legal pages (/contact/, /privacy-policy/,
   /cookie-policy/, /terms/, /disclaimer/)
   Same layout as section 14. The enquiry form sits inside .guide-body. */
.enquiry-form {
  margin-top: 1.25rem;
  padding: var(--space-6);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--pale-100);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.prose .enquiry-form > * + * { margin-top: 0; }
.enquiry-form__note { margin-bottom: var(--space-5); color: var(--grey-700); font-size: var(--fs-sm); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-5); }
.form-field { margin-bottom: var(--space-5); min-width: 0; }
.form-field label { display: block; margin-bottom: 0.375rem; color: var(--navy-900); font-weight: 600; }
.form-field .form-optional { color: var(--grey-600); font-weight: 400; }
.form-field input,
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid #7d889b;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
}
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23001a46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--blue-600); }
.form-field [aria-invalid="true"] { border: 2px solid #b42318; }
.form-help { margin-top: 0.375rem; color: var(--grey-600); font-size: var(--fs-sm); }
.form-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-turnstile { min-height: 65px; }
.form-turnstile:has(> div:empty) { min-height: 0; margin-bottom: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
.form-actions .btn { min-width: 11rem; }
.form-actions .btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.form-actions p { flex: 1 1 16rem; color: var(--grey-700); font-size: var(--fs-sm); }
.form-message { margin-top: var(--space-5); padding: 0.875rem 1rem; border-radius: var(--radius-sm); font-weight: 600; }
.form-message[hidden] { display: none; }
.form-message--success { border: 1px solid #1e7a46; background: #eaf6ef; color: #14532d; }
.form-message--error { border: 1px solid #b42318; background: #fdf0ef; color: #8a1c12; }
@media (max-width: 599.98px) {
  .enquiry-form { padding: var(--space-5) var(--space-4); }
  .form-row { grid-template-columns: minmax(0, 1fr); }
  .form-actions .btn { width: 100%; }
}

/* Topic list on /contact/ and summary callouts on the legal pages. */
.prose .callout { background: var(--pale-100); }
.prose .callout > * + * { margin-top: 0.5rem; }
.prose .legal-table th[scope="row"] { width: 28%; }

/* Footer "Cookie Settings" control: a button styled as a footer link. */
.site-footer__button {
  padding: 0;
  border: 0;
  background: none;
  color: #e8edf5;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.site-footer__button:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.no-js .site-footer__button { display: none; }

/* 17. Cookie banner and settings (assets/js/cookie-consent.js)
   Layout, spacing, radii and breakpoints reproduce the shared Upgrader.ie /
   Brunch.ie cookie banner and settings panel (values from Upgrader's
   styles.css); only the colours are Stuama's: navy body, light-grey top
   strip, white text, white Accept with navy text (navy Save in the panel). Pixel values are kept as in
   the source so the two stay directly comparable. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: var(--navy-900);
  color: var(--white);
  border-top: 4px solid var(--silver-300);
  box-shadow: 0 -8px 24px rgb(0 18 47 / 0.28);
}
.cookie-banner__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cookie-banner__text {
  margin: 0;
  flex: 1 1 320px;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #eef2f8;
}
.cookie-banner__text a { color: var(--white); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 10px;
  border: 2px solid transparent;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.cookie-btn--outline { background: transparent; border-color: var(--white); color: var(--white); }
.cookie-btn--outline:hover, .cookie-btn--outline:focus-visible { background: rgb(255 255 255 / 0.14); }
.cookie-btn--accept { background: var(--white); border-color: var(--white); color: var(--navy-900); }
.cookie-btn--accept:hover, .cookie-btn--accept:focus-visible { background: var(--pale-300); border-color: var(--pale-300); }
.cookie-btn:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }

@media (max-width: 767px) {
  .cookie-banner__inner {
    padding: 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  .cookie-banner__text { flex: 0 1 auto; max-width: none; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .cookie-btn { flex: 1 1 auto; }
}

/* As on Upgrader, the banner is out of view while the settings panel is open
   (it returns if the panel is closed without saving a choice). */
body:has(> dialog.cookie-settings[open]) .cookie-banner { visibility: hidden; }

/* Settings panel: a native modal <dialog> styled as Upgrader's overlay +
   panel (the ::backdrop is the overlay). */
.cookie-settings {
  position: fixed;
  width: calc(100% - 40px);
  max-width: 460px;
  max-height: calc(100vh - 40px);
  margin: auto;
  overflow-y: auto;
  background: var(--white);
  color: var(--navy-900);
  border: 0;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--navy-900), var(--blue-300)) 1;
  border-radius: 26px;
  padding: 28px 24px 24px;
  box-shadow: 0 24px 60px rgb(0 18 47 / 0.18);
}
.cookie-settings::backdrop { background: rgb(0 18 47 / 0.55); }
.cookie-settings__title { margin: 0 0 10px; font-size: 1.2rem; }
.cookie-settings__intro { margin: 0 0 20px; font-size: 0.92rem; line-height: 1.5; color: var(--grey-600); }
.cookie-settings__intro a { color: var(--link); text-underline-offset: 2px; }
.cookie-settings__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--grey-600);
  cursor: pointer;
}
.cookie-settings__close:hover, .cookie-settings__close:focus-visible { color: var(--navy-900); }
.cookie-settings__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.cookie-settings__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.cookie-settings__row-text { display: flex; flex-direction: column; gap: 2px; }
.cookie-settings__row-title { font-family: var(--font-sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0; line-height: 1.4; }
.cookie-settings__row-desc { font-size: 0.86rem; line-height: 1.5; color: var(--grey-600); }
.cookie-settings__always { flex-shrink: 0; padding-top: 2px; font-size: 0.8rem; font-weight: 700; color: var(--grey-600); }
.cookie-switch { position: relative; flex-shrink: 0; display: inline-block; width: 42px; height: 24px; }
.cookie-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cookie-switch__track {
  position: absolute;
  inset: 0;
  background: var(--line-strong);
  border-radius: 999px;
  transition: background 0.15s ease;
  pointer-events: none;
}
.cookie-switch__track::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(0 18 47 / 0.3);
  transition: transform 0.15s ease;
}
.cookie-switch input:checked + .cookie-switch__track { background: var(--navy-900); }
.cookie-switch input:checked + .cookie-switch__track::before { transform: translateX(18px); }
.cookie-switch input:focus-visible + .cookie-switch__track { outline: 3px solid var(--focus); outline-offset: 2px; }
.cookie-settings__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cookie-settings__actions .cookie-btn { flex: 1 1 auto; }
.cookie-settings .cookie-btn:focus-visible { outline-color: var(--focus); }
.cookie-settings .cookie-btn--accept { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); }
.cookie-settings .cookie-btn--accept:hover, .cookie-settings .cookie-btn--accept:focus-visible { background: var(--navy-800); border-color: var(--navy-800); }
.cookie-btn--secondary { background: var(--white); border-color: var(--line-strong); color: var(--navy-900); }
.cookie-btn--secondary:hover, .cookie-btn--secondary:focus-visible { background: var(--pale-100); }
@media (max-width: 480px) {
  .cookie-settings { padding: 24px 18px 18px; }
  .cookie-settings__actions { flex-direction: column; }
}
@media (forced-colors: active) {
  .cookie-switch__track, .cookie-switch__track::before { border: 1px solid CanvasText; }
  .cookie-switch input:checked + .cookie-switch__track::before { background: Highlight; }
}