/* =========================================================
   UXellence — professional website
   Brand: UX consultancy | Matthaios Mantzios | Athens, Greece
   ========================================================= */

/* Self-hosted Inter (SIL Open Font License) — no external requests */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-latin-800-normal.woff2') format('woff2')}

:root{
  --ink:#15161a;
  --ink-soft:#3a3c42;
  --muted:#5c5f66;
  --line:#e7e7ea;
  --bg:#ffffff;
  --bg-alt:#f6f6f7;
  --bg-dark:#0a0a0b;
  --bg-dark-2:#161618;
  /* brand red family (from the UXellence logo & uxellence.gr) */
  --teal:#ff2b39;      /* bright red accent */
  --indigo:#E30613;    /* core brand red */
  --indigo-soft:#f4555f;
  --white:#f5f5f6;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 50px -24px rgba(0,0,0,.30);
  --shadow-sm:0 8px 24px -14px rgba(0,0,0,.38);
  --grad:linear-gradient(120deg,#E30613 0%,#a5040f 100%);
  /* On near-black backgrounds the #a5040f end of --grad is only 2.26:1 — too low even for large text.
     This lighter pair keeps the brand red but clears WCAG 1.4.3 (8.00:1 / 4.87:1 on #161618). */
  --grad-on-dark:linear-gradient(120deg,#ff8a91 0%,#ff2b39 100%);
  --grad-soft:linear-gradient(120deg,rgba(227,6,19,.10),rgba(165,4,15,.08));
  /* 8px spacing scale (4px half-step) — spacing across the site aligns to these */
  --s-1:4px; --s0:8px; --s1:16px; --s2:24px; --s3:32px; --s4:40px; --s5:48px; --s6:64px; --s7:80px; --s8:96px;
  --maxw:1160px;
  --ff:'Inter','Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
/* overflow-x:hidden here would break position:sticky on the header.
   overflow-x:clip guards against sideways scroll without creating a scroll container. */
html,body{max-width:100%;overflow-x:clip}
/* scroll-padding keeps anchored/focused targets clear of the sticky header (WCAG 2.2 – 2.4.11) */
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--ff);
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* height:auto is REQUIRED now that width/height attrs are present (they set aspect-ratio) */
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-decoration:none;transition:color .2s}
a:hover{color:#a5040f}
/* Visible keyboard focus for all interactive elements (WCAG 2.4.7) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5em;color:var(--ink);font-weight:800}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section--tight{padding:56px 0}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);margin-bottom:16px}
.lead{font-size:1.18rem;color:var(--ink-soft);max-width:60ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.text-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-grad--dark{background:var(--grad-on-dark);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.98rem;padding:16px 24px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s}
.btn:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
.btn--primary{background:var(--grad);color:#ffffff;box-shadow:var(--shadow-sm)}
.btn--primary:hover{transform:translateY(-2px);color:#ffffff}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--indigo);color:var(--indigo)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{transform:translateY(-2px)}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn--outline-light:hover{border-color:#fff;color:#fff}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav__logo img{height:38px;width:auto}
.nav__links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.nav__links a{color:var(--ink);font-weight:600;font-size:.96rem;padding:8px 16px;border-radius:8px}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--indigo);background:var(--grad-soft)}
.nav__cta{margin-left:8px}
/* Keep the header CTA identical to the primary button (not the nav-link style) */
.nav__links .nav__cta a.btn{padding:16px 24px;font-size:.98rem;font-weight:700;border-radius:999px;color:#fff;background:var(--grad)}
.nav__links .nav__cta a.btn:hover{color:#fff;background:var(--grad);transform:translateY(-2px)}
.nav__toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:4px 0;transition:.25s}

/* Hero */
.hero{position:relative;overflow:hidden;background:var(--bg-dark);color:var(--white)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 420px at 78% -8%,rgba(227,6,19,.55),transparent 60%),
  radial-gradient(700px 380px at 6% 108%,rgba(255,43,57,.4),transparent 60%)}
.hero__inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:96px;padding-bottom:104px}
.hero h1{color:#fff}
.hero .lead{color:#d4d6db;max-width:52ch}
.hero__eyebrow{color:var(--teal)}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
.hero__meta{display:flex;gap:24px;flex-wrap:wrap;margin-top:32px;color:#b8bbc2;font-size:.92rem}
.hero__meta strong{display:block;font-size:1.7rem;color:#fff;font-weight:800;letter-spacing:-.02em}
.hero__art{position:relative}

/* Stat / trust row */
.trust{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:center;padding-top:24px;padding-bottom:24px}
.trust__row span{font-weight:700;color:var(--muted);letter-spacing:.02em}

/* Cards grid */
.grid{display:grid;gap:24px}
/* Prevent CSS-grid min-width:auto blowout so cards reflow cleanly at 320px (WCAG 1.4.10) */
.grid>*,.split>*,.contact-grid>*,.hero__inner>*,.footer__grid>*{min-width:0}

.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.card__icon{width:48px;height:48px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;margin-bottom:16px}
.card__icon svg{width:26px;height:26px;stroke:var(--indigo)}
.card h3{margin-bottom:.4rem}
.card p{color:var(--muted);margin:0;font-size:.98rem}

/* Split feature */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split--reverse .split__media{order:2}
.panel{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:32px}

/* Lists */
.check{list-style:none;margin:0;padding:0}
.check li{position:relative;padding:8px 12px 8px 32px;color:var(--ink-soft)}
.check li::before{content:"";position:absolute;left:0;top:14px;width:20px;height:20px;border-radius:6px;background:var(--grad)}
.check li::after{content:"";position:absolute;left:6px;top:18px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}

/* Tag chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{background:var(--grad-soft);color:var(--ink);border:1px solid var(--line);font-weight:600;font-size:.9rem;padding:8px 14px;border-radius:999px}

/* Dark CTA band */
.cta-band{background:var(--bg-dark);color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 360px at 88% 120%,rgba(255,43,57,.35),transparent 60%),radial-gradient(600px 300px at 8% -20%,rgba(227,6,19,.45),transparent 60%)}
.cta-band__inner{position:relative;text-align:center;padding-top:80px;padding-bottom:80px}
/* Cap the headline measure so it never runs edge-to-edge on narrow screens */
.cta-band h2{color:#fff;max-width:24ch;margin-left:auto;margin-right:auto}
.cta-band p{color:#d4d6db;max-width:56ch;margin:0 auto 24px}

/* Numbered process */
.steps{counter-reset:step;display:grid;gap:20px}
.steps--2{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:1fr 1fr}
@media (max-width:900px){.steps--2{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}}
.step{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step__num{counter-increment:step;flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--grad);color:#ffffff;font-weight:800;display:grid;place-items:center;font-size:1.1rem}
.step__num::before{content:counter(step,decimal-leading-zero)}
.step h3{margin-bottom:.2rem}
.step p{margin:0;color:var(--muted)}

/* Writing / logos */
.pubs{display:flex;flex-wrap:wrap;gap:14px}
.pub{border:1px solid var(--line);border-radius:12px;padding:12px 18px;font-weight:700;color:var(--ink-soft);background:#fff}

/* Blog */
.post{display:flex;flex-direction:column;height:100%;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.post:hover{color:inherit}
.post:hover h3{color:var(--indigo)}
.post__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.post__thumb{aspect-ratio:16/9;background:var(--grad-soft);display:grid;place-items:center}
.post__thumb svg{width:100%;height:100%}
.post__body{padding:24px;display:flex;flex-direction:column;flex:1 1 auto}
.post__tag{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--indigo)}
.post h3{margin:.4rem 0}
.post p{color:var(--muted);font-size:.96rem;margin:0}
.post__meta{margin-top:auto;padding-top:16px;font-size:.85rem;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:12px;font:inherit;color:var(--ink);background:#fff;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(227,6,19,.15)}
.info-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.info-item:last-child{border-bottom:0}
.info-item .ic{width:44px;height:44px;border-radius:12px;background:var(--grad-soft);display:grid;place-items:center;flex:0 0 auto}
.info-item .ic svg{width:22px;height:22px;stroke:var(--indigo)}
.info-item strong{display:block}
.info-item a,.info-item span{color:var(--muted)}
/* Cookie consent bar */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:300;background:var(--bg-dark);color:#f4f5f6;border-top:2px solid var(--indigo);box-shadow:0 -8px 30px -12px rgba(0,0,0,.5)}
.cookie-bar__inner{max-width:var(--maxw);margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cookie-bar__text{margin:0;font-size:.95rem;color:#d4d6db;max-width:66ch}
.cookie-bar__text a{color:var(--teal);text-decoration:underline}
.cookie-bar__actions{display:flex;gap:12px;flex-shrink:0}
.cookie-bar__actions .btn{padding:11px 22px}
.cookie-bar__actions .btn--ghost{border-color:rgba(255,255,255,.35);color:#fff}
.cookie-settings-link{color:inherit;text-decoration:underline}
@media(max-width:640px){.cookie-bar__inner{flex-direction:column;align-items:flex-start}.cookie-bar__actions{width:100%}.cookie-bar__actions .btn{flex:1}}

/* FAQ (accessible native disclosure — matches card styling) */
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:14px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s}
.faq details:hover{border-color:transparent;box-shadow:var(--shadow)}
.faq details[open]{border-color:transparent;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;padding:20px 56px 20px 24px;font-weight:700;font-size:1.08rem;color:var(--ink);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
/* Chevron: an SVG centred inside the rounded square, so it stays optically centred at any size */
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:8px;background:var(--grad-soft)}
.faq summary::before{content:"";position:absolute;right:29px;top:50%;width:12px;height:12px;margin-top:-6px;z-index:1;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.75 4.5 6 7.75 9.25 4.5' fill='none' stroke='%23E30613' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;transition:transform .2s}
.faq details[open] summary::before{transform:rotate(180deg)}
.faq summary:focus-visible{outline:3px solid var(--indigo);outline-offset:2px;border-radius:var(--radius-sm)}
.faq__a{padding:0 24px 22px;color:var(--ink-soft)}
.faq__a p{margin:0}

/* Client logo wall */
.logowall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.logowall span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:92px;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:#e7ebf5;font-weight:700;letter-spacing:.01em;background:var(--bg-dark-2);font-size:.95rem;line-height:1.25;transition:border-color .2s,transform .2s}
.logowall span:hover{border-color:var(--teal);transform:translateY(-3px)}
.logowall--light span{background:#fff;color:var(--ink);border-color:var(--line)}
@media(max-width:900px){.logowall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.logowall{grid-template-columns:repeat(2,1fr)}}
.avatar{position:relative;overflow:hidden}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:16px;padding:13px 16px;border-radius:12px;font-size:.95rem;font-weight:600}
.form-status--info{background:var(--grad-soft);color:var(--ink-soft)}
.form-status--ok{background:rgba(22,163,74,.14);color:#12813f}
.form-status--error{background:rgba(244,63,94,.12);color:#b42318}

/* Footer */
.footer{background:var(--bg-dark);color:#d4d6db;padding:64px 0 32px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer img{height:36px;width:auto;margin-bottom:16px}
.footer h3{color:#fff;font-size:.95rem;letter-spacing:.02em;margin-bottom:14px}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:9px}
.footer a{color:#b8bbc2}
.footer a:hover{color:var(--teal)}
.footer p{color:#9a9ca3;max-width:38ch}
.socials{display:flex;gap:12px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center}
.socials a:hover{border-color:var(--teal);background:rgba(255,43,57,.1)}
.socials svg{width:18px;height:18px;fill:#d4d6db}
.socials a:hover svg{fill:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.86rem;color:#9a9ca3}
/* Inline links inside a run of text must be distinguishable without colour (WCAG 1.4.1) */
.footer__bottom a{text-decoration:underline;color:#d4d6db}
/* Any link sitting inside a run of prose is underlined — colour alone is not a distinguishing feature (WCAG 1.4.1).
   Buttons, nav, card links and lists of links are excluded: they are not embedded in text. */
main p a:not(.btn), main li a:not(.btn), .faq__a a, .cookie-bar__text a{text-decoration:underline;text-underline-offset:2px}
/* Visually hidden, still announced by screen readers — used for section headings that are implicit in the design */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.footer__bottom a:hover{color:#fff}

/* Page hero (inner) */
.page-hero{background:var(--bg-dark);color:#fff;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 340px at 82% -20%,rgba(227,6,19,.5),transparent 60%),radial-gradient(560px 300px at 4% 120%,rgba(255,43,57,.32),transparent 60%)}
/* Two-column page header: headline left, intro right — shorter than a stacked column */
.page-hero__inner{position:relative;padding-top:60px;padding-bottom:60px;display:grid;grid-template-columns:1.15fr .85fr;column-gap:48px;align-items:end}
.page-hero__inner>.eyebrow{grid-column:1/-1;margin-bottom:10px}
.page-hero__inner>h1{grid-column:1;margin:0}
.page-hero__inner>p{grid-column:2;align-self:end;padding-bottom:8px}
.page-hero h1{color:#fff}
.page-hero p{color:#d4d6db;font-size:1.1rem;margin:0;max-width:46ch}
@media (max-width:900px){
  .page-hero__inner{grid-template-columns:1fr;row-gap:18px}
  .page-hero__inner>h1,.page-hero__inner>p{grid-column:1}
  .page-hero__inner>p{padding-bottom:0}
}

/* Only hide for reveal if JS is alive (html gets .js) — otherwise content must never be invisible */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;gap:36px;padding-top:70px;padding-bottom:78px}
  .hero__art{max-width:460px}
  .split{grid-template-columns:1fr;gap:34px}
  .split--reverse .split__media{order:0}
  .grid--3{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* Roomier side margins on small screens */
  .container{padding:0 22px}

  /* Mobile menu: full-width rows, generous tap targets */
  .nav__links{position:fixed;inset:74px 0 auto 0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:12px 14px 18px;gap:4px;transform:translateY(-140%);transition:transform .3s ease;box-shadow:var(--shadow)}
  .nav__links.open{transform:none}
  .nav__links li{width:100%}
  .nav__links a{display:block;width:100%;padding:16px 16px;font-size:1.05rem;border-radius:12px}
  .nav__links a:hover,.nav__links a:focus-visible,.nav__links a[aria-current="page"]{background:var(--grad-soft);color:var(--indigo)}
  .nav__cta{display:none}
  .nav__toggle{display:block}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .section{padding:64px 0}
  .hero__meta{gap:20px 28px}

  /* CTA band: keep the headline off the edges */
  .cta-band__inner{padding:64px 8px}
  .cta-band h2{max-width:17ch;font-size:1.62rem}
  .cta-band p{font-size:1rem}

  /* Breathing room under the sticky header */
  .hero__inner{padding-top:96px;padding-bottom:84px}
  .page-hero__inner{padding-top:72px;padding-bottom:56px}
  .faq summary{padding:18px 52px 18px 20px}
  .faq__a{padding:0 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
  .card:hover,.post:hover,.btn:hover{transform:none}
}

/* =========================================================
   EAA / WCAG readiness checklist page
   ========================================================= */
/* Legal callout */
.flag{background:var(--grad-soft);border-left:3px solid var(--indigo);border-radius:0 10px 10px 0;padding:18px 22px;margin:26px 0 0;color:var(--ink-soft);font-size:.98rem}
.flag p{margin:0}.flag p+p{margin-top:10px}
.flag strong{color:var(--ink)}

/* Section heads inside the checklist */
.chk-sec{margin-top:48px}
.chk-sec__head{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:8px}
.chk-sec__num{font-weight:800;font-size:.95rem;color:var(--indigo);letter-spacing:.04em;flex:0 0 auto}
.chk-sec__head h2{margin:0;font-size:1.5rem}
.chk-sec__note{color:var(--muted);margin:12px 0 18px;max-width:64ch}

/* Checklist items */
.checklist{margin:0;padding:0;border:0}
.checklist__group{margin:0;padding:0;border:0}
.check-list{list-style:none;margin:0;padding:0}
.check-item{display:flex;gap:14px;align-items:flex-start;padding:15px 6px;border-bottom:1px solid var(--line);cursor:pointer;margin:0}
.check-list li:first-child .check-item{border-top:1px solid var(--line)}
.check-item:hover{background:var(--bg-alt)}
.check-item input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;border:2px solid #b8b8c0;border-radius:5px;background:#fff;cursor:pointer;display:grid;place-content:center;transition:border-color .12s,background .12s}
.check-item input[type=checkbox]::after{content:"";width:11px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .12s ease-in-out;margin-top:-2px}
.check-item input[type=checkbox]:checked{background:var(--indigo);border-color:var(--indigo)}
.check-item input[type=checkbox]:checked::after{transform:rotate(-45deg) scale(1)}
.check-item input[type=checkbox]:focus-visible{outline:3px solid var(--indigo);outline-offset:2px}
.check-item__label{font-size:1rem;color:var(--ink);line-height:1.5}
.check-item__label small{display:block;font-size:.9rem;color:var(--muted);margin-top:3px;line-height:1.5}
.check-item:has(input:checked) .check-item__label{color:var(--muted)}
.check-item:has(input:checked) .check-item__label strong{color:var(--ink-soft)}

/* Scope result note */
.scope-note{margin:14px 0 0;font-weight:700;color:var(--indigo)}

/* Deadlines table */
.dates{margin:0;border-top:1px solid var(--line)}
.dates>div{display:flex;gap:20px;padding:15px 6px;border-bottom:1px solid var(--line);align-items:baseline}
.dates dt{font-weight:800;font-size:.98rem;color:var(--indigo);flex:0 0 128px;letter-spacing:-.01em}
.dates dd{margin:0;font-size:.98rem;color:var(--ink)}
.dates dd small{display:block;color:var(--muted);font-size:.9rem;margin-top:3px}

/* Readiness meter */
.readiness{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:14px 20px;margin:26px 0 8px;position:sticky;top:74px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.readiness__title{font-weight:800;font-size:1rem;letter-spacing:-.01em;color:var(--ink)}
.readiness__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.readiness__band{display:inline-block;font-weight:800;font-size:1.15rem;color:var(--ink);letter-spacing:-.01em}
.readiness__count{margin:2px 0 0;color:var(--muted);font-size:.9rem}
.readiness__pct{font-weight:800;font-size:2rem;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.readiness__track{height:10px;border-radius:999px;background:var(--bg-alt);margin:14px 0 0;overflow:hidden}
.readiness__fill{height:100%;border-radius:999px;background:var(--grad);width:0;transition:width .35s ease}
.readiness__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:0}
@media (max-width:640px){.readiness{position:static}}

/* Score band explainer */
.score-bands{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.score-bands p{margin:0 0 12px;color:var(--ink-soft);font-size:.98rem}
.score-bands p:last-child{margin-bottom:0}
.score-bands strong{color:var(--ink)}

/* Disclaimer */
.disclaimer{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.disclaimer strong{color:var(--ink-soft)}

/* =========================================================
   Toolkits / products page
   ========================================================= */
.kit{display:flex;flex-direction:column;position:relative;padding:32px 24px 24px}
.kit:not(.kit--featured){border:2px solid var(--line)}
.kit--featured{border-color:transparent;box-shadow:var(--shadow);background:linear-gradient(180deg,#fff, #fff) padding-box, var(--grad) border-box;border:2px solid transparent}
.kit__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--grad);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.kit__head{min-height:48px}
.kit__price{display:flex;align-items:baseline;gap:8px;margin:2px 0 10px}
.kit__price b{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.kit__price s{color:var(--muted);font-size:1.05rem;font-weight:600}
.kit__price .kit__save{margin-left:auto;font-size:.78rem;font-weight:800;color:var(--indigo);background:var(--grad-soft);padding:4px 10px;border-radius:999px;letter-spacing:.02em}
.kit .check{margin:6px 0 18px}
.kit__foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.kit__foot .btn{width:100%;justify-content:center}
.kit__meta{font-size:.82rem;color:var(--muted);text-align:center}
/* Keep the Gumroad overlay trigger looking like a brand button (gumroad.js targets .gumroad-button) */
a.gumroad-button{display:inline-flex!important;align-items:center;justify-content:center;gap:.5rem;font-family:var(--ff)!important;text-decoration:none!important}
.kit__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.kit__tag{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--ink-soft);background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:3px 10px}

/* Buy button label may wrap only as a last resort on very narrow screens (prevents 320px overflow). */
.kit__foot a.btn{white-space:normal;text-align:center}

/* Product-split helpers on kit cards: tagline caption, disambiguation cross-link, visible limitation */
.kit__cap{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--indigo);margin:0 0 14px}
.kit__line{font-size:.86rem;color:var(--muted);margin:0 0 14px;line-height:1.5}
.kit__line a{font-weight:700}
.kit__limit{font-size:.85rem;color:var(--ink-soft);background:var(--bg-alt);border-left:3px solid var(--teal);border-radius:0 8px 8px 0;padding:11px 13px;margin:0 0 14px;line-height:1.5}
.kit__limit strong{color:var(--ink)}
/* Cards on the tinted section already use bg-alt, so give the limit block a contrasting surface there */
.section[style*="bg-alt"] .kit__limit{background:#fff}
/* One-line delivery/licence note under a card grid (replaces per-button "Buy at Gumroad") */
.grid-note{text-align:center;color:var(--muted);font-size:.9rem;margin:22px auto 0;max-width:62ch;line-height:1.6}
/* Divider caption between product jobs within a section */
.kit-divider{grid-column:1 / -1;text-align:center;font-weight:700;color:var(--ink-soft);margin:6px 0 0}

/* Book page */
.book-hero{position:relative;z-index:1;display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center}
.book-hero__media img{width:100%;height:auto;border-radius:var(--radius-sm);box-shadow:var(--shadow)}
.book-hero__body .eyebrow{margin-bottom:12px}
.book-hero__body h1{margin-bottom:16px}
.book-sub{font-size:1.12rem;font-weight:600;color:var(--ink-soft);margin:0 0 20px;line-height:1.45}
.book-hero__body>p{line-height:1.75;margin:0 0 18px}
/* Single purchase card: one row per format */
.buycard{max-width:720px;margin:0 auto;padding:6px 28px}
.buylist{list-style:none;margin:0;padding:0}
.buylist li{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--line)}
.buylist li:last-child{border-bottom:0}
.buylist__info{font-size:1.08rem;color:var(--ink)}
.buylist__info strong{font-weight:800}
.buylist__meta{display:block;font-size:.85rem;color:var(--muted);margin-top:4px}
.buylist .btn{white-space:nowrap;flex:0 0 auto}
@media (max-width:520px){ .buylist li{flex-direction:column;align-items:flex-start} .buylist .btn{width:100%;justify-content:center} }
.pullquote{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--indigo);margin:26px 0;line-height:1.25}
.book-hero .cta-row{margin-top:24px}
.book-hero .small-muted{margin-top:20px}
.extract{margin:0;padding:24px 28px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--indigo);border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:var(--shadow-sm)}
.extract p{margin:0 0 14px;color:var(--ink-soft);line-height:1.6}
.extract ul{list-style:none;margin:0 0 14px;padding:0}
.extract li{position:relative;padding:6px 0 6px 20px;color:var(--ink-soft);line-height:1.55}
.extract li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--grad)}
.extract strong{color:var(--ink)}
@media (max-width:760px){
  .book-hero{grid-template-columns:1fr;gap:28px}
  .book-hero__media{max-width:260px}
}
/* Contents: two scannable columns of chapter titles */
.book-toc{display:grid;grid-template-columns:1fr 1fr;gap:4px 48px;margin-top:24px}
.book-toc__grp h3{margin:18px 0 6px;font-size:1.05rem}
.toclist{margin:0;padding-left:2em;list-style:decimal}
.toclist li{padding:5px 0;color:var(--ink);line-height:1.5}
.toclist li::marker{color:var(--indigo);font-weight:800}
@media (max-width:640px){ .book-toc{grid-template-columns:1fr;gap:0} }

/* Footer Explore list in two columns */
.explore-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
/* Blog grid: equal-height cards so pinned meta lines align across a row */
.grid--3 .post,.grid--2 .post{height:100%}

/* Tighter product-card rhythm (shorter cards) */
.kit h3{margin-bottom:2px}
/* Cards fill their grid cell so the pinned foot (and its button) lands on a common baseline */
.grid--3>.card,.grid--2>.card{height:100%}
/* Reserve head height on a 3-card row whose longest title wraps to three lines. Because the head is
   centre-aligned, this both aligns the price across the row and keeps every title vertically centred
   against its icon (short titles don't drift to the top of a reserved box). */
@media (min-width:901px){ .kits--tall .kit__head{min-height:72px} }
.kit>p{margin-bottom:12px}
.kit .check{margin:0 0 16px}
.kit .check li{padding:8px 12px 8px 32px}
.kit .check li::before{top:11px}
.kit .check li::after{top:15px}
.kit__price{margin:0 0 8px}
.kit__foot{gap:8px}


/* Icon beside the title (shorter cards) */
.kit__head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.kit__head .card__icon{width:48px;height:48px;margin:0;flex:0 0 auto}
.kit__head h3{min-height:0;margin:0}

/* Text label is the source of truth; hide the logo gumroad.js injects to avoid duplication */
.kit__foot a.gumroad-button img,.kit__foot a.gumroad-button svg,.kit__foot a.gumroad-button .logo-full{display:none!important}

.vat-note{max-width:64ch;margin:24px auto 0;color:var(--muted);font-size:.86rem}

/* Gumroad's injected stylesheet restyles .gumroad-button text dark on the live site — force our white label */
.kit__foot a.gumroad-button,.kit__foot a.gumroad-button:link,.kit__foot a.gumroad-button:visited,.kit__foot a.gumroad-button:hover{color:#fff!important;background:var(--grad)!important;border-radius:999px!important;border:1px solid transparent!important;box-shadow:var(--shadow-sm)!important;padding:16px 24px!important;font-size:.98rem!important;line-height:1.65!important;font-weight:700!important}



/* =========================================================
   EAA checklist — result reveal, band-conditional step, EmailOctopus opt-in
   ========================================================= */

/* Reveal gate (state B) — a highlighted card, matching the opt-in block below. Button disabled until a box is ticked. */
.result-gate{margin:32px 0 0;text-align:center;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:40px 24px}
.result-gate #revealResult{font-size:1.12rem;padding:20px 44px}
.result-gate__hint{margin:16px 0 0;color:var(--muted);font-size:.98rem}
.result-gate[hidden]{display:none}
#revealResult[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* Result reveal (state C/E). One transition in — reads as a continuation of the result, not an ad. */
.result-reveal{margin:32px 0 0;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.result-reveal.is-in{opacity:1;transform:none}
.result-reveal[hidden]{display:none}
/* Restored state E must not re-animate */
.result-reveal.no-anim{transition:none}

/* Verdict now sits as a lead line under the opt-in heading (not a standalone box) */
.result-verdict{font-size:1.1rem;font-weight:700;line-height:1.4;color:var(--indigo);margin:0 0 12px}
.result-verdict:empty{display:none}

/* EmailOctopus opt-in — measured .btn--primary values, forced over the builder's scoped CSS (§5) */
.eo-embed{font-family:var(--ff);min-height:140px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;margin:0 0 24px}
.eo-embed h2{margin:0 0 8px}
.eo-embed>p{color:var(--ink-soft);margin:0 0 16px;max-width:56ch}

.eo-embed button,
.eo-embed input[type="submit"]{
  border-radius:999px !important;
  background:var(--grad) !important;
  color:#fff !important;
  padding:16px 24px !important;
  font:700 .98rem/1.2 var(--ff) !important;
  border:1px solid transparent !important;
  box-shadow:var(--shadow-sm) !important;
  cursor:pointer;
}
.eo-embed input[type="email"],
.eo-embed input[type="text"]{
  border-radius:var(--radius-sm) !important;   /* 12px */
  border:1px solid var(--line) !important;
  padding:16px !important;
  font:400 1rem/1.4 var(--ff) !important;
  background:#fff !important;
  color:var(--ink) !important;
  box-sizing:border-box !important;
  width:100% !important;
}
/* EmailOctopus strips the focus ring — restore it (§10.3, non-negotiable) */
.eo-embed button:focus-visible,
.eo-embed input:focus-visible{
  outline:3px solid var(--ink) !important;
  outline-offset:2px !important;
}
/* Consent label ships at 12px — raise to 14px+ (§10.5) */
.eo-embed label{font-size:.875rem !important;line-height:1.5 !important;color:var(--ink-soft) !important;font-family:var(--ff) !important}
/* WCAG 2.2 SC 2.5.8 — 24×24 CSS px minimum target (§10.4) */
.eo-embed input[type="checkbox"]{
  inline-size:24px !important;block-size:24px !important;
  accent-color:#E30613;
}
/* Honeypot, if the builder emits one, stays hidden */
.eo-embed input[name^="hp"]{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important}

/* --- Layout over EmailOctopus's injected structure (email input + submit + consent). ---
   EO renders .main-form as a flex ROW (short input beside the button) and the consent as
   unaligned inline siblings. Stack the form and align the consent. EO's stylesheet loads
   after ours, so these need !important too. */
.eo-embed form.emailoctopus-form{display:flex !important;flex-direction:column !important;gap:20px !important}
.eo-embed .main-form{display:flex !important;flex-direction:column !important;gap:16px !important;align-items:stretch !important}
.eo-embed [eo-form-fields-container],
.eo-embed .emailoctopus-form-row{width:100% !important;margin:0 !important}
.eo-embed input[type="submit"]{width:100% !important;margin:0 !important}
.eo-embed .emailoctopus-form-row-hp{display:none !important}   /* honeypot row: no stray gap */
/* Consent: checkbox top-aligned with its wrapping label text */
.eo-embed .emailoctopus-form-row-consent{display:flex !important;align-items:flex-start !important;gap:10px !important;margin:0 !important}
.eo-embed .emailoctopus-form-row-consent input[type="checkbox"]{flex:0 0 auto !important;margin:1px 0 0 !important}
.eo-embed .emailoctopus-form-row-consent label{flex:1 1 auto !important;margin:0 !important}
/* Powered-by footer: a little breathing room, muted */
.eo-embed .mastfoot{margin-top:4px !important;text-align:center !important}
.eo-embed .mastfoot p{color:var(--muted) !important;font-size:.8rem !important;margin:0 !important}

/* Centre the opt-in block, and give the email field more height */
.eo-embed{text-align:center}
.eo-embed>p{margin-left:auto !important;margin-right:auto !important}
.eo-embed input[type="email"],.eo-embed input[type="text"]{padding:19px 18px !important;min-height:58px !important}
/* Keep the consent group centred, but its text left-aligned and readable */
.eo-embed .emailoctopus-form-row-consent{justify-content:center !important}
.eo-embed .emailoctopus-form-row-consent label{flex:0 1 auto !important;text-align:left !important;max-width:46ch !important}

/* Centre EmailOctopus's whole injected block as a column within the card,
   so the input, button and consent read as centred rather than full-bleed. */
.eo-embed .inline-container{max-width:480px !important;width:100% !important;margin:0 auto !important}
.eo-embed .form-container,
.eo-embed .emailoctopus-form-wrapper,
.eo-embed form.emailoctopus-form,
.eo-embed .main-form,
.eo-embed [eo-form-fields-container]{width:100% !important;max-width:100% !important;margin-left:auto !important;margin-right:auto !important}

/* EmailOctopus status messages — make errors/success stand out instead of blending into the copy */
.eo-embed .emailoctopus-error-message:empty,
.eo-embed .emailoctopus-success-message:empty{display:none !important}
.eo-embed .emailoctopus-error-message{color:#a5040f !important;background:#fdecec !important;border:1px solid #f3c2c2 !important;border-radius:var(--radius-sm) !important;padding:10px 14px !important;margin:0 0 14px !important;font-size:.92rem !important;font-weight:600 !important;text-align:left !important}
.eo-embed .emailoctopus-success-message{color:#0f7a3d !important;background:#eaf7ef !important;border:1px solid #b7e2c7 !important;border-radius:var(--radius-sm) !important;padding:10px 14px !important;margin:0 0 14px !important;font-size:.95rem !important;font-weight:600 !important;text-align:left !important}
/* Consent error: mark the checkbox red and show the message right next to it */
.eo-embed .emailoctopus-form-row-consent.has-error input[type="checkbox"]{outline:2px solid #a5040f !important;outline-offset:2px !important;accent-color:#a5040f !important}
.eo-embed .eo-consent-error{color:#a5040f !important;font-weight:600 !important;font-size:.9rem !important;margin:8px 0 0 !important;text-align:center !important}

/* Band-conditional next step (§3.4). Only the matching block is shown. */
.band-step[hidden]{display:none}
.band-step{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:28px 24px;text-align:center}
.band-step h3{margin:0 0 8px}
.band-step p{color:var(--ink-soft);margin:0 auto 20px;max-width:60ch}
.band-step__cta{display:flex;width:fit-content;margin-left:auto;margin-right:auto}

/* =========================================================
   EAA Exposure Report — sales page
   ========================================================= */
.xp{list-style:none;margin:16px 0 0;padding:0;max-width:64ch}
.xp li{position:relative;padding:0 0 0 30px;margin:0 0 16px;color:var(--ink);line-height:1.65}
.xp li::before{content:"";position:absolute;left:3px;top:11px;width:8px;height:8px;border-radius:50%;background:var(--indigo)}
.xp--not li::before{content:"\00d7";left:2px;top:0;width:auto;height:auto;border-radius:0;background:none;color:var(--muted);font-weight:800;font-size:1.15rem;line-height:1.5}
.xp strong{color:var(--ink)}
.cta-note{display:block;margin-top:10px;color:var(--muted);font-size:.9rem}
.cta-note--light{color:rgba(255,255,255,.78)}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none;pointer-events:none}

/* =========================================================
   EAA Exposure Report — value cards, notes, prominent price
   ========================================================= */
.get-lead{max-width:62ch;color:var(--ink-soft);margin:0 0 22px}
.gets{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.get{display:flex;gap:14px;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.get--wide{grid-column:1 / -1}
.get__ic{flex:0 0 auto;width:34px;height:34px;border-radius:999px;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.get__ic svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.get h3{margin:2px 0 6px;font-size:1.05rem}
.get p{margin:0;color:var(--ink-soft);font-size:.96rem;line-height:1.55}
@media (max-width:640px){.gets{grid-template-columns:1fr}}

/* "What this is not" — the × lives in the DOM (aria-hidden), so screen readers skip it */
.xp--not li{display:flex;gap:12px;padding-left:0}
.xp--not li::before{content:none}
.xmark{flex:0 0 auto;color:var(--muted);font-weight:800;font-size:1.15rem;line-height:1.55}

/* Note / callout (e.g. automated-testing block) */
.note{background:var(--bg-alt);border-left:4px solid var(--indigo);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 24px;margin:8px 0 0}
.note p{margin:0 0 12px;color:var(--ink-soft)}
.note p:last-child{margin:0}

/* Prominent price + CTA notes */
/* Pricing focal card — heading + price + CTA + notes as one centred block */
.price-card{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:52px 44px;margin:48px 0 0;text-align:center}
/* Heading becomes a small label so it doesn't compete with the price number */
.price-card h2{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--indigo);margin:0 0 18px}
.price-amt{font-size:3.1rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0;line-height:1}
.price-vat{font-size:.9rem;color:var(--muted);max-width:46ch;margin:10px auto 0;line-height:1.5}
/* Fine print sits apart from the price/CTA with a hairline divider */
.price-card .cta-terms{border-top:1px solid var(--line);padding-top:22px;margin-top:26px;max-width:60ch}
@media (max-width:560px){.price-card{padding:36px 22px}.price-amt{font-size:2.5rem}}
.cta-avail{text-align:center;color:var(--ink-soft);font-size:.95rem;max-width:56ch;margin:16px auto 0}
.cta-terms{text-align:center;color:var(--muted);font-size:.88rem;max-width:66ch;margin:16px auto 0;line-height:1.6}

/* Linked check-bullets (Accessibility card): check styling as sibling cards; the descriptive text is the link */
.check--links a{font-weight:700;color:var(--indigo)}
.check--links a:hover{color:#a5040f}

/* Services detail cards — icon beside the title (same row), body below full width */
/* align-content:start so a shorter card stretched to match its row-neighbor collects the extra
   space at the bottom, instead of spreading it between title, text and list */
.cards--iconrow .card{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-content:start}
.cards--iconrow .card>*{grid-column:1 / -1;align-self:start}
.cards--iconrow .card__icon{grid-column:1;grid-row:1;align-self:center;margin:0}
.cards--iconrow .card h3{grid-column:2;grid-row:1;align-self:center;margin:0}
.cards--iconrow .card>p{margin-top:16px}

/* Centred callout card (e.g. "Not sure where to start?") — overrides the icon-row left alignment */
.card--center{text-align:center}
.cards--iconrow .card--center>*{align-self:center}

/* Centred two-button CTA row */
.cta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* Ordered lists in long-form article body (EAA Greece page) */
.numlist{margin:16px 0 0;padding-left:1.3em;color:var(--ink-soft)}
.numlist li{margin:0 0 12px;line-height:1.6}
.numlist li strong{color:var(--ink)}

/* Sources / citation lists */
.src{list-style:none;margin:8px 0 0;padding:0;color:var(--ink-soft);font-size:.96rem}
.src li{position:relative;padding:6px 0 6px 20px;line-height:1.55}
.src li::before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:50%;background:var(--grad)}
.src li strong{color:var(--ink)}

/* Small muted note line */
.small-muted{font-size:.86rem;color:var(--muted);margin:12px 0 0;line-height:1.55}

/* Breathing room after a sources list or callout before the next paragraph */
.src + p{margin-top:30px}
.flag + p{margin-top:24px}

/* Responsive data table (article body) */
.rtable-wrap{overflow-x:auto;margin:18px 0 0;border:1px solid var(--line);border-radius:var(--radius-sm)}
.rtable{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
.rtable th,.rtable td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.rtable thead th{background:var(--bg-alt);color:var(--ink);font-weight:700}
.rtable tbody tr:last-child td{border-bottom:none}
.rtable td{color:var(--ink-soft)}
.rtable td strong{color:var(--ink)}
.rtable .ex{display:block;margin-top:4px;font-size:.85rem;color:var(--muted);font-style:italic}