/* =========================================================================
   CUSAI — cusai.ie faithful clone ("common form")
   Clean light editorial reconstruction of the original Joomla/YOOtheme site.
   White ground, near-black ink, one amber accent, Work Sans display + Roboto
   body, 1200px container. Retains a re-skinned UIkit/YOOtheme compatibility
   layer so the scraped article body_html lays out cleanly. Mobile-first.
   Palette + type from brand.json (frequency-ranked scrape).
   ========================================================================= */

@layer reset, base, chrome, hero, prose, compat, responsive, article;

/* ------------------------------------------------------------------ tokens */
:root {
  --bg:        #ffffff;
  --surface-1: #f7f7f6;
  --surface-2: #f0efee;
  --surface-3: #e9e8e7;

  --line:      rgba(23, 23, 23, 0.10);
  --line-2:    rgba(23, 23, 23, 0.18);

  --text:      #171717;
  --text-dim:  rgba(23, 23, 23, 0.70);
  --text-faint:rgba(23, 23, 23, 0.50);

  /* amber accent from the scraped brand (#fec202) + a darker pressed tone */
  --acc:       #fec202;
  --acc-2:     #cc9c01;
  --acc-ink:   #171717;      /* ink on amber fills */
  --link:      #b47f00;      /* AA-legible amber-brown for body links on white */

  --font-head: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --measure: 72ch;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 4px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* -------------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }
  body { margin: 0; }
  img, picture, video, svg { max-width: 100%; height: auto; display: block; }
  a { color: inherit; text-decoration: none; }
  ul, ol { margin: 0; padding: 0; }
  h1, h2, h3, h4, h5, h6 { margin: 0; }
}

/* --------------------------------------------------------------------- base */
@layer base {
  body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 0.96rem + 0.25vw, 1.075rem);
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--text);
    text-wrap: balance;
  }
  h1 { font-size: clamp(2.2rem, 1.6rem + 2.8vw, 3.4rem); }
  h2 { font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem); margin-top: 1.6em; }
  h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem); margin-top: 1.3em; }
  h4 { font-size: 1.15rem; margin-top: 1.1em; }

  p { margin: 0 0 1.15em; }
  strong, b { color: var(--text); font-weight: 600; }

  a { color: var(--link); }

  ::selection { background: var(--acc); color: var(--acc-ink); }
  :focus-visible { outline: 2px solid var(--acc-2); outline-offset: 3px; }

  hr { border: 0; height: 1px; margin: 2.5rem 0; background: var(--line-2); }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
}

/* ------------------------------------------------------------------- chrome */
@layer chrome {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 66px;
  }

  .brand { display: inline-flex; align-items: baseline; gap: 0.55rem; line-height: 1; }
  .brand-mark {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    color: var(--text);
    position: relative;
  }
  .brand-mark::after {
    content: "";
    display: block;
    height: 4px;
    margin-top: 3px;
    background: var(--acc);
    border-radius: 2px;
  }
  .brand-sub, .brand-word {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    align-self: center;
  }

  .site-nav ul { list-style: none; display: flex; align-items: center; gap: 0.15rem; }
  .site-nav a {
    display: block;
    padding: 0.5rem 0.95rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    border-radius: 2px;
    position: relative;
    transition: color 0.18s var(--ease);
  }
  .site-nav a::after {
    content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.3rem;
    height: 3px; background: var(--acc); transform: scaleX(0); transform-origin: left;
    transition: transform 0.22s var(--ease); border-radius: 2px;
  }
  .site-nav a:hover { color: var(--text); }
  .site-nav a:hover::after { transform: scaleX(1); }
  .site-nav a[aria-current="page"] { color: var(--text); }
  .site-nav a[aria-current="page"]::after { transform: scaleX(1); }

  .nav-toggle, .nav-toggle-btn { display: none; }
}

