/* scout.css — Baby Rhino skin.
   Brand system carried over from LP 2152146969 / the 9-email campaign so Gap
   Scout looks like it came in the same box as the course. Mobile-first: students
   will open this on a phone mid-session, so single column is the base case and
   the desktop grid is the enhancement. */

:root{
  --bg:#06080A; --panel:#15191D; --panel2:#1B2126;
  --line:#242A30; --line2:#333B42;
  --lime:#C8E94A; --ink:#1A2A04;
  --tx:#ECEFF1; --tx2:#A7AFB6; --tx3:#6E767D;
  --red:#FF6A4D; --amber:#F5B942; --green:#7BD389;
  --disp:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --r:14px;
}

*{box-sizing:border-box}
/* .fld sets display:flex, which silently beats the UA's [hidden] rule — so the
   exit-date field rendered on every horizon until this was added. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font-family:var(--body); font-size:15px; line-height:1.55;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
/* Wider than the report's own 1080px, by request — the tool is a page in its
   own right rather than one section of a long report, so it can take the room.
   Past ~1400px the four-field row starts stranding air between the inputs. */
.wrap{max-width:1320px;margin:0 auto;padding:0 18px}


/* ── consent gate ────────────────────────────────────────────────────────────
   Structure and sizing from the Trade Club reports gate; palette is Baby Rhino
   so it reads as the same product as the tool behind it. Ships visible (see the
   comment in index.html) — no display:none, nothing to reveal. */
