/* ============================================================
   TypeFlow Paper - all selectors scoped to .rt-embed.rt-paper.
   Inline CSS only - does NOT load typeflow.css.
   ============================================================ */

.rt-embed.rt-paper{
  /* DARK MODE PALETTE
     Three-tier dark stripe to mirror the light version's bg/bg-2/bg-3
     rhythm. Page bg warm dark espresso, sections alternate slightly.
     --rp-ink stays #0F0E0C - used as the bg of ink-letter cards (Y, A)
     and matches the legacy "deep ink" role. --rp-ink-soft now means
     "muted-cream text on dark", flipped from "soft-ink-on-cream". */
  --rp-bg:#171310;            /* page bg - warm dark espresso */
  --rp-bg-2:#1F1A14;          /* lighter stripe - section variant */
  --rp-bg-3:#2A241D;          /* deepest stripe - speed-bar tracks, FAQ panels */
  --rp-ink:#0F0E0C;           /* unchanged - used as ink-letter card bg */
  --rp-ink-soft:#D8CFB8;      /* muted cream - body text on dark */
  --rp-text:#F4ECDC;          /* primary cream - main text */
  --rp-mute:rgba(244,236,220,0.62);
  --rp-mute-2:rgba(244,236,220,0.38);
  --rp-line:rgba(244,236,220,0.14);
  --rp-red:#D8392C;           /* slightly punched - pops on dark */
  --rp-red-deep:#B22B22;
  --rp-yellow:#F4D33A;        /* unchanged - perfect on dark already */
  --rp-cream:#FBF5C8;         /* unchanged - used for cream paper insets */
  --rp-blue:#3F73BD;          /* lifted - visible on dark */
  --rp-green:#5F9A4A;         /* lifted */
  --rp-dark:#0A0908;          /* deepest - closing CTA, big bar */

  --rp-serif:'DM Serif Display','Times New Roman',serif;
  --rp-mono:'Special Elite','Courier New',monospace;
  --rp-sans-heavy:'Anton','Arial Black',sans-serif;
  --rp-body:'Inter','Helvetica Neue',Arial,sans-serif;

  /* Full-width breakout - escapes Payhip's narrow content column so
     section backgrounds (bigbar marquee, dark CTA) bleed full-viewport. */
  position:relative;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);

  display:block;
  background:var(--rp-bg);
  color:var(--rp-text);
  font-family:var(--rp-body);
  line-height:1.55;
  text-align:left;
  overflow:hidden;
  /* Grain dots inverted - cream-tinted on dark instead of ink-on-cream */
  background-image:
    radial-gradient(rgba(244,236,220,0.045) 1px, transparent 1px),
    radial-gradient(rgba(244,236,220,0.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--rp-bg) 0%, var(--rp-bg-2) 100%);
  background-size: 3px 3px, 7px 7px, 100% 100%;
  background-position: 0 0, 1.5px 1.5px, 0 0;
  /* hairline at top - barely visible on dark, sets a clean edge */
  border-top:1px solid var(--rp-line);
}
.rt-embed.rt-paper *{box-sizing:border-box}
.rt-embed.rt-paper img{max-width:100%;height:auto;display:block}
.rt-embed.rt-paper a{color:inherit;text-decoration:none}