/* --------------------------------------------------------------------- hero */
@layer hero {
  .page-hero {
    position: relative;
    padding: clamp(2.75rem, 1.8rem + 5vw, 5rem) 0 clamp(2rem, 1.3rem + 3.5vw, 3.5rem);
    border-bottom: 1px solid var(--line);
    background: var(--surface-1);
  }
  .page-hero .container { position: relative; }
  .page-hero h1 { position: relative; max-width: 22ch; }
  .page-hero .container::after {
    content: "";
    display: block;
    width: clamp(64px, 14vw, 120px);
    height: 4px;
    margin-top: 1.4rem;
    background: var(--acc);
    border-radius: 2px;
  }

  .page--home .page-hero { background: var(--surface-1); }
  .page--article .page-hero h1 { max-width: 26ch; }
}

/* --------------------------------------------------------------------- prose */
@layer prose {
  .page-body { padding: clamp(2rem, 1.4rem + 3vw, 3.5rem) 0; }
  .page:not(.page--home) .page-body { max-width: var(--measure); margin-inline: auto; }

  .page-body a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.15s, text-decoration-color 0.15s;
  }
  .page-body a:hover { color: var(--acc-2); text-decoration-color: var(--acc-2); }

  .page-body img {
    border-radius: var(--radius);
    border: 1px solid var(--line);
  }

  .page-body ul, .page-body ol { padding-left: 1.3em; margin: 0 0 1.25em; }
  .page-body li { margin-bottom: 0.5em; }
  .page-body ul > li::marker { color: var(--acc-2); }
  .page-body ol > li::marker { color: var(--acc-2); font-weight: 600; }

  blockquote {
    margin: 1.75rem 0;
    padding: 0.4rem 0 0.4rem 1.4rem;
    border-left: 3px solid var(--acc);
    color: var(--text);
    font-size: 1.1em;
  }

  .lead {
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
    line-height: 1.55;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 1.3em;
  }
}

/* =========================================================== UIkit compat
   Re-skinned for light. Minimal reinterpretation of the scraped utility classes
   present in body_html — just enough for clean layout. */
