/* ============================================================
   The learner surfaces: report, review, dashboard.

   One stylesheet for all three, because they are one product — the section
   breakdown in the report and the section breakdown on the dashboard have to
   be the same object or the learner has to relearn the page every time.

   Everything is prefixed `r-`. The test player carries its own inline CSS
   with its own `.card`, `.stat` and `.note`, and this file is loaded
   alongside it on the score screen; an unprefixed `.card` rule here would
   silently restyle the question card mid-test.

   Brand: our own green, Nunito, thick rounded borders with a heavier bottom
   edge, flat colour. Not the teal-and-navy of the competitor dashboards this
   was measured against.
   ============================================================ */

:root{
  --r-green:#58cc02; --r-green-dark:#4aa302; --r-green-deep:#43850a;
  --r-lime:#a5ed6e; --r-lime-pale:#d7ffb8;
  --r-blue:#1cb0f6; --r-blue-dark:#1899d6; --r-blue-pale:#ddf4ff;
  --r-purple:#ce82ff; --r-purple-pale:#f3e6ff;
  --r-bee:#ffc800; --r-bee-pale:#fff4cc; --r-fox:#ff9600; --r-fox-pale:#ffeacc;
  --r-red:#ff4b4b; --r-red-pale:#ffe0e0;
  --r-eel:#4b4b4b; --r-eel-dark:#3c3c3c; --r-wolf:#777777; --r-hare:#afafaf;
  --r-swan:#e5e5e5; --r-snow:#f7f7f7; --r-white:#ffffff;
  --r-font:'Nunito',ui-rounded,'SF Pro Rounded','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ---------- layout ---------- */
.r-wrap{max-width:1080px;margin:0 auto;padding:32px 22px 90px}
.r-wrap.wide{max-width:1180px}
.r-row{display:grid;gap:18px}
@media(min-width:900px){
  .r-row.two{grid-template-columns:1fr 1fr}
  .r-row.side{grid-template-columns:1.35fr 1fr}
  .r-row.three{grid-template-columns:repeat(3,1fr)}
}

.r-card{background:var(--r-white);border:2px solid var(--r-swan);border-bottom-width:4px;
  border-radius:20px;padding:24px;margin-bottom:18px}
.r-card.flush{padding:0;overflow:hidden}
.r-card h2{font-size:20px;font-weight:900;color:var(--r-eel-dark);margin:0 0 4px;letter-spacing:-.01em}
.r-card h3{font-size:16px;font-weight:900;color:var(--r-eel-dark);margin:0 0 4px}
.r-card p{margin:0 0 14px;color:var(--r-wolf);font-size:14px;line-height:1.6}
.r-card p:last-child{margin-bottom:0}

.r-eyebrow{font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--r-hare);margin:0 0 6px}
.r-lede{color:var(--r-wolf);font-size:14px;line-height:1.6;margin:0 0 16px}
.r-hr{height:2px;background:var(--r-swan);border:0;margin:22px 0}

/* ---------- the score hero ---------- */
.r-hero{display:flex;gap:30px;flex-wrap:wrap;align-items:center}
.r-hero-gauge{flex:0 0 auto}
.r-hero-body{flex:1 1 300px;min-width:280px}
.r-hero-body h1{font-size:29px;font-weight:900;color:var(--r-eel-dark);margin:0 0 8px;
  line-height:1.2;letter-spacing:-.02em}
.r-tags{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0}

.r-rings{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.r-skill{flex:1 1 96px;min-width:92px;text-align:center}
.r-skill span{display:block;font-size:10px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;color:var(--r-hare);margin-top:6px}

/* The class rules below set display, which ties with the user agent's
   `[hidden]{display:none}` and wins on source order — so `hidden` elements
   stayed visible. Restore it. */
[hidden]{display:none !important}

/* ---------- pills ---------- */
.r-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;
  font-size:11px;font-weight:900;letter-spacing:.04em;background:var(--r-snow);color:var(--r-wolf)}
.r-pill.good{background:var(--r-lime-pale);color:var(--r-green-deep)}
.r-pill.warn{background:var(--r-bee-pale);color:#8a6d00}
.r-pill.bad{background:var(--r-red-pale);color:#c22}
.r-pill.info{background:var(--r-blue-pale);color:var(--r-blue-dark)}
.r-pill.ghost{background:transparent;border:2px solid var(--r-swan)}

/* ---------- stat cards ---------- */
.r-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.r-stat{background:var(--r-white);border:2px solid var(--r-swan);border-bottom-width:4px;
  border-radius:18px;padding:18px 20px}
.r-stat span{display:block;font-size:10px;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--r-hare);margin-bottom:6px}
.r-stat b{display:block;font-size:32px;font-weight:900;color:var(--r-eel-dark);line-height:1}
.r-stat i{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--r-wolf);margin-top:6px}
.r-stat i.up{color:var(--r-green-deep)} .r-stat i.down{color:var(--r-red)}

