/* ═══════════════════════════════════════════════════════════════
   DEGREE · Certification page
   Generated from the approved design preview and scoped to .dgcp so the
   generic class names cannot collide with Elementor or the theme.
   Edit the preview source, then regenerate. Do not hand-edit this file.
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   DEGREE · Certification page: design preview
   Same visual language as the grade reveal, but built to inform
   rather than to play: everything is visible on load.
   ═══════════════════════════════════════════════════════════════ */

/* @font-face lives in cert-fonts.css and is enqueued only on full cert
   pages — never on the homepage embed (avoids overriding Elementor Forza). */

.dgcp{
  --black:#050506;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --green:#65bc46;
  --green-bright:#7bd75a;
  --green-dark:#3f8f27;
  --white:#fff;
  --muted:#a9a9b7;
  --dim:#6c6c7c;
  --faint:#4d4d5c;

  --g-red:#ff2e43;
  --g-orange:#ff8a1f;
  --g-yellow:#ffd426;
  --g-lime:#a8e857;

  --display:Forza,"Arial Black","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);

  --pad:clamp(16px,4vw,28px);
  --radius:16px;
}

.dgcp *,.dgcp *::before,.dgcp *::after{box-sizing:border-box}
.dgcp{}
.dgcp{
  background:var(--black);color:var(--white);
  font-family:var(--body);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.dgcp button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.dgcp h1,.dgcp h2,.dgcp h3,.dgcp p,.dgcp figure,.dgcp blockquote{margin:0}
.dgcp table{border-collapse:collapse;width:100%}
.dgcp .mono{font-family:var(--mono);letter-spacing:.02em}

/* preview-only banner */


/* ─── background ─────────────────────────────────────────────── */
/* anchored to the top of the document so the glow decorates the hero
   and then gets out of the way of the data */
.dgcp .dgcp-bg{position:absolute;top:0;left:0;right:0;height:min(1100px,140vh);z-index:0;pointer-events:none;overflow:hidden}
.dgcp .bg-grid{
  position:absolute;inset:-20%;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:46px 46px;
  transform:perspective(600px) rotateX(60deg) translateY(-10%);
  mask-image:radial-gradient(ellipse 66% 46% at 50% 26%,#000 20%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 66% 46% at 50% 26%,#000 20%,transparent 76%);
}
.dgcp .bg-glow{
  position:absolute;left:50%;top:6%;transform:translateX(-50%);
  width:min(92vw,760px);aspect-ratio:1;border-radius:50%;filter:blur(80px);
  background:radial-gradient(circle,rgba(101,188,70,.30),transparent 66%);
}
.dgcp .bg-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 96% 62% at 50% 20%,transparent 36%,rgba(0,0,0,.7) 100%);
}

/* ─── slim site chrome ───────────────────────────────────────── */














/* ─── preview-only variant switcher ──────────────────────────── */








/* ─── layout ─────────────────────────────────────────────────── */
.dgcp .wrap{
  position:relative;z-index:5;
  width:100%;max-width:1000px;margin:0 auto;
  padding:clamp(28px,6vw,54px) var(--pad) 70px;
  display:flex;flex-direction:column;gap:clamp(20px,4vw,34px);
}

/* scroll reveal */
.dgcp .reveal{opacity:0;transform:translateY(26px)}
.dgcp .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .75s ease,transform .85s var(--ease-out);
}

/* ═══ HERO ═══════════════════════════════════════════════════ */
.dgcp .hero{display:grid;gap:clamp(22px,4vw,44px);align-items:center}
@media (min-width:820px){ .dgcp .hero{grid-template-columns:minmax(0,300px) minmax(0,1fr)} }

.dgcp .hero-slab{display:flex;justify-content:center}
/* fills the container on phones so the emblem anchors the screen;
   the grid column caps it on desktop */
