/* Edhitch site style for inside pages (Nov 2026)
   Rule: the homepage is white; every inside page opens with the same blue banner.
   Also brings fonts and heading weights in line with the homepage. Page content is unchanged. */
:root { --in-blue: #085eb2; --in-blue-dark: #074c8f; --in-red: #fc0202; --in-ink: #0f172a;
        --in-banner: linear-gradient(135deg, #085eb2 0%, #074c8f 100%); }

/* ---------- Homepage fonts and heading weights ---------- */
body, body :where(p, li, td, th, dd, dt, label, input, select, textarea, button, small, span, a, div, blockquote, figcaption, summary, h1, h2, h3, h4, h5, h6) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif !important;
}
code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
body :is(h1, h2) { font-weight: 800 !important; letter-spacing: -0.02em; }
body h3 { font-weight: 700 !important; }

/* ---------- The blue banner, one look for every template ---------- */
.bh,                                                   /* insight articles */
header.learn-hero,                                     /* learn/ glossary pages */
section.hero, header.hero,                             /* guides, programmes */
section.section.text-center:first-of-type,             /* older workshop pages */
.eh-banner {
  background: var(--in-banner) !important;
  border-bottom: 0 !important;
  color: #fff !important;
}
/* guide pages whose title sits inside the article: paint the banner edge to edge */
article.article-section > .container > header.row.justify-content-center.mb-4 {
  position: relative;
  background: #085eb2;
  box-shadow: 0 0 0 100vmax #085eb2;
  clip-path: inset(0 -100vmax);
  padding: 44px 0 36px;
  margin-bottom: 2.5rem !important;
  color: #fff;
}
article.article-section.pt-5.mt-5:has(> .container > header.row.justify-content-center.mb-4) { padding-top: 0 !important; }

/* text inside the banner turns white */
:where(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner,
    article.article-section > .container > header.row.justify-content-center.mb-4)
  :where(h1, h2, h3, h4, div:not(:where(.card, aside, [class*="card"], [class*="box"], [class*="panel"], form, .glance, [class*="answer"])), p, li, small, time, span:not([class*="badge"]):not([class*="pill"]):not(.g), strong, em, .lead, .text-muted, .bc, .eyebrow, label):not(:where(.card, aside, [class*="card"], [class*="box"], [class*="panel"], form, .glance, [class*="answer"]) *) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
:where(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner,
    article.article-section > .container > header.row.justify-content-center.mb-4) :where(.text-muted, .bc, small, time, .meta, .byline):not(:where(.card, aside, [class*="card"], [class*="box"], [class*="panel"], form, .glance, [class*="answer"]) *) {
  opacity: .85;
}
:where(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner,
    article.article-section > .container > header.row.justify-content-center.mb-4) :where(a:not([class*="btn"]):not([class*="cta"])):not(:where(.card, aside, [class*="card"], [class*="box"], [class*="panel"], form, .glance, [class*="answer"]) *) {
  color: #fff !important; text-decoration-color: rgba(255, 255, 255, .5);
}
.bh h1 .r { color: #ffd6d6 !important; -webkit-text-fill-color: #ffd6d6 !important; }

/* cards and answer boxes inside a banner keep their own dark text and colours */
:is(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner) :is(.card, aside, [class*="card"], [class*="box"], [class*="panel"], form, .glance, [class*="answer"]) { color: var(--in-ink) !important; -webkit-text-fill-color: var(--in-ink) !important; }

/* highlighted words in a banner heading: soft pink instead of red on blue */
:is(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner) h1 :is(.accent-red, .red, .r, .text-danger, [style*="fc0202"], [style*="--r)"]) { color: #ffd6d6 !important; -webkit-text-fill-color: #ffd6d6 !important; }

/* a banner that sits inside a page container still paints edge to edge */
.container.eh-banner, div.eh-banner:not(:is(section, header)) { box-shadow: 0 0 0 100vmax #085eb2; clip-path: inset(0 -100vmax); background: #085eb2 !important; padding: 40px 20px 36px !important; }

/* buttons on the banner: red main button, white outline second button (as on existing blue pages) */
:is(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner)
  :is(.btn-primary, .btn-danger, .btn-primary-cta, .cta, .cta-primary, .hero-cta, .btn-cta) {
  background: var(--in-red) !important; border-color: var(--in-red) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
:is(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner)
  :is(.btn-outline-primary, .btn-outline-secondary, .btn-secondary-cta, .cta-outline, .cta-secondary, .btn-secondary, .btn-light) {
  background: transparent !important; border: 2px solid #fff !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}

/* any other button on the banner: main = red, ghost/outline = white outline; badges = white outline */
:is(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner) .btn:not(.ghost):not([class*="outline"]):not(.btn-link):not(.card .btn),
:is(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner) .btn-blue {
  background: var(--in-red) !important; border-color: var(--in-red) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
:is(.bh, header.learn-hero, section.hero, header.hero, section.section.text-center:first-of-type, .eh-banner) :is(.btn.ghost, .ghost) {
  background: transparent !important; border: 2px solid #fff !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
:is(header.hero, section.hero) :is(.code, .lvl) { border-color: #fff !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }
:is(header.hero, section.hero) .lvl .bars, :is(header.hero, section.hero) .bars { filter: brightness(0) invert(1); }
:is(section.hero) :is(.blob) { display: none !important; }

/* phones: wide tables scroll inside their box */
@media (max-width: 767px) {
  :is(main, article, section, .content) table, table.data-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  [class*="grid"] > *, [class*="tier"] { min-width: 0; max-width: 100%; }
}

/* Comfortable reading width on long guides (about 70 characters a line) */
article.article-section > .container { max-width: 860px !important; }
article.ba, .ba { max-width: 760px; }

/* Trust strip under the banner */
.eh-trust { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 14px 20px; text-align: center; font-size: .92rem; color: #475569; }
.eh-trust strong { color: #0f172a; }
.eh-trust a { color: #085eb2 !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
.eh-trust .sep { color: #cbd5e1; margin: 0 8px; }
article.article-section > .container > .eh-trust { margin: -2.5rem calc(50% - 50vw) 2.5rem; border-top: 0; }

/* "How it works" strip */
.eh-how { padding: 64px 20px; background: #f8fbff; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
.eh-how .wrap { max-width: 1100px; margin: 0 auto; }
.eh-how h2 { text-align: center; color: #0f172a !important; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 10px; }
.eh-how .sub { text-align: center; color: #475569; max-width: 720px; margin: 0 auto 34px; font-size: 1.05rem; }
.eh-how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.eh-how li { background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; padding: 22px 20px; box-shadow: 0 10px 28px rgba(2, 8, 23, .05); counter-increment: s; }
.eh-how li::before { content: counter(s); display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: #085eb2; color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 12px; }
.eh-how li strong { display: block; color: #0f172a; font-size: 1.05rem; margin-bottom: 6px; }
.eh-how li span { color: #475569; font-size: .95rem; line-height: 1.6; }
.eh-how .price { max-width: 820px; margin: 28px auto 0; text-align: center; color: #0f172a; font-size: 1rem; line-height: 1.65; }
.eh-how .price a { color: #085eb2; font-weight: 700; }
@media (max-width: 900px) { .eh-how ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .eh-how ol { grid-template-columns: 1fr; } }

/* wide tables never push the page sideways */
table.response-table { display: block; max-width: 100%; overflow-x: auto; }

/* security list: ticks instead of numbers */
#data-security li::before { content: "\2713"; background: #e8f5ee; color: #0f7b3f; }