:root {
    --paper: #FAF7F0;
    --card: #FFFFFF;
    --ink: #1E1B15;
    --ink-soft: #635C4C;
    --navy: #224674;
    --red: #E8634F;
    --red-deep: #D64833;
    --red-dark: #B8371F;
    --saffron: #FFA64D;
    --indiagreen: #129A52;
    --yellow: #FFCA5E;
    --purple: #896FBF;
    --line: #1E1B15;
    --wa-green: #25D366;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
  body {
    background: var(--paper); color: var(--ink); font-family: 'Nunito', sans-serif;
    line-height: 1.55; width: 100%; overflow-x: hidden;
  }
  h1, h2, h3, .display { font-family: 'Baloo 2', sans-serif; color: var(--ink); font-weight: 800; }
  .hand { font-family: 'Kalam', cursive; }
  a { color: inherit; }
  .wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
  ::selection { background: var(--yellow); color: var(--ink); }
  svg { display: block; }
  img { max-width: 100%; display: block; }

  .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  .doodle-card { background: var(--card); border: 2px solid var(--line); border-radius: 14px; box-shadow: 3px 3px 0 var(--line); }

  /* ============ SHARED BUTTONS ============ */
  .btn-primary {
    background: var(--red); color: #fff; padding: 17px 34px; border: 2px solid var(--line); border-radius: 12px;
    font-weight: 800; font-size: 17px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
    box-shadow: 4px 4px 0 var(--line); transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: 'Baloo 2', sans-serif;
    min-height: 48px; cursor: pointer; justify-content: center;
  }
  .btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--line); }
  .btn-primary:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--line); transition: transform 0.08s ease, box-shadow 0.08s ease; }
  .btn-primary svg { width: 18px; height: 18px; }
  .cta-microcopy { font-size: 13.5px; color: var(--ink-soft); font-weight: 700; margin-top: 10px; }

  /* ============ NAV ============ */
  nav { position: sticky; top: 0; z-index: 100; background: rgba(250,247,240,0.95); backdrop-filter: blur(4px); border-bottom: 2px solid var(--line); }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 12px; }
  .logo { display: flex; align-items: center; gap: 8px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; }
  .logo-mark { display: block; }
  .nav-cta {
    background: var(--yellow); color: var(--ink); padding: 12px 22px; border: 2px solid var(--line); border-radius: 10px;
    font-weight: 800; font-size: 14px; text-decoration: none; box-shadow: 2.5px 2.5px 0 var(--line);
    transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: 'Baloo 2', sans-serif;
    min-height: 48px; display: inline-flex; align-items: center;
  }
  .nav-cta:hover { transform: translate(-2px,-2px); box-shadow: 4.5px 4.5px 0 var(--line); }
  .nav-cta:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--line); }

  /* ============ HERO ============ */
  .hero { padding: 56px 0 40px; position: relative; overflow: hidden; }
  .hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; }
  .hero-copy { text-align: left; }
  .hero h1 { font-size: 46px; line-height: 1.12; margin-bottom: 18px; animation: fadeUp 0.7s ease 0.1s both; }
  .hero h1 .hi-red { color: var(--red-deep); }
  .underline-key {
    position: relative; display: inline-block; white-space: nowrap; max-width: 100%;
  }
  .underline-key::after {
    content: ""; position: absolute; left: -2%; right: -2%; bottom: -0.14em; height: 0.22em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 12 Q60 4 100 9 T198 8' stroke='%23FFCA5E' stroke-width='7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 100% 100%; z-index: -1;
  }
  @media (max-width: 400px) { .underline-key { white-space: normal; } }
  @keyframes fadeUp { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }

  .hero-sub { font-size: 18px; color: var(--ink-soft); font-weight: 700; margin-bottom: 20px; max-width: 460px; animation: fadeUp 0.7s ease 0.2s both; }
  /* Hero OTB message — deliberately shaped like a minimal WhatsApp chat bubble */
  .hero-otb-bubble {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    margin:2px 0 20px; padding:11px 19px 12px;
    max-width:360px;
    background:#FF8A22; color:#fff;
    border-radius:18px 18px 18px 6px;
    font-family:'Baloo 2',sans-serif; font-size:15px; line-height:1.18;
    font-weight:800; text-align:center;
    box-shadow:0 8px 22px rgba(255,138,34,.22);
    transform:translateY(0) rotate(-1deg);
    will-change:transform,box-shadow;
    animation:otbBubbleFloat 3.2s ease-in-out infinite;
  }
  /* WhatsApp-style lower-left tail */
  .hero-otb-bubble::after {
    content:""; position:absolute; left:0; bottom:-1px; width:18px; height:18px;
    background:#FF8A22; clip-path:polygon(0 0,100% 0,0 100%);
    transform:translateX(-1px) translateY(2px);
  }
  .hero-otb-bubble span { position:relative; z-index:1; }
  .hero-otb-bubble strong { font-weight:1000; }
  @keyframes otbBubbleFloat {
    0%,100% { transform:translateY(0) rotate(-1deg); box-shadow:0 8px 22px rgba(255,138,34,.20); }
    50% { transform:translateY(-5px) rotate(1deg); box-shadow:0 13px 28px rgba(255,138,34,.30); }
  }


  .hero-value-points { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; animation: fadeUp 0.7s ease 0.3s both; }
  .hero-value-point {
    background: var(--card); border: 2px solid var(--line); border-radius: 100px; padding: 8px 16px;
    font-weight: 800; font-size: 13.5px; box-shadow: 2px 2px 0 var(--line); white-space: nowrap;
  }

  .hero-noapp-line {
    font-size: 14px; color: var(--navy); font-weight: 800; margin-bottom: 26px; animation: fadeUp 0.7s ease 0.35s both;
  }

  .hero-ctas { animation: fadeUp 0.7s ease 0.45s both; }

  /* Hero visual: floating child cutout + organic coral blob + floating icon cards */
  .hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
  .hero-blob {
    position: absolute; width: 400px; height: 400px; left: 50%; top: 50%; transform: translate(-50%, -48%);
    background: radial-gradient(circle at 32% 28%, #FF8A73 0%, var(--red) 45%, var(--red-dark) 100%);
    border-radius: 47% 53% 58% 42% / 48% 45% 55% 52%;
    box-shadow: 0 24px 60px -12px rgba(216, 72, 51, 0.45);
    animation: blobFloat 7s ease-in-out infinite;
  }
  @keyframes blobFloat {
    0%, 100% { border-radius: 47% 53% 58% 42% / 48% 45% 55% 52%; }
    50% { border-radius: 55% 45% 48% 52% / 42% 55% 45% 58%; }
  }
  .hero-child-img {
    position: relative; z-index: 2; width: 380px; max-width: 100%; filter: drop-shadow(0 18px 30px rgba(30,27,21,0.25));
    animation: childFloat 4.5s ease-in-out infinite;
  }
  @keyframes childFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  .hero-float-card {
    position: absolute; z-index: 3; background: var(--card); border: 2px solid var(--line); border-radius: 14px;
    padding: 10px 16px; display: flex; align-items: center; gap: 9px; box-shadow: 3px 3px 0 var(--line);
    font-weight: 800; font-size: 12.5px; animation: cardFloat 5s ease-in-out infinite;
  }
  .hero-float-card .icon-circle {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .hero-float-card .icon-circle svg { width: 16px; height: 16px; }
  .hero-float-1 { top: 6%; left: -4%; animation-delay: 0s; }
  .hero-float-1 .icon-circle { background: var(--indiagreen); }
  .hero-float-2 { bottom: 8%; right: -6%; animation-delay: 1.2s; }
  .hero-float-2 .icon-circle { background: var(--yellow); }
  @keyframes cardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

  @media (max-width: 900px) {
    .hero .wrap { grid-template-columns: 1fr; gap: 8px; text-align: center; }
    .hero-copy { text-align: center; }
    .hero-sub { margin-left: auto; margin-right: auto; }
    .hero-value-points { justify-content: center; }
    .hero-visual { min-height: 340px; order: -1; margin-bottom: 8px; }
    .hero-blob { width: 300px; height: 300px; }
    .hero-child-img { width: 280px; }
    .hero-float-card { font-size: 11px; padding: 8px 12px; }
    .hero-float-1 { left: 0%; top: 2%; }
    .hero-float-2 { right: 0%; bottom: 4%; }
    .hero h1 { font-size: 34px; }
  }
  @media (max-width: 420px) {
    .hero h1 { font-size: 29px; }
    .hero-float-card { display: none; }
  }



  /* ============ ROZGYAAN VIBRANT MINIMAL REFRESH ============ */
  :root {
    --paper: #FFFFFF;
    --card: #FFFFFF;
    --ink: #171717;
    --ink-soft: #5D625F;
    --navy: #24507A;
    --red: #FF3F36;
    --red-deep: #F22F2F;
    --red-dark: #C91F28;
    --saffron: #FF8A22;
    --indiagreen: #12A957;
    --yellow: #FFD52F;
    --purple: #7357C8;
    --line: transparent;
    --wa-green: #25D366;
  }
  body { background:#fff; }
  nav { background:rgba(255,255,255,.94); border:0 !important; box-shadow:0 4px 18px rgba(23,23,23,.06); }
  .doodle-card, .sample-player-btn, .how-card, .form-card, .price-card, .faq-item, .testi-card,
  .btn-primary, .nav-cta, .btn-select, .form-submit, .plan-opt, .hero-float-card { border:0 !important; box-shadow:0 10px 30px rgba(23,23,23,.08) !important; }
  .btn-primary { background:var(--red); border-radius:14px; box-shadow:0 12px 24px rgba(242,47,47,.22) !important; }
  .btn-primary:hover { box-shadow:0 15px 30px rgba(242,47,47,.28) !important; }
  .nav-cta { background:var(--yellow); border-radius:12px; box-shadow:0 8px 18px rgba(255,213,47,.24) !important; }
  .hero { padding-top:48px; background:#fff; }
  .hero h1 .hi-red { color:var(--red); }
  .hero-noapp-line { color:var(--navy); font-weight:900; letter-spacing:.01em; }
  .hero-blob { background:radial-gradient(circle at 32% 28%, #FF625B 0%, var(--red) 48%, #D9252E 100%); box-shadow:0 28px 70px -18px rgba(242,47,47,.38); }
  .hero-float-card { background:#fff; box-shadow:0 12px 26px rgba(23,23,23,.11) !important; border-radius:16px; }
  .hero-float-1 .icon-circle { background:var(--indiagreen); }
  .hero-float-2 .icon-circle { background:var(--yellow); }
  .hero-bharat-bubble {
    position:absolute; z-index:4; top:2%; right:-2%; transform:rotate(5deg);
    background:var(--indiagreen); color:#fff; padding:15px 21px 13px; border-radius:30px 28px 34px 24px;
    font-family:'Baloo 2',sans-serif; font-size:15px; line-height:1.0; font-weight:900; text-align:center;
    box-shadow:0 12px 26px rgba(18,169,87,.23); animation:bharatFloat 4.8s ease-in-out infinite;
  }
  .hero-bharat-bubble span { color:var(--yellow); font-size:18px; }
  .hero-bharat-bubble b { position:absolute; right:-8px; top:-10px; font-size:18px; color:var(--saffron); }
  @keyframes bharatFloat { 0%,100%{transform:rotate(5deg) translateY(0)}50%{transform:rotate(3deg) translateY(-7px)} }
  .section-alt { background:#FFF8F3; border:0 !important; }
  .section-head h2, .why-copy h2 { letter-spacing:-.02em; }
  .sample-player-btn { background:#fff; border-radius:18px; }
  .sample-player-audio .sample-player-icon { background:var(--red); }
  .sample-player-fact .sample-player-icon { background:var(--orange, #FF8A22); }
  .sample-player-icon { box-shadow:0 7px 16px rgba(23,23,23,.10); }
  .kicker { color:var(--red); }
  .why-wrap { align-items:center; }
  .why-sub { color:var(--ink-soft); font-size:16px; font-weight:700; max-width:560px; }
  .why-lines { display:flex; flex-direction:column; gap:14px; margin-top:22px; }
  .why-line { display:flex; align-items:flex-start; gap:12px; color:var(--ink); font-size:15px; font-weight:800; }
  .why-line > span:last-child { display:flex; flex-direction:column; gap:1px; }
  .why-line strong { font-weight:900; }
  .why-line small { color:var(--ink-soft); font-size:13px; line-height:1.4; font-weight:700; }
  .why-icon-bubble { width:42px; height:42px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex:0 0 42px; }
  .why-icon-bubble svg { width:21px; height:21px; }
  .why-icon-red { background:#FFE1DF; color:var(--red); }
  .why-icon-orange { background:#FFF0DD; color:var(--saffron); }
  .why-icon-yellow { background:#FFF5B9; color:#A57A00; }
  .why-icon-green { background:#DDF7E8; color:var(--indiagreen); }
  .why-photo-wrap { position:relative; display:flex; align-items:center; justify-content:center; min-height:400px; }
  .why-photo-img { width:100%; max-width:470px; filter:drop-shadow(0 20px 30px rgba(23,23,23,.12)); animation:parentChildBounce 4.5s ease-in-out infinite; }
  @keyframes parentChildBounce { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-10px) rotate(.5deg)} }
  .why-photo-spark { position:absolute; font-family:'Baloo 2',sans-serif; font-weight:900; }
  .spark-one { top:12%; right:7%; color:var(--saffron); font-size:25px; animation:sparkFloat 3.8s ease-in-out infinite; }
  .spark-two { bottom:16%; left:8%; color:var(--yellow); font-size:35px; animation:sparkFloat 4.2s ease-in-out infinite reverse; }
  @keyframes sparkFloat { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.08)} }
  .how-card-1 { background:#FFF0EF; }
  .how-card-2 { background:#FFF6DF; }
  .how-card-3 { background:#F2EEFF; }
  .how-card-4 { background:#E7F8EF; }
  .how-icon { filter:saturate(1.25); }
  .price-intro-banner { background:var(--yellow); border:0 !important; box-shadow:0 8px 18px rgba(255,213,47,.20); }
  .price-card.featured { border:0 !important; box-shadow:0 14px 34px rgba(242,47,47,.16) !important; }
  .price-badge { background:var(--red); }
  .price-amount { color:var(--red); }
  .price-card.featured .btn-select { background:var(--red); }
  .btn-select { background:#191919; border:0 !important; }
  .signup-section { background:#171717; border-radius:28px; }
  .form-card { border:0 !important; }
  .form-field input, .form-field select { border:0 !important; background:#F5F5F3; box-shadow:inset 0 0 0 1px rgba(23,23,23,.06); }
  .form-submit { background:var(--red); border:0 !important; }
  .gst-note-box { border:0 !important; background:#FFF1E4; }
  .section-alt .testi-card { background:#fff; }
  .faq-item { border:0 !important; }
  footer { border:0 !important; }
  .mobile-subscribe-btn { border:0 !important; box-shadow:0 12px 26px rgba(242,47,47,.25) !important; background:var(--red) !important; }
  /* Narrower floating CTA */
  @media (max-width: 700px) {
    .mobile-subscribe-btn { width:calc(100% - 72px) !important; max-width:300px !important; left:50% !important; padding:12px 20px !important; font-size:15px !important; }
  }
  @media (max-width: 900px) {
    .hero-bharat-bubble { top:0; right:4%; }
  }
  @media (max-width: 520px) {
    .hero-bharat-bubble { top:0; right:2%; padding:10px 14px; font-size:11px; border-radius:22px; }
    .hero-bharat-bubble span { font-size:14px; }
    .why-photo-wrap { min-height:310px; margin-bottom:8px; }
    .why-photo-img { max-width:390px; }
  }



/* FINAL ROZGYAAN MODERN MINIMAL POLISH */
nav { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.97); box-shadow: 0 6px 24px rgba(23,23,23,.08); }
.hero-value-points {
  display:flex; flex-wrap:wrap; gap:0; align-items:center; width:max-content; max-width:100%;
  padding:8px; border-radius:18px; background:#fff; box-shadow:0 14px 34px rgba(23,23,23,.14);
}
.hero-value-point { border:0 !important; box-shadow:none !important; background:transparent; padding:8px 13px; }
.hero-bharat-bubble { padding-top:24px; }
.hero-bharat-bubble em {
  position:absolute; top:-15px; left:50%; transform:translateX(-50%) rotate(-5deg);
  background:var(--saffron); color:#fff; padding:4px 12px; border-radius:999px;
  font-family:'Kalam',cursive; font-size:14px; font-style:normal; font-weight:700; white-space:nowrap;
  box-shadow:0 7px 16px rgba(255,138,34,.22);
}
.why-wrap { align-items:center; }
.why-copy { text-align:left; }
.why-copy h2 { font-size:32px; margin-bottom:8px; }
.why-sub { max-width:650px; margin-bottom:18px; }
.why-three-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0 24px; }
.why-three-card { padding:14px 12px; border-radius:16px; background:#fff; box-shadow:0 10px 24px rgba(23,23,23,.08); min-height:132px; display:flex; flex-direction:column; align-items:flex-start; }
.why-three-num { width:28px; height:28px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-weight:900; margin-bottom:9px; color:#fff; }
.why-three-card strong { font-family:'Baloo 2',sans-serif; font-size:15px; line-height:1.1; margin-bottom:5px; }
.why-three-card small { font-size:11.5px; line-height:1.35; color:var(--ink-soft); font-weight:700; }
.why-three-1 .why-three-num { background:var(--red); }
.why-three-2 .why-three-num { background:var(--saffron); }
.why-three-3 .why-three-num { background:var(--indiagreen); }
.why-lines { gap:12px; margin-top:4px; }
.why-line { align-items:flex-start; }
.why-line strong { font-size:14px; }
.why-line small { font-size:12px; }
.why-icon-bubble { border-radius:12px; box-shadow:0 6px 14px rgba(23,23,23,.06); }
.how-grid { gap:14px; }
.how-card { border:0 !important; border-radius:18px; padding:22px 17px; box-shadow:0 12px 28px rgba(23,23,23,.09) !important; transition:transform .18s ease, box-shadow .18s ease; }
.how-card:hover { transform:translateY(-4px); box-shadow:0 18px 34px rgba(23,23,23,.12) !important; }
.how-icon { width:46px; height:46px; border-radius:14px; margin:0 auto 11px; display:flex; align-items:center; justify-content:center; }
.how-icon svg { width:23px; height:23px; }
.how-card-1 .how-icon { background:#FFDCD8; color:var(--red); }
.how-card-2 .how-icon { background:#FFE6C7; color:var(--saffron); }
.how-card-3 .how-icon { background:#FFF0A8; color:#9B7200; }
.how-card-4 .how-icon { background:#CFF3DD; color:var(--indiagreen); }
.section-alt { border:0 !important; background:#fff; }
@media (max-width:780px) {
  .why-three-grid { grid-template-columns:1fr; gap:9px; }
  .why-three-card { min-height:0; padding:12px; }
  .why-three-card small { max-width:280px; }
}
@media (max-width:520px) {
  .hero-value-points { width:100%; justify-content:center; }
  .hero-value-point { padding:7px 8px; font-size:12px; }
}



  /* Final layout refinements */
  .hero-value-points {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    width:100%;
    max-width:590px;
    margin:0 0 18px;
    align-items:stretch;
  }
  .hero-value-point {
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:48px;
    padding:10px 9px;
    background:#fff;
    border:0 !important;
    border-radius:16px;
    box-shadow:0 10px 24px rgba(23,23,23,.12) !important;
    font-size:13px;
  }
  .hero-bharat-bubble {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
  }
  .hero-bharat-bubble em {
    order:2;
    display:block;
    font-family:'Kalam',cursive;
    font-size:14px;
    line-height:1;
    color:#fff;
    font-style:normal;
    margin-top:2px;
  }
  .hero-bharat-bubble > div { order:1; }
  .hero-bharat-bubble b { order:3; }
  .why-sub { display:none; }
  .why-three-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:18px 0 24px;
  }
  .why-three-card {
    text-align:left;
    align-items:flex-start;
    min-height:132px;
    padding:15px 14px;
    border-radius:16px;
    border:0 !important;
    box-shadow:0 10px 24px rgba(23,23,23,.08) !important;
  }
  .why-lines { text-align:left; align-items:stretch; }
  .why-line { text-align:left; justify-content:flex-start; }
  .why-line > span:last-child { text-align:left; }
  @media (max-width:900px) {
    .hero-value-points { margin-left:auto; margin-right:auto; }
    .why-lines, .why-line, .why-line > span:last-child { text-align:left; }
  }
  @media (max-width:600px) {
    .hero-value-points { grid-template-columns:1fr; max-width:310px; gap:8px; }
    .hero-value-point { min-height:44px; justify-content:center; }
    .why-three-grid { grid-template-columns:1fr; gap:9px; }
    .why-three-card { min-height:0; }
  }



/* V7 — robust fixed header + correct hero bubble label */
html { scroll-padding-top: 76px; }
body { padding-top: 74px; }
nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99999 !important;
  margin: 0 !important;
}
.hero-bharat-bubble {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.hero-bharat-bubble em {
  position:static !important;
  order:2 !important;
  transform:rotate(-5deg) !important;
  margin-top:6px !important;
  padding:3px 10px !important;
}
.hero-bharat-bubble b { order:3; }
@media (max-width: 780px) {
  body { padding-top: 62px; }
  html { scroll-padding-top: 64px; }
  nav .wrap { height:62px !important; padding-left:16px; padding-right:16px; }
  .logo svg { width:124px !important; height:auto !important; }
  .nav-cta { min-height:42px !important; padding:9px 14px !important; font-size:13px !important; }
}




/* V6 — tighter, cleaner layout refinements */

/* Why RozGyaan: 2 x 2 grid */
.why-lines {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px !important;
  margin-top:8px !important;
}
.why-line {
  min-width:0;
  padding:12px 0;
}

/* Keep the 3 Daily Smart Gyaan cards in one row, including mobile */
.why-three-grid {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:14px 0 18px !important;
}
.why-three-card {
  min-width:0;
  min-height:0 !important;
  padding:12px 11px !important;
}
.why-three-card strong {
  font-size:14px !important;
}
.why-three-card small {
  font-size:10.8px !important;
  line-height:1.3 !important;
}
.why-three-num {
  width:26px !important;
  height:26px !important;
  margin-bottom:7px !important;
}

/* Weekly moral story & quiz icon follows the card colour */
.how-card-3 .how-icon {
  background:#E9E0FF !important;
  color:#7652D6 !important;
}

/* Tighter overall vertical rhythm */
.section {
  padding:40px 0 !important;
}
.section-head {
  margin-bottom:24px !important;
}
.why-copy h2 {
  margin-bottom:6px !important;
}
.how-card {
  padding:18px 15px !important;
}

@media (max-width:780px) {
  /* Intentionally remain 3-across on mobile */
  .why-three-grid {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .why-three-card {
    padding:10px 8px !important;
  }
  .why-three-card strong {
    font-size:11.5px !important;
  }
  .why-three-card small {
    font-size:9.5px !important;
    line-height:1.28 !important;
  }
  .why-three-num {
    width:23px !important;
    height:23px !important;
    border-radius:7px !important;
    margin-bottom:6px !important;
    font-size:11px;
  }
  .why-lines {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px 14px !important;
  }
  .why-line {
    padding:8px 0;
  }
  .why-line small {
    font-size:11.5px !important;
  }
}

@media (max-width:520px) {
  .section {
    padding:32px 0 !important;
  }
  .section-head {
    margin-bottom:20px !important;
  }
  .why-three-grid {
    margin:12px 0 14px !important;
  }
  .why-three-card strong {
    font-size:10.8px !important;
  }
  .why-three-card small {
    font-size:9px !important;
  }
  .why-lines {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px 10px !important;
  }
  .why-line {
    gap:8px !important;
  }
  .why-icon-bubble {
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
    border-radius:10px !important;
  }
  .why-icon-bubble svg {
    width:17px !important;
    height:17px !important;
  }
}




/* FINAL UX + MOBILE FIXES */
html { scroll-padding-top: 78px; }
body { padding-top: 74px; }
nav {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100% !important;
  height: 74px !important;
  z-index: 99999 !important;
  margin: 0 !important;
}
nav .wrap { height: 74px !important; }

.hero-bharat-bubble {
  padding: 10px 14px 9px !important;
  gap: 0 !important;
  top: 3% !important;
  right: 1% !important;
  border-radius: 24px !important;
  min-width: 118px;
}
.hero-bharat-bubble > div {
  background: var(--indiagreen);
  border-radius: 18px;
  padding: 7px 12px 8px;
  line-height: .94;
  font-size: 12px !important;
  box-shadow: 0 7px 16px rgba(18,169,87,.16);
}
.hero-bharat-bubble > div span { font-size: 14px !important; }
.hero-bharat-bubble em {
  background: var(--saffron) !important;
  border-radius: 999px !important;
  padding: 3px 9px !important;
  margin-top: -3px !important;
  position: relative !important;
  z-index: 2;
  font-size: 11px !important;
  line-height: 1 !important;
  transform: rotate(-5deg) !important;
  box-shadow: 0 5px 12px rgba(255,138,34,.18);
}
.hero-bharat-bubble b { font-size: 14px !important; right:-5px !important; top:-7px !important; }

.hero-float-card {
  padding: 7px 10px !important;
  gap: 6px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
}
.hero-float-card .icon-circle { width: 23px !important; height: 23px !important; }
.hero-float-card .icon-circle svg { width: 12px !important; height: 12px !important; }
.hero-float-1 { left: -1% !important; }
.hero-float-2 { right: -2% !important; }

.wa-demo {
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:860px;
  margin:0 auto;
}
.wa-demo-phone {
  background:#EAF7EC;
  border-radius:26px;
  padding:10px;
  box-shadow:0 16px 38px rgba(23,23,23,.10);
  max-width:390px;
  width:100%;
}
.wa-demo-top {
  display:flex;
  align-items:center;
  gap:9px;
  background:#fff;
  border-radius:18px;
  padding:10px 12px;
  margin-bottom:8px;
}
.wa-demo-avatar {
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--indiagreen);color:#fff;font-family:'Baloo 2';font-weight:900;
}
.wa-demo-top strong { display:block;font-size:13px;line-height:1.1; }
.wa-demo-top small { display:block;color:var(--ink-soft);font-size:10px;font-weight:700; }
.wa-demo-online { margin-left:auto;color:var(--indiagreen);font-size:10px; }
.wa-demo-chat { padding:7px 5px 4px;display:flex;flex-direction:column;gap:8px; }
.wa-bubble {
  align-self:flex-start; max-width:91%; background:#fff; border-radius:6px 15px 15px 15px;
  padding:10px 12px; box-shadow:0 3px 9px rgba(23,23,23,.06);
}
.wa-bubble-label { display:block;font-size:9px;font-weight:900;letter-spacing:.05em;margin-bottom:3px; }
.wa-bubble strong { display:block;font-family:'Baloo 2';font-size:13px;line-height:1.18; }
.wa-bubble-meta { display:block;font-size:9.5px;color:var(--ink-soft);font-weight:700;margin-top:4px; }
.wa-story { border-left:3px solid var(--red); }
.wa-fact { border-left:3px solid var(--saffron); margin-left:12px; }
.wa-moral { border-left:3px solid #9A7BE0; }
.wa-quiz { border-left:3px solid var(--indiagreen); margin-left:12px; }
.wa-quiz-option { display:block;margin-top:6px;font-size:9px;color:var(--ink-soft);font-weight:800; }
.wa-demo-copy { display:flex;flex-direction:column;gap:22px; }
.wa-step { display:flex;align-items:center;gap:14px; }
.wa-step-badge {
  position:relative;
  isolation:isolate;
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2';font-size:15px;font-weight:900;
  flex-shrink:0;
  background:var(--step-bg);
  color:var(--step-color);
  box-shadow:0 5px 16px rgba(0,0,0,.07);
}
.wa-step-badge::before {
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:var(--step-glow);
  filter:blur(9px);
  opacity:.42;
  z-index:-1;
  animation:stepBadgeGlow 2.4s ease-in-out infinite;
}
.wa-step-badge::after {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid var(--step-color);
  opacity:.16;
  animation:stepBadgePulse 2.4s ease-in-out infinite;
}
.wa-step strong {
  display:block;
  font-family:'Baloo 2';
  font-size:19px;
  line-height:1.1;
  color:var(--step-color);
}
.wa-step small { display:block;color:var(--ink-soft);font-size:12px;font-weight:700;margin-top:3px; }

.wa-step-story { --step-color:#F04444; --step-bg:#FFF1F1; --step-glow:rgba(240,68,68,.62); }
.wa-step-fact { --step-color:#E5A400; --step-bg:#FFF8DE; --step-glow:rgba(229,164,0,.62); }
.wa-step-moral { --step-color:#2E9B63; --step-bg:#ECFAF2; --step-glow:rgba(46,155,99,.58); }
.wa-step-quiz { --step-color:#7562D9; --step-bg:#F2EFFF; --step-glow:rgba(117,98,217,.58); }

@keyframes stepBadgeGlow {
  0%,100% { transform:scale(.94); opacity:.25; }
  50% { transform:scale(1.12); opacity:.68; }
}
@keyframes stepBadgePulse {
  0%,100% { transform:scale(.94); opacity:.10; }
  50% { transform:scale(1.08); opacity:.24; }
}
@media (prefers-reduced-motion:reduce) {
  .wa-step-badge::before,.wa-step-badge::after { animation:none; }
}

.setup-intro { color:rgba(255,255,255,.72);font-size:13px;font-weight:700;max-width:330px;margin-top:8px; }
.setup-steps { display:flex;flex-direction:column;gap:16px;margin-top:26px; }
.setup-step { display:flex;align-items:flex-start;gap:12px; }
.setup-step > span {
  width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:900;flex-shrink:0;
}
.setup-step strong { display:block;color:#fff;font-family:'Baloo 2';font-size:15px;line-height:1.15; }
.setup-step small { display:block;color:rgba(255,255,255,.62);font-size:11.5px;font-weight:700;margin-top:3px; }

.price-card.featured {
  transform:translateY(-3px);
  box-shadow:0 18px 38px rgba(242,47,47,.18) !important;
}
.price-card:not(.featured) { opacity:.92; }
.price-card.featured .price-amount { font-size:30px; }
.price-badge { font-size:9.5px !important; padding:5px 11px !important; }

@media (max-width:780px) {
  body { padding-top:62px !important; }
  html { scroll-padding-top:66px !important; }
  nav { height:62px !important; }
  nav .wrap { height:62px !important; padding-left:16px !important; padding-right:16px !important; }
  .hero { padding-top:30px !important; }
  .hero-visual { min-height:310px !important; }
  .hero-bharat-bubble { top:1% !important; right:0 !important; transform:rotate(3deg) !important; }
  .hero-float-card { display:flex !important; }
  .hero-float-1 { left:0 !important; top:7% !important; }
  .hero-float-2 { right:0 !important; bottom:8% !important; }
  .wa-demo { display:flex; width:100%; max-width:430px; }
  .wa-demo-phone { margin:0 auto; width:100%; }
  .setup-steps { margin-top:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px; }
  .setup-step { flex-direction:column;gap:7px; }
  .setup-step strong { font-size:12px; }
  .setup-step small { font-size:10px; }
  .setup-intro { max-width:430px;margin-left:auto;margin-right:auto; }
  .price-card.featured { transform:none; }
}
@media (max-width:420px) {
  .hero-bharat-bubble { transform:rotate(2deg) scale(.92) !important; transform-origin:top right; }
  .hero-float-card { padding:6px 8px !important;font-size:9px !important; }
  .hero-float-card .icon-circle { width:21px !important;height:21px !important; }
  .hero-visual { min-height:285px !important; }
}



.hero-bharat-bubble {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width:0 !important;
}
.hero-bharat-bubble > div {
  background: var(--indiagreen) !important;
}
.hero-bharat-bubble em {
  margin-top: -7px !important;
}
.setup-form-label {
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.setup-form-label > span {
  width:26px;height:26px;border-radius:50%;background:#F0F0F0;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;font-family:'Baloo 2';font-weight:900;font-size:11px;flex-shrink:0;
}
.setup-form-label strong {
  display:block;font-family:'Baloo 2';font-size:15px;line-height:1.1;
}
.setup-form-label small {
  display:block;color:var(--ink-soft);font-size:10.5px;font-weight:700;margin-top:2px;
}
.plan-step-label { margin-top:20px; }
.plan-step-label > span { background:var(--yellow);color:var(--ink); }
.plan-toggle { margin-bottom:16px !important; }
@media(max-width:780px){
  .setup-form-label { margin-bottom:11px; }
}



/* V9 — cleaner hero: remove the large benefit-form block and animate the supporting line */
.hero-noapp-line {
  display: inline-block;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .01em;
  animation: heroLineBounceGlow 1.9s ease-in-out infinite;
  will-change: transform, text-shadow, opacity;
}
@keyframes heroLineBounceGlow {
  0%, 100% {
    transform: translateY(0);
    opacity: .88;
    text-shadow: 0 0 0 rgba(36,80,122,0);
  }
  50% {
    transform: translateY(-4px);
    opacity: 1;
    text-shadow: 0 0 12px rgba(36,80,122,.24), 0 4px 16px rgba(36,80,122,.12);
  }
}
@media (max-width: 700px) {
  .hero-otb-bubble { max-width:280px; font-size:13px; padding:10px 15px 11px; margin-left:auto; margin-right:auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-noapp-line { animation: none; }
  .hero-otb-bubble { animation: none; }
}



/* WHY POINTS — top-corner icons + soft continuous glow */
.why-line {
  align-items: flex-start !important;
}
.why-line .why-icon-bubble {
  position: relative !important;
  z-index: 0;
  overflow: visible !important;
  margin-top: 0 !important;
  flex-shrink: 0;
}
.why-line .why-icon-bubble::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 18px;
  background: currentColor;
  opacity: .16;
  filter: blur(10px);
  z-index: -1;
  animation: whyIconGlow 2.6s ease-in-out infinite;
  pointer-events: none;
}
.why-line .why-icon-bubble::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 15px;
  box-shadow: 0 0 0 0 currentColor;
  opacity: .25;
  animation: whyIconPulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
.why-line:nth-child(2) .why-icon-bubble::before,
.why-line:nth-child(2) .why-icon-bubble::after { animation-delay: .35s; }
.why-line:nth-child(3) .why-icon-bubble::before,
.why-line:nth-child(3) .why-icon-bubble::after { animation-delay: .7s; }
.why-line:nth-child(4) .why-icon-bubble::before,
.why-line:nth-child(4) .why-icon-bubble::after { animation-delay: 1.05s; }

/* Match each point headline to its icon colour */
.why-line:nth-child(1) strong { color: var(--red); }
.why-line:nth-child(2) strong { color: var(--saffron); }
.why-line:nth-child(3) strong { color: #A57A00; }
.why-line:nth-child(4) strong { color: var(--indiagreen); }

@keyframes whyIconGlow {
  0%, 100% { transform: scale(.9); opacity: .10; }
  50% { transform: scale(1.16); opacity: .27; }
}
@keyframes whyIconPulse {
  0%, 100% { transform: scale(.94); opacity: .12; }
  50% { transform: scale(1.12); opacity: .32; }
}

@media (prefers-reduced-motion: reduce) {
  .why-line .why-icon-bubble::before,
  .why-line .why-icon-bubble::after { animation: none; }
}



/* V14 — compact Why points with strict top-left icon alignment */
.why-lines {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  column-gap:28px !important;
  row-gap:26px !important;
  align-items:start !important;
}
.why-line {
  display:grid !important;
  grid-template-columns:42px minmax(0,1fr) !important;
  column-gap:14px !important;
  align-items:start !important;
  padding:0 !important;
  min-height:96px;
}
.why-line .why-icon-bubble {
  grid-column:1;
  grid-row:1;
  align-self:start !important;
  justify-self:start !important;
  margin:0 !important;
}
.why-line > span:last-child {
  grid-column:2;
  grid-row:1;
  min-width:0;
  align-self:start !important;
  display:flex !important;
  flex-direction:column;
  gap:3px;
}
.why-line strong {
  display:block;
  font-size:18px !important;
  line-height:1.12 !important;
  margin:0 !important;
}
.why-line small {
  display:block;
  font-size:14px !important;
  line-height:1.42 !important;
  margin:0 !important;
}
@media (max-width:780px) {
  .why-lines {
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:18px !important;
    row-gap:20px !important;
  }
  .why-line {
    grid-template-columns:34px minmax(0,1fr) !important;
    column-gap:9px !important;
    min-height:88px;
  }
  .why-line strong {
    font-size:14px !important;
    line-height:1.12 !important;
  }
  .why-line small {
    font-size:11.5px !important;
    line-height:1.38 !important;
  }
}
@media (max-width:520px) {
  .why-lines {
    column-gap:14px !important;
    row-gap:18px !important;
  }
  .why-line {
    grid-template-columns:32px minmax(0,1fr) !important;
    column-gap:8px !important;
    min-height:82px;
  }
  .why-line strong { font-size:13px !important; }
  .why-line small { font-size:10.8px !important; }
  .why-line .why-icon-bubble {
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
  }
  .why-line .why-icon-bubble svg {
    width:16px !important;
    height:16px !important;
  }
}



/* v16 — minimal WhatsApp message bubbles */
.how-section .section-head p{margin-top:8px;color:var(--ink-soft);font-weight:700;font-size:14px}
.how-wa-wrap{max-width:620px;margin:0 auto;position:relative}
.how-wa-scroll{
  height:360px; overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior:contain; scrollbar-width:none;
  padding:16px 22px; display:flex; flex-direction:column; gap:18px; position:relative;
  background:linear-gradient(180deg,#f7fbf8 0%,#f4faf6 100%);
  border-radius:26px; border:1px solid rgba(37,211,102,.10);
}
.how-wa-scroll::-webkit-scrollbar{display:none}
.how-wa-message{
  flex:0 0 292px; scroll-snap-align:center; width:min(90%,500px); margin:0 auto; box-sizing:border-box;
  position:relative; padding:28px 30px 20px; border:1px solid rgba(20,35,25,.055);
  border-radius:7px 22px 22px 22px; background:#fff;
  box-shadow:0 8px 24px rgba(20,20,20,.055); display:flex; flex-direction:column; justify-content:center;
}
.how-wa-message::before{
  content:""; position:absolute; left:-1px; bottom:-1px; width:18px; height:18px;
  background:#fff; clip-path:polygon(0 0,100% 100%,100% 0);
  transform:translate(-1px,1px) rotate(180deg);
}
.how-wa-message::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 42%);
}
.how-wa-story{background:#fffaf9}.how-wa-fact{background:#fffdf8}.how-wa-moral{background:#fbfaff}.how-wa-progress{background:#f8fcf9}
.how-wa-top{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.how-wa-icon{
  width:50px;height:50px;flex:0 0 50px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:#fff; border:1px solid currentColor; font-size:0; position:relative;
  animation:howIconGlow 2.8s ease-in-out infinite;
}
.how-wa-icon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.how-wa-story .how-wa-icon{color:#ef3f3b}.how-wa-fact .how-wa-icon{color:#ef8b16}.how-wa-moral .how-wa-icon{color:#7652d6}.how-wa-progress .how-wa-icon{color:#18a65b}
.how-wa-when{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;color:var(--purple)}
.how-wa-message h3{font-family:'Baloo 2',sans-serif;font-size:26px;line-height:1.05;margin:0;font-weight:800;color:var(--ink)}
.how-wa-story h3{color:#ef3f3b}.how-wa-fact h3{color:#ef8b16}.how-wa-moral h3{color:#7652d6}.how-wa-progress h3{color:#18a65b}
.how-wa-message p{font-size:16px;line-height:1.4;color:var(--ink-soft);font-weight:700;margin:17px 0 0;max-width:420px;position:relative;z-index:1}
.how-wa-meta{font-size:10px;font-weight:700;color:#8a8f8c;text-align:right;margin-top:14px;position:relative;z-index:1}
.how-wa-story .how-wa-meta{color:#d34b48}.how-wa-fact .how-wa-meta{color:#d47a0b}.how-wa-moral .how-wa-meta{color:#7652d6}.how-wa-progress .how-wa-meta{color:#15914f}
@keyframes howIconGlow{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0),0 0 0 0 currentColor}50%{box-shadow:0 0 0 6px color-mix(in srgb,currentColor 8%,transparent),0 0 22px color-mix(in srgb,currentColor 16%,transparent)}}
@media(max-width:780px){
 .how-section .section-head p{font-size:13px}
 .how-wa-scroll{height:330px;padding:12px 12px;gap:16px;border-radius:20px}
 .how-wa-message{flex-basis:270px;width:94%;padding:22px 20px 18px}
 .how-wa-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px}
 .how-wa-icon svg{width:23px;height:23px}
 .how-wa-top{gap:12px}.how-wa-message h3{font-size:22px}.how-wa-message p{font-size:14px;margin-top:14px}
}

.how-pagination{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:5;
  padding:7px 4px;border-radius:999px;
  background:rgba(255,255,255,.62);backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.how-page-dot{
  width:6px;height:6px;padding:0;border:0;border-radius:50%;
  background:rgba(60,70,65,.16);cursor:pointer;
  transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease;
}
.how-page-dot.is-active{
  width:7px;height:7px;background:rgba(37,211,102,.52);
  box-shadow:0 0 0 3px rgba(37,211,102,.08);
  transform:scale(1.08);
}
.how-page-dot:focus-visible{outline:2px solid rgba(37,211,102,.38);outline-offset:3px}
@media(max-width:780px){
  .how-pagination{right:5px;gap:9px;padding:7px 4px;background:rgba(255,255,255,.52)}
  .how-page-dot{width:5px;height:5px}
  .how-page-dot.is-active{width:7px;height:7px}
}
@media(prefers-reduced-motion:reduce){.how-wa-icon{animation:none}}



/* V18 — robust mobile slider: 70vw cards, clean alignment, touch-friendly */
@media (max-width: 780px) {
  .why-three-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: calc(100% + 32px) !important;
    max-width: none !important;
    margin: 16px -16px 22px !important;
    padding: 2px 16px 12px !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scroll-snap-stop: always !important;
    scroll-behavior: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    touch-action: pan-x pan-y !important;
  }
  .why-three-grid::-webkit-scrollbar { display: none !important; }
  .why-three-card {
    flex: 0 0 70vw !important;
    width: 70vw !important;
    max-width: none !important;
    min-width: 70vw !important;
    min-height: 148px !important;
    height: 148px !important;
    margin: 0 !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }
  .why-three-num {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 0 9px !important;
  }
  .why-three-card strong {
    display: block !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    margin: 0 0 5px !important;
  }
  .why-three-card small {
    display: block !important;
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}
@media (min-width: 781px) {
  .why-three-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    overflow: visible !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-three-grid { scroll-behavior: auto !important; }
}



/* V19 — prevent the Daily Smart Gyaan slider from widening the page/grid */
html, body { max-width:100%; overflow-x:hidden !important; }
@media (max-width:780px) {
  .why-wrap {
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
  }
  .why-copy {
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
  }
  .why-three-grid {
    display:flex !important;
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    flex-wrap:nowrap !important;
    scroll-snap-type:x mandatory !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x !important;
  }
  .why-three-card {
    flex:0 0 70% !important;
    width:70% !important;
    min-width:70% !important;
    max-width:70% !important;
  }
}



/* V20 — mobile horizontal carousels for both Why sections */
@media (max-width:780px){
  .why-lines{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    width:100% !important;
    max-width:100% !important;
    margin:10px 0 18px !important;
    padding:2px 0 10px !important;
    gap:12px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x mandatory !important;
    scroll-snap-stop:always !important;
    scroll-behavior:auto !important;
    overscroll-behavior-x:contain !important;
    scrollbar-width:none !important;
    touch-action:pan-x !important;
  }
  .why-lines::-webkit-scrollbar{display:none !important}
  .why-line{
    flex:0 0 70% !important;
    width:70% !important;
    min-width:70% !important;
    max-width:70% !important;
    min-height:106px !important;
    box-sizing:border-box !important;
    padding:12px 4px 12px 0 !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always !important;
    align-items:flex-start !important;
  }
  .why-line > span:last-child{min-width:0 !important}
}



@media (max-width:780px){
  .why-three-grid,.why-lines{scrollbar-width:none}
  .why-three-grid::-webkit-scrollbar,.why-lines::-webkit-scrollbar{display:none}
}



.wa-demo-avatar{
  background:#fff !important;
  overflow:hidden;
  padding:0 !important;
  flex:0 0 32px;
}
.wa-demo-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:50%;
}



/* Trial banner is a real first row INSIDE the fixed header. */
nav{
  top:0!important;
  height:104px!important;
  overflow:visible!important;
}
nav #sevenDayTrialBanner{
  position:relative!important;
  width:100%!important;
  height:30px!important;
  min-height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#FF3F36!important;
  color:#fff!important;
  margin:0!important;
  padding:0 40px 0 10px!important;
  border:0!important;
  border-radius:0!important;
  z-index:100000!important;
  font-family:'Baloo 2',Arial,sans-serif!important;
  font-size:16px!important;
  font-weight:800!important;
  line-height:30px!important;
  visibility:visible!important;
  opacity:1!important;
}
nav #sevenDayTrialBanner .trial-banner-text{
  color:#fff!important;
  display:block!important;
  font-size:16px!important;
  font-weight:800!important;
  line-height:30px!important;
  white-space:nowrap!important;
}
nav #sevenDayTrialBanner .trial-banner-close{
  position:absolute!important;
  right:10px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  color:#fff!important;
  font:400 19px/22px Arial,sans-serif!important;
  cursor:pointer!important;
}
nav #sevenDayTrialBanner.is-collapsed{
  display:none!important;
}
nav.trial-banner-closed{
  height:74px!important;
}
body{
  padding-top:104px!important;
}
@media(max-width:780px){
  nav{
    top:0!important;
    height:88px!important;
  }
  nav #sevenDayTrialBanner{
    height:26px!important;
    min-height:26px!important;
    font-size:14px!important;
    line-height:26px!important;
  }
  nav #sevenDayTrialBanner .trial-banner-text{
    font-size:14px!important;
    line-height:26px!important;
  }
  nav #sevenDayTrialBanner .trial-banner-close{
    right:7px!important;
    width:20px!important;
    height:20px!important;
    font-size:17px!important;
    line-height:20px!important;
  }
  nav.trial-banner-closed{
    height:62px!important;
  }
  body{
    padding-top:88px!important;
  }
}



  /* ============ LISTEN & EXPLORE SAMPLES ============ */
  .samples-section { padding: 38px 0 46px; }
  .samples-panel { background: var(--card); border: 2px solid var(--line); border-radius: 20px; box-shadow: 5px 5px 0 var(--line); padding: 30px 26px; text-align: center; max-width: 860px; margin: 0 auto; }
  .samples-panel .section-head { margin-bottom: 22px; }
  .samples-panel .section-head h2 { margin-bottom: 8px; }
  .samples-panel .section-head p { margin: 0 auto; max-width: 560px; }
  .samples-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 700px; margin: 0 auto; }
  .samples-buttons .sample-story-btn { grid-column: 1 / -1; }
  .samples-buttons .btn-primary { width: 100%; box-sizing: border-box; }
  .samples-buttons .sample-orange { background: var(--saffron) !important; color: var(--ink) !important; }
  .samples-buttons .sample-purple { background: var(--purple) !important; color: #fff !important; }
  .sample-fact-btn { cursor: pointer; border: 0; font-family: 'Baloo 2', sans-serif; }
  .samples-buttons .btn-primary > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
  .fact-popup-overlay { display: none; position: fixed; inset: 0; z-index: 900; background: rgba(30,27,21,.72); padding: 18px; align-items: center; justify-content: center; }
  .fact-popup-overlay.open { display: flex; animation: factFadeIn .18s ease; }
  @keyframes factFadeIn { from { opacity: 0; } to { opacity: 1; } }
  .fact-popup { position: relative; width: min(92vw, 520px); max-height: 92vh; background: var(--paper); border: 2px solid var(--line); border-radius: 18px; padding: 10px; box-sizing: border-box; box-shadow: 7px 7px 0 rgba(30,27,21,.25); animation: factPop .22s cubic-bezier(.34,1.56,.64,1); }
  @keyframes factPop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
  .fact-popup-close { position: absolute; top: 8px; right: 8px; z-index: 2; width: 38px; height: 38px; border: 2px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 2px 2px 0 var(--line); font-size: 25px; line-height: 1; font-family: Arial, sans-serif; font-weight: 800; }
  .fact-popup-close:hover { background: var(--red); color: #fff; }
  .fact-popup img { display: block; width: 100%; max-height: calc(92vh - 40px); object-fit: contain; border-radius: 11px; }
  body.fact-popup-open { overflow: hidden; }
  @media (max-width: 700px) {
    .samples-section { padding: 18px 0 4px; }
    .samples-panel { padding: 18px 12px 14px; border-radius: 18px; }
    .samples-panel .section-head { margin-bottom: 16px; }
    .samples-panel .section-head h2 { margin-bottom: 5px; }
    .samples-panel .section-head p { line-height: 1.25; }
    .samples-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .samples-buttons .sample-story-btn { grid-column: 1 / -1; }
    .samples-buttons .btn-primary {
      min-height: 0 !important;
      padding: 10px 8px !important;
      font-size: 14px !important;
      line-height: 1.12 !important;
      border-radius: 14px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
    }
    .samples-buttons .sample-story-btn { white-space: nowrap; }
    .samples-buttons .sample-orange,
    .samples-buttons .sample-purple { min-height: 58px !important; }
    .samples-buttons .btn-primary > span {
      display: inline-flex; align-items: center; justify-content: center;
      margin: 0 !important; flex: 0 0 auto; font-size: 17px; line-height: 1;
    }
    .fact-popup-overlay { padding: 10px; }
    .fact-popup { width: min(94vw, 520px); padding: 7px; }
    .fact-popup-close { top: 5px; right: 5px; width: 36px; height: 36px; }
  }
  /* Compact sample buttons: keep the second row visually aligned and tight. */
  .samples-buttons .btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    line-height: 1.15;
  }
  .samples-buttons .btn-primary > span { margin: 0; }




/* ROZGYAAN — OPTION C: STORYBOOK / LITTLE ADVENTURE REDESIGN */
:root{
  --storybook-sky:#EAF8FF;
  --storybook-mint:#EAF8F0;
  --storybook-cream:#FFF9E9;
  --storybook-purple:#7652C6;
  --storybook-green:#22A865;
  --storybook-orange:#F39A20;
  --storybook-red:#FF403A;
  --storybook-ink:#171717;
}
html{scroll-behavior:smooth;background:#EAF8FF;}
body{
  background:linear-gradient(180deg,#EAF8FF 0%,#F9FCFF 18%,#FFF 48%,#F4FBF6 78%,#FFF 100%);
  color:var(--storybook-ink);
}
/* soft illustrated atmosphere */
.section{position:relative;overflow:hidden;}
.section::before,.section::after{pointer-events:none;position:absolute;z-index:0;}
.section > .wrap{position:relative;z-index:1;}
.hero{background:linear-gradient(180deg,#DDF4FF 0%,#F5FCFF 72%,#FFF 100%);padding-top:48px;padding-bottom:70px;}
.hero::before{content:'✦   ☁   ✦';top:18px;left:5%;font-size:26px;letter-spacing:18px;color:#F6C93D;opacity:.8;}
.hero::after{content:'';left:-8%;right:-8%;bottom:-55px;height:130px;background:#CDEED5;border-radius:50% 50% 0 0/70% 70% 0 0;}
.hero-copy{position:relative;z-index:2;}
.hero h1{letter-spacing:-.025em;}
.hero h1 .hi-red{color:var(--storybook-purple)!important;}
.hero-sub{color:#5E6266;}
.hero-otb-bubble{background:#FFF2B8!important;border-color:#171717!important;box-shadow:4px 4px 0 #171717!important;border-radius:18px!important;}
.hero-blob{background:#AEE8F5!important;border-radius:48% 52% 58% 42%!important;transform:rotate(-5deg);box-shadow:inset 0 0 0 8px rgba(255,255,255,.4);}
.hero-visual{z-index:2;}
.hero-child-img{filter:saturate(1.06);}
.hero-bharat-bubble{background:#FFF!important;border-color:#171717!important;box-shadow:4px 4px 0 #171717!important;}
.hero-float-card{border-color:#171717!important;box-shadow:4px 4px 0 #171717!important;border-radius:16px!important;}
/* samples = picture-book scene */
.samples-section{background:linear-gradient(180deg,#FFF 0%,#EEF9FF 100%);}
.samples-section::before{content:'✦  ✧  ★';top:22px;right:7%;font-size:24px;color:#F5BF2F;transform:rotate(8deg);}
.samples-panel{background:#E8F8FF!important;border:2px solid #BCE5F2!important;border-radius:34px!important;box-shadow:0 14px 0 rgba(86,174,197,.12)!important;position:relative;}
.samples-panel::after{content:'';position:absolute;left:-4%;right:-4%;bottom:-35px;height:90px;background:#BFE8C8;border-radius:50% 50% 0 0/100% 100% 0 0;z-index:0;}
.samples-panel>*{position:relative;z-index:1;}
.samples-buttons .btn-primary{border-radius:18px!important;box-shadow:0 6px 0 rgba(0,0,0,.12)!important;}
/* all section heads become storybook chapter headings */
.section-head .kicker,.kicker{color:var(--storybook-purple)!important;}
.section-head h2{letter-spacing:-.025em;}
.section-head h2::after{content:'';display:block;width:92px;height:7px;margin:10px auto 0;background:#FFD45A;border-radius:50%;transform:rotate(-2deg);}
/* what your child gets */
#what-you-get{background:linear-gradient(180deg,#EEF9FF 0%,#F5FFF7 100%);}
.wa-demo{position:relative;}
.wa-demo-phone{border:3px solid #171717!important;border-radius:34px!important;background:#DDF5E5!important;box-shadow:10px 12px 0 rgba(34,168,101,.13)!important;}
.wa-demo-message{border-radius:24px!important;border:2px solid rgba(23,23,23,.08)!important;box-shadow:0 8px 0 rgba(23,23,23,.05)!important;}
/* why section — green meadow / story cards */
#why{background:linear-gradient(180deg,#FFF 0%,#F2FFF4 100%);}
#why::before{content:'☀';right:8%;top:38px;font-size:44px;color:#FFD04A;opacity:.9;}
.why-card,.why-grid>*,.feature-card{border-radius:26px!important;border:2px solid rgba(34,168,101,.12)!important;box-shadow:0 9px 0 rgba(34,168,101,.07)!important;background:rgba(255,255,255,.94)!important;}
/* how it works — vertical adventure path */
.how-section{background:linear-gradient(180deg,#F2FBF5 0%,#EAF8FF 100%);}
.how-section::before{content:'';left:5%;top:120px;bottom:100px;width:5px;background:repeating-linear-gradient(to bottom,#79CFA1 0 16px,transparent 16px 30px);border-radius:5px;opacity:.45;}
.how-wa-wrap{border:2px solid #CDEBDD!important;border-radius:34px!important;background:rgba(255,255,255,.58)!important;box-shadow:0 14px 0 rgba(34,168,101,.08)!important;}
.how-wa-message{border:2px solid rgba(23,23,23,.07)!important;border-radius:28px!important;box-shadow:0 8px 0 rgba(23,23,23,.05)!important;}
.how-wa-story{background:#FFF7F6!important;}
.how-wa-fact{background:#FFF9EA!important;}
.how-wa-moral{background:#FAF6FF!important;}
.how-wa-game{background:#F1FBF5!important;}
/* pricing — treasure cards */
#pricing{background:linear-gradient(180deg,#FFF 0%,#FFF9EA 100%);}
#pricing::before{content:'✦';left:7%;top:55px;color:#FFD13F;font-size:48px;transform:rotate(-15deg);}
.price-intro-banner{background:#FFD84D!important;border:2px solid #171717!important;border-radius:999px!important;box-shadow:4px 4px 0 #171717!important;}
.price-card{border:2px solid rgba(23,23,23,.06)!important;border-radius:28px!important;background:#FFF!important;box-shadow:0 10px 0 rgba(23,23,23,.06)!important;overflow:hidden;}
.price-card:nth-child(1){background:#F2FBF5!important;}
.price-card:nth-child(2){background:#FFF5F2!important;border-color:#FFB4AD!important;}
.price-card:nth-child(3){background:#F3F0FF!important;}
.price-card .btn-select{border-radius:18px!important;}
.refund-note{background:#EAF8F0!important;border-radius:18px!important;padding:14px 18px!important;}
/* signup — illustrated notebook */
#signup{background:linear-gradient(180deg,#FFF9E9 0%,#EAF8FF 100%);}
.signup-section{border:3px solid #171717!important;border-radius:34px!important;background:#FFF!important;box-shadow:10px 12px 0 #BFE6D0!important;}
.form-card{border-radius:26px!important;background:#F9FCFF!important;border:2px solid #D8EAF1!important;}
.plan-opt{border-radius:18px!important;}
.form-field input,.form-field select{border-radius:16px!important;border:2px solid #171717!important;background:#FFF!important;}
.kidclass-chip{border-radius:14px!important;border:2px solid #D9E4EA!important;background:#FFF!important;}
.kidclass-chip.active{background:#FF403A!important;color:#FFF!important;border-color:#FF403A!important;}
.form-submit{border-radius:18px!important;}
/* testimonials = postcards */
#testimonials{background:linear-gradient(180deg,#EAF8FF 0%,#F8FDFF 100%);}
.testi-card{border:2px solid #D3EAF2!important;border-radius:28px!important;background:#FFF!important;box-shadow:0 10px 0 rgba(73,160,190,.10)!important;}
.testi-card:nth-child(2){transform:rotate(-1deg);}
.testi-card:nth-child(3){transform:rotate(1deg);}
.testi-stars svg{filter:none;}
/* FAQ / footer */
#faq{background:linear-gradient(180deg,#FFF 0%,#EEF9FF 100%);}
.faq-item{border-radius:22px!important;border:2px solid #E0E9EE!important;background:#FFF!important;box-shadow:0 6px 0 rgba(23,23,23,.04)!important;}
footer{background:#E8F7ED!important;position:relative;}
footer::before{content:'🌿  ✦  🌿';position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:20px;opacity:.65;}
/* fixed CTA feels like a storybook ribbon */
.mobile-subscribe-btn{border:3px solid #171717!important;box-shadow:0 8px 0 #171717,0 16px 28px rgba(255,64,58,.20)!important;border-radius:999px!important;}
/* decorative chapter separators */
.section:not(#signup)::after{content:'•  •  •';bottom:8px;left:50%;transform:translateX(-50%);color:#9BD9B1;font-size:18px;letter-spacing:7px;}
@media(max-width:780px){
  body{background:linear-gradient(180deg,#EAF8FF 0%,#FFF 42%,#F2FBF5 78%,#FFF 100%);}
  .hero{padding-top:28px;padding-bottom:58px;}
  .hero::before{font-size:18px;letter-spacing:8px;}
  .hero-visual{min-height:360px!important;}
  .hero-blob{width:320px!important;height:320px!important;}
  .hero-child-img{width:300px!important;}
  .samples-panel,.how-wa-wrap,.signup-section{border-radius:26px!important;}
  .samples-panel{padding:24px 16px!important;}
  .section-head h2::after{width:70px;height:6px;}
  .how-section::before{left:18px;top:130px;bottom:80px;}
  .how-wa-wrap{padding:16px!important;}
  .price-card{border-radius:24px!important;}
  .testi-card{transform:none!important;}
}




/* Final Option C refinements — visual only; payment/backend scripts untouched. */
.signup-form-heading h2{color:#171717!important;}
.hero-otb-bubble{background:#FF8A22!important;color:#fff!important;border-color:#171717!important;box-shadow:4px 4px 0 #171717!important;}
.hero-child-img{object-fit:contain!important;filter:drop-shadow(0 18px 24px rgba(30,27,21,.16))!important;}

/* How RozGyaan works: clean story cards, no side guide/dotted line, no edge spill. */
.how-section::before{display:none!important;content:none!important;}
.how-wa-wrap{overflow:hidden!important;box-sizing:border-box!important;}
.how-wa-scroll{overflow-y:auto!important;overflow-x:hidden!important;box-sizing:border-box!important;padding-left:18px!important;padding-right:18px!important;}
.how-wa-message::before,.how-wa-message::after{display:none!important;content:none!important;}
.how-wa-message{width:100%!important;max-width:500px!important;box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important;}
@media(max-width:780px){
  .how-wa-wrap{width:100%!important;max-width:100%!important;}
  .how-wa-scroll{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important;}
  .how-wa-message{width:100%!important;max-width:100%!important;flex-basis:270px!important;}
}

/* The signup headline is intentionally black for stronger contrast. */
#signup .signup-form-heading h2{color:#000!important;}



/* Comic treatment is intentionally limited to buttons/CTAs only. */
.btn-primary,
.nav-cta,
.btn-select,
.form-submit,
.mobile-subscribe-btn,
.contact-option-btn,
.price-card-header-btn,
.plan-opt,
.sample-story-btn,
.sample-fact-btn,
.sample-purple,
.sample-orange,
.kidclass-chip,
.faq-q{
  border:3px solid #171717!important;
  border-radius:13px 10px 14px 9px!important;
  box-shadow:5px 5px 0 #171717!important;
  position:relative;
  transition:transform .14s ease,box-shadow .14s ease!important;
}

/* Red CTA treatment requested */
.btn-primary,
.nav-cta,
.mobile-subscribe-btn{
  background:#F04A45!important;
  color:#fff!important;
}

/* Keep the comic treatment on other existing action buttons,
   but don't add borders/shadows to their surrounding boxes. */
.btn-primary:hover,
.nav-cta:hover,
.btn-select:hover,
.form-submit:hover,
.mobile-subscribe-btn:hover,
.contact-option-btn:hover,
.price-card-header-btn:hover,
.plan-opt:hover,
.sample-story-btn:hover,
.sample-fact-btn:hover,
.sample-purple:hover,
.sample-orange:hover,
.kidclass-chip:hover,
.faq-q:hover{
  transform:translate(-2px,-2px)!important;
  box-shadow:7px 7px 0 #171717!important;
}

.btn-primary:active,
.nav-cta:active,
.btn-select:active,
.form-submit:active,
.mobile-subscribe-btn:active,
.contact-option-btn:active,
.price-card-header-btn:active,
.plan-opt:active{
  transform:translate(2px,2px)!important;
  box-shadow:2px 2px 0 #171717!important;
}

/* No comic borders on headlines, labels, image frames or content boxes. */
.kicker,
.trial-badge,
.price-intro-banner,
.hero-float-card,
.hero-otb-bubble,
.hero-bharat-bubble,
.samples-panel,
.why-photo-wrap,
.how-wa-wrap,
.form-card,
.price-card,
.testi-card,
.tesi-card,
.faq-item,
.doodle-card,
.feature-card,
.why-three-card,
.how-wa-message{
  border:none!important;
  box-shadow:none!important;
}

/* The supplied artwork should remain clean and borderless. */
.hero-child-img,
.why-photo-img{
  border:none!important;
  box-shadow:none!important;
}

/* Remove decorative borders/shadows that were added around the trial banner. */
nav #sevenDayTrialBanner{
  border-bottom:none!important;
}
nav #sevenDayTrialBanner .trial-banner-close{
  border:none!important;
  box-shadow:none!important;
}

/* Remove the extra section-wide comic decorations from the previous version. */
.section::before,
.section::after,
.samples-section::before,
.samples-section::after,
.how-section::before,
.how-section::after,
#pricing::before,
#pricing::after,
.signup-section::before,
.signup-section::after,
.faq-section::before,
.faq-section::after{
  content:none!important;
}

/* Hero artwork stays clean; no blob or frame around it. */
.hero-blob{display:none!important;}
.hero-child-img{
  width:560px!important;
  max-width:100%!important;
  height:auto!important;
}

/* Mobile floating CTA remains red and comic-bordered. */
@media(max-width:780px){
  .hero-child-img{
    width:100%!important;
    max-width:520px!important;
  }
}



:root{--comic-ink:#171717;--comic-purple:#7652D6;--comic-yellow:#FFD42F;--comic-red:#F04A45;}

/* Header CTA */
.nav-cta{
  background:var(--comic-yellow)!important;color:var(--comic-ink)!important;
  border:3px solid var(--comic-ink)!important;box-shadow:5px 5px 0 var(--comic-ink)!important;
  border-radius:14px 11px 15px 10px!important;font-family:'Baloo 2',sans-serif!important;font-weight:900!important;
}
.nav-cta:hover{transform:translate(-2px,-2px) rotate(-.4deg)!important;box-shadow:7px 7px 0 var(--comic-ink)!important;}

/* Floating CTA */
.mobile-subscribe-btn{
  background:var(--comic-red)!important;color:#fff!important;
  border:3px solid var(--comic-ink)!important;box-shadow:5px 5px 0 var(--comic-ink)!important;
  border-radius:14px 11px 15px 10px!important;font-weight:900!important;
}

/* Hero CTA: no box, purple + underlined */
.hero-ctas .btn-primary{
  display:inline-flex!important;align-items:center;gap:7px;
  background:transparent!important;color:var(--comic-purple)!important;
  border:0!important;box-shadow:none!important;border-radius:0!important;
  padding:2px 0!important;min-height:0!important;
  font-family:'Baloo 2',sans-serif!important;font-weight:900!important;
  text-decoration:underline!important;text-decoration-thickness:3px!important;text-underline-offset:4px!important;
  transform:none!important;
}
.hero-ctas .btn-primary svg{stroke:var(--comic-purple)!important;transition:transform .2s ease!important;}
.hero-ctas .btn-primary:hover{color:#5d3fc2!important;transform:translateY(-2px)!important;box-shadow:none!important;}
.hero-ctas .btn-primary:hover svg{transform:translateX(4px)!important;}

/* Pricing: compact panels, no outer black border */
#pricing .pricing-grid{gap:12px!important;max-width:820px!important;}
#pricing .price-card{
  border:0!important;box-shadow:0 7px 20px rgba(23,23,23,.07)!important;
  border-radius:20px!important;overflow:hidden!important;padding:7px!important;
}
#pricing .price-card.featured{border:0!important;}
#pricing .price-card-header-btn{
  width:100%!important;padding:15px 16px 13px!important;background:#fff!important;
  border:3px solid var(--comic-ink)!important;border-radius:16px 13px 17px 12px!important;
  box-shadow:4px 4px 0 var(--comic-ink)!important;font-family:inherit!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
#pricing .price-card-header-btn:hover{transform:translate(-1px,-1px) rotate(-.2deg)!important;box-shadow:5px 5px 0 var(--comic-ink)!important;}
#pricing .price-card.featured .price-card-header-btn{background:#FFF7F4!important;}
#pricing .price-card[data-plan-key="annual"] .price-card-header-btn{background:#F5F1FF!important;}
#pricing .price-card[data-plan-key="weekly"] .price-card-header-btn{background:#F5FFF8!important;}
#pricing .price-card-collapsible{padding-left:10px!important;padding-right:10px!important;}
#pricing .price-card.open .price-card-collapsible{padding-bottom:12px!important;}
#pricing .price-list{gap:7px!important;margin:10px 4px 12px!important;}
#pricing .price-list li{font-size:12px!important;}
#pricing .price-amount{font-size:25px!important;}
#pricing .price-card-chevron{transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;}
#pricing .price-card.open .price-card-chevron{transform:rotate(180deg) scale(1.06)!important;}
#pricing .price-gst-line,#pricing [id^="gst-"]{display:none!important;}

/* Why RozGyaan: border ONLY the three small cards */
#why .why-three-grid{gap:10px!important;margin:12px 0 14px!important;}
#why .why-three-card{
  border:2.5px solid var(--comic-ink)!important;box-shadow:4px 4px 0 var(--comic-ink)!important;
  border-radius:15px 12px 16px 11px!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
#why .why-three-card:nth-child(1){transform:rotate(-.4deg);}
#why .why-three-card:nth-child(2){transform:rotate(.25deg);}
#why .why-three-card:nth-child(3){transform:rotate(-.25deg);}
#why .why-three-card:hover{transform:translateY(-4px) rotate(0deg)!important;box-shadow:6px 6px 0 var(--comic-ink)!important;}

/* Simple by design: border the scrolling frame */
#how .how-wa-wrap{
  border:3px solid var(--comic-ink)!important;border-radius:21px 17px 23px 16px!important;
  box-shadow:5px 5px 0 var(--comic-ink)!important;padding:5px!important;background:#fff!important;
}
#how .how-wa-scroll{border:0!important;border-radius:16px!important;padding:11px 16px!important;}
#how .how-wa-message{transition:transform .25s ease,box-shadow .25s ease!important;}
#how .how-wa-message:hover{transform:translateY(-3px) rotate(-.2deg)!important;box-shadow:0 12px 27px rgba(20,20,20,.09)!important;}

/* Reduce excess whitespace */
.section{padding:30px 0!important;}
.section-head{margin-bottom:16px!important;}
.section-head p{margin-top:5px!important;}
.hero{padding-top:30px!important;padding-bottom:26px!important;}
.samples-section,.how-section,#pricing,.signup-section{padding-top:28px!important;padding-bottom:28px!important;}
.why-wrap{gap:24px!important;}

/* Subtle comic micro-animations */
@keyframes rzComicWiggle{0%,100%{transform:rotate(0) translateY(0)}25%{transform:rotate(-1deg) translateY(-1px)}75%{transform:rotate(1deg) translateY(-1px)}}
.kicker{position:relative!important;}
.kicker::before{
  content:"✦";display:inline-block;margin-right:5px;color:var(--comic-yellow);font-size:.9em;
  animation:rzComicWiggle 2.8s ease-in-out infinite;
}
@keyframes rzBadgeBounce{0%,85%,100%{transform:rotate(0) translateY(0)}90%{transform:rotate(-2deg) translateY(-2px)}95%{transform:rotate(2deg) translateY(0)}}
.price-badge{animation:rzBadgeBounce 3s ease-in-out infinite;}
.feature-card,.sample-player-btn,.how-card,.refund-note,.testi-card{
  transition:transform .2s ease,box-shadow .2s ease!important;
}
.feature-card:hover,.sample-player-btn:hover,.how-card:hover,.refund-note:hover,.testi-card:hover{transform:translateY(-3px)!important;}

/* Keep all artwork and headlines clean */
.hero-child-img,.why-photo-img,.hero-visual img{border:0!important;outline:0!important;}
.section-head h2,.why-copy h2{border:0!important;box-shadow:none!important;}

/* Mobile tightening */
@media(max-width:780px){
  .section{padding:24px 0!important;}
  .hero{padding-top:22px!important;padding-bottom:20px!important;}
  .section-head{margin-bottom:13px!important;}
  #pricing{padding-top:23px!important;padding-bottom:23px!important;}
  #pricing .pricing-grid{gap:9px!important;}
  #pricing .price-card{padding:5px!important;border-radius:17px!important;}
  #pricing .price-card-header-btn{padding:13px 11px 11px!important;border-radius:14px 11px 15px 10px!important;box-shadow:3px 3px 0 var(--comic-ink)!important;}
  #pricing .price-card-collapsible{padding-left:7px!important;padding-right:7px!important;}
  #pricing .price-list{margin-left:2px!important;margin-right:2px!important;}
  #why .why-three-card{box-shadow:3px 3px 0 var(--comic-ink)!important;}
  #how .how-wa-wrap{padding:4px!important;border-radius:18px 14px 20px 13px!important;box-shadow:4px 4px 0 var(--comic-ink)!important;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;}}



/* =========================================================
   ROZGYAAN — STORYBOOK / COMIC FINAL POLISH
   Selective borders only. Clean artwork and typography.
   ========================================================= */

:root{
  --rz-ink:#171717;
  --rz-red:#F04A45;
  --rz-purple:#7652D6;
  --rz-yellow:#FFD42F;
  --rz-blue:#67C9E8;
  --rz-paper:#FFFDF7;
}

/* ---- Light storybook paper + very subtle comic grid ---- */
body{
  background-color:#FFFDF7!important;
  background-image:
    linear-gradient(rgba(118,82,214,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(118,82,214,.035) 1px, transparent 1px)!important;
  background-size:28px 28px!important;
  background-attachment:fixed!important;
}
.section,
.samples-section,
.how-section,
#pricing,
#faq,
#signup{
  background-color:transparent!important;
}

/* ---- Keep all headlines completely clean ---- */
h1,h2,h3,h4,
.section-head h2,
.section-head p,
.why-copy h2,
.kicker,
.trial-badge,
.price-intro-banner{
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}

/* ---- HERO CTA: proper inline link, no accidental button frame ---- */
.hero-ctas .btn-primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-height:0!important;
  padding:4px 0!important;
  margin:0!important;
  background:transparent!important;
  color:var(--rz-purple)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-weight:900!important;
  text-decoration:underline!important;
  text-decoration-thickness:2.5px!important;
  text-underline-offset:5px!important;
  cursor:pointer!important;
}
.hero-ctas .btn-primary::after{display:none!important;}
.hero-ctas .btn-primary svg{
  width:18px!important;height:18px!important;
  margin-left:4px!important;
  stroke:currentColor!important;
}
.hero-ctas .btn-primary:hover{
  color:#5A3CC0!important;
  transform:translateY(-2px)!important;
  box-shadow:none!important;
}

/* ---- TOP CTA: make ₹39/week unmistakably yellow ---- */
nav .nav-cta{
  background:var(--rz-yellow)!important;
  color:var(--rz-ink)!important;
  border:3px solid var(--rz-ink)!important;
  box-shadow:5px 5px 0 var(--rz-ink)!important;
  border-radius:14px 11px 15px 10px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
nav .nav-cta:hover{
  transform:translate(-2px,-2px) rotate(-.35deg)!important;
  box-shadow:7px 7px 0 var(--rz-ink)!important;
}

/* ---- Pricing cards: clean, compact and clearly separated ---- */
#pricing .pricing-grid{
  gap:14px!important;
  align-items:start!important;
}
#pricing .price-card{
  position:relative!important;
  overflow:visible!important;
  border:0!important;
  border-radius:22px!important;
  box-shadow:0 7px 18px rgba(23,23,23,.08)!important;
  padding:6px!important;
  opacity:1!important;
}
#pricing .price-card-header-btn{
  position:relative!important;
  z-index:1!important;
  width:100%!important;
  padding:15px 17px 13px!important;
  border:2px solid rgba(23,23,23,.9)!important;
  border-radius:16px 13px 17px 12px!important;
  box-shadow:3px 3px 0 rgba(23,23,23,.9)!important;
  background:#fff!important;
}
#pricing .price-card-header-btn:hover{
  transform:translate(-1px,-1px)!important;
  box-shadow:4px 4px 0 rgba(23,23,23,.9)!important;
}
#pricing .price-card.featured .price-card-header-btn{background:#FFF5F2!important;}
#pricing .price-card:nth-child(1) .price-card-header-btn{background:#F1FBF5!important;}
#pricing .price-card:nth-child(3) .price-card-header-btn{background:#F3F0FF!important;}

/* Recommended badge — always above the monthly header and never clipped */
#pricing #priceCardMonthly{
  overflow:visible!important;
}
#pricing #priceCardMonthly .price-badge{
  position:absolute!important;
  top:-3px!important;
  right:-3px!important;
  z-index:20!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  background:var(--rz-red)!important;
  color:#fff!important;
  padding:6px 13px!important;
  border:0!important;
  border-radius:0 16px 0 12px!important;
  box-shadow:3px 3px 0 var(--rz-ink)!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}
#pricing #priceCardMonthly .price-card-header-btn{
  padding-right:118px!important;
}

/* Pricing content should not create giant empty areas */
#pricing .price-card-collapsible{
  padding-top:4px!important;
  padding-bottom:8px!important;
}
#pricing .price-card.open .price-card-collapsible{
  padding-bottom:10px!important;
}
#pricing .price-list{
  margin-top:9px!important;
  margin-bottom:10px!important;
  gap:6px!important;
}
#pricing .price-gst-line,
#pricing [class*="gst"],
#pricing [id*="gst"]{
  display:none!important;
}

/* ---- FAQ: one clean comic outline around each FAQ item.
   No second border around the clickable question. ---- */
#faq .faq-list{
  gap:9px!important;
}
#faq .faq-item{
  border:2px solid var(--rz-ink)!important;
  border-radius:15px 12px 16px 11px!important;
  background:#fff!important;
  box-shadow:3px 3px 0 rgba(23,23,23,.16)!important;
  overflow:hidden!important;
  padding:0!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
#faq .faq-item:nth-child(odd){transform:rotate(-.2deg);}
#faq .faq-item:nth-child(even){transform:rotate(.2deg);}
#faq .faq-item:hover{
  transform:translateY(-2px) rotate(0deg)!important;
  box-shadow:4px 4px 0 rgba(23,23,23,.2)!important;
}
#faq .faq-q{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
  padding:14px 17px!important;
}
#faq .faq-a{
  border:0!important;
}

/* ---- Why RozGyaan: exactly the three feature boxes get the comic outline ---- */
#why .why-three-card{
  border:2px solid var(--rz-ink)!important;
  box-shadow:4px 4px 0 var(--rz-ink)!important;
  border-radius:15px 12px 16px 11px!important;
}

/* ---- Simple by design: scrolling frame gets one outline only ---- */
#how .how-wa-wrap{
  border:2.5px solid var(--rz-ink)!important;
  box-shadow:4px 4px 0 var(--rz-ink)!important;
  border-radius:19px 15px 21px 14px!important;
  background:#fff!important;
}

/* ---- Images remain clean, with no artificial frame ---- */
.hero-child-img,
.why-photo-img,
.hero-visual img{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* ---- Storybook micro-elements: quiet page-corner stars and bookmark ---- */
.hero::before{
  content:"✦";
  position:absolute;
  left:4%;
  top:8%;
  color:var(--rz-yellow);
  font-size:26px;
  transform:rotate(-12deg);
  animation:rzFloat 4s ease-in-out infinite;
  pointer-events:none;
}
.hero::after{
  content:"✦";
  position:absolute;
  right:5%;
  bottom:9%;
  color:var(--rz-red);
  font-size:19px;
  transform:rotate(14deg);
  animation:rzFloat 3.4s ease-in-out infinite reverse;
  pointer-events:none;
}
#why::before{
  content:"☁  ✦";
  position:absolute;
  right:4%;
  top:25px;
  color:rgba(103,201,232,.65);
  font-size:18px;
  letter-spacing:4px;
  pointer-events:none;
}
#how::after{
  content:"⌁  ✦  ⌁";
  position:absolute;
  left:4%;
  bottom:18px;
  color:rgba(118,82,214,.45);
  font-size:17px;
  letter-spacing:3px;
  pointer-events:none;
}
#pricing::after{
  content:"✦";
  position:absolute;
  right:7%;
  bottom:25px;
  color:rgba(255,212,47,.75);
  font-size:25px;
  transform:rotate(10deg);
  pointer-events:none;
}
#faq::after{
  content:"☁";
  position:absolute;
  left:5%;
  bottom:20px;
  color:rgba(103,201,232,.45);
  font-size:24px;
  pointer-events:none;
}

/* ---- Subtle interactions ---- */
@keyframes rzFloat{
  0%,100%{transform:translateY(0) rotate(-12deg)}
  50%{transform:translateY(-5px) rotate(-7deg)}
}
@keyframes rzPop{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
.price-badge{
  animation:rzPop 3.6s ease-in-out infinite;
}
.nav-cta,
.mobile-subscribe-btn{
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.mobile-subscribe-btn:hover{
  transform:translate(-2px,-2px)!important;
  box-shadow:7px 7px 0 var(--rz-ink)!important;
}

/* Keep mobile compact and prevent decoration from creating overflow. */
@media(max-width:780px){
  body{
    background-size:24px 24px!important;
  }
  .hero::before{left:2%;top:5%;font-size:21px;}
  .hero::after{right:3%;bottom:5%;font-size:16px;}
  #pricing .pricing-grid{gap:10px!important;}
  #pricing .price-card{padding:4px!important;border-radius:18px!important;}
  #pricing .price-card-header-btn{
    padding:13px 12px 11px!important;
    border-radius:14px 11px 15px 10px!important;
    box-shadow:3px 3px 0 rgba(23,23,23,.9)!important;
  }
  #pricing #priceCardMonthly .price-card-header-btn{padding-right:100px!important;}
  #pricing #priceCardMonthly .price-badge{
    top:-2px!important;right:-2px!important;padding:6px 10px!important;
    border-radius:0 13px 0 10px!important;
  }
  #faq .faq-item{box-shadow:2px 2px 0 rgba(23,23,23,.16)!important;}
  #faq .faq-q{padding:13px 14px!important;}
}

/* Accessibility: don't animate if requested. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
}



.hero-ctas .btn-primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  min-height:48px!important;
  padding:10px 20px!important;
  background:#F04A45!important;
  color:#fff!important;
  border:3px solid #171717!important;
  border-radius:13px 10px 14px 9px!important;
  box-shadow:5px 5px 0 #171717!important;
  font-family:'Baloo 2',sans-serif!important;
  font-weight:900!important;
  text-decoration:none!important;
  text-decoration-thickness:0!important;
  text-underline-offset:0!important;
  transform:none!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.hero-ctas .btn-primary::after{display:none!important;}
.hero-ctas .btn-primary svg{
  width:18px!important;
  height:18px!important;
  stroke:#fff!important;
  transition:transform .18s ease!important;
}
.hero-ctas .btn-primary:hover{
  background:#F04A45!important;
  color:#fff!important;
  transform:translate(-2px,-2px) rotate(-.3deg)!important;
  box-shadow:7px 7px 0 #171717!important;
}
.hero-ctas .btn-primary:hover svg{transform:translateX(3px)!important;}
.hero-ctas .btn-primary:active{
  transform:translate(2px,2px)!important;
  box-shadow:2px 2px 0 #171717!important;
}
@media(max-width:780px){
  .hero-ctas .btn-primary{
    min-height:46px!important;
    padding:9px 17px!important;
  }
}



  /* ============ MODALS ============ */
  .modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 500; background: rgba(30,27,21,0.6);
    align-items: center; justify-content: center; padding: 24px;
  }
  .modal-overlay.open { display: flex; animation: fadeInOverlay 0.2s ease; }
  @keyframes fadeInOverlay { from { opacity: 0; } to { opacity: 1; } }
  .modal-box {
    background: var(--card); border: 2.5px solid var(--line); border-radius: 18px; max-width: 640px; width: 100%;
    max-height: 82vh; display: flex; flex-direction: column; box-shadow: 8px 8px 0 rgba(30,27,21,0.25);
    animation: popIn 0.25s cubic-bezier(.34,1.56,.64,1);
  }
  @keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
  .modal-header {
    display: flex; align-items: center; justify-content: space-between; padding: 22px 26px; border-bottom: 2px solid var(--line);
    flex-shrink: 0;
  }
  .modal-header h3 { font-size: 22px; margin: 0; }
  .modal-close {
    width: 36px; height: 36px; border: 2px solid var(--line); border-radius: 9px; background: var(--paper); cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
  }
  .modal-close svg { width: 16px; height: 16px; }
  .modal-close:hover { background: var(--red); color: #fff; transform: rotate(90deg); }
  .modal-close:active { transform: rotate(90deg) scale(0.9); }
  .modal-body { padding: 22px 26px 28px; overflow-y: auto; }
  .modal-body p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 14px; font-weight: 500; }
  .modal-body p strong { color: var(--ink); }
  .modal-body ul { margin: 0 0 14px 20px; }
  .modal-body li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 8px; font-weight: 500; }

  /* ============ CONTACT US MODAL ============ */
  .contact-options { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
  .contact-option-btn {
    display: flex; align-items: center; gap: 14px; background: var(--wa-green); border: 2px solid var(--line);
    border-radius: 12px; padding: 13px 16px; text-decoration: none; box-shadow: 3px 3px 0 var(--line);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .contact-option-btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--line); }
  .contact-option-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--line); }
  .contact-option-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
  .contact-option-label { display: block; font-size: 11px; color: rgba(255,255,255,0.75); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
  .contact-option-value { display: block; font-family: 'Baloo 2', sans-serif; font-size: 16px; color: #fff; font-weight: 700; }
  .contact-call-btn { background: var(--navy); }
  .contact-email-btn { background: var(--purple); }
  .contact-privacy-line { font-size: 12.5px; color: var(--ink-soft); text-align: center; font-weight: 600; margin-bottom: 0 !important; }
  .contact-privacy-line a { color: var(--red-deep); font-weight: 800; text-decoration: underline; }

  /* ============ RAZORPAY VERIFICATION NOTICE ============ */
  .rzp-verification-overlay {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    background: rgba(23,23,23,.34); backdrop-filter: blur(2px); opacity: 0; visibility: hidden;
    pointer-events: none; transition: opacity .16s ease, visibility .16s ease;
  }
  .rzp-verification-overlay.show { opacity: 1; visibility: visible; pointer-events: auto; }
  .rzp-verification-pulse {
    position: absolute; width: 260px; height: 260px; border-radius: 50%;
    background: rgba(255,213,47,.26); animation: rzpPulse 1.25s ease-out infinite;
  }
  .rzp-verification-pulse::after {
    content: ''; position: absolute; inset: 28px; border-radius: 50%;
    border: 2px solid rgba(255,213,47,.55); animation: rzpPulse 1.25s ease-out infinite .25s;
  }
  .rzp-verification-card {
    position: relative; width: min(360px, calc(100% - 40px)); box-sizing: border-box;
    background: var(--yellow); color: var(--ink); border: 2px solid var(--line); border-radius: 14px;
    padding: 16px 18px; text-align: center; box-shadow: 5px 5px 0 var(--line);
    transform: translateY(-70px); animation: rzpDrop .22s ease-out forwards;
  }
  .rzp-verification-card h3 { margin: 0 0 7px; font-family:'Baloo 2',sans-serif; font-size: 18px; line-height: 1.1; }
  .rzp-verification-card p { margin: 4px 0; font-size: 12.5px; line-height: 1.3; font-weight: 700; }
  .rzp-verification-card .rzp-plan { font-weight: 900; }
  .rzp-verification-card .rzp-small { font-size: 11px; font-weight: 700; margin-top: 6px; }
  @keyframes rzpPulse { 0% { transform: scale(.72); opacity:.8; } 70% { transform:scale(1.12); opacity:0; } 100% { transform:scale(1.12); opacity:0; } }
  @keyframes rzpDrop { to { transform: translateY(0); } }
  @media(max-width:480px) { .rzp-verification-card { padding:14px 16px; width:calc(100% - 48px); } .rzp-verification-card h3 { font-size:17px; } .rzp-verification-card p { font-size:12px; } }

  /* ============ MOBILE FLOATING CTA ============ */
  .mobile-subscribe-btn { display: none; }
  @media (max-width: 780px) {
    .mobile-subscribe-btn {
      display:flex !important; align-items:center; justify-content:center;
      position:fixed; left:50%; bottom:16px; transform:translateX(-50%) !important; z-index:300;
      background:var(--red); color:#fff; text-decoration:none;
      padding:17px 32px; border:0 !important; border-radius:14px; min-height:48px; box-sizing:border-box;
      font-weight:800; font-size:16.5px; font-family:'Baloo 2',sans-serif;
      box-shadow:0 12px 26px rgba(242,47,47,.25); opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    }
    .mobile-subscribe-btn:active { transform:translateX(-50%) translateY(1px) !important; box-shadow:0 8px 18px rgba(242,47,47,.20); }
    body { padding-bottom:64px; }
  }
  @media (max-width:700px) { .mobile-subscribe-btn { width:calc(100% - 72px) !important; max-width:300px !important; padding:12px 20px !important; font-size:15px !important; } }
  


  /* ============ SHARED SECTION STYLES ============ */
  .section { padding: 56px 0; position: relative; }
  .section-head { max-width: 620px; margin: 0 auto 34px; text-align: center; }
  .kicker { display: inline-block; font-family: 'Baloo 2', sans-serif; font-size: 14px; font-weight: 800; color: var(--purple); margin-bottom: 8px; }
  .section-head h2 { font-size: 30px; margin-bottom: 10px; }
  .section-head p { color: var(--ink-soft); font-size: 15.5px; font-weight: 700; }
  .section-alt { background: var(--card); border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }

  /* ============ SAMPLE MEDIA PLAYER BUTTONS ============ */
  .sample-player-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; max-width: 700px; margin: 0 auto; }
  .sample-player-btn {
    flex: 1 1 280px; max-width: 320px; display: flex; align-items: center; gap: 14px; text-decoration: none;
    background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 16px 20px;
    box-shadow: 4px 4px 0 var(--line); transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .sample-player-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--line); }
  .sample-player-btn:active { transform: translate(1px,1px); box-shadow: 1.5px 1.5px 0 var(--line); }
  .sample-player-icon {
    width: 50px; height: 50px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  }
  .sample-player-icon svg { width: 22px; height: 22px; margin-left: 2px; }
  .sample-player-audio .sample-player-icon { background: var(--red-deep); }
  .sample-player-fact .sample-player-icon { background: var(--indiagreen); }
  .sample-player-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
  .sample-player-label { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 15.5px; color: var(--ink); }
  .sample-player-sub { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; }

  @media (max-width: 480px) {
    .sample-player-row { flex-direction: column; align-items: center; }
    .sample-player-btn { width: 100%; max-width: 340px; }
  }

  /* ============ WHY ROZGYAAN ============ */
  .why-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
  .why-copy { text-align: left; }
  .why-copy h2 { font-size: 28px; margin-bottom: 8px; }
  .why-copy .why-sub { font-size: 16.5px; color: var(--red-deep); font-weight: 800; margin-bottom: 18px; font-family: 'Baloo 2', sans-serif; }
  .why-lines { display: flex; flex-direction: column; gap: 10px; }
  .why-line { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
  .why-line .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-deep); flex-shrink: 0; }
  .why-photo-wrap { display: flex; align-items: center; justify-content: center; }
  .why-photo-placeholder {
    width: 100%; max-width: 380px; aspect-ratio: 4/5; border-radius: 20px; border: 2px dashed var(--line);
    background: linear-gradient(135deg, #F1EDFB, #FFF1E0); display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 30px; color: var(--ink-soft); font-weight: 700; font-size: 13.5px;
  }
  @media (max-width: 780px) {
    .why-wrap { grid-template-columns: 1fr; text-align: center; }
    .why-copy { text-align: center; }
    .why-lines { align-items: center; }
    .why-photo-wrap { order: -1; }
  }

  /* ============ HOW IT WORKS ============ */
  .how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .how-card { padding: 24px 18px; text-align: center; border: 2px solid var(--line); border-radius: 14px; box-shadow: 3px 3px 0 var(--line); }
  .how-card-1 { background: #FFEEEB; }
  .how-card-2 { background: #FFF6E5; }
  .how-card-3 { background: #F1EDFB; }
  .how-card-4 { background: #EAF6EE; }
  .how-icon { font-size: 28px; margin-bottom: 10px; }
  .how-when { font-size: 10.5px; font-weight: 800; color: var(--purple); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
  .how-card h4 { font-size: 15px; margin-bottom: 6px; }
  .how-card p { font-size: 12.5px; color: var(--ink-soft); font-weight: 700; line-height: 1.3; }
  @media (max-width: 780px) {
    .how-grid { grid-template-columns: repeat(2, 1fr); }
  }



  /* ============ PRICING ============ */
  .price-intro-wrap { text-align: center; margin-bottom: 10px; }
  .price-intro-banner { display: inline-block; background: var(--yellow); border: 2px solid var(--line); border-radius: 100px; padding: 6px 16px; font-size: 12px; font-weight: 800; }
  .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 820px; margin: 0 auto; }
  .price-card { position: relative; overflow: hidden; }
  .price-card.featured { border-color: var(--red-deep); border-width: 3px; }
  .price-badge { position: absolute; top: 0; right: 0; background: var(--red-deep); color: #fff; font-size: 10.5px; font-weight: 800; padding: 5px 14px; border-bottom-left-radius: 10px; }
  .price-card-header-btn { width: 100%; background: none; border: none; padding: 20px 20px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-family: inherit; text-align: left; }
  .price-card-header-left h3 { font-size: 17px; margin-bottom: 4px; }
  .trial-badge { display: inline-block; background: var(--indiagreen); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 100px; margin-bottom: 6px; }
  .price-amount-row { display: flex; align-items: baseline; gap: 8px; }
  .price-old { font-size: 13px; color: var(--ink-soft); text-decoration: line-through; font-weight: 700; }
  .price-amount { font-family: 'Baloo 2', sans-serif; font-size: 26px; font-weight: 800; color: var(--red-deep); }
  .price-card-chevron { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.2s ease; }
  .price-card.open .price-card-chevron { transform: rotate(180deg); }
  .price-card-collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 20px; }
  .price-card.open .price-card-collapsible { max-height: 400px; padding-bottom: 20px; }
  .price-period { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin-bottom: 4px; }
  .price-gst-line { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; margin-bottom: 14px; }
  .price-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
  .price-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 700; }
  .price-list li svg { width: 15px; height: 15px; color: var(--indiagreen); flex-shrink: 0; margin-top: 2px; }
  .btn-select {
    background: var(--ink); color: var(--paper); text-align: center; padding: 12px; border: 2px solid var(--line);
    border-radius: 10px; font-weight: 800; font-size: 13.5px; text-decoration: none; display: flex; align-items: center;
    justify-content: center; cursor: pointer; width: 100%; min-height: 46px; box-sizing: border-box;
    transition: all 0.15s ease; font-family: 'Baloo 2', sans-serif; box-shadow: 2.5px 2.5px 0 var(--line);
  }
  .price-card.featured .btn-select { background: var(--red-deep); color: #fff; }
  .refund-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; font-size: 13px; color: var(--ink-soft); font-weight: 700; }
  .refund-note svg { width: 17px; height: 17px; color: var(--indiagreen); flex-shrink: 0; }

  @media (max-width: 780px) {
    .pricing-grid { grid-template-columns: 1fr; }
  }

  /* ============ SIGNUP / FORM ============ */
  .signup-section { background: var(--ink); border-radius: 22px; padding: 44px; }
  .signup-form-heading { text-align:center; margin-bottom:18px; }
  .signup-form-heading .kicker { color: var(--yellow); }
  .signup-form-heading h2 { color:var(--paper); font-size:28px; line-height:1.2; margin-top:6px; }
  .signup-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .signup-grid-form-only { max-width: 680px; margin: 0 auto; }
  .signup-left h2 { color: var(--paper); font-size: 26px; line-height: 1.25; }
  .signup-left, .setup-intro, .setup-steps { display:none !important; }
  .signup-left .underline-key { color: var(--yellow); }
  .form-card { background: var(--card); border-radius: 16px; padding: 26px; border: 2px solid var(--line); box-shadow: 4px 4px 0 rgba(0,0,0,0.3); }

  .plan-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
  .plan-opt {
    background: var(--paper); border: 2px solid var(--line); border-radius: 10px; padding: 10px 6px; text-align: center;
    font-weight: 800; font-size: 12.5px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; position: relative;
  }
  .plan-opt.active { background: var(--red); color: #fff; }
  .plan-opt .p-amt { font-size: 14px; }
  .plan-opt .p-badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--yellow); color: var(--ink); font-size: 8.5px; font-weight: 800; padding: 2px 7px; border-radius: 100px; white-space: nowrap; }

  .form-field { margin-bottom: 14px; }
  .form-field label { display: block; font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.02em; }
  .form-field input, .form-field select {
    width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 9px; font-family: 'Nunito', sans-serif;
    font-size: 14px; font-weight: 700; background: var(--paper); color: var(--ink);
  }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

  .form-submit {
    background: var(--red); color: #fff; width: 100%; padding: 15px; border: 2px solid var(--line); border-radius: 11px;
    font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 3.5px 3.5px 0 var(--line);
    transition: transform 0.15s ease, box-shadow 0.15s ease; font-family: 'Baloo 2', sans-serif; min-height: 48px;
  }
  .form-submit:hover { transform: translate(-2px,-2px); box-shadow: 5.5px 5.5px 0 var(--line); }
  .form-submit:active { transform: translate(1px,1px); box-shadow: 1.5px 1.5px 0 var(--line); }
  .form-fineprint { font-size: 12px; color: var(--ink-soft); font-weight: 700; text-align: center; margin-top: 10px; }
  .gst-note-box { display: flex; align-items: center; gap: 8px; background: #FFF4E0; border: 2px dashed var(--saffron); border-radius: 9px; padding: 10px 12px; margin-bottom: 14px; font-size: 12px; font-weight: 700; }
  .gst-note-box svg { width: 17px; height: 17px; color: var(--saffron); flex-shrink: 0; }

  .kidclass-native-select { display: block; }
  .kidclass-chips { display: none; }
  .kidclass-chip {
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 12.5px; padding: 10px 6px;
    border: 2px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink);
    cursor: pointer; min-height: 48px; box-sizing: border-box; transition: all 0.12s ease;
    display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap;
    flex: 0 0 calc(33.333% - 6px);
  }
  .kidclass-chip.active { background: var(--red); color: #fff; box-shadow: 2px 2px 0 var(--line); }

  #formScreen2 { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; }
  #formScreen2.expanded { max-height: 1400px; margin-top: 18px; }

  @media (max-width: 780px) {
    .signup-section { padding: 26px 18px; border-radius: 18px; }
    .signup-grid { grid-template-columns: 1fr; gap: 20px; }
    .signup-grid-form-only { max-width: 100%; }
    .signup-left { display:none !important; }
    .kidclass-native-select { display: none; }
    .kidclass-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
  }
/* FINAL MOBILE CHECKOUT ALIGNMENT FIX */
.signup-section,
.signup-grid,
.signup-grid-form-only,
.form-card,
#formScreen1,
#formScreen2,
.form-row,
.form-field {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.form-card { width: 100%; overflow: hidden; }
.form-field input,
.form-field select,
.form-submit,
.promo-code-box { max-width: 100%; box-sizing: border-box; }

@media (max-width: 780px) {
  .signup-section { width: 100%; max-width: 100%; overflow: hidden; }
  .signup-grid-form-only { width: 100%; }
  .form-card { width: 100%; padding: 22px 18px; }
  .form-row { width: 100%; }
}



  /* ============ TESTIMONIALS ============ */
  .testi-grid { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 20px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .testi-grid::-webkit-scrollbar { height: 6px; }
  .testi-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; opacity: 0.25; }
  .testi-card { padding: 22px; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; flex: 0 0 300px; scroll-snap-align: start; }
  .testi-card:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--line); }
  .testi-stars { display: flex; gap: 3px; margin-bottom: 10px; }
  .testi-stars svg { width: 18.75px; height: 18.75px; }
  .testi-quote { font-size: 14px; color: var(--ink); line-height: 1.55; margin-bottom: 18px; font-weight: 600; }
  .testi-person { display: flex; align-items: center; gap: 11px; border-top: 1.5px dashed var(--line); padding-top: 14px; }
  .testi-avatar { width: 42px; height: 42px; border: 2px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
  .testi-avatar svg { width: 30px; height: 30px; }
  .testi-name { font-weight: 800; font-size: 13.5px; font-family: 'Baloo 2', sans-serif; }
  .testi-meta { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }
  .sample-scroll-hint { text-align: center; font-family: 'Kalam', cursive; font-size: 15px; color: var(--ink-soft); font-weight: 700; }
  @media (max-width: 780px) {
    .testi-card { flex: 0 0 86vw; }
    .testi-quote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  }

  /* ============ FAQ ============ */
  .faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 680px; margin: 0 auto; }
  .faq-item { padding: 0; overflow: hidden; }
  .faq-q { padding: 16px 20px; font-weight: 800; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  .faq-icon-plus svg { width: 18px; height: 18px; transition: transform 0.2s ease; flex-shrink: 0; }
  .faq-item.open .faq-icon-plus svg { transform: rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 20px; font-size: 13.5px; color: var(--ink-soft); font-weight: 600; line-height: 1.5; }
  .faq-item.open .faq-a { max-height: 240px; padding-bottom: 16px; }

  /* ============ FINAL CTA ============ */
  .final-cta { background: var(--red-deep); border-radius: 20px; padding: 32px 24px; text-align: center; }
  .final-cta h2 { color: #fff; font-size: 24px; margin-bottom: 8px; }
  .final-cta p { color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 700; margin-bottom: 18px; }
  .final-cta .btn-primary { background: var(--ink); }
  .final-cta .cta-microcopy { color: rgba(255,255,255,0.75); }

  /* ============ FOOTER ============ */
  footer { border-top: 2px solid var(--line); padding: 34px 0; }
  .footer-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .footer-logo { display: flex; align-items: center; gap: 8px; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; }
  .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
  .footer-links a { text-decoration: none; color: inherit; }
  .footer-links a:hover { color: var(--red-deep); }
  .footer-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 15px; border-radius: 999px;
    background: #25D366; color: #fff !important; text-decoration: none;
    font-size: 12.5px; font-weight: 800; line-height: 1;
    box-shadow: 0 5px 16px rgba(37,211,102,.16);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .footer-whatsapp:hover { transform: translateY(-1px); box-shadow: 0 7px 20px rgba(37,211,102,.22); }
  .footer-whatsapp svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .footer-copyright { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; margin-top: 6px; }

/* Final storybook polish */
:root{--rz-ink:#171717;--rz-red:#F04A45;--rz-yellow:#FFD42F;--rz-purple:#7652D6;}
body{
 background-color:#FFFDF7;
 background-image:linear-gradient(rgba(118,82,214,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(118,82,214,.032) 1px,transparent 1px);
 background-size:28px 28px;
}
.hero::before{content:"✦";position:absolute;left:4%;top:7%;color:var(--rz-yellow);font-size:24px;animation:rzStoryFloat 4s ease-in-out infinite;pointer-events:none;}
.hero::after{content:"✦";position:absolute;right:5%;bottom:8%;color:var(--rz-red);font-size:18px;animation:rzStoryFloat 3.4s ease-in-out infinite reverse;pointer-events:none;}
#why::before{content:"☁  ✦";position:absolute;right:4%;top:20px;color:rgba(103,201,232,.58);letter-spacing:4px;pointer-events:none;}
#how::after{content:"⌁  ✦  ⌁";position:absolute;left:4%;bottom:18px;color:rgba(118,82,214,.4);letter-spacing:3px;pointer-events:none;}
@keyframes rzStoryFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.js-reveal{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease;}
.js-reveal.is-visible{opacity:1;transform:none;}
.hero-child-img,.why-photo-img,.hero-visual img{border:0!important;outline:0!important;box-shadow:none!important;}
@media(max-width:780px){body{background-size:24px 24px;}.hero::before{left:2%;top:5%;font-size:20px;}.hero::after{right:3%;bottom:5%;font-size:16px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}


/* ===== WhatsApp phone / chat presentation ===== */
#samples .samples-panel{
  position:relative!important;
  overflow:hidden!important;
  padding:22px!important;
}
#samples .samples-panel::before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed rgba(23,23,23,.12);
  border-radius:22px;
  pointer-events:none;
}
.rz-whatsapp-stage{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:4px auto 16px;
  position:relative;
}
.rz-phone{
  width:min(330px,92vw);
  background:#171717;
  border:3px solid #171717;
  border-radius:34px;
  padding:9px;
  box-shadow:8px 9px 0 rgba(23,23,23,.16);
  transform:rotate(-.6deg);
  position:relative;
}
.rz-phone::before{
  content:"";
  display:block;
  width:76px;
  height:6px;
  margin:0 auto 8px;
  border-radius:20px;
  background:#3b3b3b;
}
.rz-phone-screen{
  background:#F2F8F0;
  border-radius:25px;
  overflow:hidden;
  position:relative;
  padding-bottom:10px;
  background-image:
    radial-gradient(rgba(118,82,214,.055) 1px,transparent 1px);
  background-size:13px 13px;
}
.rz-wa-head{
  background:#138C55;
  color:#fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:900;
  font-size:13px;
}
.rz-wa-avatar{
  width:30px;height:30px;border-radius:50%;
  background:#FFD42F;
  display:grid;place-items:center;
  color:#171717;font-size:15px;
}
.rz-wa-body{
  padding:13px 11px 7px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.rz-wa-msg{
  max-width:88%;
  background:#fff;
  border-radius:13px 13px 13px 4px;
  padding:10px 11px 9px;
  font-size:12px;
  line-height:1.45;
  color:#252525;
  box-shadow:0 2px 7px rgba(0,0,0,.07);
  animation:rzChatIn .55s both;
}
.rz-wa-msg:nth-child(2){animation-delay:.12s;margin-left:auto;background:#DCF8C6;border-radius:13px 13px 4px 13px;}
.rz-wa-msg:nth-child(3){animation-delay:.24s;}
.rz-wa-msg strong{display:block;color:#7652D6;font-size:12px;margin-bottom:3px;}
.rz-wa-msg small{display:block;text-align:right;color:#777;font-size:8px;margin-top:4px;}
.rz-wa-audio{
  display:flex;align-items:center;gap:8px;
  margin-top:5px;
  padding:7px 8px;
  background:#F5F0FF;
  border-radius:11px;
}
.rz-wa-play{
  width:25px;height:25px;border-radius:50%;
  background:#7652D6;color:#fff;
  display:grid;place-items:center;font-size:11px;
}
.rz-wa-wave{
  flex:1;height:15px;
  background:repeating-linear-gradient(90deg,#B8A5EE 0 2px,transparent 2px 5px);
  opacity:.8;
  border-radius:8px;
}
.rz-wa-quiz{
  background:#FFF7D9!important;
  border:1px solid rgba(23,23,23,.08);
}
.rz-wa-quiz-options{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:7px;
}
.rz-wa-option{
  background:#fff;border-radius:8px;padding:5px 6px;font-size:10px;
  text-align:center;font-weight:800;
}
@keyframes rzChatIn{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to{opacity:1;transform:none}
}

/* ===== Storybook page-turn separators ===== */
.rz-page-turn{
  height:46px;
  position:relative;
  margin:0;
  overflow:hidden;
  pointer-events:none;
}
.rz-page-turn::before{
  content:"";
  position:absolute;
  left:-2%;
  right:-2%;
  top:15px;
  height:30px;
  background:#FFFDF7;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  box-shadow:0 -1px 0 rgba(23,23,23,.05);
}
.rz-page-turn::after{
  content:"✦   •   ✦";
  position:absolute;
  left:50%;
  top:3px;
  transform:translateX(-50%);
  color:rgba(118,82,214,.42);
  font-size:12px;
  letter-spacing:5px;
  white-space:nowrap;
}
.rz-page-turn-blue::before{background:#EEF9FC;}
.rz-page-turn-lilac::before{background:#F5F1FF;}
.rz-page-turn-green::before{background:#F1FBF5;}

/* Gentle section rhythm, without adding heavy boxes */
#samples + .rz-page-turn,
#why + .rz-page-turn,
#how + .rz-page-turn,
#pricing + .rz-page-turn{
  margin-top:-2px;
}
@media(max-width:780px){
  #samples .samples-panel{padding:15px!important;}
  .rz-phone{width:min(315px,94vw);border-radius:30px;padding:8px;}
  .rz-phone-screen{border-radius:22px;}
  .rz-page-turn{height:34px;}
  .rz-page-turn::before{top:11px;height:24px;}
}


/* v17 — homepage structure + WhatsApp phone UI + fixed CTA alignment */
.how-section{padding-top:42px!important;}
.how-wa-wrap{max-width:620px;margin:0 auto;position:relative;}
.how-wa-phone{position:relative;overflow:hidden;border:2px solid #171717;border-radius:30px;background:#efeae2;box-shadow:8px 10px 0 rgba(23,23,23,.12);}
.how-wa-phone-head{height:66px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#075e54;color:#fff;box-sizing:border-box;}
.how-wa-phone-head strong{display:block;font-family:'Nunito',sans-serif;font-size:15px;line-height:1.1;}
.how-wa-phone-head small{display:block;font-size:10px;opacity:.85;margin-top:3px;font-weight:700;}
.how-wa-phone-avatar{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 40px;}
.how-wa-phone-avatar img{width:100%;height:100%;object-fit:cover;}
.how-wa-phone-menu{margin-left:auto;font-size:25px;line-height:1;opacity:.9;}
.how-wa-phone .how-wa-scroll{height:360px;box-sizing:border-box;border:0;border-radius:0;padding:18px 22px 20px;background:linear-gradient(180deg,#efeae2 0%,#e7dfd5 100%);}
.how-wa-phone-footer{padding:9px 14px 10px;text-align:center;background:#f0f2f5;color:#667781;font-size:10px;font-weight:800;border-top:1px solid rgba(0,0,0,.08);}
@media(max-width:780px){
 .how-wa-phone{border-radius:24px;}
 .how-wa-phone-head{height:60px;padding:0 13px;}
 .how-wa-phone-avatar{width:36px;height:36px;flex-basis:36px;}
 .how-wa-phone .how-wa-scroll{height:330px;padding:12px 12px 16px;}
}
@media(max-width:780px){
 .mobile-subscribe-btn{position:fixed!important;left:16px!important;right:16px!important;bottom:calc(14px + env(safe-area-inset-bottom))!important;transform:none!important;width:auto!important;max-width:none!important;min-height:50px!important;margin:0!important;z-index:2147483000!important;
   border:3px solid #171717!important;border-radius:999px!important;box-shadow:5px 6px 0 #171717,0 14px 28px rgba(242,47,47,.22)!important;
 }
 .mobile-subscribe-btn:hover,.mobile-subscribe-btn:active{transform:none!important;}
 body{padding-bottom:82px!important;}
}


/* ===== FINAL STORYBOOK + TRANSPARENT ART + WHATSAPP UI POLISH ===== */

/* Warm storybook paper across the site, with very subtle page/grid texture. */
html, body { background: var(--paper) !important; }
body {
  background-image:
    radial-gradient(circle at 12px 12px, rgba(30,27,21,.035) 1px, transparent 1.5px),
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18));
  background-size: 24px 24px, 100% 100%;
}
main { position: relative; }
.section { position: relative; }
.section:not(.section-alt)::after {
  content:"✦   ~   ✦";
  position:absolute;
  left:50%;
  bottom:-10px;
  transform:translateX(-50%);
  font-family:'Kalam',cursive;
  font-size:13px;
  letter-spacing:10px;
  color:rgba(30,27,21,.13);
  pointer-events:none;
}
.section-alt { background:rgba(255,255,255,.48) !important; }

/* Use the real transparent PNG artwork. Never add glow/filter or force a crop. */
.hero-child-img,
.why-photo-img {
  background:transparent !important;
  filter:none !important;
  box-shadow:none !important;
  border:0 !important;
  outline:0 !important;
  object-fit:contain !important;
  height:auto !important;
}
.hero-child-img {
  width:min(100%, 620px) !important;
  aspect-ratio:auto !important;
  animation: rgGentleFloat 5.5s ease-in-out infinite;
}
.why-photo-img {
  width:min(100%, 470px) !important;
  max-width:470px !important;
  aspect-ratio:1536 / 1024 !important;
  animation: rgGentleFloatWhy 6s ease-in-out infinite;
}
@keyframes rgGentleFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-7px); }
}
@keyframes rgGentleFloatWhy {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-5px); }
}

/* Keep the Why artwork centered without imposing a fake fixed-height box. */
.why-photo-wrap {
  min-height:0 !important;
  height:auto !important;
  align-items:center !important;
  justify-content:center !important;
}
.why-photo-wrap::before,
.why-photo-wrap::after { display:none !important; }

/* Actual WhatsApp sample: logo in the header + moral-story message. */
.rz-wa-avatar {
  width:34px !important;
  height:34px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:3px !important;
}
.rz-wa-avatar img { width:100% !important; height:100% !important; object-fit:contain !important; }
.rz-wa-moral-msg { animation: rgMessageFloat 4.5s ease-in-out infinite; }
@keyframes rgMessageFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-2px); }
}

/* Simple-by-design phone: preserve its existing content and scrolling. */
.how-wa-phone {
  animation:rgPhoneFloat 7s ease-in-out infinite;
}
@keyframes rgPhoneFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-4px); }
}
.how-wa-scroll {
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}

/* Subscription: a WhatsApp phone shell around the existing functional form. */
.signup-section {
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.signup-grid-form-only { max-width:560px !important; margin:0 auto !important; }
.signup-wa-phone {
  width:min(100%, 560px);
  margin:0 auto;
  background:#171717;
  border:3px solid #171717;
  border-radius:32px;
  padding:9px;
  box-shadow:8px 10px 0 rgba(30,27,21,.12);
}
.signup-wa-head {
  min-height:64px;
  background:#075E54;
  color:#fff;
  border-radius:23px 23px 8px 8px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.signup-wa-avatar {
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:50%;
  background:#fff;
  padding:4px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.signup-wa-avatar img { width:100%; height:100%; object-fit:contain; }
.signup-wa-head > div { min-width:0; flex:1; }
.signup-wa-head strong { display:block; font-size:15px; font-weight:900; }
.signup-wa-head small { display:block; margin-top:1px; font-size:10px; opacity:.82; }
.signup-wa-menu { font-size:24px; line-height:1; opacity:.9; }
.signup-wa-body {
  margin-top:2px;
  padding:14px 10px 10px;
  background:#EDE5D8;
  border-radius:8px 8px 23px 23px;
  background-image:
    radial-gradient(circle at 10px 10px, rgba(30,27,21,.035) 1px, transparent 1.5px);
  background-size:20px 20px;
}
.signup-wa-intro {
  width:fit-content;
  max-width:90%;
  margin:0 auto 10px 4px;
  padding:9px 12px;
  background:#fff;
  border-radius:4px 14px 14px 14px;
  font-size:12px;
  font-weight:800;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.signup-wa-body .form-card {
  width:100%;
  background:#DCF8C6 !important;
  border:0 !important;
  border-radius:4px 14px 14px 14px !important;
  box-shadow:0 2px 4px rgba(0,0,0,.08) !important;
  padding:18px !important;
}
.signup-wa-body .form-card::after {
  content:"";
  display:block;
  height:8px;
}
.signup-wa-body .plan-toggle .plan-opt {
  border-color:rgba(30,27,21,.65);
  box-shadow:none;
}
.signup-wa-body .form-field input,
.signup-wa-body .form-field select {
  background:#fff !important;
  border:1px solid rgba(30,27,21,.16) !important;
  box-shadow:none !important;
  border-radius:8px !important;
}
.signup-wa-body .form-submit {
  border-radius:999px !important;
  border:2px solid var(--line) !important;
  box-shadow:3px 3px 0 var(--line) !important;
}
.signup-wa-body .form-submit:active {
  transform:translate(2px,2px) scale(.985) !important;
  box-shadow:1px 1px 0 var(--line) !important;
}

/* Subtle storybook motion and tactile button feedback. */
.btn-primary, .nav-cta, .btn-select, .mobile-subscribe-btn, .form-submit {
  will-change:transform;
}
.btn-primary:active, .nav-cta:active, .btn-select:active, .mobile-subscribe-btn:active {
  transform:translate(2px,2px) scale(.98) !important;
}
.hero-float-card { animation:rgCardFloat 5s ease-in-out infinite; }
.hero-float-2 { animation-delay:-2.2s; }
@keyframes rgCardFloat {
  0%,100% { transform:translateY(0) rotate(0); }
  50% { transform:translateY(-5px) rotate(.4deg); }
}
.kicker { animation:rgKickerDrift 5s ease-in-out infinite; }
@keyframes rgKickerDrift {
  0%,100% { transform:translateX(0); }
  50% { transform:translateX(2px); }
}

/* Floating mobile CTA must stay viewport-fixed, including over the signup phone. */
@media (max-width:780px) {
  .mobile-subscribe-btn {
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    bottom:calc(12px + env(safe-area-inset-bottom)) !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    transform:none !important;
    z-index:2147483647 !important;
  }
  .mobile-subscribe-btn:active {
    transform:translateY(2px) scale(.985) !important;
  }
  body { padding-bottom:92px !important; }
  .signup-wa-phone { width:100%; }
  .signup-wa-body .form-card { padding:15px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-child-img,.why-photo-img,.how-wa-phone,.rz-wa-moral-msg,.hero-float-card,.kicker {
    animation:none !important;
  }
}

/* ===== FINAL MOBILE WHATSAPP / STORYBOOK POLISH ===== */

/* Warm paper across the site, with selected sections allowed to keep their own tint. */
:root{--storybook-paper:#FBF7EF;--wa-paper:#EFE7DC;--wa-green:#075E54;--wa-bubble:#FFFFFF;--wa-reply:#DCF8C6;}
html,body{background:var(--storybook-paper)!important;}
body{
  background-image:
    radial-gradient(circle at 14px 14px, rgba(30,27,21,.028) 1px, transparent 1.5px),
    linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:28px 28px,100% 44px;
}
.section, .hero, .samples-section, .how-section, #pricing, #faq, #signup{
  background-color:transparent!important;
}

/* Clean transparent artwork: no filters, glow, background or forced aspect ratio. */
.hero-child-img,.why-photo-img{
  background:transparent!important;
  filter:none!important;
  box-shadow:none!important;
  object-fit:contain!important;
  object-position:center!important;
  aspect-ratio:auto!important;
}
.hero-child-img{height:auto!important;}
.why-photo-img{
  width:auto!important;
  max-width:470px!important;
  height:auto!important;
  animation:whyGentleFloat 6s ease-in-out infinite!important;
}
@keyframes whyGentleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

/* Use the same real RozGyaan mark in every WhatsApp avatar. */
.rz-logo-svg{width:100%;height:100%;display:block;}
.rz-wa-avatar,.how-wa-phone-avatar,.signup-wa-avatar{
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:2px!important;
}
.rz-wa-avatar .rz-logo-svg{width:30px;height:30px;}
.how-wa-phone-avatar .rz-logo-svg,.signup-wa-avatar .rz-logo-svg{width:34px;height:34px;}

/* Actual WhatsApp-like sample messages. */
.rz-phone{
  background:#171717!important;
  border:3px solid #171717!important;
}
.rz-phone-screen{
  background:#efeae2!important;
  background-image:
    radial-gradient(circle at 10px 10px,rgba(0,0,0,.035) 1px,transparent 1.4px)!important;
  background-size:20px 20px!important;
}
.rz-wa-head{background:var(--wa-green)!important;}
.rz-wa-msg{
  position:relative;
  border-radius:5px 14px 14px 14px!important;
  box-shadow:0 1px 2px rgba(0,0,0,.12)!important;
}
.rz-wa-msg:nth-child(even){
  border-radius:14px 5px 14px 14px!important;
}
.rz-wa-moral-msg{background:#fff!important;}
.rz-wa-quiz{background:#fff!important;border:0!important;}
.rz-wa-option{box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}

/* Simple-by-design: every step is a WhatsApp bubble inside one phone, still scrollable. */
.how-wa-phone{
  border:3px solid #171717!important;
  background:#171717!important;
  box-shadow:8px 10px 0 rgba(23,23,23,.12)!important;
}
.how-wa-phone-head{
  background:var(--wa-green)!important;
  color:#fff!important;
}
.how-wa-phone-avatar{
  background:#fff!important;
  border-radius:50%!important;
}
.how-wa-phone .how-wa-scroll{
  background:#efeae2!important;
  background-image:
    radial-gradient(circle at 10px 10px,rgba(0,0,0,.035) 1px,transparent 1.4px)!important;
  background-size:20px 20px!important;
  padding:14px 13px 18px!important;
  height:390px!important;
}
.how-wa-message{
  flex:0 0 auto!important;
  width:min(91%,500px)!important;
  margin:0 0 12px 0!important;
  padding:13px 14px 11px!important;
  border:0!important;
  border-radius:5px 14px 14px 14px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(0,0,0,.12)!important;
  scroll-snap-align:none!important;
}
.how-wa-message:nth-child(even){
  margin-left:auto!important;
  border-radius:14px 5px 14px 14px!important;
  background:#DCF8C6!important;
}
.how-wa-message::before,.how-wa-message::after{display:none!important;}
.how-wa-message h3{font-size:18px!important;margin:0!important;}
.how-wa-message p{font-size:12px!important;margin-top:5px!important;}
.how-wa-top{gap:10px!important;}
.how-wa-icon{
  width:34px!important;height:34px!important;flex-basis:34px!important;
  border-radius:50%!important;border:0!important;
}
.how-wa-meta{font-size:9px!important;margin-top:7px!important;text-align:right!important;color:#667781!important;}

/* Subscription: no section/card border. Only the phone itself provides the visual frame. */
#signup .signup-section,
#signup .signup-wa-phone{
  border:0!important;
  box-shadow:none!important;
}
#signup .signup-wa-phone{
  width:min(100%,560px)!important;
  padding:8px!important;
  border-radius:30px!important;
  background:#171717!important;
}
#signup .signup-wa-body{
  padding:12px 8px 10px!important;
  border-radius:7px 7px 22px 22px!important;
  overflow:hidden!important;
}
#signup .signup-wa-body .form-card{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  padding:13px!important;
  margin:0!important;
  border:0!important;
  border-radius:5px 14px 14px 14px!important;
  box-shadow:0 1px 2px rgba(0,0,0,.12)!important;
  background:#fff!important;
}
#signup .signup-wa-body .form-card *{max-width:100%;}
#signup .signup-wa-body .plan-toggle{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
}
#signup .signup-wa-body .plan-toggle .plan-opt{
  min-width:0!important;
  padding:9px 5px!important;
  font-size:11px!important;
  border-radius:9px!important;
  overflow:hidden!important;
}
#signup .signup-wa-body .form-field input,
#signup .signup-wa-body .form-field select,
#signup .signup-wa-body textarea{
  width:100%!important;
  min-width:0!important;
}
#signup .signup-wa-body .form-submit{
  width:100%!important;
  min-width:0!important;
  border-radius:13px 10px 14px 9px!important;
  border:3px solid #171717!important;
  background:#F04A45!important;
  color:#fff!important;
  box-shadow:5px 5px 0 #171717!important;
}
#signup .signup-wa-body .form-submit:active{
  transform:translate(3px,3px)!important;
  box-shadow:2px 2px 0 #171717!important;
}

/* Hero Start Free Trial uses exactly the same red comic treatment. */
.hero-ctas .btn-primary{
  background:#F04A45!important;
  color:#fff!important;
  border:3px solid #171717!important;
  border-radius:13px 10px 14px 9px!important;
  box-shadow:5px 5px 0 #171717!important;
}
.hero-ctas .btn-primary:hover{box-shadow:7px 7px 0 #171717!important;}
.hero-ctas .btn-primary:active{
  transform:translate(3px,3px)!important;
  box-shadow:2px 2px 0 #171717!important;
}

/* Keep floating CTA attached to the viewport, never to the signup section. */
@media(max-width:780px){
  .mobile-subscribe-btn{
    position:fixed!important;
    inset:auto 16px calc(14px + env(safe-area-inset-bottom)) 16px!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    z-index:2147483647!important;
  }
  body{padding-bottom:88px!important;}
  #signup .signup-wa-phone{width:100%!important;max-width:100%!important;}
  #signup .signup-wa-body{padding-left:6px!important;padding-right:6px!important;}
  #signup .signup-wa-body .form-card{padding:11px!important;}
  #signup .signup-wa-body .plan-toggle{gap:4px!important;}
  #signup .signup-wa-body .plan-toggle .plan-opt{font-size:10px!important;padding:8px 3px!important;}
  .how-wa-phone .how-wa-scroll{height:350px!important;padding:11px 10px 15px!important;}
  .how-wa-message{width:91%!important;padding:11px 12px 10px!important;}
}
@media(max-width:380px){
  #signup .signup-wa-body .plan-toggle .plan-opt{font-size:9px!important;}
  #signup .signup-wa-body .form-card{padding:9px!important;}
  #signup .signup-wa-body .form-field input,
  #signup .signup-wa-body .form-field select{font-size:13px!important;}
}


/* ===== FINAL WHATSAPP FORM / MOBILE FIT PASS ===== */
/* The phone is the only frame: no wrapper/card around Simple by Design. */
#how .how-wa-wrap{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
}
#how .how-wa-phone{
  width:min(100%,560px)!important;
  margin:0 auto!important;
  box-sizing:border-box!important;
}

/* Native class dropdown only — no class pills on any breakpoint. */
#signup .kidclass-native-select{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:48px!important;
  box-sizing:border-box!important;
  appearance:auto!important;
  -webkit-appearance:auto!important;
  background:#fff!important;
  color:#171717!important;
  border:3px solid #171717!important;
  border-radius:12px 9px 13px 10px!important;
  box-shadow:4px 4px 0 #171717!important;
  padding:11px 38px 11px 13px!important;
  font-family:'Nunito',sans-serif!important;
  font-weight:800!important;
  font-size:14px!important;
  cursor:pointer!important;
}
#signup .kidclass-chips{display:none!important;}

/* Compact plan bubbles: all three always fit inside the phone. */
#signup .plan-toggle{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
  margin:0 0 15px!important;
  padding:0!important;
  box-sizing:border-box!important;
}
#signup .plan-toggle .plan-opt{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding:8px 2px 7px!important;
  margin:0!important;
  font-size:10px!important;
  line-height:1.05!important;
  border-width:3px!important;
  border-radius:11px 8px 12px 9px!important;
  box-shadow:4px 4px 0 #171717!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
#signup .plan-toggle .plan-opt .p-amt{
  font-size:14px!important;
  line-height:1.05!important;
  margin-top:2px!important;
}

/* Each form question becomes its own WhatsApp-style message bubble. */
#signup .setup-form-label{
  width:fit-content!important;
  max-width:92%!important;
  box-sizing:border-box!important;
  padding:9px 12px 9px 9px!important;
  margin:0 0 11px 0!important;
  border:0!important;
  border-radius:5px 15px 15px 15px!important;
  background:#fff!important;
  box-shadow:0 2px 4px rgba(0,0,0,.10)!important;
  align-items:center!important;
}
#signup .setup-form-label:nth-of-type(2){
  margin-left:auto!important;
  border-radius:15px 5px 15px 15px!important;
  background:#DCF8C6!important;
}
#signup .setup-form-label.plan-step-label{
  margin-left:0!important;
  background:#fff!important;
}
#signup .setup-form-label > span{
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
}
#signup .setup-form-label strong{font-size:14px!important;}
#signup .setup-form-label small{font-size:10px!important;}

/* The actual form card is an invisible chat surface, not a second box. */
#signup .signup-wa-body .form-card{
  background:transparent!important;
  box-shadow:none!important;
  padding:8px 5px 16px!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
}
#signup .signup-wa-body .form-card::after{display:none!important;}
#signup .signup-wa-body{padding:10px 7px 14px!important;overflow:visible!important;}
#signup .signup-wa-phone{overflow:hidden!important;}

/* Inputs remain comic-bordered, but don't create horizontal overflow. */
#signup .form-field input,
#signup .form-field select,
#signup .kidclass-native-select{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#signup .form-row{gap:8px!important;}

@media(max-width:780px){
  #signup .signup-grid-form-only{width:100%!important;max-width:100%!important;}
  #signup .signup-wa-phone{
    width:calc(100vw - 28px)!important;
    max-width:560px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:6px!important;
    border-radius:27px!important;
    box-sizing:border-box!important;
  }
  #signup .signup-wa-head{padding:9px 11px!important;min-height:60px!important;}
  #signup .signup-wa-body{padding:8px 3px 12px!important;}
  #signup .signup-wa-body .form-card{padding:7px 3px 15px!important;}
  #signup .plan-toggle{gap:4px!important;margin-bottom:13px!important;}
  #signup .plan-toggle .plan-opt{padding:7px 1px 6px!important;font-size:9.5px!important;}
  #signup .plan-toggle .plan-opt .p-amt{font-size:13px!important;}
  #signup .setup-form-label{max-width:96%!important;padding:8px 10px 8px 8px!important;}
  #signup .setup-form-label strong{font-size:13px!important;}
  #signup .form-field{margin-bottom:11px!important;}
  #signup .form-field input,
  #signup .kidclass-native-select{font-size:13px!important;padding:10px 11px!important;min-height:45px!important;}
}
@media(max-width:380px){
  #signup .signup-wa-phone{width:calc(100vw - 18px)!important;padding:5px!important;}
  #signup .signup-wa-body .form-card{padding-left:2px!important;padding-right:2px!important;}
  #signup .plan-toggle{gap:3px!important;}
  #signup .plan-toggle .plan-opt{font-size:9px!important;box-shadow:3px 3px 0 #171717!important;}
  #signup .plan-toggle .plan-opt .p-amt{font-size:12px!important;}
}

/* Exact brand icon in the two WhatsApp headers; no decorative underline. */
.how-wa-phone-avatar img,
.signup-wa-avatar img{
  width:100%!important;height:100%!important;object-fit:contain!important;
  display:block!important;
}

/* ===== FINAL SUBSCRIPTION WHATSAPP FIT — v20 ===== */
/* One consistent phone geometry on desktop + mobile; only the outer width scales to the viewport. */
#signup .signup-section,
#signup .signup-grid,
#signup .signup-grid-form-only,
#signup .signup-wa-phone,
#signup .signup-wa-body,
#signup .signup-wa-body .form-card,
#signup #signupForm {
  box-sizing:border-box!important;
  min-width:0!important;
}

#signup .signup-section{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
}

#signup .signup-grid-form-only{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  display:flex!important;
  justify-content:center!important;
}

#signup .signup-wa-phone{
  width:min(560px, calc(100vw - 32px))!important;
  max-width:560px!important;
  height:760px!important;
  margin:0 auto!important;
  padding:7px!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  background:#171717!important;
  border:0!important;
  border-radius:31px!important;
  box-shadow:7px 9px 0 #171717!important;
}

#signup .signup-wa-head{
  flex:0 0 66px!important;
  min-height:66px!important;
  width:100%!important;
  box-sizing:border-box!important;
  padding:10px 14px!important;
  border-radius:24px 24px 7px 7px!important;
  background:#075E54!important;
}

#signup .signup-wa-body{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  margin:0!important;
  padding:12px 10px 18px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-radius:7px 7px 24px 24px!important;
  background:#EDE5D8!important;
  background-image:radial-gradient(circle at 10px 10px,rgba(30,27,21,.035) 1px,transparent 1.5px)!important;
  background-size:20px 20px!important;
  scrollbar-width:thin;
}

#signup .signup-wa-intro{
  display:block!important;
  width:fit-content!important;
  max-width:94%!important;
  margin:0 0 11px 0!important;
  padding:10px 13px!important;
  box-sizing:border-box!important;
  background:#fff!important;
  border:0!important;
  border-radius:5px 16px 16px 16px!important;
  box-shadow:0 2px 4px rgba(0,0,0,.10)!important;
  font-size:13px!important;
  line-height:1.25!important;
}

/* The form is the chat canvas — never another card/frame. */
#signup .signup-wa-body .form-card{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

#signup .signup-wa-body .form-card::after{display:none!important;}
#signup #signupForm{width:100%!important;margin:0!important;padding:0!important;}

/* Every step/question is an independent WhatsApp message bubble. */
#signup .setup-form-label{
  display:flex!important;
  width:fit-content!important;
  max-width:92%!important;
  margin:0 0 10px 0!important;
  padding:9px 12px 9px 9px!important;
  box-sizing:border-box!important;
  align-items:center!important;
  gap:9px!important;
  border:0!important;
  border-radius:5px 16px 16px 16px!important;
  background:#fff!important;
  box-shadow:0 2px 4px rgba(0,0,0,.10)!important;
}
#signup .setup-form-label:nth-of-type(2){
  margin-left:auto!important;
  background:#DCF8C6!important;
  border-radius:16px 5px 16px 16px!important;
}
#signup .setup-form-label.plan-step-label{
  margin-left:0!important;
  background:#FFF7D9!important;
}
#signup .setup-form-label > span{
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  background:#FFCA28!important;
  color:#171717!important;
  font-weight:900!important;
}
#signup .setup-form-label:nth-of-type(2) > span{background:#E7F0E8!important;}
#signup .setup-form-label strong{font-size:14px!important;line-height:1.15!important;}
#signup .setup-form-label small{display:block!important;margin-top:2px!important;font-size:10px!important;color:#667781!important;}

/* Plans are compact chat-action bubbles and cannot overflow the phone. */
#signup .plan-toggle{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
  margin:0 0 13px!important;
  padding:0!important;
  box-sizing:border-box!important;
}
#signup .plan-toggle .plan-opt{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:62px!important;
  margin:0!important;
  padding:5px 2px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  border:3px solid #171717!important;
  border-radius:12px 9px 13px 10px!important;
  box-shadow:4px 4px 0 #171717!important;
  font-size:11px!important;
  line-height:1.05!important;
}
#signup .plan-toggle .plan-opt .p-amt{
  display:block!important;
  margin-top:3px!important;
  font-size:15px!important;
  line-height:1!important;
}
#signup .plan-toggle .plan-opt .p-badge{display:none!important;}

/* Each actual question/input area has its own alternating chat bubble. */
#signup .form-row{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  margin:0!important;
}
#signup .form-field{
  min-width:0!important;
  margin:0 0 11px!important;
}
#signup .form-field label{
  display:block!important;
  margin:0 0 5px!important;
  font-size:10px!important;
  line-height:1.1!important;
  letter-spacing:.02em!important;
}
#signup .form-field input,
#signup .form-field select,
#signup .kidclass-native-select{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  height:46px!important;
  box-sizing:border-box!important;
  padding:9px 11px!important;
  font-size:13px!important;
  border:3px solid #171717!important;
  border-radius:11px 8px 12px 9px!important;
  box-shadow:3px 3px 0 #171717!important;
  background:#fff!important;
  color:#171717!important;
}
#signup .kidclass-native-select{
  appearance:auto!important;
  -webkit-appearance:auto!important;
  cursor:pointer!important;
  font-weight:800!important;
}

#signup #formScreen2{
  width:100%!important;
  min-width:0!important;
}
#signup #formScreen2 > .form-field,
#signup #formScreen2 > label,
#signup #formScreen2 > .promo-code-box,
#signup #formScreen2 > .form-submit,
#signup #formScreen2 > .form-fineprint{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}

#signup #formScreen2 > .form-field,
#signup #formScreen2 > label{
  padding:9px 11px!important;
  border-radius:5px 16px 16px 16px!important;
  background:#fff!important;
  box-shadow:0 2px 4px rgba(0,0,0,.08)!important;
}
#signup #formScreen2 > .form-field label{background:transparent!important;box-shadow:none!important;padding:0!important;}

#signup .promo-code-box{
  display:block!important;
  margin:9px 0 13px!important;
  padding:11px!important;
  border:0!important;
  border-radius:16px 5px 16px 16px!important;
  background:#FFF7D9!important;
  box-shadow:0 2px 4px rgba(0,0,0,.08)!important;
}
#signup .promo-code-box > div:last-child{min-width:0!important;}
#signup #promoCode{min-width:0!important;width:100%!important;box-sizing:border-box!important;}
#signup #applyPromoBtn{flex:0 0 auto!important;white-space:nowrap!important;}

#signup .signup-wa-body .form-submit{
  width:100%!important;
  min-width:0!important;
  min-height:52px!important;
  padding:12px 10px!important;
  border:3px solid #171717!important;
  border-radius:13px 10px 14px 9px!important;
  background:#F04A45!important;
  color:#fff!important;
  box-shadow:5px 5px 0 #171717!important;
  font-size:15px!important;
}

@media(max-width:560px){
  #signup .signup-wa-phone{
    width:calc(100vw - 24px)!important;
    max-width:none!important;
    height:760px!important;
    padding:6px!important;
    border-radius:29px!important;
  }
  #signup .signup-wa-head{flex-basis:62px!important;min-height:62px!important;padding:8px 11px!important;}
  #signup .signup-wa-avatar{width:38px!important;height:38px!important;flex-basis:38px!important;}
  #signup .signup-wa-head strong{font-size:15px!important;}
  #signup .signup-wa-head small{font-size:9px!important;}
  #signup .signup-wa-body{padding:10px 7px 18px!important;}
  #signup .signup-wa-intro{font-size:12px!important;max-width:96%!important;}
  #signup .setup-form-label{max-width:94%!important;}
  #signup .plan-toggle{gap:4px!important;}
  #signup .plan-toggle .plan-opt{height:60px!important;font-size:10px!important;box-shadow:3px 3px 0 #171717!important;}
  #signup .plan-toggle .plan-opt .p-amt{font-size:14px!important;}
}

@media(max-width:390px){
  #signup .signup-wa-phone{width:calc(100vw - 16px)!important;padding:5px!important;}
  #signup .signup-wa-body{padding-left:6px!important;padding-right:6px!important;}
  #signup .form-row{grid-template-columns:1fr!important;gap:0!important;}
  #signup .plan-toggle{gap:3px!important;}
  #signup .plan-toggle .plan-opt{height:58px!important;font-size:9px!important;padding-left:1px!important;padding-right:1px!important;}
  #signup .plan-toggle .plan-opt .p-amt{font-size:13px!important;}
  #signup .setup-form-label strong{font-size:13px!important;}
}

/* ================================================================
   FINAL WHATSAPP SUBSCRIPTION UI
   One stable geometry across desktop + mobile. The phone scales,
   while the internal chat design stays the same.
   ================================================================ */
#signup .signup-section{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
#signup .signup-grid,
#signup .signup-grid-form-only{display:flex!important;justify-content:center!important;}
#signup .signup-wa-phone{
  width:min(390px, calc(100vw - 28px))!important;
  height:720px!important;
  max-width:390px!important;
  margin:0 auto!important;
  padding:6px!important;
  box-sizing:border-box!important;
  border:6px solid #171717!important;
  border-radius:30px!important;
  background:#171717!important;
  box-shadow:8px 8px 0 #171717!important;
  overflow:hidden!important;
  position:relative!important;
}
#signup .signup-wa-head{
  height:62px!important;
  min-height:62px!important;
  box-sizing:border-box!important;
  padding:8px 12px!important;
  background:#075E54!important;
  border:0!important;
  border-radius:21px 21px 0 0!important;
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
#signup .signup-wa-avatar{
  width:40px!important;height:40px!important;flex:0 0 40px!important;
  border:0!important;background:#fff!important;border-radius:50%!important;
  overflow:hidden!important;display:grid!important;place-items:center!important;
}
#signup .signup-wa-avatar img{
  width:34px!important;height:34px!important;display:block!important;
  object-fit:contain!important;
}
#signup .signup-wa-head > div{min-width:0!important;display:flex!important;flex-direction:column!important;}
#signup .signup-wa-head strong{font-size:16px!important;line-height:1.05!important;}
#signup .signup-wa-head small{font-size:9.5px!important;opacity:.8!important;margin-top:3px!important;white-space:nowrap!important;}
#signup .signup-wa-menu{margin-left:auto!important;font-size:24px!important;line-height:1!important;opacity:.9!important;}
#signup .signup-wa-body{
  height:calc(100% - 62px)!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  box-sizing:border-box!important;
  padding:12px 10px 28px!important;
  background:#ECE5D8!important;
  scrollbar-width:thin!important;
  overscroll-behavior:contain!important;
}
#signup .signup-wa-body::-webkit-scrollbar{width:5px!important;}
#signup .signup-wa-body::-webkit-scrollbar-thumb{background:rgba(23,23,23,.22)!important;border-radius:9px!important;}
#signup .signup-wa-intro{
  width:max-content!important;max-width:92%!important;box-sizing:border-box!important;
  margin:0 0 12px 0!important;padding:11px 14px!important;
  background:#fff!important;color:#171717!important;
  border:0!important;border-radius:5px 17px 17px 17px!important;
  box-shadow:0 2px 4px rgba(0,0,0,.10)!important;
  font-size:12.5px!important;font-weight:800!important;line-height:1.35!important;
}
#signup .signup-wa-body .form-card{
  width:100%!important;max-width:100%!important;box-sizing:border-box!important;
  padding:0!important;margin:0!important;background:transparent!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
}
#signup .signup-wa-body .form-card::before,
#signup .signup-wa-body .form-card::after{display:none!important;}
#signup .signup-wa-body form{width:100%!important;box-sizing:border-box!important;}

/* Each question is a WhatsApp message bubble. */
#signup .setup-form-label{
  width:max-content!important;max-width:94%!important;box-sizing:border-box!important;
  min-height:48px!important;margin:0 0 9px 0!important;padding:9px 12px 9px 9px!important;
  border:0!important;border-radius:5px 17px 17px 17px!important;
  box-shadow:0 2px 4px rgba(0,0,0,.10)!important;
  display:flex!important;align-items:center!important;gap:9px!important;
}
#signup .setup-form-label.plan-step-label{background:#FFF4C7!important;}
#signup .setup-form-label:nth-of-type(2){background:#E3F2DC!important;}
#signup .setup-form-label > span{
  width:30px!important;height:30px!important;flex:0 0 30px!important;
  border-radius:50%!important;display:grid!important;place-items:center!important;
  background:#FFD62E!important;color:#171717!important;font-size:13px!important;
}
#signup .setup-form-label:nth-of-type(2) > span{background:#9AD69A!important;}
#signup .setup-form-label:nth-of-type(3) > span{background:#8ED0F0!important;}
#signup .setup-form-label strong{font-size:13.5px!important;line-height:1.15!important;display:block!important;}
#signup .setup-form-label small{font-size:9.5px!important;line-height:1.2!important;color:#667781!important;margin-top:3px!important;display:block!important;}

/* Plans are compact WhatsApp quick replies. */
#signup .plan-toggle{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  width:100%!important;gap:5px!important;margin:0 0 12px!important;padding:0!important;
}
#signup .plan-toggle .plan-opt{
  min-width:0!important;width:100%!important;max-width:none!important;
  height:57px!important;padding:6px 1px!important;margin:0!important;
  box-sizing:border-box!important;overflow:hidden!important;
  border:2.5px solid #171717!important;border-radius:12px 9px 12px 9px!important;
  box-shadow:3px 3px 0 #171717!important;background:#fff!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex-direction:column!important;font-size:10.5px!important;font-weight:800!important;
  line-height:1.05!important;white-space:nowrap!important;
}
#signup .plan-toggle .plan-opt.active{background:#FF3F3A!important;color:#fff!important;}
#signup .plan-toggle .plan-opt .p-amt{font-size:14px!important;margin-top:3px!important;line-height:1!important;}

/* Child details: labels are tiny chat prompts; inputs remain clean reply bubbles. */
#signup .form-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;width:100%!important;}
#signup .form-field{min-width:0!important;margin:0 0 10px!important;}
#signup .form-field label{
  display:block!important;margin:0 0 4px!important;padding-left:4px!important;
  font-size:9.5px!important;line-height:1.1!important;font-weight:800!important;
  text-transform:uppercase!important;color:#667781!important;
}
#signup .form-field input,
#signup .form-field select,
#signup .kidclass-native-select{
  width:100%!important;max-width:100%!important;min-width:0!important;height:44px!important;
  box-sizing:border-box!important;padding:8px 11px!important;
  border:2.5px solid #171717!important;border-radius:11px 8px 12px 9px!important;
  box-shadow:3px 3px 0 #171717!important;background:#fff!important;color:#171717!important;
  font-size:13px!important;font-weight:600!important;
}
#signup .kidclass-native-select{appearance:auto!important;-webkit-appearance:auto!important;cursor:pointer!important;}

/* Step 3 gets its own blue chat bubble. */
#signup #formScreen2 > .setup-form-label{background:#DDF1FA!important;}
#signup #formScreen2 > .form-field:first-of-type,
#signup #formScreen2 > label{
  width:100%!important;box-sizing:border-box!important;background:#fff!important;
  border:0!important;border-radius:5px 17px 17px 17px!important;
  padding:10px!important;margin:0 0 10px!important;
  box-shadow:0 2px 4px rgba(0,0,0,.09)!important;
}
#signup #formScreen2 > .form-field:first-of-type > label{padding:0!important;margin-bottom:4px!important;background:transparent!important;box-shadow:none!important;}
#signup #formScreen2 > label{font-size:11px!important;line-height:1.35!important;padding:10px!important;}
#signup #formScreen2 > label input{width:17px!important;height:17px!important;accent-color:#25D366!important;}

#signup .promo-code-box{
  width:100%!important;box-sizing:border-box!important;margin:8px 0 12px!important;
  padding:10px!important;background:#F5E8CE!important;border:0!important;
  border-radius:5px 17px 17px 17px!important;box-shadow:0 2px 4px rgba(0,0,0,.08)!important;
}
#signup .promo-code-box > div:first-child{font-size:11px!important;margin-bottom:6px!important;}
#signup .promo-code-box > div:nth-child(2){display:flex!important;gap:6px!important;min-width:0!important;}
#signup #promoCode{height:38px!important;min-width:0!important;font-size:12px!important;border:2px solid #171717!important;border-radius:9px!important;}
#signup #applyPromoBtn{height:38px!important;padding:7px 11px!important;border-radius:9px!important;background:#E96F51!important;color:#fff!important;font-size:11px!important;}
#signup .signup-wa-body .form-submit{
  width:100%!important;height:50px!important;min-height:50px!important;
  box-sizing:border-box!important;margin:3px 0 0!important;padding:10px!important;
  border:3px solid #171717!important;border-radius:12px 9px 13px 10px!important;
  box-shadow:4px 4px 0 #171717!important;background:#FF3F3A!important;color:#fff!important;
  font-size:15px!important;font-weight:900!important;
}
#signup .signup-wa-body .form-submit:active{transform:translate(3px,3px)!important;box-shadow:1px 1px 0 #171717!important;}
#signup .trial-checkout-note{font-size:10px!important;line-height:1.4!important;text-align:center!important;margin:10px 8px 0!important;color:#667781!important;}

/* Keep one phone geometry everywhere; only the outer width changes to fit the viewport. */
@media (max-width:560px){
  #signup .signup-wa-phone{width:calc(100vw - 24px)!important;height:720px!important;max-width:390px!important;}
  #signup .signup-wa-body{padding:12px 8px 28px!important;}
  #signup .form-row{grid-template-columns:1fr 1fr!important;gap:7px!important;}
  #signup .plan-toggle{gap:4px!important;}
  #signup .plan-toggle .plan-opt{height:55px!important;font-size:10px!important;box-shadow:3px 3px 0 #171717!important;}
  #signup .plan-toggle .plan-opt .p-amt{font-size:13px!important;}
}
@media (max-width:350px){
  #signup .signup-wa-phone{width:calc(100vw - 16px)!important;}
  #signup .signup-wa-body{padding-left:6px!important;padding-right:6px!important;}
  #signup .plan-toggle{gap:3px!important;}
  #signup .plan-toggle .plan-opt{font-size:9px!important;padding-left:0!important;padding-right:0!important;}
  #signup .plan-toggle .plan-opt .p-amt{font-size:12px!important;}
  #signup .setup-form-label strong{font-size:12.5px!important;}
}

/* Preserve the Why image's real 3:2 proportions; no glow or filter. */
.why-photo-img{
  width:100%!important;height:auto!important;aspect-ratio:3 / 2!important;
  object-fit:contain!important;display:block!important;filter:none!important;
  box-shadow:none!important;transform:none!important;
}


/* ================================================================
   V21 — COMPLETE WHATSAPP FORM: ALL MESSAGES VISIBLE ON LOAD
   The phone is a self-contained chat transcript. It grows to fit
   the complete form; no hidden step, no auto-scroll, no chips.
   ================================================================ */
#signup .signup-section,
#signup .signup-grid,
#signup .signup-grid-form-only { overflow:visible!important; }

#signup .signup-wa-phone{
  width:min(430px, calc(100vw - 24px))!important;
  max-width:430px!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  padding:6px!important;
  border:6px solid #171717!important;
  border-radius:30px!important;
  background:#171717!important;
  box-shadow:8px 8px 0 #171717!important;
}
#signup .signup-wa-head{
  flex:0 0 62px!important;
  height:62px!important;
  min-height:62px!important;
}
#signup .signup-wa-body{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  padding:14px 12px 18px!important;
  background:#EDE7DC!important;
}
#signup .signup-wa-intro{
  width:fit-content!important;
  max-width:94%!important;
  margin:0 0 12px!important;
  background:#fff!important;
  border-radius:5px 17px 17px 17px!important;
}

