/* Fade: fade.email
   Palette sampled from the App Store screenshots and the app icon so the page and the
   store listing read as one product. Accent is locked to the brand green in CLAUDE.md. */

:root {
  --paper:        #F2EEE7;
  --paper-2:      #E9E4DD;
  --card:         #FFFFFF;
  --ink:          #0B0D0B;
  --ink-2:        #4A4F49;
  --ink-3:        #7C8179;
  --line:         rgba(11, 13, 11, 0.10);
  --line-2:       rgba(11, 13, 11, 0.06);
  --brand:        #1DB954;
  --brand-deep:   #17853E;
  --bloom:        #AFD5B5;
  --night:        #080A08;
  --night-2:      #12361D;
  --night-ink:    #F2EEE7;
  --night-ink-2:  #9AA398;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI Variable Display", "Segoe UI", Inter, Roboto, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono",
          "Roboto Mono", monospace;

  --wrap: 1120px;
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --shadow: 0 1px 2px rgba(11,13,11,.04), 0 8px 24px -12px rgba(11,13,11,.14);
  --shadow-lift: 0 2px 4px rgba(11,13,11,.05), 0 18px 40px -18px rgba(11,13,11,.22);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2.5px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 12px; color: var(--paper); }

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

/* ---------- type ---------- */

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
h1 { font-size: clamp(2.6rem, 7.6vw, 4.9rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -0.024em; line-height: 1.18; }
p  { margin: 0 0 1.1em; }

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-deep); margin: 0 0 14px;
}
.lede { font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.5; color: var(--ink-2); max-width: 56ch; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---------- header ---------- */

.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.hdr.stuck { border-bottom-color: var(--line-2); }
.hdr .wrap { display: flex; align-items: center; gap: 20px; height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.06rem;
  letter-spacing: -0.03em; color: var(--ink); text-decoration: none; flex: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 1px 3px rgba(11,13,11,.2); }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: var(--ink-2); text-decoration: none; font-size: .93rem; font-weight: 550;
  padding: 7px 12px; border-radius: 999px; transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: rgba(11,13,11,.05); color: var(--ink); }
