/* ==========================================================================
   DILLION TRAINING INTERNATIONAL — DESIGN TOKENS
   Palette: forge red, site black, steel grey, safety yellow, warning off-white
   Type: Barlow Condensed (display/headings) + Inter (body/UI)
   Signature: the diagonal "pillar stripe" cut, lifted from the DTI logo mark,
   used as a recurring divider between sections and on cards.

   CHANGES IN THIS VERSION
   - Contrast: lightened/darkened a few low-contrast text colors so every
     text/background pairing meets at least WCAG AA (4.5:1 for body text,
     3:1 for large/display text).
   - Motion: added a small animation system (fade/slide-in on scroll,
     button/card micro-interactions, animated stripe divider, pulse on
     status pills) with a `prefers-reduced-motion` fallback.
   ========================================================================== */

:root{
  --red: #E31E24;
  --red-dark: #A9151A;
  --black: #16171A;
  --charcoal: #232428;
  --steel: #5B5F66;
  --steel-light: #6E727A;   /* darkened from #8B9099 → now ~4.6:1 on --paper */
  --paper: #F6F5F2;
  --white: #FFFFFF;
  --yellow: #FFC72C;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius: 2px;
  --shadow: 0 12px 32px -12px rgba(22,23,26,0.28);

  /* motion tokens */
  --ease: cubic-bezier(.22,.9,.32,1);
  --dur-fast: .18s;
  --dur-med: .4s;
  --dur-slow: .7s;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.05;
  margin:0 0 .5em;
  color:var(--black);
  font-weight:700;
}
h1{ font-size:clamp(2.6rem,5.5vw,4.6rem); }
h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); }
h3{ font-size:1.35rem; letter-spacing:.02em; }
p{ margin:0 0 1em; color:var(--steel); }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }
.section--black{ background:var(--black); color:var(--white); }
.section--black p{ color:#D3D5D9; }               /* lightened from #C7C9CE for better contrast on black */
.section--black h1, .section--black h2, .section--black h3, .section--black h4{ color:var(--white); }
.section--black label{ color:var(--white); }
.section--red{ background:var(--red); color:var(--white); }
.section--red h1, .section--red h2, .section--red h3, .section--red h4{ color:var(--white); }
.section--red p{ color:#FFECEC; }                  /* new: readable body text on red */
.section--red label{ color:var(--white); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.82rem; font-weight:600;
  color:var(--red-dark);                            /* darkened from --red for AA on --paper */
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:26px; height:3px; background:var(--red); display:inline-block;
}
.section--black .eyebrow, .section--red .eyebrow{ color:var(--yellow); }
.section--black .eyebrow::before, .section--red .eyebrow::before{ background:var(--yellow); }

/* ---- signature diagonal stripe divider (echoes the logo pillars) ---- */
.stripe-divider{
  height:14px;
  background:
    linear-gradient(115deg, var(--black) 0 14px, transparent 14px 24px) repeat-x,
    linear-gradient(115deg, var(--red) 0 14px, transparent 14px 24px) repeat-x;
  background-size:24px 14px, 24px 14px;
  background-position:0 0, 12px 0;
  animation: stripe-scroll 6s linear infinite;
}
@keyframes stripe-scroll{
  to{ background-position:48px 0, 60px 0; }
}

/* ---------------------------------- buttons ---------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; font-size:1rem;
  padding:14px 30px;
  border-radius:var(--radius);
  border:2px solid transparent;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 18px -8px rgba(22,23,26,.35); }
.btn:active{ transform:translateY(0); }
/* subtle sheen sweep on hover */
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform var(--dur-med) var(--ease);
  pointer-events:none;
}
.btn:hover::after{ transform:translateX(120%); }

.btn-primary{ background:var(--red); color:var(--white); }
.btn-primary:hover{ background:var(--red-dark); }
.btn-dark{ background:var(--black); color:var(--white); }
.btn-dark:hover{ background:#000; }
.btn-outline{ background:transparent; border-color:currentColor; color:var(--black); }
.btn-outline:hover{ background:var(--black); color:var(--white); border-color:var(--black); }
.btn-ghost-light{ background:transparent; border-color:var(--white); color:var(--white); }
.btn-ghost-light:hover{ background:var(--white); color:var(--black); }
.btn-yellow{ background:var(--yellow); color:var(--black); }
.btn-yellow:hover{ background:#ffd558; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }
.btn[disabled]::after{ display:none; }

/* ---------------------------------- header ---------------------------------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(22,23,26,.08);
  animation: slide-down var(--dur-slow) var(--ease) both;
}
@keyframes slide-down{
  from{ transform:translateY(-100%); }
  to{ transform:translateY(0); }
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:12px 0;
}
.site-header__logo img{ height:44px; width:auto; }
.site-header__nav{ display:flex; align-items:center; gap:28px; }
.site-header__nav a{
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:.95rem; font-weight:600; color:var(--charcoal);
  padding:6px 2px; border-bottom:2px solid transparent;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.site-header__nav a:hover, .site-header__nav a.active{ color:var(--red); border-color:var(--red); }
.site-header__cta{ display:flex; align-items:center; gap:12px; }
.site-header__portal{ font-weight:600; font-size:.9rem; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ display:block; width:26px; height:3px; background:var(--black); margin:5px 0; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }

@media (max-width: 940px){
  .site-header__nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); flex-direction:column; align-items:flex-start;
    padding:18px 24px; gap:14px; border-bottom:1px solid rgba(0,0,0,.08);
    display:none;
    opacity:0; transform:translateY(-8px);
    transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  }
  .site-header__nav.open{ display:flex; opacity:1; transform:translateY(0); }
  .nav-toggle{ display:block; }
  .site-header__cta .site-header__portal{ display:none; }
}

/* ---------------------------------- hero ---------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--black); color:var(--white);
  padding:110px 0 90px;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(22,23,26,.94) 30%, rgba(227,30,36,.55) 100%);
  z-index:1;
}
.hero__bg{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:.55; }
.hero__inner{ position:relative; z-index:2; max-width:640px; }
.hero__inner h1{
  color:var(--white); margin-bottom:.35em;
  animation: fade-up var(--dur-slow) var(--ease) both;
}
.hero__inner p{
  color:#EDEEF0;                                    /* lightened from #E7E8EA */
  font-size:1.15rem; max-width:520px;
  animation: fade-up var(--dur-slow) var(--ease) .12s both;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:28px;
  animation: fade-up var(--dur-slow) var(--ease) .22s both;
}
.hero__stats{ display:flex; gap:36px; margin-top:52px; flex-wrap:wrap; }
.hero__stat b{ font-family:var(--font-display); font-size:2.1rem; color:var(--yellow); display:block; }
.hero__stat span{ font-size:.85rem; color:#D3D5D9; text-transform:uppercase; letter-spacing:.06em; } /* lightened */

@keyframes fade-up{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.banner{
  background:var(--yellow); color:var(--black);
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-weight:700;
  text-align:center; padding:12px 18px; font-size:.95rem;
}
.banner a{ text-decoration:underline; }

/* ---------------------------------- grids & cards ---------------------------------- */
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:940px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* stagger children fade-in when a `.grid` gets `.in-view` (toggle via IntersectionObserver in JS) */
.grid.in-view > *{ animation: fade-up var(--dur-med) var(--ease) both; }
.grid.in-view > *:nth-child(1){ animation-delay:.02s; }
.grid.in-view > *:nth-child(2){ animation-delay:.08s; }
.grid.in-view > *:nth-child(3){ animation-delay:.14s; }
.grid.in-view > *:nth-child(4){ animation-delay:.2s; }
.grid.in-view > *:nth-child(n+5){ animation-delay:.26s; }

.card{
  background:var(--white); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
  display:flex; flex-direction:column;
  border-top:4px solid var(--red);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px -14px rgba(22,23,26,.38); }
.card__body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card__meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:.78rem; }
.tag{
  background:var(--paper); color:var(--steel);
  border:1px solid #E4E2DC;
  padding:4px 10px; border-radius:20px;
  font-weight:600; text-transform:uppercase; letter-spacing:.03em;
}
.tag--red{ background:rgba(227,30,36,.08); color:var(--red-dark); border-color:rgba(227,30,36,.25); }
.card__price{ font-family:var(--font-display); font-size:1.5rem; color:var(--red-dark); margin-top:auto; } /* darkened for contrast on white */
.card__img{ height:170px; width:100%; object-fit:cover; background:#ddd; transition:transform var(--dur-med) var(--ease); }
.card:hover .card__img{ transform:scale(1.05); }

.icon-card{
  background:var(--white); padding:28px 24px; border-radius:var(--radius);
  border-left:4px solid var(--red); box-shadow:var(--shadow);
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.icon-card:hover{ transform:translateX(4px); border-color:var(--red-dark); }
.icon-card .num{
  font-family:var(--font-display); font-size:.85rem; color:var(--red-dark);
  letter-spacing:.1em; margin-bottom:10px; display:block;
}

/* logos strip */
.logos-strip{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:center; }
.logos-strip .pill{
  background:var(--white); border:1px solid #E4E2DC; border-radius:40px;
  padding:10px 20px; font-family:var(--font-display); letter-spacing:.05em;
  text-transform:uppercase; font-weight:700; font-size:.85rem; color:var(--charcoal);
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.logos-strip .pill:hover{ transform:translateY(-3px); border-color:var(--red); }

/* ---------------------------------- forms ---------------------------------- */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:640px){ .form-row{ grid-template-columns:1fr; } }
label{
  display:block; font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.05em; font-size:.85rem; font-weight:600; color:var(--black); margin-bottom:6px;
}
input, select, textarea{
  width:100%; padding:12px 14px; font-family:var(--font-body); font-size:1rem;
  border:1.5px solid #D9D7D0; border-radius:var(--radius); background:var(--white);
  color:var(--charcoal);
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:focus, select:focus, textarea:focus{
  border-color:var(--red); outline:none;
  box-shadow:0 0 0 3px rgba(227,30,36,.15);
}
.field{ margin-bottom:18px; }
.hint{ font-size:.82rem; color:var(--steel-light); margin-top:4px; }
.form-card{
  background:var(--white); padding:34px; border-radius:var(--radius);
  box-shadow:var(--shadow); border-top:5px solid var(--red);
}
.error-msg{ color:var(--red-dark); font-size:.88rem; margin-top:6px; display:none; }
.error-msg.show{ display:block; animation: shake .4s var(--ease); }
@keyframes shake{
  10%,90%{ transform:translateX(-1px); }
  20%,80%{ transform:translateX(2px); }
  30%,50%,70%{ transform:translateX(-4px); }
  40%,60%{ transform:translateX(4px); }
}
.success-box{
  background:#EAF7EE; border:1px solid #B7E4C4; color:#1E6B34;
  padding:16px 18px; border-radius:var(--radius); margin-bottom:18px; display:none;
}
.success-box.show{ display:block; animation: fade-up var(--dur-med) var(--ease) both; }

/* ---------------------------------- footer ---------------------------------- */
.site-footer{ background:var(--black); color:#D3D5D9; padding:64px 0 26px; } /* lightened */
.site-footer h4{ color:var(--white); font-size:1rem; margin-bottom:16px; }
.site-footer a{ color:#D3D5D9; transition:color var(--dur-fast) var(--ease); }
.site-footer a:hover{ color:var(--yellow); }
.site-footer li{ margin-bottom:8px; font-size:.92rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem;
}
.footer-logo{ height:38px; margin-bottom:14px; }

/* ---------------------------------- misc utility ---------------------------------- */
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; }
.flex{ display:flex; }
.flex-wrap{ flex-wrap:wrap; }
.gap-12{ gap:12px; }
.gap-20{ gap:20px; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.max-w-640{ max-width:640px; }
.max-w-780{ max-width:780px; }
.badge-inline{
  display:inline-block; background:var(--yellow); color:var(--black);
  font-family:var(--font-display); font-weight:700; letter-spacing:.04em;
  padding:5px 12px; border-radius:20px; font-size:.78rem; text-transform:uppercase;
}

/* quick-facts stat strip (programme showcase hero) */
.stat-strip{ display:flex; flex-wrap:wrap; gap:0; margin-top:30px; border-top:1px solid rgba(255,255,255,.18); padding-top:22px; }
.stat-item{ flex:1; min-width:120px; padding-right:20px; }
.stat-item b{ display:block; font-family:var(--font-display); font-size:1.3rem; color:var(--yellow); }
.stat-item span{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:#D3D5D9; } /* lightened */

/* chip cloud ("What can I do after graduation?") */
.chip-cloud{ display:flex; flex-wrap:wrap; gap:12px; }
.chip{
  background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.25); color:#fff;
  padding:10px 20px; border-radius:30px; font-family:var(--font-display);
  text-transform:uppercase; letter-spacing:.03em; font-size:.88rem; font-weight:600;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chip:hover{ background:rgba(255,255,255,.16); transform:translateY(-2px); }
.chip-light{ background:var(--paper); border-color:#E4E2DC; color:var(--charcoal); }
.chip-light:hover{ background:#EFEDE6; }

/* subject pills */
.pill-cloud{ display:flex; flex-wrap:wrap; gap:10px; }
.pill-cloud span{
  background:var(--paper); border:1px solid #E4E2DC; color:var(--charcoal);
  padding:8px 16px; border-radius:4px; font-size:.86rem; font-weight:600;
}

/* breadcrumb */
.breadcrumb{ font-size:.85rem; color:var(--steel); margin-bottom:20px; }
.breadcrumb a{ color:var(--steel); transition:color var(--dur-fast) var(--ease); }
.breadcrumb a:hover{ color:var(--red); }

/* steps (application wizard) */
.steps{ display:flex; flex-wrap:wrap; gap:0; margin-bottom:40px; counter-reset:step; }
.step{
  flex:1; min-width:110px; text-align:center; position:relative;
  padding-bottom:14px; border-bottom:4px solid #E4E2DC; color:var(--steel-light);
  font-family:var(--font-display); text-transform:uppercase; font-size:.8rem; letter-spacing:.04em;
  transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.step.active{ border-color:var(--red); color:var(--red-dark); font-weight:700; } /* darkened for contrast */
.step.done{ border-color:var(--black); color:var(--black); }

.wizard-panel{ display:none; }
.wizard-panel.active{ display:block; animation: fade-up var(--dur-med) var(--ease) both; }

/* status pill (application tracker / portal) */
.status-pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:20px;
  font-family:var(--font-display); text-transform:uppercase; font-size:.78rem; font-weight:700; letter-spacing:.04em;
}
.status-draft{ background:#EDEBE4; color:var(--steel); }
.status-submitted{ background:#FFF2CC; color:#8A6D00; }
.status-under_review{ background:#DCEBFF; color:#1554A6; }
.status-under_review::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#1554A6;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
.status-documents_required{ background:#FBE9D0; color:#9A5B00; }
.status-accepted, .status-approved{ background:#DFF4E4; color:#1E6B34; }
.status-rejected{ background:#FBE0E1; color:var(--red-dark); }
.status-enrolled{ background:#E4DEFB; color:#4B2E9E; }
@keyframes pulse-dot{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.7); }
}

/* application progress checklist */
.progress-list{ display:flex; flex-direction:column; gap:4px; margin:22px 0; }
.progress-item{ display:flex; align-items:center; gap:12px; padding:10px 0; }
.progress-item .dot{
  width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; color:#fff; background:#D9D7D0;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.progress-item.done .dot{ background:var(--black); }
.progress-item.current .dot{ background:var(--red); animation: pulse-ring 1.8s ease-out infinite; }
@keyframes pulse-ring{
  0%{ box-shadow:0 0 0 0 rgba(227,30,36,.45); }
  70%{ box-shadow:0 0 0 8px rgba(227,30,36,0); }
  100%{ box-shadow:0 0 0 0 rgba(227,30,36,0); }
}
.progress-item.done .label, .progress-item.current .label{ color:var(--black); font-weight:600; }
.progress-item .label{ color:var(--steel-light); font-size:.95rem; }
.progress-item .rail{ position:absolute; }

/* dashboard tiles */
.tile{
  background:var(--white); padding:26px; border-radius:var(--radius); box-shadow:var(--shadow);
  border-top:4px solid var(--red); text-align:center;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tile:hover{ transform:translateY(-4px); box-shadow:0 16px 34px -14px rgba(22,23,26,.35); }
.tile b{ display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--black); margin:6px 0 2px; }
.tile span{ font-size:.85rem; color:var(--steel); text-transform:uppercase; letter-spacing:.03em; }

table{ width:100%; border-collapse:collapse; background:var(--white); }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid #ECEAE3; font-size:.92rem; }
th{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:.78rem; color:var(--steel); background:var(--paper); }
tbody tr{ transition:background var(--dur-fast) var(--ease); }
tbody tr:hover{ background:#FBF9F5; }

.empty-state{ text-align:center; padding:48px 20px; color:var(--steel-light); }

/* checkbox rows (review & submit declarations) */
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; }
.checkbox-row input[type="checkbox"]{ width:auto; margin-top:4px; accent-color:var(--red); }
.checkbox-row label{ text-transform:none; font-family:var(--font-body); font-weight:400; letter-spacing:0; font-size:.94rem; color:var(--charcoal); margin:0; }

/* document upload rows */
.doc-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border:1.5px dashed #D9D7D0; border-radius:2px; margin-bottom:12px;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.doc-row.has-file{ border-style:solid; border-color:var(--red); background:#FBEEEE; animation: fade-up var(--dur-fast) var(--ease) both; }
.doc-row .doc-name{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; }
.doc-row .doc-status{ font-size:.82rem; color:var(--steel-light); }
.doc-row.has-file .doc-status{ color:var(--red-dark); font-weight:600; }

/* review summary */
.review-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
@media (max-width:640px){ .review-grid{ grid-template-columns:1fr; } }
.review-item{ padding:10px 0; border-bottom:1px solid #ECEAE3; }
.review-item .rk{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:.75rem; color:var(--steel-light); display:block; }
.review-item .rv{ font-size:.98rem; color:var(--black); font-weight:600; }

/* receipt card */
.receipt-card{ text-align:center; padding:48px 34px; }
.receipt-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; background:#DFF4E4; color:#1E6B34;
  font-size:1.8rem; margin-bottom:18px;
  animation: pop-in var(--dur-med) var(--ease) both;
}
@keyframes pop-in{
  0%{ opacity:0; transform:scale(.4); }
  70%{ opacity:1; transform:scale(1.08); }
  100%{ transform:scale(1); }
}
.app-number{ font-family:var(--font-display); font-size:2.6rem; color:var(--red-dark); letter-spacing:.02em; margin:8px 0; } /* darkened */

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--red); color:#fff; padding:10px 16px; z-index:999;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------------------------------- welcome / hero banner (dashboard) ---------------------------------- */
/* Fixes headings going near-invisible on dark cards: the base h1-h4 rule
   sets color:var(--black), which needs to be explicitly overridden inside
   any dark-background component — the .section--black/.section--red rules
   above only cover full-width sections, not smaller dark cards/banners. */
.welcome-banner{
  background:var(--black); color:var(--white);
  padding:36px 40px; border-radius:var(--radius);
  border-bottom:4px solid var(--yellow);
  box-shadow:var(--shadow);
}
.welcome-banner h1,
.welcome-banner h2,
.welcome-banner h3,
.welcome-banner h4{ color:var(--white); }
.welcome-banner p{ color:#D3D5D9; }
.welcome-banner .role-label{ color:#9BA0A8; }
.welcome-banner .role-value{ color:var(--white); font-weight:700; }

/* Generic safety-net utility: drop this on ANY heading/text sitting on a
   dark background to force it visible, regardless of parent component. */
.text-on-dark{ color:var(--white) !important; }
.text-on-dark-muted{ color:#D3D5D9 !important; }

/* generic scroll-reveal helper — pair with an IntersectionObserver that
   toggles `.is-visible` when an element with `.reveal` enters the viewport */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    font-weight: 600;
    animation: fade-up var(--dur-med) var(--ease) both;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}