@layer compat {
  .uk-container { width: 100%; max-width: var(--container); margin-inline: auto; }
  .page-body .uk-container { padding-inline: 0; }

  .uk-section,
  .uk-section-default,
  .uk-section-primary,
  .uk-section-secondary { padding: clamp(1.25rem, 3.5vw, 2.75rem) 0; }
  .uk-section-large { padding: clamp(1.75rem, 5vw, 3.5rem) 0; }
  .uk-section-secondary {
    background: var(--surface-1);
    border-radius: var(--radius);
    padding-inline: clamp(1.1rem, 3vw, 2.25rem);
  }
  .uk-position-relative { position: relative; }
  .uk-position-cover { position: absolute; inset: 0; }
  .uk-overflow-auto { overflow: auto; }

  .uk-grid,
  [uk-grid] {
    display: flex; flex-wrap: wrap;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    margin: 0 0 1.25rem; padding: 0; list-style: none;
    align-items: flex-start;
  }
  .uk-grid-small { gap: 0.75rem; }
  .uk-grid-large { gap: clamp(1.5rem, 4vw, 3rem); }
  .uk-flex-middle { align-items: center; }
  .uk-grid-match, .uk-grid-item-match { align-items: stretch; }

  [class*="uk-width-1-1"] { flex: 1 1 100%; }
  [class*="uk-width-1-2"] { flex: 1 1 min(100%, calc(50% - 1.5rem)); }
  [class*="uk-width-1-3"] { flex: 1 1 min(100%, calc(33.333% - 1.6rem)); }
  [class*="uk-width-2-3"] { flex: 1 1 min(100%, calc(66.666% - 1.6rem)); }
  [class*="uk-width-1-4"] { flex: 1 1 min(100%, calc(25% - 1.8rem)); }
  [class*="uk-width-xlarge"] { flex: 1 1 min(100%, 600px); }
  [class*="uk-width-2xlarge"] { flex: 1 1 min(100%, 750px); }
  [class*="uk-width-auto"] { flex: 0 1 auto; }
  [class*="uk-width-expand"] { flex: 1 1 0; min-width: min(100%, 240px); }

  .uk-child-width-1-1 > * { flex-basis: 100%; }
  [class*="uk-child-width-1-2"] > * { flex: 1 1 min(100%, calc(50% - 1.5rem)); }
  [class*="uk-child-width-1-3"] > * { flex: 1 1 min(100%, calc(33.333% - 1.6rem)); }
  [class*="uk-child-width-expand"] > * { flex: 1 1 0; min-width: min(100%, 220px); }

  .uk-margin-auto { margin-inline: auto; }

  /* panels / cards */
  .uk-panel { position: relative; }
  .uk-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .uk-card-body { padding: clamp(1.25rem, 3vw, 1.9rem); }

  /* spacing helpers */
  .uk-margin, .uk-margin-top { margin-top: 1rem; }
  .uk-margin-bottom { margin-bottom: 1rem; }
  .uk-margin-large, .uk-margin-large-top { margin-top: 2.25rem; }
  .uk-margin-large-bottom { margin-bottom: 2.25rem; }
  .uk-margin-medium-top { margin-top: 1.6rem; }
  .uk-margin-medium-bottom { margin-bottom: 1.6rem; }
  .uk-margin-small-top { margin-top: 0.5rem; }
  .uk-margin-small-bottom { margin-bottom: 0.5rem; }
  .uk-margin-remove, .uk-margin-remove-top { margin-top: 0; }
  .uk-margin-remove, .uk-margin-remove-bottom { margin-bottom: 0; }
  .uk-margin-remove-first-child > :first-child { margin-top: 0; }
  .uk-padding { padding: 1.75rem; }
  .uk-padding-small { padding: 0.75rem; }

  /* text helpers */
  .uk-text-center { text-align: center; }
  .uk-text-right { text-align: right; }
  .uk-text-left { text-align: left; }
  .uk-text-lead {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: clamp(1.2rem, 1.1rem + 0.7vw, 1.55rem);
    line-height: 1.35;
    color: var(--text);
  }
  .uk-text-large { font-size: 1.2rem; }
  .uk-text-small { font-size: 0.875rem; }
  .uk-text-muted, .uk-text-secondary { color: var(--text-dim); }
  .uk-text-emphasis { color: var(--text); }
  .uk-text-primary { color: var(--acc-2); }
  .uk-text-warning { color: var(--acc-2); }
  .uk-text-bold, .uk-text-bolder { font-weight: 700; }
  .uk-text-break { overflow-wrap: break-word; word-break: break-word; }

  .uk-heading-small  { font-family: var(--font-head); font-size: clamp(1.5rem, 3.2vw, 2rem); }
  .uk-heading-medium { font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.6rem); }
  .uk-heading-large  { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 3rem); }
  .uk-heading-xlarge { font-family: var(--font-head); font-size: clamp(2.3rem, 5.5vw, 3.4rem); }
  .uk-heading-line { }
  .uk-h1 { font-family: var(--font-head); font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); line-height: 1.08; color: var(--text); }
  .uk-h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem); color: var(--text); }
  .uk-h3 { font-family: var(--font-head); font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem); color: var(--text); }
  .uk-h4 { font-family: var(--font-head); font-size: 1.2rem; color: var(--text); }
  .uk-font-primary, .uk-font-secondary { font-family: var(--font-head); }

  /* el-* (YOOtheme element) blocks */
  .el-title { font-family: var(--font-head); color: var(--text); }
  .el-content { color: var(--text); }
  .el-image { border-radius: var(--radius); overflow: hidden; }
  .el-item { position: relative; }

  /* buttons */
  .uk-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    line-height: 1;
    cursor: pointer;
    border: 1px solid var(--line-2);
    background: var(--bg);
    color: var(--text);
    transition: transform 0.14s var(--ease), background 0.14s, border-color 0.14s;
    min-height: 44px;
    text-decoration: none;
  }
  .uk-button:hover { text-decoration: none; border-color: var(--acc-2); }
  .uk-button-primary { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }
  .uk-button-primary:hover { background: var(--acc-2); border-color: var(--acc-2); color: var(--acc-ink); }
  .uk-button-default:hover { border-color: var(--acc-2); color: var(--acc-2); }

  /* lists */
  .uk-list { list-style: none; padding: 0; }
  .uk-list > li { margin-bottom: 0.55rem; padding-left: 1.3rem; position: relative; }
  .uk-list > li::before {
    content: ""; position: absolute; left: 0; top: 0.6em;
    width: 7px; height: 7px; background: var(--acc); border-radius: 50%;
  }

  /* tables */
  .uk-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.95rem; }
  .uk-table th {
    font-family: var(--font-head); font-weight: 600;
    text-align: left; padding: 0.75rem 1rem;
    border-bottom: 2px solid var(--line-2);
  }
  .uk-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }

  /* collapse in-body Joomla hero banners whose lazy background was stripped */
  .page-body .uk-background-cover,
  .page-body .uk-background-norepeat { min-height: 0 !important; }

  /* slider (no JS) -> plain responsive grid of cards */
  .uk-slider-items { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
  .uk-slider-container { overflow: visible; }
  .el-slidenav, .uk-slider-nav, .uk-slidenav { display: none; }

  .uk-inline { position: relative; display: inline-block; max-width: 100%; }
  .uk-flex { display: flex; }
  .uk-flex-center { justify-content: center; }
  .uk-flex-last\@m { order: 1; }
  [uk-icon], .uk-icon { display: inline-block; }
  .uk-visible\@xl, .uk-visible\@s { }
}

