/* ==========================================================================
   Pauselet — site styles
   The four priority tiers are the design system: teal, blue, orange, red,
   in that order, everywhere. Nothing else is allowed to be that loud.
   ========================================================================== */

:root {
  color-scheme: light;

  /* surfaces */
  --field:      #EEF0F7;
  --field-tint: #E4E8F3;
  --paper:      #FBFCFE;
  --dim:        #0B151A;
  --dim-2:      #101E24;
  --hair:       rgba(7, 13, 58, .07);

  /* ink */
  --ink:     #070D3A;
  --ink-70:  rgba(7, 13, 58, .70);
  --ink-52:  rgba(7, 13, 58, .62);
  --ink-14:  rgba(7, 13, 58, .14);
  --ink-08:  rgba(7, 13, 58, .08);
  --ink-05:  rgba(7, 13, 58, .05);
  --on-dim:     #E7F1F0;
  --on-dim-60:  rgba(231, 241, 240, .60);
  --on-dim-14:  rgba(231, 241, 240, .14);

  /* the scale — the darkened, contrast-safe cut for light backgrounds */
  --t-subtle:    #12C2C4;
  --t-normal:    #1478E8;
  --t-important: #E07A05;
  --t-critical:  #E42422;
  --mint:        #9DE8D4;
  --indigo:      #0A125C;

  /* roles that flip */
  --accent:      var(--indigo);
  --btn-bg:      var(--indigo);
  --btn-bg-hover:#131E7A;
  --btn-fg:      #FBFCFE;
  --tag-bg:      rgba(20, 120, 232, .10);
  --tag-fg:      var(--indigo);
  --lift:        rgba(7, 13, 58, .05);

  /* the mock screen in the hero — a Mac in light mode */
  --screen-grad:  linear-gradient(158deg, #dde4f6 0%, #c6d1ea 55%, #b9c5e4 100%);
  --screen-edge:  rgba(7, 13, 58, .10);
  --screen-gloss: rgba(255, 255, 255, .7);
  --screenbar-bg: rgba(255, 255, 255, .42);
  --screen-fg:    rgba(7, 13, 58, .75);
  --screen-fg-2:  rgba(7, 13, 58, .62);
  --notif-bg:     rgba(248, 249, 252, .92);
  --notif-edge:   rgba(7, 13, 58, .10);
  --notif-fg:     var(--ink);
  --notif-fg-2:   var(--ink-70);
  --notif-fg-3:   var(--ink-52);
  --cap-bg:       rgba(255, 255, 255, .62);
  --cap-fg:       rgba(7, 13, 58, .62);

  /* shadows */
  --sh-card: 0 1px 2px rgba(7,13,58,.05), 0 14px 30px -22px rgba(7,13,58,.4);
  --sh-lift: 0 2px 6px rgba(7,13,58,.12), 0 34px 66px -34px rgba(7,13,58,.7);
  --sh-pop:  0 1px 2px rgba(7,13,58,.06), 0 34px 70px -34px rgba(7,13,58,.6);
  --sh-btn:  0 2px 0 rgba(7,13,58,.22), 0 10px 26px -12px rgba(7,13,58,.6);
}

/* --------------------------------------------------------------------------
   Dark mode.

   The page field becomes deep indigo — the logo's own background — rather than
   a neutral black, so the two dim sections stay visibly darker than everything
   around them. The Critical band still has to read as the screen going out.
   The tier colours revert to the brighter values straight off the app icon,
   which are the ones that hold up on a dark ground.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --field:      #070C28;
    --field-tint: #0B1236;
    --paper:      #101748;
    --hair:       rgba(233, 236, 251, .10);

    --ink:     #E9ECFB;
    --ink-70:  rgba(233, 236, 251, .74);
    --ink-52:  rgba(233, 236, 251, .62);
    --ink-14:  rgba(233, 236, 251, .18);
    --ink-08:  rgba(233, 236, 251, .11);
    --ink-05:  rgba(233, 236, 251, .07);

    --t-subtle:    #2BE0E2;
    --t-normal:    #3E9BFF;
    --t-important: #FF9A2E;
    --t-critical:  #FF5A57;

    --accent:      var(--mint);
    --btn-bg:      var(--mint);
    --btn-bg-hover:#B4F0DF;
    --btn-fg:      #06222A;
    --tag-bg:      rgba(62, 155, 255, .14);
    --tag-fg:      #8FC4FF;
    --lift:        rgba(233, 236, 251, .07);

    --screen-grad:  linear-gradient(158deg, #1B2444 0%, #141B33 55%, #0E1426 100%);
    --screen-edge:  rgba(255, 255, 255, .09);
    --screen-gloss: rgba(255, 255, 255, .06);
    --screenbar-bg: rgba(255, 255, 255, .05);
    --screen-fg:    rgba(255, 255, 255, .72);
    --screen-fg-2:  rgba(255, 255, 255, .55);
    --notif-bg:     rgba(40, 40, 45, .94);
    --notif-edge:   rgba(255, 255, 255, .10);
    --notif-fg:     #FFFFFF;
    --notif-fg-2:   rgba(255, 255, 255, .68);
    --notif-fg-3:   rgba(255, 255, 255, .5);
    --cap-bg:       rgba(0, 0, 0, .38);
    --cap-fg:       rgba(255, 255, 255, .62);

    --sh-card: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -22px rgba(0,0,0,.9);
    --sh-lift: 0 2px 6px rgba(0,0,0,.5), 0 34px 66px -34px rgba(0,0,0,1);
    --sh-pop:  0 1px 2px rgba(0,0,0,.5), 0 34px 70px -34px rgba(0,0,0,1);
    --sh-btn:  0 2px 0 rgba(0,0,0,.35), 0 12px 30px -14px rgba(157,232,212,.5);

    --dim-edge: rgba(157, 232, 212, .14);
    --dim-glow: .11;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --field:      #070C28;
  --field-tint: #0B1236;
  --paper:      #101748;
  --hair:       rgba(233, 236, 251, .10);

  --ink:     #E9ECFB;
  --ink-70:  rgba(233, 236, 251, .74);
  --ink-52:  rgba(233, 236, 251, .62);
  --ink-14:  rgba(233, 236, 251, .18);
  --ink-08:  rgba(233, 236, 251, .11);
  --ink-05:  rgba(233, 236, 251, .07);

  --t-subtle:    #2BE0E2;
  --t-normal:    #3E9BFF;
  --t-important: #FF9A2E;
  --t-critical:  #FF5A57;

  --accent:      var(--mint);
  --btn-bg:      var(--mint);
  --btn-bg-hover:#B4F0DF;
  --btn-fg:      #06222A;
  --tag-bg:      rgba(62, 155, 255, .14);
  --tag-fg:      #8FC4FF;
  --lift:        rgba(233, 236, 251, .07);

  --screen-grad:  linear-gradient(158deg, #1B2444 0%, #141B33 55%, #0E1426 100%);
  --screen-edge:  rgba(255, 255, 255, .09);
  --screen-gloss: rgba(255, 255, 255, .06);
  --screenbar-bg: rgba(255, 255, 255, .05);
  --screen-fg:    rgba(255, 255, 255, .72);
  --screen-fg-2:  rgba(255, 255, 255, .55);
  --notif-bg:     rgba(40, 40, 45, .94);
  --notif-edge:   rgba(255, 255, 255, .10);
  --notif-fg:     #FFFFFF;
  --notif-fg-2:   rgba(255, 255, 255, .68);
  --notif-fg-3:   rgba(255, 255, 255, .5);
  --cap-bg:       rgba(0, 0, 0, .38);
  --cap-fg:       rgba(255, 255, 255, .62);

  --sh-card: 0 1px 2px rgba(0,0,0,.4), 0 14px 30px -22px rgba(0,0,0,.9);
  --sh-lift: 0 2px 6px rgba(0,0,0,.5), 0 34px 66px -34px rgba(0,0,0,1);
  --sh-pop:  0 1px 2px rgba(0,0,0,.5), 0 34px 70px -34px rgba(0,0,0,1);
  --sh-btn:  0 2px 0 rgba(0,0,0,.35), 0 12px 30px -14px rgba(157,232,212,.5);

  --dim-edge: rgba(157, 232, 212, .14);
  --dim-glow: .11;
}

:root {

  /* type */
  --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm */
  --gutter: clamp(20px, 5vw, 56px);
  --band-y: clamp(76px, 10vw, 148px);
}

