/* My Ntentions landing page
   Built from the Figma design "Landing" (1440px desktop). Measurements in px come straight
   from the design; below 1280px the layout adapts (no mobile design exists yet). */

/* ---------- Fonts ---------- */
/* Fallbacks sized to the web fonts, so the page barely moves when Cormorant and Jakarta arrive */
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"); size-adjust: 75.6%; }
@font-face { font-family: "Jakarta Fallback"; src: local("Arial"); size-adjust: 103.9%; }

/* ---------- Tokens ---------- */
:root {
  --font-sans: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;

  --c-title: #271e4a;        /* yu-text-title */
  --c-heading: #241a4d;
  --c-paragraph: #726b8f;    /* yu-text-paragraph */
  --c-sub: #5c4f85;
  --c-link: #7652d3;         /* yu-text-link */
  --c-badge-ink: #120f1f;
  --c-lavender-500: #ede6f8;
  --c-lavender-10: #f2eefa;
  --c-divider: #e5e3ec;      /* yu-neutral-10 */

  --g-mint: linear-gradient(90deg, #8fe0cf, #4fbfae);
  --g-coral: linear-gradient(90deg, #f6b8a2, #ee8b78);
  --shadow-cta: 0 8px 16px -2px rgba(79, 191, 174, .35);

  /* The Figma page is one gradient over 9403px; split per section so it survives any height. */
  --bg-hero: linear-gradient(180deg, #1f1747 0%, #3b2e7d 81.7%, #352972 100%);
  --bg-how: linear-gradient(180deg, #352972 0%, #2b2161 32.2%, #33266e 57.7%, #45338a 88%, #4c3994 100%);
  --bg-areas: linear-gradient(180deg, #4c3994 0%, #5742a3 14.1%, #7057bf 37.5%, #9478d4 57.7%, #b89ee3 78%, #d6c4f0 94.6%, #ddcdf2 100%);
  --bg-pricing: linear-gradient(180deg, #ddcdf2 0%, #ebe0f7 14.3%, #f4edfb 36.2%, #f5eefb 100%);
  --bg-reviews: linear-gradient(180deg, #f5eefb 0%, #f5f0fb 100%);
  --bg-about: linear-gradient(180deg, #f5f0fb 0%, #f6f1fb 87.1%, #ede5f7 98.1%, #e9e0f5 100%);
  --bg-faq: linear-gradient(180deg, #e9e0f5 0%, #d6c7ed 9.7%, #b8a1e3 22.1%, #947ad1 37.1%, #6e57b2 51.1%, #4d3b91 65.2%, #332670 79.3%, #261c5c 93.4%, #241a52 100%);
  --bg-closing: linear-gradient(180deg, #241a52 0%, #1f1747 100%);

  --container: 1296px;
  --gutter: 72px;
  --header-h: 80px;

  /* Motion: slow, settling curves (see "Motion" at the end) */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --reveal-dur: .95s;
  --reveal-y: 28px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
main > section[id] { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--c-title);
  background: #1f1747;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
p { text-wrap: pretty; } /* no lone last words */
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* two-tone ring (white over dark) so focus shows on the night sky and on the lavender sections alike */
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #241a4d; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: 12px; background: #fff; color: var(--c-title); font-weight: 700;
}
.skip-link:focus { top: 16px; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Layering: section backgrounds sit at z -2, decorations at z -1, content above.
   Decorations may overflow into the next section, as they do in the design. */
main { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
main > section, .closing { position: relative; }
main > section::before, .closing::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
}
.deco { position: absolute; z-index: -1; pointer-events: none; max-width: none; }
.deco--glow {
  --r: calc(var(--d) / 2);
  left: calc(50% - 720px + var(--x) - 200px);
  top: calc(var(--y) - 200px);
  width: calc(var(--d) + 400px);
  height: calc(var(--d) + 400px);
  /* a disc blurred by Figma's 200px layer blur (Gaussian σ≈100px) */
  background: radial-gradient(circle closest-side,
    rgb(var(--c) / var(--a)) calc(var(--r) - 200px),
    rgb(var(--c) / calc(var(--a) * .84)) calc(var(--r) - 100px),
    rgb(var(--c) / calc(var(--a) * .5)) var(--r),
    rgb(var(--c) / calc(var(--a) * .16)) calc(var(--r) + 100px),
    rgb(var(--c) / 0) calc(var(--r) + 200px));
}
.deco--rings { width: 720px; height: 720px; }

.br-desktop { display: inline; }
.nowrap { white-space: nowrap; }

/* ---------- Shared pieces ---------- */
.pill {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border: 1px solid; border-radius: 999px;
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; max-width: 100%;
}
.pill--dark { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: rgba(255, 255, 255, .8); }
.pill--light { background: rgba(255, 255, 255, .4); border-color: rgba(255, 255, 255, .8); color: var(--c-paragraph); }
.pill--faq { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .9); color: var(--c-sub); }
.hero .pill { color: rgba(255, 255, 255, .95); }
.areas .pill { border-color: rgba(255, 255, 255, .35); }
.reviews .pill { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .9); }
.pill--eyebrow { background: rgba(255, 255, 255, .14); border: 0; padding: 7px 16px 7px 14px; color: rgba(255, 255, 255, .85); }

.section-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.h2 {
  font-family: var(--font-serif); font-weight: 600; font-size: 56px; line-height: 1.05;
  color: var(--c-heading); letter-spacing: 0;
}
.h2--light { color: #fff; }
.section-lead { max-width: 640px; font-size: 18px; line-height: 24px; text-wrap: balance; }
.section-lead--light { color: rgba(255, 255, 255, .8); }
.section-lead--purple { color: var(--c-sub); line-height: 28px; }

.store-row { display: flex; justify-content: center; gap: 14px; }
.store-row--wide { gap: 18px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 10px 22px 10px 18px; border-radius: 14px; background: #fff; color: var(--c-badge-ink);
}
.store-badge img { width: 20px; height: 24px; flex: none; }
.store-badge img[src$="google-play.svg"] { width: 21px; }
.store-badge__text { display: flex; flex-direction: column; line-height: normal; white-space: nowrap; }
.store-badge__small { font-size: 11px; font-weight: 500; }
.store-badge__big { font-size: 18px; font-weight: 700; }
/* the scrolled header carries the badges at 84.2% */
.store-badge--sm { gap: 8.42px; padding: 8.42px 18.53px 8.42px 15.16px; border-radius: 11.79px; }
.store-badge--sm img { width: 16.84px; height: 20.21px; }
.store-badge--sm img[src$="google-play.svg"] { width: 17.68px; }
.store-badge--sm .store-badge__small { font-size: 9.26px; }
.store-badge--sm .store-badge__big { font-size: 15.16px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 56px; padding: 8px 40px; border-radius: 40px;
  font-size: 16px; line-height: 24px; font-weight: 700; color: #fff; white-space: nowrap;
}
.btn--mint { background: var(--g-mint); box-shadow: var(--shadow-cta); }
.btn--mint:focus-visible { box-shadow: 0 0 0 6px #241a4d, var(--shadow-cta); }
.btn img { width: 16px; height: 16px; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; }
.site-header__bar {
  position: relative; height: var(--header-h); display: flex; align-items: center; padding: 0 24px;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled .site-header__bar {
  background: url(assets/bg/stars-header.svg) top center / 1440px 80px no-repeat, rgba(36, 26, 82, .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .18);
}
.site-header__logo { display: flex; align-items: center; justify-content: center; width: 229px; height: 48px; flex: none; }
.site-header__logo img { width: 229px; height: auto; }
.site-nav__list {
  position: absolute; left: 50%; top: 30.5px; transform: translateX(-50%);
  display: flex; gap: 36px; white-space: nowrap;
  font-size: 16px; line-height: 24px; font-weight: 500; color: #fff;
}
.site-nav__stores {
  position: absolute; right: 24px; top: calc(50% + .5px); transform: translateY(-50%);
  display: flex; gap: 11.79px;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.site-header.is-scrolled .site-nav__stores { opacity: 1; visibility: visible; }
.site-header__stores, .site-header__menu { display: none; }

/* ---------- 01 · Hero ---------- */
.hero::before { background: url(assets/bg/stars-hero.svg) top center / 1440px 1323px repeat-x, var(--bg-hero); }
.hero { padding-top: 137.72px; }
.hero__copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: 24px; }
.hero__title {
  font-family: var(--font-serif); font-weight: 600; font-size: 80px; line-height: 1.09;
  color: #fff; letter-spacing: 0;
}
.hero__mark { /* the stroke paints behind the letters, still above the sky; a dark rim keeps the g legible where it crosses it */
  position: relative; isolation: isolate;
  text-shadow: 0 0 .03em #241a52, 0 0 .03em #241a52, 0 0 .03em #241a52, 0 0 .08em rgba(36, 26, 82, .5);
}
.hero__stroke { /* em and % of the word keep its shape at any size; measuring from the word's middle keeps its gap to the lead, whatever the font */
  position: absolute; z-index: -1; left: -.16em; top: calc(50% + .28em); width: calc(100% + .36em); height: .33em;
  pointer-events: none; filter: drop-shadow(0 0 .04em rgba(255, 217, 191, .35));
  color-scheme: only light; /* Chrome's auto dark mode would turn the gold dark brown */
}
.hero__lead { margin-top: 16px; max-width: 640px; font-size: 18px; line-height: 24px; color: rgba(255, 255, 255, .85); text-wrap: balance; }
.hero__cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero__note { font-size: 14px; line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, .7); }

/* phones, rings and glow share one box: the phones' render bounds in Figma (873.3 x 757.76) */
.hero__visual {
  --w: min(873.3px, 100vw - 48px);
  position: relative; width: var(--w); aspect-ratio: 873.3 / 757.76;
  margin: 27px 0 -2.48px calc((100% - var(--w)) / 2); /* centred even when wider than the screen */
}
.hero__rings { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__rings img { position: absolute; max-width: none; height: auto; }
.hero__glow { left: -14.482%; top: -38.498%; width: 128.963%; }
.hero__ring--1440 { left: -32.446%; top: -52.845%; width: 164.892%; }
.hero__ring--1160 { left: -16.415%; top: -34.37%; width: 132.830%; }
.hero__ring--900 { left: -1.529%; top: -17.214%; width: 103.057%; }
.hero__ring--660 { left: 12.212%; top: -1.378%; width: 75.575%; }
.hero__dot--a { left: 90.925%; top: 6.792%; width: 3.206%; }
.hero__dot--b { left: 2.303%; top: 14.177%; width: 2.977%; }
.hero__dot--c { left: -.692%; top: -11.509%; width: 3.435%; }
.hero__dot--d { left: 81.730%; top: 61.400%; width: 2.863%; }
.hero__dot--e { left: 113.6%; top: 55.663%; width: 2.977%; }
.hero__phone { position: absolute; height: auto; max-width: none; }
.hero__phone--blueprint { left: 0; top: 2.199%; width: 47.693%; }
.hero__phone--people { left: 52.351%; top: 2.704%; width: 47.693%; }
.hero__phone--today { left: 26.299%; top: 0; width: 48.494%; }

/* ---------- 02 · How it works ---------- */
.how::before { background: url(assets/bg/stars-how.svg) top center / 1440px 1178px repeat-x, var(--bg-how); }
.how { padding: 110px 0 144px; }
.how .section-head { gap: 16px; }
.how__steps {
  position: relative; margin-top: 66px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px;
  grid-template-rows: 44px auto auto;
}
.how__steps::before { /* the dashed line from the first marker to the last */
  content: ""; position: absolute; top: 21.25px; height: 1.5px;
  left: calc((100% - 48px) / 6 + 10px); right: calc((100% - 48px) / 6 + 10px);
  background: url(assets/svg/timeline-line.svg) center / 100% 100% no-repeat;
}
.how__step { display: contents; }
.how__marker { grid-row: 1; justify-self: center; align-self: center; position: relative; z-index: 1; max-width: none; }
.how__marker--sparkle { width: 80px; height: 80px; margin: -18px; }
.how__marker--moon { width: 88px; height: 88px; margin: -22px; }
.how__text { grid-row: 2; margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.how__label { font-size: 14px; line-height: 20px; font-weight: 700; color: rgba(255, 255, 255, .7); text-transform: uppercase; }
.how__title { font-size: 24px; line-height: 32px; font-weight: 700; color: #fff; text-wrap: balance; }
.how__desc { max-width: 340px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .8); }
.how__box { grid-row: 3; position: relative; margin-top: 32px; aspect-ratio: 416 / 440; }
.how__box::before { /* the frosted glass behind the exported card */
  content: ""; position: absolute; inset: 0; border-radius: 32px;
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.how__box img { position: absolute; left: -12.019%; top: -6.818%; width: 124.038%; height: auto; max-width: none; }

/* ---------- 03 · The areas ---------- */
.areas::before { background: url(assets/bg/stars-areas.svg) top center / 1440px 1531px repeat-x, var(--bg-areas); }
.areas { padding: 136px 0 112px; }
.deco--rings-areas { left: calc(50% + 232px); top: 1027px; }
.areas .section-head { padding-inline: 28px; }
.tabs {
  position: relative; isolation: isolate;
  display: flex; gap: 6px; width: max-content; max-width: 100%; margin: 48px auto 0; padding: 5px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: rgba(255, 255, 255, .12);
}
.tab {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  width: 164px; height: 56px; border-radius: 999px;
  font-size: 16px; line-height: 24px; font-weight: 500; color: rgba(255, 255, 255, .85);
}
.tab[aria-selected="true"] { background: rgba(255, 255, 255, .96); color: var(--c-title); font-weight: 700; }
/* with JavaScript, one white pill slides from tab to tab instead (main.js places it) */
.tabs__indicator { display: none; }
.tabs.has-indicator .tabs__indicator {
  display: block; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: var(--w); height: var(--h); translate: var(--x) var(--y);
  border-radius: 999px; background: rgba(255, 255, 255, .96);
}
.tabs.has-indicator .tab[aria-selected="true"] { background: transparent; }
.tab__icon {
  width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.tab[aria-selected="true"] .tab__icon { color: var(--c-heading); }

.panel {
  --title-w: 456px; --lead-w: 684px;
  margin-top: 32px; padding: 56px 40px; border: 2px solid #fff; border-radius: 40px;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 20px 50px rgba(26, 15, 77, .18);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
}
.panel[hidden] { display: none; }
.panel--wide { padding-bottom: 40px; }
.panel:focus-visible { box-shadow: 0 0 0 6px #241a4d, 0 20px 50px rgba(26, 15, 77, .18); }
.panel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-inline: 6.5px; }
@media (min-width: 1024px) {
  .panel--small-title .panel__head { min-height: 92px; }
  .panel--small-title .panel__title { align-self: flex-start; }
}
.panel__title {
  flex: 0 1 var(--title-w); max-width: var(--title-w);
  font-family: var(--font-serif); font-weight: 600; font-size: 44px; line-height: 1.05; color: var(--c-heading);
}
.panel--small-title .panel__title { font-size: 40px; }
.panel__lead { flex: 0 1 var(--lead-w); max-width: var(--lead-w); font-size: 18px; line-height: 28px; color: var(--c-paragraph); }
.tiles { margin-top: 40px; display: grid; column-gap: 24px; row-gap: 48px; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { display: flex; flex-direction: column; gap: 16px; }
.tile__media { overflow: hidden; isolation: isolate; border-radius: 28px; } /* clips the screen as it zooms on hover */
.tile__img { width: 100%; height: auto; }
.tile__copy { display: flex; flex-direction: column; gap: 4px; padding-left: 8px; }
.tile__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--c-title); }
.tile__desc { font-size: 16px; line-height: 24px; color: var(--c-paragraph); }
.plus-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px 4px 8px;
  border-radius: 9999px; background: #fff; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--c-link);
}
.plus-pill__icon { width: 12px; height: 12px; background: url(assets/svg/crown-pill.svg) center / contain no-repeat; }

/* ---------- 04 · Free and Plus ---------- */
.pricing::before { background: var(--bg-pricing); }
.pricing { padding: 136px 0 157px; }
.deco--halos { left: calc(50% - 720px); top: 0; width: 1440px; height: auto; }
.pricing .section-head { gap: 16px; }
.pricing .h2 { max-width: 1200px; }
.plans { margin-top: 46px; display: flex; justify-content: center; align-items: stretch; gap: 48px; }
.plan { position: relative; width: 496px; flex: 0 1 496px; border-radius: 40px; }
.plan__name { display: flex; align-items: center; gap: 14px; font-family: var(--font-serif); font-weight: 600; font-size: 56px; line-height: 68px; }
.plan__crown { width: 34px; height: 34px; }
.plan__tagline { margin-top: 2px; padding-bottom: 8px; font-size: 16px; line-height: 24px; font-weight: 500; }
.plan__list { margin-top: 3px; }
.plan__list li {
  position: relative; display: flex; align-items: center; gap: 16px; min-height: 62px;
  font-size: 18px; line-height: 24px; font-weight: 500; text-wrap: balance;
}
.plan__list li + li { margin-top: 4.86px; }
.plan__list li + li::before { content: ""; position: absolute; left: 0; right: 0; top: -2.86px; height: 1px; }
.plan__check { width: 30px; height: 30px; flex: none; border-radius: 15px; display: grid; place-items: center; }
.plan__check::after { content: ""; width: 16px; height: 16px; background: center / contain no-repeat; }

.plan--free {
  padding: 41.5px 42.5px 42.5px;
  border: 1.5px solid rgba(255, 255, 255, .7);
  background: linear-gradient(180deg, #fff, #f0e8fc);
  box-shadow: 0 22px 25px rgba(77, 51, 153, .14);
}
.plan--free .plan__name { color: var(--c-heading); }
.plan--free .plan__tagline { color: var(--c-sub); }
.plan--free .plan__list li { color: var(--c-heading); }
.plan--free .plan__list li + li::before { background: var(--c-divider); }
.plan--free .plan__check { background: var(--c-lavender-500); }
.plan--free .plan__check::after { background-image: url(assets/svg/check-lavender.svg); }

.plan--plus {
  overflow: hidden; display: flex; flex-direction: column;
  padding: 44px 42px 38.28px; /* as tall as the Free card */
  border: 2px solid #ffdb9e;
  background: url(assets/bg/stars-plus-card.svg) -2px -2px / 496px 617px no-repeat, linear-gradient(90deg, #7b6fc4, #2f2a66);
  box-shadow: 0 32px 70px -8px rgba(51, 26, 128, .45);
}
.plan__glow { position: absolute; right: -354px; top: -254px; width: 580px; height: 580px; max-width: none; pointer-events: none; }
.plan--plus .plan__name, .plan--plus .plan__tagline, .plan--plus .plan__list { position: relative; }
.plan--plus .plan__name { color: #fff; }
.plan--plus .plan__tagline { color: rgba(255, 255, 255, .85); }
.plan--plus .plan__list { margin-top: 3.27px; }
.plan--plus .plan__list li { color: #fff; }
.plan--plus .plan__list li + li { margin-top: 4.75px; }
.plan--plus .plan__list li + li::before { top: -2.86px; background: rgba(255, 255, 255, .2); }
.plan--plus .plan__check { background: var(--g-coral); }
.plan--plus .plan__check::after { background-image: url(assets/svg/check-white.svg); }
.pricing__note { margin: 40px auto 0; max-width: 680px; text-align: center; font-size: 14px; line-height: 20px; color: var(--c-paragraph); }

/* ---------- 05 · Reviews ---------- */
.reviews::before { background: var(--bg-reviews); }
.reviews { padding: 110px 0 108px; }
.deco--rings-reviews { left: calc(50% - 720px - 328.83px); top: -413.38px; }
.reviews .section-head { gap: 22px; }
.carousel { margin-top: 46px; --side: min(494px, 50vw - 206px); } /* side cards stay on screen, tucking behind the centre card when narrow */
.carousel__track {
  display: grid; justify-items: center; align-items: center;
  width: 100%; max-width: 1368px; margin-inline: auto;
  touch-action: pan-y pinch-zoom; /* horizontal swipes reach the script */
}
.review {
  grid-area: 1 / 1; position: relative;
  width: 380px; min-height: 308px;
  display: flex; flex-direction: column;
  padding: 32.5px 22.5px 30.5px 30.5px;
  border: 1.5px solid #dbd1f7; border-radius: 32px;
  background: linear-gradient(180deg, #fff, #f2ebfc);
  box-shadow: 0 18px 40px -10px rgba(77, 51, 153, .14);
  opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease-out), translate .5s var(--ease-out), opacity .5s ease, width .5s ease, min-height .5s ease, padding .5s ease, border-radius .5s ease, box-shadow .5s ease, visibility .5s;
}
.review[data-pos="prev"] { opacity: .7; visibility: visible; transform: translateX(calc(-1 * var(--side))); cursor: pointer; }
.review[data-pos="next"] { opacity: .7; visibility: visible; transform: translateX(var(--side)); cursor: pointer; }
.review[data-pos="out-prev"] { transform: translateX(calc(-1 * var(--side) - 420px)); }
.review[data-pos="out-next"] { transform: translateX(calc(var(--side) + 420px)); }
.review[data-pos="center"] {
  z-index: 2; opacity: 1; visibility: visible;
  width: 560px; min-height: 380px; padding: 42.5px 38.5px 38.5px;
  border-color: #fff; border-radius: 40px;
  box-shadow: 0 28px 60px -10px rgba(77, 51, 153, .26);
}
.review__stars { display: flex; gap: 1.6px; }
.review__stars i { width: 16px; height: 16px; background: url(assets/svg/star-filled-sm.svg) center / contain no-repeat; transition: width .5s ease, height .5s ease; }
.review[data-pos="center"] .review__stars { gap: 2px; }
.review[data-pos="center"] .review__stars i { width: 20px; height: 20px; background-image: url(assets/svg/star-filled-lg.svg); }
.review__quote { margin: 30px 0 24px; font-size: 18px; line-height: 24px; color: var(--c-title); transition: font-size .5s ease, line-height .5s ease, margin .5s ease; }
.review[data-pos="center"] .review__quote { margin: 32px 0 27px; font-size: 28px; line-height: 40px; }
@media (min-width: 1101px) { /* keep the three-card row tidy: about 130 characters fit the featured card */
  .review__quote { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 5; }
  .review[data-pos="center"] .review__quote { -webkit-line-clamp: 4; }
}
.review__person { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review__avatar {
  width: 40px; height: 40px; flex: none; border-radius: 20px; display: grid; place-items: center;
  background: var(--avatar); color: #fff; font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 26px;
}
.review__person p { display: flex; flex-direction: column; gap: 1px; }
.review__name { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--c-title); }
.review__place { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--c-paragraph); }
.review[data-pos="center"] .review__name { font-size: 18px; }
.review[data-pos="center"] .review__place { font-size: 16px; line-height: 24px; font-weight: 400; }
.carousel__controls { margin-top: 64px; display: flex; justify-content: center; gap: 16px; }
.carousel__btn {
  width: 56px; height: 56px; border-radius: 9999px; display: grid; place-items: center;
  filter: drop-shadow(0 6px 8px rgba(77, 51, 153, .2));
}
.carousel__btn::after { content: ""; width: 24px; height: 24px; background: center / contain no-repeat; }
.carousel__btn--prev { background: rgba(255, 255, 255, .85); border: 1.5px solid #fff; }
.carousel__btn--prev::after { background-image: url(assets/svg/arrow-left.svg); }
.carousel__btn--next { background: linear-gradient(90deg, #8061e5, #a875eb); }
.carousel__btn--next::after { background-image: url(assets/svg/arrow-right-white.svg); }

/* ---------- 06 · About Niza ---------- */
.about::before { background: var(--bg-about); }
.about { padding: 100px 0 160px; }
.niza {
  position: relative; overflow: hidden; isolation: isolate;
  /* intro: heading, quote and button beside her photo, then the three columns (on small screens the button comes last) */
  display: grid; grid-template-columns: minmax(0, 591fr) minmax(0, 537fr); column-gap: 56px;
  grid-template-rows: auto minmax(40px, 1fr) auto auto auto;
  grid-template-areas: "head photo" ". photo" "quote photo" "foot photo" "cols cols";
  padding: 56px; border-radius: 48px;
  background: url(assets/bg/stars-about-card.svg) 0 0 / 1296px 660px repeat-y, linear-gradient(145.82deg, #211a52 0%, #664dbd 71.43%);
  box-shadow: 0 18px 40px -10px rgba(77, 51, 153, .35);
  color: #fff;
}
.niza__glow { position: absolute; z-index: -1; right: -288px; top: -376px; width: 740px; height: 740px; max-width: none; pointer-events: none; }
.niza__head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.niza__title { line-height: 1; max-width: 907px; text-wrap: balance; }
/* her photo keeps its own proportions unless the text beside it is taller */
.niza__photo { grid-area: photo; position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; box-shadow: 0 24px 48px -20px rgba(12, 7, 43, .6); }
.niza__photo::before { content: ""; display: block; padding-top: 69.5%; } /* 1200 x 834 */
.niza__photo::after { content: ""; position: absolute; inset: 0; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: inherit; pointer-events: none; }
.niza__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.niza__cols { grid-area: cols; margin-top: 62px; display: grid; grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: space-between; column-gap: 40px; }
.niza__label {
  display: flex; align-items: center; gap: 12px; padding-bottom: 17px; margin-bottom: 17px;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  font-size: 14px; line-height: 20px; font-weight: 700; color: rgba(255, 255, 255, .8);
}
.niza__badge { width: 40px; height: 40px; flex: none; border-radius: 20px; display: grid; place-items: center; background: var(--badge); }
.niza__badge img { width: 20px; height: 20px; }
.niza__text { font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .86); }
.niza__foot { grid-area: foot; margin-top: 24px; display: flex; }
.niza__quote {
  grid-area: quote;
  position: relative; max-width: 591px; min-height: 110px;
  padding: 22.5px 30px 25.5px 69px;
  border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 28px; background: rgba(255, 255, 255, .1);
}
.niza__quote-mark { position: absolute; left: 21px; top: 21px; width: 32.98px; height: 32.98px; }
.niza__quote blockquote { font-family: var(--font-serif); font-weight: 700; font-style: italic; font-size: 28px; line-height: 29px; color: rgba(255, 255, 255, .95); }
.niza__quote figcaption { margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, .7); }
.niza__cta { flex: none; }

.credentials { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.credentials__title { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--c-paragraph); text-transform: uppercase; }
.credentials__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: min(1340px, 100vw - 32px); flex: none; }
.credential {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 10px 16px;
  border: 2px solid #fff; border-radius: 999px; background: rgba(255, 255, 255, .85);
  box-shadow: 0 18px 20px rgba(77, 51, 153, .08);
  font-size: 14px; line-height: 20px;
}
.credential__name { font-weight: 700; color: var(--c-title); }
.credential__year { font-weight: 500; color: var(--c-link); }

/* ---------- 07 · FAQ ---------- */
.faq::before { background: var(--bg-faq); }
.faq { padding: 110px 0 124px; }
.faq .section-head { gap: 20px; }
.faq__list { width: 880px; max-width: 100%; margin: 56px auto 0; display: flex; flex-direction: column; gap: 14px; }
.faq__item {
  border: 1.5px solid #fff; border-radius: 26px; background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 15px rgba(77, 51, 153, .12);
}
/* main.js adds .is-closing while an answer folds away, so the closed look applies straight away */
.faq__item[open]:not(.is-closing) {
  margin-bottom: 4px;
  border-width: 2px; background: linear-gradient(180deg, #fff, #f2ebfc);
}
.faq__item.is-animating { overflow: hidden; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 24px 24px 28px; cursor: pointer; list-style: none;
  font-size: 18px; line-height: 24px; font-weight: 700; color: var(--c-title);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__item[open]:not(.is-closing) .faq__q { padding: 24px 24px 0 28px; }
.faq__icon {
  position: relative; width: 32px; height: 32px; flex: none; border-radius: 16px;
  background-color: var(--c-lavender-10); color: var(--c-link);
}
.faq__icon::before { /* the purple fill, grown from the centre when the answer opens */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #9e80f5, #664dd1); scale: 0;
}
.faq__plus, .faq__icon::after { /* the plus as the minus artwork twice; the upright copy turns and shrinks away to leave a minus */
  position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url(assets/svg/faq-minus.svg) center / contain no-repeat; mask: url(assets/svg/faq-minus.svg) center / contain no-repeat;
}
.faq__icon::after { content: ""; rotate: 90deg; }
.faq__item[open]:not(.is-closing) .faq__icon { background-color: transparent; color: #fff; }
.faq__item[open]:not(.is-closing) .faq__icon::before { scale: 1; }
.faq__item[open]:not(.is-closing) .faq__icon::after { rotate: 180deg; scale: 0 1; }
@supports selector(:has(*)) {
  .faq__q:focus-visible { outline: none; box-shadow: none; }
  .faq__item:has(> .faq__q:focus-visible) { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #241a4d, 0 12px 15px rgba(77, 51, 153, .12); }
}
.faq__a { padding: 12px 76px 24px 28px; font-size: 16px; line-height: 24px; color: var(--c-paragraph); }

/* ---------- 08 · Download + footer ---------- */
.closing::before { background: url(assets/bg/stars-download.svg) top center / 1440px 1180px repeat-x, var(--bg-closing); }
.download { position: relative; padding-bottom: 103.43px; }
.moon {
  position: absolute; left: 50%; top: 0; width: 1440px; height: 420px; margin-left: -720px;
  pointer-events: none; transform-origin: 50% 0;
}
.moon img { position: absolute; max-width: none; }
.moon__halo { left: 511.92px; top: 33.15px; width: 416.17px; height: 416.17px; }
.moon__orbit { left: 465.92px; top: -12.84px; width: 508.16px; height: 508.16px; } /* the 30% layer opacity is baked into the asset */
.moon__full { left: 408.96px; top: -69.81px; width: 622.1px; height: 622.1px; }
.moon__day { left: calc(var(--x) * 1px - 24.094px); top: calc(var(--y) * 1px - 24.094px); width: 74.472px; height: 74.472px; }
.moon__day--skipped { left: calc(var(--x) * 1px); top: calc(var(--y) * 1px); width: 26.284px; height: 26.284px; }
.moon__day15 { left: 891.856px; top: 320.096px; width: 96.376px; height: 96.376px; }
.moon__spark { left: 929.09px; top: 357.33px; width: 21.904px; height: 21.904px; }
.download__copy { position: relative; padding-top: 562px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.download__title { font-family: var(--font-serif); font-weight: 600; font-size: 84px; line-height: 1.05; color: #fff; }
.download__lead { margin-top: 13.8px; max-width: 760px; font-size: 19.5px; line-height: 30px; color: rgba(255, 255, 255, .84); text-wrap: balance; }
.download .store-row { margin-top: 40px; }
.site-footer { background: url(assets/bg/stars-download.svg) center bottom / 1440px 1180px repeat-x, #1f1747; }
.site-footer__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 37px 0 63.57px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.site-footer__logo { display: flex; align-items: center; justify-content: center; width: 229px; height: 48px; flex: none; }
.site-footer__logo img { width: 229px; height: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 14.5px; line-height: normal; font-weight: 500; color: rgba(255, 255, 255, .85); }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }

/* =========================================================
   Responsive
   ========================================================= */

/* Below the design width, keep headings balanced */
@media (max-width: 1279px) {
  h1, h2, h3, h4 { text-wrap: balance; }
}

/* Laptop: same layouts, tighter gutters */
@media (max-width: 1360px) {
  :root { --gutter: 40px; }
}

/* Small laptop / tablet landscape */
@media (max-width: 1180px) {
  .site-nav__list { gap: 28px; }
  .site-header__logo, .site-header__logo img { width: 192px; } /* the tablet size, so the logo stays clear of the centred nav */
  .tab { width: auto; padding: 0 22px; }
  .panel__title { font-size: 40px; }
  .panel--small-title .panel__title { font-size: 36px; }
  .niza__title { font-size: 50px; } /* keeps "behind the method" on one line beside the photo */
}

/* The scrolled header has no room for the store badges next to the nav below this width */
@media (max-width: 1199px) and (min-width: 1024px) {
  .site-header.is-scrolled .site-nav__stores { opacity: 0; visibility: hidden; }
}

/* Reviews: one card at a time once the side cards would crowd the centre */
@media (max-width: 1100px) {
  .carousel__track { max-width: 560px; width: calc(100% - 2 * var(--gutter)); }
  /* every card takes the featured style, so the shared cell is sized by the longest quote and the arrows never jump */
  .review, .review[data-pos] { width: 100%; min-height: 0; padding: 36px 32px 40px; border-color: #fff; border-radius: 40px; box-shadow: 0 28px 60px -10px rgba(77, 51, 153, .26); transform: none; cursor: auto; }
  .review[data-pos="prev"], .review[data-pos="next"], .review[data-pos="out-prev"], .review[data-pos="out-next"] { opacity: 0; visibility: hidden; }
  .review[data-pos] .review__quote { margin: 32px 0; font-size: 24px; line-height: 34px; }
  .review[data-pos] .review__stars { gap: 2px; }
  .review[data-pos] .review__stars i { width: 20px; height: 20px; background-image: url(assets/svg/star-filled-lg.svg); }
  .review[data-pos] .review__name { font-size: 18px; }
  .review[data-pos] .review__place { font-size: 16px; line-height: 24px; font-weight: 400; }
  .carousel__controls { margin-top: 40px; }
}

/* Tablet: menu button, stacked heads, two-column grids */
@media (max-width: 1023px) {
  :root { --gutter: 32px; --header-h: 72px; }
  .site-header__bar { padding: 0 16px 0 20px; }
  /* narrows with the bar, keeping 12px clear of the store icons; 100% is the bar's inner width, which unlike 100vw leaves out a desktop scrollbar */
  .site-header__logo { width: min(192px, 100% - 160px); height: 44px; }
  .site-header__logo img { width: 100%; }
  /* the two stores as icons beside the menu button, so the app is one tap away on any screen */
  .site-header__stores { display: flex; gap: 8px; margin-left: auto; }
  .store-icon, .site-header__menu {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 22px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
  }
  .store-icon__glyph {
    width: 20px; height: 20px; background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  }
  .site-header__menu { margin-left: 8px; }
  .site-header__menu-icon, .site-header__menu-icon::before, .site-header__menu-icon::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s ease, opacity .25s ease;
  }
  .site-header__menu-icon { position: relative; }
  .site-header__menu-icon::before, .site-header__menu-icon::after { content: ""; position: absolute; left: 0; }
  .site-header__menu-icon::before { top: -6px; }
  .site-header__menu-icon::after { top: 6px; }
  .site-header.is-open .site-header__menu-icon { background: transparent; }
  .site-header.is-open .site-header__menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .site-header.is-open .site-header__menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
  .site-header.is-open .site-header__bar {
    background: rgba(36, 26, 82, .92); border-bottom-color: rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: 8px 24px 28px; background: rgba(36, 26, 82, .96); border-bottom: 1px solid rgba(255, 255, 255, .18);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
    overflow-y: auto; overscroll-behavior: contain;
    display: none;
  }
  .site-header.is-open .site-nav { display: block; }
  .site-nav__list { position: static; transform: none; flex-direction: column; gap: 0; font-size: 18px; }
  .site-nav__list a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .site-nav__stores { position: static; transform: none; opacity: 1; visibility: visible; margin-top: 24px; gap: 12px; flex-wrap: wrap; }
  .site-nav__stores .store-badge--sm { gap: 10px; padding: 10px 22px 10px 18px; border-radius: 14px; }
  .site-nav__stores .store-badge--sm img { width: 20px; height: 24px; }
  .site-nav__stores .store-badge--sm img[src$="google-play.svg"] { width: 21px; }
  .site-nav__stores .store-badge--sm .store-badge__small { font-size: 11px; }
  .site-nav__stores .store-badge--sm .store-badge__big { font-size: 18px; }

  .hero { padding-top: 120px; }
  .hero__title { font-size: 64px; }
  .h2 { font-size: 46px; }

  .how__steps { display: flex; flex-direction: column; gap: 64px; }
  .how__steps::before { display: none; }
  .how__step { display: flex; flex-direction: column; align-items: center; }
  .how__box { width: 100%; max-width: 416px; }

  .areas { padding-top: 112px; }
  .tabs { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 0 16px; height: 50px; }
  .panel, .panel--wide { padding: 40px 28px 36px; border-radius: 32px; }
  .panel__head { flex-direction: column; align-items: flex-start; gap: 14px; padding-inline: 4px; }
  .panel__title, .panel__lead { flex: none; max-width: 640px; }
  .panel__title, .panel--small-title .panel__title { font-size: 36px; }
  .panel__lead { font-size: 17px; line-height: 26px; }
  .tiles { margin-top: 32px; row-gap: 36px; column-gap: 20px; }
  .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile__media { border-radius: 22px; }

  .pricing { padding: 112px 0 120px; }
  .plans { gap: 24px; }
  .plan--free { padding: 34px 28px; }
  .plan--plus { padding: 36px 28px 30px; }
  .plan__name { font-size: 48px; line-height: 60px; }
  .plan__list li { font-size: 16px; min-height: 56px; }

  .about { padding: 80px 0 120px; }
  .niza { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "photo" "quote" "cols" "foot"; padding: 44px 36px; border-radius: 40px; }
  .niza__photo { margin-top: 32px; max-width: 591px; border-radius: 28px; }
  .niza__quote { margin-top: 24px; }
  .niza__cols { margin-top: 44px; grid-template-columns: 1fr; row-gap: 32px; max-width: 560px; }
  .niza__foot { margin-top: 44px; }
  .niza__glow { right: -320px; top: -420px; }

  .reviews { padding: 100px 0; }
  .faq { padding: 100px 0; }
  .download__copy { padding-top: 470px; }
  .download { padding-bottom: 88px; }
  .site-footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .site-footer__links { justify-content: center; gap: 12px 28px; }
  .moon { transform: scale(.82); }
  .download__title { font-size: 64px; }
}

/* Phone */
@media (max-width: 767px) {
  :root { --gutter: 20px; }
  .br-desktop { display: none; }

  .hero { padding-top: 112px; }
  .hero__copy { padding-inline: 20px; }
  .hero__title { font-size: clamp(32px, calc((100vw - 40px) / 7.35), 46px); line-height: 1.06; } /* "Your Life. Aligned" stays on one line from 280px up */
  .hero__lead { font-size: 17px; line-height: 25px; }
  .hero__cta { margin-top: 32px; }
  .store-row { flex-wrap: wrap; gap: 12px; }
  .hero__visual { --w: min(873.3px, 152vw); margin-top: 40px; }

  .h2 { font-size: 38px; line-height: 1.08; }
  .section-lead { font-size: 17px; }

  .how { padding: 88px 0 80px; }
  .how__steps { gap: 56px; margin-top: 48px; }
  .how__text { margin-top: 24px; }
  .how__title { font-size: 22px; line-height: 30px; }
  .how__box { margin-top: 28px; }

  .areas { padding: 88px 0 72px; }
  .deco--rings-areas { left: auto; right: -420px; top: auto; bottom: -260px; }
  .areas .section-head { padding-inline: 0; }
  .tabs { margin-top: 36px; width: auto; max-width: none; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; border-inline: 0; padding: 5px var(--gutter); background: rgba(255, 255, 255, .08); }
  .tab { height: 46px; padding: 0 16px; font-size: 15px; }
  .panel, .panel--wide { margin-top: 24px; padding: 28px 16px 28px; border-radius: 28px; }
  .panel__title, .panel--small-title .panel__title { font-size: 31px; }
  .panel__lead { font-size: 16px; line-height: 25px; }
  .tiles, .tiles--3, .tiles--2 { grid-template-columns: 1fr; row-gap: 28px; margin-top: 28px; }
  .tile { gap: 12px; }
  .tile__media { border-radius: 20px; }
  .tile__title { font-size: 18px; line-height: 26px; }
  .tile__desc { font-size: 15px; line-height: 23px; }

  .pricing { padding: 88px 0 88px; }
  .plans { flex-direction: column; align-items: center; gap: 24px; margin-top: 36px; }
  .plan { width: 100%; flex: none; max-width: 496px; border-radius: 32px; }
  .plan--free { padding: 28px 22px; }
  .plan--plus { padding: 30px 22px 24px; }
  .plan__name { font-size: 44px; line-height: 56px; }
  .plan__list li { font-size: 16px; line-height: 22px; }

  .reviews { padding: 88px 0; }
  .carousel { margin-top: 36px; }
  .review, .review[data-pos] { padding: 28px 24px 32px; border-radius: 32px; }
  .review[data-pos] .review__quote { font-size: 21px; line-height: 30px; }
  .deco--rings-reviews { display: none; }

  .about { padding: 64px 0 96px; }
  .niza { padding: 32px 22px; border-radius: 32px; }
  .niza__title { font-size: 38px; }
  .niza__photo { margin-top: 24px; border-radius: 22px; }
  .niza__photo::before { padding-top: 80%; } /* a closer crop on phones */
  .niza__cols { margin-top: 36px; }
  .niza__foot { margin-top: 40px; }
  .niza__quote { padding: 20px 20px 20px 60px; }
  .niza__quote-mark { left: 16px; top: 18px; width: 30px; height: 30px; }
  .niza__quote blockquote { font-size: 24px; line-height: 28px; }
  .niza__cta { width: 100%; padding: 8px 24px; }
  .credentials { margin-top: 40px; }
  .credential { white-space: normal; border-radius: 22px; }

  .faq { padding: 88px 0; }
  .faq__list { margin-top: 36px; gap: 12px; }
  .faq__q { padding: 20px 18px 20px 20px; font-size: 17px; }
  .faq__item[open]:not(.is-closing) .faq__q { padding: 20px 18px 0 20px; }
  .faq__a { padding: 10px 20px 22px; font-size: 15px; line-height: 23px; }

  .moon { transform: scale(.6); }
  .download__copy { padding-top: 330px; }
  .download__title { font-size: 46px; line-height: 1.08; }
  .download__lead { font-size: 17px; line-height: 26px; }
  .download { padding-bottom: 72px; }
  .site-footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 24px; padding: 32px 0 44px; }
  .site-footer__links { justify-content: center; gap: 0 24px; }
  .pill { white-space: normal; text-align: center; }
}

@media (max-width: 380px) {
  .h2, .niza__title { font-size: 34px; }
  .moon { transform: scale(.52); }
  .download__copy { padding-top: 290px; }
}

@media (max-width: 299px) { /* the narrowest phones, such as a folded Galaxy Fold: a tighter bar keeps the three buttons full size */
  .site-header__bar { padding: 0 12px; }
  .site-header__logo { width: min(104px, 100% - 152px); } /* no wider than at 300px */
  .site-header__stores { gap: 4px; }
  .site-header__menu { margin-left: 4px; }
}

/* Area tabs on tablets and phones: they wait under the header while their panel scrolls past.
   Only for working tabs (main.js adds .can-stick, then .is-stuck for the glass backing), and only where
   main can clip without becoming a scroll container, which would stop the strip from sticking. */
@supports (overflow: clip) {
  @media (max-width: 1023px) {
    .tabs.can-stick { position: sticky; top: calc(var(--header-h) + 8px); z-index: 3; }
    .tabs.is-stuck {
      background-color: rgba(36, 26, 82, .72); border-color: rgba(255, 255, 255, .22); box-shadow: 0 12px 28px -12px rgba(18, 10, 56, .55);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    }
    .tab { scroll-margin-top: -16px; } /* a stuck tab already counts as in view, so focusing it never nudges the page */
    .panel { scroll-margin-top: 64px; } /* clear of the stuck tabs when focused */
  }
  @media (max-width: 767px) {
    .tabs.can-stick { top: var(--header-h); } /* flush with the header, the bar's border between them */
    .tabs.is-stuck { border-top-color: transparent; }
  }
}

/* =========================================================
   Motion
   Slow, settling movement in the spirit of the night sky.
   - Hover effects apply only where a pointer can hover; touch screens get press feedback.
   - Movement sits behind prefers-reduced-motion: no-preference, so reduced motion keeps the page still.
   - Scroll reveals wait for the "js" class set in the <head>: without JavaScript nothing is hidden.
   - Reveals and loops use the translate / scale / rotate properties, which stack with the
     transforms that hover states and the carousel set.
   ========================================================= */

@media (max-width: 767px) {
  :root { --reveal-dur: .8s; --reveal-y: 20px; }
}

/* stagger index for lists that animate item by item */
:is(.tiles > .tile, .plan__list > li, .review__stars > i, .site-nav__list > li):nth-child(2) { --i: 1; }
:is(.tiles > .tile, .plan__list > li, .review__stars > i, .site-nav__list > li):nth-child(3) { --i: 2; }
:is(.tiles > .tile, .plan__list > li, .review__stars > i, .site-nav__list > li):nth-child(4) { --i: 3; }
:is(.tiles > .tile, .plan__list > li, .review__stars > i, .site-nav__list > li):nth-child(5) { --i: 4; }
:is(.tiles > .tile, .plan__list > li):nth-child(6) { --i: 5; }
:is(.tiles > .tile, .plan__list > li):nth-child(7) { --i: 6; }
:is(.tiles > .tile, .plan__list > li):nth-child(8) { --i: 7; }

/* ---------- Press and hover ---------- */
a, button, summary { -webkit-tap-highlight-color: transparent; }

.site-nav__list a, .site-footer__links a { position: relative; transition: color .2s ease; }
.site-nav__list a::after, .site-footer__links a::after { /* underline drawn in on hover */
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px; border-radius: 1px;
  background: currentColor; scale: 0 1; transition: scale .45s var(--ease-out-expo);
}
.site-nav__list a.is-current::after { scale: 1 1; } /* the section on screen, set by main.js */
.site-footer__links a::after { bottom: 12px; height: 1px; transform-origin: left; }
.site-footer__links a:active { color: #fff; }

.store-badge { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.store-badge img { transition: transform .45s var(--ease-back); }
.btn { position: relative; isolation: isolate; overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), filter .3s ease; }
.btn--mint::after { /* a soft sheen that crosses the button on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .4) 50%, transparent 65%);
  translate: -101% 0;
}
.btn img { transition: translate .3s var(--ease-out); }
.site-header__logo img, .site-footer__logo img { transition: transform .45s var(--ease-back); }
.store-icon, .site-header__menu { transition: transform .2s var(--ease-out), background-color .2s ease; }
.tab { transition: background-color .25s ease, color .3s ease, transform .2s var(--ease-out); }
.tab__icon { transition: transform .45s var(--ease-back); }
.tabs { transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.tabs.is-ready .tabs__indicator { transition: translate .55s var(--ease-out-expo), width .55s var(--ease-out-expo), height .55s var(--ease-out-expo); }
.panel.is-resizing { overflow: hidden; transition: height .55s var(--ease-out-expo); } /* main.js eases the card between tab heights */
.tile__media { transition: transform .5s var(--ease-out-expo), box-shadow .5s var(--ease-out-expo); }
.tile__img { transition: scale .8s var(--ease-out-expo); }
.how__box { transition: transform .6s var(--ease-out-expo); }
.plan { transition: transform .6s var(--ease-out-expo), box-shadow .6s var(--ease-out-expo); }
.plan__glow { transition: scale 1.2s var(--ease-out-expo); }
.carousel__btn { transition: transform .3s var(--ease-out), filter .3s ease; }
.carousel__btn::after { transition: translate .35s var(--ease-out); }
.credential { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.faq__item { transition: margin .4s var(--ease-out), box-shadow .3s ease, background-color .3s ease; }
.faq__icon { transition: background-color .4s ease, color .3s ease, transform .3s var(--ease-out); }
.faq__icon::before, .faq__icon::after { transition: scale .45s var(--ease-out-expo), rotate .45s var(--ease-out-expo); }

@media (hover: hover) {
  .site-nav__list a:hover::after, .site-footer__links a:hover::after { scale: 1 1; }
  .site-footer__links a:hover { color: #fff; }
  .store-icon:hover, .site-header__menu:hover { background-color: rgba(255, 255, 255, .2); }
  .tab[aria-selected="false"]:hover { background-color: rgba(255, 255, 255, .1); }
  .faq__item:hover { box-shadow: 0 16px 24px rgba(77, 51, 153, .16); }
  .faq__item:not([open]):hover { background-color: #fff; }
  .faq__q:hover .faq__icon { background-color: #e7defa; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .store-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(18, 15, 31, .6); }
  .store-badge:hover img { transform: scale(1.1); }
  .btn--mint:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 26px -6px rgba(79, 191, 174, .5); }
  .btn--mint:hover::after { animation: sheen .9s var(--ease-out); }
  .btn:hover img { translate: 3px 0; }
  .site-header__logo:hover img, .site-footer__logo:hover img { transform: scale(1.04); }
  .tab[aria-selected="false"]:hover .tab__icon { transform: translateY(-1px) rotate(-10deg) scale(1.1); }
  .tile:hover .tile__media { transform: translateY(-4px); box-shadow: 0 18px 32px -16px rgba(51, 26, 128, .45); }
  .tile:hover .tile__img { scale: 1.04; }
  .how__box:hover { transform: translateY(-6px); }
  .plan--free:hover { transform: translateY(-6px); box-shadow: 0 30px 40px -8px rgba(77, 51, 153, .22); }
  .plan--plus:hover { transform: translateY(-6px); box-shadow: 0 44px 80px -12px rgba(51, 26, 128, .55); }
  .plan--plus:hover .plan__glow { scale: 1.15; }
  .plan--plus:hover .plan__crown { animation: wiggle .8s var(--ease-out); }
  .carousel__btn:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 12px rgba(77, 51, 153, .3)); }
  .carousel__btn--prev:hover::after { translate: -3px 0; }
  .carousel__btn--next:hover::after { translate: 3px 0; }
  .credential:hover { transform: translateY(-2px); box-shadow: 0 18px 24px rgba(77, 51, 153, .14); }
  .faq__q:hover .faq__icon { transform: scale(1.08); }
}
@media (hover: hover) and (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  /* the side reviews lean in towards the centre, inviting a click */
  .review[data-pos="prev"]:hover { opacity: .92; translate: 12px 0; }
  .review[data-pos="next"]:hover { opacity: .92; translate: -12px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .store-badge:active { transform: scale(.96); box-shadow: 0 4px 10px -6px rgba(18, 15, 31, .5); transition-duration: .1s; }
  .btn:active { transform: scale(.97); filter: brightness(.97); box-shadow: 0 4px 10px -4px rgba(79, 191, 174, .45); transition-duration: .1s; }
  .site-header__logo:active img, .site-footer__logo:active img { transform: scale(.95); transition-duration: .1s; }
  .store-icon:active, .site-header__menu:active { transform: scale(.9); transition-duration: .1s; }
  .tab:active { transform: scale(.95); transition-duration: .1s; }
  .carousel__btn:active { transform: scale(.9); transition-duration: .1s; }
  .faq__q:active .faq__icon { transform: scale(.88); transition-duration: .1s; }
}

/* mobile menu: the panel drops in and its links follow one by one */
@media (max-width: 1023px) {
  .site-nav__list a::after { display: none; }
  .site-nav__list a:active { opacity: .65; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .site-header.is-open .site-nav { animation: menu-in .45s var(--ease-out-expo) backwards; }
  .site-header.is-open .site-nav__list li { animation: menu-item .55s var(--ease-out-expo) calc(var(--i, 0) * 40ms) backwards; }
  .site-header.is-open .site-nav__stores { animation: menu-item .55s var(--ease-out-expo) 220ms backwards; }
}

/* the reviews carousel on one-card screens: cards slide in from the side they come from */
@media (max-width: 1100px) {
  .review[data-pos="prev"], .review[data-pos="out-prev"] { translate: -96px 0; }
  .review[data-pos="next"], .review[data-pos="out-next"] { translate: 96px 0; }
}
/* while a finger drags the featured review (main.js sets --drag and --drag-o) */
.carousel__track.is-dragging .review[data-pos="center"] { translate: var(--drag, 0) 0; opacity: var(--drag-o, 1); transition: none; }

/* hero: the phones follow a mouse pointer a little, the rings drift the other way (main.js sets --mx and --my) */
.hero__phone { transition: translate 1s var(--ease-out); }
.hero__phone--today { --depth: 12; --float: 8s; }
.hero__phone--blueprint { --depth: 7; --float: 9.5s; }
.hero__phone--people { --depth: 7; --float: 10.5s; }
.hero__rings { transition: translate 1.2s var(--ease-out); }
.hero__visual.is-leaning .hero__phone { translate: calc(var(--mx, 0) * var(--depth) * 1px) calc(var(--my, 0) * var(--depth) * 1px); }
.hero__visual.is-leaning .hero__rings { translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -6px); }
.hero__rings::after { /* a slow ripple that leaves the rings every few seconds */
  content: ""; position: absolute; left: 50%; top: 42.17%; width: 166.3%; aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, .16); border-radius: 50%;
  translate: -50% -50%; scale: .45; opacity: 0;
}

/* stars that catch the light (main.js places them over the brightest stars of the background) */
.twinkles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.twinkles i {
  position: absolute; left: calc(50% - 725px + var(--x) * 1px); top: calc(var(--y) * 1px - 5px);
  width: 10px; height: 10px; opacity: 0;
  background:
    radial-gradient(circle, #fff 0 1.1px, rgba(255, 255, 255, .5) 1.6px, transparent 3px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent) center / 100% 1px no-repeat,
    linear-gradient(transparent, rgba(255, 255, 255, .85), transparent) center / 1px 100% no-repeat;
}

/* ---------- Scroll reveals (main.js adds .is-revealed as content comes into view) ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  html.js:not(.reveal-fallback) [data-reveal]:not(.is-revealed) { opacity: 0; }
  html.js [data-reveal].is-revealed { animation: reveal-up var(--reveal-dur) var(--ease-out-expo) var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="fade"].is-revealed { animation: reveal-fade 1s ease-out var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="blur"].is-revealed { animation: reveal-blur 1.2s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="pop"].is-revealed { animation: reveal-pop .8s var(--ease-back) var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="soft"].is-revealed { animation: reveal-soft .8s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="scale"].is-revealed { animation: reveal-scale 1.1s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="panel"].is-revealed { animation: reveal-panel 1.1s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="ring"].is-revealed { animation: reveal-ring 1.8s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="glow"].is-revealed { animation: reveal-glow 2s ease-out var(--reveal-delay, 0ms) backwards; }
  html.js [data-reveal="moon"].is-revealed { animation: reveal-moon 1.6s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards; }

  /* things that keep moving once they have arrived */
  html.js .hero__phone.is-revealed { animation: reveal-rise 1.4s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards, float var(--float) ease-in-out calc(var(--reveal-delay, 0ms) + 1.4s) infinite; }
  html.js .hero__dot.is-revealed { animation: reveal-fade 1s ease-out var(--reveal-delay, 0ms) backwards, glint 5.5s ease-in-out calc(var(--reveal-delay, 0ms) + 1s) infinite; }
  html.js .moon__halo.is-revealed { animation: reveal-fade 1.2s ease-out var(--reveal-delay, 0ms) backwards, breathe 7s ease-in-out calc(var(--reveal-delay, 0ms) + 1.2s) infinite; }
  html.js .moon__orbit.is-revealed { animation: reveal-orbit 1.8s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards, spin 140s linear calc(var(--reveal-delay, 0ms) + 1.8s) infinite; }
  html.js .moon__spark.is-revealed { animation: reveal-spark 1s var(--ease-back) var(--reveal-delay, 0ms) backwards, sparkle 3.6s ease-in-out calc(var(--reveal-delay, 0ms) + 1s) infinite; }
  /* hero: the brush stroke under "Aligned" sweeps in behind a soft edge once the title has nearly settled, and glints once as the brush lifts */
  html.js .hero__title.is-revealed .hero__stroke {
    -webkit-mask: linear-gradient(90deg, #000 46%, transparent 54%) 0 0 / 220% 100% no-repeat; mask: linear-gradient(90deg, #000 46%, transparent 54%) 0 0 / 220% 100% no-repeat;
    animation: hero-stroke .9s var(--ease-out) .75s backwards, hero-stroke-glint .8s ease-in-out 1.3s;
  }
  .twinkles i { animation: twinkle var(--t) ease-in-out var(--d) infinite; }
  html.js .hero__visual.is-in .hero__rings::after { animation: ripple 8s cubic-bezier(.2, .6, .35, 1) 1.8s infinite; }
  /* loops rest while their section is off screen */
  html.js .is-offscreen .loop.is-revealed, .is-offscreen .twinkles i, html.js .is-offscreen .hero__visual.is-in .hero__rings::after { animation-play-state: paused; }

  /* how it works: the dotted line draws itself and each step lights up as it arrives */
  html.js:not(.reveal-fallback) .how__steps:not(.is-in)::before { clip-path: inset(0 100% 0 0); }
  html.js .how__steps.is-in::before { animation: draw-line .9s cubic-bezier(.45, 0, .55, 1) .15s backwards; }
  /* pricing: the rows of each plan follow the card in */
  html.js .plan.is-revealed .plan__list li { animation: reveal-item .7s var(--ease-out-expo) calc(var(--reveal-delay, 0ms) + 350ms + var(--i, 0) * 70ms) backwards; }
  /* about: Niza's photo settles into its frame */
  html.js .niza__photo.is-revealed img { animation: settle 1.8s var(--ease-out-expo) var(--reveal-delay, 0ms) backwards; }
  /* reviews: the stars of the featured card light up one by one */
  html.js .carousel.is-revealed .review[data-pos="center"] .review__stars i { animation: star-pop .6s var(--ease-back) calc(250ms + var(--i, 0) * 70ms) backwards; }
  /* areas: switching tabs keeps the card and brings in the new content (main.js adds .is-switch) */
  html.js .panel[role].is-switch { animation: none; }
  html.js .panel.is-switch .panel__head { animation: switch-in .6s var(--ease-out-expo) backwards; }
  html.js .panel.is-switch .tile { animation: switch-in .7s var(--ease-out-expo) calc(90ms + var(--i, 0) * 60ms) backwards; }
  /* the header settles in on arrival */
  html.js .site-header { animation: header-in 1s var(--ease-out-expo) .1s backwards; }
}

/* ---------- Scroll-linked (browsers with scroll-driven animations) ---------- */
@supports (animation-timeline: view()) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .moon { animation: moon-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } /* the moon rises as the last section arrives */
    .deco--rings { animation: drift linear both; animation-timeline: view(); }
  }
}

/* ---------- Keyframes ---------- */
@keyframes reveal-up { from { opacity: 0; translate: 0 var(--reveal-y); } }
@keyframes reveal-fade { from { opacity: 0; } }
@keyframes reveal-blur { from { opacity: 0; translate: 0 calc(var(--reveal-y) * .5); filter: blur(12px); } }
@keyframes reveal-pop { from { opacity: 0; scale: .3; } }
@keyframes reveal-soft { from { opacity: 0; translate: 0 calc(var(--reveal-y) * .5); scale: .94; } }
@keyframes reveal-scale { from { opacity: 0; translate: 0 var(--reveal-y); scale: .97; } }
@keyframes reveal-panel { from { opacity: 0; translate: 0 calc(var(--reveal-y) * 1.5); } }
@keyframes reveal-ring { from { opacity: 0; scale: .8; } }
@keyframes reveal-glow { from { opacity: 0; scale: .6; } }
@keyframes reveal-rise { from { opacity: 0; translate: 0 calc(var(--reveal-y) * 3); } }
@keyframes reveal-moon { from { opacity: 0; scale: .85; } }
@keyframes reveal-orbit { from { opacity: 0; scale: .9; rotate: -30deg; } }
@keyframes reveal-spark { from { opacity: 0; scale: 0; rotate: -135deg; } }
@keyframes reveal-item { from { opacity: 0; translate: 0 12px; } }
@keyframes switch-in { from { opacity: 0; translate: 0 16px; } }
@keyframes settle { from { scale: 1.1; } }
@keyframes star-pop { from { opacity: 0; scale: .2; rotate: -60deg; } }
@keyframes draw-line { from { clip-path: inset(0 100% 0 0); } }
@keyframes hero-stroke { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } } /* the mask's opaque half slides in from the left */
@keyframes hero-stroke-glint { 45% { filter: drop-shadow(0 0 .04em rgba(255, 217, 191, .6)); } }
@keyframes header-in { from { opacity: 0; translate: 0 -100%; } }
@keyframes menu-in { from { opacity: 0; translate: 0 -10px; } }
@keyframes menu-item { from { opacity: 0; translate: 0 -8px; } }
@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes glint { 50% { opacity: .35; transform: scale(.75); } }
@keyframes breathe { 50% { opacity: .7; transform: scale(1.05); } }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes sparkle { 50% { transform: scale(1.35) rotate(45deg); } }
@keyframes twinkle { 0%, 55%, 100% { opacity: 0; transform: scale(.5); } 75% { opacity: 1; transform: scale(1.15); } }
@keyframes ripple { 0% { opacity: 0; scale: .45; } 12% { opacity: 1; } 100% { opacity: 0; scale: 1; } }
@keyframes sheen { from { translate: -101% 0; } to { translate: 101% 0; } }
@keyframes wiggle { 25% { rotate: -14deg; } 55% { rotate: 10deg; } 80% { rotate: -4deg; } }
@keyframes moon-rise { from { translate: 0 90px; } }
@keyframes drift { from { translate: 0 80px; } to { translate: 0 -80px; } }

@media (forced-colors: active) {
  .site-header__menu-icon, .site-header__menu-icon::before, .site-header__menu-icon::after { background: ButtonText; }
  .store-icon__glyph { background: LinkText; }
  .store-icon { background-color: Canvas; } /* opaque, so the round header controls show over the dark hero too */
  .site-header__menu { background-color: ButtonFace; }
  .site-header.is-open .site-header__menu-icon { background: transparent; }
  .carousel__btn { border: 1px solid ButtonText; }
  .carousel__btn::after { background: ButtonText; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
  .carousel__btn--prev { --arrow: url(assets/svg/arrow-left.svg); }
  .carousel__btn--next { --arrow: url(assets/svg/arrow-right-white.svg); }
  .tabs.has-indicator .tabs__indicator { display: none; }
  .tab[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
  .faq__icon { border: 1px solid CanvasText; }
  .faq__plus, .faq__icon::after { background: CanvasText; }
  .hero__stroke { display: none; } /* decorative, and a solid system colour would fuse with the g */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}