/* ---------- buttons ---------- */
.r-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:inherit;font-weight:900;font-size:14px;letter-spacing:.02em;padding:13px 22px;
  border:0;border-radius:14px;background:var(--r-green);color:#fff;cursor:pointer;
  box-shadow:0 4px 0 var(--r-green-deep);text-decoration:none;transition:filter .12s}
.r-btn:hover{filter:brightness(1.05);text-decoration:none;color:#fff}
.r-btn:active{transform:translateY(3px);box-shadow:none}
/* Secondary buttons carry their depth as a shadow, not as a fat bottom
   border. The border version could not compress: pressing translated the
   button 3px while its 4px bottom edge travelled with it, so it slid rather
   than depressed, and it felt unlike the same button on every marketing page.
   Shadow-based depth lets the press sink into it — one interaction sitewide. */
.r-btn.ghost{background:var(--r-white);color:var(--r-eel);border:2px solid var(--r-swan);
  box-shadow:0 4px 0 var(--r-swan);padding:11px 20px}
.r-btn.ghost:hover{border-color:var(--r-hare);color:var(--r-eel-dark);filter:none;
  background:var(--r-snow)}
.r-btn.ghost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--r-swan)}
.r-btn.blue{background:var(--r-blue);box-shadow:0 4px 0 var(--r-blue-dark)}
.r-btn.sm{padding:9px 16px;font-size:13px;border-radius:12px}
.r-btn[disabled]{opacity:.4;pointer-events:none}
.r-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ---------- bars ---------- */
.r-track{height:10px;border-radius:6px;background:var(--r-swan);overflow:hidden;position:relative}
.r-track i{display:block;height:100%;border-radius:6px;background:var(--r-green);transition:width .5s}
.r-track i.warn{background:var(--r-bee)} .r-track i.bad{background:var(--r-red)}
.r-track .mark{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--r-eel-dark);
  border-radius:2px;opacity:.55}

.r-meter{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:2px solid var(--r-snow)}
.r-meter:first-child{border-top:0}
.r-meter .lab{flex:0 0 118px;font-size:14px;font-weight:800;color:var(--r-eel-dark)}
.r-meter .r-track{flex:1 1 auto}
.r-meter .val{flex:0 0 46px;text-align:right;font-size:16px;font-weight:900;color:var(--r-eel-dark)}

/* ---------- leaks ---------- */
.r-leak{display:flex;gap:16px;border:2px solid var(--r-swan);border-bottom-width:4px;
  border-radius:16px;padding:18px 20px;margin-bottom:12px}
.r-leak:last-child{margin-bottom:0}
.r-leak .num{flex:0 0 32px;height:32px;border-radius:50%;background:var(--r-fox-pale);
  color:var(--r-fox);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:900}
.r-leak .body{flex:1 1 auto;min-width:0}
.r-leak .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.r-leak .top b{font-size:16px;font-weight:900;color:var(--r-eel-dark)}
.r-leak p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--r-wolf)}

/* ---------- section breakdown ---------- */
.r-sec{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:2px solid var(--r-snow)}
.r-sec:first-child{border-top:0}
.r-sec .n{flex:0 0 30px;height:30px;border-radius:9px;background:var(--r-snow);
  color:var(--r-wolf);display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900}
.r-sec .body{flex:1 1 auto;min-width:0}
.r-sec .body b{display:block;font-size:15px;font-weight:900;color:var(--r-eel-dark)}
.r-sec .body small{display:block;font-size:12px;font-weight:700;color:var(--r-hare);margin-top:2px}
.r-sec .meter{flex:0 0 130px}
.r-sec .go{flex:0 0 auto}
@media(max-width:640px){
  .r-sec{flex-wrap:wrap}
  .r-sec .meter{flex:1 1 100%;order:3}
}

/* ---------- radar ---------- */
.r-radar{display:block;margin:0 auto;max-width:100%}
.r-legend{display:flex;gap:18px;justify-content:center;font-size:12px;font-weight:800;
  color:var(--r-wolf);margin-top:6px}
.r-legend i{display:inline-block;width:14px;height:4px;border-radius:2px;
  background:var(--r-green);margin-right:6px;vertical-align:middle}
.r-legend i.dash{background:none;border-top:3px dashed var(--r-hare);height:0}