/* ------------------------------------------------------------------- footer */
@layer chrome {
  .site-footer {
    margin-top: clamp(3rem, 8vw, 5rem);
    border-top: 1px solid var(--line);
    background: var(--surface-1);
    color: var(--text-dim);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: clamp(1.75rem, 4vw, 3rem);
    padding-block: clamp(2.5rem, 6vw, 3.75rem);
  }
  .site-footer h2 {
    font-family: var(--font-head);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 1.1rem;
  }
  .footer-brand-mark { margin-bottom: 1.1rem; }
  .footer-brand-mark .brand-mark::after { display: none; }
  .footer-brand-mark .brand-word { color: var(--text-dim); }
  .footer-brand p { color: var(--text-dim); max-width: 46ch; }
  .footer-links ul { list-style: none; }
  .footer-links li { margin-bottom: 0.6rem; }
  .footer-links a {
    color: var(--text-dim);
    font-size: 0.95rem;
    transition: color 0.15s, padding-left 0.15s;
  }
  .footer-links a:hover { color: var(--acc-2); padding-left: 4px; }
  .footer-contact p { color: var(--text-dim); }
  .footer-base {
    border-top: 1px solid var(--line);
    padding-block: 1.25rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    color: var(--text-faint);
    background: var(--bg);
  }
  .footer-base p { margin: 0; }
}

/* --------------------------------------------------------------- responsive */
@layer responsive {
  @media (max-width: 860px) {
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

    .nav-toggle-btn {
      display: inline-flex; flex-direction: column; justify-content: center;
      gap: 5px; width: 44px; height: 44px; cursor: pointer; border-radius: 2px;
      border: 1px solid var(--line-2);
    }
    .nav-toggle-btn span {
      display: block; height: 2px; width: 22px; margin-inline: auto;
      background: var(--text);
      transition: transform 0.22s var(--ease), opacity 0.2s;
    }
    .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .site-nav {
      position: absolute; top: 66px; left: 0; right: 0;
      background: var(--bg);
      border-bottom: 1px solid var(--line);
      max-height: 0; overflow: hidden;
      transition: max-height 0.3s var(--ease);
    }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gutter) 1.25rem; }
    .site-nav a { padding: 1rem 0.5rem; font-size: 0.95rem; border-bottom: 1px solid var(--line); }
    .site-nav a::after { display: none; }
    .site-nav a[aria-current="page"] { color: var(--acc-2); }
    .nav-toggle:checked ~ .site-nav { max-height: 480px; }
  }
}

/* ===================================================================== article
   CSS-only flatten of the scraped YOOtheme/UIkit page-builder markup inside the
   article body. Wins over `prose` + `compat` by being the LAST cascade layer.
   HTML stays byte-identical; content and links are untouched. */