/* ---------- reset-ish ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(16.5px, .45vw + 15px, 18.5px);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* `clip` rather than `hidden`: hidden makes body a scroll container, which
     breaks the sticky header. Only the bleeding screenshot needs clipping. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: var(--mint); color: var(--indigo); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--btn-bg); color: var(--btn-fg); padding: 10px 16px; border-radius: 8px;
  font-family: var(--mono); font-size: 13px; text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: 12px; }

:focus-visible {
  outline: 2.5px solid var(--t-normal);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- shared type ---------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.05;
  margin: 0;
  font-variation-settings: "wdth" 96;
}

h2 {
  font-size: clamp(1.85rem, 3.5vw, 3.05rem);
  max-width: 19ch;
  margin-bottom: .55em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-52);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* the four-segment bar: a miniature of the scale itself */
.bar {
  display: inline-block;
  width: 44px; height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg,
    var(--t-subtle) 0 22%, transparent 22% 26%,
    var(--t-normal) 26% 48%, transparent 48% 52%,
    var(--t-important) 52% 74%, transparent 74% 78%,
    var(--t-critical) 78% 100%);
  flex: none;
}

.section-lede {
  font-size: 1.12em;
  color: var(--ink-70);
  max-width: 56ch;
  margin: 0 0 1.2em;
}