/* ---------- readiness ---------- */
.r-ready{display:flex;align-items:center;gap:18px;margin-top:20px;padding-top:20px;
  border-top:2px solid var(--r-snow)}
.r-ready .txt b{display:block;font-size:16px;font-weight:900;color:var(--r-eel-dark)}
.r-ready .txt p{margin:4px 0 0;font-size:13px;line-height:1.55}

/* ---------- the question grid ---------- */
.r-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px}
.r-dot{aspect-ratio:1;border:2px solid var(--r-swan);border-radius:12px;background:var(--r-white);
  font:inherit;font-size:13px;font-weight:900;color:var(--r-wolf);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .1s}
.r-dot:hover{transform:translateY(-2px)}
.r-dot.y{background:var(--r-lime-pale);border-color:#b6e88a;color:var(--r-green-deep)}
.r-dot.p{background:var(--r-bee-pale);border-color:#f0d97a;color:#8a6d00}
.r-dot.n{background:var(--r-red-pale);border-color:#ffbfbf;color:#c22}
.r-dot.now{outline:3px solid var(--r-blue);outline-offset:1px}
.r-gridkey{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;font-weight:800;
  color:var(--r-wolf);margin-top:14px}
.r-gridkey em{font-style:normal;display:inline-block;width:12px;height:12px;border-radius:4px;
  margin-right:6px;vertical-align:-2px}

/* ---------- one reviewed question ---------- */
.r-q-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.r-q-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--r-snow);
  color:var(--r-eel-dark);display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:900}
.r-q-sec{font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--r-hare)}
.r-q-task{font-size:16px;font-weight:900;color:var(--r-eel-dark)}
.r-q-verdict{margin-left:auto}

.r-prompt{background:var(--r-snow);border-radius:14px;padding:16px 18px;font-size:15px;
  line-height:1.7;color:var(--r-eel-dark);margin-bottom:18px;white-space:pre-wrap;overflow-wrap:anywhere}
.r-prompt .say{font-weight:800}
.r-photo{display:block;width:100%;max-width:420px;border-radius:14px;margin:0 0 16px}