/* No collapsed screen: the whole conversation is present immediately. */
#signup #formScreen1,
#signup #formScreen2{
  display:block!important;
  visibility:visible!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  margin-top:0!important;
}

/* Each step heading is a distinct incoming WhatsApp message. */
#signup .setup-form-label{
  width:fit-content!important;
  max-width:96%!important;
  margin:12px 0 8px!important;
  padding:9px 12px 9px 9px!important;
  border:0!important;
  box-shadow:0 2px 5px rgba(0,0,0,.12)!important;
  border-radius:5px 18px 18px 18px!important;
}
#signup .setup-form-label.plan-step-label{background:#FFF1B8!important;}
#signup #formScreen1 > .setup-form-label{background:#DFF0D5!important;}
#signup #formScreen2 > .setup-form-label{background:#D8EEF8!important;}

/* Plans are WhatsApp quick-reply bubbles and never overflow the phone. */
#signup .plan-toggle{
  width:100%!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
  margin:0 0 12px!important;
}
#signup .plan-toggle .plan-opt{
  width:100%!important;
  min-width:0!important;
  height:54px!important;
  padding:5px 2px!important;
  border:2.5px solid #171717!important;
  border-radius:12px 9px 12px 9px!important;
  box-shadow:3px 3px 0 #171717!important;
  font-size:10px!important;
  line-height:1.05!important;
}
#signup .plan-toggle .plan-opt .p-amt{font-size:13px!important;margin-top:3px!important;}