.fineprint {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--ink-52);
  margin: 0;
}

code {
  font-family: var(--mono);
  font-size: .88em;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.008em;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  padding: 15px 26px;
  border-radius: 999px;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), background-color .18s, box-shadow .18s;
  box-shadow: var(--sh-btn);
}
.btn:hover { transform: translateY(-2px); background: var(--btn-bg-hover); }
.btn:active { transform: translateY(0); }

.btn-sm { padding: 9px 18px; font-size: .86rem; box-shadow: none; }
.btn-lg { padding: 19px 36px; font-size: 1.12rem; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--field) 86%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.topbar.is-stuck { border-bottom-color: var(--ink-08); }

.topbar-in {
  display: flex; align-items: center; gap: 28px;
  height: 68px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.24rem;
  letter-spacing: -.032em;
  font-variation-settings: "wdth" 92;
}

.bm-track, .bm-seg, .bm-tick { fill: none; stroke-linecap: round; }
.bm-track { stroke: var(--ink-14); stroke-width: 4.2; stroke-dasharray: 26.18 62.83; stroke-dashoffset: -36.65; transform: rotate(-90deg); transform-origin: 50% 50%; }
.bm-tick  { stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.bm-seg   { stroke-width: 4.2; stroke-dasharray: 8.38 62.83; transform: rotate(-90deg); transform-origin: 50% 50%; }
.bm-seg.s1 { stroke: var(--t-subtle);    stroke-dashoffset: 0; }
.bm-seg.s2 { stroke: var(--t-normal);    stroke-dashoffset: -9.16; }
.bm-seg.s3 { stroke: var(--t-important); stroke-dashoffset: -18.33; }
.bm-seg.s4 { stroke: var(--t-critical);  stroke-dashoffset: -27.49; }

.topnav { display: flex; gap: 26px; }
.topnav a {
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-70);
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  transition: color .15s, border-color .15s;
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--t-normal); }

@media (max-width: 760px) { .topnav { display: none; } }

