/* Cyber Fraud India — v2 theme
   Editorial direction: oxblood + cream, Instrument Serif display, bento layout.
   Sits on Bootstrap 5.3; only tokens and what Bootstrap has no opinion about. */

:root {
  --ox:        #1B4DE4;   /* primary blue */
  --ox-700:    #0B2A72;   /* deep navy */
  --ox-050:    #E8EFFF;   /* pale blue wash */
  --ink:       #0C1C3D;   /* deep navy ink */
  --body:      #45536F;
  --muted:     #5C6880;
  --cream:     #FFFFFF;
  --paper:     #FFFFFF;
  --line:      #DCE6F7;
  --gold:      #00B8D9;   /* cyan accent */
  --gold-050:  #E3F8FC;
  --alert:     #FF3D57;
  --alert-050: #FFF1F3;   /* warning banner wash */
  --alert-200: #FFC9D1;   /* warning banner edge  */
  --alert-700: #B00A30;   /* warning banner text  */
  --safe:      #07795A;
  --safe-050:  #E4F8F2;

  --grad-hero:  linear-gradient(135deg, #10309C 0%, #1B4DE4 45%, #0E5F94 100%);
  --grad-ink:   linear-gradient(140deg, #0C1C3D 0%, #16306B 60%, #1B4DE4 140%);
  --grad-cyan:  linear-gradient(135deg, #E3F8FC 0%, #EEF4FF 100%);
  --grad-safe:  linear-gradient(135deg, #E4F8F2 0%, #EAF6FF 100%);
  --grad-page:  linear-gradient(180deg, #EEF4FF 0%, #F7FAFF 40%, #F7FAFF 100%);
  --grad-glyph: linear-gradient(135deg, #1B4DE4 0%, #00C2CB 100%);

  --r:   14px;
  --r-lg: 22px;
  --shadow-1: 0 1px 2px rgba(12,28,61,.05), 0 8px 24px rgba(27,77,228,.07);
  --shadow-2: 0 2px 8px rgba(12,28,61,.08), 0 22px 48px rgba(27,77,228,.16);

  --bs-primary: #1B4DE4;
  --bs-body-bg: #F7FAFF;
  --bs-body-color: #0C1C3D;
  --bs-border-color: #DCE6F7;
  --bs-border-radius: 14px;
  --bs-border-radius-sm: 10px;
  --bs-border-radius-lg: 22px;
  --bs-link-color: #1B4DE4;
  --bs-link-color-rgb: 27,77,228;
  --bs-link-hover-color: #0B2A72;
  --bs-link-hover-color-rgb: 11,42,114;
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Noto Sans Devanagari", Helvetica, Arial, sans-serif;
}

/* Bootstrap's closed off-canvas menu is translated beyond the viewport. Keep
   that hidden panel from creating a horizontal scrollbar on narrow screens. */
html,
body {
  overflow-x: clip;
}

body {
  background: #fff;
  color: var(--ink);
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* Ordinary anchors keep the browser's familiar default affordance. Components
   explicitly marked as controls remain real links with button styling below. */
a { color: #0000EE !important; text-decoration: underline !important; }
a:visited { color: #551A8B !important; }

/* ---------- type ---------- */
.serif, h1, h2, .display-1, .display-2 {
  font-family: var(--bs-font-sans-serif);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.06;
}
h3, h4, h5, .fw-bold, .navbar-brand { font-family: var(--bs-font-sans-serif); }
h3, h4, h5 { font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
p { text-wrap: pretty; }
.lead-xl { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--body); letter-spacing: -0.012em; }
.eyebrow {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.numeral { font-weight: 600; letter-spacing: -.03em; }

/* ---------- buttons ---------- */
.btn {
  --bs-btn-border-radius: 980px;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-weight: 600; padding: .6rem 1.35rem; letter-spacing: -.01em;
  box-shadow: 0 6px 16px rgba(10,31,79,.12);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
a.btn { text-decoration: none !important; }
.btn-lg { padding: .85rem 1.8rem; font-size: 1.05rem; }
.btn-sm { padding: .35rem .95rem; font-size: .9rem; }
.btn-ox      { background: var(--ox); color: #fff; border: 0; }
.btn-ox:hover{ background: #1540C4; color: #fff; transform: translateY(-1px); box-shadow: 0 9px 20px rgba(27,77,228,.22); }
.btn-alert   { background: var(--alert); color: #fff; border: 0; }
.btn-alert:hover { background: #E22A43; color: #fff; }
.btn-ghost   { background: transparent; color: var(--ox); border: 1px solid rgba(27,77,228,.35); }
.btn-ghost:hover { background: var(--ox); color: #fff; border-color: var(--ox); }
.btn-cream   { background: #fff; color: var(--ox); border: 0; }
.btn-cream:hover { background: #EDF1FB; color: var(--ox); }
a.btn-ox, a.btn-ox:visited, a.btn-alert, a.btn-alert:visited { color: #fff !important; }
a.btn-ghost, a.btn-ghost:visited, a.btn-cream, a.btn-cream:visited { color: var(--ox) !important; }
a.btn-ghost:hover { color: #fff !important; }
.btn:focus-visible { outline: 3px solid rgba(27,77,228,.3); outline-offset: 3px; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.bento > * { grid-column: span 12; min-width: 0; }
.container { max-width: 1120px; }
.tile {
  grid-column: span 12;
  background: #F5F5F7;
  border: 0;
  border-radius: 18px;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.28,.11,.32,1), background .25s ease;
}
a.tile, button.tile { display: block; text-align: left; text-decoration: none; color: inherit; cursor: pointer; }
a.tile:hover, button.tile:hover, .tile--hover:hover {
  transform: scale(1.012);
  background: #EFEFF2;
}
.tile--ox   { background: var(--grad-hero); color: #fff; }
.tile--ox h1, .tile--ox h2, .tile--ox h3 { color: #fff; }
.tile--ink  { background: #1D1D1F; color: #fff; }
.tile--gold { background: #F5F5F7; }
.tile--safe { background: #F1F7F4; }
.tile--flat { box-shadow: none; }
a.tile--ox:hover, a.tile--ink:hover { background-image: var(--grad-hero); }

@media (min-width: 768px) {
  .bento { gap: 16px; }
  .md-4 { grid-column: span 4; } .md-6 { grid-column: span 6; }
  .md-8 { grid-column: span 8; } .md-12 { grid-column: span 12; }
}
@media (min-width: 992px) {
  .bento { gap: 18px; }
  .lg-3 { grid-column: span 3; } .lg-4 { grid-column: span 4; }
  .lg-5 { grid-column: span 5; } .lg-6 { grid-column: span 6; }
  .lg-7 { grid-column: span 7; } .lg-8 { grid-column: span 8; }
  .lg-9 { grid-column: span 9; } .lg-12 { grid-column: span 12; }
  .row-2 { grid-row: span 2; }
}

/* ---------- chrome ---------- */
.site-header { display: contents; }
.navwrap { background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.08); }
.navwrap.sticky-top { z-index: 99; }
.navbar .nav-link {
  color: var(--ink); font-size: .84rem; font-weight: 400; opacity: .82;
  padding: .4rem .8rem; border-radius: 980px;
}
.navbar .nav-link:hover { opacity: 1; background: transparent; color: var(--ink); }
.navbar .nav-link.active { background: transparent; color: var(--ink); opacity: 1; font-weight: 500; }
.mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--ox); color: #fff; font-size: .95rem; font-weight: 600;
}
.langpill { border: 1px solid rgba(27,77,228,.22); background: #fff; border-radius: 980px; padding: 3px; display: inline-flex; gap: 2px; box-shadow: 0 4px 12px rgba(10,31,79,.08); }
.langpill button, .langpill a {
  min-width: 42px; min-height: 34px;
  display:inline-flex; align-items:center; justify-content:center;
  border: 0; background: transparent; border-radius: 980px;
  padding: .32rem .7rem; font-size: .78rem; font-weight: 700;
  color: var(--body) !important; text-decoration: none !important; line-height: 1; cursor: pointer;
}
.langpill button:hover, .langpill a:hover { background: #EDF1FB; color: var(--ox) !important; }
.langpill button.on, .langpill a.on, .langpill a.on:visited { background: var(--ox); color: #fff !important; }
.langpill button:focus-visible, .langpill a:focus-visible { outline: 2px solid rgba(27,77,228,.38); outline-offset: 2px; }

@media (max-width: 991.98px) {
  /* backdrop-filter makes fixed descendants use the sticky header as their
     containing block. Use a solid mobile header so the off-canvas can occupy
     the full viewport instead of collapsing to the navbar's height. */
  .navwrap { background:#fff; backdrop-filter:none; }
  .offcanvas-lg.offcanvas-end {
    --bs-offcanvas-width: min(88vw, 360px);
    height:100dvh !important;
    max-height:100dvh;
    background:#fff;
    box-shadow:-18px 0 48px rgba(15,29,58,.18);
    overflow:hidden;
  }
  .offcanvas-lg .offcanvas-header { padding:1.1rem 1.25rem; }
  .offcanvas-lg .offcanvas-body {
    padding:1rem 1.25rem 2rem !important;
    overflow-y:auto;
  }
}

/* ---------- pieces ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  width: max-content; max-width: 100%;
  font-size: .68rem; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  padding: .18rem .52rem; border-radius: 980px;
  background: rgba(0,0,0,.06); color: var(--body);
}
.card-tag { align-self: flex-start; }
.card-icon-link { display: inline-grid; width: max-content; line-height: 1; }
.card-title-link { display: inline; }
.pill--gold  { background: var(--gold-050); color: #067A8F; }
.pill--safe  { background: var(--safe-050); color: var(--safe); }
.pill--alert { background: var(--alert); color: #fff; }
.pill--ghost { background: rgba(255,255,255,.22); color: #fff; }

.glyph {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.25rem;
  background: #fff; color: var(--ox);
  transition: color .2s ease, transform .2s ease;
}
a.tile:hover .glyph, .card-icon-link:hover .glyph { background: #fff; color: var(--ox); transform: none; }
.glyph--lg { width: 58px; height: 58px; font-size: 1.6rem; border-radius: 18px; }

.stepnum {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 980px;
  display: grid; place-items: center; font-size: .95rem; font-weight: 600;
  background: var(--ox); color: #fff;
}
.stepnum--safe { background: var(--safe); }

.rail { border-left: 2px solid var(--line); padding-left: 1.5rem; }
.rail > * { position: relative; }
.rail > *::before {
  content: ""; position: absolute; left: -1.84rem; top: .55rem;
  width: 9px; height: 9px; border-radius: 980px; background: var(--ox); outline: 3px solid #F5F5F7;
}

.thumb {
  aspect-ratio: 16/10; border-radius: 14px; display: grid; place-items: center;
  background: var(--grad-hero);
  color: #fff; font-size: 2.2rem; position: relative; overflow: hidden;
}
.thumb .bi { transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.thumb .card-icon-link { width: 100%; height: 100%; place-items: center; color: inherit; }
a.tile:hover .thumb .bi, .thumb .card-icon-link:hover .bi { transform: scale(1.18); }

.avatar {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 980px; display: grid; place-items: center;
  font-size: .95rem; font-weight: 600; background: #fff; color: var(--ox);
}
.avatar--mod { background: var(--grad-glyph); color: #fff; }
+
/* ---------- fraud detail journey ---------- */
.fraud-detail { gap: clamp(1rem, 2vw, 1.5rem); }
.fraud-detail__hero {
  min-height: clamp(280px, 34vw, 420px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.75rem, 5vw, 4rem);
}
.fraud-detail__hero h1 { max-width: 18ch; }
.fraud-signs {
  background: var(--alert-050);
  box-shadow: inset 4px 0 0 var(--alert-700);
}
.fraud-signs__list { display: grid; gap: .7rem; }
.fraud-signs__list li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 1rem; border: 1px solid var(--alert-200);
  border-radius: 12px; background: rgba(255,255,255,.72);
}
.fraud-signs__list .bi { flex: none; margin-top: .12rem; color: var(--alert-700); }
.fraud-detail__urgent > .tile { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.fraud-audience {
  display: flex; align-items: center; gap: 1.1rem;
  background: #EEF3FF; border: 1px solid rgba(27,77,228,.14);
  padding-block: clamp(1.2rem, 2.4vw, 1.75rem);
}
.fraud-audience__icon,
.fraud-prevention__icon,
.fraud-related-section__icon {
  flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.3rem;
  background: #fff; color: var(--ox);
}
.fraud-audience p { max-width: 78ch; color: var(--body); }
.fraud-explainer .field--name-body > :last-child,
.fraud-explainer > :last-child { margin-bottom: 0; }
.fraud-sequence { background: #F0F4FF; }
.fraud-sequence__list { display: grid; gap: .9rem; }
.fraud-sequence__list li { display: flex; align-items: flex-start; gap: .8rem; color: var(--body); }
.fraud-step__number {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ox); color: #fff;
  font-size: .76rem; font-weight: 700;
}
.fraud-prevention { background: #ECF8F1; }
.fraud-prevention__icon { color: var(--safe); }
.fraud-prevention__list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.fraud-prevention__list li {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: 1rem; border: 1px solid rgba(0,122,77,.15);
  border-radius: 12px; background: rgba(255,255,255,.78); color: var(--body);
}
.fraud-prevention__list .bi { flex: none; margin-top: .12rem; color: var(--safe); }
.fraud-stories .section-head { margin: .35rem 0 1rem; }
.fraud-story-grid,
.fraud-stories .view-stories-by-fraud .view-content {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px;
}
.fraud-related-section { background: #EEF3FF; }
.fraud-related-grid,
.fraud-related-section .view-related-frauds .view-content {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .9rem;
}
.fraud-related-grid .related-fraud-link,
.fraud-related-section .view-related-frauds .related-fraud-link {
  min-width: 0; min-height: 92px; padding: 1rem;
  display: flex; align-items: center; gap: .75rem;
  border: 1px solid rgba(27,77,228,.14); border-radius: 14px;
  background: #fff;
}
.fraud-related-grid .related-fraud-link__icon,
.fraud-related-section .related-fraud-link__icon { flex: 0 0 40px; width: 40px; height: 40px; font-size: 1rem; }
@media (max-width: 767.98px) {
  .fraud-detail__hero { min-height: 0; }
  .fraud-audience { align-items: flex-start; }
  .fraud-prevention__list,
  .fraud-related-grid,
  .fraud-related-section .view-related-frauds .view-content { grid-template-columns: 1fr; }
  .fraud-related-grid .related-fraud-link,
  .fraud-related-section .view-related-frauds .related-fraud-link { min-height: 76px; }
}


.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- forms ---------- */
.form-control, .form-select {
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  padding: .8rem 1rem; font-size: 1rem; color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #8A98B5; }
.form-control:hover, .form-select:hover { border-color: #B4C7EC; }
.form-control:focus, .form-select:focus {
  background: #fff; border-color: var(--ox); box-shadow: 0 0 0 4px rgba(27,77,228,.14);
}
.form-check-input { border: 1.5px solid var(--line); }
.form-check-input:checked { background-color: var(--ox); border-color: var(--ox); }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--alert); }
.chip input { position: absolute; opacity: 0; }
.chip span {
  display: inline-block; padding: .5rem 1rem; border-radius: 980px; font-size: .9rem;
  background: #fff; border: 1.5px solid var(--line); cursor: pointer; transition: all .15s ease;
}
.chip span:hover { border-color: #B4C7EC; }
.chip input:checked + span { background: var(--ink); border-color: transparent; color: #fff; font-weight: 500; }
.chip input:focus-visible + span { outline: 3px solid rgba(27,77,228,.3); }
.dropzone { border: 1.5px dashed rgba(27,77,228,.35); border-radius: var(--r-lg); background: var(--paper); transition: all .18s ease; }
.dropzone:hover, .dropzone.is-over { border-color: var(--ox); background: var(--ox-050); }

/* ---------- warning banner ---------- */
.notice--warn {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1.05rem 1.25rem;
  background: var(--alert-050);
  border: 1.5px solid var(--alert-200);
  border-left: 5px solid var(--alert);
  border-radius: var(--r);
  color: var(--alert-700);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.5;
}
.notice--warn > i {
  flex: none; font-size: 1.2rem; line-height: 1.25; color: var(--alert);
}

/* ---------- stepped form ---------- */
.stepper {
  display: flex; list-style: none; margin: 0 0 2rem; padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--line); gap: .25rem;
}
.stepper__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem;
  position: relative; text-align: center; background: none; border: 0; padding: 0;
  color: var(--muted); font-size: .82rem; font-weight: 600;
}
/* connector line between the numbered markers */
.stepper__item::before {
  content: ""; position: absolute; top: 17px; left: -50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.stepper__item:first-child::before { display: none; }
.stepper__num {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 980px;
  display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--line); color: var(--muted);
  font-size: .95rem; font-weight: 600; transition: all .2s ease;
}
.stepper__item.is-active { color: var(--ink); }
.stepper__item.is-active .stepper__num { background: var(--ox); border-color: var(--ox); color: #fff; }
.stepper__item.is-done { color: var(--ink); cursor: pointer; }
.stepper__item.is-done .stepper__num { background: var(--safe); border-color: var(--safe); color: #fff; }
.stepper__item.is-done::before, .stepper__item.is-active::before { background: var(--safe); }
/* the number is swapped for a tick once the step is complete */
.stepper__item.is-done .stepper__num { font-size: 0; }
.stepper__item.is-done .stepper__num::after {
  content: "\F26E"; font-family: "bootstrap-icons"; font-size: 1.35rem; line-height: 1;
}
.stepper__label { max-width: 14ch; line-height: 1.25; }

.fstep[hidden] { display: none; }
.fstep__head { margin-bottom: 1.5rem; }
.fstep__head h2 { font-size: 1.5rem; margin: 0 0 .35rem; }
.fstep__head p { margin: 0; color: var(--body); font-size: .95rem; }

.fstep-nav {
  display: flex; align-items: center; gap: 1rem; margin-top: 2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.fstep-nav .fstep-count {
  margin-inline: auto; font-size: .82rem; font-weight: 600; color: var(--muted);
}
@media (max-width: 575.98px) {
  .stepper__label { display: none; }
  .stepper { gap: 0; }
  .fstep-nav { flex-wrap: wrap; }
  .fstep-nav .fstep-count { order: -1; width: 100%; margin-inline: 0; text-align: center; }
  .fstep-nav .btn { flex: 1; }
}

/* ---------- mobile action bar ---------- */
.dialbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: rgba(29,29,31,.92); backdrop-filter: blur(16px);
  padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  display: flex; gap: .6rem;
}
/* The region wrapper is a flex item of .dialbar; without this the two buttons
   collapse to their content width instead of splitting the bar. */
.dialbar > .region { flex: 1; }
@media (min-width: 992px) { .dialbar { display: none; } }
body { padding-bottom: 86px; }
@media (min-width: 992px) { body { padding-bottom: 0; } }

/* ---------- footer ---------- */
.foot { background: #F5F5F7; color: #5C6880; border-top: 1px solid rgba(0,0,0,.08); }
.foot a { color: #5C6880; text-decoration: none; }
.foot a:hover { color: var(--ox); text-decoration: underline; }
.foot .text-white, .foot .serif { color: var(--ink) !important; }
.foot .block--cfi-footer-brand .mark { flex: 0 0 auto; }
.foot .block--cfi-footer-help a { display: block; width: max-content; margin-top: .45rem; }
.foot .block--cfi-footer-menu ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.foot .block--cfi-footer-menu li { margin: 0; }
.foot .block--cfi-footer-menu .nav-link,
.foot .block--cfi-footer-menu a {
  display: inline-block;
  padding: 0;
  line-height: 2;
}
.footer-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: clamp(1rem, 2vw, 1.35rem);
  color: var(--body);
  background: linear-gradient(135deg, var(--ox-050), #fff 88%);
  border: 1px solid rgba(27, 77, 228, .2);
  border-left: 4px solid var(--ox);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.footer-disclaimer__icon {
  flex: 0 0 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--ox);
  border-radius: 50%;
}
.footer-disclaimer__title {
  margin-bottom: .3rem;
  color: var(--ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.footer-disclaimer__body p:last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
  .foot .block--cfi-footer-menu ul { column-gap: 1.5rem; }
}

/* ---------- blog ---------- */
.cfi-progress {
  height: 4px; background: rgba(27,77,228,.12);
}
.cfi-progress[hidden] { display: none; }
.cfi-progress span {
  display: block; height: 100%; width: 0;
  background: var(--ox); transition: width .12s linear;
}
.cfi-article-help {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:clamp(.9rem,2vw,1.2rem) clamp(1rem,3vw,1.5rem);
}
.cfi-article-help__copy { flex:1 1 18rem; }
.cfi-article-help__copy p { color:#EAF1FF; }
.cfi-article-help .btn { flex:0 0 auto; white-space:nowrap; }
.cfi-article-help__call { display:inline-flex; align-items:center; gap:.45rem; }
.cfi-article-toc {
  --cfi-article-anchor-offset:6rem;
  padding:0;
  background:#fff;
}
.cfi-article-toc__summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  color:var(--ink);
  font-weight:700;
  cursor:pointer;
  list-style:none;
}
.cfi-article-toc__summary::-webkit-details-marker { display:none; }
.cfi-article-toc__summary > span { display:inline-flex; align-items:center; gap:.55rem; }
.cfi-article-toc__chevron { transition:transform .2s ease; }
.cfi-article-toc[open] .cfi-article-toc__chevron { transform:rotate(180deg); }
.cfi-article-toc__module { padding:0 1.25rem 1.1rem; }
.cfi-article-toc__list { margin:0; padding-left:1.3rem; }
.cfi-article-toc__item + .cfi-article-toc__item { margin-top:.5rem; }
.cfi-article-toc__item.toc-active > a { font-weight:700; }
.cfi-article-heading { scroll-margin-top:var(--cfi-article-anchor-offset); }
.cfi-sec:first-child h2 { margin-top: 0 !important; }

@media (max-width: 991.98px) {
  .cfi-article-help { align-items:flex-start; flex-wrap:wrap; }
  .cfi-article-help__copy { flex-basis:100%; }
  .cfi-article-toc {
    position:sticky;
    top:calc(var(--drupal-displace-offset-top, 0px) + 64px);
    z-index:90;
  }
  .cfi-article-toc[open] .cfi-article-toc__module {
    max-height:min(48vh,24rem);
    overflow-y:auto;
  }
}

/* ---------- motion ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
.fadein { animation: fadein .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .fadein { animation: none; }
  .tile, .glyph, .thumb .bi { transition: none; }
  a.tile:hover, button.tile:hover, .tile--hover:hover { transform: none; }
  a.tile:hover .glyph { transform: none; }
}

/* ---------- forum board ---------- */
.cfi-forum-board {
  display: grid;
  gap: 1.25rem;
}

.cfi-forum-board > .cfi-forum-list {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}
.cfi-forum-hero {
  display:flex; align-items:end; justify-content:space-between; gap:2rem;
  padding:clamp(1.5rem, 4vw, 3rem);
}
.cfi-forum-hero h1 { color:var(--cream); margin-bottom:.75rem; }
.cfi-forum-hero .eyebrow { color:#AFC3EA; }
.cfi-forum-hero__intro { max-width:68ch; color:#DCE7FB; }
.cfi-forum-hero__intro > *:last-child { margin-bottom:0; }
.cfi-forum-hero .btn { flex:none; }
.cfi-forum-list {
  overflow:hidden; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius);
}
.cfi-forum-list__toolbar {
  display:flex; align-items:end; justify-content:space-between; gap:1.25rem;
  padding:1.35rem 1.5rem; border-bottom:1px solid var(--line);
}
.cfi-forum-list__filter { min-width:min(100%, 15rem); }
.cfi-forum-filter-form__field label {
  display:block; margin-bottom:.35rem; color:var(--muted);
  font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.cfi-forum-filter-form { display:flex; align-items:end; gap:.65rem; }
.cfi-forum-filter-form__field .form-item { margin-bottom:0 !important; }
.cfi-forum-filter-form__actions .form-actions { margin:0; }
.cfi-forum-filter-form__actions .button { width:auto; min-height:2.75rem; }
.cfi-forum-filter-form select { min-height:2.75rem; }
.cfi-forum-list__head,
.cfi-forum-row {
  display:grid; grid-template-columns:minmax(0, 1fr) 7rem 12rem;
}
.cfi-forum-list__head {
  padding:.75rem 1.5rem; background:#F5F5F7; color:var(--muted);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.cfi-forum-list__head span:not(:first-child) { text-align:center; }
.cfi-forum-list__rows .views-row + .views-row { border-top:1px solid var(--line); }
.cfi-forum-row { min-width:0; align-items:center; padding:1.25rem 1.5rem; }
.cfi-forum-row__topic { display:flex; min-width:0; gap:1rem; align-items:flex-start; padding-right:1.5rem; }
.cfi-forum-row__topic > div { min-width:0; }
.cfi-forum-row__meta { display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.55rem; }
.cfi-forum-row__preview {
  display:-webkit-box; overflow:hidden; margin:0; color:var(--body); font-size:.92rem;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.cfi-forum-row__stat {
  display:grid; justify-items:center; gap:.05rem; color:var(--muted);
  border-inline:1px solid var(--line); font-size:.75rem; text-transform:uppercase;
}
.cfi-forum-row__stat strong { color:var(--ink); font-size:1.35rem; line-height:1; }
.cfi-forum-row__activity {
  display:flex; justify-content:center; align-items:center; gap:.45rem;
  padding-left:1rem; color:var(--muted); font-size:.88rem; text-align:center;
}
.cfi-forum-board > .cfi-forum-rules { margin-top:.25rem; }

@media (max-width:767.98px) {
  .cfi-forum-hero { align-items:stretch; flex-direction:column; }
  .cfi-forum-hero .btn { width:100%; }
  .cfi-forum-list__toolbar { align-items:stretch; flex-direction:column; padding:1.15rem; }
  .cfi-forum-list__filter { width:100%; }
  .cfi-forum-filter-form { align-items:stretch; flex-direction:column; }
  .cfi-forum-filter-form__actions .button { width:100%; }
  .cfi-forum-list__head { display:none; }
  .cfi-forum-row { grid-template-columns:1fr auto; gap:.85rem; padding:1.15rem; }
  .cfi-forum-row__topic { grid-column:1 / -1; padding:0; }
  .cfi-forum-row__stat {
    display:flex; justify-items:initial; gap:.35rem; padding:0; border:0;
    font-size:.78rem; text-transform:none;
  }
  .cfi-forum-row__stat strong { font-size:.9rem; }
  .cfi-forum-row__activity { justify-content:flex-end; padding:0; font-size:.8rem; }
}

/* ---------- forum thread ---------- */
/* One column: replies, rules, then the reply form. */
.cfi-thread { display: grid; gap: 1rem; }
/* .tile spans 12 columns for the bento; inside this one-column grid that would
   create 12 implicit tracks and squeeze the heading and list into one each. */
.cfi-thread > * { grid-column: 1 / -1; min-width: 0; }
.cfi-thread__count {
  display: inline-grid; place-items: center; min-width: 2rem; height: 2rem;
  padding: 0 .55rem; margin-left: .4rem; border-radius: 999px;
  background: #F5F5F7; font-size: 1rem; font-weight: 600; vertical-align: middle;
}
.cfi-thread .section-head { margin-bottom: 0; }
.cfi-thread__list { display: grid; gap: 1rem; }
.cfi-forum-rules__list { padding-left: 1.1rem; margin-bottom: 0; }
.cfi-forum-rules__list li { margin-bottom: .6rem; }
.cfi-forum-rules__list li:last-child { margin-bottom: 0; }

/* ---------- quick check (CAPTCHA) ----------
   Markup is the captcha module's: fieldset.captcha > legend.captcha__title,
   then the challenge's own form item. The static build emits the same. */
.captcha {
  margin: 0 0 1.25rem;
  padding: 1rem 1.1rem;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  background: #fff;
}
.captcha__title {
  float: none;
  width: auto;
  margin: 0 0 .5rem;
  padding: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.captcha .form-item { margin-bottom: 0 !important; }
.captcha input[name="captcha_response"],
.captcha .cfi-quick-check__input { max-width: 8rem; }
.captcha__description:empty { display: none; }
.captcha.is-invalid { border-color: var(--alert); }
.captcha.is-invalid .invalid-feedback { display: block; }