/* =====================================================================
   BriefDrop – responsive layout + interactions
   Loaded after styles.css (the 402px mobile design from Figma).
   Breakpoints:  base < 640  ·  tablet 640–899  ·  desktop ≥ 900  ·  wide ≥ 1280
   ===================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 60px; }
body { overflow-x: clip; -webkit-tap-highlight-color: transparent; }

/* ---------------------------------------------------------------------
   1. Fluid hardening – make the fixed-width Figma pieces shrink to any
      phone width (320px and up) instead of clipping.
   --------------------------------------------------------------------- */
.hero__actions { flex-wrap: wrap; gap: 12px; }
.hero__actions .btn--primary,
.hero__actions .btn--ghost { width: auto; flex: 1 1 150px; }
.hero__art { width: 100%; }
.hero__sticker { left: 30.35%; top: 86.8%; font-size: clamp(11px, 3.2vw, 13px); }
.hero__audience { white-space: normal; text-align: center; max-width: 340px; }

.steps__list, .briefs__list { width: 100%; }
.tilt, .tilt--1, .tilt--2, .tilt--3 { height: auto; padding: 14px 0; }
.card__art-text { font-size: clamp(24px, 8.2vw, 32px); }

.phone { width: min(354px, 100%); margin-inline: auto; }
.phone__body { width: 100%; padding: 12px 20px 24px; transform: translateX(-50%); }
.phone__greet, .drop, .daily, .tiles { width: 100%; }
.phone__greet { gap: 12px; justify-content: space-between; }
.drop__title { width: auto; }
.drop__row { width: 100%; justify-content: space-between; gap: 8px; }
.drop__row .meta { flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.phone .btn--primary { width: 100%; }
.phone .btn--start { width: auto; flex: none; }
.phone .phone__cta { width: calc(100% - 48px); border-radius: 16px; padding: 19px 20px 18px; }
.tiles { gap: 8px; }
.tile { flex: 1 1 0; min-width: 0; padding: 12px 6px; }

.journal__title { width: auto; flex: 1; }
.footer__art { left: auto; right: -6px; }

.peek__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ---------------------------------------------------------------------
   2. Sticky nav, scroll progress, mobile menu
   --------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 60; padding-top: 0;
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, backdrop-filter .3s;
}
.nav.is-stuck, .nav.menu-open {
  background: rgba(10, 10, 10, .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: rgba(249, 232, 195, .12);
}
.nav__inner { transition: padding .3s; }
.nav.is-stuck .nav__inner { padding-block: 10px; }
.nav__brand { transition: letter-spacing .3s, color .3s; }
.nav__brand:hover { letter-spacing: 2px; color: var(--cream); }

.nav__links { display: none; }
.nav__links a {
  position: relative; padding: 6px 0;
  font-weight: 600; font-size: 14px; color: var(--text-soft);
  transition: color .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--cream); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.nav__links a:hover, .nav__links a.is-active { color: #fff; }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

.nav__signup { transition: transform .2s, box-shadow .2s, filter .2s; }
.nav__signup:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -6px rgba(24, 90, 219, .7); filter: brightness(1.1); }

.nav__menu .icon { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.nav__menu[aria-expanded="true"] .icon { transform: rotate(90deg); }
.nav__menu[aria-expanded="true"] .icon--menu {
  --src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

.scrollbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scrollbar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--cream));
  transform-origin: left; transform: scaleX(var(--p, 0));
}

.nav__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  display: flex; flex-direction: column; padding: 4px 24px 24px;
  background: rgba(10, 10, 10, .985);
  border-bottom: 1px solid rgba(249, 232, 195, .12);
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity .25s, transform .25s, visibility 0s .25s;
}
.nav.menu-open .nav__panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.nav__panel a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 600; font-size: 20px; color: #fff;
  opacity: 0; transform: translateX(-14px);
  transition: opacity .35s, transform .35s, color .2s;
}
.nav__panel a::after { content: "→"; color: var(--cream); transition: transform .2s; }
.nav__panel a:hover { color: var(--cream); }
.nav__panel a:hover::after { transform: translateX(4px); }
.nav.menu-open .nav__panel a { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 55ms + 80ms); }
.nav__panel .btn { margin-top: 20px; width: 100%; border-bottom: 0; font-family: var(--f-btn); font-size: 16px; }
.nav__panel .btn::after { content: none; }

/* ---------------------------------------------------------------------
   3. Scroll reveal + hero intro
   --------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(.55em) rotate(3deg); } to { opacity: 1; transform: none; } }
.js .hero__title .w {
  display: inline-block;
  animation: rise .8s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}

/* hero parallax + floating sticker */
.hero__art img { transition: transform .6s cubic-bezier(.2,.8,.2,1);
  transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 0) rotate(calc(var(--px, 0) * 1.4deg)); }