/* Every input is its own WhatsApp-style reply bubble. */
#signup .form-row{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  width:100%!important;
}
#signup .form-field{
  min-width:0!important;
  margin:0 0 9px!important;
  padding:8px 9px 10px!important;
  background:#fff!important;
  border-radius:5px 17px 17px 17px!important;
  box-shadow:0 2px 5px rgba(0,0,0,.10)!important;
}
#signup .form-field label{
  margin:0 0 4px!important;
  padding:0!important;
  color:#667781!important;
  font-size:9px!important;
}
#signup .form-field input,
#signup .form-field select,
#signup .kidclass-native-select{
  height:42px!important;
  min-height:42px!important;
  padding:7px 10px!important;
  border:2.5px solid #171717!important;
  border-radius:10px 7px 11px 8px!important;
  box-shadow:3px 3px 0 #171717!important;
  font-size:12.5px!important;
}

/* Step 3 elements each become separate message bubbles. */
#signup #formScreen2 > .form-field:first-of-type,
#signup #formScreen2 > label,
#signup .promo-code-box{
  width:100%!important;
  box-sizing:border-box!important;
  margin:0 0 9px!important;
  background:#fff!important;
  border:0!important;
  border-radius:5px 17px 17px 17px!important;
  box-shadow:0 2px 5px rgba(0,0,0,.10)!important;
}
#signup #formScreen2 > .form-field:first-of-type{padding:8px 9px 10px!important;}
#signup #formScreen2 > .form-field:first-of-type > label{
  padding:0!important;margin:0 0 4px!important;background:transparent!important;box-shadow:none!important;
}
#signup #formScreen2 > label{
  display:flex!important;align-items:center!important;
  padding:10px 11px!important;
  font-size:10.5px!important;
  line-height:1.3!important;
}
#signup #formScreen2 > label input{flex:0 0 auto!important;}
#signup .promo-code-box{
  padding:10px 11px!important;
  background:#FFF1C9!important;
}
#signup .promo-code-box > div:nth-child(2){display:flex!important;gap:6px!important;align-items:center!important;}
#signup #promoCode{height:38px!important;min-width:0!important;flex:1 1 auto!important;}
#signup #applyPromoBtn{flex:0 0 auto!important;height:38px!important;}

