:root{
  --navy:#0d243f; --gold:#d4a017; --cream:#f8f6ef; --card:#fff;
  --text:#0d243f; --muted:#667085; --line:#d9d6cc; --soft:#f3f0e8;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--cream);color:var(--text);}
header{padding:34px 28px 38px;background:var(--navy);color:#fff;border-bottom:7px solid var(--gold);}
h1{margin:0;font-size:clamp(2rem,4vw,3rem);line-height:1.05;font-weight:850;letter-spacing:-.03em;}
.sub{color:#f2efe7;margin-top:12px;font-size:1.1rem;line-height:1.35;max-width:900px;}
main{max-width:1050px;margin:0 auto;padding:28px 18px;}
.card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:22px;margin-bottom:18px;box-shadow:0 10px 28px rgba(13,36,63,.08);}
h2{font-size:1.35rem;margin:0 0 12px;padding-bottom:10px;border-bottom:4px solid var(--gold);color:var(--navy);font-weight:850;}
h3{font-size:1rem;margin:18px 0 8px;color:var(--navy);}
ol,ul{margin-top:8px;padding-left:24px;line-height:1.55;}
li{margin:5px 0;}
.note{padding:14px;border:2px solid #d8d2c5;border-radius:16px;background:#fbfaf7;line-height:1.45;}
.badge{display:inline-block;background:var(--soft);border:1px solid #d8d2c5;border-radius:999px;padding:4px 9px;margin:3px;font-size:.84rem;}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.small{font-size:.9rem;color:var(--muted);line-height:1.4;}
.result-note{border-left:5px solid var(--gold);padding:12px 14px;background:#fbfaf7;border-radius:14px;margin-top:12px;line-height:1.45;}
footer{text-align:center;color:var(--muted);font-size:.86rem;padding:20px 8px 8px;line-height:1.35;}

/* Footer links match the homepage footer treatment */
.footer-reference-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 12px;
  margin:0 auto 12px;
  max-width:900px;
}
.footer-reference-links a{
  color:inherit;
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-reference-links a:hover{
  color:var(--navy);
}

@media print{header{background:#fff;color:var(--navy)}.card{box-shadow:none;break-inside:avoid}}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  padding:10px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  border:1px solid rgba(255,255,255,.18);
  transition:.2s ease;
}
.back-link:hover{background:rgba(255,255,255,.2);}

@media (max-width:560px){
  .advanced-full-row{
    grid-column:auto;
  }
}


/* Hidden Advanced Utilities */
.advanced-utils-trigger{
  text-align:center;
  margin-top:24px;
}
.advanced-utils-trigger a{
  color:#667085;
  font-size:.85rem;
  text-decoration:none;
  opacity:.75;
}
.advanced-utils-trigger a:hover{
  opacity:1;
  text-decoration:underline;
}
.advanced-utils-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.62);
}
.advanced-utils-modal.is-open{
  display:flex;
}
.advanced-utils-panel{
  width:min(94vw,820px);
  max-height:86vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--card);
  color:var(--text);
  border:2px solid var(--line);
  border-radius:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.34);
  padding:22px;
}
.advanced-utils-head{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:4px solid var(--gold);
}
.advanced-utils-head h2{
  border:0;
  padding:0;
  margin:0;
}
.advanced-utils-head p{
  margin:8px 0 0;
  color:var(--muted);
  line-height:1.35;
}
.advanced-utils-close{
  flex:0 0 42px;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  max-width:42px;
  max-height:42px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--soft);
  color:var(--text);
  box-shadow:none;
  font-size:1.25rem;
  line-height:1;
  font-weight:850;
  cursor:pointer;
}
.advanced-tabs{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:16px 0;
}
.advanced-tab{
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 12px;
  background:var(--soft);
  color:var(--text);
  cursor:pointer;
  font-weight:800;
}
.advanced-tab.is-active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.advanced-pane{
  display:none;
}
.advanced-pane.is-active{
  display:block;
  flex:1 1 auto;
  overflow-y:auto;
  min-height:0;
  padding-right:4px;
  scrollbar-gutter:stable;
}
.advanced-mode-block{
  margin-top:12px;
}
.advanced-mode-block.is-hidden{
  display:none;
}
.advanced-full-row{
  grid-column:1 / -1;
}
.advanced-utils-panel textarea{
  width:100%;
  min-height:145px;
  display:block;
}
.advanced-result-title{
  font-weight:900;
  font-size:1.05rem;
  margin-bottom:8px;
}
.advanced-result-big{
  font-size:1.45rem;
  font-weight:900;
  color:var(--navy);
  margin:4px 0 10px;
}
.advanced-result-line{
  margin:4px 0;
}
.advanced-result-status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:var(--soft);
  border:1px solid var(--line);
  font-weight:800;
}
.advanced-utils-note{
  margin-top:16px;
  padding:12px 14px;
  border-radius:16px;
  background:var(--soft);
  border:1px solid var(--line);
  color:var(--muted);
  line-height:1.35;
  font-size:.9rem;
}
@media (max-width:560px){
  .advanced-utils-panel{
    width:min(92vw,680px);
    padding:18px;
  }
  .advanced-tab{
    font-size:.9rem;
    padding:8px 10px;
  }
  .advanced-pane .grid{
    grid-template-columns:1fr !important;
  }
  .advanced-full-row{
    grid-column:auto;
  }
}