/* theme toggle — pointless without JS, so it only exists when JS is running */
.themetoggle { display: none; }
.js .themetoggle {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  padding: 0;
  border: 1px solid var(--ink-14);
  border-radius: 999px;
  background: none;
  color: var(--ink-70);
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.themetoggle:hover { background: var(--lift); color: var(--ink); border-color: var(--ink-14); }
.themetoggle svg {
  grid-area: 1 / 1;
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.themetoggle svg[hidden] { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: clamp(48px, 7vw, 92px) 0 clamp(70px, 9vw, 120px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

.hero h1 { margin: 0 0 28px; display: block; }

/* volume, rendered as type: the first line whispers, the second doesn't */
.h-quiet {
  display: block;
  font-family: var(--body);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--ink-52);
  margin-bottom: .28em;
}
.h-loud {
  display: block;
  font-weight: 800;
  font-size: clamp(2.55rem, 6vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.038em;
  font-variation-settings: "wdth" 90;
  text-wrap: balance;
}

.lede { font-size: 1.1em; color: var(--ink-70); max-width: 46ch; margin: 0 0 34px; }

.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* ---------- the demo: screen + dial ---------- */
.hero-demo { display: flex; flex-direction: column; gap: 22px; }

.screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: var(--screen-grad);
  box-shadow:
    0 1px 0 var(--screen-gloss) inset,
    var(--sh-lift);
  border: 1px solid var(--screen-edge);
}

.screen-bar {
  position: absolute; inset: 0 0 auto 0; height: 8.5%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3.4%;
  background: var(--screenbar-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--screen-edge);
  z-index: 3;
}
.screen-mark { width: 15px; height: 15px; }
.screen-mark .bm-track { stroke: var(--screen-fg); stroke-width: 4.6; stroke-dasharray: 45 62.83; stroke-dashoffset: -8; }
.screen-mark .bm-tick { stroke: var(--screen-fg); stroke-width: 4.6; }
.screen-clock { font-family: var(--mono); font-size: 10px; color: var(--screen-fg-2); }

.stage { position: absolute; inset: 0; }

.demo {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease;
}
.demo.is-on { opacity: 1; visibility: visible; }

.demo figcaption {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--cap-fg);
  background: var(--cap-bg);
  padding: 4px 9px;
  border-radius: 6px;
  z-index: 4;
}
.demo-critical figcaption { color: var(--on-dim-60); background: rgba(255,255,255,.08); }

/* subtle card */
.card-subtle {
  position: absolute; right: 4%; bottom: 8%;
  width: 62%;
  display: flex; align-items: center; gap: 10px;
  background: #1C1C1E;
  border-radius: 14px;
  padding: 13px 14px;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.7);
  transform: translateX(0);
}
.demo-subtle.is-on .card-subtle { animation: slide-in .5s cubic-bezier(.2,.8,.3,1) both; }
@keyframes slide-in { from { transform: translateX(18px); opacity: 0; } to { transform: none; opacity: 1; } }

.card-subtle .ci { flex: none; width: 26px; height: 26px; }
.card-subtle .ci svg { width: 100%; height: 100%; fill: none; stroke: var(--t-subtle); stroke-width: 1.6; stroke-linecap: round; }
.card-subtle .ct { display: block; min-width: 0; }
.card-subtle b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 13px; color: #fff; letter-spacing: -.01em; line-height: 1.2;
}
.card-subtle i {
  display: block; font-style: normal; font-family: var(--display); font-weight: 400;
  font-size: 11.5px; color: rgba(255,255,255,.62); line-height: 1.3; margin-top: 2px;
}
.card-subtle .cx {
  flex: none; margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.14); display: grid; place-items: center;
}
.card-subtle .cx svg { width: 13px; height: 13px; fill: none; stroke: rgba(255,255,255,.8); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* notification */
.card-notif {
  position: absolute; right: 3.5%; top: 13%;
  width: 58%;
  display: flex; gap: 10px;
  background: var(--notif-bg);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--notif-fg);
  box-shadow: 0 16px 34px -16px rgba(0,0,0,.45), 0 0 0 .5px var(--notif-edge);
}
.demo-normal.is-on .card-notif,
.demo-important.is-on .card-notif { animation: drop-in .45s cubic-bezier(.2,.8,.3,1) both; }
@keyframes drop-in { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

.card-notif .ni {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--indigo); display: grid; place-items: center;
}
.card-notif .ni svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card-notif.is-important .ni { background: var(--t-important); }
.card-notif .ring1, .card-notif .ring2 { opacity: 0; }
.demo-important.is-on .card-notif .ring1 { animation: ping 1.6s ease-out .3s infinite; }
.demo-important.is-on .card-notif .ring2 { animation: ping 1.6s ease-out .45s infinite; }
@keyframes ping { 0% { opacity: 0; } 25% { opacity: 1; } 70%, 100% { opacity: 0; } }

.card-notif .nt { display: block; min-width: 0; }
.card-notif em {
  display: block; font-style: normal; font-family: var(--display); font-weight: 500;
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--notif-fg-3);
}
.card-notif b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: -.012em; margin-top: 2px; color: var(--notif-fg);
}
.card-notif i {
  display: block; font-style: normal; font-family: var(--display); font-weight: 400;
  font-size: 11.5px; color: var(--notif-fg-2); line-height: 1.3;
}
.pill {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--t-important); color: #fff; letter-spacing: .06em; font-size: 8.5px;
  vertical-align: 1px;
}

/* critical takeover */
.takeover {
  position: absolute; inset: 0;
  background: var(--dim);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 6% 10%;
  z-index: 5;
}
.demo-critical.is-on .takeover { animation: dim-in .5s ease both; }
@keyframes dim-in { from { opacity: 0; } to { opacity: 1; } }