.r-two{display:grid;gap:14px;margin-bottom:18px}
@media(min-width:820px){.r-two{grid-template-columns:1fr 1fr}}
.r-ans{border:2px solid var(--r-swan);border-radius:16px;padding:16px 18px;min-width:0}
.r-ans.model{border-color:#b6e88a;background:#f6fff0}
.r-ans .cap{display:flex;align-items:center;gap:8px;font-size:10px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;color:var(--r-hare);margin-bottom:10px}
.r-ans.model .cap{color:var(--r-green-deep)}
.r-ans .cap .r-btn{margin-left:auto}
.r-ans .txt{font-size:14px;line-height:1.7;color:var(--r-eel-dark);white-space:pre-wrap;overflow-wrap:anywhere}
.r-ans .txt.miss{color:var(--r-hare);font-style:italic}
.r-ans audio{width:100%;margin-bottom:12px}

.r-kv{display:flex;gap:10px;padding:9px 0;border-bottom:2px solid var(--r-snow);font-size:14px}
.r-kv:last-child{border-bottom:0}
.r-kv b{flex:0 0 110px;color:var(--r-hare);font-size:11px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.r-kv span{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;color:var(--r-eel-dark)}

/* ---------- coach ---------- */
.r-coach{border:2px solid #ffe2b8;border-radius:16px;overflow:hidden;background:#fffaf2}
.r-coach-top{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#fff4e2}
.r-coach-top .ico{flex:0 0 34px;height:34px;border-radius:50%;background:var(--r-fox);
  color:#fff;display:flex;align-items:center;justify-content:center}
.r-coach-top b{font-size:15px;font-weight:900;color:#8a5200}
.r-coach-top small{display:block;font-size:12px;font-weight:700;color:#a97a3a}
.r-coach-body{padding:16px 18px}
.r-note{display:flex;gap:12px;padding:10px 0}
.r-note .ico{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:900}
.r-note.did .ico{background:var(--r-lime-pale);color:var(--r-green-deep)}
.r-note.fix .ico{background:var(--r-fox-pale);color:var(--r-fox)}
.r-note .body b{display:block;font-size:11px;font-weight:900;letter-spacing:.09em;
  text-transform:uppercase;color:var(--r-hare);margin-bottom:3px}
.r-note .body p{margin:0;font-size:14px;line-height:1.65;color:var(--r-eel-dark)}

/* ---------- rubric levels ---------- */
.r-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:6px}
.r-level b{display:block;font-size:11px;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:var(--r-hare);margin-bottom:5px}
.r-level .dots{display:flex;gap:3px}
.r-level .dots i{flex:1 1 auto;height:7px;border-radius:4px;background:var(--r-swan)}
.r-level .dots i.on{background:var(--r-green)}
.r-level small{display:block;font-size:12px;line-height:1.5;color:var(--r-wolf);margin-top:6px}

/* ---------- prev / next ---------- */
.r-nav{position:sticky;bottom:0;display:flex;align-items:center;gap:14px;
  background:var(--r-white);border:2px solid var(--r-swan);border-radius:18px;
  padding:12px 16px;margin-top:22px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.r-nav .mid{flex:1 1 auto;text-align:center;font-size:14px;font-weight:900;color:var(--r-eel-dark)}
.r-nav .mid small{display:block;font-size:11px;font-weight:800;color:var(--r-hare);
  letter-spacing:.06em;text-transform:uppercase}

/* ---------- chart ---------- */
.r-chart{width:100%;height:auto;display:block;overflow:visible}
.r-chart .grid{stroke:var(--r-swan);stroke-width:1.5}
.r-chart .target{stroke:var(--r-hare);stroke-width:2.5;stroke-dasharray:8 7}
.r-chart .line{fill:none;stroke:var(--r-green);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.r-chart .dot{fill:#fff;stroke:var(--r-green);stroke-width:3.5;cursor:pointer}
.r-chart .dot:hover{fill:var(--r-lime-pale)}
.r-chart text{font-family:var(--r-font);font-weight:800;fill:var(--r-hare);font-size:11px}
.r-chart text.tlab{fill:var(--r-wolf);font-size:12px;font-weight:900}

/* ---------- test history rows ---------- */
.r-att{display:flex;align-items:center;gap:16px;padding:15px 0;border-top:2px solid var(--r-snow)}
.r-att:first-child{border-top:0}
.r-att .score{flex:0 0 52px;height:52px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:19px;font-weight:900;background:var(--r-lime-pale);
  color:var(--r-green-deep)}
.r-att .score.mid{background:var(--r-bee-pale);color:#8a6d00}
.r-att .score.low{background:var(--r-red-pale);color:#c22}
.r-att .body{flex:1 1 auto;min-width:0}
.r-att .body b{display:block;font-size:15px;font-weight:900;color:var(--r-eel-dark)}
.r-att .body small{font-size:12px;font-weight:700;color:var(--r-hare)}
.r-att .skills{display:flex;gap:12px;flex:0 0 auto}
.r-att .skills div{text-align:center;min-width:44px}
.r-att .skills b{display:block;font-size:15px;font-weight:900;color:var(--r-eel-dark)}
.r-att .skills span{font-size:9px;font-weight:900;letter-spacing:.07em;
  text-transform:uppercase;color:var(--r-hare)}
@media(max-width:760px){.r-att .skills{display:none}}

/* ---------- empty states ---------- */
.r-empty{text-align:center;padding:50px 24px}
.r-empty svg{margin-bottom:16px}
.r-empty b{display:block;font-size:18px;font-weight:900;color:var(--r-eel-dark);margin-bottom:6px}
.r-empty p{max-width:420px;margin:0 auto 18px;font-size:14px;line-height:1.6;color:var(--r-wolf)}

/* ---------- dashboard shell ---------- */
body.r-app{margin:0;background:var(--r-snow);color:var(--r-eel);font-family:var(--r-font);
  font-weight:600;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* :where() so this contributes zero specificity. As a plain `body.r-app a` it
   outranked `.r-btn` and painted every button label link-blue on green. */
:where(body.r-app) a{color:var(--r-blue);text-decoration:none}
:where(body.r-app) a:hover{text-decoration:underline}
body.r-app *,body.r-app *::before,body.r-app *::after{box-sizing:border-box}

.r-shell{display:flex;min-height:100vh}
.r-side{flex:0 0 246px;background:var(--r-white);border-right:2px solid var(--r-swan);
  padding:22px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.r-brand{display:flex;align-items:center;gap:10px;padding:0 10px 22px;text-decoration:none}
/* The blanket `a:hover{text-decoration:underline}` above outranks .r-brand's
   own text-decoration, so the logo picked up an underline on hover. A wordmark
   is not a link you underline. */
.r-brand:hover,.r-brand:hover b,.r-brand:hover small{text-decoration:none}
.r-brand b{font-size:18px;font-weight:900;color:var(--r-eel-dark);line-height:1.1}
.r-brand small{display:block;font-size:9px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--r-hare)}
.r-nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  font-size:14px;font-weight:800;color:var(--r-wolf);cursor:pointer;text-decoration:none;
  border:2px solid transparent;margin-bottom:4px}
.r-nav-item:hover{background:var(--r-snow);text-decoration:none;color:var(--r-eel-dark)}
.r-nav-item.on{background:var(--r-lime-pale);border-color:#b6e88a;color:var(--r-green-deep)}
.r-nav-item svg{flex:0 0 20px}
.r-side-foot{margin-top:auto;padding-top:18px;border-top:2px solid var(--r-snow)}

.r-main{flex:1 1 auto;min-width:0}
.r-top{background:var(--r-white);border-bottom:2px solid var(--r-swan);position:sticky;top:0;z-index:5}
.r-top .in{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:16px}
.r-top h1{font-size:22px;font-weight:900;color:var(--r-eel-dark);margin:0;letter-spacing:-.01em}
.r-top .sp{margin-left:auto}
/* .r-brand carries a 22px bottom padding for the vertical sidebar; in the
   horizontal top bar that pushes the wordmark up and unbalances the row.
   Zero it out here so the logo sits centred against the button. */
.r-top .r-brand{padding-top:0;padding-bottom:0}

.r-burger{display:none;border:2px solid var(--r-swan);background:#fff;border-radius:12px;
  padding:9px 11px;cursor:pointer}
@media(max-width:860px){
  .r-shell{display:block}
  .r-side{position:fixed;left:0;top:0;z-index:20;transform:translateX(-100%);
    transition:transform .22s;box-shadow:0 0 40px rgba(0,0,0,.18)}
  .r-side.open{transform:none}
  .r-burger{display:inline-flex}
  .r-scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:15}
}

.r-view{display:none}
.r-view.on{display:block}

/* ---------- tabs ----------
   Used by the Progress view, where Overall and the four skills answer the
   same question and belong behind one switch rather than stacked down a page
   long enough that comparing the first chart to the last means remembering it. */
.r-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;
  border-bottom:2px solid var(--r-swan);padding-bottom:12px}
.r-tab{border:2px solid transparent;border-radius:11px;background:none;padding:8px 14px;
  font:inherit;font-size:13px;font-weight:900;color:var(--r-wolf);cursor:pointer}
.r-tab:hover{background:var(--r-snow);color:var(--r-eel-dark)}
.r-tab.on{background:#d7ffb8;color:var(--r-green-deep);border-color:var(--r-green)}
.r-tabpane[hidden]{display:none}

/* ---------- recommendation banner ----------
   The one thing worth doing next. Replaces six identical "Take a test"
   buttons, which between them recommended nothing. */
.r-rec{display:flex;align-items:center;gap:18px;background:#fff;border:2px solid var(--r-swan);
  border-bottom-width:4px;border-radius:18px;padding:20px 22px;margin-bottom:20px}
.r-rec-ico{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:#d7ffb8;color:var(--r-green-deep)}
.r-rec-body{flex:1;min-width:0}
.r-rec-body h3{margin:2px 0 5px;font-size:18px;font-weight:900;color:var(--r-eel-dark)}
.r-rec-body p{margin:0;font-size:14px;line-height:1.55;color:var(--r-wolf)}
.r-rec .r-btn{flex:none}
.r-rec-drill .r-rec-ico{background:#ffe8cc;color:#c26a00}
.r-rec-confirm .r-rec-ico{background:#ddf4ff;color:#1899d6}
.r-rec-review .r-rec-ico{background:#f0e6ff;color:#8b46d6}
@media(max-width:760px){
  .r-rec{flex-direction:column;align-items:flex-start;gap:14px}
  .r-rec .r-btn{width:100%}
}

/* ---------- dashboard sign-in gate ---------- */
.dash-gate{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:20px;
  background:rgba(24,32,20,.5);backdrop-filter:blur(4px)}
.dash-gated{overflow:hidden}
.dash-gate-card{width:min(440px,100%);background:#fff;border-radius:22px;padding:32px 30px 24px;
  text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.28)}
.dash-gate-ico{width:64px;height:64px;margin:0 auto 16px;border-radius:18px;display:grid;
  place-items:center;background:var(--r-limepale,#d7ffb8);color:var(--r-green-deep)}
.dash-gate-card h2{margin:0 0 8px;font-size:22px;font-weight:900;color:var(--r-eel-dark)}
.dash-gate-card p{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--r-wolf)}
.dash-gate-card .r-btn{width:100%;margin-bottom:10px}
.dash-gate-skip{margin-top:6px;background:none;border:0;font:inherit;font-size:13px;
  font-weight:700;color:var(--r-hare);cursor:pointer}
.dash-gate-skip:hover{color:var(--r-wolf);text-decoration:underline}