/* ============================================================
   left field — base styles
   plain css, mobile-first. te-style: whitespace, grid, big imagery.
   ============================================================ */

/* ---- typeface: Gradient (Superior Type, variable wght 100–800) ---- */
@font-face {
  font-family: "Gradient";
  src: url("../assets/fonts/Gradient-Variable_Trial.woff2") format("woff2"),
       url("../assets/fonts/Gradient-Variable_Trial.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* ---- tokens ------------------------------------------------ */
:root {
  --bg: #e6e5e1;            /* matches the grey the clouds fade into */
  --ink: #15161a;          /* near-black text */
  --ink-soft: #5b5d63;     /* secondary text */
  --paper: #faf9f6;        /* card surface */
  --line: rgba(20, 22, 26, 0.14);
  --line-strong: rgba(20, 22, 26, 0.28);

  --max: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --radius: 18px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  font-family: "Gradient", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* ---- reset-ish --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  /* clip, not hidden: `hidden` would break position:sticky on the header.
     stops a stuck-on sticker ever producing a sideways scrollbar. */
  overflow-x: clip;
  color: var(--ink);
  line-height: 1.6;
  font-size: clamp(16px, 1.05vw, 18px);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* clouds at the top, fading cleanly into the page colour by ~the first
     screen. the gradient layer sits over the photo: transparent up top, then
     resolves to --bg and holds solid for the rest of the page. */
  background-color: var(--bg);
  background-image:
    linear-gradient(to bottom,
      rgba(230, 229, 225, 0) 0,
      rgba(230, 229, 225, 0) 46vh,
      var(--bg) 82vh),
    url("../assets/clouds-bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%, 100% auto;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
[hidden] { display: none !important; } /* beat class rules like .account__card { display: grid } */
button { font: inherit; color: inherit; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* keep "LF" upper-case even inside lower-cased display headings */
.caps { text-transform: uppercase; }

/* the LF logo used inline in place of the letters "LF" */
.lf-logo {
  display: inline-block;
  height: 0.82em;
  width: auto;
  vertical-align: baseline;
  transform: translateY(0.04em);
}

/* ---- layout ------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section { scroll-margin-top: 88px; }

.eyebrow,
.section-num {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ============================================================
   header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background-color: rgba(230, 229, 225, 0.58);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-right: auto; /* push nav + subscribe CTA to the right */
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wordmark__mark {
  display: block;
  height: 22px;
  width: auto;
}
.wordmark__text { font-size: 1.05rem; }

.nav { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.nav a {
  position: relative;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 4px 0;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }

/* hamburger (mobile) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none;
  border: 0;
}
.nav-toggle span:not(.sr-only) {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   hero
   ============================================================ */
.hero {
  min-height: min(92vh, 880px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(64px, 12vh, 140px) clamp(28px, 4vh, 56px);
}
.hero__inner { width: 100%; }

/* mobile: sit the title up over the cloud band (not bottom-aligned in a tall box) */
@media (max-width: 720px) {
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-block: 15vh clamp(48px, 9vh, 90px);
  }
}

.hero__title {
  font-size: clamp(4.25rem, 16vw, 14rem);
  line-height: 0.84;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  margin-block: 0.18em 0.32em;
}
.hero__tag {
  max-width: 30ch;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  color: var(--ink);
  letter-spacing: -0.015em;
}

.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 5vh, 56px);
  font-size: 0.95rem;
  font-weight: 500;
}
.scroll-cue svg { transition: transform 0.4s var(--ease); animation: bob 2.4s var(--ease) infinite; }
.scroll-cue:hover svg { transform: translateY(4px); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ============================================================
   section heads
   ============================================================ */
.section-head { max-width: 46ch; margin-bottom: clamp(36px, 6vw, 72px); }
.section-head h2,
.about__title {
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  margin-block: 0.3em 0.45em;
}
.section-head p { color: var(--ink-soft); font-size: 1.05rem; }

/* ============================================================
   lineup / product grid
   ============================================================ */
.lineup { padding-block: clamp(32px, 4.5vw, 68px) clamp(64px, 11vw, 150px); }

.products {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 26px);
}

.card { position: relative; }

.card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
    border-color 0.5s var(--ease);
  will-change: transform;
}
.card__link:hover,
.card__link:focus-visible {
  border-color: var(--line-strong);
  box-shadow: 0 26px 50px -28px rgba(20, 22, 26, 0.5);
  transform: translateY(-4px);
}

.card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  color: color-mix(in srgb, var(--accent) 86%, #2a2a2a);
  background:
    radial-gradient(120% 120% at 70% 12%,
      color-mix(in srgb, var(--accent) 30%, #fff) 0%,
      color-mix(in srgb, var(--accent) 52%, #fff) 55%,
      color-mix(in srgb, var(--accent) 70%, #fff) 100%);
  overflow: hidden;
}
.card__code {
  position: absolute;
  top: 16px; left: 18px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--accent) 90%, #1a1a1a);
  mix-blend-mode: multiply;
}
.device {
  width: 42%;
  max-width: 168px;
  aspect-ratio: 120 / 100;
  opacity: 0.92;
  transition: transform 0.6s var(--ease);
}
.card__link:hover .device { transform: scale(1.07) rotate(-1.5deg); }

.card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(18px, 2vw, 26px);
}
.card__name { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.card__type { color: var(--ink-soft); font-size: 0.95rem; }
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.card__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--accent) 70%, #1a1a1a);
}
.card__cta i { font-style: normal; transition: transform 0.32s var(--ease); }
.card__link:hover .card__cta i { transform: translateX(5px); }
.card__price { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }

/* desktop editorial grid: two wide tiles, then a row of three */
@media (min-width: 640px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .products { grid-template-columns: repeat(6, 1fr); }
  .card { grid-column: span 2; }       /* 3 per row */
  .card--wide { grid-column: span 3; } /* 2 per row */
  .card--wide .card__media { aspect-ratio: 16 / 9; }
  .card--wide .card__name { font-size: 1.85rem; }
}

/* ============================================================
   button
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.btn:hover,
.btn:focus-visible { transform: translateY(-2px); background: transparent; color: var(--ink); }

/* buy buttons pick up the product's own colour on hover. --accent is set per
   store row / product page, so each button lights up in its own shade; the
   :not() keeps the plain dark hover anywhere an accent isn't in scope. */
.btn[data-buy]:hover,
.btn[data-buy]:focus-visible {
  background: var(--accent, var(--ink));
  border-color: var(--accent, var(--ink));
  color: #15161a;
}
/* hovering anywhere on the row already tints it, so keep the button dark
   there — two accent blocks side by side just muddies it */
.store-item:hover .btn[data-buy]:not(:hover) {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}


/* secondary / outline button */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover,
.btn--ghost:focus-visible { background: var(--ink); color: var(--bg); border-color: var(--ink); }



/* ============================================================
   bundle (main page) — clouds fade in on hover
   ============================================================ */
.bundle { margin-top: clamp(40px, 6vw, 80px); scroll-margin-top: 100px; }
.bundle__card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(28px, 5vw, 60px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
    transform 0.4s var(--ease);
}
.bundle__card:hover,
.bundle__card:focus-visible {
  border-color: var(--line-strong);
  box-shadow: 0 30px 60px -34px rgba(20, 22, 26, 0.5);
  transform: translateY(-3px);
}
.bundle__media {
  position: absolute;
  inset: 0;
  background: url("../assets/clouds-square.jpg") center / cover no-repeat;
  opacity: 0.16;
  transform: scale(1.02);
  transition: opacity 0.6s var(--ease), transform 1.4s var(--ease);
}
.bundle__card:hover .bundle__media,
.bundle__card:focus-visible .bundle__media { opacity: 0.7; transform: scale(1.06); }
.bundle__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}
.bundle__lead { display: grid; gap: 10px; }
.bundle__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.bundle__desc { color: var(--ink-soft); max-width: 40ch; }
.bundle__buy { display: grid; gap: 4px; justify-items: start; }
.bundle__price { font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.03em; }
.bundle__save { font-size: 0.85rem; color: var(--ink-soft); }
.bundle__buy .btn { margin-top: 14px; }
@media (min-width: 760px) {
  .bundle__inner { grid-template-columns: 1fr auto; align-items: end; }
  .bundle__buy { justify-items: end; text-align: right; }
}

/* ============================================================
   about
   ============================================================ */
.about { padding-block: clamp(64px, 11vw, 150px); }
.about__inner { display: grid; gap: clamp(24px, 4vw, 56px); }
.about__body { max-width: 60ch; display: grid; gap: 1.3em; }
.about__body p { font-size: clamp(1.05rem, 1.5vw, 1.3rem); }

@media (min-width: 860px) {
  .about__inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .about__title { margin-top: 0; }
}

/* ============================================================
   footer
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(40px, 6vw, 72px);
  margin-top: clamp(40px, 8vw, 120px);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__brand { display: flex; align-items: center; gap: 14px; }
.site-footer__brand .wordmark__mark { height: 26px; }
.site-footer__line { color: var(--ink-soft); font-size: 0.95rem; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.4vw, 32px); }
.site-footer__nav a { font-size: 0.95rem; }
.site-footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__legal {
  flex-basis: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   product pages
   ============================================================ */
.product-hero { position: relative; overflow: hidden; padding-block: clamp(30px, 6vh, 78px) clamp(40px, 7vw, 96px); }
.back {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: clamp(24px, 5vw, 52px);
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.back:hover { color: var(--ink); gap: 12px; }

.product-hero__wrap { position: relative; }

.product-hero__kicker,
.product-hero__name,
.product-hero__grid { position: relative; z-index: 1; }

.product-hero__name {
  font-size: clamp(3.6rem, 13vw, 11rem);
  line-height: 0.8;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  margin-block: 0.14em 0.36em;
}

.product-hero__grid { display: grid; gap: clamp(26px, 4vw, 56px); }
@media (min-width: 820px) {
  .product-hero__grid { grid-template-columns: 1.1fr 0.9fr; align-items: stretch; }
}
.product-hero__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 240px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  color: color-mix(in srgb, var(--accent) 86%, #2a2a2a);
  background: radial-gradient(120% 120% at 70% 12%,
    color-mix(in srgb, var(--accent) 28%, #fff) 0%,
    color-mix(in srgb, var(--accent) 52%, #fff) 55%,
    color-mix(in srgb, var(--accent) 70%, #fff) 100%);
}
.product-hero__media .card__code { font-size: 0.8rem; }
.product-hero__media .device { width: 46%; max-width: 230px; aspect-ratio: 120 / 100; opacity: 0.92; }
/* ---- lefty, stuck on --------------------------------------------
   the white die-cut border comes from the #lf-diecut SVG filter that
   main.js injects; it blurs the alpha and slams it to opaque white, so
   the border follows his silhouette rather than boxing him in. */
.lefty {
  position: absolute;
  z-index: 3;
  pointer-events: none; /* purely decorative — never eat a click */
  filter: url(#lf-diecut) drop-shadow(0 8px 14px rgba(20, 22, 26, 0.3));
  transform: rotate(var(--tilt, 8deg));
}
/* SALE badge — same sticker treatment as lefty, kept ready for a sale.
   Not placed on any page yet; drop it in wherever a product needs it:
     <img class="lefty lefty--sale" src="assets/lefty/sale.png" alt="on sale" />
   It reuses .lefty for the die-cut border, shadow and randomised tilt. */
.lefty--sale {
  top: clamp(-10px, -0.8vw, -4px);
  left: clamp(-12px, -1vw, -6px);
  width: clamp(76px, 10vw, 128px);
}

/* on a product card: hangs off the top-right corner. .card doesn't clip
   (only .card__link does), so the overhang survives. */
.lefty--card {
  top: clamp(-16px, -1.4vw, -10px);
  right: clamp(-14px, -1.2vw, -8px);
  width: clamp(58px, 7.5vw, 92px);
}
/* on a product page: dropped in the hero's empty sky, in a slightly
   different spot on each product (--ly/--lx/--tilt are set per page).
   Lives outside .product-hero — that clips — and sits above the sticky
   header's z-index so nothing crops him. pointer-events:none on .lefty
   keeps the nav underneath clickable. */
.lefty--hero {
  position: absolute;
  z-index: 60;
  top: var(--ly, 100px);
  right: var(--lx, 6%);
  width: clamp(96px, 13vw, 190px);
}
@media (max-width: 720px) {
  /* stacked layout: tuck him tight to the corner so he stays off the title */
  .lefty--hero {
    width: clamp(72px, 20vw, 108px);
    top: clamp(84px, 12vw, 116px);
    right: clamp(8px, 3vw, 20px);
  }
}

/* product cards (home + bundle): the UI inset on the card's gradient.
   bound BOTH axes — the shots differ in aspect, and a tall one (synth)
   overflows its box if only the width is set. */
.card__shot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 82%;
  max-height: 76%;
  border-radius: 7px;
  box-shadow: 0 16px 32px -14px rgba(20, 22, 26, 0.6);
}

/* on a product page the UI stands on its own — no gradient box, no forced
   4:3 crop. the column simply takes the shot's natural aspect ratio and the
   info beside it centres against whatever height that comes out at. */
.product-hero__shot {
  display: block;
  width: 100%;
  height: auto;
  align-self: center;
  border-radius: 12px;
  box-shadow: 0 30px 62px -26px rgba(20, 22, 26, 0.55),
              0 2px 6px rgba(20, 22, 26, 0.14);
}
/* bundle hero: all four instruments tiled inside the box */
.product-hero__media--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  place-items: stretch;
  gap: 2px;
  background: var(--line);
}
.bundle-tile {
  position: relative;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--accent) 86%, #2a2a2a);
  background: radial-gradient(120% 120% at 70% 12%,
    color-mix(in srgb, var(--accent) 28%, #fff) 0%,
    color-mix(in srgb, var(--accent) 52%, #fff) 55%,
    color-mix(in srgb, var(--accent) 70%, #fff) 100%);
  transition: filter 0.4s var(--ease);
}
.bundle-tile:hover { filter: brightness(1.04); }
/* each quadrant shows its own plugin, inset on that product's gradient */
.bundle-tile__shot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 78%;
  max-height: 74%;
  border-radius: 5px;
  box-shadow: 0 10px 22px -10px rgba(20, 22, 26, 0.6);
}
.bundle-tile .card__code {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--accent) 90%, #1a1a1a);
  mix-blend-mode: multiply;
}
.bundle-tile .device { width: 52%; max-width: 124px; aspect-ratio: 120 / 100; opacity: 0.92; }

.bundle-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: clamp(32px, 5vw, 56px);
}
.bundle-cta__price { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.bundle-cta__alt { font-size: 0.95rem; color: var(--ink-soft); transition: color 0.3s var(--ease); }
.bundle-cta__alt:hover { color: var(--ink); }

.product-hero__info { display: grid; gap: 18px; align-content: center; }
.product-hero__tag { font-size: clamp(1.1rem, 1.8vw, 1.45rem); max-width: 34ch; }

.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.buy .price { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.buy__note { font-size: 0.85rem; color: var(--ink-soft); letter-spacing: 0.02em; }

/* scrolling accent marquee band */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--ink);
  background: var(--accent);
  color: var(--ink);
}
.marquee__track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: marquee 28s linear infinite;
}
.marquee__track span {
  /* never shrink: the flex default squeezes each copy narrower than its own
     nowrap text, so the two halves overlap instead of tiling seamlessly */
  flex: none;
  padding-block: clamp(12px, 1.6vw, 18px);
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

.product-section { padding-block: clamp(44px, 7vw, 92px); border-top: 1px solid var(--line); }
.product-section__head {
  font-size: clamp(1.9rem, 5vw, 3.4rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: lowercase;
  margin-bottom: clamp(24px, 4vw, 48px);
  max-width: 22ch;
}
.prose { max-width: 60ch; display: grid; gap: 1.2em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); }
.prose p { color: var(--ink); }

.features { display: grid; gap: clamp(30px, 4vw, 56px); }
@media (min-width: 680px) { .features { grid-template-columns: repeat(2, 1fr); } }
.feature { display: grid; gap: 8px; max-width: 42ch; }
.feature__n {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.6px color-mix(in srgb, var(--accent) 72%, #1a1a1a);
}
.feature h3 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.feature p { color: var(--ink-soft); }

/* cross-sell — clouds fade in on hover, like the bundle */
.cross { border-top: 1px solid var(--line); padding-block: clamp(48px, 8vw, 110px); }
.cross__card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}
.cross__card:hover { border-color: var(--line-strong); box-shadow: 0 30px 60px -34px rgba(20, 22, 26, 0.5); transform: translateY(-3px); }
.cross__media {
  position: absolute;
  inset: 0;
  background: url("../assets/clouds-square.jpg") center / cover no-repeat;
  opacity: 0.16;
  transform: scale(1.02);
  transition: opacity 0.6s var(--ease), transform 1.4s var(--ease);
}
.cross__card:hover .cross__media { opacity: 0.7; transform: scale(1.06); }
.cross__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cross__title { font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.02em; text-transform: lowercase; }
.cross__price { color: var(--ink-soft); font-size: 0.95rem; margin-top: 4px; }

/* ============================================================
   utility pages: store · downloads · account
   ============================================================ */
.page-intro { padding-block: clamp(40px, 9vh, 120px) clamp(28px, 4vw, 52px); }
.page-intro h1 {
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  margin-block: 0.12em 0.32em;
}
.page-intro__tag { font-size: clamp(1.05rem, 1.6vw, 1.35rem); max-width: 48ch; }
.page-intro__tag a { text-decoration: underline; text-underline-offset: 3px; }

.btn--sm { padding: 9px 17px; font-size: 0.9rem; }

/* store */
.store { display: grid; gap: clamp(14px, 2vw, 20px); padding-bottom: clamp(48px, 9vw, 130px); }
.store-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.store-item:hover {
  /* the whole row washes into the product's colour, not just the button */
  background: color-mix(in srgb, var(--accent) 20%, var(--paper));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -28px rgba(20, 22, 26, 0.45);
}
.store-item__media {
  width: clamp(84px, 12vw, 124px);
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--accent) 86%, #2a2a2a);
  background: radial-gradient(120% 120% at 70% 12%, color-mix(in srgb, var(--accent) 28%, #fff), color-mix(in srgb, var(--accent) 60%, #fff));
}
.store-item__media .device { width: 58%; }
.store-item__name { font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -0.02em; }
.store-item__type { color: var(--ink-soft); font-size: 0.92rem; }
.store-item__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.store-item__price { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; }
.store-item__details { font-size: 0.9rem; color: var(--ink-soft); }
.store-item__details:hover { color: var(--ink); }
.store-item--bundle { background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }
/* bundle reads as a collection of the four, not a 5th product */
.store-item__media--set {
  background: none;
  display: grid;
  /* the parent centres its children; these swatches are empty, so without
     stretch they collapse to 0x0 and the cluster disappears */
  place-items: stretch;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  padding: 6px;
}
.store-item__media--set i {
  border-radius: 4px;
  background: radial-gradient(120% 120% at 70% 12%,
    color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 62%, #fff));
}
.store-sep {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(10px, 1.6vw, 20px) 4px clamp(4px, 1vw, 10px);
  color: var(--ink-soft);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.store-sep::before, .store-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }


/* the plugin UI shown small, on its product gradient */
.mini-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  box-shadow: 0 6px 14px -6px rgba(20, 22, 26, 0.45);
}
/* the shot IS the tile now — drop the gradient panel it used to sit on */
.store-item__media:has(.mini-shot),
.dl__media:has(.mini-shot) {
  background: none;
  border: 0;
  padding: 0;
  overflow: visible;
}

/* downloads */
.downloads { padding-bottom: clamp(48px, 9vw, 130px); }
.downloads .wrap { display: grid; gap: clamp(18px, 2.4vw, 28px); }

/* ---- splash: the mark plays full-screen, then dissolves ----
   only ever shown when js is on and motion is welcome — the head script adds
   .splash-on, so a no-js visitor lands straight on the page below. */
html.splash-on, html.splash-on body { overflow: hidden; }

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gut);
  background-color: var(--bg);
  /* the square crop, not clouds-bg — that one is a tall image that fades out to
     the page grey at its foot, which would show as a flat band down here. */
  background-image: url("../assets/clouds-square.jpg");
  background-size: cover;
  background-position: center;
  opacity: 1;
  transition: opacity 900ms var(--ease);
}
/* the fade-out. once it finishes, js sets [hidden] and unlocks scrolling. */
.splash--out { opacity: 0; }

.splash__mark {
  width: min(72vw, 780px);
  height: auto;
  aspect-ratio: 1280 / 406;
  /* black-on-white video multiplied onto the clouds: the white ground
     multiplies away to nothing and only the ink prints. */
  mix-blend-mode: multiply;
}

.splash__skip {
  position: absolute;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in srgb, var(--paper) 76%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.splash__skip:hover { background: var(--paper); transform: translateY(-1px); }

/* ---- the payoff: what you land on once a payment clears -----
   the animated mark sits straight on the clouds. the video is a black logo on
   flat white, multiplied over the page, so the white multiplies away to nothing
   and only the ink prints. that avoids alpha video entirely, which safari does
   not support in webm. */
.payoff { padding-block: clamp(28px, 6vh, 76px) clamp(20px, 4vh, 44px); }
.payoff .wrap {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(14px, 2.4vw, 22px);
}
.payoff__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2f7d52;
  background: color-mix(in srgb, #4f9d6b 15%, var(--paper));
  border: 1px solid color-mix(in srgb, #4f9d6b 34%, transparent);
}
.payoff__pill svg { width: 14px; height: 14px; flex: none; }
.payoff__title {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.payoff__tag {
  color: var(--ink-soft);
  max-width: 46ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.payoff__tag strong { color: var(--ink); font-weight: 600; }

/* checkout return (success / cancel) */
.checkout { padding-bottom: clamp(56px, 10vw, 140px); }
.checkout .wrap { display: grid; justify-items: center; }
.checkout__card {
  width: 100%;
  max-width: 620px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(30px, 4.5vw, 56px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.checkout__badge {
  width: clamp(88px, 15vw, 116px);
  height: clamp(88px, 15vw, 116px);
  display: grid;
  place-items: center;
  border-radius: 999px;
  margin-bottom: clamp(6px, 1.5vw, 12px);
}
.checkout__badge svg { width: 48%; height: 48%; }
.checkout__badge--ok {
  color: #2f7d52;
  background: radial-gradient(120% 120% at 70% 12%,
    color-mix(in srgb, #4f9d6b 26%, #fff), color-mix(in srgb, #4f9d6b 52%, #fff));
}
.checkout__badge--cancel {
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 6%, var(--paper));
  border: 1px solid var(--line);
}
.checkout__title { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.03em; line-height: 1.02; }
.checkout__tag { color: var(--ink-soft); max-width: 46ch; }
.checkout__tag strong { color: var(--ink); font-weight: 600; }
.checkout__panel {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 12px;
  margin-top: 6px;
  padding: clamp(18px, 2.6vw, 26px);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 4%, var(--paper));
  border: 1px solid var(--line);
}
.checkout__panel h2 { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.checkout__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.checkout__steps li {
  position: relative;
  padding-left: 38px;
  color: var(--ink);
  line-height: 1.5;
}
.checkout__steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.78rem;
  font-weight: 700;
}
.checkout__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; margin-top: 6px; }
.checkout__note { font-size: 0.88rem; color: var(--ink-soft); margin-top: 2px; }
.dl {
  display: grid;
  gap: clamp(16px, 2.5vw, 28px);
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.5vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.dl:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 20px 40px -28px rgba(20,22,26,.45); }
.dl__head { display: flex; align-items: center; gap: clamp(14px, 2vw, 20px); }
.dl__media {
  flex: none;
  width: clamp(84px, 12vw, 118px);
  aspect-ratio: 16 / 10;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--accent) 86%, #2a2a2a);
  background: radial-gradient(120% 120% at 70% 12%,
    color-mix(in srgb, var(--accent) 28%, #fff), color-mix(in srgb, var(--accent) 60%, #fff));
}
.dl__media .device { width: 58%; }
.dl__name { font-size: clamp(1.3rem, 2.2vw, 1.8rem); letter-spacing: -0.02em; }
.dl__ver { color: var(--ink-soft); font-size: 0.9rem; margin-top: 3px; }
.dl__grabs { display: flex; flex-wrap: wrap; gap: 14px 30px; }
.dl__os { display: flex; align-items: center; gap: 10px; }
.dl__os-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.dl-chip svg { width: 13px; height: 13px; opacity: 0.5; transition: opacity 0.25s var(--ease); }
.dl-chip:hover, .dl-chip:focus-visible {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 88%, #2a2a2a);
  border-color: color-mix(in srgb, var(--accent) 88%, #2a2a2a);
  color: #fff;
}
.dl-chip:hover svg, .dl-chip:focus-visible svg { opacity: 0.95; }
@media (min-width: 820px) {
  .dl { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .dl__grabs { justify-content: flex-end; }
}

/* account */
.account { display: grid; gap: clamp(18px, 3vw, 28px); max-width: 760px; padding-bottom: clamp(48px, 9vw, 130px); }
.account__card {
  display: grid;
  gap: 14px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.account__card h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; text-transform: lowercase; }
.account__card p { color: var(--ink-soft); }
.account__steps { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; counter-reset: step; }
/* the numbered badge is positioned rather than a flex sibling: a flex li
   blockifies its children, so an inline <a> in the step text became its own
   flex item and broke the sentence apart. */
.account__steps li { position: relative; padding-left: 40px; }
.account__steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 600;
}
/* inline links in prose need to look like links */
.account__steps a,
.account__card p a,
.page-intro__tag a { text-decoration: underline; text-underline-offset: 3px; }

/* signed-in dashboard */
.account__whoami, .account__empty { color: var(--ink-soft); }
.account__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 4px; }
.account__logout {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--ink-soft); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.account__logout:hover { color: var(--ink); }
.licence-row { display: grid; gap: 7px; padding: 15px 0; border-top: 1px solid var(--line); }
.licence-row:first-child { border-top: 0; padding-top: 4px; }
.licence-row__name { font-weight: 600; letter-spacing: -0.01em; }
.licence-row__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem; line-height: 1.5; word-break: break-all;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  padding: 9px 11px; border-radius: 9px;
}

/* ============================================================
   forms — feedback
   ============================================================ */
.feedback-wrap { padding-bottom: clamp(48px, 9vw, 130px); }
.form { max-width: 680px; display: grid; gap: clamp(18px, 3vw, 26px); }
.form__card {
  display: grid;
  gap: clamp(16px, 2.4vw, 22px);
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.field { display: grid; gap: 7px; }
.field > label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.field__hint { font-weight: 400; color: var(--ink-soft); }
.req { color: #FF8E55; }

.field-row { display: grid; gap: clamp(16px, 2.4vw, 22px); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.input, .textarea, .select {
  width: 100%;
  font: inherit;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 78%, #fff); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 22, 26, 0.12);
}
.textarea { min-height: 152px; line-height: 1.5; resize: vertical; }

/* select with a custom chevron */
.select-wrap { position: relative; }
.select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-70%) rotate(45deg);
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  pointer-events: none;
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
}
.form__note { color: var(--ink-soft); font-size: 0.85rem; max-width: 42ch; }
.form__note a { text-decoration: underline; text-underline-offset: 3px; }
.btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

.form__status { font-size: 0.9rem; color: #b23b2e; }
.form-success h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; text-transform: lowercase; }
.form-success p { color: var(--ink-soft); }
.form-success a { text-decoration: underline; text-underline-offset: 3px; }

/* honeypot — visually gone, still in the DOM for bots */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   legal pages
   ============================================================ */
.legal { max-width: 68ch; display: grid; gap: 1.15em; padding-bottom: clamp(48px, 9vw, 120px); }
.legal h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -0.02em; text-transform: lowercase; margin-top: 0.7em; }
.legal p, .legal li { font-size: 1.02rem; }
.legal ul { margin: 0; padding-left: 1.2em; display: grid; gap: 0.5em; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal__meta { color: var(--ink-soft); font-size: 0.9rem; }

/* clouds confined to a band behind the top bar, rest white (privacy + terms).
   a white gradient masks everything below the header height, so the clouds
   render naturally (as on other pages) but only show behind the top bar. */
body.clouds-topbar {
  background-color: #fff;
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 72px, #fff 132px),
    url("../assets/clouds-bg.jpg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%, 100% auto;
}

/* footer legal links (injected by js) */
.site-footer__legal-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 12px 20px; }
.site-footer__legal-nav a { font-size: 0.8rem; color: var(--ink-soft); }
.site-footer__legal-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   product demo video
   ============================================================ */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}
.video iframe, .video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--ink-soft);
  background: radial-gradient(120% 120% at 50% 34%, color-mix(in srgb, var(--accent) 18%, var(--paper)), var(--paper));
}
.video__play { opacity: 0.85; }
.video__ph span { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }

/* ============================================================
   reveal-on-scroll
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
/* gentle stagger across product tiles */
.products .card:nth-child(2).reveal { transition-delay: 0.06s; }
.products .card:nth-child(3).reveal { transition-delay: 0.12s; }
.products .card:nth-child(4).reveal { transition-delay: 0.18s; }
.products .card:nth-child(5).reveal { transition-delay: 0.24s; }

/* ============================================================
   responsive: mobile nav
   ============================================================ */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    gap: 4px;
    padding: 16px var(--gut) 28px;
    background: rgba(230, 229, 225, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav a { padding: 12px 0; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .nav a::after { display: none; }
}

/* ============================================================
   motion preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}