/* With the nav hidden there is no auto margin left to push the CTA over, so give it one. */
@media (max-width: 840px) {
  .nav { display: none; }
  .hdr .wrap > .btn { margin-left: auto; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font: inherit; font-weight: 600; letter-spacing: -0.015em;
  padding: 13px 24px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .16s cubic-bezier(.32,.72,0,1), background .16s ease, box-shadow .16s ease;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(11,13,11,.12), 0 10px 22px -12px rgba(29,185,84,.8); }
.btn-primary:hover { background: var(--brand-deep); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.72); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-sm { padding: 9px 17px; font-size: .92rem; }

/* App Store badge, drawn inline so the page makes zero third-party requests */
.appstore {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 11px 22px 11px 19px; border-radius: 14px;
  transition: transform .16s cubic-bezier(.32,.72,0,1), background .16s ease;
}
.appstore:hover { background: #1d211d; color: #fff; }
.appstore:active { transform: scale(.97); }
.appstore svg { width: 25px; height: 25px; fill: #fff; flex: none; margin-top: -2px; }
.appstore span { display: block; line-height: 1.12; }
.appstore .as-sm { font-size: .66rem; letter-spacing: .04em; opacity: .82; }
.appstore .as-lg { font-size: 1.16rem; font-weight: 600; letter-spacing: -0.028em; }

/* ---------- sections ---------- */

.sec { padding: clamp(64px, 9vw, 116px) 0; position: relative; }
.sec-head { max-width: 60ch; margin-bottom: clamp(34px, 5vw, 54px); }
.sec-head p { margin-bottom: 0; }
.sec-head h2 { margin-bottom: 16px; }

.rule { height: 1px; background: var(--line-2); border: 0; margin: 0; }

/* ---------- hero ---------- */

.hero { position: relative; padding: clamp(40px, 5.5vw, 76px) 0 clamp(44px, 5.5vw, 72px); overflow: hidden; }
.bloom { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bloom::before, .bloom::after {
  content: ""; position: absolute; border-radius: 50%;
  background: var(--bloom); filter: blur(80px); opacity: .62;
}
.bloom::before { width: 34vw; height: 34vw; max-width: 440px; max-height: 440px; top: -15vw; left: -11vw; }
.bloom::after  { width: 26vw; height: 26vw; max-width: 330px; max-height: 330px; bottom: -13vw; right: -8vw; opacity: .4; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero h1 { margin-bottom: 20px; }
.hero h1 .fade-word { color: var(--brand-deep); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 28px 0 18px; }
.hero-note { font-size: .88rem; color: var(--ink-3); margin: 0; }
.hero-note strong { color: var(--ink-2); font-weight: 600; }

/* signature element: the address that visibly fades */

.demo {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 26px 22px;
  box-shadow: var(--shadow-lift); position: relative;
}
.demo-label { font-size: .69rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.demo-addr { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: clamp(1.22rem, 3.1vw, 1.72rem); font-weight: 600; letter-spacing: -0.035em; word-break: break-all; line-height: 1.25; }
.demo-addr .at { color: var(--brand); }
.demo-meta { display: flex; align-items: center; gap: 8px; font-size: .93rem; color: var(--ink-2); margin-top: 10px; }
.demo-meta .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.demo-meta time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.demo.warn .demo-meta .dot { background: #E8890C; }
.demo.warn .demo-meta time { color: #B26708; }

.demo-track { height: 4px; border-radius: 999px; background: var(--paper-2); margin: 16px 0 18px; overflow: hidden; }
.demo-fill { display: block; height: 100%; width: 100%; border-radius: 999px; background: var(--brand); transform-origin: left center; transition: width 1s linear, background .4s ease; }
.demo.warn .demo-fill { background: #E8890C; }

.demo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.demo-actions .btn { flex: 1 1 auto; padding: 11px 18px; font-size: .95rem; }
.demo-cap { font-size: .78rem; color: var(--ink-3); margin: 14px 0 0; text-align: center; }

/* ---------- fact strip ---------- */

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.facts div { background: var(--paper); padding: 22px 20px; }
.facts dt { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 1.06rem; font-weight: 650; letter-spacing: -0.024em; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* ---------- download ---------- */

.dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(22px, 4vw, 40px); align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow); }
.dl-icon { width: clamp(88px, 13vw, 132px); border-radius: 24px; box-shadow: 0 2px 6px rgba(11,13,11,.12), 0 20px 40px -20px rgba(23,133,62,.55); }
.dl h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 10px; }
.dl .lede { font-size: 1.04rem; margin-bottom: 20px; }
.dl-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dl-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0; margin: 22px 0 0;
  font-size: .88rem; color: var(--ink-3); }
.dl-meta li { display: flex; align-items: center; gap: 7px; }
.dl-meta li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
@media (max-width: 680px) { .dl { grid-template-columns: 1fr; text-align: left; } }

/* ---------- screenshot gallery ---------- */

/* Horizontal rail. It lives inside .wrap so the first card lines up with every other
   section, and the small negative margin only exists so card shadows are not clipped
   by the scroll container. */
.shots {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(228px, 262px);
  gap: 20px; overflow-x: auto;
  padding: 6px 14px 26px; margin-inline: -14px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.shots::-webkit-scrollbar { height: 7px; }
.shots::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.shot { scroll-snap-align: start; margin: 0; }
.shot picture { display: block; }
.shot img { width: 100%; border-radius: var(--r); border: 1px solid var(--line-2); box-shadow: var(--shadow); background: var(--paper-2); }
.shot figcaption { margin-top: 13px; font-size: .92rem; color: var(--ink-2); line-height: 1.4; }
.shot b { display: block; color: var(--ink); font-weight: 650; letter-spacing: -0.02em; }

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 32px); counter-reset: step; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--ink); counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono); font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  color: var(--brand-deep); position: absolute; top: -2px; left: 0;
  background: var(--paper); padding-right: 12px; transform: translateY(-50%);
  border-top: 2px solid var(--brand); padding-top: 0;
}
.step h3 { margin: 0 0 10px; }
.step p { color: var(--ink-2); margin: 0; font-size: .98rem; }

/* ---------- feature list ---------- */

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.feat { background: var(--paper); padding: 26px 24px; }
.feat h3 { font-size: 1.06rem; margin-bottom: 8px; }
.feat p { margin: 0; font-size: .95rem; color: var(--ink-2); line-height: 1.55; }
.feat .tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-deep); background: rgba(29,185,84,.11);
  padding: 3px 8px; border-radius: 5px; margin-bottom: 10px; }
.feat .tag.pro { color: #8A6A15; background: rgba(232,168,12,.14); }

/* ---------- guides ---------- */

.guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.guide {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px 22px 22px; text-decoration: none; color: var(--ink);
  transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .18s ease, border-color .18s ease;
}
.guide:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: rgba(29,185,84,.4); color: var(--ink); }
.guide .kicker { font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.guide h3 { font-size: 1.1rem; }
.guide p { margin: 0; font-size: .93rem; color: var(--ink-2); line-height: 1.5; }
.guide .more { margin-top: auto; padding-top: 12px; font-size: .89rem; font-weight: 600; color: var(--brand-deep); }
.guide .more::after { content: " \2192"; }

/* ---------- faq ---------- */

.faq { border-top: 1px solid var(--line); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: clamp(1.02rem, 1.9vw, 1.18rem); font-weight: 650; letter-spacing: -0.024em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2.2px solid var(--ink-3); border-bottom: 2.2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .22s cubic-bezier(.32,.72,0,1);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq summary:hover { color: var(--brand-deep); }
.faq .answer { padding: 0 0 24px; max-width: 68ch; }
.faq .answer p { color: var(--ink-2); margin-bottom: .9em; }
.faq .answer a.learn { font-weight: 600; }

/* ---------- dark cta ---------- */

.night { background: var(--night); color: var(--night-ink); position: relative; overflow: hidden; }
.night::before, .night::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--night-2);
  filter: blur(110px); opacity: .9; pointer-events: none;
}
.night::before { width: 44vw; height: 44vw; max-width: 560px; max-height: 560px; top: -18vw; left: -12vw; }
.night::after  { width: 34vw; height: 34vw; max-width: 440px; max-height: 440px; bottom: -16vw; right: -10vw; opacity: .7; }
.night .wrap { position: relative; z-index: 1; }
.night h2 { max-width: 16ch; margin-bottom: 20px; }
.night .lede { color: var(--night-ink-2); }
.night .eyebrow { color: var(--brand); }
.night .appstore { background: var(--paper); color: var(--night); }
.night .appstore:hover { background: #fff; color: var(--night); }
.night .appstore svg { fill: var(--night); }
.night a { color: var(--brand); }

/* ---------- footer ---------- */

.ftr { background: var(--night); color: var(--night-ink-2); padding: 56px 0 44px; font-size: .92rem; }
.ftr a { color: var(--night-ink-2); text-decoration: none; }
.ftr a:hover { color: var(--paper); text-decoration: underline; }
.ftr-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 34px 24px; }
@media (max-width: 800px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .ftr-grid { grid-template-columns: 1fr; } }
.ftr h4 { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: #6E766C; margin-bottom: 14px; font-weight: 700; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ftr .brand { color: var(--paper); }
.ftr .blurb { margin: 14px 0 0; max-width: 34ch; line-height: 1.55; color: #6E766C; }
.ftr-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(242,238,231,.1);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: #6E766C; font-size: .85rem; }

/* ---------- article / guide pages ---------- */

.crumbs { font-size: .85rem; color: var(--ink-3); padding: 26px 0 0; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand-deep); text-decoration: underline; }
.crumbs span { padding: 0 7px; opacity: .5; }

.art-head { padding: 22px 0 clamp(30px, 5vw, 48px); position: relative; }
.art-head h1 { font-size: clamp(2.05rem, 5.2vw, 3.5rem); margin-bottom: 18px; }
.art-meta { font-size: .86rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 22px; }

.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(32px, 5vw, 64px); align-items: start;
  padding-bottom: clamp(56px, 8vw, 96px); }
@media (max-width: 940px) { .art-layout { grid-template-columns: 1fr; } }

.prose { max-width: 68ch; font-size: 1.06rem; }
.prose h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin: 2.2em 0 .7em; scroll-margin-top: 80px; }
.prose h3 { font-size: 1.16rem; margin: 1.9em 0 .5em; }
.prose > :first-child { margin-top: 0; }
.prose p { color: #23271F; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; color: #23271F; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--brand-deep); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose code { font-family: var(--mono); font-size: .9em; background: rgba(11,13,11,.055); padding: .16em .4em; border-radius: 5px; }
.prose blockquote { margin: 1.6em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--brand);
  color: var(--ink-2); font-size: 1.04rem; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 650; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.prose tr:last-child td { border-bottom: 0; }

.steps-list { counter-reset: s; list-style: none; padding: 0; margin: 1.4em 0 1.8em; }
.steps-list li { counter-increment: s; position: relative; padding-left: 46px; margin-bottom: 20px; }
.steps-list li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: .88rem; font-weight: 700;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.steps-list strong { display: block; margin-bottom: 2px; }

.callout {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r-sm); padding: 20px 22px; margin: 1.8em 0; font-size: 1rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { margin: 0 0 8px; font-size: 1.02rem; }

.tocbox, .sidecta {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.side { position: sticky; top: 82px; }
@media (max-width: 940px) { .side { position: static; } }
.tocbox h2, .sidecta h2 { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; font-weight: 700; }
.tocbox ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: t; }
.tocbox a { font-size: .93rem; color: var(--ink-2); text-decoration: none; line-height: 1.35; display: block; }
.tocbox a:hover { color: var(--brand-deep); }
.sidecta img { width: 64px; border-radius: 15px; box-shadow: 0 2px 5px rgba(11,13,11,.12); margin-bottom: 14px; }
.sidecta h3 { font-size: 1.06rem; margin-bottom: 6px; }
.sidecta p { font-size: .91rem; color: var(--ink-2); margin-bottom: 16px; }
.sidecta .appstore { width: 100%; }

.related { border-top: 1px solid var(--line); padding-top: 30px; margin-top: 48px; }
.related h2 { font-size: 1.25rem; margin-bottom: 18px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.related-grid a { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 16px 18px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .96rem;
  letter-spacing: -0.02em; line-height: 1.35; transition: border-color .16s ease, transform .16s ease; }
.related-grid a:hover { border-color: rgba(29,185,84,.45); transform: translateY(-2px); color: var(--ink); }

/* ---------- motion ---------- */

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