@layer article {

  .page:not(.page--home) .page-body {
    max-width: var(--measure);
    margin-inline: auto;
    text-align: left;
  }

  /* Collapse every structural wrapper to plain flow */
  .page:not(.page--home) .page-body :is(
    .uk-section, .uk-section-default, .uk-section-muted, .uk-section-primary,
    .uk-section-secondary, .uk-section-large, .uk-container, .uk-grid,
    .uk-grid-item-match, .uk-grid-match, .uk-panel, .uk-card, .uk-card-body,
    .uk-flex, .uk-inline, .uk-width-1-1, .uk-slider, .uk-slider-container,
    .uk-slider-items, .uk-background-cover, .uk-background-norepeat,
    .uk-position-relative
  ) {
    display: block;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    color: inherit;
    columns: auto;
    transform: none;
    text-align: left;
  }

  /* Keep prose left-aligned (beat inline text-align:center on YOOtheme blocks) */
  .page:not(.page--home) .page-body :is(
    p, h2, h3, h4, h5, h6, ul, ol, li, blockquote, dl, div, span, figcaption,
    .uk-text-center, .uk-text-right
  ) {
    text-align: left !important;
  }

  /* Column widths stop constraining; single reading column */
  .page:not(.page--home) .page-body [class*="uk-width-"],
  .page:not(.page--home) .page-body [class*="uk-child-width-"] > * {
    width: auto;
    max-width: 100%;
    flex: none;
  }

  /* Restore vertical rhythm between flattened blocks */
  .page:not(.page--home) .page-body > * + *,
  .page:not(.page--home) .page-body :is(.uk-grid, .uk-child-width-1-1) > * + * {
    margin-top: 1.4rem;
  }
  .page:not(.page--home) .page-body p { margin: 0 0 1.15em; }
  .page:not(.page--home) .page-body :is(h2, h3, h4) { margin-top: 1.7em; margin-bottom: 0.5em; }
  .page:not(.page--home) .page-body :is(ul, ol) { margin: 0 0 1.15em; }

  /* Headings sized by their real tag, not YOOtheme display classes */
  .page:not(.page--home) .page-body h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
  .page:not(.page--home) .page-body h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); }
  .page:not(.page--home) .page-body h4 { font-size: 1.15rem; }

  /* Body imagery: responsive, centred, self-contained */
  .page:not(.page--home) .page-body img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 1.6rem auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
  }

  /* Keep body links on-brand and AA-legible on white */
  .page:not(.page--home) .page-body a {
    color: var(--link);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent);
    text-underline-offset: 3px;
  }
  .page:not(.page--home) .page-body a:hover {
    color: var(--acc-2);
    text-decoration-color: currentColor;
  }
}

/* =============================================================== home + guides
   Card grids for the homepage article cards and the /guides index. Declared
   last + unlayered so they win predictably. */

/* homepage: keep the scraped "Read more" card images tidy */
.page--home .page-body .el-image img,
.page--home .page-body img { border-radius: var(--radius); }

.page--home .page-body .uk-slider-items > * {
  flex: 1 1 min(100%, calc(33.333% - 1.6rem));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--bg);
}

/* /guides index tile grid */
.page--guides .page-body { max-width: none; }
.page--guides .guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 2.25rem 0 0;
}
.page--guides .guide-card {
  position: relative;
  background: var(--bg);
  padding: clamp(1.25rem, 2.6vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.16s var(--ease);
}
.page--guides .guide-card:hover { background: var(--surface-1); text-decoration: none; }
.page--guides .guide-card .gc-tick {
  position: absolute; top: 0; left: 0;
  width: 16px; height: 16px; pointer-events: none;
  border-top: 3px solid var(--acc); border-left: 3px solid var(--acc);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.page--guides .guide-card:hover .gc-tick { opacity: 1; }
.page--guides .guide-card h3 {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.16s var(--ease);
}
.page--guides .guide-card:hover h3 { color: var(--acc-2); }
.page--guides .guide-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.55;
}