/* ─────────────────────────────────────────────────────────────────
 * motion-pro.css · purposeful, on-brand landing motion.
 *
 * Layered on top of principal.css. All effects are GPU-accelerated
 * (transform / opacity only, no layout thrash) and gated under
 * `.js-anim` so SSR-only renders see the static layout. A
 * `prefers-reduced-motion` fallback at the bottom disables every
 * transform / keyframe / transition in this file.
 *
 * Engineering principle (from the brief): editorial, calm,
 * confident. No bouncy springs, no lateral wobble. Eased moves
 * under 1.2s except the hero loop. No CLS — every animated element
 * either keeps its space (opacity-only) or is positioned
 * absolutely.
 *
 * Companion JS lives in src/components/marketing/MarketingReveal.tsx.
 * ───────────────────────────────────────────────────────────────── */

/* ── 1. Hero entrance polish ─────────────────────────────────────
 * The hero h1 line reveal is already in teacher.html. Add an
 * eyebrow row fade so the FOR-ALL-TEACHERS line resolves before
 * the headline drops, and stagger the "Not three weekends." italic
 * 200ms after the first line as the brief requested. */
.js-anim .p-eyebrow-row {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-anim .p-hero.in .p-eyebrow-row,
.js-anim .p-hero .p-eyebrow-row.in {
  opacity: 1;
}

/* The italic "Not three weekends." line slides up + fades 200ms
 * after the first line. Already covered by line:nth-child(2)
 * delay, but we add a subtle X drift. */
.js-anim .p-hero h1 .line:nth-child(2) > span em {
  display: inline-block;
}

/* ── 1b. Hero load cascade (2026-05-05) ─────────────────────────
 * Every hero child reveals in sequence over ~1 s on first paint
 * so the page "unfurls" instead of slamming into view all at
 * once. The reveal observer adds `.in` to every hero element on
 * the same frame; the per-child transition-delay below is what
 * paces the cascade. Scoped to `.p-hero` so other sections
 * (How it works / Curriculum alignment / etc.) still scroll-reveal
 * one-shot when they enter the viewport.
 *
 * Cascade timeline (delay after .in lands):
 *     0 ms   eyebrow row
 *   100 ms   h1 line 1   (existing rule)
 *   240 ms   h1 line 2   (existing rule)
 *   380 ms   lede 1
 *   460 ms   lede 2 (the technical / principal companion line)
 *   540 ms   CTAs
 *   620–800 ms  stat tiles (60 ms apart, overrides default stagger)
 *   880 ms   disclaimer
 *   960 ms   sample-mark panel
 *
 * prefers-reduced-motion: the existing override at the end of
 * teacher.html zeros opacity / transform / transition for every
 * [data-anim] / [data-stagger] / h1 line so this cascade is
 * also bypassed automatically. */
.js-anim .p-hero .p-eyebrow-row.in {
  transition-delay: 0ms;
}
.js-anim .p-hero .p-hero-lede[data-anim].in {
  transition-delay: 380ms;
}
.js-anim .p-hero .p-hero-lede.p-hero-lede-tech[data-anim].in {
  transition-delay: 460ms;
}
.js-anim .p-hero .p-hero-ctas[data-anim].in {
  transition-delay: 540ms;
}
/* Stat row tiles — override the default [data-stagger]
 * 0/60/120/180 cadence so the row starts AFTER the CTAs land. */
.js-anim .p-hero .p-stat-row[data-stagger].in > *:nth-child(1) { transition-delay: 620ms; }
.js-anim .p-hero .p-stat-row[data-stagger].in > *:nth-child(2) { transition-delay: 680ms; }
.js-anim .p-hero .p-stat-row[data-stagger].in > *:nth-child(3) { transition-delay: 740ms; }
.js-anim .p-hero .p-stat-row[data-stagger].in > *:nth-child(4) { transition-delay: 800ms; }
.js-anim .p-hero .p-disclaimer[data-anim].in {
  transition-delay: 880ms;
}
.js-anim .p-hero .p-result-panel[data-anim].in {
  transition-delay: 960ms;
}

/* Ornament fade-in — the radial-gradient backdrop on `.p-hero`
 * (defined in section 10 below) appears instantly on load,
 * which makes the cream wash feel jumpy when paired with the
 * cascading content. Slide the opacity up from 0 to 1 over
 * 1.5 s with a tiny delay so the ornament settles in *behind*
 * the unfurling text, not before it. */
@keyframes p-hero-ornament-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.js-anim .p-hero::before {
  animation: p-hero-ornament-in 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms both;
}

/* ── 2. Hero · single-column stack ──────────────────────────────
 * All hero content flows in document order:
 *   eyebrow → h1 → ledes → CTAs → stat-row → disclaimer → mockup
 * The mockup is JS-appended as the last child of .container-prose
 * by setupHeroMockup(), so it naturally sits below the stats row
 * with no extra ordering tricks.
 *
 * The previous 2-column grid (1.1fr / 0.9fr at ≥900px) squeezed
 * the h1 into a ~509px left column, forcing one word per line at
 * desktop widths. Single-column gives the headline the full
 * container width; text-wrap: balance handles natural breaks.
 *
 * The defensive `overflow-x: clip` on body (in globals.css) ensures
 * a mispositioned child can never produce a horizontal scrollbar. */
.p-hero { position: relative; }
.p-hero > .container-prose {
  display: block;
}

/* H1: full container width, balanced line breaks.
 * max-width: 64rem prevents runaway line length on 4K displays
 * while letting both headline sentences each fit on one line at
 * 1280–1440px viewport widths. */
.p-hero h1 {
  max-width: 64rem;
  width: 100%;
  text-wrap: balance;
}

/* Mockup: centered below the disclaimer on all viewport widths.
 * aspect-ratio: 3/2 preserves card proportions as it scales;
 * max-width: min(480px, 100%) keeps it from stretching too wide. */
.p-hero-mockup {
  position: relative;
  width: 100%;
  max-width: min(480px, 100%);
  aspect-ratio: 3 / 2;
  margin: 4rem auto 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  pointer-events: none;
  will-change: transform;
}
.p-hero-mockup-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-mute);
  opacity: 0;
  /* Faster crossfade + z-index discipline (item 7f): the inactive
   * stage drops below the active one so "Drop the essay…" text
   * never overlaps the markbook rows during the transition. */
  transition: opacity 250ms ease;
  z-index: 0;
  pointer-events: none;
}
.p-hero-mockup-stage[data-active="true"] {
  opacity: 1;
  z-index: 1;
}
.p-hero-mockup-stage--upload .icon {
  width: 56px;
  height: 56px;
  border: 1.5px dashed var(--rule-strong);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.p-hero-mockup-stage--read .pass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(47, 182, 164, 0.18) 45%,
    rgba(47, 182, 164, 0.32) 50%,
    rgba(47, 182, 164, 0.18) 55%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: highlight-pass 1800ms cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
.p-hero-mockup-stage--rubric {
  flex-direction: column;
  gap: 4px;
  padding: 16px;
}
.p-hero-mockup-stage--rubric .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 220px;
  font-size: 11px;
}
.p-hero-mockup-stage--rubric .bar {
  display: inline-block;
  width: 80px;
  height: 4px;
  background: var(--rule);
  margin-left: 8px;
  border-radius: 2px;
  overflow: hidden;
}
.p-hero-mockup-stage--rubric .bar > span {
  display: block;
  height: 100%;
  background: var(--teal);
  width: 0%;
  transition: width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-hero-mockup-stage--rubric[data-active="true"] .bar > span {
  width: var(--w, 70%);
}
.p-hero-mockup-stage--markbook {
  flex-direction: column;
  align-items: stretch;
  padding: 16px 20px;
  gap: 4px;
}
.p-hero-mockup-stage--markbook .row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.p-hero-mockup-stage--markbook[data-active="true"] .row {
  opacity: 1;
  transform: none;
}
.p-hero-mockup-stage--markbook[data-active="true"] .row:nth-child(2) {
  transition-delay: 80ms;
}
.p-hero-mockup-stage--markbook[data-active="true"] .row:nth-child(3) {
  transition-delay: 160ms;
}

@keyframes highlight-pass {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── 3. Stats row ────────────────────────────────────────────────
 * Numbers count up from 0 (handled in JS). Add a hairline divider
 * draw left-to-right when the row enters viewport.
 *
 * `+1` shares the row with `80%` / `3 min` / `10×` — keeping it on
 * a single line via `white-space: nowrap` prevents the tile from
 * towering over the others when the wordmark wraps. The companion
 * `grade band` qualifier renders on the new `.p-stat-sub` line so
 * the headline number stays a single 40 px glyph. */
.p-stat-row {
  position: relative;
}
.p-stat-num {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.p-stat-sub {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
}
@media (max-width: 900px) {
  .p-stat-num { font-size: 32px; }
}
.p-stat-row::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--rule);
  transition: width 800ms cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;
}
.js-anim .p-stat-row.in::after {
  width: 100%;
}
.js-anim .p-stat-num {
  font-variant-numeric: tabular-nums;
}

/* ── 4. Four-steps hover ────────────────────────────────────────
 * The decorative SVG rail that used to run down the left side of
 * the steps was removed 2026-05-05. Hover states + the lift /
 * icon micro-rotate stay; only the connector is gone. */
.p-steps {
  position: relative;
}

.p-steps li {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.p-steps li:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px -16px rgba(15, 19, 25, 0.18);
}
.p-steps li::before {
  display: inline-block;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-steps li:hover::before {
  transform: rotate(5deg);
}

/* Step 04 (Record) right-column visual — standalone markbook
 * card. Sits inside .p-step-detail but uses its own class so the
 * `.p-steps li::before` counter never targets these rows
 * (audited 2026-05-03: counter rendered as 05/06/07 when these
 * items lived inside .p-steps). */
.p-markbook {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
}
.p-markbook li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
}
.p-markbook li:first-child { border-top: 0; }
.p-markbook .name {
  font-weight: 500;
  color: var(--ink);
}
.p-markbook .score {
  font-variant-numeric: tabular-nums;
  color: var(--ink-mute);
  font-size: 13px;
}
/* Defensive · suppress every `.p-steps li::before` counter rule
 * that might cascade to these rows (steps 05/06/07 bug). The
 * markbook list is a child of .p-step-detail which is itself
 * inside .p-steps > li, so any `.p-steps li::before` selector
 * (without `>`) reaches us. */
.p-markbook li::before,
.p-markbook li::after {
  content: none !important;
  counter-increment: none !important;
  display: none !important;
}

/* Sample-mark card lifted into the hero (item 7e). Adds the
 * extra breathing room above so it doesn't crowd the disclaimer,
 * and keeps the existing alignment-section card styling for
 * the rare case the panel shows up there in a mirror. */
.p-hero .p-result-panel--hero {
  margin-top: clamp(2rem, 5vw, 4rem);
}

/* ── 5. Alignment cards ─────────────────────────────────────────
 * Already rise + fade via [data-stagger]; add hover scale + accent
 * border on the .p-align-card itself. The card hover is teal-side. */
.p-align-card {
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              border-color 240ms ease,
              box-shadow 320ms ease;
  will-change: transform;
  position: relative;
}
.p-align-card:hover {
  transform: scale(1.02);
  border-color: var(--teal-dark);
  box-shadow: 0 18px 48px -24px rgba(47, 122, 110, 0.22);
}

/* ── 6. Sticky nav · scrolled state + active section underline ──
 *
 * `--nav-h` is the rendered height of `.p-nav` (≈72 px including
 * the bottom hairline); `scroll-padding-top` + `scroll-margin-top`
 * keep in-page anchor jumps and the partial stat tile out from
 * under the sticky bar (audited 2026-05-03). */
:root { --nav-h: 72px; }
html { scroll-padding-top: calc(var(--nav-h) + 12px); }
section[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

.p-nav {
  transition: background-color 200ms ease,
              box-shadow 200ms ease,
              backdrop-filter 200ms ease;
}
.p-nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 var(--rule), 0 6px 20px -16px rgba(15, 19, 25, 0.18);
}
.p-nav-links a[href^="#"] {
  position: relative;
}
.p-nav-links a[href^="#"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  background: var(--teal-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.p-nav-links a[href^="#"][data-active="true"]::after {
  transform: scaleX(1);
}
.p-nav-links a[href^="#"]:hover::after {
  transform: scaleX(1);
}

/* ── 7. CTA buttons · idle shimmer + hover arrow ────────────────
 * Subtle gradient sweep every 6s on the primary CTA. The arrow
 * glyph (added by JS) translates 4px on hover with a soft spring. */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  pointer-events: none;
  z-index: 0;
}
.js-anim .btn-primary[data-shimmer="on"]::before {
  animation: btn-shimmer 6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
  animation-delay: 2.4s;
}
@keyframes btn-shimmer {
  0%, 70%, 100% { transform: translateX(-110%); }
  85% { transform: translateX(110%); }
}
.btn-primary > * {
  position: relative;
  z-index: 1;
}
.btn-primary .p-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn-primary:hover {
  transform: translateY(-1px);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.btn-primary:hover .p-arrow {
  transform: translateX(4px);
}

/* ── 8. Quote typewriter reveal ─────────────────────────────────
 * JS swaps the blockquote text for a span-per-char cascade. We
 * fade the cite block in 400ms after the typing settles. */
.js-anim .p-quote blockquote .ch {
  opacity: 0;
  transition: opacity 60ms linear;
}
.js-anim .p-quote blockquote.in .ch {
  opacity: 1;
}
.js-anim .p-quote-cite {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s;
}
.js-anim .p-quote.in .p-quote-cite {
  opacity: 1;
}

/* ── 9. Footer · cascade + brand fade ───────────────────────────
 * The footer cols already inherit data-stagger via the wrapping
 * .p-footer-inner. JS adds a soft logo fade on first scroll-in. */
.js-anim .p-footer .p-footer-brand {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-anim .p-footer.in .p-footer-brand {
  opacity: 1;
  transform: none;
}
.js-anim .p-footer-col li {
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js-anim .p-footer.in .p-footer-col li {
  opacity: 1;
}
.js-anim .p-footer.in .p-footer-col li:nth-child(1) { transition-delay: 200ms; }
.js-anim .p-footer.in .p-footer-col li:nth-child(2) { transition-delay: 260ms; }
.js-anim .p-footer.in .p-footer-col li:nth-child(3) { transition-delay: 320ms; }
.js-anim .p-footer.in .p-footer-col li:nth-child(4) { transition-delay: 380ms; }

/* ── 10. Section background ornament parallax ──────────────────
 * The hero gets a faint paper-grain "ornament" that translates
 * 10–15px on scroll. Headlines never move. */
.p-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -120px;
  width: 480px;
  height: 480px;
  background: radial-gradient(
    closest-side,
    rgba(47, 182, 164, 0.05),
    transparent 70%
  );
  pointer-events: none;
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
  transition: transform 60ms linear;
  z-index: 0;
}
.p-hero > * {
  position: relative;
  z-index: 1;
}

/* ── 12. Hero copy split (brief §5) ──────────────────────────────
 * The first lede is the plain-language sentence; the second
 * lede (`.p-hero-lede-tech`) is the principal/division-office
 * companion — smaller and slightly muted so the headline /
 * subhead rhythm still belongs to the teacher reader. */
.p-hero-lede-tech {
  font-size: var(--fs-sm) !important;
  color: var(--ink-mute) !important;
  margin-top: calc(var(--sp-2) * -1) !important;
  max-width: 60ch;
}

/* ── 13. Disclaimer link (brief §6) ──────────────────────────────
 * Bumped contrast on the footnote, tabular link to
 * /methodology so the AA-contrast claim is auditable. */
.p-disclaimer {
  display: block;
  font-style: normal;
  color: var(--ink-mute) !important;
  font-size: var(--fs-xs);
  line-height: 1.5;
}
.p-disclaimer a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
}
.p-disclaimer a:hover {
  color: var(--ink);
}

/* ── 14. Sample-mark · band gap + edited badge (brief §9) ────── */
.p-result-band-row {
  margin-top: var(--sp-3) !important;
  padding-top: var(--sp-3) !important;
}
.p-crit-edited {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(184, 136, 76, 0.15);
  color: var(--amber);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.p-crit-score-was {
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-color: var(--ink-faint);
  margin-right: 6px;
  font-weight: 400;
  font-size: 14px;
}
.p-crit-score-now {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* ── 15. Testimonial · avatar + contrast bump (brief §10) ─────── */
.p-quote blockquote {
  /* Bump contrast on the cream background — the previous
   * `--ink-mute` italic failed WCAG AA. Italic stays
   * (editorial voice), only the colour moves to `--ink` so
   * the typewriter reveal stays legible mid-reveal too. */
  color: var(--ink) !important;
}
.p-quote-cite {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--sp-5);
}
.p-quote-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.p-quote-cite-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.45;
}
.p-quote-cite-text strong {
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.p-quote-cite-tag {
  color: var(--ink-mute);
  font-size: var(--fs-xs);
}

/* ── 16. CTA dl wrap · prevent awkward break (brief §11) ─────── */
.p-cta-side dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-5);
}
.p-cta-side dl > div { min-width: 0; }
.p-cta-side dt {
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}
.p-cta-side dd { margin: 0; color: var(--ink); font-weight: var(--fw-medium); }

/* ── 17. Steps wrapper isolation ────────────────────────────────
 * `isolation: isolate` keeps any future stacking-context tricks
 * scoped to the steps list (originally added for a decorative
 * SVG that has since been removed). */
.p-steps {
  position: relative;
  isolation: isolate;
}

/* ── 18. Defensive — hide agent / debug overlays (brief §13) ───
 * The "⏺ Stop Claude" pill the user reported in the hero is the
 * Claude Code preview overlay, NOT something the production
 * build ships. It cannot be removed from prod (we don't render
 * it), but as belt-and-suspenders we hide the common selectors
 * for in-page agent dev pills. Real users will never see this
 * because the overlay only exists in the agent's preview shell. */
[data-claude-toolbar],
[data-anthropic-toolbar],
[data-agent-toolbar],
.claude-stop-pill,
#__claude_dev_pill {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 11. Reduced-motion override ────────────────────────────────
 * Strict: every transform / animation / transition this file added
 * is forced to instant fades or no motion at all. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .p-eyebrow-row,
  .js-anim .p-stat-row::after,
  .p-steps li,
  .p-steps li::before,
  .p-align-card,
  .p-nav,
  .btn-primary,
  .btn-primary::before,
  .btn-primary .p-arrow,
  .js-anim .p-quote blockquote .ch,
  .js-anim .p-quote-cite,
  .js-anim .p-footer .p-footer-brand,
  .js-anim .p-footer-col li,
  .p-hero::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .js-anim .p-eyebrow-row,
  .js-anim .p-quote blockquote .ch,
  .js-anim .p-quote-cite,
  .js-anim .p-footer .p-footer-brand,
  .js-anim .p-footer-col li {
    opacity: 1 !important;
  }
  .p-hero-mockup-stage--read .pass {
    animation: none !important;
    opacity: 0 !important;
  }
  .p-stat-row::after { width: 100% !important; }
}