.dgcp .slab{
  width:100%;
  container-type:inline-size;
  display:flex;flex-direction:column;padding:11px 11px 0;border-radius:18px;
  background:linear-gradient(168deg,#1b1d24,#0a0b0e 64%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 28px 66px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.13);
  transition:transform .3s var(--ease-out);
  transform-style:preserve-3d;
}
.dgcp .slab-head{display:flex;align-items:center;justify-content:space-between;padding:2px 5px 10px;gap:10px}
.dgcp .slab-brand{font-family:var(--display);font-weight:900;font-size:12px;letter-spacing:.2em;color:var(--green)}
.dgcp .slab-cert{font-size:10px;letter-spacing:.1em;color:var(--dim)}

.dgcp .slab-window{
  position:relative;overflow:hidden;border-radius:12px;
  aspect-ratio:1/1.06;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#151a22,#06070a 78%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 8px 26px rgba(0,0,0,.6);
}
.dgcp .slab-word{
  font-family:var(--display);font-weight:700;font-size:12px;
  letter-spacing:.34em;text-indent:.34em;color:var(--green);
}
.dgcp .slab-grade{
  font-family:var(--display);font-weight:900;line-height:.86;
  font-size:clamp(4.6rem,27vw,7rem);letter-spacing:-.04em;
  background:linear-gradient(168deg,#fff 4%,var(--green) 46%,#fff 62%,var(--green) 96%);
  background-size:100% 260%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(101,188,70,.5));
  animation:metalRoll 5s ease-in-out infinite;
}
@keyframes metalRoll{0%,100%{background-position:0 0}50%{background-position:0 100%}}

/* On desktop the slab is a portrait card in a fixed-width column, so the
   grade is sized against the slab itself and stays proportional. */
@supports (font-size:1cqw){
  @media (min-width:820px){
    .dgcp .slab-grade{font-size:41cqw}
    .dgcp .slab-grade.is-word{font-size:8.6cqw}
  }
}

/* PRSRVD and the rejection codes are words, not digits */
.dgcp .slab-grade.is-word{
  font-size:clamp(1.15rem,6.4vw,1.7rem);letter-spacing:.09em;line-height:1.2;
  text-align:center;padding:0 8px;animation:none;
  background:linear-gradient(150deg,#fff,var(--green) 70%);
  -webkit-background-clip:text;background-clip:text;
}
.dgcp .slab-grade.is-word.is-bad{
  background:linear-gradient(150deg,#fff,#ff6a76 72%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 22px rgba(255,46,67,.45));
}
.dgcp .slab.is-prsrvd .slab-window{background:radial-gradient(circle at 50% 40%,#12201a,#06070a 78%)}
.dgcp .slab.is-ineligible .slab-window{background:radial-gradient(circle at 50% 40%,#231316,#06070a 78%)}
.dgcp .slab.is-ineligible .slab-brand{color:#ff6a76}
.dgcp .slab-sheen{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.13) 50%,transparent 64%);
  transform:translateX(var(--sheen,0));
  transition:transform .25s ease-out;
}
.dgcp .slab-foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;
  padding:10px 6px 12px;
  font-family:var(--display);font-weight:700;font-size:8.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
}
.dgcp .slab-foot i{width:2px;height:2px;border-radius:50%;background:var(--faint)}

/* ═══ MOBILE: the emblem becomes a wide landscape band ═══
   A portrait card ate most of the fold before any data was visible.
   Below the two-column breakpoint the slab keeps the page gutter but
   goes landscape, with DEGREE stacked over the grade and centred. */
@media (max-width:819px){
  .dgcp .slab{max-width:none}
  .dgcp .slab-window{
    aspect-ratio:auto;
    height:clamp(150px,40vw,220px);
  }
  .dgcp .slab-word{font-size:clamp(11px,3.2vw,14px)}
  .dgcp .slab-grade{
    font-size:clamp(4.6rem,26vw,7.5rem);
    filter:drop-shadow(0 0 22px rgba(101,188,70,.45));
  }
  .dgcp .slab-grade.is-word{font-size:clamp(1.15rem,6vw,1.8rem)}

  /* With a wide symmetrical emblem above it, left-aligned text below
     reads as lopsided, so the whole hero column centres instead. */
  .dgcp .hero-meta{text-align:center}
  .dgcp .hero-cert,.dgcp .hero-badges{justify-content:center}
  .dgcp .hero-summary{margin-inline:auto;max-width:40ch}
}

.dgcp .verified{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--green-bright);
}
.dgcp .verified-tick{
  width:16px;height:16px;border-radius:50%;flex:none;
  background:var(--green);position:relative;
}
.dgcp .verified-tick::after{
  content:"";position:absolute;left:5px;top:3.4px;width:4px;height:7px;
  border:solid #05210b;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.dgcp .verified.is-bad{color:#ff8a94}
.dgcp .verified.is-bad .verified-tick{background:var(--g-red)}
.dgcp .verified.is-bad .verified-tick::after{
  left:7px;top:4px;width:2px;height:8px;border:0;
  background:#2b0508;box-shadow:0 0 0 0 transparent;
  transform:none;border-radius:1px;
}

/* state badges stand in for the rarity tier when there is no grade */
.dgcp .state-badge{
  display:inline-block;padding:8px 20px;border-radius:999px;
  font-family:var(--display);font-weight:900;font-size:13px;
  letter-spacing:.17em;text-transform:uppercase;
}
.dgcp .state-badge.is-prsrvd{
  color:var(--green-bright);background:rgba(101,188,70,.12);
  border:1px solid rgba(101,188,70,.42);
}
.dgcp .state-badge.is-bad{
  color:#ff8a94;background:rgba(255,46,67,.11);
  border:1px solid rgba(255,46,67,.42);
}
.dgcp .state-note{
  padding:16px 18px;border-radius:12px;border-left:3px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--muted);font-size:14px;line-height:1.7;
}

.dgcp .hero-title{
  font-family:var(--display);font-weight:900;line-height:1.02;
  font-size:clamp(2rem,7.4vw,3rem);letter-spacing:-.02em;
  overflow-wrap:break-word;
}
/* Card names reach 130 characters in the real table (eight-player multi-autos),
   which at full size fills a phone screen. Step the headline down by length. */
.dgcp .hero-title.len-md{font-size:clamp(1.6rem,5.8vw,2.4rem);line-height:1.08}
.dgcp .hero-title.len-lg{font-size:clamp(1.35rem,4.8vw,1.95rem);line-height:1.14;letter-spacing:-.01em}
.dgcp .hero-title.len-xl{font-size:clamp(1.25rem,4.4vw,1.7rem);line-height:1.2;letter-spacing:0}
/* the year is sized in em, so give it a floor once the title shrinks */
.dgcp .hero-title.len-lg .hero-year,.dgcp .hero-title.len-xl .hero-year{font-size:max(.44em,13px)}

.dgcp .hero-year{display:block;font-size:.44em;letter-spacing:.14em;color:var(--muted);margin-bottom:6px}
/* short numbers should never split ("#O-" / "3"), but card numbers reach 28
   characters, and those have to be allowed to wrap or they blow the gutter */
.dgcp .hero-num{color:var(--green-bright);white-space:nowrap}
.dgcp .hero-num.is-long{white-space:normal;overflow-wrap:anywhere}

/* the parallel / variant descriptor split off the end of the player name */
.dgcp .hero-variant{
  margin-top:9px;font-family:var(--display);font-weight:800;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--green-bright);
  line-height:1.5;overflow-wrap:break-word;
}
.dgcp .hero-set{
  margin-top:6px;font-family:var(--display);font-weight:700;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  overflow-wrap:break-word;
}
.dgcp .hero-set.is-long{font-size:10.5px;letter-spacing:.09em;line-height:1.6}

.dgcp .hero-cert{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap}
.dgcp .hero-cert-label{
  font-family:var(--display);font-weight:700;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
}
.dgcp .hero-cert .mono{font-size:17px;font-weight:700;letter-spacing:.09em}
.dgcp .copy{
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  transition:color .2s,border-color .2s;
}
.dgcp .copy:hover{color:var(--white);border-color:var(--line-2)}

.dgcp .hero-badges{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.dgcp .tier{
  position:relative;overflow:hidden;display:inline-block;
  padding:8px 20px;border-radius:999px;
  font-family:var(--display);font-weight:900;font-size:13px;
  letter-spacing:.19em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.4);
}
.dgcp .tier-shimmer{
  position:absolute;inset:0;
  background:linear-gradient(118deg,transparent 28%,rgba(255,255,255,.6) 48%,transparent 66%);
  animation:shimmer 3.6s ease-in-out 1.2s infinite;
}
@keyframes shimmer{0%{transform:translateX(-115%)}55%,100%{transform:translateX(115%)}}

.dgcp .rar-common{background:linear-gradient(45deg,#8c6239,#a97457);color:#fff}
.dgcp .rar-uncommon{background:linear-gradient(45deg,#bdc3c7,#ecf0f1);color:#1a1a1a}
.dgcp .rar-rare{background:linear-gradient(45deg,#f1c40f,#f39c12);color:#2b1f00}
.dgcp .rar-epic{background:linear-gradient(45deg,#9b59b6,#8e44ad);color:#fff}
.dgcp .rar-legendary{background:linear-gradient(45deg,#e5e4e2,#f39c12);color:#1b0f00}
.dgcp .rar-mythic{background:linear-gradient(135deg,#e0f7fa,#fff,#b2ebf2);color:#001f33}

.dgcp .tier-score{font-family:var(--display);font-weight:700;color:var(--dim);font-size:12px}
.dgcp .tier-score b{color:var(--white);font-weight:900;font-size:20px}
.dgcp .tier-score i{font-style:normal;letter-spacing:.06em}

.dgcp .hero-summary{
  margin-top:18px;max-width:46ch;color:var(--muted);font-size:14.5px;line-height:1.65;
}
.dgcp .hero-summary b{color:var(--white);font-weight:700}

/* ═══ KPI STRIP ══════════════════════════════════════════════ */
.dgcp .kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:760px){ .dgcp .kpis{grid-template-columns:repeat(4,1fr)} }
.dgcp .kpi{
  padding:16px 14px;border-radius:14px;text-align:center;
  background:var(--panel);border:1px solid var(--line);
}
.dgcp .kpi-value{
  display:block;font-family:var(--display);font-weight:900;
  font-size:clamp(1.3rem,5.2vw,1.75rem);line-height:1.1;color:var(--green-bright);
}
.dgcp .kpi-value i{font-style:normal;color:var(--dim);font-size:.62em}
.dgcp .kpi-bad{color:#ff8a94}
.dgcp .kpi-label{display:block;margin-top:7px;font-size:11px;line-height:1.4;color:var(--dim)}
/* The tier name in the KPI strip is painted with its own tier gradient.
   These must set background-image, not the background shorthand, or they
   would reset the background-clip that makes the text the mask. */
.dgcp .tier-text{-webkit-background-clip:text;background-clip:text;color:transparent}
.dgcp .rar-common-text{background-image:linear-gradient(45deg,#c98b52,#e0a877)}
.dgcp .rar-uncommon-text{background-image:linear-gradient(45deg,#cfd6da,#fff)}
.dgcp .rar-rare-text{background-image:linear-gradient(45deg,#f1c40f,#ffd95e)}
.dgcp .rar-epic-text{background-image:linear-gradient(45deg,#c07de0,#d8a5ec)}
.dgcp .rar-legendary-text{background-image:linear-gradient(45deg,#f0efed,#f39c12)}
.dgcp .rar-mythic-text{background-image:linear-gradient(135deg,#e0f7fa,#fff,#b2ebf2)}

/* ═══ PANELS ═════════════════════════════════════════════════ */
.dgcp .panel{
  padding:clamp(18px,3.4vw,26px);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.014));
  border:1px solid var(--line);
}
.dgcp .panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:22px;flex-wrap:wrap;
}
.dgcp .panel-title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.05rem,4vw,1.3rem);letter-spacing:.01em;
}
.dgcp .panel-sub{margin-top:4px;font-size:12.5px;color:var(--dim)}
.dgcp .panel-tag{
  flex:none;padding:5px 12px;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:9px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--green-bright);background:rgba(101,188,70,.1);
  border:1px solid rgba(101,188,70,.26);
}
.dgcp .panel-tag.is-sample{color:#d4ba32;background:rgba(212,186,50,.1);border-color:rgba(212,186,50,.3)}

/* ═══ GRADE HISTOGRAM ════════════════════════════════════════ */
.dgcp .chart{position:relative;padding-left:30px}
.dgcp .chart-grid{position:absolute;left:30px;right:0;top:0;height:var(--chartH);pointer-events:none}
.dgcp .chart-grid span{
  position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.055);
}
.dgcp .chart-grid span::after{
  content:attr(data-y) "%";position:absolute;right:100%;top:-.62em;padding-right:8px;
  font-size:9px;color:var(--faint);font-family:var(--mono);
}
.dgcp .chart-bars{
  --chartH:clamp(160px,32vw,240px);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2px,.7vw,7px);
  height:var(--chartH);align-items:end;
}
.dgcp .chart{--chartH:clamp(160px,32vw,240px)}
.dgcp .bar{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.dgcp .bar-fill{
  display:block;width:100%;border-radius:4px 4px 2px 2px;
  height:0;transition:height 1.1s var(--ease-out);
  background:var(--c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.dgcp .is-in .bar-fill{height:var(--h)}
.dgcp .bar-val{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--h) + 6px);
  font-family:var(--display);font-weight:700;font-size:9px;color:var(--dim);
  opacity:0;transition:opacity .5s ease .7s;white-space:nowrap;
}
.dgcp .is-in .bar-val{opacity:1}
.dgcp .bar-x{
  position:absolute;left:0;right:0;top:calc(100% + 7px);text-align:center;
  font-family:var(--display);font-weight:700;font-size:10px;color:var(--faint);
}
.dgcp .bar.is-you .bar-fill{
  box-shadow:0 0 22px -2px var(--c),inset 0 1px 0 rgba(255,255,255,.4);
  outline:1.5px solid rgba(255,255,255,.55);outline-offset:1px;
}
.dgcp .bar.is-you .bar-val{color:var(--white);font-weight:900;font-size:11px}
.dgcp .bar.is-you .bar-x{color:var(--white)}
.dgcp .bar.is-you::after{
  content:"THIS CARD";position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--h) + 24px);white-space:nowrap;
  font-family:var(--display);font-weight:900;font-size:8px;letter-spacing:.12em;
  color:#06110a;background:var(--green-bright);padding:3px 7px;border-radius:4px;
  opacity:0;transition:opacity .5s ease .9s;
}
.dgcp .is-in .bar.is-you::after{opacity:1}
.dgcp .bar:hover .bar-fill{filter:brightness(1.28)}
.dgcp .chart-bars{margin-bottom:24px}
.dgcp .chart-caption{margin-top:8px;font-size:12.5px;color:var(--dim)}
.dgcp .chart-caption b{color:var(--white)}

/* twelve value labels will not fit on a phone: keep only this card's,
   and swap the callout chip for a caret under the axis */
@media (max-width:640px){
  .dgcp .chart{padding-left:26px}
  .dgcp .chart-grid{left:26px}
  .dgcp .chart-bars{margin-bottom:32px}
  .dgcp .bar-val{display:none}
  .dgcp .bar.is-you .bar-val{display:block;font-size:10px}
  .dgcp .bar.is-you::after{
    content:"▲";bottom:auto;top:calc(100% + 17px);
    padding:0;background:none;color:var(--green-bright);font-size:8px;letter-spacing:0;
  }
}

/* ═══ SUBGRADES ══════════════════════════════════════════════ */
.dgcp .subs{display:grid;gap:14px}
@media (min-width:760px){ .dgcp .subs{grid-template-columns:repeat(3,1fr)} }

.dgcp .sub{
  padding:16px 15px;border-radius:13px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);
}
.dgcp .sub-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dgcp .sub-name{
  font-family:var(--display);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.dgcp .sub-score{font-family:var(--display);font-weight:900;font-size:14px;color:var(--dim)}
.dgcp .sub-score b{color:var(--white);font-size:18px}
.dgcp .sub-band{
  width:100%;margin-top:3px;
  font-family:var(--display);font-weight:900;font-size:15px;color:var(--sc,var(--green));
}

.dgcp .sub-cap{
  display:block;margin:13px 0 5px;
  font-family:var(--display);font-weight:700;font-size:8.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--faint);
}
.dgcp .pips{display:flex;gap:5px;margin:0}
.dgcp .pip{
  flex:1;height:8px;border-radius:3px;background:rgba(255,255,255,.08);
  transform:scaleX(.3);transform-origin:left;opacity:.35;
}
.dgcp .pip.is-lit{
  background:linear-gradient(90deg,var(--sc),color-mix(in srgb,var(--sc) 60%,#fff));
  box-shadow:0 0 10px -1px var(--sc);
  transform:scaleX(1);opacity:1;
  transition:transform .5s var(--ease-back),opacity .4s ease;
  transition-delay:calc(var(--i) * 110ms);
}
.dgcp .sub:not(.is-in) .pip.is-lit{transform:scaleX(.3);opacity:.35}

.dgcp .dist{
  position:relative;display:flex;height:11px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.05);
}
.dgcp .dist i{
  display:block;height:100%;width:0;
  transition:width 1s var(--ease-out);
  /* full-strength colour plus a gloss highlight; the selected bin is
     called out with a glow rather than by dimming everything else */
  background-image:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,0) 62%);
}
.dgcp .is-in .dist i{width:var(--w)}
.dgcp .dist i.is-you{
  box-shadow:0 0 14px -1px currentColor,inset 0 0 0 1px rgba(255,255,255,.55);
  z-index:1;
}
.dgcp .dist i.d0{background-color:var(--g-red);color:var(--g-red)}
.dgcp .dist i.d1{background-color:var(--g-orange);color:var(--g-orange)}
.dgcp .dist i.d2{background-color:var(--g-yellow);color:var(--g-yellow)}
.dgcp .dist i.d3{background-color:var(--green-bright);color:var(--green-bright)}
/* labels sit under the segment they describe, so widths must match the bar */
.dgcp .dist-x{display:flex;margin-top:6px;font-family:var(--mono);font-size:8.5px}
.dgcp .dist-x span{
  width:var(--w);text-align:center;color:var(--faint);
  overflow:hidden;white-space:nowrap;
}
.dgcp .dist-x span.is-tight{visibility:hidden}
.dgcp .dist-x span.is-you{color:var(--sc);font-weight:700;visibility:visible;min-width:22px}
.dgcp .sub-note{margin-top:11px;font-size:11.5px;line-height:1.5;color:var(--dim)}
.dgcp .sub-note b{color:var(--white)}

/* creases */
.dgcp .crease{
  margin-top:14px;padding:16px 15px;border-radius:13px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.06);
}
.dgcp .crease-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.dgcp .crease-verdict{
  padding:5px 13px;border-radius:999px;
  font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.1em;
}
.dgcp .crease-verdict.is-good{background:rgba(101,188,70,.15);color:var(--green-bright);border:1px solid rgba(101,188,70,.4)}
.dgcp .crease-verdict.is-bad{background:rgba(186,47,55,.15);color:#ff7b83;border:1px solid rgba(186,47,55,.45)}

.dgcp .split{position:relative;display:flex;height:26px;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.05)}
.dgcp .split i{
  display:flex;align-items:center;justify-content:center;height:100%;width:0;
  transition:width 1.05s var(--ease-out);
}
.dgcp .is-in .split i{width:var(--w)}
.dgcp .split i em{
  font-style:normal;font-family:var(--display);font-weight:700;font-size:9.5px;
  letter-spacing:.08em;white-space:nowrap;opacity:0;transition:opacity .4s ease .7s;
}
.dgcp .is-in .split i em{opacity:1}
.dgcp .split-yes{background:var(--g-red);color:#fff}
.dgcp .split-no{background:linear-gradient(90deg,var(--green),var(--green-bright));color:#04220b}

/* the grade math */
.dgcp .math{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px;
  margin-top:22px;font-family:var(--display);font-weight:900;
  font-size:clamp(1.1rem,5vw,1.5rem);line-height:1;
}
.dgcp .math-op[data-kind=num]{
  min-width:1.5em;padding:.26em .1em;border-radius:9px;text-align:center;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
.dgcp .math-op[data-kind=bonus]{
  min-width:1.5em;padding:.26em .1em;border-radius:9px;text-align:center;
  color:var(--green-bright);background:rgba(101,188,70,.12);
  box-shadow:inset 0 0 0 1px rgba(101,188,70,.3);
}
.dgcp .math-op[data-kind=penalty]{
  min-width:1.5em;padding:.26em .1em;border-radius:9px;text-align:center;
  color:#ff8a94;background:rgba(255,46,67,.12);
  box-shadow:inset 0 0 0 1px rgba(255,46,67,.34);
}
/*
 * The eleventh point. It lands right after the crease bonus, so it needs to
 * read as a different kind of plus-one rather than a second green one.
 */
.dgcp .math-op[data-kind=perfect]{
  min-width:1.5em;padding:.26em .1em;border-radius:9px;text-align:center;
  color:#1a0b28;
  background:linear-gradient(120deg,#ffd166,#d08bff 45%,#7bd7ff);
  box-shadow:0 0 22px rgba(208,139,255,.35);
}
.dgcp .math-op[data-kind=sym]{color:var(--dim);font-size:.72em}
.dgcp .math-op[data-kind=total]{
  min-width:1.75em;padding:.26em .18em;border-radius:10px;text-align:center;
  color:#06110a;background:linear-gradient(150deg,#fff,var(--green));
  box-shadow:0 0 26px rgba(101,188,70,.42);
}
.dgcp .math-note{margin-top:10px;text-align:center;font-size:11.5px;color:var(--faint)}

/* ═══ CARD VS SET TABLE ══════════════════════════════════════ */
.dgcp .cmp{font-size:13px}
.dgcp .cmp th,.dgcp .cmp td{padding:13px 10px;text-align:right;vertical-align:middle}
.dgcp .cmp thead th{
  font-family:var(--display);font-weight:700;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--line-2);
}
.dgcp .cmp thead th span{
  display:block;margin-top:3px;font-size:9px;letter-spacing:.06em;
  text-transform:none;color:var(--faint);font-weight:500;
}
.dgcp .cmp tbody th{
  text-align:left;font-weight:400;color:var(--muted);font-size:12.5px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.dgcp .cmp tbody td{
  position:relative;font-family:var(--display);font-weight:900;font-size:15px;
  border-bottom:1px solid rgba(255,255,255,.05);overflow:hidden;
}
.dgcp .cmp tbody td::before{
  content:"";position:absolute;right:0;bottom:6px;height:3px;border-radius:2px;
  width:0;background:var(--green);opacity:.55;
  transition:width 1s var(--ease-out);
}
.dgcp .is-in .cmp tbody td::before{width:calc(var(--bar) * 1%)}
.dgcp .cmp tbody tr:first-child th{color:var(--white)}
.dgcp .cmp thead th:nth-child(2){color:var(--green-bright)}
.dgcp .cmp tbody td:nth-of-type(1){color:var(--green-bright)}
.dgcp .cmp-note{margin-top:16px;font-size:12.5px;line-height:1.6;color:var(--dim)}
.dgcp .cmp-note b{color:var(--white)}
@media (max-width:520px){
  .dgcp .cmp th,.dgcp .cmp td{padding:11px 5px}
  .dgcp .cmp tbody th{font-size:11.5px}
  .dgcp .cmp tbody td{font-size:13px}
}

/* ═══ NOTEBOOK ═══════════════════════════════════════════════ */
.dgcp .note-body{
  margin:0;padding:16px 18px;border-radius:12px;
  border-left:3px solid var(--green);
  background:rgba(101,188,70,.05);
  color:#dfe1e8;font-size:14px;line-height:1.7;font-style:italic;
}

/* ═══ CTA ════════════════════════════════════════════════════ */
.dgcp .cta{
  display:flex;align-items:center;gap:clamp(14px,3vw,26px);flex-wrap:wrap;
  padding:clamp(20px,3.6vw,28px);border-radius:var(--radius);
  background:linear-gradient(120deg,rgba(101,188,70,.14),rgba(101,188,70,.03) 62%);
  border:1px solid rgba(101,188,70,.26);
}
.dgcp .cta-bloop{width:74px;height:auto;flex:none;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5))}
.dgcp .cta-copy{flex:1;min-width:190px}
.dgcp .cta-lead{font-family:var(--display);font-weight:900;font-size:clamp(1.05rem,4vw,1.3rem)}
.dgcp .cta-lead b{color:var(--green-bright)}
.dgcp .cta-sub{margin-top:5px;font-size:13px;color:var(--muted)}
.dgcp .cta-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.dgcp .btn{
  display:inline-block;padding:13px 22px;border-radius:999px;text-decoration:none;
  font-family:var(--display);font-weight:900;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;
  transition:transform .16s var(--ease-back),box-shadow .2s;
}
.dgcp .btn-primary{
  background:linear-gradient(150deg,var(--green-bright),var(--green-dark));
  color:#04220b;box-shadow:0 8px 26px rgba(101,188,70,.34);
}
.dgcp .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 32px rgba(101,188,70,.45)}
.dgcp .btn-primary:active{transform:scale(.97)}
.dgcp .cta-fine{font-size:10.5px;color:var(--faint)}

/* outline deep-link into the population report (grade distribution panel) */
.dgcp .btn-pop{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  padding:10px 18px;border-radius:999px;border:1px solid rgba(101,188,70,.4);
  color:var(--green-bright);text-decoration:none;
  font-family:var(--display);font-weight:900;font-size:11.5px;
  letter-spacing:.09em;text-transform:uppercase;
  transition:border-color .2s,background .2s,transform .16s var(--ease-back);
}
.dgcp .btn-pop:hover{border-color:var(--green-bright);background:rgba(101,188,70,.1);transform:translateY(-1px)}

/* ═══ FOOTER META ════════════════════════════════════════════ */
.dgcp .meta{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--faint);
}
.dgcp .meta b{color:var(--dim)}
.dgcp .meta-actions{display:flex;gap:8px}
.dgcp .linkbtn{
  padding:6px 13px;border-radius:999px;border:1px solid var(--line);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);
  transition:color .2s,border-color .2s;
}
.dgcp .linkbtn:hover{color:var(--white);border-color:var(--line-2)}

/* ═══ TOOLTIP ════════════════════════════════════════════════ */
.dgcp .tip{
  position:fixed;z-index:80;pointer-events:none;opacity:0;
  padding:7px 11px;border-radius:8px;white-space:nowrap;
  background:#14141d;border:1px solid var(--line-2);
  font-family:var(--display);font-weight:700;font-size:11px;
  box-shadow:0 10px 26px rgba(0,0,0,.6);
  transform:translate(-50%,-130%);transition:opacity .16s ease;
}
.dgcp .tip.is-on{opacity:1}
.dgcp .tip b{color:var(--green-bright)}

/* ═══ PRINT ══════════════════════════════════════════════════ */
@media print{
  .dgcp .pv-flag,.dgcp .chrome,.dgcp .dgcp-bg,.dgcp .cta,.dgcp .meta-actions,.dgcp .tip{display:none !important}
  .dgcp{background:#fff;color:#000}
  .dgcp .panel,.dgcp .kpi,.dgcp .sub,.dgcp .crease{border-color:#ccc;background:#fff}
  .dgcp .reveal{opacity:1;transform:none}
}

/* ═══ REDUCED MOTION ═════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .dgcp{scroll-behavior:auto}
  .dgcp *,.dgcp *::before,.dgcp *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.14s !important;
  }
  .dgcp .reveal{opacity:1;transform:none}
  .dgcp .slab-grade,.dgcp .tier-shimmer{animation:none !important}
}