.to-glyph { width: 6%; min-width: 26px; height: auto; aspect-ratio: 1; fill: var(--mint); stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; margin-bottom: 3%; }
.to-glyph path { fill: none; }
.to-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(17px, 3.4cqw, 30px); color: #fff; margin: 0 0 .3em; line-height: 1;
}
.to-msg {
  font-family: var(--display); font-weight: 400; font-size: clamp(10px, 1.5cqw, 13px);
  color: var(--on-dim-60); margin: 0 0 4%; line-height: 1.35; max-width: 30ch;
}
.to-ring { position: relative; width: 21%; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 4%; }
.to-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tr-track { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 5; }
.tr-fill  { fill: none; stroke: var(--mint); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 22; opacity: .9; }
.to-time {
  font-family: var(--display); font-weight: 700; font-size: clamp(13px, 2.2cqw, 20px);
  color: #fff; letter-spacing: -.02em; line-height: 1; margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.to-rem { position: absolute; bottom: 22%; font-family: var(--display); font-size: clamp(7px, 1cqw, 9px); color: var(--on-dim-60); }
.to-btns { display: flex; gap: 10px; }
.to-b {
  font-family: var(--display); font-weight: 700; font-size: clamp(9px, 1.3cqw, 12px);
  padding: .55em 1.35em; border-radius: 999px;
  background: rgba(255,255,255,.09); color: var(--on-dim);
}
.to-b-go { background: var(--mint); color: #06222A; }

/* ---------- the dial ---------- */
.dial-row { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); }

.dial { width: clamp(112px, 15vw, 152px); height: auto; flex: none; }
.d-track, .d-seg, .d-tick { fill: none; stroke-linecap: round; }
.d-track { stroke: var(--ink-14); stroke-width: 15; stroke-dasharray: 204.2 490.1; stroke-dashoffset: -285.9; transform: rotate(-90deg); transform-origin: 50% 50%; }
.d-tick  { stroke: var(--ink-14); stroke-width: 13; stroke-linejoin: round; transition: stroke .3s; }
.dial.is-live .d-tick { stroke: var(--ink-52); }

.d-seg {
  stroke-width: 15;
  stroke-dasharray: 65.35 490.1;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  opacity: .22;
  transition: opacity .3s, stroke-width .3s;
}
.d-seg[data-seg="subtle"]    { stroke: var(--t-subtle);    stroke-dashoffset: 0; }
.d-seg[data-seg="normal"]    { stroke: var(--t-normal);    stroke-dashoffset: -71.47; }
.d-seg[data-seg="important"] { stroke: var(--t-important); stroke-dashoffset: -142.94; }
.d-seg[data-seg="critical"]  { stroke: var(--t-critical);  stroke-dashoffset: -214.41; }
.d-seg.is-lit { opacity: 1; stroke-width: 19; }

.tierlist { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tier {
  display: grid;
  grid-template-columns: 12px auto;
  grid-template-rows: auto auto;
  column-gap: 11px;
  align-items: center;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--ink-52);
  transition: background-color .18s, color .18s;
  font: inherit;
}
.tier:hover { background: var(--lift); color: var(--ink-70); }
.tier[aria-selected="true"] { background: var(--lift); color: var(--ink); }

.t-dot {
  grid-row: 1 / 3;
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor;
  opacity: .3;
  transition: opacity .18s, box-shadow .18s;
}
.tier[data-tier="subtle"]    .t-dot { color: var(--t-subtle); }
.tier[data-tier="normal"]    .t-dot { color: var(--t-normal); }
.tier[data-tier="important"] .t-dot { color: var(--t-important); }
.tier[data-tier="critical"]  .t-dot { color: var(--t-critical); }
.tier[aria-selected="true"] .t-dot { opacity: 1; box-shadow: 0 0 0 4px currentColor; }

.t-name { font-family: var(--display); font-weight: 700; font-size: .98rem; letter-spacing: -.015em; line-height: 1.2; }
.t-note { font-family: var(--mono); font-size: 11px; letter-spacing: .01em; opacity: .8; line-height: 1.3; grid-column: 2; }

@media (max-width: 420px) {
  .dial-row { flex-direction: column; align-items: flex-start; }
  .tierlist { width: 100%; }
}

/* ==========================================================================
   Bands
   ========================================================================== */
.band { padding: var(--band-y) 0; }
.band-tint { background: var(--field-tint); }

/* ---------- the scale ---------- */
.scale {
  list-style: none;
  margin: clamp(38px, 5vw, 62px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  counter-reset: none;
}
@media (max-width: 900px) { .scale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .scale { grid-template-columns: minmax(0, 1fr); } }

.rung {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 24px 22px 26px;
  box-shadow: var(--sh-card);
  position: relative;
  overflow: hidden;
}
.rung h3 { font-size: 1.3rem; margin-bottom: .45em; }
.rung p { margin: 0 0 .8em; font-size: .95em; color: var(--ink-70); line-height: 1.55; }
.rung p:last-child { margin-bottom: 0; }
.rung-for {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.65;
  color: var(--ink-52);
  border-top: 1px solid var(--ink-08);
  padding-top: 14px;
  margin-top: 4px;
}
.rung em { font-style: italic; }

/* the mark grows across the scale — the rungs are ordered, and it shows */
.rung-mark {
  display: block;
  height: 5px;
  border-radius: 3px;
  margin-bottom: 20px;
}
.rung[data-tier="subtle"]    .rung-mark { width: 22%; background: var(--t-subtle); }
.rung[data-tier="normal"]    .rung-mark { width: 44%; background: var(--t-normal); }
.rung[data-tier="important"] .rung-mark { width: 68%; background: var(--t-important); }
.rung[data-tier="critical"]  .rung-mark { width: 100%; background: var(--t-critical); }

/* ==========================================================================
   Dim sections — the page does what the app does
   ========================================================================== */
.dim {
  background: var(--dim);
  color: var(--on-dim);
  padding: var(--band-y) 0;
  position: relative;
  /* in dark mode the page around it is also dark, so the band needs an edge
     to still read as the screen going out */
  border-block: 1px solid var(--dim-edge, transparent);
}
.dim::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 70% 0%, rgba(157,232,212,var(--dim-glow, .07)), transparent 60%);
  pointer-events: none;
}
.dim .wrap { position: relative; }
.dim h2 { color: #fff; }
.dim .eyebrow { color: var(--on-dim-60); }
.dim p { color: var(--on-dim-60); }
.dim em { color: var(--mint); font-style: normal; }
.dim ::selection { background: var(--mint); color: var(--dim); }

.dim-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

.dim-copy p { max-width: 46ch; font-size: 1.02em; }

/* the overlay screenshot runs off the edge of the page, which is the point */
.dim-shot {
  margin: 0;
  margin-right: calc(((100vw - min(100vw, 1180px)) / 2 + var(--gutter)) * -1);
}
.dim-shot img {
  width: 100%;
  border-radius: 12px 0 0 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-right: 0;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9);
}