.advanced-result-hidden{
  display:none !important;
}


/* iOS Safari consistency fix for Advanced Utilities modal */
@media (max-width:560px){
  .advanced-utils-modal{
    align-items:flex-start;
    justify-content:center;
    overflow:hidden;
    padding:calc(env(safe-area-inset-top, 0px) + 10px) 10px 10px;
  }

  .advanced-utils-panel{
    width:min(92vw,680px);
    max-height:90dvh;
    border-radius:22px;
    margin:0 auto;
    padding:18px;
    padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);
  }
}


/* iOS Safari inline input focus keyboard fix */
input,
select,
textarea{
  scroll-margin-top:calc(env(safe-area-inset-top, 0px) + 24px);
  scroll-margin-bottom:340px;
}

@supports (height: 100dvh){
  input,
  select,
  textarea{
    scroll-margin-bottom:50dvh;
  }
}


.guide-nav-card{
  position:sticky;
  top:0;
  z-index:10;
  transition:padding .18s ease, border-radius .18s ease, box-shadow .18s ease, transform .18s ease;
}
.guide-nav-card h2,
.guide-nav-card .guide-search-status{
  transition:opacity .16s ease, max-height .18s ease, margin .18s ease;
}
.guide-search-row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
.guide-search-row input{
  width:100%;
  border:2px solid var(--line);
  border-radius:16px;
  padding:12px 14px;
  font:inherit;
  color:var(--text);
  background:#fff;
}
.guide-search-row button{
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  font-weight:850;
  color:var(--navy);
  background:var(--soft);
  cursor:pointer;
  white-space:nowrap;
}
.guide-search-status{
  display:none;
  margin-top:12px;
  color:var(--muted);
  font-size:.9rem;
  font-weight:750;
}
.guide-search-status.is-visible{
  display:block;
}
.guide-nav-card.is-collapsed{
  padding:10px;
  border-radius:0 0 18px 18px;
  box-shadow:0 12px 24px rgba(13,36,63,.12);
}
.guide-nav-card.is-collapsed h2,
.guide-nav-card.is-collapsed .guide-search-status{
  opacity:0;
  max-height:0;
  overflow:hidden;
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
}
.guide-nav-card.is-collapsed .guide-search-row{
  margin-bottom:0;
}
.guide-nav-card.is-collapsed .guide-search-row input{
  padding:10px 12px;
  border-radius:999px;
}
.guide-nav-card.is-collapsed .guide-clear-btn{
  padding:10px 12px;
  border-radius:999px;
}
.guide-section-hidden{
  display:none !important;
}

.guide-search-mark{
  background:rgba(212,160,23,.32);
  border-radius:4px;
  padding:0 2px;
}
.guide-search-mark:focus,
.guide-search-mark.is-active{
  outline:3px solid var(--gold);
  outline-offset:2px;
  background:rgba(212,160,23,.52);
}


@media (max-width:560px){
  .guide-nav-card{
    top:0;
  }
  .guide-search-row{
    align-items:stretch;
    flex-direction:column;
  }
  .guide-nav-card.is-collapsed .guide-search-row{
    flex-direction:row;
    align-items:center;
  }
  .guide-search-row button{
    width:100%;
  }
  .guide-nav-card.is-collapsed .guide-search-row button{
    width:auto;
  }
}



.noscript-warning {
  margin: 1rem auto;
  max-width: 920px;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255, 193, 7, 0.45);
  border-radius: 14px;
  background: rgba(255, 193, 7, 0.12);
  color: #fff7d6;
  font-weight: 700;
  text-align: center;
}