.rt-embed.rt-paper .rt-p-grain{
  position:absolute; inset:0;
  pointer-events:none; z-index:1;
  /* Inverted from the light version - screen-blend cream noise onto dark
     bg so paper grain reads as a subtle dust/sheen instead of dark spots */
  opacity:0.35; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.86 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- containers ---------- */
.rt-embed.rt-paper .rt-p-container{
  position:relative; z-index:2;
  max-width:1180px; margin:0 auto;
  padding:0 28px;
}
@media (max-width:640px){.rt-embed.rt-paper .rt-p-container{padding:0 18px}}

.rt-embed.rt-paper .rt-p-section{
  position:relative; z-index:2;
  padding:88px 0 96px;
  border-top:1px solid var(--rp-line);
}
@media (max-width:720px){.rt-embed.rt-paper .rt-p-section{padding:64px 0 72px}}

/* Section variants - in dark mode all three are dark, just three tiers
   of warmth. section-dark stays the deepest (--rp-dark) for closing CTA
   and gets a slight contrast bump against the page bg so it still reads
   as "the darkest cell" the way it did in light mode. */
.rt-embed.rt-paper .rt-p-section-light{background:var(--rp-bg)}
.rt-embed.rt-paper .rt-p-section-paper{background:var(--rp-bg-2)}
.rt-embed.rt-paper .rt-p-section-dark{
  background:var(--rp-dark);
  color:var(--rp-text);
  border-top:3px solid #000;
}

/* ---------- HERO ---------- */
.rt-embed.rt-paper .rt-p-hero{
  position:relative; z-index:2;
  padding:56px 28px 88px;
  text-align:center;
  overflow:hidden;
  border-bottom:1px solid var(--rp-line);
}
@media (max-width:720px){.rt-embed.rt-paper .rt-p-hero{padding:40px 18px 64px}}

.rt-embed.rt-paper .rt-p-kicker{
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
  margin:0 auto 36px;
  font-family:var(--rp-mono);
  font-size:13px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-kicker-stamp{
  display:inline-block;
  background:var(--rp-red);
  color:var(--rp-cream);
  padding:6px 12px 5px;
  font-family:var(--rp-sans-heavy);
  font-size:12px;
  letter-spacing:0.18em;
  transform:rotate(-2deg);
  box-shadow:2px 2px 0 var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-kicker-text{color:var(--rp-ink-soft);font-weight:500}

/* Ransom-note title - V1 letter design restored (May 22 2026). Letters
   are static CSS-styled colored rectangles with mixed fonts + per-letter
   rotation. No variant cycling. */
.rt-embed.rt-paper .rt-p-title{
  margin:0 auto;
  padding:0;
  font-size:0;
  line-height:1;
  letter-spacing:0;
  display:flex; flex-wrap:wrap;
  gap:12px 20px;
  justify-content:center; align-items:flex-end;
  max-width:1000px;
}
.rt-embed.rt-paper .rt-p-word{
  display:inline-flex;
  flex-wrap:nowrap;
  align-items:flex-end;
  gap:6px 10px;
  flex-shrink:0;
}
.rt-embed.rt-paper .rt-p-letter{
  display:inline-block;
  font-size:clamp(38px, 9.5vw, 142px);
  line-height:0.92;
  padding:6px 14px 4px;
  margin:0;
  letter-spacing:-0.02em;
  font-weight:900;
  box-shadow:3px 4px 0 rgba(15,14,12,0.32), 6px 8px 14px rgba(15,14,12,0.18);
  opacity:0;
  /* 12fps stop-motion bouncy drop - the rt-p-drop keyframes below pre-bake
     the cubic-bezier(.18,.7,.28,1.18) path at 12 sample points. step-end
     timing snaps between frames. */
  animation:rt-p-drop 1s step-end forwards;
  will-change:transform,opacity;
  user-select:none;
}
@media (max-width:640px){
  .rt-embed.rt-paper .rt-p-title{gap:10px 14px}
  .rt-embed.rt-paper .rt-p-word{gap:4px 6px}
  .rt-embed.rt-paper .rt-p-letter{padding:4px 9px 3px}
}
@media (max-width:420px){
  .rt-embed.rt-paper .rt-p-title{flex-direction:column;align-items:center;gap:14px}
  .rt-embed.rt-paper .rt-p-letter{padding:3px 7px 2px;font-size:clamp(28px,7.8vw,46px)}
}

/* Per-character styling - bg colour, text colour, font-family, rotation,
   drop-in animation-delay. Each letter is a unique paper clipping. */
.rt-embed.rt-paper .rt-p-l-T{background:var(--rp-yellow);color:var(--rp-ink);font-family:var(--rp-sans-heavy);--rp-rot:-4deg;animation-delay:0.05s}
.rt-embed.rt-paper .rt-p-l-Y{background:var(--rp-ink);color:var(--rp-yellow);font-family:var(--rp-serif);font-style:italic;--rp-rot:3deg;animation-delay:0.12s}
.rt-embed.rt-paper .rt-p-l-P1{background:var(--rp-red);color:var(--rp-cream);font-family:var(--rp-sans-heavy);--rp-rot:-2deg;animation-delay:0.18s}
.rt-embed.rt-paper .rt-p-l-E1{background:var(--rp-cream);color:var(--rp-ink);font-family:var(--rp-mono);--rp-rot:5deg;animation-delay:0.25s}
.rt-embed.rt-paper .rt-p-l-F{background:var(--rp-blue);color:var(--rp-cream);font-family:var(--rp-serif);--rp-rot:-1deg;animation-delay:0.32s}
.rt-embed.rt-paper .rt-p-l-L{background:var(--rp-yellow);color:var(--rp-red);font-family:var(--rp-mono);--rp-rot:-3deg;animation-delay:0.38s}
.rt-embed.rt-paper .rt-p-l-O{background:var(--rp-red);color:var(--rp-yellow);font-family:var(--rp-serif);font-style:italic;--rp-rot:4deg;animation-delay:0.45s;border-radius:8px}
.rt-embed.rt-paper .rt-p-l-W{background:var(--rp-green);color:var(--rp-cream);font-family:var(--rp-sans-heavy);--rp-rot:-5deg;animation-delay:0.52s}
.rt-embed.rt-paper .rt-p-l-P2{background:var(--rp-cream);color:var(--rp-ink);font-family:var(--rp-mono);--rp-rot:2deg;animation-delay:0.62s}
.rt-embed.rt-paper .rt-p-l-A{background:var(--rp-ink);color:var(--rp-yellow);font-family:var(--rp-sans-heavy);--rp-rot:-4deg;animation-delay:0.68s}
.rt-embed.rt-paper .rt-p-l-P3{background:var(--rp-red);color:var(--rp-cream);font-family:var(--rp-serif);font-style:italic;--rp-rot:6deg;animation-delay:0.74s}
.rt-embed.rt-paper .rt-p-l-E2{background:var(--rp-yellow);color:var(--rp-ink);font-family:var(--rp-sans-heavy);--rp-rot:-2deg;animation-delay:0.80s}
.rt-embed.rt-paper .rt-p-l-R{background:var(--rp-cream);color:var(--rp-ink);font-family:var(--rp-serif);--rp-rot:3deg;animation-delay:0.86s}

/* 13 keyframes sampling the original bouncy cubic-bezier(.18,.7,.28,1.18) curve.
   Combined with steps(12, end) on the animation, each stop-motion frame lands
   on a real position along the smooth bounce - fast fall, overshoot at ~50%,
   springback at ~83%, settle at 100%. */
@keyframes rt-p-drop{
  0%      { transform: translateY(-160%) rotate(calc(var(--rp-rot,0deg) + 35deg)); opacity:0; }
  8.33%   { transform: translateY(-110%) rotate(calc(var(--rp-rot,0deg) + 28deg)); opacity:0.18; }
  16.67%  { transform: translateY(-65%)  rotate(calc(var(--rp-rot,0deg) + 21deg)); opacity:0.45; }
  25%     { transform: translateY(-25%)  rotate(calc(var(--rp-rot,0deg) + 14deg)); opacity:0.72; }
  33.33%  { transform: translateY(-3%)   rotate(calc(var(--rp-rot,0deg) + 6deg));  opacity:0.95; }
  41.67%  { transform: translateY(6%)    rotate(calc(var(--rp-rot,0deg) - 1deg));  opacity:1; }
  50%     { transform: translateY(8%)    rotate(calc(var(--rp-rot,0deg) - 3deg));  opacity:1; }
  58.33%  { transform: translateY(7%)    rotate(calc(var(--rp-rot,0deg) - 2deg));  opacity:1; }
  66.67%  { transform: translateY(3%)    rotate(calc(var(--rp-rot,0deg) - 1deg));  opacity:1; }
  75%     { transform: translateY(-1%)   rotate(calc(var(--rp-rot,0deg) + 0.5deg)); opacity:1; }
  83.33%  { transform: translateY(-2%)   rotate(calc(var(--rp-rot,0deg) + 1deg));  opacity:1; }
  91.67%  { transform: translateY(-1%)   rotate(calc(var(--rp-rot,0deg) + 0.5deg)); opacity:1; }
  100%    { transform: translateY(0)     rotate(var(--rp-rot,0deg));               opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .rt-embed.rt-paper .rt-p-letter{animation:none;opacity:1;transform:rotate(var(--rp-rot,0deg))}
}

/* Tagline */
.rt-embed.rt-paper .rt-p-tagline{
  margin:48px auto 0; max-width:680px;
  font-family:var(--rp-serif);
  font-size:clamp(20px, 2.4vw, 30px);
  line-height:1.34;
  color:var(--rp-ink);
  font-style:italic;
}
.rt-embed.rt-paper .rt-p-tagline strong{
  font-style:normal;
  font-family:var(--rp-sans-heavy);
  font-weight:400;
  letter-spacing:0.02em;
  display:inline-block;
  margin-top:8px;
  padding:2px 10px 0;
  background:var(--rp-ink);
  color:var(--rp-yellow);
  transform:rotate(-1deg);
}

/* Stamp CTA */
.rt-embed.rt-paper .rt-p-stamp-btn{
  display:inline-flex; flex-direction:column; align-items:center;
  gap:4px;
  margin:48px auto 0;
  padding:22px 56px 18px;
  border:4px solid var(--rp-red);
  background:transparent;
  color:var(--rp-red);
  font-family:var(--rp-sans-heavy);
  text-transform:uppercase;
  letter-spacing:0.06em;
  cursor:pointer;
  transform:rotate(-4deg);
  position:relative;
  transition:transform 0.22s cubic-bezier(.2,.7,.3,1.4), background 0.22s ease, color 0.22s ease;
  box-shadow:5px 5px 0 var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-stamp-btn::before{
  content:""; position:absolute; inset:6px;
  border:2px dashed var(--rp-red);
  pointer-events:none;
  opacity:0.5;
}
.rt-embed.rt-paper .rt-p-stamp-text{
  font-size:clamp(26px, 3.5vw, 40px);
  line-height:1;
}
.rt-embed.rt-paper .rt-p-stamp-sub{
  font-family:var(--rp-mono);
  font-size:11px;
  letter-spacing:0.18em;
  font-weight:400;
  text-transform:uppercase;
  margin-top:4px;
}
.rt-embed.rt-paper .rt-p-stamp-btn:hover{
  transform:rotate(-2deg) scale(1.04);
  background:var(--rp-red);
  color:var(--rp-cream);
}
.rt-embed.rt-paper .rt-p-stamp-btn:hover::before{border-color:var(--rp-cream)}

.rt-embed.rt-paper .rt-p-stamp-btn-big{
  margin-top:36px;
  border-color:var(--rp-yellow);
  color:var(--rp-yellow);
  box-shadow:6px 6px 0 var(--rp-bg);
}
.rt-embed.rt-paper .rt-p-stamp-btn-big::before{border-color:var(--rp-yellow)}
.rt-embed.rt-paper .rt-p-stamp-btn-big:hover{
  background:var(--rp-yellow); color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-stamp-btn-big:hover::before{border-color:var(--rp-ink)}

/* Mid-page CTA - placed after the features grid. Visually quieter than
   the hero/closing CTAs so it doesn't compete with them; just enough
   presence that a convinced buyer can click without scrolling further. */
.rt-embed.rt-paper .rt-p-mid-cta{
  margin-top:48px;
  display:flex;
  justify-content:center;
}
.rt-embed.rt-paper .rt-p-stamp-btn-mid{
  /* inherits .rt-p-stamp-btn base styling - no override needed beyond
     the centering wrapper above. The default red border + cream bg is
     already the right level of presence for a mid-page CTA. */
  margin-top:0;
}

/* Trust row - combines the Free+Studio mark and the Lifetime-updates mark
   on one line. Both lines reuse `.rt-p-free-studio` styling for visual
   consistency; the wrapping row handles spacing + centering. */
.rt-embed.rt-paper .rt-p-trust-row{
  margin:26px auto 0;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 24px;
}
.rt-embed.rt-paper .rt-p-trust-row .rt-p-free-studio{margin:0}

/* Free + Studio reassurance line - one font, no box. Plain editorial mark. */
.rt-embed.rt-paper .rt-p-free-studio{
  margin:26px auto 0;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--rp-mono);
  font-size:13px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--rp-ink-soft);
}
.rt-embed.rt-paper .rt-p-free-studio strong{
  font-family:inherit;
  font-weight:700;
  color:var(--rp-red);
  letter-spacing:0.18em;
}
.rt-embed.rt-paper .rt-p-fs-check{
  color:var(--rp-red);
  font-family:inherit;
  font-weight:700;
  font-size:15px;
  line-height:1;
}

/* ---------- FRIEND QUOTE ---------- */
.rt-embed.rt-paper .rt-p-friend{
  position:relative; z-index:2;
  background:var(--rp-bg);
  padding:56px 28px 64px;
  border-top:1px solid var(--rp-line);
  border-bottom:1px solid var(--rp-line);
}
@media (max-width:640px){.rt-embed.rt-paper .rt-p-friend{padding:44px 18px 48px}}
.rt-embed.rt-paper .rt-p-friend-inner{
  max-width:760px; margin:0 auto;
  position:relative;
}
.rt-embed.rt-paper .rt-p-friend-card{
  background:#FFF8E6;
  border:2px solid var(--rp-ink);
  padding:24px 28px 22px;
  box-shadow:6px 6px 0 var(--rp-ink);
  transform:rotate(-1.1deg);
  position:relative;
  font-family:var(--rp-body);
  font-size:clamp(17px, 1.8vw, 21px);
  line-height:1.55;
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-friend-card::before{
  content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:78px; height:22px;
  background:rgba(244,211,58,0.78);
  border-left:1px solid rgba(15,14,12,0.18);
  border-right:1px solid rgba(15,14,12,0.18);
  box-shadow:0 2px 4px rgba(15,14,12,0.18);
}
.rt-embed.rt-paper .rt-p-friend-card p{margin:0}
.rt-embed.rt-paper .rt-p-friend-attr{
  display:block; margin-top:14px;
  font-family:var(--rp-mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--rp-mute);
}
.rt-embed.rt-paper .rt-p-friend-attr strong{color:var(--rp-ink);font-weight:400}

/* ---------- SPEED COMPARISON ----------
   4-way time-to-result table. TypeFlow Paper is the highlight row (yellow
   paper, slight tilt). Three "long way" rows show how long each manual
   alternative takes. Bar widths are roughly proportional to time:
     - Paper       5s        → 1% bar (min-width 6px so it's visible)
     - AE         12min      → 60% bar (5s = 1, 12min ≈ 144× → capped visually)
     - Photoshop  20min      → 100% bar (the longest, Nathan's method)
     - Resolve native: NOT POSSIBLE - empty bar with × marker. */
.rt-embed.rt-paper .rt-p-section-lead{
  margin:10px auto 30px;
  max-width:640px;
  text-align:center;
  font-family:var(--rp-serif);
  font-style:italic;
  font-size:clamp(17px, 1.7vw, 21px);
  line-height:1.4;
  color:var(--rp-ink-soft);
}
.rt-embed.rt-paper .rt-p-speed-table{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:880px;
  margin:0 auto;
}
.rt-embed.rt-paper .rt-p-speed-row{
  display:grid;
  grid-template-columns:minmax(180px, 1.3fr) 3fr minmax(150px, 1fr);
  align-items:center;
  gap:20px;
  padding:18px 22px;
  background:var(--rp-bg);
  border:2px solid var(--rp-ink);
  box-shadow:3px 3px 0 var(--rp-ink);
}
@media (max-width:680px){
  .rt-embed.rt-paper .rt-p-speed-row{
    grid-template-columns:1fr;
    gap:10px;
    padding:16px 18px;
  }
  .rt-embed.rt-paper .rt-p-speed-time{text-align:left}
}
.rt-embed.rt-paper .rt-p-speed-winner{
  background:var(--rp-yellow);
  box-shadow:5px 5px 0 var(--rp-ink);
  transform:rotate(-0.4deg);
}
.rt-embed.rt-paper .rt-p-speed-method{
  font-family:var(--rp-sans-heavy);
  font-size:15px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--rp-ink);
  line-height:1.25;
}
.rt-embed.rt-paper .rt-p-speed-note{
  display:inline-block;
  margin-left:6px;
  font-family:var(--rp-mono);
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:none;
  color:var(--rp-ink-soft);
}
.rt-embed.rt-paper .rt-p-speed-bar{
  position:relative;
  height:18px;
  background:rgba(15,14,12,0.08);
  border:1.5px solid var(--rp-ink);
  overflow:hidden;
}
.rt-embed.rt-paper .rt-p-speed-fill{
  height:100%;
  background:repeating-linear-gradient(45deg, var(--rp-red) 0 7px, #8a2c12 7px 14px);
}
.rt-embed.rt-paper .rt-p-speed-fill-winner{
  background:var(--rp-ink);
  min-width:6px;
}
.rt-embed.rt-paper .rt-p-speed-impossible .rt-p-speed-bar::after{
  content:'×';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -56%);
  font-family:var(--rp-serif);
  font-size:22px;
  font-weight:700;
  color:var(--rp-ink-soft);
  opacity:0.55;
}
.rt-embed.rt-paper .rt-p-speed-time{
  font-family:var(--rp-serif);
  font-size:17px;
  color:var(--rp-ink);
  text-align:right;
  letter-spacing:-0.005em;
}
.rt-embed.rt-paper .rt-p-speed-time strong{
  font-family:var(--rp-serif);
  font-weight:700;
  font-size:26px;
  color:var(--rp-red);
  letter-spacing:-0.01em;
  margin-right:4px;
}
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-time strong{color:var(--rp-ink)}

/* ---------- BIG BAR ---------- */
.rt-embed.rt-paper .rt-p-bigbar{
  position:relative; z-index:2;
  background:var(--rp-ink);
  color:var(--rp-cream);
  padding:22px 0;
  overflow:hidden;
  border-top:3px solid var(--rp-ink);
  border-bottom:3px solid var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-bigbar-inner{
  display:flex; gap:54px;
  white-space:nowrap;
  animation:rt-p-marquee 36s linear infinite;
  font-family:var(--rp-sans-heavy);
  font-size:clamp(28px, 4.4vw, 56px);
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.rt-embed.rt-paper .rt-p-bigbar-inner > span{flex-shrink:0}
.rt-embed.rt-paper .rt-p-bigbar-inner .rt-p-bb-dot{color:var(--rp-red)}
@keyframes rt-p-marquee{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){.rt-embed.rt-paper .rt-p-bigbar-inner{animation:none}}

/* ---------- H2 ---------- */
.rt-embed.rt-paper .rt-p-h2{
  margin:0 0 32px;
  font-family:var(--rp-serif);
  font-size:clamp(38px, 6vw, 72px);
  line-height:1.02;
  letter-spacing:-0.01em;
  color:var(--rp-ink);
  font-weight:400;
}
.rt-embed.rt-paper .rt-p-h2 em{font-style:italic; color:var(--rp-red)}
.rt-embed.rt-paper .rt-p-h2-light{color:var(--rp-bg)}

/* ---------- TWO-COL WHAT IT IS ---------- */
.rt-embed.rt-paper .rt-p-twocol{
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap:64px;
  align-items:start;
}
@media (max-width:920px){.rt-embed.rt-paper .rt-p-twocol{grid-template-columns:1fr;gap:40px}}
.rt-embed.rt-paper .rt-p-col-text > p{
  font-family:var(--rp-serif);
  font-size:clamp(19px, 1.7vw, 23px);
  line-height:1.55;
  margin:0 0 22px;
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-col-text > p:first-of-type::first-letter{
  font-family:var(--rp-serif);
  font-size:5.2em;
  line-height:0.82;
  float:left;
  margin:6px 14px 0 0;
  padding:6px 10px 0;
  color:var(--rp-cream);
  background:var(--rp-red);
  font-weight:400;
  transform:rotate(-3deg);
  box-shadow:3px 3px 0 var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-col-text strong{
  font-family:var(--rp-serif);
  font-weight:700;
  font-style:normal;
  letter-spacing:0;
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-col-text em{font-style:italic; color:var(--rp-red); font-weight:400}

.rt-embed.rt-paper .rt-p-demo-slot{
  position:relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, rgba(15,14,12,0.04) 0 12px, transparent 12px 24px),
    var(--rp-bg-2);
  border:2px dashed var(--rp-ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  transform:rotate(-1.5deg);
  box-shadow:5px 5px 0 var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-demo-tag{
  font-family:var(--rp-sans-heavy);
  font-size:22px;
  letter-spacing:0.18em;
  color:var(--rp-red);
  padding:4px 14px;
  background:var(--rp-cream);
  border:2px solid var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-demo-note{
  font-family:var(--rp-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--rp-mute);
  padding:0 12px;
  text-align:center;
}

/* When an <img> is added to any demo wrapper, swap from "empty placeholder"
   look (dashed border, paper gradient) to "live clip" look (solid border,
   img fills the wrapper). Powered by the modern :has() selector so the
   HTML stays clean - just drop the <img> in and CSS adapts. */
.rt-embed.rt-paper .rt-p-demo-slot:has(img),
.rt-embed.rt-paper .rt-p-step-demo:has(img){
  border-style:solid;
  background:none;
  padding:0;
  overflow:hidden;
}
.rt-embed.rt-paper .rt-p-demo-slot img,
.rt-embed.rt-paper .rt-p-step-demo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- SEE IT IN ACTION big demo ----------
   A large 16:9 "watch it inside Resolve" demo frame, modeled on the
   TypeFlow page's demo-proof section. Taped-in monitor look: dark
   frame, hard offset shadow, slight tilt, yellow washi tape tab. The
   <video> placeholder swaps to the real clip when the mp4 is on the
   CDN (same convention as the other demo slots). */
.rt-embed.rt-paper .rt-p-bigdemo{
  position:relative;
  max-width:920px;
  margin:32px auto 0;
  aspect-ratio:16 / 9;
  background:
    repeating-linear-gradient(45deg, rgba(244,236,220,0.05) 0 14px, transparent 14px 28px),
    var(--rp-bg-3);
  border:3px solid var(--rp-ink);
  box-shadow:8px 8px 0 var(--rp-ink);
  transform:rotate(-0.6deg);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--rp-mono);
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--rp-mute);
}
.rt-embed.rt-paper .rt-p-bigdemo video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.rt-embed.rt-paper .rt-p-bigdemo-tape{
  position:absolute; top:-15px; left:50%;
  transform:translateX(-50%) rotate(-2.5deg);
  width:128px; height:28px; z-index:2;
  background:rgba(244,211,58,0.82);
  border-left:1px solid rgba(15,14,12,0.2);
  border-right:1px solid rgba(15,14,12,0.2);
  box-shadow:0 2px 5px rgba(15,14,12,0.24);
}
@media (max-width:640px){
  .rt-embed.rt-paper .rt-p-bigdemo{margin-top:22px; box-shadow:5px 5px 0 var(--rp-ink); border-width:2px;}
}

/* ---------- STEPS ---------- */
.rt-embed.rt-paper .rt-p-steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:32px;
  margin-top:8px;
}
@media (max-width:920px){.rt-embed.rt-paper .rt-p-steps{grid-template-columns:1fr;gap:24px}}
.rt-embed.rt-paper .rt-p-step{
  position:relative;
  background:var(--rp-bg);
  padding:28px 26px 32px;
  border:2px solid var(--rp-ink);
  box-shadow:6px 6px 0 var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-step:nth-child(1){transform:rotate(-1.2deg)}
.rt-embed.rt-paper .rt-p-step:nth-child(2){transform:rotate(0.8deg)}
.rt-embed.rt-paper .rt-p-step:nth-child(3){transform:rotate(-0.6deg)}
.rt-embed.rt-paper .rt-p-step::before{
  content:""; position:absolute; left:0; right:0; top:-9px; height:14px;
  background:
    radial-gradient(circle 5px at 8px 8px, var(--rp-bg) 99%, transparent 100%),
    radial-gradient(circle 4px at 22px 4px, var(--rp-bg) 99%, transparent 100%),
    radial-gradient(circle 6px at 38px 9px, var(--rp-bg) 99%, transparent 100%),
    radial-gradient(circle 5px at 56px 6px, var(--rp-bg) 99%, transparent 100%),
    radial-gradient(circle 4px at 72px 10px, var(--rp-bg) 99%, transparent 100%);
  background-size: 88px 14px;
  background-repeat:repeat-x;
}
.rt-embed.rt-paper .rt-p-step-tape{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:84px; height:24px;
  background:rgba(244,211,58,0.78);
  border-left:1px solid rgba(15,14,12,0.18);
  border-right:1px solid rgba(15,14,12,0.18);
  box-shadow:0 2px 4px rgba(15,14,12,0.18);
}
.rt-embed.rt-paper .rt-p-step-num{
  font-family:var(--rp-mono);
  font-size:13px;
  letter-spacing:0.24em;
  color:var(--rp-red);
  margin-bottom:4px;
}
.rt-embed.rt-paper .rt-p-step-title{
  margin:0 0 14px;
  font-family:var(--rp-sans-heavy);
  font-size:clamp(28px, 3vw, 38px);
  letter-spacing:0.01em;
  line-height:1;
  color:var(--rp-ink);
  font-weight:400;
  text-transform:uppercase;
}
.rt-embed.rt-paper .rt-p-step p{
  margin:0 0 16px;
  font-family:var(--rp-body);
  font-size:15px;
  line-height:1.55;
  color:var(--rp-ink-soft);
}
.rt-embed.rt-paper .rt-p-step-demo{
  position:relative;
  margin-top:14px;
  aspect-ratio: 16 / 11;
  background:
    repeating-linear-gradient(45deg, rgba(15,14,12,0.04) 0 12px, transparent 12px 24px),
    var(--rp-bg-3);
  border:2px dashed rgba(15,14,12,0.4);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--rp-mono);
  font-size:11px;
  letter-spacing:0.18em;
  color:var(--rp-mute);
  text-transform:uppercase;
}

/* ---------- FOUR STYLES GRID ----------
   4 visual styles bundled with TypeFlow Paper. Dark card pattern
   (dark bg, hairline border, hard shadow, slight tilt), 4 columns on
   desktop. Each card is one style with an image preview on top and the
   style name underneath. */
.rt-embed.rt-paper .rt-p-styles-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:12px;
}
@media (max-width:1100px){.rt-embed.rt-paper .rt-p-styles-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.rt-embed.rt-paper .rt-p-styles-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.rt-embed.rt-paper .rt-p-styles-grid{grid-template-columns:1fr}}

.rt-embed.rt-paper .rt-p-style-card{
  position:relative;
  background:var(--rp-bg-2);
  border:1px solid rgba(244,236,220,0.10);
  padding:0;
  box-shadow:3px 4px 0 rgba(0,0,0,0.4),
              6px 10px 22px rgba(0,0,0,0.28);
  overflow:hidden;
  color:var(--rp-text);
  transition:transform 180ms ease, box-shadow 180ms ease;
}
/* Hand-pasted tilt per card (alternating, subtle) */
.rt-embed.rt-paper .rt-p-style-card:nth-child(1){transform:rotate(-0.7deg)}
.rt-embed.rt-paper .rt-p-style-card:nth-child(2){transform:rotate(0.5deg)}
.rt-embed.rt-paper .rt-p-style-card:nth-child(3){transform:rotate(-0.3deg)}
.rt-embed.rt-paper .rt-p-style-card:nth-child(4){transform:rotate(0.6deg)}
.rt-embed.rt-paper .rt-p-style-card:hover{
  transform:translateY(-3px) rotate(0deg);
  box-shadow:4px 6px 0 rgba(0,0,0,0.5),
              8px 14px 28px rgba(0,0,0,0.35);
}

.rt-embed.rt-paper .rt-p-style-demo{
  position:relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, rgba(15,14,12,0.04) 0 10px, transparent 10px 20px),
    var(--rp-bg-3);
  border-bottom:1px solid rgba(244,236,220,0.10);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--rp-mono);
  font-size:10px;
  letter-spacing:0.16em;
  color:var(--rp-mute);
  text-transform:uppercase;
  text-align:center;
  padding:8px;
  line-height:1.4;
}
.rt-embed.rt-paper .rt-p-style-demo:has(img){
  padding:0;
  background:transparent;
}
.rt-embed.rt-paper .rt-p-style-demo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.rt-embed.rt-paper .rt-p-style-label{
  padding:13px 14px 15px;
  font-family:var(--rp-sans-heavy);
  font-size:clamp(13px, 1.05vw, 16px);
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--rp-text);
  text-align:center;
  line-height:1.2;
}

/* ---------- THREE EFFECTS GRID (Pass 15) ----------
   The 3 stackable effects bundled with TypeFlow Paper (glow, motion
   trails, drop shadow). Same dark paper-card pattern as the styles
   grid but 3 columns, with a preview on top and a name + one-line
   under it. Preview slots swap to real clips via the demo convention. */
.rt-embed.rt-paper .rt-p-effects-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:16px;
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:760px){.rt-embed.rt-paper .rt-p-effects-grid{grid-template-columns:1fr;max-width:420px}}

.rt-embed.rt-paper .rt-p-effect-card{
  position:relative;
  background:var(--rp-bg-2);
  border:1px solid rgba(244,236,220,0.10);
  padding:0;
  box-shadow:3px 4px 0 rgba(0,0,0,0.4),
              6px 10px 22px rgba(0,0,0,0.28);
  overflow:hidden;
  color:var(--rp-text);
  transition:transform 180ms ease, box-shadow 180ms ease;
}
.rt-embed.rt-paper .rt-p-effect-card:nth-child(1){transform:rotate(-0.6deg)}
.rt-embed.rt-paper .rt-p-effect-card:nth-child(2){transform:rotate(0.5deg)}
.rt-embed.rt-paper .rt-p-effect-card:nth-child(3){transform:rotate(-0.4deg)}
.rt-embed.rt-paper .rt-p-effect-card:hover{
  transform:translateY(-3px) rotate(0deg);
  box-shadow:4px 6px 0 rgba(0,0,0,0.5),
              8px 14px 28px rgba(0,0,0,0.35);
}

.rt-embed.rt-paper .rt-p-effect-demo{
  position:relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, rgba(15,14,12,0.04) 0 10px, transparent 10px 20px),
    var(--rp-bg-3);
  border-bottom:1px solid rgba(244,236,220,0.10);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--rp-mono);
  font-size:10px;
  letter-spacing:0.16em;
  color:var(--rp-mute);
  text-transform:uppercase;
  text-align:center;
  padding:8px;
  line-height:1.4;
}
.rt-embed.rt-paper .rt-p-effect-demo video{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.rt-embed.rt-paper .rt-p-effect-meta{
  padding:14px 16px 18px;
}
.rt-embed.rt-paper .rt-p-effect-name{
  margin:0 0 4px;
  font-family:var(--rp-sans-heavy);
  font-size:clamp(17px, 1.4vw, 21px);
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--rp-text);
  line-height:1.1;
}
.rt-embed.rt-paper .rt-p-effect-desc{
  margin:0;
  font-family:var(--rp-body);
  font-size:14px;
  line-height:1.5;
  color:var(--rp-ink-soft);
}

/* ---------- COMPATIBILITY ---------- */
.rt-embed.rt-paper .rt-p-compat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:8px;
}
@media (max-width:820px){.rt-embed.rt-paper .rt-p-compat-grid{grid-template-columns:1fr;gap:18px}}
.rt-embed.rt-paper .rt-p-compat-card{
  background:var(--rp-bg);
  border:2px solid var(--rp-ink);
  padding:28px 22px 24px;
  text-align:center;
  box-shadow:4px 4px 0 var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-cc-icon{
  display:flex; align-items:center; justify-content:center;
  height:66px; margin:0 auto 14px;
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-cc-icon svg{display:block;height:100%;width:auto}
.rt-embed.rt-paper .rt-p-cc-icon-os{
  display:flex; align-items:center; justify-content:center; gap:18px;
  height:66px; margin:0 auto 14px;
}
.rt-embed.rt-paper .rt-p-cc-icon-os svg{display:block;height:36px;width:auto;color:var(--rp-ink)}
.rt-embed.rt-paper .rt-p-cc-name{
  margin:0 0 6px;
  font-family:var(--rp-sans-heavy);
  font-size:20px;
  letter-spacing:0.02em;
  color:var(--rp-ink);
  font-weight:400;
  text-transform:uppercase;
}
.rt-embed.rt-paper .rt-p-cc-detail{
  margin:0 0 4px;
  font-family:var(--rp-body);
  font-size:13px;
  line-height:1.5;
  color:var(--rp-ink-soft);
}
.rt-embed.rt-paper .rt-p-compat-disclaimer{
  margin:28px auto 0;
  max-width:880px;
  text-align:center;
  font-family:var(--rp-mono);
  font-size:10.5px;
  line-height:1.7;
  color:var(--rp-mute);
  letter-spacing:0.04em;
}

/* ---------- FEATURES GRID ----------
   6 cards showing what's inside v1.0. 3-col on desktop, 2-col on tablet,
   1-col on phone. Each card is a paper note with a small numbered chip
   and slight rotation for the ransom-note feel. */
.rt-embed.rt-paper .rt-p-features-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  margin-top:24px;
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
}
@media (max-width:600px){.rt-embed.rt-paper .rt-p-features-grid{grid-template-columns:1fr}}
.rt-embed.rt-paper .rt-p-feature-card{
  position:relative;
  background:var(--rp-cream);
  border:2px solid var(--rp-ink);
  padding:30px 22px 22px;
  box-shadow:4px 4px 0 var(--rp-ink);
  transform:rotate(-0.5deg);
}
.rt-embed.rt-paper .rt-p-feature-card:nth-child(even){transform:rotate(0.6deg)}
.rt-embed.rt-paper .rt-p-feature-card:nth-child(3n){transform:rotate(-0.3deg)}
.rt-embed.rt-paper .rt-p-feat-num{
  position:absolute;
  top:12px; right:18px;
  font-family:var(--rp-mono);
  font-size:13px;
  letter-spacing:0.16em;
  color:var(--rp-red);
  font-weight:700;
}
.rt-embed.rt-paper .rt-p-feat-title{
  margin:0 0 10px;
  font-family:var(--rp-sans-heavy);
  font-weight:400;
  font-size:20px;
  letter-spacing:0.01em;
  line-height:1.2;
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-feat-body{
  margin:0 0 14px;
  font-family:var(--rp-serif);
  font-size:15.5px;
  line-height:1.4;
  color:var(--rp-ink);
}
/* Feature-card image slot - placeholder until Rystal drops a screenshot
   or GIF in. Same swap pattern as the demo slots: drop an <img class=
   "rt-p-feat-img"> in and the wrapper's dashed-border placeholder styling
   falls away via :has(img). */
.rt-embed.rt-paper .rt-p-feat-img{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, rgba(15,14,12,0.04) 0 12px, transparent 12px 24px),
    var(--rp-bg-3, var(--rp-bg-2));
  border:2px dashed rgba(15,14,12,0.4);
  font-family:var(--rp-mono);
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--rp-mute);
}
.rt-embed.rt-paper .rt-p-feature-card:has(img.rt-p-feat-img){padding-bottom:16px}
.rt-embed.rt-paper .rt-p-feat-img:has(img),
.rt-embed.rt-paper img.rt-p-feat-img{
  display:block;
  width:100%; height:auto;
  border:2px solid var(--rp-ink);
  background:none;
  font-size:0;
}

