/* =====================================================================
   rystal.shop - TypeFlow homepage hero (full-height, full-bleed)
   Hosted at: https://rystal.shop/styles/typeflow-hero.css
   Built: 2026-04-30 23:50
   Palette respects the locked --rt-cta: #E25E14 from typeflow.css.
   ===================================================================== */

.rtfh-section{
  --rtfh-text:#f5f5f7;
  --rtfh-text-strong:#ffffff;
  --rtfh-muted:rgba(245,245,247,0.72);
  --rtfh-muted-2:rgba(245,245,247,0.45);
  --rtfh-cta:#0071e3;          /* Apple blue — Learn more = primary */
  --rtfh-cta-hover:#0080ff;
  --rtfh-cta-glow:rgba(0,113,227,0.32);
  --rtfh-cta-orange:#E25E14;   /* matches typeflow.css --rt-cta — Buy TypeFlow outline = secondary, primes the buy page */
  --rtfh-cta-orange-hover:#FF6B19;
  --rtfh-cta-orange-soft:rgba(226,94,20,0.12);
  --rtfh-accent:#ec4899;        /* pink — kicker only */
  --rtfh-accent-blue:#60a5fa;
  --rtfh-purple:#8b5cf6;        /* matches typeflow.css --rt-purple */
  --rtfh-star:#fbbf24;
  --rtfh-accent-soft:rgba(236,72,153,0.12);

  position:relative;
  z-index:1;
  isolation:isolate;
  /* Full-bleed escape from any Payhip container */
  width:100vw;
  left:50%;right:50%;
  /* Hide Payhip's wrapper padding without letting adjacent hero art bleed through. */
  margin:-92px -50vw -72px;
  padding-top:70px !important;
  padding-bottom:70px !important;
  /* Compact hero height — not full viewport */
  min-height:70vh;
  background:
    radial-gradient(ellipse 70% 50% at 78% 22%,rgba(236,72,153,0.28),transparent 60%),
    radial-gradient(ellipse 65% 50% at 22% 76%,rgba(139,92,246,0.18),transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 38%,rgba(96,165,250,0.08),transparent 70%),
    linear-gradient(180deg,
      #0F0E25 0%,        /* match Payhip body navy at top */
      #160c30 12%,       /* slight purple lift */
      #1a0a3a 50%,       /* characterful purple-black middle (stands out) */
      #160c30 88%,       /* fade out */
      #0F0E25 100%);     /* match Most Popular section below — blends seam */
  display:flex;
  align-items:center;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  color:var(--rtfh-text);
}
.rtfh-section *,.rtfh-section *::before,.rtfh-section *::after{box-sizing:border-box;margin:0;padding:0}
.rtfh-section a{color:inherit;text-decoration:none}

/* Let Payhip's nav sit on the same visual field as the first hero. */
html body header,
html body .header,
html body .site-header,
html body .store-header,
html body .storefront-header,
html body .page-header,
html body .navbar,
html body .nav-bar,
html body .navigation{
  background:
    radial-gradient(ellipse 65% 160% at 74% 100%,rgba(236,72,153,0.18),transparent 62%),
    linear-gradient(180deg,#0F0E25 0%,#120d2a 100%) !important;
  border-bottom-color:rgba(255,255,255,0.10) !important;
}

.rtfh-section .rtfh-wrap{
  width:100%;
  max-width:1480px;
  margin:0 auto;
  padding:0 6vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  position:relative;
  z-index:2;
}

/* ========== LEFT — content ========== */
.rtfh-section .rtfh-text{
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
}
.rtfh-section .rtfh-eyebrow{
  display:none !important;
}
.rtfh-section .rtfh-eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--rtfh-accent);
  box-shadow:0 0 0 4px rgba(236,72,153,0.20);
  animation:rtfh-pulse 2.4s infinite;
}
@keyframes rtfh-pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(236,72,153,0.20)}
  50%{box-shadow:0 0 0 8px rgba(236,72,153,0.04)}
}
.rtfh-section .rtfh-eyebrow-text{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11.5px;font-weight:700;letter-spacing:0.16em;
  text-transform:uppercase;
  background:linear-gradient(120deg,var(--rtfh-accent),var(--rtfh-accent-blue));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.rtfh-section .rtfh-h1{
  font-family:'Titling Gothic SB','titling-gothic-fb','Titling Gothic FB','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(64px,7.6vw,128px);
  font-weight:600;
  letter-spacing:-0.045em;
  line-height:0.94;
  margin:0 0 22px;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 55%,#ff7ab8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rtfh-section .rtfh-sub{
  font-family:'Neue Haas Grotesk Display Pro','neue-haas-grotesk-display','Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:clamp(20px,1.7vw,26px);
  font-weight:400;
  color:var(--rtfh-muted);
  letter-spacing:-0.012em;
  margin:0 0 36px;
  max-width:580px;
  line-height:1.4;
}
.rtfh-section .rtfh-sub strong{
  color:var(--rtfh-text-strong);
  font-weight:600;
  background:linear-gradient(120deg,#ffffff,var(--rtfh-purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* CTA buttons — orange primary matches typeflow.css landing-page CTA */
.rtfh-section .rtfh-cta-row{
  display:inline-flex;gap:12px;margin-bottom:32px;flex-wrap:wrap;
}
.rtfh-section a.rtfh-btn,
.rtfh-section a.rtfh-btn:link,
.rtfh-section a.rtfh-btn:visited,
.rtfh-section a.rtfh-btn:hover,
.rtfh-section a.rtfh-btn:focus,
.rtfh-section a.rtfh-btn:active{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 32px;border-radius:22px;
  font-family:inherit;
  font-weight:700;font-size:16px;letter-spacing:-0.005em;
  text-decoration:none !important;
  text-decoration-line:none !important;
  text-decoration-thickness:0 !important;
  text-underline-offset:0 !important;
  -webkit-text-decoration:none !important;
  -webkit-text-decoration-line:none !important;
  border-bottom:none !important;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
  white-space:nowrap;
  color:#ffffff !important;
}
.rtfh-section a.rtfh-btn-primary,
.rtfh-section a.rtfh-btn-primary:link,
.rtfh-section a.rtfh-btn-primary:visited,
.rtfh-section a.rtfh-btn-primary:hover,
.rtfh-section a.rtfh-btn-primary:focus,
.rtfh-section a.rtfh-btn-primary:active{
  background:var(--rtfh-cta) !important;
  color:#ffffff !important;
  border:none !important;
  box-shadow:0 10px 32px var(--rtfh-cta-glow),inset 0 -2px 0 rgba(0,0,0,0.12);
}
.rtfh-section a.rtfh-btn-primary:hover{
  transform:translateY(-1px);
  background:var(--rtfh-cta-hover) !important;
  box-shadow:0 14px 40px var(--rtfh-cta-glow),inset 0 -2px 0 rgba(0,0,0,0.10);
}
html body .rtfh-section a.rtfh-btn-secondary,
html body .rtfh-section a.rtfh-btn-secondary:link,
html body .rtfh-section a.rtfh-btn-secondary:visited,
html body .rtfh-section a.rtfh-btn-secondary:hover,
html body .rtfh-section a.rtfh-btn-secondary:focus,
html body .rtfh-section a.rtfh-btn-secondary:active{
  background:transparent !important;
  color:#ffffff !important;
  border:1.5px solid rgba(226,94,20,0.5) !important;
}
html body .rtfh-section a.rtfh-btn-secondary .rtfh-btn-price{
  background:rgba(255,255,255,0.12) !important;
  color:#ffffff !important;
}
.rtfh-section a.rtfh-btn-secondary:hover{
  background:var(--rtfh-cta-orange-soft) !important;
  border:1.5px solid var(--rtfh-cta-orange-hover) !important;
  color:#ffffff !important;
}
/* Price pill on the outlined secondary button — orange-themed to match the outline */
.rtfh-section a.rtfh-btn-secondary .rtfh-btn-price{
  background:rgba(226,94,20,0.18) !important;
  color:var(--rtfh-cta-orange) !important;
}
.rtfh-section a.rtfh-btn-secondary:hover .rtfh-btn-price{
  background:rgba(255,107,25,0.22) !important;
  color:var(--rtfh-cta-orange-hover) !important;
}
.rtfh-section a.rtfh-btn .rtfh-btn-price{
  display:inline-block;
  font-weight:800;font-size:15px;
  background:rgba(255,255,255,0.22);
  padding:3px 11px;border-radius:16px;
  color:#ffffff !important;
}

.rtfh-section .rtfh-rating{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Neue Haas Grotesk Display Pro','Helvetica Neue',sans-serif;
  font-size:14px;color:var(--rtfh-muted);letter-spacing:-0.005em;
}
.rtfh-section .rtfh-rating svg{width:18px;height:18px;display:inline-block}
.rtfh-section .rtfh-stars-svg{display:inline-flex;gap:2px}
.rtfh-section .rtfh-rating-num{color:var(--rtfh-text-strong);font-weight:600;font-size:15px}
.rtfh-section .rtfh-rating-meta{color:var(--rtfh-muted-2)}

/* ========== RIGHT — TypeFlow logo, big, soft-glow backdrop ========== */
.rtfh-section .rtfh-logo-wrap{
  position:relative;
  width:100%;
  display:grid;
  place-items:center;
}
.rtfh-section .rtfh-logo-wrap::before{
  content:'';
  position:absolute;
  inset:5%;
  background:
    radial-gradient(circle at 50% 50%,rgba(236,72,153,0.30) 0%,rgba(236,72,153,0.06) 40%,transparent 65%);
  filter:blur(60px);
  z-index:0;
  pointer-events:none;
}
.rtfh-section .rtfh-logo-wrap img{
  position:relative;
  z-index:1;
  width:100%;
  max-width:680px;
  height:auto;
  display:block;
  border-radius:36px;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.55),
    0 16px 40px rgba(236,72,153,0.18),
    0 0 0 1px rgba(255,255,255,0.04);
}


/* Logo is clickable — subtle scale + brightness on hover */
.rtfh-section .rtfh-logo-link,
.rtfh-section .rtfh-logo-link:link,
.rtfh-section .rtfh-logo-link:visited,
.rtfh-section .rtfh-logo-link:hover,
.rtfh-section .rtfh-logo-link:focus,
.rtfh-section .rtfh-logo-link:active{
  display:block;
  cursor:pointer;
  text-decoration:none !important;
  -webkit-text-decoration:none !important;
  border:none !important;border-bottom:0 !important;
  outline:none;
}
.rtfh-section .rtfh-logo-link img{
  transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.rtfh-section .rtfh-logo-link:hover img{
  transform:scale(1.02);
  filter:brightness(1.04);
}
@media (prefers-reduced-motion:reduce){
  .rtfh-section .rtfh-logo-link:hover img{transform:none;filter:none}
}

/* ========== MOBILE ========== */
@media (max-width:980px){
  .rtfh-section{
    margin:-86px -50vw -54px;
    min-height:auto;
    padding-top:88px !important;
    padding-bottom:54px !important;
    background:
      radial-gradient(ellipse 95% 42% at 84% 16%,rgba(236,72,153,0.24),transparent 64%),
      radial-gradient(ellipse 86% 48% at 18% 72%,rgba(139,92,246,0.18),transparent 62%),
      linear-gradient(180deg,#0F0E25 0%,#170d31 28%,#180a36 62%,#0F0E25 100%);
  }
  .rtfh-section .rtfh-wrap{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 6vw;
    text-align:center;
  }
  .rtfh-section .rtfh-text{align-items:center}
  .rtfh-section .rtfh-eyebrow{margin-bottom:16px}
  .rtfh-section .rtfh-h1{
    font-size:clamp(44px,12vw,68px);
    margin-bottom:14px;
  }
  .rtfh-section .rtfh-sub{
    font-size:clamp(17px,4vw,21px);
    margin:0 auto 24px;
    max-width:560px;
  }
  .rtfh-section .rtfh-cta-row{justify-content:center}
  .rtfh-section .rtfh-logo-wrap{max-width:320px;margin:0 auto 8px;order:-1}
  .rtfh-section .rtfh-logo-wrap::before{inset:0;filter:blur(42px)}
  .rtfh-section .rtfh-logo-wrap img{
    max-width:280px;
    border-radius:28px;
  }
  .rtfh-section .rtfh-rating{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    column-gap:10px;
    row-gap:8px;
    width:min(100%,320px);
    margin:0 auto;
    font-size:14px;
    line-height:1.35;
  }
  .rtfh-section .rtfh-rating-meta{
    flex:0 0 100%;
    max-width:320px;
    text-align:center;
  }
}
@media (max-width:520px){
  .rtfh-section{
    margin:-86px -50vw -46px;
    padding-top:78px !important;
    padding-bottom:44px !important;
  }
  .rtfh-section .rtfh-wrap{padding:0 22px;gap:18px}
  .rtfh-section .rtfh-logo-wrap{max-width:230px;margin-bottom:4px}
  .rtfh-section .rtfh-logo-wrap img{max-width:220px;border-radius:22px}
  .rtfh-section .rtfh-eyebrow{
    padding:6px 13px;
    margin-bottom:14px;
  }
  .rtfh-section .rtfh-eyebrow-text{font-size:10px;letter-spacing:0.16em}
  .rtfh-section .rtfh-h1{font-size:clamp(42px,13.5vw,56px)}
  .rtfh-section .rtfh-sub{font-size:16.5px;line-height:1.34;max-width:310px}
  .rtfh-section .rtfh-cta-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:100%;
    margin-bottom:24px;
  }
  .rtfh-section a.rtfh-btn{
    width:min(100%,280px);
    min-height:50px;
    padding:12px 20px;
    font-size:15.5px;
  }
  .rtfh-section a.rtfh-btn .rtfh-btn-price{font-size:15px}
  .rtfh-section .rtfh-rating svg{width:17px;height:17px}
  .rtfh-section .rtfh-rating{width:min(100%,300px)}
  .rtfh-section .rtfh-rating-meta{max-width:280px;font-size:13.5px}
}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .rtfh-section .rtfh-eyebrow-dot{animation:none}
}

/* ===== NUCLEAR underline killers — covers Payhip's :hover override ===== */
html body .rtfh-section a,
html body .rtfh-section a:link,
html body .rtfh-section a:visited,
html body .rtfh-section a:hover,
html body .rtfh-section a:focus,
html body .rtfh-section a:active,
html body .rtfh-section a *,
html body .rtfh-section a:hover *,
html body .rtfh-section a:focus *{
  text-decoration:none !important;
  text-decoration-line:none !important;
  text-decoration-thickness:0 !important;
  text-underline-offset:0 !important;
  -webkit-text-decoration:none !important;
  -webkit-text-decoration-line:none !important;
  border-bottom:0 !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
}