@media (max-width: 920px) {
  .dim-grid { grid-template-columns: minmax(0, 1fr); }
  .dim-shot { margin-right: calc(var(--gutter) * -1); }
}

/* ==========================================================================
   Schedules
   ========================================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(30px, 4vw, 48px);
}
@media (max-width: 820px) { .cards { grid-template-columns: minmax(0, 1fr); } }

.cards .card {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 26px 24px 28px;
  box-shadow: var(--sh-card);
}
.cards .card h3 { font-size: 1.25rem; margin: 0 0 .4em; }
.cards .card p { margin: 0; font-size: .95em; color: var(--ink-70); line-height: 1.55; }

.mono-tag {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--tag-fg);
  background: var(--tag-bg);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  margin: 0 0 16px;
}

.note {
  margin-top: clamp(26px, 3vw, 40px);
  padding-left: 22px;
  border-left: 3px solid var(--ink-14);
  display: grid;
  gap: .8em;
  max-width: 78ch;
}
.note p { margin: 0; color: var(--ink-70); font-size: .98em; }
.note strong { font-weight: 500; color: var(--ink); }

/* ==========================================================================
   At a glance + popover recreation
   ========================================================================== */
.glance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { .glance-grid { grid-template-columns: minmax(0, 1fr); } }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.ticks li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-70);
  font-size: .97em;
}
.ticks li::before {
  content: "";
  position: absolute; left: 2px; top: .55em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--t-subtle);
  border-bottom: 2px solid var(--t-subtle);
  transform: rotate(-45deg);
}

.popover {
  background: var(--paper);
  border-radius: 16px;
  padding: 8px;
  box-shadow: var(--sh-pop);
  border: 1px solid var(--hair);
  max-width: 380px;
  width: 100%;
  justify-self: end;
}
@media (max-width: 900px) { .popover { justify-self: start; } }

.pop-head { padding: 14px 14px 12px; display: grid; grid-template-columns: 1fr auto; row-gap: 2px; align-items: baseline; }
.pop-label { grid-column: 1 / 3; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-52); }
.pop-next { font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; }
.pop-in { font-family: var(--mono); font-size: 12px; color: var(--t-subtle); font-weight: 500; }

.pop-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink-08); }
.pop-list li {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ink-08);
}
.pop-list li:last-child { border-bottom: 0; }

.pl-dot { width: 8px; height: 8px; border-radius: 50%; }
.pl-dot[data-tier="subtle"]    { background: var(--t-subtle); }
.pl-dot[data-tier="normal"]    { background: var(--t-normal); }
.pl-dot[data-tier="important"] { background: var(--t-important); }
.pl-dot[data-tier="critical"]  { background: var(--t-critical); }

.pl-body { min-width: 0; }
.pl-body b { display: block; font-family: var(--display); font-weight: 700; font-size: .88rem; letter-spacing: -.014em; line-height: 1.25; }
.pl-body i { display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px; color: var(--ink-52); margin-top: 1px; }
.pl-time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-70); }
.pl-sw { width: 30px; height: 18px; border-radius: 999px; background: var(--ink-14); position: relative; }
.pl-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s; }
.pl-sw.is-on { background: var(--t-normal); }
.pl-sw.is-on::after { left: 14px; }