.hero__sticker { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -14px); transition: translate .5s cubic-bezier(.2,.8,.2,1); animation: float 5s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translate(-50%, -50%) rotate(-15.43deg); }
  50%      { transform: translate(-50%, calc(-50% - 7px)) rotate(-13deg); }
}

/* ---------------------------------------------------------------------
   4. Hover / press micro-interactions
   --------------------------------------------------------------------- */
.btn, .cta { position: relative; overflow: hidden; isolation: isolate;
  transition: filter .2s, transform .2s, box-shadow .25s, translate .25s cubic-bezier(.2,.8,.2,1); }
.btn::after, .cta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn:hover::after, .cta:hover::after { transform: translateX(120%); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.btn:hover, .cta:hover { transform: translateY(-2px); }
.btn--primary:hover, .cta--blue:hover { box-shadow: 0 12px 28px -8px rgba(24, 90, 219, .75); }
.cta--red:hover { box-shadow: 0 12px 28px -8px rgba(160, 30, 18, .65); }
.btn--ghost:hover { background: rgba(249, 232, 195, .1); border-color: var(--cream); box-shadow: none; }
.btn:active, .cta:active { transform: translateY(1px) scale(.985); }
.cta .icon { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.cta:hover .icon { transform: translateX(5px); }

/* steps */
.step__art { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.step__num { transition: transform .35s cubic-bezier(.3,1.5,.5,1), background-color .3s; }
@media (hover: hover) {
  .step:hover .step__art { transform: translateY(-5px) rotate(-3deg) scale(1.05); }
  .step:hover .step__num { transform: scale(1.12) rotate(-8deg); background: var(--red); }
}

/* brief cards: straighten + lift, art zoom */
.tilt .card {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, border-color .45s;
}
.card__art img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) {
  .tilt:hover .card, .tilt:focus-within .card {
    transform: rotate(0deg) translateY(-8px) scale(1.025);
    box-shadow: 0 28px 60px -16px rgba(24, 90, 219, .5), 0 0 0 1px rgba(249, 232, 195, .25);
    border-color: rgba(249, 232, 195, .5);
  }
  .tilt:hover .card__art img { transform: scale(1.08) rotate(-2deg); }
  .tilt:hover .card__art-text { transform: rotate(0deg) scale(1.04); }
}
.card__art-text { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.card__more { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.card__more:hover { text-decoration-color: currentColor; }

/* phone tiles */
.tile { transition: transform .2s cubic-bezier(.3,1.5,.5,1), background-color .2s; cursor: pointer; }
.tile:hover { background: #1c1c1c; transform: translateY(-3px); }
.tile:active { transform: scale(.94); }
.tile:focus-visible, .day__mark:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.tile[aria-pressed="true"] .icon { background: var(--primary); }
.phone__streak .icon { transform-origin: 50% 90%; animation: flicker 1.8s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  35% { transform: scale(1.07, 1.14) rotate(3deg); }
  65% { transform: scale(.97, 1.04) rotate(-1deg); }
}
.phone .btn--primary { cursor: pointer; }

/* journal */
.day__mark { cursor: pointer; transition: background-color .25s, transform .2s; }
.day__mark:hover { transform: scale(1.12); }
.day__mark .icon { transition: opacity .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.day__mark--off { color: var(--text-mute); }
.day__mark--off .icon { opacity: 0; transform: scale(.3); }
.meter i { transition: width 1.2s cubic-bezier(.2,.8,.2,1) .45s; }
.js .journal:not(.is-filled) .meter i { width: 0; }

/* stories – stacking cards on small screens */
.story { position: sticky; top: calc(76px + var(--i, 0) * 14px); transition: translate .35s cubic-bezier(.2,.8,.2,1), rotate .35s, box-shadow .35s; }

/* FAQ – smooth accordion */
.faq__item { gap: 0; transition: background-color .25s; }
.faq__q span { transition: color .2s; }
.faq__q:hover span { color: var(--cream); }
.faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.faq__clip { min-height: 0; overflow: hidden; }
.faq__a { padding-top: 12px; }
.faq__item.is-collapsed .faq__panel { grid-template-rows: 0fr; opacity: 0; }
.faq__item.is-collapsed .faq__clip { visibility: hidden; transition: visibility 0s .4s; }

/* footer */
.footer__group a, .footer__legal a { position: relative; width: fit-content; transition: color .2s, translate .2s; }
.footer__group a:hover, .footer__legal a:hover { text-decoration: none; color: var(--cream); translate: 4px 0; }
.footer__art { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.footer__close { cursor: pointer; }
.footer__close .icon { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.footer__close:hover .icon { transform: rotate(90deg) scale(1.25); }

.burst { position: fixed; z-index: 90; width: 18px; height: 18px; pointer-events: none; color: var(--primary); }

/* ---------------------------------------------------------------------
   5. Brief dialog + honest timer
   --------------------------------------------------------------------- */
html:has(dialog[open]) { overflow: hidden; }
.dialog {
  width: min(92vw, 520px); max-height: calc(100dvh - 32px); padding: 0; overflow: auto;
  color: #fff; background: var(--surface);
  border: 1px solid rgba(249, 232, 195, .25); border-radius: 24px;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,.85);
}
.dialog::backdrop { background: rgba(5, 5, 5, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialog[open] { animation: dialog-in .4s cubic-bezier(.2,.9,.2,1); }
.dialog[open]::backdrop { animation: fade-in .3s ease; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(28px) scale(.95); } }
@keyframes fade-in { from { opacity: 0; } }
.dialog__close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: rgba(10,10,10,.6); border: 1px solid rgba(255,255,255,.15);
  transition: transform .25s cubic-bezier(.3,1.5,.5,1), background-color .2s;
}
.dialog__close:hover { transform: rotate(90deg); background: var(--red); }
.dialog__close:focus-visible, .timer button:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.dialog__art {
  height: 196px; padding: 22px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 120%, rgba(24,90,219,.28), transparent 65%);
  border-bottom: 1px solid var(--surface-2);
}
.dialog__art img { width: auto; height: 170px; max-width: 100%; object-fit: contain; }
.dialog__body { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.dialog .chip--design { color: #3ecf8e; }
.dialog .chip--writing { color: #7aa5ff; }
.dialog__title { font-family: var(--f-display); font-weight: 700; font-size: 24px; line-height: 1.2; }
.dialog__text { font-size: 15px; line-height: 1.6; color: var(--text-soft); }
.timer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg);
}
.timer__label { display: block; font-size: 12px; color: var(--text-mute); }
.timer__time { font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1.2; font-variant-numeric: tabular-nums; transition: color .3s; }
.timer.is-running .timer__time { color: var(--cream); }
.timer.is-running .timer__label::before { content: "● "; color: #ff5a4a; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.timer__btns { display: flex; gap: 8px; }
.timer .btn { padding: 12px 18px; }

/* ---------------------------------------------------------------------
   6. Tablet  (640 – 899)
   --------------------------------------------------------------------- */
@media (min-width: 640px) {
  .section__inner { max-width: 640px; padding: 56px 32px; }
  .hero__copy { padding: 24px 32px; }
  .hero__title { font-size: 40px; line-height: 1.3; }
  .hero__lede { font-size: 18px; line-height: 1.6; }
  .hero__visual { max-width: 560px; }
  .hero__sticker { font-size: 15px; }
  .hero__audience { font-size: 13px; max-width: none; }
  .steps__title, .briefs__title { font-size: 28px; }
  .briefs__head { max-width: none; }
  .briefs__stack { max-width: 480px; width: 100%; margin-inline: auto; }
  .peek__title, .progress__title { font-size: 32px; line-height: 1.3; }
  .stories__title, .faq__title { font-size: 36px; line-height: 1.3; }
  .closing__title { font-size: 40px; line-height: 1.25; }
  .footer__inner { max-width: 640px; }
  .nav__inner { max-width: 640px; padding-inline: 32px; }
}

/* ---------------------------------------------------------------------
   7. Desktop  (≥ 900)
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .nav__inner { max-width: 1120px; padding: 18px 40px; }
  .nav__links { display: flex; gap: 32px; }
  .nav__menu, .nav__panel { display: none; }

  .section__inner { max-width: 1120px; padding: 88px 40px; gap: 20px; }

  /* Hero */
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; column-gap: 48px;
          max-width: 1160px; margin-inline: auto; padding: 24px 40px 72px; }
  .hero__copy { max-width: none; margin: 0; padding: 0; gap: 32px; }
  .hero__title { font-size: clamp(40px, 4.3vw, 58px); line-height: 1.2; text-wrap: balance; }
  .hero__lede { font-size: 18px; max-width: 540px; }
  .hero__kicker { font-size: 15px; }
  .hero__actions .btn { padding-block: 21px; font-size: 16px; }
  .hero__visual { max-width: none; margin: 0; }
  .hero__art { width: min(100%, 580px); }
  .hero__sticker { font-size: 18px; padding: 6px 16px; }
  .hero__audience { font-size: 13px; }

  /* Steps – three cards */
  .steps__title { font-size: clamp(28px, 3vw, 38px); }
  .steps__list { flex-direction: row; gap: 24px; }
  .steps .rule { display: none; }
  .step { flex: 1 1 0; min-width: 0; min-height: 300px; padding: 28px; border-radius: 24px;
          background: var(--surface); border: 1px solid var(--line); overflow: hidden;
          transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .4s; }
  .step:hover { transform: translateY(-6px); border-color: rgba(249,232,195,.3); box-shadow: 0 24px 50px -24px rgba(160,30,18,.6); }
  .step .step__art { top: 18px; right: 18px; }
  .step--1 .step__art { width: 108px; height: 108px; }
  .step--1 .step__body, .step--2 .step__body, .step--3 .step__body { padding-top: 40px; }
  .step__title { font-size: 18px; }
  .step__text { font-size: 15px; }

  /* Briefs – three cards */
  .briefs__title { font-size: clamp(26px, 3vw, 36px); }
  .briefs__sub { font-size: 17px; }
  .briefs__list { gap: 32px; }
  .briefs__stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: none; }
  .tilt { align-items: stretch; padding: 22px 6px; }
  .card__details { flex: 1; }
  .card__top { flex: 1; }
  .card { display: flex; flex-direction: column; }
  .briefs__list > .btn { align-self: center; width: auto; min-width: 300px; }

  /* Peek – copy + phone */
  .peek .section__inner { display: grid; grid-template-columns: minmax(0, 1fr) 354px; column-gap: 80px; align-items: center; }
  .peek__copy { gap: 20px; }
  .peek__title { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.25; }
  .peek__lede { font-size: 18px; }
  .peek__feature { font-size: 15px; }
  .peek .cta { max-width: 340px; }

  /* Progress – copy + journal */
  .progress .section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px;
                              grid-template-rows: repeat(4, auto) 1fr; align-items: start; }
  .progress .section__inner > * { grid-column: 1; }
  .progress .section__inner > .journal { grid-column: 2; grid-row: 1 / -1; align-self: center; }
  .progress__title { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.25; }
  .progress__lede { font-size: 18px; }
  .benefit__title { font-size: 17px; }
  .benefit__text { font-size: 15px; }
  .journal { padding: 28px; }
  .journal__title { font-size: 24px; }

  /* Stories – three cards */
  .stories__title { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.25; max-width: 780px; }
  .stories__lede { font-size: 15px; max-width: 560px; }
  .stories__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
  .story { position: static; }
  .story:nth-child(1):hover { translate: 0 -8px; rotate: -1.2deg; box-shadow: 0 24px 50px -20px #5739d8; }
  .story:nth-child(2):hover { translate: 0 -8px; rotate: 1deg; box-shadow: 0 24px 50px -20px #077e4e; }
  .story:nth-child(3):hover { translate: 0 -8px; rotate: -1deg; box-shadow: 0 24px 50px -20px #fdb11a; }
  .stories__foot { margin-top: 12px; font-size: 15px; }

  /* FAQ – heading left, accordion right */
  .faq .section__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px;
                         grid-template-rows: repeat(4, auto) 1fr; align-items: start; }
  .faq .section__inner > * { grid-column: 1; }
  .faq .section__inner > .faq__list { grid-column: 2; grid-row: 1 / -1; }
  .faq__title { font-size: clamp(28px, 3.1vw, 42px); line-height: 1.25; }
  .faq__item:first-child { padding-top: 0; border-top: 0; }
  .faq__q span { font-size: 20px; }

  /* Closing */
  .closing__inner { max-width: 760px; padding-block: 104px; }
  .closing__title { font-size: clamp(36px, 4vw, 52px); line-height: 1.2; text-wrap: balance; }
  .closing__lede { font-size: 18px; }
  .closing .cta { max-width: 360px; height: 60px; }

  /* Footer – real grid */
  .footer__inner { max-width: 1120px; height: auto; padding: 80px 40px 40px; overflow: visible;
    display: grid; grid-template-columns: 1.3fr 1.1fr 1fr; column-gap: 48px; row-gap: 20px; align-items: start;
    grid-template-areas: "brand nav art" "tag nav art" "cta nav art" "rule rule rule" "close copy legal"; }
  .footer__inner > * { position: static; }
  .footer__brand { grid-area: brand; }
  .footer__tag { grid-area: tag; max-width: 340px; }
  .footer__cta { grid-area: cta; width: fit-content; }
  .footer__nav { grid-area: nav; height: auto; gap: 32px; }
  .footer__art { grid-area: art; justify-self: end; width: 220px; height: 220px; margin-top: -24px; }
  .footer__rule { grid-area: rule; margin-top: 28px; }
  .footer__close { grid-area: close; }
  .footer__copy { grid-area: copy; white-space: normal; }
  .footer__legal { grid-area: legal; justify-self: end; }
}

/* ---------------------------------------------------------------------
   8. Wide (≥ 1280)
   --------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .section__inner { max-width: 1200px; }
  .hero, .nav__inner, .footer__inner { max-width: 1200px; }
}

/* ---------------------------------------------------------------------
   9. Reduced motion – keep everything visible and still
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .story { position: static; }
}