/* ---------- FAQ ---------- */
.rt-embed.rt-paper .rt-p-faq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:28px;
  margin-top:24px;
}
@media (max-width:720px){.rt-embed.rt-paper .rt-p-faq-grid{grid-template-columns:1fr;gap:22px}}
.rt-embed.rt-paper .rt-p-faq-card{
  position:relative;
  background:var(--rp-bg);
  border:2px solid var(--rp-ink);
  padding:26px 24px 22px;
  box-shadow:4px 4px 0 var(--rp-ink);
  transform:rotate(-0.4deg);
}
.rt-embed.rt-paper .rt-p-faq-card:nth-child(even){transform:rotate(0.5deg)}
.rt-embed.rt-paper .rt-p-faq-card:nth-child(3n){transform:rotate(-0.7deg)}
.rt-embed.rt-paper .rt-p-faq-tape{
  position:absolute;
  top:-9px; left:22px;
  width:46px; height:16px;
  background:rgba(251,191,36,0.55);
  transform:rotate(-3deg);
  box-shadow:0 1px 0 rgba(0,0,0,0.08) inset;
}
.rt-embed.rt-paper .rt-p-faq-card:nth-child(even) .rt-p-faq-tape{
  background:rgba(63,182,229,0.45);
  left:auto; right:28px;
  transform:rotate(4deg);
}
.rt-embed.rt-paper .rt-p-faq-q{
  margin:0 0 10px;
  font-family:var(--rp-sans-heavy);
  font-weight:400;
  font-size:19px;
  letter-spacing:0.005em;
  line-height:1.25;
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-faq-a{
  margin:0;
  font-family:var(--rp-serif);
  font-size:16px;
  line-height:1.55;
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-faq-a a{
  color:var(--rp-red);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:2px;
}

/* ---------- CTA SECTION (DARK) ---------- */
.rt-embed.rt-paper .rt-p-cta-container{
  text-align:center;
  position:relative;
  padding:24px 0 40px;
}
.rt-embed.rt-paper .rt-p-cta-container .rt-p-h2-light{
  margin:0 auto 12px;
}

/* DaVinci compat icon - dark circle behind the droplets. Symmetric
   padding so the three tips' meeting point (the visual logo center) sits
   at the geometric center of the dark circle. */
.rt-embed.rt-paper .rt-p-compat-card:first-child .rt-p-cc-icon{
  width:66px;
  height:66px;
  background:var(--rp-ink);
  border-radius:50%;
  padding:4px;
  box-sizing:border-box;
}
.rt-embed.rt-paper .rt-p-compat-card:first-child .rt-p-cc-icon svg{
  height:100%;
  width:auto;
}

/* Closing CTA H2 - "TypeFlow" and cutout "PAPER" share one flex row so
   they live on the same line at wide widths. On narrow viewports the row
   wraps and PAPER drops to a second line gracefully. "First of its kind."
   becomes a smaller yellow serif subheading below the row. */
.rt-embed.rt-paper .rt-p-cta-h2{
  display:block;
  text-align:center;
}
.rt-embed.rt-paper .rt-p-cta-h2-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 18px;
  margin-bottom:12px;
}
.rt-embed.rt-paper .rt-p-cta-h2-line{display:inline-block}
.rt-embed.rt-paper .rt-p-cta-paper{
  display:inline-flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px 6px;
}
/* CTA letters reuse the same sprite + cycle as the hero, but skip the
   drop-in (they're below the fold by the time animations start). Smaller
   font-size to balance against the "TypeFlow" cap-height in the H2. */
/* CTA letters: smaller font, no drop-in (below the fold), bigger shadow
   for contrast against the dark CTA bg. Static V1 letter design. */
.rt-embed.rt-paper .rt-p-cta-paper .rt-p-letter{
  font-size:clamp(28px, 4.2vw, 50px);
  padding:3px 8px 2px;
  box-shadow:2px 3px 0 rgba(0,0,0,0.55), 4px 6px 10px rgba(0,0,0,0.4);
  animation:none;
  opacity:1;
  transform:rotate(var(--rp-rot,0deg));
}
/* A's ink background would merge with the dark CTA bg - swap to yellow. */
.rt-embed.rt-paper .rt-p-cta-paper .rt-p-l-A{
  background:var(--rp-yellow);
  color:var(--rp-ink);
}
.rt-embed.rt-paper .rt-p-cta-h2-em{
  display:block;
  font-style:italic;
  color:var(--rp-yellow);
  font-family:var(--rp-serif);
  font-size:clamp(22px, 2.4vw, 32px);
  font-weight:400;
  margin-top:4px;
}
/* Price chip in the stamp button - readable but not eye-catching.
   Same color as the button text (inherits red on top stamp, yellow on
   closing stamp), smaller font, slight margin, soft opacity so it reads
   as part of the title without competing with the action verb. */
.rt-embed.rt-paper .rt-p-stamp-price{
  display:inline-block;
  margin-left:8px;
  padding:0;
  background:transparent;
  color:inherit;
  font-family:inherit;
  font-size:0.7em;
  letter-spacing:0.04em;
  opacity:0.78;
  vertical-align:3px;
}

/* ============================================================
   DARK MODE OVERRIDES (Dark V2 only)
   ----------------------------------------------------------
   Everything that was hard-coded in the original cream-paper
   CSS as `rgba(15,14,12, X)` (ink-tinted lines, shadows, track
   bg) or that needs structural adjustments to read on dark.
   ============================================================ */

/* 1. Body bg - Payhip's own header/footer chrome is outside our
      .rt-embed wrapper. Set the page <body> bg to match our dark
      espresso so any leftover top/bottom gap visually merges into
      the embed instead of flashing white. Scoped via :where(body)
      so it has zero specificity - won't fight Payhip's own bg if
      they already use one. */
:where(body):has(.rt-embed.rt-paper){background:#171310 !important}
:where(html):has(.rt-embed.rt-paper){background:#171310}

/* 2. Pull the embed flush against any leftover Payhip top spacer */
.rt-embed.rt-paper{margin-top:0; padding-top:0}

/* 3. .rt-p-letter - cream-tinted drop shadow on dark (was ink) */
.rt-embed.rt-paper .rt-p-letter{
  box-shadow:
    3px 4px 0 rgba(0,0,0,0.55),
    6px 8px 16px rgba(0,0,0,0.45);
}
/* 4. Ink-bg letters (Y, A) get a thin cream outline so they
      don't disappear against the dark page bg. The ink bg is
      #0F0E0C, page bg is #171310 - only 8 points of brightness
      apart, so without an outline the letter card becomes
      indistinguishable from the page. 2px cream border fixes it
      without changing the letter's interior look. */
.rt-embed.rt-paper .rt-p-l-Y,
.rt-embed.rt-paper .rt-p-l-A{
  outline:2px solid var(--rp-cream);
  outline-offset:-2px;
}

/* 5. Speed-compare bar track - was ink-rgba (invisible on dark).
      Use cream-rgba so the track reads as "empty space" behind
      the colored fill. */
.rt-embed.rt-paper .rt-p-speed-bar{
  background:rgba(244,236,220,0.10);
  border:1px solid rgba(244,236,220,0.16);
}

/* 6. Feature cards - bump slightly off the page bg so they read
      as cards. Section uses --rp-bg (#171310) and we use --rp-bg-2
      so cards "lift" a touch. Add hairline border + cream-tinted
      drop shadow. */
.rt-embed.rt-paper .rt-p-feature-card{
  background:var(--rp-bg-2);
  border:1px solid rgba(244,236,220,0.10);
  box-shadow:
    4px 5px 0 rgba(0,0,0,0.4),
    8px 12px 28px rgba(0,0,0,0.3);
}

/* 7. FAQ cards - same logic as features, just slightly different
      tint so the FAQ rhythm reads differently from the features
      grid. */
.rt-embed.rt-paper .rt-p-faq-card{
  background:var(--rp-bg-2);
  border:1px solid rgba(244,236,220,0.10);
  box-shadow:
    3px 4px 0 rgba(0,0,0,0.4),
    6px 10px 22px rgba(0,0,0,0.28);
}

/* 9. Compat cards (DaVinci, OS, Aspect frames) - dark cards with
      hairline border. The DaVinci 3-droplet stays colorful (uses
      hard-coded fills). Apple/Windows SVGs use currentColor which
      now picks up the cream text color. */
.rt-embed.rt-paper .rt-p-compat-card{
  background:var(--rp-bg-2);
  border:1px solid rgba(244,236,220,0.10);
  box-shadow:
    3px 4px 0 rgba(0,0,0,0.4),
    6px 10px 22px rgba(0,0,0,0.28);
}

/* 10. Step num badges - flip dark with cream text instead of cream
       w/ ink. The number itself should pop. */
.rt-embed.rt-paper .rt-p-step-num{
  background:var(--rp-yellow);
  color:var(--rp-ink);
}

/* 11. Stamp CTA buttons - force colors with !important so Payhip's
       host CSS can't bleed white text onto the button. The default
       red ticket gets an explicit cream paper bg so it reads as a
       physical coupon pasted on the dark wall (was transparent in
       light mode where the cream page bg showed through; on dark
       we make the cream surface explicit). The -big variant stays
       transparent because yellow-on-dark already has plenty of pop.
       The -mid variant inherits the default (cream coupon).
       Note: hover state already has cream/red toggle baked in;
       we !important those too so they survive Payhip overrides. */
.rt-embed.rt-paper .rt-p-stamp-btn,
.rt-embed.rt-paper a.rt-p-stamp-btn,
.rt-embed.rt-paper button.rt-p-stamp-btn{
  background:var(--rp-cream) !important;
  color:var(--rp-red) !important;
  text-decoration:none !important;
  border-color:var(--rp-red) !important;
}
.rt-embed.rt-paper .rt-p-stamp-btn .rt-p-stamp-text,
.rt-embed.rt-paper .rt-p-stamp-btn .rt-p-stamp-sub,
.rt-embed.rt-paper .rt-p-stamp-btn .rt-p-stamp-price{
  color:var(--rp-red) !important;
}
.rt-embed.rt-paper .rt-p-stamp-btn:hover{
  background:var(--rp-red) !important;
  color:var(--rp-cream) !important;
}
.rt-embed.rt-paper .rt-p-stamp-btn:hover .rt-p-stamp-text,
.rt-embed.rt-paper .rt-p-stamp-btn:hover .rt-p-stamp-sub,
.rt-embed.rt-paper .rt-p-stamp-btn:hover .rt-p-stamp-price{
  color:var(--rp-cream) !important;
}
/* The big closing-CTA button stays yellow on transparent - high
   contrast on the deep-black closing section. Override the cream
   bg rule above for this variant. */
.rt-embed.rt-paper .rt-p-stamp-btn-big,
.rt-embed.rt-paper a.rt-p-stamp-btn-big{
  background:transparent !important;
  color:var(--rp-yellow) !important;
  border-color:var(--rp-yellow) !important;
}
.rt-embed.rt-paper .rt-p-stamp-btn-big .rt-p-stamp-text,
.rt-embed.rt-paper .rt-p-stamp-btn-big .rt-p-stamp-sub,
.rt-embed.rt-paper .rt-p-stamp-btn-big .rt-p-stamp-price{
  color:var(--rp-yellow) !important;
}
.rt-embed.rt-paper .rt-p-stamp-btn-big:hover{
  background:var(--rp-yellow) !important;
  color:var(--rp-ink) !important;
}
.rt-embed.rt-paper .rt-p-stamp-btn-big:hover .rt-p-stamp-text,
.rt-embed.rt-paper .rt-p-stamp-btn-big:hover .rt-p-stamp-sub,
.rt-embed.rt-paper .rt-p-stamp-btn-big:hover .rt-p-stamp-price{
  color:var(--rp-ink) !important;
}

/* 12. Section dividers - the original used `border-top:1px solid
       var(--rp-line)` which is now cream-rgba and almost invisible.
       Bump opacity slightly on top-of-section borders so the
       section rhythm still reads on dark. */
.rt-embed.rt-paper .rt-p-section{
  border-top-color:rgba(244,236,220,0.10);
}
.rt-embed.rt-paper .rt-p-hero{
  border-bottom-color:rgba(244,236,220,0.10);
}

/* 13. Bigbar marquee - already dark with yellow text. Just ensure
       the red ★ dots stay punched (--rp-red is now the dark-mode
       punched red, so they read clearly against the black bar). */
.rt-embed.rt-paper .rt-p-bigbar{
  background:var(--rp-dark);
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}

/* 14. "Free + Studio" / Lifetime updates trust line - was
       ink-soft on cream. Now cream-soft on dark. */
.rt-embed.rt-paper .rt-p-free-studio{
  color:var(--rp-ink-soft);
}

/* 15. H2 italic em (red highlight word) - bump weight a touch on
       dark so it reads as confident, not muddy. The cream + bright
       red contrast is already strong. */
.rt-embed.rt-paper .rt-p-h2 em{
  color:var(--rp-red);
  text-shadow:0 0 1px rgba(216,57,44,0.2);
}

/* 16. Closing CTA section - make sure the section-dark border
       differentiates from the page bg. The page now uses
       #171310 (espresso) and closing-CTA uses #0A0908 (deepest).
       The 3px border between them stays #000 - natural seam. */
.rt-embed.rt-paper .rt-p-section-dark{
  border-top:3px solid #000;
}

/* 17. TEXT COLOR FLIPS - the original CSS uses
       `color:var(--rp-ink)` for many text elements (headlines, body,
       card titles, FAQ text, etc.). On a cream page that meant
       black-on-cream - readable. On dark, those same rules render
       black-on-dark - invisible.
       We can't redefine --rp-ink itself because it's also used as
       a BACKGROUND (ink letter cards, kicker pill, mid-CTA stripe,
       drop shadows). So we explicitly override the TEXT-color uses
       below, leaving --rp-ink alone for background/border uses.

       Polished pass May 22 2026:
       - Added .rt-p-tagline (italic line "Old-school newspaper-cutout
         text" was black-on-dark = invisible)
       - Added .rt-p-col-text body + strong (Newspaper-text section
         body paragraph was black-on-dark)
       - Added .rt-p-step + .rt-p-step-title + .rt-p-step p (step cards
         used --rp-bg which is now dark - titles were black-on-dark)
       - REMOVED .rt-p-friend-quote / .rt-p-friend-attr / strong -
         friend-card has bg #FFF8E6 (cream sticky note); the flip was
         turning Nathan + the quote text into cream-on-cream invisible.
         Now they keep their original ink-on-cream colors.
       - REMOVED .rt-p-step-card (selector never existed; real class
         is .rt-p-step). */
.rt-embed.rt-paper .rt-p-hero,
.rt-embed.rt-paper .rt-p-h2,
.rt-embed.rt-paper .rt-p-h2-light,
.rt-embed.rt-paper .rt-p-section-lead,
.rt-embed.rt-paper .rt-p-section-eyebrow,
.rt-embed.rt-paper .rt-p-section-title,
.rt-embed.rt-paper .rt-p-hero-title,
.rt-embed.rt-paper .rt-p-hero-tag,
.rt-embed.rt-paper .rt-p-tagline,
.rt-embed.rt-paper .rt-p-col-text > p,
.rt-embed.rt-paper .rt-p-col-text strong,
.rt-embed.rt-paper .rt-p-feat-num,
.rt-embed.rt-paper .rt-p-feat-title,
.rt-embed.rt-paper .rt-p-feat-body,
.rt-embed.rt-paper .rt-p-faq-q,
.rt-embed.rt-paper .rt-p-faq-a,
.rt-embed.rt-paper .rt-p-step-title,
.rt-embed.rt-paper .rt-p-step p,
.rt-embed.rt-paper .rt-p-compat-card,
.rt-embed.rt-paper .rt-p-compat-card *,
.rt-embed.rt-paper .rt-p-compat-disclaimer,
.rt-embed.rt-paper .rt-p-speed-method,
.rt-embed.rt-paper .rt-p-speed-time,
.rt-embed.rt-paper .rt-p-speed-time strong{
  color:var(--rp-text);
}
/* Step number badge keeps yellow bg but flips to dark text
   (ink on yellow is the right contrast). Override the broad rule above. */
.rt-embed.rt-paper .rt-p-step-num{
  color:var(--rp-ink) !important;
}
/* Compat icon SVGs use currentColor - set to cream */
.rt-embed.rt-paper .rt-p-compat-card .rt-p-cc-icon-os svg{
  color:var(--rp-text);
}
/* H2 italic em (red highlight word) keeps its red - re-assert
   after the broad flip above grabs all .rt-p-h2 colors. */
.rt-embed.rt-paper .rt-p-h2 em{
  color:var(--rp-red);
}
/* col-text em (red italic emphasis) keeps its red */
.rt-embed.rt-paper .rt-p-col-text em{
  color:var(--rp-red);
}
/* col-text first-letter dropcap (red card with cream letter) - already
   has explicit color:var(--rp-cream) but re-assert to beat the broad
   flip above (which targets .rt-p-col-text > p that owns the dropcap). */
.rt-embed.rt-paper .rt-p-col-text > p:first-of-type::first-letter{
  color:var(--rp-cream);
}

/* 18. SPEED-WINNER ROW REDESIGN
      ---------------------------------------------------------
      Original (light mode) used yellow bg + ink text + ink fill.
      On dark that combo reads as ugly mustard + invisible black
      sliver. Rystal pref: white/black/red looks nice, yellow/black
      doesn't.

      New: cream paper ticket with red border + red text. Matches the
      Buy It Now coupon aesthetic - the winner row literally looks like
      a coupon stamp. The "1%" sliver becomes a thicker solid red bar
      (min 14px) inside a cream-tinted track so the WIN is obvious. */
.rt-embed.rt-paper .rt-p-speed-winner{
  background:var(--rp-cream);
  border-color:var(--rp-red);
  box-shadow:5px 5px 0 var(--rp-red);
}
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-method,
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-time,
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-time strong{
  color:var(--rp-red);
}
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-bar{
  background:rgba(216,57,44,0.10);
  border-color:var(--rp-red);
}
.rt-embed.rt-paper .rt-p-speed-fill-winner{
  background:var(--rp-red);
  min-width:14px;
}

/* 19. DAVINCI ICON - drop the dark circle background on dark mode.
      The original used a dark ink circle behind the droplets so the
      colored droplets popped against a cream page. On dark, that
      circle is now redundant (the page itself is dark) AND visually
      reads as a weird coaster behind the icon. Three droplets stand
      alone. */
.rt-embed.rt-paper .rt-p-compat-card:first-child .rt-p-cc-icon{
  background:transparent;
  padding:0;
  width:auto;
  height:64px;
}

/* ============================================================
   PASS 2 - color tuning + Tier-1 papery upgrades (May 22 2026)
   Rystal: "red is hard to read on dark, make text emphasis
   yellow instead. Keep red for cream-card buttons/borders."
   ============================================================ */

/* 20. RED → YELLOW for text emphasis on dark sections.
      Red is fine where it sits on cream (buttons, dropcap card,
      speed-winner ticket, demo tag) - those are unchanged.
      But italic em words in H2s and other dark-bg red text are
      hard to read. Switch to yellow with a soft highlighter
      underline for the editorial feel. */
.rt-embed.rt-paper .rt-p-h2 em,
.rt-embed.rt-paper .rt-p-col-text em{
  color:var(--rp-yellow);
  font-style:italic;
  /* highlighter pen underline - yellow marker swipe behind the word */
  background:linear-gradient(180deg,
    transparent 62%,
    rgba(244,211,58,0.18) 62%,
    rgba(244,211,58,0.18) 92%,
    transparent 92%);
  padding:0 2px;
  text-shadow:none;
}
.rt-embed.rt-paper .rt-p-feat-num{
  color:var(--rp-yellow);
}
.rt-embed.rt-paper .rt-p-speed-time strong{
  color:var(--rp-yellow);
}
/* Winner row text stays red - it sits on a cream ticket where
   red reads beautifully and matches the BUY IT NOW coupon. */
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-time strong{
  color:var(--rp-red);
}
.rt-embed.rt-paper .rt-p-faq-a a{
  color:var(--rp-yellow);
  text-decoration-color:rgba(244,211,58,0.55);
}

/* 21. THREE STEPS - Rystal removed the STEP · 01/02/03 labels
      and the yellow washi tape above each step card. The labels
      and tape spans are deleted in markup; we also hide their
      remaining CSS just in case anything lingers. Top padding on
      .rt-p-step is reduced so the title doesn't sit in empty
      space where the label used to live. */
.rt-embed.rt-paper .rt-p-step-tape,
.rt-embed.rt-paper .rt-p-step-num{
  display:none !important;
}
.rt-embed.rt-paper .rt-p-step{
  padding-top:22px;
}

/* 22. STRONGER LETTER SHADOWS (Tier 1 #2) - make each ransom-note
      letter feel physically cut and pasted, not flat color. Two
      shadow layers: a hard offset shadow (paper depth) + a softer
      blur (ambient occlusion). Reads as "lit from above-left". */
.rt-embed.rt-paper .rt-p-letter{
  box-shadow:
    4px 5px 0 rgba(0,0,0,0.55),
    7px 9px 14px rgba(0,0,0,0.42),
    inset 0 0 22px rgba(0,0,0,0.10);
}

/* 23. PAPER TEXTURE PUSH (Tier 1 #6) - bump grain opacity + add
      a second finer-grain layer for more visible paper fiber.
      Original was opacity 0.35 single-layer. Now 0.55 main + a
      0.22 ultra-fine layer for "newsprint dust". */
.rt-embed.rt-paper .rt-p-grain{
  opacity:0.55;
}
.rt-embed.rt-paper::before{
  content:""; position:absolute; inset:0;
  pointer-events:none; z-index:1;
  opacity:0.22; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.4' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.96 0 0 0 0 0.86 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* Cards keep position:relative for layered children. */
.rt-embed.rt-paper .rt-p-feature-card,
.rt-embed.rt-paper .rt-p-compat-card{
  position:relative;
}

/* 25. PUSH PINS - Pass 4 (May 22 2026): Rystal said remove pins
      everywhere, including FAQ and step cards. The corkboard
      metaphor was clutter. All pin pseudo-elements are gone.
      Keeping the section block as a no-op placeholder so the
      numbered comments above stay readable. */

/* 26. TORN-PAPER SECTION DIVIDERS (Tier 1 #1) - between sections
      replace the 1px hairline border-top with an SVG zigzag torn
      edge in soft cream. Subtle but suggests "torn newspaper page"
      between articles. Applied to every section + bigbar boundary. */
.rt-embed.rt-paper .rt-p-section,
.rt-embed.rt-paper .rt-p-bigbar,
.rt-embed.rt-paper .rt-p-friend,
.rt-embed.rt-paper .rt-p-hero{
  position:relative;
}
.rt-embed.rt-paper .rt-p-section{
  border-top:none;
}
.rt-embed.rt-paper .rt-p-section::before{
  content:""; position:absolute;
  top:0; left:0; right:0; height:8px;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='8' viewBox='0 0 240 8'%3E%3Cpath d='M0 5 L8 3.5 L16 4.8 L24 2.5 L33 4.2 L42 3 L50 5 L60 3.5 L70 4.5 L80 2.8 L90 4.2 L100 3.2 L110 5 L120 3.5 L130 4.5 L140 2.5 L150 4.2 L160 3 L170 5 L180 3.5 L190 4.5 L200 2.8 L210 4.2 L220 3.2 L230 5 L240 3.5' stroke='%23F4ECDC' stroke-width='0.75' fill='none' opacity='0.22' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:240px 8px;
  pointer-events:none;
  z-index:3;
}
/* Big-bar and dark-CTA sections get a heavier torn edge */
.rt-embed.rt-paper .rt-p-bigbar::before,
.rt-embed.rt-paper .rt-p-section-dark::before{
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='10' viewBox='0 0 240 10'%3E%3Cpath d='M0 6 L8 3 L16 7 L24 2 L33 5 L42 3 L50 7 L60 3 L70 5.5 L80 2 L90 6 L100 3 L110 7 L120 3 L130 6 L140 2 L150 5 L160 3 L170 7 L180 3 L190 5.5 L200 2 L210 6 L220 3 L230 7 L240 3' stroke='%23F4ECDC' stroke-width='1' fill='none' opacity='0.30' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:240px 10px;
  height:10px;
}

/* ============================================================
   PASS 3 - declutter + text hierarchy (May 22 2026)
   Rystal: features / use / compat sections were too cluttered.
   Strip tape, pins, number labels. Add a 3-tier text brightness
   so the page has depth instead of one big "everything is full
   cream" blanket.
   ============================================================ */

/* 27. HIDE FEATURE NUMBERS - 01-06 chips on the features grid were
      visual noise per Rystal. Hide them entirely. The card titles
      already give the cards their identity. */
.rt-embed.rt-paper .rt-p-feat-num{
  display:none !important;
}

/* 28. TEXT HIERARCHY - three brightness tiers so the page has depth.
      Previously everything flipped to bright cream which made the
      page read as one big slab. Now:
        - HEADINGS (var(--rp-text), full #F4ECDC) - H2s, card titles,
          FAQ questions, step titles, CTA headings. Untouched.
        - BODY (--rp-body, ~78% cream) - section leads, feature bodies,
          FAQ answers, step bodies, col-text body, use-card and compat-
          card body lines. One step quieter than headings.
        - CAPTION (--rp-caption, ~45% cream) - trademark disclaimer,
          Nathan's-method footnote on speed compare, demo placeholder
          notes. Significantly quieter.
      Variables are added on .rt-embed.rt-paper so they cascade
      everywhere inside without further work. */
.rt-embed.rt-paper{
  --rp-body:rgba(244,236,220,0.78);
  --rp-caption:rgba(244,236,220,0.45);
}

/* Body tier - sub-headings and body paragraphs on dark sections */
.rt-embed.rt-paper .rt-p-section-lead,
.rt-embed.rt-paper .rt-p-feat-body,
.rt-embed.rt-paper .rt-p-faq-a,
.rt-embed.rt-paper .rt-p-step p,
.rt-embed.rt-paper .rt-p-col-text > p,
.rt-embed.rt-paper .rt-p-cc-detail,
.rt-embed.rt-paper .rt-p-tagline{
  color:var(--rp-body);
}

/* Caption tier - fine print, footnotes, placeholder labels */
.rt-embed.rt-paper .rt-p-compat-disclaimer{
  color:var(--rp-caption);
  opacity:1; /* original used opacity 0.7 - replace with our variable */
}
.rt-embed.rt-paper .rt-p-speed-note{
  color:var(--rp-caption);
}
.rt-embed.rt-paper .rt-p-free-studio{
  color:var(--rp-body);
}
.rt-embed.rt-paper .rt-p-demo-note{
  color:var(--rp-caption);
}

/* ============================================================
   PAYHIP WAR - pass 6 (May 23 2026)
   The page lives inside Payhip's product page chrome, which
   injects host CSS that fights our embed in three ways:
     1) `a` tags get `text-decoration: underline` cascading to
        all child spans inside our Buy It Now buttons. Even our
        `text-decoration:none !important` on the .rt-p-stamp-btn
        parent doesn't catch the inner spans because Payhip's
        rule targets `a span` directly.
     2) `a:hover` gets `opacity: 0.8` or similar, darkening every
        button on hover - on top of our intentional cream → red
        (or transparent → yellow filled) hover swap. The result
        is a muddy double-effect that looks wrong.
     3) The Payhip product page wraps the embed in a div that
        has a slightly lighter dark bg than ours (#171310), so
        a visible "band" appears between Payhip's header and
        where our embed starts.
   We nuke all three below with maximally specific !important
   rules + cover the band with negative margin.
   ============================================================ */

/* W1. KILL Payhip's underline on stamp button text. Has to target
       both the <a> and every descendant span explicitly because
       Payhip's `a span` rule has higher specificity than our
       inherited `text-decoration` on the parent. */
.rt-embed.rt-paper a.rt-p-stamp-btn,
.rt-embed.rt-paper a.rt-p-stamp-btn:link,
.rt-embed.rt-paper a.rt-p-stamp-btn:visited,
.rt-embed.rt-paper a.rt-p-stamp-btn:hover,
.rt-embed.rt-paper a.rt-p-stamp-btn:focus,
.rt-embed.rt-paper a.rt-p-stamp-btn:active,
.rt-embed.rt-paper a.rt-p-stamp-btn *,
.rt-embed.rt-paper a.rt-p-stamp-btn:hover *,
.rt-embed.rt-paper a.rt-p-stamp-btn:focus *,
.rt-embed.rt-paper a.rt-p-stamp-btn:active *{
  text-decoration:none !important;
  text-decoration-line:none !important;
  text-underline-offset:0 !important;
}

/* W2. KILL Payhip's opacity/filter darkening on hover. Our intentional
       hover swap (cream→red etc.) should be the ONLY hover effect.
       Force opacity:1, filter:none on every interactive state of the
       button AND its children. */
.rt-embed.rt-paper a.rt-p-stamp-btn,
.rt-embed.rt-paper a.rt-p-stamp-btn:hover,
.rt-embed.rt-paper a.rt-p-stamp-btn:focus,
.rt-embed.rt-paper a.rt-p-stamp-btn:active,
.rt-embed.rt-paper a.rt-p-stamp-btn:visited,
.rt-embed.rt-paper a.rt-p-stamp-btn *,
.rt-embed.rt-paper a.rt-p-stamp-btn:hover *{
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  mix-blend-mode:normal !important;
}

/* W3. KILL the bands above + below the embed. Payhip wraps the
       embed in containers with their own bg + spacer divs. Force
       every common Payhip product-page wrapper to use our espresso
       bg so any gap visually merges. Targets html + body + every
       descendant wrapper that contains our embed. Uses :where()
       for zero-specificity so we don't accidentally style anything
       unrelated. Also paints html itself dark so the viewport
       fills when the page is shorter than the window. */
html:has(.rt-embed.rt-paper),
body:has(.rt-embed.rt-paper){
  background:#171310 !important;
}
:where(main, section, article,
       div.product-page, div.payhip-product-page, div.payhip-product,
       div.payhip-product-description, div.payhip-store-page,
       div[class*="product-page"], div[class*="product-description"],
       div[class*="payhip"], div[class*="store-content"],
       div[class*="page-content"], div[id*="product"]):has(.rt-embed.rt-paper),
:where(main, section, article,
       div.product-page, div.payhip-product-page, div.payhip-product,
       div.payhip-product-description, div.payhip-store-page,
       div[class*="product-page"], div[class*="product-description"],
       div[class*="payhip"], div[class*="store-content"],
       div[class*="page-content"], div[id*="product"]) > div:has(.rt-embed.rt-paper){
  background:#171310 !important;
}

/* W4. Pull the embed flush against the Payhip header AND footer.
       Increased from -60px to -160px because the actual gap was
       larger than estimated. Also added margin-bottom to close the
       footer gap Rystal flagged on May 23.

       Padding-top/bottom compensate so the embed's content (hero,
       closing CTA) doesn't slip behind the header/footer overlay
       once we've negative-margined into them. */
.rt-embed.rt-paper{
  margin-top:-160px !important;
  margin-bottom:-100px !important;
  padding-top:160px !important;
  padding-bottom:100px !important;
}

/* W5. Re-assert the YELLOW H2 italic em color with maximum specificity.
       In case Payhip's CSS is somehow re-overriding our pass-2 yellow
       rule, force it here at the end of the cascade with !important. */
.rt-embed.rt-paper .rt-p-h2 em,
.rt-embed.rt-paper .rt-p-col-text em,
.rt-embed.rt-paper h2 em,
.rt-embed.rt-paper p em{
  color:var(--rp-yellow) !important;
  font-style:italic !important;
}

/* W6. Re-assert text colors that should never be black on dark.
       Any text inside a dark section should be cream by default
       unless explicitly inside a cream-inset card.

       This catches the CASCADE BUG where both files' base CSS
       set certain selectors (e.g. `.rt-p-col-text strong`) to
       --rp-ink, and the combined ship CSS ends with the PAYHIP
       base coming AFTER the STANDALONE polish flip, so anywhere
       the Payhip-ported polish doesn't re-override, the base
       ink color wins. Rystal reported "TypeFlow Paper does it
       in one click" rendering as black - that's a <strong>
       inside .rt-p-col-text hitting this exact bug. Force it
       with !important here at the end of the cascade. */
.rt-embed.rt-paper .rt-p-section > .rt-p-container > h2,
.rt-embed.rt-paper .rt-p-section > .rt-p-container > h3,
.rt-embed.rt-paper .rt-p-section > .rt-p-container > p,
.rt-embed.rt-paper .rt-p-col-text > p,
.rt-embed.rt-paper .rt-p-col-text strong,
.rt-embed.rt-paper .rt-p-twocol p,
.rt-embed.rt-paper .rt-p-twocol strong{
  color:var(--rp-text) !important;
}
/* Re-force the hero tagline first-line cream - Payhip may be setting
   color:#000 on `p` tags inside a wrapper */
.rt-embed.rt-paper .rt-p-tagline{
  color:var(--rp-body) !important;
}
/* col-text dropcap first letter keeps its cream-on-red card */
.rt-embed.rt-paper .rt-p-col-text > p:first-of-type::first-letter{
  color:var(--rp-cream) !important;
}
/* col-text italic em keeps its yellow highlighter */
.rt-embed.rt-paper .rt-p-col-text em,
.rt-embed.rt-paper .rt-p-twocol em{
  color:var(--rp-yellow) !important;
}

/* W7. ".rt-p-stamp-btn-mid" sits in mid-CTA wrapper. Pulled link styling
       can also leak here - bind it down. */
.rt-embed.rt-paper a.rt-p-stamp-btn-mid{
  text-decoration:none !important;
}

/* W8. CLOSING-CTA BUTTON HOVER - force every inner text element to
       INK on hover, including .rt-p-stamp-sub ("LIFETIME UPDATES.").
       The original V2 rule sets sub to ink on hover, but the combined
       CSS file from the ship script has a NON-hover rule from the
       Payhip block AFTER the Standalone block's hover rule, and
       Rystal reported the sub stays light/cream on hover (unreadable
       on the yellow filled bg). Two-pronged fix:
         (a) Use `a.rt-p-stamp-btn-big:hover` (with the `a.` prefix
             bumping specificity to 0,5,1 - beats anything without
             the tag selector)
         (b) Re-apply at the END of the cascade so it wins in source
             order against any rule that came before. */
.rt-embed.rt-paper a.rt-p-stamp-btn-big:hover,
.rt-embed.rt-paper a.rt-p-stamp-btn-big:focus,
.rt-embed.rt-paper a.rt-p-stamp-btn-big:active{
  background:var(--rp-yellow) !important;
  color:var(--rp-ink) !important;
}
.rt-embed.rt-paper a.rt-p-stamp-btn-big:hover .rt-p-stamp-text,
.rt-embed.rt-paper a.rt-p-stamp-btn-big:hover .rt-p-stamp-sub,
.rt-embed.rt-paper a.rt-p-stamp-btn-big:hover .rt-p-stamp-price,
.rt-embed.rt-paper a.rt-p-stamp-btn-big:focus .rt-p-stamp-text,
.rt-embed.rt-paper a.rt-p-stamp-btn-big:focus .rt-p-stamp-sub,
.rt-embed.rt-paper a.rt-p-stamp-btn-big:focus .rt-p-stamp-price{
  color:var(--rp-ink) !important;
}

/* W9. KILL THE BROWN BAND below the closing CTA (Pass 9, May 23 2026).
       Rystal screenshot showed two visible bands stacked between the
       closing CTA section and the Payhip footer:

         (A) A brown/olive stripe - the embed wrapper's own base
             gradient ends at --rp-bg-2 (#1F1A14 lighter brown).
             Even though the closing CTA section (--rp-dark #0A0908)
             covers most of the wrapper's lower area, the wrapper's
             padding-bottom:100px region renders the gradient end.

         (B) A second espresso stripe - the Payhip wrapper SURROUNDING
             the embed gets painted #171310 (espresso) by W3, showing
             between the embed wrapper's bottom edge and the actual
             Payhip footer.

       Two-pronged fix:

         (a) Re-declare the wrapper's bg-image stack with a hard color
             stop at calc(100% - 100px) flipping the gradient to
             --rp-dark for the last 100px. The padding-bottom region
             of the wrapper now matches the closing CTA color.

         (b) Outset box-shadow on the wrapper paints --rp-dark 1500px
             below the wrapper's bottom edge. The wrapper has
             overflow:hidden but that does NOT clip an element's own
             outer box-shadow (only ancestor overflow:hidden would).
             The Payhip footer paints over the shadow naturally via
             source order - so only the GAP between embed + footer
             is filled with the dark color, and the footer is
             unaffected.

       Together these make the bottom of the embed flush with the
       footer, mirroring how the top now flushes against the header. */
.rt-embed.rt-paper{
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.04' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.86 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(rgba(244,236,220,0.045) 1px, transparent 1px),
    radial-gradient(rgba(244,236,220,0.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--rp-bg) 0%, var(--rp-bg-2) calc(100% - 100px), var(--rp-dark) calc(100% - 100px), var(--rp-dark) 100%) !important;
  background-size: 400px 400px, 3px 3px, 7px 7px, 100% 100% !important;
  background-position: 0 0, 0 0, 1.5px 1.5px, 0 0 !important;
  box-shadow: 0 1500px 0 0 var(--rp-dark, #0A0908) !important;
}

/* W10. Closing CTA subheading (Pass 10, May 23 2026).
        Adds a punchy 3-beat tagline between the "TypeFlow PAPER"
        wordmark and the big yellow buy button. Bookends the hero
        tagline ("Type it in. It's done.") with a closing action
        sequence ("Drag. Type. Done."). Yellow accent on "Done."
        matches the page brand pop. */
.rt-embed.rt-paper .rt-p-cta-sub{
  margin: 4px auto 28px;
  max-width: 520px;
  padding: 0 20px;
  text-align: center;
  font-family: var(--rp-serif);
  font-style: italic;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--rp-text);
}
.rt-embed.rt-paper .rt-p-cta-sub strong{
  color: var(--rp-yellow);
  font-weight: 800;
  font-style: normal;
  font-family: var(--rp-sans-heavy, var(--rp-serif));
}
@media (max-width:520px){
  .rt-embed.rt-paper .rt-p-cta-sub{margin: 0 auto 20px;}
}

/* W11. Builder / Rystal trust beat (Pass 11, May 23 2026).
        Replaces the Common Questions FAQ. Cream paper card with
        Rystal's photo (left), a personal "why I built this"
        paragraph, and a handwritten Caveat signature. Tilts +0.7deg
        so it leans the opposite way from the Nathan friend card
        above (-1.1deg) for paper-clipping rhythm. Yellow tape strip
        at top via ::before mirrors the Nathan card pattern. */
.rt-embed.rt-paper .rt-p-builder{
  position:relative; z-index:2;
  background:var(--rp-bg-2);
  padding:64px 28px 72px;
  border-top:1px solid var(--rp-line);
  border-bottom:1px solid var(--rp-line);
}
@media (max-width:640px){
  .rt-embed.rt-paper .rt-p-builder{padding:48px 18px 52px;}
}

.rt-embed.rt-paper .rt-p-builder-inner{
  max-width:780px; margin:0 auto;
  position:relative;
}

.rt-embed.rt-paper .rt-p-builder-card{
  background:#FFF8E6;
  border:2px solid var(--rp-ink);
  padding:32px 32px 28px;
  box-shadow:6px 6px 0 var(--rp-ink);
  transform:rotate(0.7deg);
  position:relative;
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.rt-embed.rt-paper .rt-p-builder-card::before{
  content:""; position:absolute; top:-13px; left:50%;
  transform:translateX(-50%) rotate(2.5deg);
  width:84px; height:22px;
  background:rgba(244,211,58,0.82);
  border-left:1px solid rgba(15,14,12,0.18);
  border-right:1px solid rgba(15,14,12,0.18);
  box-shadow:0 2px 4px rgba(15,14,12,0.18);
}

.rt-embed.rt-paper .rt-p-builder-photo{
  flex-shrink:0;
  width:88px; height:88px;
  border-radius:50%;
  border:2px solid var(--rp-ink);
  object-fit:cover;
  background:var(--rp-ink);
}

.rt-embed.rt-paper .rt-p-builder-body{
  flex:1; min-width:0;
}

.rt-embed.rt-paper .rt-p-builder-text{
  margin:0 0 14px;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  font-size:clamp(15px, 1.75vw, 18px);
  line-height:1.6;
  color:var(--rp-ink);
}

.rt-embed.rt-paper .rt-p-builder-text strong{
  font-weight:700;
  color:var(--rp-ink);
}

.rt-embed.rt-paper .rt-p-builder-sig{
  display:block;
  font-family:var(--rp-hand);
  font-size:34px;
  line-height:1;
  color:var(--rp-ink);
  letter-spacing:0.01em;
}

@media (max-width:560px){
  .rt-embed.rt-paper .rt-p-builder-card{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
    padding:28px 22px 24px;
  }
  .rt-embed.rt-paper .rt-p-builder-photo{
    width:80px; height:80px;
  }
}

/* ============================================================
   PASS 4 - Tier 2 + Tier 3 papery upgrades (May 22 2026)
   Goal: push the page from "dark theme that uses paper colors"
   into "this actually FEELS like a dark zine that survived a
   coffee spill." All effects below are SUBTLE per Rystal's note:
   "subconscious but really nice, nicely added in."
   ============================================================ */

/* Handwritten font for hand-drawn arrow + sticky note labels.
   Caveat is loaded above in the Google Fonts preload. */
.rt-embed.rt-paper{
  --rp-hand:'Caveat','Permanent Marker','Comic Sans MS',cursive;
}

/* ---------- TIER 3 #13: WALLPAPER LAYER ----------
   A near-invisible crumpled-paper fiber pattern behind everything.
   Sits below the grain layer. The dark page now feels like it's
   printed on actual paper, not painted on a tablet. Very low
   opacity - you don't notice it directly, you feel it. */
.rt-embed.rt-paper{
  background-image:
    /* Fiber pattern - long irregular streaks like paper fibers */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.04' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.86 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    /* Original radial-dot grain overlay */
    radial-gradient(rgba(244,236,220,0.045) 1px, transparent 1px),
    radial-gradient(rgba(244,236,220,0.035) 1px, transparent 1px),
    /* Base gradient */
    linear-gradient(180deg, var(--rp-bg) 0%, var(--rp-bg-2) 100%);
  background-size: 400px 400px, 3px 3px, 7px 7px, 100% 100%;
  background-position: 0 0, 0 0, 1.5px 1.5px, 0 0;
}

/* ---------- TIER 3 #15: VINTAGE COLOR WASH ----------
   Vignette darker corners + warm sepia hint. Makes the page
   feel like a photograph of a printed zine page, not a screen.
   Implemented as a fixed-position overlay that doesn't intercept
   pointer events. */
.rt-embed.rt-paper > .rt-p-vintage{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:2;
  background:
    /* Warm sepia tint overlay - extremely soft */
    linear-gradient(180deg,
      rgba(60, 35, 12, 0.06) 0%,
      rgba(60, 35, 12, 0.0) 30%,
      rgba(60, 35, 12, 0.0) 70%,
      rgba(60, 35, 12, 0.06) 100%),
    /* Edge vignette - dark corners */
    radial-gradient(ellipse 120% 80% at 50% 50%,
      transparent 55%,
      rgba(0,0,0,0.22) 100%);
  mix-blend-mode:multiply;
}

/* ---------- TIER 2 #9: NEWSPAPER COLUMN RULES ----------
   Vertical dotted-rule divider between the two columns of the
   "Newspaper text. Without the scissors." section. Subtle but
   immediately reads as "this is a newspaper page." Desktop only -
   on stacked mobile layout, the rule wouldn't make sense. */
@media (min-width: 921px){
  .rt-embed.rt-paper .rt-p-twocol{
    position:relative;
  }
  .rt-embed.rt-paper .rt-p-twocol::after{
    content:""; position:absolute;
    top:8px; bottom:8px;
    left:50%; transform:translateX(-50%);
    width:0;
    border-left:1px dotted rgba(244,236,220,0.16);
    pointer-events:none;
  }
}

/* ---------- TIER 3 #14: SUBTLE SECTION PAPER-TYPE THEMING ----------
   Each section gets a faint background pattern unique to its
   metaphor. ALL very low opacity (0.025–0.05) - you feel it more
   than see it. Layered on top of the section's solid bg color but
   underneath the content. */

/* Three Steps - faint ruled-notebook horizontal lines */
.rt-embed.rt-paper .rt-p-three-steps,
.rt-embed.rt-paper .rt-p-section:has(.rt-p-steps){
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 31px,
      rgba(244,236,220,0.040) 31px,
      rgba(244,236,220,0.040) 32px),
    linear-gradient(180deg, var(--rp-bg) 0%, var(--rp-bg) 100%);
}

/* Features - faint graph paper grid */
.rt-embed.rt-paper .rt-p-section:has(.rt-p-features-grid){
  background-image:
    repeating-linear-gradient(0deg,
      transparent 0,
      transparent 39px,
      rgba(244,236,220,0.030) 39px,
      rgba(244,236,220,0.030) 40px),
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent 39px,
      rgba(244,236,220,0.030) 39px,
      rgba(244,236,220,0.030) 40px),
    linear-gradient(180deg, var(--rp-bg) 0%, var(--rp-bg) 100%);
}

/* Built for DaVinci - faint blueprint diagonal cross-hatch */
.rt-embed.rt-paper .rt-p-section:has(.rt-p-compat-grid){
  background-image:
    repeating-linear-gradient(45deg,
      transparent 0,
      transparent 22px,
      rgba(96,165,250,0.020) 22px,
      rgba(96,165,250,0.020) 23px),
    repeating-linear-gradient(-45deg,
      transparent 0,
      transparent 22px,
      rgba(96,165,250,0.020) 22px,
      rgba(96,165,250,0.020) 23px),
    linear-gradient(180deg, var(--rp-bg) 0%, var(--rp-bg) 100%);
}

/* Speed compare - faint receipt-paper horizontal rules */
.rt-embed.rt-paper .rt-p-section:has(.rt-p-speed-table){
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0,
      transparent 23px,
      rgba(244,236,220,0.022) 23px,
      rgba(244,236,220,0.022) 24px),
    linear-gradient(180deg, var(--rp-bg) 0%, var(--rp-bg) 100%);
}

/* ---------- TIER 2 #8: YELLOW STICKY NOTE - REMOVED ----------
   Pass 6 (May 22 2026): Rystal removed it. Reasoning consistent
   with the speed-arrow removal - the same "works on Free Resolve"
   reassurance is already covered by: hero trust line ("WORKS IN
   FREE + STUDIO RESOLVE"), the compat card ("Studio & Free both
   supported"), and the FAQ ("Yes. Free and Studio both supported"
   - first question on the FAQ grid). Three mentions plus a
   sticky note was overkill. */

/* ---------- TIER 2 #7: HAND-DRAWN ARROW - REMOVED ----------
   Pass 5 (May 22 2026): Rystal removed the "5 secs." arrow next
   to the speed-compare winner row. The H2 "Done in five seconds."
   already says it; the speed-table row also says it. A third
   repetition was just noise. Block deleted, no replacement. */

/* W10. FINAL BOTTOM BAND OVERRIDE (Pass 10, May 23 2026).
       W9 was added before the PASS 4 wallpaper layer. PASS 4 then
       re-declared the wrapper background and restored the brown
       var(--rp-bg-2) gradient at the very bottom. This final rule
       runs after every decorative background rule, so the closing CTA
       and the Payhip footer share one continuous deepest-dark surface. */
.rt-embed.rt-paper{
  background-color:var(--rp-dark, #0A0908) !important;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.04' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.93 0 0 0 0 0.86 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(rgba(244,236,220,0.045) 1px, transparent 1px),
    radial-gradient(rgba(244,236,220,0.035) 1px, transparent 1px),
    linear-gradient(180deg, var(--rp-bg) 0%, var(--rp-bg-2) calc(100% - 240px), var(--rp-dark) calc(100% - 240px), var(--rp-dark) 100%) !important;
  background-size:400px 400px, 3px 3px, 7px 7px, 100% 100% !important;
  background-position:0 0, 0 0, 1.5px 1.5px, 0 0 !important;
  box-shadow:0 2000px 0 0 var(--rp-dark, #0A0908) !important;
}
body:has(.rt-embed.rt-paper) :where(
  .content-main-wrapper,
  .section-wrapper,
  .section-contents-wrapper,
  .section-contents,
  .embed-code,
  .js-builder-embed-code,
  main,
  section,
  article,
  div.product-page,
  div.payhip-product-page,
  div.payhip-product,
  div.payhip-product-description,
  div.payhip-store-page,
  div[class*="product-page"],
  div[class*="product-description"],
  div[class*="payhip"],
  div[class*="store-content"],
  div[class*="page-content"],
  div[id*="product"]
):has(.rt-embed.rt-paper){
  background:var(--rp-dark, #0A0908) !important;
}

/* W11. LIVE PAYHIP CLEANUP (Pass 11, May 23 2026).
       The live custom page proved two extra host-page issues:
         1) The Payhip footer is a sibling AFTER the embed section, so
            it does not match the earlier :has(.rt-embed) wrapper paint.
            Its transparent top padding shows as a separate strip.
         2) The shipped CSS concatenates Standalone then Payhip CSS, so
            Payhip's later base rules can turn step-card titles black
            again unless the readability fixes run at the very end.
       Keep this block last in both canonical files. */
.rt-embed.rt-paper .rt-p-section-dark:last-of-type::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-140px;
  height:140px;
  background:var(--rp-dark, #0A0908);
  pointer-events:none;
  z-index:1;
}
body:has(.rt-embed.rt-paper) .content-main-wrapper > .section-wrapper:has(.rt-embed.rt-paper) ~ .section-wrapper,
body:has(.rt-embed.rt-paper) .content-main-wrapper > .section-wrapper:has(.rt-embed.rt-paper) ~ .section-wrapper :where(.section-contents-wrapper, .section-contents, .group-footer-wrapper, .group-footer-item){
  background:var(--rp-dark, #0A0908) !important;
}
.rt-embed.rt-paper .rt-p-step-title{
  color:var(--rp-text) !important;
  opacity:1 !important;
}
.rt-embed.rt-paper .rt-p-step p{
  color:var(--rp-body) !important;
}
.rt-embed.rt-paper .rt-p-friend-card,
.rt-embed.rt-paper .rt-p-friend-card p{
  color:var(--rp-ink) !important;
}
.rt-embed.rt-paper .rt-p-friend-attr,
.rt-embed.rt-paper .rt-p-friend-attr strong{
  color:var(--rp-red-deep) !important;
  opacity:1 !important;
}
.rt-embed.rt-paper .rt-p-speed-winner,
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-method,
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-time,
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-time strong{
  color:var(--rp-red) !important;
}
.rt-embed.rt-paper .rt-p-speed-winner .rt-p-speed-note{
  color:rgba(15,14,12,0.62) !important;
}

/* W12. QUICK COPY + ALIGNMENT CLEANUP (Pass 12, May 23 2026).
       Keep section subheads aligned to the same left edge as their H2s,
       and keep the Resolve droplets free of the old black circle even
       after Payhip's later CSS is concatenated into the shipped file. */
.rt-embed.rt-paper .rt-p-section-lead{
  margin:10px 0 30px !important;
  max-width:760px;
  text-align:left !important;
}
.rt-embed.rt-paper .rt-p-section > .rt-p-container > .rt-p-section-lead{
  margin-left:0 !important;
  margin-right:0 !important;
}
.rt-embed.rt-paper .rt-p-compat-card:first-child .rt-p-cc-icon{
  background:transparent !important;
  border-radius:0 !important;
  padding:0 !important;
  width:auto !important;
  height:64px;
}

/* W13. CLOSING CTA CENTERING (Pass 13, May 23 2026).
       Payhip's footer/frame makes the final rotated stamp look slightly
       adrift when it behaves like an inline element. Give the closing
       CTA button its own centered block width so its visual center holds. */
.rt-embed.rt-paper .rt-p-cta-container > a.rt-p-stamp-btn-big{
  display:flex !important;
  width:max-content;
  max-width:calc(100% - 32px);
  margin:36px auto 0 !important;
  align-items:center;
  justify-content:center;
  transform-origin:center center;
}

/* W14. HERO DROP-IN CLIP FIX (Pass 14, May 23 2026).
       The first animation frames moved huge rotated letters up by
       -160%, while the hero section clipped overflow. That made the
       title appear sliced as it dropped in. Let the title overflow
       within the hero and use a hero-only drop path that starts inside
       the available safe area. */
.rt-embed.rt-paper .rt-p-hero,
.rt-embed.rt-paper .rt-p-title,
.rt-embed.rt-paper .rt-p-word{
  overflow:visible !important;
}
.rt-embed.rt-paper .rt-p-hero .rt-p-letter{
  animation-name:rt-p-drop-hero-safe !important;
}
@keyframes rt-p-drop-hero-safe{
  0%      { transform:translateY(-42%) rotate(calc(var(--rp-rot,0deg) + 28deg)); opacity:0; }
  8.33%   { transform:translateY(-34%) rotate(calc(var(--rp-rot,0deg) + 22deg)); opacity:0.18; }
  16.67%  { transform:translateY(-24%) rotate(calc(var(--rp-rot,0deg) + 16deg)); opacity:0.45; }
  25%     { transform:translateY(-12%) rotate(calc(var(--rp-rot,0deg) + 10deg)); opacity:0.72; }
  33.33%  { transform:translateY(-3%) rotate(calc(var(--rp-rot,0deg) + 6deg)); opacity:0.95; }
  41.67%  { transform:translateY(6%) rotate(calc(var(--rp-rot,0deg) - 1deg)); opacity:1; }
  50%     { transform:translateY(8%) rotate(calc(var(--rp-rot,0deg) - 3deg)); opacity:1; }
  58.33%  { transform:translateY(7%) rotate(calc(var(--rp-rot,0deg) - 2deg)); opacity:1; }
  66.67%  { transform:translateY(3%) rotate(calc(var(--rp-rot,0deg) - 1deg)); opacity:1; }
  75%     { transform:translateY(-1%) rotate(calc(var(--rp-rot,0deg) + 0.5deg)); opacity:1; }
  83.33%  { transform:translateY(-2%) rotate(calc(var(--rp-rot,0deg) + 1deg)); opacity:1; }
  91.67%  { transform:translateY(-1%) rotate(calc(var(--rp-rot,0deg) + 0.5deg)); opacity:1; }
  100%    { transform:translateY(0) rotate(var(--rp-rot,0deg)); opacity:1; }
}

/* W15. SMOOTH HERO TITLE MOTION (Pass 15, May 23 2026).
       Rystal originally wanted the hero letters frame-rate reduced,
       then asked for the top hero title to feel normal and smooth again.
       Keep W14's safe travel range, but remove the step-end stop-motion
       timing for hero letters only. */
.rt-embed.rt-paper .rt-p-hero .rt-p-letter{
  animation-name:rt-p-drop-hero-smooth !important;
  animation-duration:0.86s !important;
  animation-timing-function:cubic-bezier(.18,.72,.2,1) !important;
}
@keyframes rt-p-drop-hero-smooth{
  0%   { transform:translateY(-42%) rotate(calc(var(--rp-rot,0deg) + 22deg)); opacity:0; }
  58%  { transform:translateY(5%) rotate(calc(var(--rp-rot,0deg) - 2deg)); opacity:1; }
  78%  { transform:translateY(-2%) rotate(calc(var(--rp-rot,0deg) + 0.8deg)); opacity:1; }
  100% { transform:translateY(0) rotate(var(--rp-rot,0deg)); opacity:1; }
}

/* W16. THREE-STEP CARD CONTRAST (Pass 16, May 23 2026).
       The step cards used the same dark surface as the section, so the
       borders/shadows blended into the page. Lift only these cards with
       a warmer panel, cream edge, and deeper shadow. */
.rt-embed.rt-paper .rt-p-step{
  background:
    linear-gradient(180deg, rgba(244,236,220,0.055), rgba(244,236,220,0.020)),
    #171310 !important;
  border:2px solid rgba(244,236,220,0.20) !important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.82),
    9px 10px 0 rgba(0,0,0,0.58),
    0 18px 34px rgba(0,0,0,0.36) !important;
}
.rt-embed.rt-paper .rt-p-step::before{
  opacity:0.55;
}
.rt-embed.rt-paper .rt-p-step-demo{
  border-color:rgba(244,236,220,0.12) !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.42);
}

/* W17. Website card video assets (Jun 15 2026).
       The launch-preview cards are short muted MP4 loops with JPG posters.
       Use contain instead of cover so Resolve Inspector UI clips do not
       get cropped into nonsense. */
.rt-embed.rt-paper .rt-p-demo-slot:has(video),
.rt-embed.rt-paper .rt-p-step-demo:has(video),
.rt-embed.rt-paper .rt-p-style-demo:has(video),
.rt-embed.rt-paper .rt-p-feat-img:has(video){
  border-style:solid;
  background:#2d2d35;
  padding:0;
  overflow:hidden;
}
.rt-embed.rt-paper .rt-p-demo-slot video,
.rt-embed.rt-paper .rt-p-step-demo video,
.rt-embed.rt-paper .rt-p-style-demo video,
.rt-embed.rt-paper .rt-p-feat-img video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  background:#2d2d35;
}
.rt-embed.rt-paper .rt-p-demo-slot[data-slot="hero"],
.rt-embed.rt-paper .rt-p-step-demo,
.rt-embed.rt-paper .rt-p-feat-img{
  aspect-ratio:16/9;
}
.rt-embed.rt-paper .rt-p-demo-slot[data-slot="hero"] video,
.rt-embed.rt-paper .rt-p-step-demo video,
.rt-embed.rt-paper .rt-p-feat-img video{
  object-fit:cover;
  transform-origin:center center;
}
.rt-embed.rt-paper .rt-p-demo-slot[data-slot="hero"]{
  background-image:url("/typeflowpaper/demo-magazine-no-scissors.jpg?v=20260624-cards");
  background-size:cover;
  background-position:center center;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-01"]{
  background-image:url("/typeflowpaper/demo-step-01-type.jpg?v=20260624-cards");
  background-size:cover;
  background-position:center center;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-02"]{
  background-image:url("/typeflowpaper/demo-step-02-animate-it.jpg?v=20260624-cards");
  background-size:cover;
  background-position:center center;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-03"]{
  background-image:url("/typeflowpaper/demo-step-03-done.jpg?v=20260624-cards");
  background-size:cover;
  background-position:center center;
}
.rt-embed.rt-paper .rt-p-demo-slot[data-slot="hero"] video{transform:scale(1.36)}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-01"] video{transform:scale(1.06)}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-02"] video{transform:scale(1.24)}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-03"] video{transform:scale(1.02)}
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-shake"] video{
  transform:scale(1.55);
  transform-origin:center 72%;
}
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-scope"] video{transform:scale(1.28)}
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-stagger"] video{
  transform:scale(1.34);
  transform-origin:center 48%;
}
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-stutter"] video{
  transform:scale(1.34);
  transform-origin:center 64%;
}