/* CTA is the final message in the conversation. */
#signup .signup-wa-body .form-submit{
  width:100%!important;
  height:50px!important;
  min-height:50px!important;
  margin:2px 0 0!important;
  border:3px solid #171717!important;
  border-radius:12px 9px 13px 10px!important;
  box-shadow:4px 4px 0 #171717!important;
  background:#FF3F3A!important;
}
#signup .trial-checkout-note{
  margin:9px 8px 0!important;
  font-size:10px!important;
  line-height:1.35!important;
}

@media(max-width:560px){
  #signup .signup-wa-phone{width:calc(100vw - 20px)!important;max-width:none!important;}
  #signup .signup-wa-body{padding:12px 8px 16px!important;}
  #signup .form-row{grid-template-columns:1fr!important;gap:0!important;}
  #signup .form-field{margin-bottom:8px!important;}
  #signup .plan-toggle{gap:4px!important;}
  #signup .plan-toggle .plan-opt{height:52px!important;font-size:9.5px!important;}
  #signup .plan-toggle .plan-opt .p-amt{font-size:12.5px!important;}
}
@media(max-width:350px){
  #signup .signup-wa-phone{width:calc(100vw - 14px)!important;}
  #signup .signup-wa-body{padding-left:6px!important;padding-right:6px!important;}
  #signup .plan-toggle{gap:3px!important;}
  #signup .plan-toggle .plan-opt{font-size:8.5px!important;padding-left:0!important;padding-right:0!important;}
  #signup .plan-toggle .plan-opt .p-amt{font-size:11.5px!important;}
}