.gate{
  position:fixed; inset:0; z-index:100000; display:flex;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(3,5,7,.86);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.gate-card{
  max-width:540px; width:100%;
  background:#0C1014; border:1px solid rgba(200,233,74,.30);
  border-top:4px solid var(--lime); border-radius:14px;
  padding:26px 26px 22px;
  box-shadow:0 0 60px -14px rgba(200,233,74,.28), 0 24px 70px rgba(0,0,0,.7);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.gate-eyebrow{
  color:var(--lime); font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; font-size:11px; margin-bottom:8px;
}
.gate-card h2{color:#ECEFF1; font-size:21px; margin:0 0 12px; line-height:1.3}
.gate-card p{color:#A7AFB6; font-size:13.5px; line-height:1.65; margin:0 0 12px}
.gate-card p b{color:#ECEFF1}
.gate-card a{color:var(--lime); text-decoration:underline}
.gate-btn{
  display:block; width:100%; margin-top:6px; padding:13px 20px;
  border-radius:999px; border:none; background:var(--lime); color:var(--ink);
  cursor:pointer; font:800 15px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  transition:transform .12s, box-shadow .12s;
  min-height:46px;   /* the report's padding alone lands at 41px — under the 44px tap minimum */
}
.gate-btn:hover{transform:translateY(-1px); box-shadow:0 8px 26px rgba(200,233,74,.45)}
.gate-btn:focus-visible{outline:3px solid #fff; outline-offset:3px}
.gate-note{color:#6E767D; font-size:11px; text-align:center; margin-top:10px}
@media print{.gate{display:none!important}}
@media (max-width:520px){.gate-card{padding:22px 18px 18px}.gate-card h2{font-size:19px}}

/* ── header ─────────────────────────────────────────────────────────────── */
.top{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#101418,var(--bg))}
.topbar{display:flex;align-items:center;gap:16px;padding:14px 16px}
/* The full lock-up IS the header — wordmark and tagline included. Sized to
   register as the product's logo without taking over the page: this is a tool
   people open mid-session for a number, so the controls should be near the top.
   Phones get a smaller one; the desktop size is in the media query below. */
.brandlock{flex:0 0 auto;width:112px;height:auto}
/* Reachable by screen readers, invisible on screen. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.asof{
  /* margin-left:auto does the pushing now — the .topttl block that used to
     flex:1 and shove this to the right edge is gone with the lock-up. */
  flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--tx2); text-align:right;
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:6px 12px;
}
.asof .dot{width:8px;height:8px;border-radius:50%;background:var(--tx3);flex:0 0 auto}
.asof.live .dot{background:var(--green);box-shadow:0 0 0 3px rgba(123,211,137,.15)}
.asof.old  .dot{background:var(--amber);box-shadow:0 0 0 3px rgba(245,185,66,.15)}
.asof.dead .dot{background:var(--red);box-shadow:0 0 0 3px rgba(255,106,77,.15)}


/* ── the calculator ──────────────────────────────────────────────────────
   LAYOUT is the Trade Club report's, value for value (.becalc et al). COLOUR
   is Baby Rhino: lime on near-black, so the tool reads as part of the course
   rather than as a page borrowed from another product.

   Why lime is the frame and not the field: a flooded lime panel would fight
   the numbers. The four odds cards signal with colour — green means safe, red
   means a tag is likely — and on a bright field those stop meaning anything,
   plus a saturated yellow-green at that size is tiring to read a decimal on.
   So lime does the POPPING (edge rail, glow, corner wash, active pill, the
   hero figure) and black does the READING. */
.panel.calc{   /* .panel is declared later and would win a specificity tie */
  --c-panel:#0C1014; --c-panel2:#151A20; --c-line:#242C34;
  --c-ink:#ECEFF1; --c-muted:#A7AFB6; --c-faint:#6E767D;
  --gs-accent:#C8E94A; --gs-ink:#1A2A04;
  position:relative; overflow:hidden;
  /* a lime wash bleeding out of the top-left corner, not a lime background */
  background:
    radial-gradient(125% 95% at 0% 0%, rgba(200,233,74,.17), transparent 60%),
    var(--c-panel);
  border:1px solid rgba(200,233,74,.42);
  box-shadow:
    0 0 0 1px rgba(200,233,74,.12),
    0 0 64px -12px rgba(200,233,74,.34),
    0 32px 84px -34px rgba(200,233,74,.50),
    0 10px 34px -12px rgba(0,0,0,.9);
  color:var(--c-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.5; padding:20px 18px 16px;
}
/* The band across the top: this is what makes it read as a highlighted card
   the moment the page loads, without spending lime on the field. */
.panel.calc::before{
  content:''; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,var(--gs-accent) 0%,var(--gs-accent) 38%,
    rgba(200,233,74,.35) 75%,rgba(200,233,74,.14) 100%);
}
/* The rail, so the top-left corner reads as a bracket rather than a stripe. */
.panel.calc::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--gs-accent),rgba(200,233,74,.10) 70%,transparent);
}
.calc .sec{color:var(--c-faint)}

.calc .crow{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin-bottom:12px}
.calc .cfld{
  display:flex;flex-direction:column;gap:5px;min-width:0;
  font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--c-faint);font-weight:700;
}
.calc .cfld input{
  background:var(--c-panel2);color:var(--c-ink);border:1px solid var(--c-line);border-radius:8px;
  padding:9px 11px;font-size:15px;font-variant-numeric:tabular-nums;min-width:150px;
  font-family:inherit;font-weight:400;text-transform:none;letter-spacing:0;
}
.calc .cfld input:focus{outline:none;border-color:var(--gs-accent)}
.calc .cfld input::placeholder{color:var(--c-faint)}
.calc #hrsWrap input{min-width:96px}
.calc .cmeta{font-size:12px;color:var(--c-muted);margin-left:auto;align-self:center;
  text-transform:none;letter-spacing:0;font-weight:400}

.calc .cseg{display:inline-flex;border:1px solid var(--c-line);border-radius:8px;overflow:hidden}
.calc .ch{
  background:var(--c-panel2);color:var(--c-muted);border:none;padding:9px 14px;
  font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;
  text-transform:none;letter-spacing:0;
}
.calc .ch.on{background:var(--gs-accent);color:var(--gs-ink);box-shadow:0 0 22px -2px rgba(200,233,74,.75)}
.calc .ch:focus-visible{outline:2px solid var(--gs-accent);outline-offset:-2px}

.calc .cbase{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:2px 0 12px;
  padding:9px 12px;background:var(--c-panel2);border:1px solid var(--c-line);border-radius:9px;
}
 /* Before JS fills it, the strip is an empty bordered bar — visible on every
    load. Nothing to say, nothing to draw. */
.calc .cbase:empty{display:none}
.calc .bgrp{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.calc .bgrp em{font-style:normal;font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--c-faint);font-weight:800;margin-right:2px}
.calc .bgrp b{font-size:13px;font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums}
.calc .bgrp b.bnull{color:var(--c-faint);font-weight:600}
.calc .bgrp i{font-style:normal;font-size:11.5px;font-weight:800;padding:1px 5px;border-radius:4px}
.calc .bup{background:rgba(34,197,94,.14);color:#4ade80}
.calc .bdn{background:rgba(239,68,68,.14);color:#f87171}
.calc .bflat{background:rgba(200,233,74,.10);color:var(--gs-accent)}
.calc .barrow{color:var(--c-faint);font-size:15px;padding:0 2px}
@media(max-width:760px){.calc .barrow{display:none}.calc .cbase{gap:8px}}

/* result cards — .beout / .becard / .bev / .bel */
.calc .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:6px 0 12px}
@media(max-width:620px){.calc .cards{grid-template-columns:repeat(2,1fr)}}
.calc .card{background:var(--c-panel2);border:1px solid var(--c-line);border-radius:10px;
  padding:12px 10px;text-align:center}
.calc .cv{font-family:inherit;font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.calc .cl{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--c-faint);margin-top:6px}
/* "Never touches either" is the number students actually come for, so it gets
   the brand colour and the only glow among the four. */
.calc .c-in{border-color:rgba(200,233,74,.75);background:rgba(200,233,74,.08);
  box-shadow:0 0 34px -10px rgba(200,233,74,.65)}
.calc .c-in .cv{color:var(--gs-accent)}
.calc .c-dn .cv,.calc .c-up .cv{color:#fca5a5}
.calc .c-any{border-color:#7f2a2a} .calc .c-any .cv{color:#f87171}

/* sigma chips — .zchip */
.calc .chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:2px 0 12px}
.calc .chip{font-size:12.5px;font-variant-numeric:tabular-nums;padding:5px 10px;border-radius:999px;
  border:1px solid var(--c-line);background:var(--c-panel2);color:var(--c-ink)}
.calc .chip i{color:var(--c-faint);font-style:normal}
.calc .chip.hot{border-color:#ef4444;color:#fca5a5}
.calc .chip.mid{border-color:#f59e0b;color:#fcd34d}
.calc .chiplab{font-size:11px;color:var(--c-faint)}

/* closing line + staleness ladder — .beterm / .bewarn */
.calc .term{font-size:12px;color:var(--c-muted);line-height:1.6;margin:10px 0 0}
.calc .term b{color:var(--c-ink)}
.calc .warn{font-size:11px;color:var(--c-faint);line-height:1.55;margin-top:8px;
  border-left:3px solid var(--c-line);padding-left:10px}
.calc .warn b{color:var(--c-ink)}
.calc .warn.lvl1{color:#fcd34d;border-left-color:#f59e0b;background:rgba(245,158,11,.06)}
.calc .warn.lvl1 b{color:#fde68a}
.calc .warn.lvl2{color:#fca5a5;border-left-color:#ef4444;background:rgba(239,68,68,.09)}
.calc .warn.lvl2 b{color:#fecaca}

/* The verdict has no counterpart in the report, so it is written in the same
   idiom rather than invented: the report's tokens, its type sizes, no lime. */
.calc .verdict{border:1px solid var(--c-line);background:var(--c-panel2);border-radius:10px;
  padding:11px 13px;margin-bottom:10px}
.calc .vttl{font-family:inherit;font-size:15px;font-weight:800;letter-spacing:0}
.calc .vbody{margin:6px 0 0;font-size:12.5px;color:var(--c-muted);line-height:1.6}
.calc .vbody b{color:var(--c-ink)}
.calc .v-inside{border-color:rgba(200,233,74,.5);background:rgba(200,233,74,.05)}
.calc .v-inside .vttl{color:var(--gs-accent)} .calc .v-inside .vlamp{background:var(--gs-accent)}
.calc .v-watch{border-color:#8a6516}  .calc .v-watch .vttl{color:#fcd34d}  .calc .v-watch .vlamp{background:#fcd34d}
.calc .v-defense{border-color:#7f2a2a}.calc .v-defense .vttl{color:#f87171} .calc .v-defense .vlamp{background:#f87171}
.calc .more summary{color:var(--gs-accent);font-size:13px}
.calc .more summary .sub{color:var(--c-faint)}
.calc .fine{font-size:12px;color:var(--c-muted)}
.calc .ixnote{color:var(--c-muted)}
.cdiv{border:0;border-top:1px solid var(--c-line,var(--line));margin:14px 0 12px}

 /* ── how it works: the report's .bewhat, same tokens and type scale ────── */
.panel.how{
  /* Same near-black family as the calculator — it had been left on the report's
     navy, which read as a different product sitting under the tool. Kept flat:
     no rail, no glow. This is the footnote, not the headline. */
  --c-panel2:#0F141A; --c-line:#242C34; --c-ink:#ECEFF1; --c-muted:#A7AFB6; --c-faint:#6E767D;
  background:var(--c-panel2); border:1px solid var(--c-line); border-radius:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:12px 14px; font-size:12.8px; line-height:1.55; color:var(--c-muted);
}
.how .sec{
  font-family:inherit; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:800; color:var(--c-faint); margin:0 0 6px;
}
.how p{margin:0 0 8px}
.how p:last-child{margin-bottom:0}
.how b{color:var(--c-ink)}
.how .warn-inline{border-left:3px solid #f59e0b;padding-left:10px;margin-top:10px;color:#fcd34d}
.how .warn-inline b{color:#fde68a}
.how .quiet{font-size:11.5px;color:var(--c-faint);margin-top:10px}

/* ── panels ─────────────────────────────────────────────────────────────── */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; margin:12px 0;
}
.sec{
  font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tx3); margin:0 0 11px;
}

/* ── segmented controls ─────────────────────────────────────────────────── */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.segb{
  font-family:var(--body); font-weight:600; font-size:13.5px;
  padding:11px 6px; min-height:44px;
  background:var(--panel2); color:var(--tx2);
  border:1px solid var(--line2); border-radius:10px; cursor:pointer;
  transition:background .12s,color .12s,border-color .12s;
}
.segb:hover{color:var(--tx);border-color:#48525b}
.segb.on{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.segb:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.seg4 .segb{font-size:12.5px}
.ixnote{
  margin:-6px 0 14px;padding:9px 12px;font-size:12.5px;color:var(--tx2);
  background:rgba(245,185,66,.07);border:1px solid rgba(245,185,66,.28);border-radius:9px;
}

/* ── fields ─────────────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:1fr;gap:12px}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.lbl{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3)}
.fld input{
  font-family:var(--body); font-size:17px; font-weight:600; color:var(--tx);
  background:var(--panel2); border:1px solid var(--line2); border-radius:10px;
  padding:11px 12px; min-height:46px; width:100%;
}
.fld input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(200,233,74,.13)}
.fld input::placeholder{color:#5b636b;font-weight:400}
.hint{font-size:11.5px;color:var(--tx3);min-height:14px}
.hrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.fld.inline{flex:1 1 190px;max-width:260px}
.meta{flex:1 1 100%;font-size:12.5px;color:var(--tx2);padding-bottom:2px}

.more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.more summary{
  cursor:pointer;font-size:13.5px;font-weight:600;color:var(--lime);
  list-style:none;padding:4px 0;min-height:32px;
}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:'+ ';font-weight:700}
.more[open] summary::before{content:'\2212 '}
.more summary .sub{color:var(--tx3);font-weight:400}
.more .grid{margin-top:12px}
.fine{font-size:12.5px;color:var(--tx2);margin:12px 0 0}

/* ── verdict ────────────────────────────────────────────────────────────── */
.verdict{border-radius:12px;border:1px solid var(--line2);background:var(--panel2);padding:11px 13px;margin-bottom:10px}
.vhead{display:flex;align-items:center;gap:10px}
.vlamp{width:12px;height:12px;border-radius:50%;background:var(--tx3);flex:0 0 auto}
.vttl{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.02em}
.vbody{margin:6px 0 0;font-size:13.5px;color:var(--tx2)}
.vbody b{color:var(--tx)}
.v-inside {border-color:rgba(123,211,137,.45);background:rgba(123,211,137,.07)}
.v-inside  .vlamp{background:var(--green)} .v-inside  .vttl{color:var(--green)}
.v-watch  {border-color:rgba(245,185,66,.45);background:rgba(245,185,66,.07)}
.v-watch   .vlamp{background:var(--amber)}  .v-watch  .vttl{color:var(--amber)}
.v-defense{border-color:rgba(255,106,77,.5);background:rgba(255,106,77,.08)}
.v-defense .vlamp{background:var(--red)}    .v-defense .vttl{color:var(--red)}

/* ── result cards ───────────────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.card{background:var(--panel2);border:1px solid var(--line2);border-radius:11px;padding:11px 10px;text-align:center}
.cv{font-family:var(--disp);font-weight:700;font-size:24px;line-height:1.1;letter-spacing:.01em}
.cl{font-size:11.5px;color:var(--tx3);margin-top:4px;letter-spacing:.02em}
.c-in  .cv{color:var(--green)}
.c-dn  .cv{color:var(--red)}
.c-up  .cv{color:var(--amber)}
.c-any .cv{color:var(--tx)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;align-items:center}
.chip{
  font-size:12.5px;padding:6px 10px;border-radius:8px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--tx2);
}
.chip b{color:var(--tx);font-weight:600}
.chip i{font-style:normal;color:var(--tx3)}
.chip.hot{border-color:rgba(255,106,77,.5);background:rgba(255,106,77,.08)}
.chip.mid{border-color:rgba(245,185,66,.4);background:rgba(245,185,66,.06)}
.chiplab{font-size:12px;color:var(--tx3)}

/* overflow-x, not hidden: at 375px the 4-column table is ~17px wider than its
   box, and `hidden` silently amputated the last column. */
.dual{margin-top:12px;border:1px solid var(--line2);border-radius:11px;overflow-x:auto}
.dual table{width:100%;min-width:320px;border-collapse:collapse;font-size:13px}
.dual th,.dual td{padding:9px 11px;text-align:right;border-bottom:1px solid var(--line)}
.dual th{background:var(--panel2);color:var(--tx3);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.dual th:first-child,.dual td:first-child{text-align:left}
.dual tr:last-child td{border-bottom:none}
.dual td b{font-family:var(--disp);font-size:15px}
.dual .lead{color:var(--tx2)}

.term{font-size:13px;color:var(--tx2);margin:12px 0 0}
.term b{color:var(--tx)}

.warn{
  margin-top:12px;font-size:12.5px;color:var(--tx3);
  border-left:2px solid var(--line2);padding:2px 0 2px 11px;
}
.warn b{color:var(--tx2)}
.warn.lvl1{border-left-color:var(--amber);color:var(--tx2)}
.warn.lvl1 b{color:var(--amber)}
.warn.lvl2{border-left-color:var(--red);color:var(--tx2)}
.warn.lvl2 b{color:var(--red)}

/* ── plays ──────────────────────────────────────────────────────────────── */
.plays{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;counter-reset:p}
.play{
  background:var(--panel2);border:1px solid var(--line2);border-radius:11px;
  padding:12px 13px;opacity:.5;transition:opacity .15s,border-color .15s,background .15s;
}
.play b{display:block;font-family:var(--disp);font-weight:600;font-size:14.5px;color:var(--tx2)}
.play span{display:block;font-size:12.5px;color:var(--tx3);margin-top:3px}
.play.lit{opacity:1;border-color:var(--lime);background:rgba(200,233,74,.07)}
.play.lit b{color:var(--lime)}
.play.lit span{color:var(--tx2)}
.play .why{display:block;font-size:12px;color:var(--lime);margin-top:6px;font-weight:600}

/* ── how it works / footer ──────────────────────────────────────────────── */
.how p{font-size:13.5px;color:var(--tx2);margin:0 0 12px}
.how p:last-child{margin-bottom:0}
.how b{color:var(--tx)}
.warn-inline{
  border-left:2px solid var(--amber);padding-left:11px;
}
.warn-inline b{color:var(--amber)}
.quiet{color:var(--tx3);font-size:12.5px}
.foot{border-top:1px solid var(--line);margin-top:24px;padding:18px 0 40px}
.foot p{font-size:11.5px;line-height:1.6;color:var(--tx3);margin:0 0 10px}
.foot b{color:var(--tx2)}
.foot a{color:var(--tx2)}

/* ── desktop ────────────────────────────────────────────────────────────── */
@media (min-width:680px){
  .grid{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(4,1fr)}
  .plays{grid-template-columns:1fr 1fr}
  .brandlock{width:160px}
    .cv{font-size:29px}
  .panel{padding:17px 20px}
}
@media (max-width:479px){
  .topbar{flex-wrap:wrap}
  .asof{flex:1 1 100%;justify-content:flex-start;text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}