/* ===================================================================
   Recognition Standards — /standards/
   Page-specific styles. Desktop-first; responsive rules at the bottom
   (<=1000px tablet grids, <=640px phone, <=420px single-column stat rows).
   Relies on style.css tokens (--primary #6865e7, --ink, --line, etc).
   =================================================================== */

.std-scope { --lav:#f4f3fe; --lav-2:#efeefc; --card-line:#e9e7fb; }

/* shared centred section head */
.std-head { max-width:720px; margin:0 auto 44px; text-align:center; }
.std-head h2 { margin:0; }
.std-head p { color:var(--text); font-size:1.06rem; margin:.7rem auto 0; max-width:640px; }

/* shared icon chip */
.std-ic {
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:13px;
  background:#efeefc; color:var(--primary); flex:none;
}
.std-ic svg { width:24px; height:24px; }
.std-ic--sm { width:40px; height:40px; border-radius:11px; }
.std-ic--sm svg { width:21px; height:21px; }

/* ---- 2 · WHY RECOGNITION MATTERS -------------------------------------- */
.std-why { padding-top:96px; padding-bottom:64px; }
.std-why__grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.std-why__card {
  display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:8px;
  align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 22px 24px; box-shadow:var(--shadow-sm);
  transition:transform .2s, box-shadow .2s;
}
.std-why__card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.std-why__card .std-ic { grid-row:1; grid-column:1; }
.std-why__card h3 { grid-row:1; grid-column:2; margin:0; font-size:1.12rem; }
.std-why__card p { grid-row:2; grid-column:1 / 3; margin:0; font-size:.95rem; color:var(--text); }

/* ---- 3 · WHAT YOU GET -------------------------------------------------- */
.std-get-wrap { padding:32px 0; }
.std-get {
  background:linear-gradient(120deg,#f1efff 0%,#f3f0ff 45%,#fdf1f6 100%);
  border:1px solid #ece9fb; border-radius:24px; padding:44px 40px 48px;
}
.std-get .std-head { margin-bottom:32px; }
.std-get__row {
  display:flex; align-items:stretch; gap:0;
  background:#fff; border:1px solid var(--card-line); border-radius:16px;
  padding:6px; box-shadow:var(--shadow-sm);
}
.std-get__item {
  flex:1; display:flex; align-items:center; justify-content:center; gap:12px;
  padding:16px 14px; text-align:left; position:relative;
}
.std-get__item + .std-get__item::before {
  content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px;
  background:var(--line);
}
.std-get__label { font-weight:800; color:var(--ink); font-size:.95rem; line-height:1.25; }

/* ---- 4 · CHOOSE THE APPLICABLE STANDARD ------------------------------- */
.std-choose-wrap { padding:40px 0 24px; }
.std-choose {
  background:var(--lav); border:1px solid #eae8fb; border-radius:24px;
  padding:52px 40px 48px;
}

/* the switch */
.std-switch {
  display:inline-flex; margin:0 auto 40px; gap:4px; padding:5px;
  background:#fff; border:1px solid var(--card-line); border-radius:999px;
  box-shadow:var(--shadow-sm);
}
.std-choose { text-align:center; }
.std-switch button {
  appearance:none; border:0; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:.98rem; color:var(--ink);
  padding:11px 30px; border-radius:999px; background:transparent;
  transition:background .2s, color .2s;
}
.std-switch button:hover { color:var(--primary); }
.std-switch button.is-active {
  background:var(--primary); color:#fff;
  box-shadow:0 8px 20px rgba(104,101,231,.35);
}

/* What We Assess */
.std-assess { text-align:left; }
.std-assess__h { text-align:center; font-size:1.4rem; margin:8px 0 28px; }
.std-assess__grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.std-assess__card {
  background:#fff; border:1px solid var(--card-line); border-radius:16px;
  padding:24px 16px; text-align:center;
  transition:transform .2s, box-shadow .2s;
}
.std-assess__card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.std-assess__card .std-ic { margin:0 auto 14px; }
.std-assess__card h4 { margin:0 0 8px; font-size:1rem; line-height:1.25; }
.std-assess__card p { margin:0; font-size:.86rem; color:var(--text); line-height:1.5; }

/* ---- 5 · DETAILED RECOGNITION STANDARDS ------------------------------- */
.std-detail-wrap { padding:24px 0 40px; }
.std-detail {
  background:var(--lav); border:1px solid #eae8fb; border-radius:24px;
  padding:52px 40px 44px;
}
.std-levels { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }

.std-col {
  background:#fff; border:1px solid var(--card-line); border-radius:18px;
  padding:8px 8px 10px; box-shadow:var(--shadow-sm);
}
.std-col__head { padding:18px 16px 14px; border-bottom:1px solid var(--line); margin-bottom:4px; }
.std-col__lvl {
  display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--primary); margin-bottom:6px;
}
.std-col__name { display:block; font-weight:800; color:var(--ink); font-size:1.02rem; }
.std-col__range { color:var(--muted); font-weight:700; }
.std-col__blurb { margin:8px 0 0; font-size:.84rem; color:var(--text); line-height:1.5; }
/* subtle per-level accent on the header rule */
.std-col__head--1 { box-shadow:inset 0 3px 0 -1px transparent; }

/* accordion row */
.std-item { border-bottom:1px solid var(--line); }
.std-item:last-child { border-bottom:0; }
.std-item > summary {
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px;
  padding:15px 12px; user-select:none;
}
.std-item > summary::-webkit-details-marker { display:none; }
.std-item__n {
  flex:none; font-weight:800; font-size:.82rem; color:var(--primary);
  min-width:22px;
}
.std-item__t { flex:1; font-weight:800; color:var(--ink); font-size:.94rem; line-height:1.3; }
/* +/- toggle glyph */
.std-item__ico { flex:none; position:relative; width:18px; height:18px; }
.std-item__ico::before, .std-item__ico::after {
  content:""; position:absolute; background:var(--primary); border-radius:2px;
  transition:opacity .2s, transform .2s;
}
.std-item__ico::before { left:2px; right:2px; top:8px; height:2px; }        /* horizontal */
.std-item__ico::after  { top:2px; bottom:2px; left:8px; width:2px; }         /* vertical   */
.std-item[open] > summary { color:var(--primary); }
.std-item[open] .std-item__ico::after { opacity:0; transform:scaleY(0); }
.std-item[open] .std-item__t { color:var(--primary); }

/* open state highlight */
.std-item[open] { background:#faf9ff; border-radius:12px; }

/* detail body */
.std-item__body { padding:2px 14px 18px; }
.std-item__soon { margin:0; font-size:.86rem; color:var(--muted); font-style:italic; }
.std-block { margin:0 0 16px; }
.std-block:last-child { margin-bottom:0; }
.std-block__h {
  margin:0 0 6px; font-size:.72rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--primary);
}
.std-block__h--ok { color:#12a150; }
.std-block__h--no { color:#d1414a; }
.std-block__p { margin:0; font-size:.9rem; color:var(--text-dark); line-height:1.55; }
.std-item__more {
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-weight:800; font-size:.88rem; color:var(--primary);
}
.std-item__more:hover { color:var(--primary-d); }
.std-item__more svg { transition:transform .2s; }
.std-item__more:hover svg { transform:translateX(3px); }
.std-block__list { margin:0; padding:0; }
.std-block__list li {
  position:relative; padding-left:18px; margin:0 0 4px; font-size:.88rem;
  color:var(--text-dark); line-height:1.5;
}
.std-block__list li::before {
  content:""; position:absolute; left:2px; top:.55em; width:6px; height:6px;
  border-radius:50%; background:var(--primary);
}
.std-block__list--ok li::before { background:#12a150; }
.std-block__list--no li::before {
  background:none; width:8px; height:8px; top:.5em; left:1px;
  border-radius:0;
  background-image:linear-gradient(45deg,transparent 45%,#d1414a 45%,#d1414a 55%,transparent 55%),
                   linear-gradient(-45deg,transparent 45%,#d1414a 45%,#d1414a 55%,transparent 55%);
}

/* assessment outcomes */
.std-outcomes { display:grid; gap:8px; }
.std-outcome { display:flex; gap:10px; align-items:baseline; font-size:.86rem; }
.std-outcome__k {
  flex:none; font-weight:800; padding:2px 9px; border-radius:999px;
  font-size:.74rem; line-height:1.4;
}
.std-outcome__v { color:var(--text); }
.std-outcome--meets .std-outcome__k { background:#e4f7ec; color:#12a150; }
.std-outcome--partially-meets .std-outcome__k { background:#fdf3e0; color:#b8791b; }
.std-outcome--does-not-meet .std-outcome__k { background:#fce8ea; color:#d1414a; }
.std-outcome--not-applicable .std-outcome__k { background:#eceaf6; color:#6d6a86; }

/* handbook note + link */
.std-hbk {
  margin-top:32px; padding:22px 24px; background:#fff;
  border:1px solid var(--card-line); border-radius:16px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.std-hbk__note { margin:0; font-size:.9rem; color:var(--text); max-width:720px; }
.std-hbk__link {
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-weight:800; font-size:.92rem; color:var(--primary);
}
.std-hbk__link:hover { color:var(--primary-d); }
.std-hbk__link svg { transition:transform .2s; }
.std-hbk__link:hover svg { transform:translateX(3px); }

/* org/pro toggle visibility */
.std-scope.std--org .only-pro { display:none; }
.std-scope.std--pro .only-org { display:none; }

/* ---- 6 + 7 · RATING CONNECTION + CURRENT STANDARD --------------------- */
.std-foot { padding:40px 0 88px; }
.std-foot__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.std-foot__grid + .std-foot__grid { margin-top:24px; }

.std-connect {
  display:block;
  background:var(--lav); border:1px solid #eae8fb; border-radius:22px;
  padding:36px 40px;
}
.std-connect__ic {
  flex:none; display:inline-flex; align-items:center; justify-content:center;
}
.std-connect__ic img { height:96px; width:auto; }
/* icon beside the eyebrow + title; description spans the full column below */
.std-connect__head { display:flex; align-items:center; gap:20px; margin-bottom:18px; }
.std-connect__titles { min-width:0; }
.std-connect__titles .eyebrow { margin-bottom:6px; }
.std-connect__titles h2 { margin:0; font-size:1.5rem; }
.std-connect > p { color:var(--text); font-size:.98rem; margin:0 0 18px; }
.std-connect__body h2 { font-size:1.5rem; margin:.2rem 0 .6rem; }
.std-connect__body p { color:var(--text); font-size:.98rem; margin:0 0 18px; }

.std-version {
  background:#fff; border:1px solid var(--card-line); border-radius:22px;
  padding:36px 40px;
}
.std-version__ic {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:13px; background:#efeefc;
  color:var(--primary); margin-bottom:14px;
}
.std-version__ic svg { width:26px; height:26px; }
.std-version h3 { margin:0 0 16px; font-size:1.2rem; }
.std-version__meta { margin:0 0 18px; }
.std-version__meta div {
  display:flex; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.std-version__meta div:last-child { border-bottom:0; }
.std-version__meta dt { margin:0; color:var(--text); font-size:.9rem; }
.std-version__meta dd { margin:0; color:var(--ink); font-weight:800; font-size:.9rem; }
.std-version__link {
  display:inline-flex; align-items:center; gap:5px; font-weight:800;
  font-size:.9rem; color:var(--primary);
}
.std-version__link:hover { color:var(--primary-d); }

/* ===================================================================
   RESPONSIVE
   =================================================================== */

/* ---- tablet: collapse the wide grids ---- */
@media (max-width: 1000px) {
  .std-why__grid    { grid-template-columns:repeat(2,1fr); }
  .std-assess__grid { grid-template-columns:repeat(3,1fr); }
  .std-levels       { grid-template-columns:1fr; }
  .std-foot__grid   { grid-template-columns:1fr; }
  .std-get__row     { flex-wrap:wrap; }
  .std-get__item    { flex:1 1 30%; }
  .std-get__item:nth-child(3n+1)::before { display:none; }   /* no divider at row start */
}

/* ---- phone ---- */
@media (max-width: 640px) {
  /* softer section rhythm + panel padding */
  .std-why { padding-top:56px; padding-bottom:36px; }
  .std-get-wrap   { padding:24px 0; }
  .std-choose-wrap{ padding:28px 0 20px; }
  .std-detail-wrap{ padding:20px 0 32px; }
  .std-foot       { padding:32px 0 64px; }

  .std-get, .std-choose, .std-detail { border-radius:18px; padding:28px 16px 32px; }
  .std-connect, .std-version { border-radius:18px; padding:24px 18px; }

  .std-head { margin-bottom:28px; }
  .std-head p { font-size:1rem; }

  /* Why: single column */
  .std-why__grid { grid-template-columns:1fr; gap:14px; }
  .std-why__card { padding:18px 18px 20px; }

  /* What You Get: 2-up grid, no vertical dividers */
  .std-get .std-head { margin-bottom:22px; }
  .std-get__row {
    display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:8px;
  }
  .std-get__item { justify-content:flex-start; gap:10px; padding:12px 10px; }
  .std-get__item::before { display:none !important; }
  .std-get__label { font-size:.88rem; }

  /* Choose + What We Assess */
  .std-switch { margin-bottom:28px; width:100%; }
  .std-switch button { flex:1; padding:11px 12px; font-size:.92rem; }
  .std-assess__h { font-size:1.2rem; margin-bottom:20px; }
  .std-assess__grid { grid-template-columns:1fr 1fr; gap:12px; }
  .std-assess__card { padding:18px 12px; }
  .std-assess__card h4 { font-size:.94rem; }

  /* Detailed standards accordions */
  .std-detail .std-head { margin-bottom:24px; }
  .std-levels { gap:14px; }
  .std-item > summary { padding:14px 8px; gap:10px; }
  .std-item__body { padding:2px 8px 16px; }
  .std-item[open] { border-radius:10px; }

  /* handbook note: stack */
  .std-hbk { flex-direction:column; align-items:flex-start; gap:14px; padding:18px; margin-top:24px; }

  /* footer cards */
  .std-connect__head { gap:14px; margin-bottom:14px; }
  .std-connect__ic img { height:72px; }
  .std-connect__titles h2, .std-connect__body h2 { font-size:1.2rem; }
  .std-version { padding:24px 18px; }
  .std-version__meta div { gap:12px; }
}

/* very small phones: single-column stat rows */
@media (max-width: 420px) {
  .std-get__row     { grid-template-columns:1fr; }
  .std-assess__grid { grid-template-columns:1fr; }
}