/* 2026-06-24: Start-timing/framing correction for Payhip embed.
   Keep step cards whole-frame so action is not cropped, and reduce Shake after
   the prior zoom overshot the usable frame. */
.rt-embed.rt-paper .rt-p-step-demo[data-slot]{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot] video{
  object-fit:contain !important;
  transform:none !important;
  transform-origin:center center !important;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-01"]{
  background-image:url("/typeflowpaper/demo-step-01-type.jpg?v=20260624-cardbatch") !important;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-02"]{
  background-image:url("/typeflowpaper/demo-step-02-animate-it.jpg?v=20260624-cardbatch") !important;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-03"]{
  background-image:url("/typeflowpaper/demo-step-03-done.jpg?v=20260624-cardbatch") !important;
}
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-shake"] video{
  transform:scale(1.32) !important;
  transform-origin:center 72%;
}

/* 2026-06-24 cardbatch: final active card-source/framing override. */
.rt-embed.rt-paper .rt-p-step-demo[data-slot]{
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot] video{
  object-fit:contain !important;
  transform:none !important;
  transform-origin:center center !important;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-01"]{
  background-image:url("/typeflowpaper/demo-step-01-type.jpg?v=20260624-cardbatch") !important;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-02"]{
  background-image:url("/typeflowpaper/demo-step-02-animate-it.jpg?v=20260624-cardbatch") !important;
}
.rt-embed.rt-paper .rt-p-step-demo[data-slot="step-03"]{
  background-image:url("/typeflowpaper/demo-step-03-done.jpg?v=20260624-cardbatch") !important;
}
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-shake"] video{
  transform:scale(1.32) !important;
  transform-origin:center 72%;
}
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-scope"] video,
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-stagger"] video,
.rt-embed.rt-paper .rt-p-feat-img[data-slot="feat-stutter"] video{
  transform:scale(1.14) !important;
  transform-origin:center center;
}
.rt-embed.rt-paper .rt-p-style-demo[data-slot] video{
  object-fit:contain !important;
  transform-origin:center center;
}
.rt-embed.rt-paper .rt-p-style-demo[data-slot="style-2am-ransom-note"] video{transform:scale(1.86) !important}
.rt-embed.rt-paper .rt-p-style-demo[data-slot="style-bw-ransom"] video{transform:scale(1.86) !important}
.rt-embed.rt-paper .rt-p-style-demo[data-slot="style-color-joy"] video{transform:scale(1.28) !important}
.rt-embed.rt-paper .rt-p-style-demo[data-slot="style-muted-newsprint"] video{transform:scale(1.26) !important}