/* Reference Center additions */

.mini-link{background:var(--navy);border-color:var(--navy);margin-top:10px;color:#fff !important;}
.mini-link:hover,.mini-link:focus-visible{
  background:#12365f;
  border-color:#12365f;
  color:#fff !important;
  text-decoration:none;
}

.guide-section{scroll-margin-top:24px;}
@media (max-width:560px){.mini-link{display:flex;background:var(--navy);}}


/* v3.1 reference information architecture */
.guide-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px;color:#f2efe7;font-size:.9rem;font-weight:800;}
.guide-breadcrumb a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.last-updated{margin:10px 0 0;color:#f2efe7;font-size:.9rem;font-weight:750;}
.related-calculators{margin-top:18px;padding:14px;border:2px solid var(--line);border-radius:16px;background:#fbfaf7;}
.related-calculators strong{display:block;margin-bottom:8px;color:var(--navy);}
.related-calculators ul{margin:0;padding-left:20px;}
.related-calculators a{font-weight:850;color:var(--navy);text-underline-offset:3px;}

.guide-section{scroll-margin-top:150px;}
html{scroll-behavior:smooth;}
@media (max-width:560px){.guide-section{scroll-margin-top:120px;}.related-calculators{padding:12px;}}

/* Advanced Utilities: live countdown + payday celebration polish */
.payday-result{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:start;
}
.payday-big{
  color:#18803a;
  font-size:clamp(1.55rem, 4vw, 2.25rem);
}
.payday-pig{
  font-size:4.25rem;
  line-height:1;
  filter:drop-shadow(0 10px 16px rgba(8,26,48,.16));
  transform:rotate(-4deg);
}
.payday-confetti{
  position:absolute;
  top:10px;
  right:18px;
  opacity:.85;
  font-size:1.25rem;
  letter-spacing:.55rem;
  pointer-events:none;
  animation:paydayFloat 2.4s ease-in-out infinite;
}
.payday-progress-card{
  grid-column:1 / -1;
  margin-top:8px;
  padding:14px;
  border:1px solid rgba(220,166,31,.32);
  border-radius:16px;
  background:rgba(255,252,246,.88);
}
.payday-progress-head{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.payday-progress-head strong{
  color:#18803a;
}
.payday-progress{
  height:18px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(8,26,48,.08);
  border:1px solid rgba(8,26,48,.08);
}
.payday-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #dca61f, #1fb55d);
  transition:width .35s ease;
}
.payday-milestones{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:8px;
  margin-top:12px;
}
.payday-milestones span{
  padding:10px 8px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  font-weight:800;
  font-size:.86rem;
}
.payday-milestones span.is-active{
  border-color:#1fb55d;
  box-shadow:0 0 0 3px rgba(31,181,93,.12);
  background:rgba(31,181,93,.08);
}
.payday-hot .payday-progress-card,
.payday-warm .payday-progress-card{
  box-shadow:0 12px 34px rgba(220,166,31,.14);
}
@keyframes paydayFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(6px) rotate(2deg); }
}
@media (max-width:720px){
  .payday-result{ grid-template-columns:1fr; }
  .payday-pig{ display:none; }
  .payday-milestones{ grid-template-columns:1fr 1fr; }
}

/* Advanced Utilities: PTO Planner, Freedom Countdown, and Meeting Meter animation polish */
.pto-result,
.meeting-result{
  animation:advResultIn .28s ease-out both;
}
.freedom-result{
  animation:none;
}
.pto-mood{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  margin-bottom:12px;
  border:1px solid rgba(31,181,93,.22);
  border-radius:14px;
  background:linear-gradient(90deg, rgba(31,181,93,.10), rgba(255,252,246,.86));
}
.pto-mood > span{
  font-size:2.5rem;
  line-height:1;
  filter:drop-shadow(0 8px 12px rgba(8,26,48,.12));
  animation:advFloat 2.8s ease-in-out infinite;
}
.pto-score-card{
  padding:14px;
  margin:12px 0;
  border:1px solid rgba(220,166,31,.28);
  border-radius:16px;
  background:rgba(255,252,246,.86);
}
.pto-score-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}
.pto-score-head span{
  font-weight:900;
  color:#18803a;
}
.pto-progress{
  height:16px;
  overflow:hidden;
  border-radius:999px;
  border:1px solid rgba(8,26,48,.08);
  background:rgba(8,26,48,.08);
}
.pto-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #dca61f, #1fb55d);
  animation:ptoFill .7s ease-out both;
}
.pto-grade{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background:rgba(31,181,93,.08);
}
.pto-grade > span{
  display:inline-flex;
  min-width:68px;
  justify-content:center;
  font-size:clamp(2rem, 5vw, 3rem);
  line-height:1;
  font-weight:900;
  color:#18803a;
  animation:gradePop .42s ease-out both;
}
.pto-low .pto-mood,
.pto-mid .pto-mood{
  border-color:rgba(220,166,31,.34);
  background:linear-gradient(90deg, rgba(220,166,31,.10), rgba(255,252,246,.86));
}
.freedom-result{
  position:relative;
  overflow:hidden;
}
.freedom-big{
  color:#18803a;
  font-size:clamp(1.8rem, 5vw, 3.1rem);
  letter-spacing:.01em;
}
.freedom-units{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:12px 0;
}
.freedom-units span{
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.70);
}
.freedom-units strong{
  color:var(--navy);
  font-size:1.15rem;
}
.freedom-final .freedom-big{
  color:#dca61f;
}
.freedom-done{
  background:linear-gradient(135deg, rgba(8,26,48,.96), rgba(11,53,92,.96));
  color:#fff;
  box-shadow:0 16px 40px rgba(8,26,48,.24);
}
.freedom-done .advanced-result-title,
.freedom-done .advanced-result-line,
.freedom-done .freedom-units strong{
  color:#fff;
}
.freedom-done::after{
  content:'✓';
  position:absolute;
  right:18px;
  top:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  font-weight:900;
}
.freedom-weekend-done::after{
  content:'🔓';
}
.freedom-confetti{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:.5rem;
  padding-top:10px;
  pointer-events:none;
  font-size:1.35rem;
  animation:freedomConfettiBurst 2.4s ease-out forwards;
}
.meeting-result{
  text-align:center;
}
.meeting-gauge{
  position:relative;
  width:min(340px, 92%);
  height:198px;
  margin:8px auto 16px;
  padding-bottom:28px;
}
.meeting-arc{
  position:absolute;
  left:0;
  right:0;
  bottom:28px;
  height:170px;
  border-radius:170px 170px 0 0;
  background:conic-gradient(from 235deg at 50% 100%, #1fb55d 0deg, #dca61f 55deg, #e4553f 110deg, transparent 110deg 360deg);
  -webkit-mask:radial-gradient(circle at 50% 100%, transparent 0 58%, #000 59% 70%, transparent 71%);
          mask:radial-gradient(circle at 50% 100%, transparent 0 58%, #000 59% 70%, transparent 71%);
}
.meeting-needle{
  position:absolute;
  left:50%;
  bottom:33px;
  width:6px;
  height:112px;
  border-radius:999px;
  background:var(--navy);
  transform-origin:50% calc(100% - 3px);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 4px 10px rgba(8,26,48,.22);
}
.meeting-needle::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-8px;
  width:22px;
  height:22px;
  border-radius:999px;
  background:var(--navy);
  transform:translateX(-50%);
}
.meeting-gauge-label{
  position:absolute;
  bottom:0;
  font-weight:900;
  font-size:.86rem;
}
.meeting-gauge-label.left{ left:6px; color:#18803a; }
.meeting-gauge-label.right{ right:6px; color:#b62320; }
.meeting-verdict{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(220,166,31,.28);
  background:rgba(255,252,246,.9);
  text-align:left;
}
.meeting-verdict > span{
  font-size:2.25rem;
  line-height:1;
  animation:gradePop .36s ease-out both;
}
.meeting-email .meeting-verdict{
  border-color:rgba(228,85,63,.32);
  background:rgba(228,85,63,.08);
}
.meeting-good .meeting-verdict{
  border-color:rgba(31,181,93,.28);
  background:rgba(31,181,93,.08);
}
@keyframes advResultIn{
  from{ opacity:0; transform:translateY(8px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes ptoFill{
  from{ width:0; }
}
@keyframes gradePop{
  0%{ transform:scale(.82); opacity:0; }
  70%{ transform:scale(1.06); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}

@keyframes freedomConfettiBurst{
  0%{ opacity:0; transform:translateY(-18px) scale(.92); }
  16%{ opacity:1; transform:translateY(0) scale(1); }
  72%{ opacity:1; transform:translateY(16px) scale(1); }
  100%{ opacity:0; transform:translateY(30px) scale(.98); }
}
@keyframes freedomPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.025); }
}
@keyframes advFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-5px) rotate(2deg); }
}
@media (max-width:720px){
  .meeting-gauge{ height:166px; padding-bottom:28px; }
  .meeting-arc{ height:138px; bottom:28px; }
  .meeting-needle{ height:90px; bottom:33px; }
  .meeting-verdict{ align-items:flex-start; }
  .freedom-units{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .pto-result,
  .freedom-result,
  .meeting-result,
  .pto-progress span,
  .pto-grade > span,
  .pto-mood > span,
  .freedom-done::after,
  .payday-confetti,
  .meeting-verdict > span{
    animation:none !important;
  }
  .meeting-needle{ transition:none !important; }
}

/* Advanced Utilities scrollbar: keep panes scrollable without a visible scrollbar. */
.advanced-pane.is-active{
  -ms-overflow-style:none;
  scrollbar-width:none;
  scrollbar-color:transparent transparent;
}

.advanced-pane.is-active::-webkit-scrollbar{
  width:0;
  height:0;
}

.advanced-pane.is-active::-webkit-scrollbar-track{
  background:transparent;
  border:0;
}

.advanced-pane.is-active::-webkit-scrollbar-thumb{
  background:transparent;
  border:0;
}

.advanced-pane.is-active::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}

/* Advanced Utilities completion card: shared success state */
.advanced-success-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:18px 22px;
  align-items:center;
  padding:22px 28px;
  border:1px solid rgba(31,128,58,.32);
  border-radius:18px;
  background:linear-gradient(135deg, rgba(31,181,93,.08), rgba(255,255,255,.96) 42%, rgba(255,252,246,.96));
  box-shadow:0 12px 28px rgba(8,26,48,.10);
  animation:advResultIn .28s ease-out both;
}
.advanced-success-mark{
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:linear-gradient(135deg, #2f9848, #1f7f3a);
  color:#fff;
  font-size:3rem;
  font-weight:900;
  line-height:1;
  box-shadow:0 12px 24px rgba(31,128,58,.22);
}
.advanced-success-title{
  color:#17672f;
  font-size:clamp(1.9rem, 4.6vw, 2.85rem);
  line-height:1;
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.advanced-success-message{
  margin-top:10px;
  color:var(--text);
  font-size:1.15rem;
  line-height:1.45;
  font-weight:700;
}
.advanced-success-divider{
  grid-column:1 / -1;
  height:2px;
  border-radius:999px;
  background:rgba(31,128,58,.24);
}
.advanced-success-meta{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.advanced-success-meta span{
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(31,128,58,.16);
  color:#11451f;
  font-weight:800;
}
@media (max-width:720px){
  .advanced-success-card{
    grid-template-columns:1fr;
    text-align:center;
    padding:20px;
  }
  .advanced-success-mark{
    margin:0 auto;
  }
  .advanced-success-meta{
    grid-template-columns:1fr;
    text-align:left;
  }
}

/* Full SIG abbreviation reference */
.sig-abbrev-reference{
  margin-top:1rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 24px rgba(15, 23, 42, .06);
  overflow:hidden;
}
.sig-abbrev-reference summary{
  cursor:pointer;
  list-style:none;
  padding:1rem 1.1rem;
  font-weight:800;
  color:var(--ink);
}
.sig-abbrev-reference summary::-webkit-details-marker{display:none;}
.sig-abbrev-reference summary::after{
  content:'+';
  float:right;
  font-weight:900;
  color:var(--accent);
}
.sig-abbrev-reference[open] summary::after{content:'–';}
.sig-abbrev-reference .small{
  margin:.1rem 1.1rem 1rem;
}
.sig-table-wrap{
  max-height:420px;
  overflow:auto;
  border-top:1px solid var(--border);
}
.sig-abbrev-table{
  width:100%;
  border-collapse:collapse;
  font-size:.93rem;
}
.sig-abbrev-table th,
.sig-abbrev-table td{
  padding:.72rem .9rem;
  border-bottom:1px solid rgba(15, 23, 42, .08);
  text-align:left;
  vertical-align:top;
}
.sig-abbrev-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f8fafc;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.sig-abbrev-table code{
  font-weight:850;
  color:var(--accent);
  background:rgba(37, 99, 235, .08);
  border:1px solid rgba(37, 99, 235, .12);
  border-radius:8px;
  padding:.12rem .35rem;
  white-space:nowrap;
}

/* CSP-safe generated percentage widths for Advanced Utilities progress bars. */
.pct-0{width:0%;}
.pct-1{width:1%;}
.pct-2{width:2%;}
.pct-3{width:3%;}
.pct-4{width:4%;}
.pct-5{width:5%;}
.pct-6{width:6%;}
.pct-7{width:7%;}
.pct-8{width:8%;}
.pct-9{width:9%;}
.pct-10{width:10%;}
.pct-11{width:11%;}
.pct-12{width:12%;}
.pct-13{width:13%;}
.pct-14{width:14%;}
.pct-15{width:15%;}
.pct-16{width:16%;}
.pct-17{width:17%;}
.pct-18{width:18%;}
.pct-19{width:19%;}
.pct-20{width:20%;}
.pct-21{width:21%;}
.pct-22{width:22%;}
.pct-23{width:23%;}
.pct-24{width:24%;}
.pct-25{width:25%;}
.pct-26{width:26%;}
.pct-27{width:27%;}
.pct-28{width:28%;}
.pct-29{width:29%;}
.pct-30{width:30%;}
.pct-31{width:31%;}
.pct-32{width:32%;}
.pct-33{width:33%;}
.pct-34{width:34%;}
.pct-35{width:35%;}
.pct-36{width:36%;}
.pct-37{width:37%;}
.pct-38{width:38%;}
.pct-39{width:39%;}
.pct-40{width:40%;}
.pct-41{width:41%;}
.pct-42{width:42%;}
.pct-43{width:43%;}
.pct-44{width:44%;}
.pct-45{width:45%;}
.pct-46{width:46%;}
.pct-47{width:47%;}
.pct-48{width:48%;}
.pct-49{width:49%;}
.pct-50{width:50%;}
.pct-51{width:51%;}
.pct-52{width:52%;}
.pct-53{width:53%;}
.pct-54{width:54%;}
.pct-55{width:55%;}
.pct-56{width:56%;}
.pct-57{width:57%;}
.pct-58{width:58%;}
.pct-59{width:59%;}
.pct-60{width:60%;}
.pct-61{width:61%;}
.pct-62{width:62%;}
.pct-63{width:63%;}
.pct-64{width:64%;}
.pct-65{width:65%;}
.pct-66{width:66%;}
.pct-67{width:67%;}
.pct-68{width:68%;}
.pct-69{width:69%;}
.pct-70{width:70%;}
.pct-71{width:71%;}
.pct-72{width:72%;}
.pct-73{width:73%;}
.pct-74{width:74%;}
.pct-75{width:75%;}
.pct-76{width:76%;}
.pct-77{width:77%;}
.pct-78{width:78%;}
.pct-79{width:79%;}
.pct-80{width:80%;}
.pct-81{width:81%;}
.pct-82{width:82%;}
.pct-83{width:83%;}
.pct-84{width:84%;}
.pct-85{width:85%;}
.pct-86{width:86%;}
.pct-87{width:87%;}
.pct-88{width:88%;}
.pct-89{width:89%;}
.pct-90{width:90%;}
.pct-91{width:91%;}
.pct-92{width:92%;}
.pct-93{width:93%;}
.pct-94{width:94%;}
.pct-95{width:95%;}
.pct-96{width:96%;}
.pct-97{width:97%;}
.pct-98{width:98%;}
.pct-99{width:99%;}
.pct-100{width:100%;}
/* CSP-safe generated needle angles for Meeting Meter. */
.angle-p0{transform:rotate(0deg);}
.angle-p1{transform:rotate(1deg);}
.angle-p2{transform:rotate(2deg);}
.angle-p3{transform:rotate(3deg);}
.angle-p4{transform:rotate(4deg);}
.angle-p5{transform:rotate(5deg);}
.angle-p6{transform:rotate(6deg);}
.angle-p7{transform:rotate(7deg);}
.angle-p8{transform:rotate(8deg);}
.angle-p9{transform:rotate(9deg);}
.angle-p10{transform:rotate(10deg);}
.angle-p11{transform:rotate(11deg);}
.angle-p12{transform:rotate(12deg);}
.angle-p13{transform:rotate(13deg);}
.angle-p14{transform:rotate(14deg);}
.angle-p15{transform:rotate(15deg);}
.angle-p16{transform:rotate(16deg);}
.angle-p17{transform:rotate(17deg);}
.angle-p18{transform:rotate(18deg);}
.angle-p19{transform:rotate(19deg);}
.angle-p20{transform:rotate(20deg);}
.angle-p21{transform:rotate(21deg);}
.angle-p22{transform:rotate(22deg);}
.angle-p23{transform:rotate(23deg);}
.angle-p24{transform:rotate(24deg);}
.angle-p25{transform:rotate(25deg);}
.angle-p26{transform:rotate(26deg);}
.angle-p27{transform:rotate(27deg);}
.angle-p28{transform:rotate(28deg);}
.angle-p29{transform:rotate(29deg);}
.angle-p30{transform:rotate(30deg);}
.angle-p31{transform:rotate(31deg);}
.angle-p32{transform:rotate(32deg);}
.angle-p33{transform:rotate(33deg);}
.angle-p34{transform:rotate(34deg);}
.angle-p35{transform:rotate(35deg);}
.angle-p36{transform:rotate(36deg);}
.angle-p37{transform:rotate(37deg);}
.angle-p38{transform:rotate(38deg);}
.angle-p39{transform:rotate(39deg);}
.angle-p40{transform:rotate(40deg);}
.angle-p41{transform:rotate(41deg);}
.angle-p42{transform:rotate(42deg);}
.angle-p43{transform:rotate(43deg);}
.angle-p44{transform:rotate(44deg);}
.angle-p45{transform:rotate(45deg);}
.angle-p46{transform:rotate(46deg);}
.angle-p47{transform:rotate(47deg);}
.angle-p48{transform:rotate(48deg);}
.angle-p49{transform:rotate(49deg);}
.angle-p50{transform:rotate(50deg);}
.angle-p51{transform:rotate(51deg);}
.angle-p52{transform:rotate(52deg);}
.angle-p53{transform:rotate(53deg);}
.angle-p54{transform:rotate(54deg);}
.angle-p55{transform:rotate(55deg);}
.angle-p56{transform:rotate(56deg);}
.angle-p57{transform:rotate(57deg);}
.angle-p58{transform:rotate(58deg);}
.angle-p59{transform:rotate(59deg);}
.angle-p60{transform:rotate(60deg);}
.angle-p61{transform:rotate(61deg);}
.angle-p62{transform:rotate(62deg);}
.angle-p63{transform:rotate(63deg);}
.angle-p64{transform:rotate(64deg);}
.angle-p65{transform:rotate(65deg);}
.angle-p66{transform:rotate(66deg);}
.angle-p67{transform:rotate(67deg);}
.angle-p68{transform:rotate(68deg);}
.angle-p69{transform:rotate(69deg);}
.angle-p70{transform:rotate(70deg);}
.angle-p71{transform:rotate(71deg);}
.angle-p72{transform:rotate(72deg);}
.angle-p73{transform:rotate(73deg);}
.angle-p74{transform:rotate(74deg);}
.angle-p75{transform:rotate(75deg);}
.angle-p76{transform:rotate(76deg);}
.angle-p77{transform:rotate(77deg);}
.angle-p78{transform:rotate(78deg);}
.angle-p79{transform:rotate(79deg);}
.angle-p80{transform:rotate(80deg);}
.angle-p81{transform:rotate(81deg);}
.angle-p82{transform:rotate(82deg);}
.angle-p83{transform:rotate(83deg);}
.angle-p84{transform:rotate(84deg);}
.angle-p85{transform:rotate(85deg);}
.angle-p86{transform:rotate(86deg);}
.angle-p87{transform:rotate(87deg);}
.angle-p88{transform:rotate(88deg);}
.angle-p89{transform:rotate(89deg);}
.angle-p90{transform:rotate(90deg);}
.angle-n1{transform:rotate(-1deg);}
.angle-n2{transform:rotate(-2deg);}
.angle-n3{transform:rotate(-3deg);}
.angle-n4{transform:rotate(-4deg);}
.angle-n5{transform:rotate(-5deg);}
.angle-n6{transform:rotate(-6deg);}
.angle-n7{transform:rotate(-7deg);}
.angle-n8{transform:rotate(-8deg);}
.angle-n9{transform:rotate(-9deg);}
.angle-n10{transform:rotate(-10deg);}
.angle-n11{transform:rotate(-11deg);}
.angle-n12{transform:rotate(-12deg);}
.angle-n13{transform:rotate(-13deg);}
.angle-n14{transform:rotate(-14deg);}
.angle-n15{transform:rotate(-15deg);}
.angle-n16{transform:rotate(-16deg);}
.angle-n17{transform:rotate(-17deg);}
.angle-n18{transform:rotate(-18deg);}
.angle-n19{transform:rotate(-19deg);}
.angle-n20{transform:rotate(-20deg);}
.angle-n21{transform:rotate(-21deg);}
.angle-n22{transform:rotate(-22deg);}
.angle-n23{transform:rotate(-23deg);}
.angle-n24{transform:rotate(-24deg);}
.angle-n25{transform:rotate(-25deg);}
.angle-n26{transform:rotate(-26deg);}
.angle-n27{transform:rotate(-27deg);}
.angle-n28{transform:rotate(-28deg);}
.angle-n29{transform:rotate(-29deg);}
.angle-n30{transform:rotate(-30deg);}
.angle-n31{transform:rotate(-31deg);}
.angle-n32{transform:rotate(-32deg);}
.angle-n33{transform:rotate(-33deg);}
.angle-n34{transform:rotate(-34deg);}
.angle-n35{transform:rotate(-35deg);}
.angle-n36{transform:rotate(-36deg);}
.angle-n37{transform:rotate(-37deg);}
.angle-n38{transform:rotate(-38deg);}
.angle-n39{transform:rotate(-39deg);}
.angle-n40{transform:rotate(-40deg);}
.angle-n41{transform:rotate(-41deg);}
.angle-n42{transform:rotate(-42deg);}
.angle-n43{transform:rotate(-43deg);}
.angle-n44{transform:rotate(-44deg);}
.angle-n45{transform:rotate(-45deg);}
.angle-n46{transform:rotate(-46deg);}
.angle-n47{transform:rotate(-47deg);}
.angle-n48{transform:rotate(-48deg);}
.angle-n49{transform:rotate(-49deg);}
.angle-n50{transform:rotate(-50deg);}
.angle-n51{transform:rotate(-51deg);}
.angle-n52{transform:rotate(-52deg);}
.angle-n53{transform:rotate(-53deg);}
.angle-n54{transform:rotate(-54deg);}
.angle-n55{transform:rotate(-55deg);}
.angle-n56{transform:rotate(-56deg);}
.angle-n57{transform:rotate(-57deg);}
.angle-n58{transform:rotate(-58deg);}
.angle-n59{transform:rotate(-59deg);}
.angle-n60{transform:rotate(-60deg);}
.angle-n61{transform:rotate(-61deg);}
.angle-n62{transform:rotate(-62deg);}
.angle-n63{transform:rotate(-63deg);}
.angle-n64{transform:rotate(-64deg);}
.angle-n65{transform:rotate(-65deg);}
.angle-n66{transform:rotate(-66deg);}
.angle-n67{transform:rotate(-67deg);}
.angle-n68{transform:rotate(-68deg);}
.angle-n69{transform:rotate(-69deg);}
.angle-n70{transform:rotate(-70deg);}
.angle-n71{transform:rotate(-71deg);}
.angle-n72{transform:rotate(-72deg);}
.angle-n73{transform:rotate(-73deg);}
.angle-n74{transform:rotate(-74deg);}
.angle-n75{transform:rotate(-75deg);}
.angle-n76{transform:rotate(-76deg);}
.angle-n77{transform:rotate(-77deg);}
.angle-n78{transform:rotate(-78deg);}
.angle-n79{transform:rotate(-79deg);}
.angle-n80{transform:rotate(-80deg);}
.angle-n81{transform:rotate(-81deg);}
.angle-n82{transform:rotate(-82deg);}
.angle-n83{transform:rotate(-83deg);}
.angle-n84{transform:rotate(-84deg);}
.angle-n85{transform:rotate(-85deg);}
.angle-n86{transform:rotate(-86deg);}
.angle-n87{transform:rotate(-87deg);}
.angle-n88{transform:rotate(-88deg);}
.angle-n89{transform:rotate(-89deg);}
.angle-n90{transform:rotate(-90deg);}


.mme-stack-example .table-scroll {
  margin: 12px 0;
  overflow-x: auto;
}

.mme-stack-example table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.mme-stack-example th,
.mme-stack-example td {
  padding: 8px 10px;
  border: 1px solid rgba(13, 43, 76, .16);
  text-align: left;
  vertical-align: top;
}

.mme-stack-example th,
.mme-stack-example tfoot td {
  background: rgba(13, 43, 76, .06);
}