.pop-foot { display: flex; justify-content: space-between; padding: 12px 14px 8px; border-top: 1px solid var(--ink-08); font-family: var(--display); font-size: .85rem; color: var(--ink-52); }

/* ==========================================================================
   Features + screenshots
   ========================================================================== */
.feats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 38px) clamp(20px, 2.4vw, 34px);
  margin-top: clamp(34px, 4vw, 54px);
}
@media (max-width: 980px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feats { grid-template-columns: minmax(0, 1fr); } }

.feat { border-top: 2px solid var(--ink-14); padding-top: 16px; }
.feat h3 { font-size: 1.02rem; margin-bottom: .5em; }
.feat p { margin: 0; font-size: .92em; color: var(--ink-70); line-height: 1.55; }

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(46px, 6vw, 82px);
  align-items: start;
}
@media (max-width: 820px) { .shots { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }

.shots figure { margin: 0; }
.shots img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: top center;
  background: #1C1C1E;
  border-radius: 10px;
  box-shadow: var(--sh-lift);
}
.shots figcaption {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  color: var(--ink-52);
  margin-top: 12px;
}

/* ==========================================================================
   Music
   ========================================================================== */
.music-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 900px) { .music-grid { grid-template-columns: minmax(0, 1fr); } }
.music-shot { margin: 0; }
.music-shot img { border-radius: 12px; box-shadow: var(--sh-lift); }
.music-grid .fineprint { margin-top: 1.6em; max-width: 52ch; }

/* ==========================================================================
   Use cases
   ========================================================================== */
.uses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(32px, 4vw, 50px);
}
@media (max-width: 900px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .uses { grid-template-columns: minmax(0, 1fr); } }

.use {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 24px 22px 26px;
  border-left: 4px solid var(--ink-14);
  box-shadow: var(--sh-card);
}
.use[data-tier="subtle"]    { border-left-color: var(--t-subtle); }
.use[data-tier="normal"]    { border-left-color: var(--t-normal); }
.use[data-tier="important"] { border-left-color: var(--t-important); }
.use[data-tier="critical"]  { border-left-color: var(--t-critical); }
.use h3 { font-size: 1.12rem; margin-bottom: .45em; }
.use p { margin: 0; font-size: .93em; color: var(--ink-70); line-height: 1.55; }

/* ==========================================================================
   Privacy
   ========================================================================== */
.privacy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}
@media (max-width: 900px) { .privacy { grid-template-columns: minmax(0, 1fr); } }
.privacy h2 { max-width: 17ch; }
.path {
  margin: 0;
  display: inline-block;
  background: var(--paper);
  border: 1px solid var(--ink-08);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--sh-card);
  max-width: 100%;
  overflow-x: auto;
}
.path code { font-size: .82em; color: var(--accent); white-space: nowrap; }

.datafile {
  margin: 0;
  background: var(--dim);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sh-lift);
}
.datafile figcaption {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dim-60);
  padding: 13px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.datafile pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--on-dim);
}
.datafile .k { color: var(--mint); }
.datafile .s { color: #C7D2E8; }
.datafile .n { color: #7FB6F5; }
.datafile .c { color: #FF8C8A; }
.datafile .p { color: rgba(231,241,240,.42); }

/* ==========================================================================
   About
   ========================================================================== */
.about-body {
  max-width: 62ch;
  margin-top: 8px;
}
.about-body p { margin: 0 0 1.15em; font-size: 1.06em; }
.about-body p:last-child { margin-bottom: 0; }

.about-body .lead-para {
  font-size: 1.22em;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 22px;
  border-left: 3px solid var(--t-critical);
  margin-bottom: 1.5em;
}

.ma {
  margin-top: clamp(46px, 6vw, 72px);
  background: var(--indigo);
  color: #EAECFB;
  border-radius: 16px;
  padding: clamp(28px, 3.4vw, 42px);
  max-width: 62ch;
  position: relative;
  overflow: hidden;
}
.ma::after {
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(157,232,212,.18), transparent 70%);
}
.ma-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(234,236,251,.6); margin: 0 0 10px; }
.ma-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.03em; margin: 0 0 .5em; color: #fff; }
.ma-body { margin: 0 0 1.4em; color: rgba(234,236,251,.78); font-size: 1em; position: relative; }
.ma-link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  color: var(--mint); text-decoration: none;
  border-bottom: 1.5px solid rgba(157,232,212,.35);
  padding-bottom: 3px;
  position: relative;
  transition: border-color .18s, gap .18s;
}
.ma-link:hover { border-bottom-color: var(--mint); gap: 14px; }
.ma-link svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   Download
   ========================================================================== */