/* ===== FINAL WHATSAPP SUBSCRIPTION BUBBLE LAYOUT ===== */
.signup-wa-phone{width:min(100%,620px)!important;padding:8px!important;border-radius:30px!important;}
.signup-wa-head{border-radius:21px 21px 8px 8px!important;}
.signup-wa-body{padding:12px 8px 14px!important;border-radius:8px 8px 21px 21px!important;}
.signup-wa-body-full{overflow:visible!important;}
.wa-signup-form{display:flex;flex-direction:column;gap:7px;width:100%;}
.wa-question{align-self:flex-start;max-width:88%;background:#fff;color:#26231f;border-radius:5px 15px 15px 15px;padding:8px 11px;font-size:12px;font-weight:850;line-height:1.3;box-shadow:0 1px 2px rgba(0,0,0,.12);border:1px solid rgba(30,27,21,.05);}
.wa-answer{align-self:flex-end;width:94%;max-width:94%;background:#DCF8C6;color:#182218;border-radius:15px 5px 15px 15px;padding:9px 10px;box-shadow:0 1px 2px rgba(0,0,0,.12);}
.wa-answer .form-row{gap:7px!important;margin:0!important;}
.wa-answer .form-field{margin:0 0 7px!important;min-width:0;}
.wa-answer .form-field:last-child{margin-bottom:0!important;}
.wa-answer .form-field label{font-size:10px!important;font-weight:850!important;margin:0 0 4px!important;color:#30402f!important;}
.wa-answer .form-field input,.wa-answer .form-field select{width:100%!important;min-width:0!important;height:35px!important;padding:7px 9px!important;border:2px solid #1e1b15!important;border-radius:9px!important;background:#fff!important;box-shadow:2px 2px 0 #1e1b15!important;font-size:12px!important;box-sizing:border-box!important;}
.wa-plan-bubble{padding:8px!important;}
.wa-plan-bubble .plan-toggle{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;margin:0!important;}
.wa-plan-bubble .plan-opt{min-width:0!important;width:auto!important;padding:7px 3px!important;border:2px solid #1e1b15!important;border-radius:10px!important;background:#fff!important;color:#1e1b15!important;box-shadow:2px 2px 0 #1e1b15!important;font-size:11px!important;line-height:1.05!important;white-space:nowrap!important;text-align:center!important;}
.wa-plan-bubble .plan-opt.active{background:#E96F51!important;color:#fff!important;}
.wa-plan-bubble .plan-opt .p-amt{display:block!important;font-size:10px!important;margin-top:2px!important;}
.wa-check-row{display:flex!important;align-items:flex-start!important;gap:6px!important;margin:2px 0 8px!important;font-size:10px!important;font-weight:800!important;line-height:1.25!important;cursor:pointer!important;}
.wa-check-row input{width:14px!important;height:14px!important;flex:0 0 14px!important;margin:0!important;accent-color:#075E54;}
.promo-code-box{margin:5px 0 8px!important;padding:7px 8px!important;border:2px solid #1e1b15!important;border-radius:10px!important;background:#f8f3e9!important;box-shadow:2px 2px 0 #1e1b15!important;}
.promo-title{font-size:10px!important;font-weight:850!important;margin-bottom:5px!important;}
.promo-row{display:flex!important;gap:5px!important;align-items:center!important;}
.promo-row input{height:31px!important;min-width:0!important;flex:1!important;padding:6px 8px!important;border:2px solid #1e1b15!important;border-radius:8px!important;font-size:11px!important;box-shadow:1px 1px 0 #1e1b15!important;text-transform:uppercase!important;}
.promo-row button{height:31px!important;padding:5px 9px!important;border:2px solid #1e1b15!important;border-radius:8px!important;background:#E96F51!important;color:#fff!important;box-shadow:2px 2px 0 #1e1b15!important;font-size:10px!important;font-weight:850!important;}
.form-submit{width:100%!important;min-height:38px!important;margin:2px 0 0!important;border:2px solid #1e1b15!important;border-radius:11px!important;background:#E96F51!important;color:#fff!important;box-shadow:3px 3px 0 #1e1b15!important;font-weight:900!important;font-size:13px!important;}
.form-submit:active,.promo-row button:active,.wa-plan-bubble .plan-opt:active{transform:translate(2px,2px)!important;box-shadow:1px 1px 0 #1e1b15!important;}
.signup-wa-avatar{border:0!important;box-shadow:none!important;}
.signup-wa-avatar:after{display:none!important;}
.signup-wa-head small{margin-top:0!important;}
@media(max-width:600px){
 .signup-grid-form-only{max-width:100%!important;}
 .signup-wa-phone{width:100%!important;max-width:100%!important;}
 .signup-wa-body{padding-left:5px!important;padding-right:5px!important;}
 .wa-answer{width:96%;max-width:96%;}
 .wa-question{max-width:91%;}
 .wa-answer .form-row{grid-template-columns:1fr 1fr!important;display:grid!important;}
}
@media(max-width:380px){
 .signup-wa-phone{padding:6px!important;border-width:2px!important;border-radius:25px!important;}
 .signup-wa-head{padding:8px 10px!important;min-height:55px!important;}
 .signup-wa-avatar{width:34px!important;height:34px!important;flex-basis:34px!important;}
 .signup-wa-body{padding:9px 3px 11px!important;}
 .wa-answer{width:97%!important;max-width:97%!important;padding:7px!important;}
 .wa-question{font-size:11px!important;padding:7px 9px!important;}
 .wa-answer .form-field input,.wa-answer .form-field select{height:32px!important;font-size:11px!important;}
 .wa-plan-bubble .plan-opt{font-size:10px!important;padding:6px 1px!important;}
 .wa-plan-bubble .plan-opt .p-amt{font-size:9px!important;}
}