.dl { position: relative; }
.dl h2 { font-size: clamp(2.2rem, 5vw, 3.8rem); }

/* the dial from the hero, closing the page with every segment lit */
.dl-dial {
  position: absolute;
  right: 0;
  top: -8%;
  width: clamp(150px, 22vw, 270px);
  height: auto;
}
.dl-dial .d-track { stroke: rgba(255,255,255,.07); }
.dl-dial .d-tick  { stroke: rgba(255,255,255,.14); stroke-width: 11; }
.dl-dial .d-seg { opacity: .85; stroke-width: 15; }
@media (max-width: 760px) { .dl-dial { display: none; } }
.dl-lede { font-size: 1.06em; max-width: 50ch; margin: 0 0 2em; }
.dl-lede code { color: var(--mint); }
.dim .btn { background: var(--mint); color: #06222A; box-shadow: 0 2px 0 rgba(0,0,0,.3), 0 16px 40px -16px rgba(157,232,212,.6); }
.dim .btn:hover { background: #B4F0DF; }

.dl-facts {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  border-top: 1px solid var(--on-dim-14);
  padding-top: 26px;
}
@media (max-width: 720px) { .dl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dl-facts li { font-family: var(--mono); font-size: 13px; color: var(--on-dim); line-height: 1.5; word-break: break-word; }
.dl-facts span { display: block; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dim-60); margin-bottom: 6px; }
.dl-facts a { color: var(--mint); text-decoration: none; border-bottom: 1px solid rgba(157,232,212,.35); }
.dl-facts a:hover { border-bottom-color: var(--mint); }

.dl-note { margin: 28px 0 0; max-width: 62ch; font-size: .95em; }

/* ==========================================================================
   Privacy policy — a document, so it is set as one: a single measure, quiet
   headings, and links that look like links.
   ========================================================================== */
.legal { padding: clamp(48px, 7vw, 88px) 0 clamp(72px, 9vw, 120px); }
.legal .wrap { max-width: 780px; }

.legal-title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  max-width: 16ch;
  margin-bottom: .35em;
}
.legal-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-52);
  margin: 0 0 2.4em;
}

.legal-summary {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 1.6em;
  padding-left: 22px;
  border-left: 3px solid var(--t-critical);
}

.legal-lede { color: var(--ink-70); margin: 0 0 2.6em; }

.legal h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  max-width: none;
  margin: 2.4em 0 .7em;
  padding-top: 1.5em;
  border-top: 1px solid var(--ink-08);
}
.legal h2:first-of-type { margin-top: 2em; }

.legal p { margin: 0 0 1.1em; color: var(--ink-70); }
.legal strong { font-weight: 500; color: var(--ink); }

.legal a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  transition: border-color .15s;
}
.legal a:hover { border-bottom-color: var(--accent); }
.legal .brand, .legal .btn, .legal .topnav a { border-bottom: 0; color: inherit; }
.legal .btn { color: var(--btn-fg); }

.legal-list { margin: 0 0 1.4em; padding: 0; list-style: none; display: grid; gap: .7em; }
.legal-list li { position: relative; padding-left: 26px; color: var(--ink-70); }
.legal-list li::before {
  content: "";
  position: absolute; left: 2px; top: .62em;
  width: 8px; height: 2px; border-radius: 2px;
  background: var(--t-subtle);
}

.legal-defs { margin: 0 0 1.4em; }
.legal-defs dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.012em;
  color: var(--ink);
  margin-top: 1.3em;
}
.legal-defs dd { margin: .35em 0 0; color: var(--ink-70); }

.legal .path { margin: 0 0 1.4em; }
.legal code { color: var(--accent); }
.legal .path code { color: var(--accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--dim-2); color: var(--on-dim-60); padding: 44px 0; }
.foot-in { display: flex; align-items: center; gap: 24px 34px; flex-wrap: wrap; }
.foot .brand-word { color: #fff; }
.foot .bm-track { stroke: rgba(255,255,255,.2); }
.foot .bm-tick { stroke: #fff; }
.foot-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-nav a { font-family: var(--display); font-size: .9rem; text-decoration: none; color: var(--on-dim-60); transition: color .15s; }
.foot-nav a:hover { color: var(--mint); }
.foot-note { width: 100%; margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em; color: rgba(231,241,240,.55); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}