/* ============================================================
   RUMAHATI, theme layer
   Loaded LAST on public pages so it wins over each page's inline
   <style>. Layout language follows the "Talking Minds" template:
   white canvas, pale-blue section bands, bold rounded sans headings,
   24px cards, pill buttons with an arrow, photo framed by offset blocks.
   Palette: Carbon Black / True Cobalt / Cyan / Blue Bell / Alice Blue.
   Weighting: Alice Blue + Blue Bell carry the brand (surfaces, buttons,
   bands). Cyan is the accent (decor, hovers, highlights, never small
   text on white, contrast is too low). Cobalt is emphasis only
   (headline highlight, deep gradients).
   ============================================================ */
:root{
  --rh-carbon:#1D1D1D;
  --rh-cobalt:#00258B;
  --rh-cobalt-deep:#001A63;
  --rh-cyan:#00B4D8;
  --rh-blue:#4090CD;
  --rh-blue-dark:#2F78B3;   /* Blue Bell hover / pressed */
  --rh-alice:#E6F4FF;
  --rh-white:#FFFFFF;
  --rh-body:#4A5563;
  --rh-muted:#5F6B7A;
  --rh-line:#D5E4F2;
  --rh-radius:24px;
  --rh-shadow:0 1px 2px 1px rgba(0,37,139,.08);
  --rh-shadow-lg:0 20px 40px rgba(0,37,139,.08);
  --rh-ease:cubic-bezier(.25,1,.5,1);
  --rh-head:'Nunito',system-ui,sans-serif;
  --rh-text:'Open Sans',system-ui,sans-serif;

  /* legacy tokens used by the page-level CSS, remapped */
  --charcoal:var(--rh-carbon);
  --forest:var(--rh-blue);
  --sage:var(--rh-blue);
  --accent:var(--rh-blue);
  --muted:var(--rh-muted);
  --bg:var(--rh-alice);
  --paper:var(--rh-white);
  --sage-pale:var(--rh-alice);
  --accent-pale:var(--rh-alice);
  --forest-pale:#DBE9F7;
  --teal:var(--rh-blue);
  --teal-pale:var(--rh-alice);
}

/* ── base ── */
body{
  font-family:var(--rh-text);
  color:var(--rh-body);
  background:var(--rh-white);
  background-attachment:scroll;
}
h1,h2,h3,h4,
.section-title,.waitlist-title,.auth-title,.intro-benefits-title,.session-steps-title,
.intro-myth-title,.article-title,.hyp-earnings,.fho-title{
  font-family:var(--rh-head);
  color:var(--rh-carbon);
  font-weight:800;
  letter-spacing:-.01em;
}
.hero-mission,.testi-text,.iceberg-caption{font-style:normal;}
::selection{background:var(--rh-cyan);color:#fff;}

/* The template is a clean white canvas, the sky/cloud/orb layer goes. */
.bg-wrap{display:none !important;}

/* ── logo ── */
/* Original stacked lockup (icon over RUMAHATI + tagline), in the supplied Blue Bell / white */
.brand-logo{display:block;height:64px;width:auto;}
.footer-logo .brand-logo{height:104px;}
@media(max-width:560px){.brand-logo{height:52px;}}

/* ── nav ── */
nav,#navbar{
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  padding-top:14px;padding-bottom:14px;
}
nav.scrolled{border-bottom-color:var(--rh-line);box-shadow:0 6px 24px rgba(0,37,139,.05);}
.nav-center a{color:var(--rh-carbon);font-weight:600;font-family:var(--rh-text);}
.nav-center a:hover{color:var(--rh-blue-dark);background:var(--rh-alice);}
.nav-login{border-color:var(--rh-line);color:var(--rh-blue-dark);}
.nav-find-hyp,.nav-cta{background:var(--rh-blue);border-radius:100px;}
.nav-find-hyp:hover,.nav-cta:hover{background:var(--rh-blue-dark);}
.hamburger span{background:var(--rh-blue);}
.mobile-menu{background:rgba(255,255,255,.98);}
.mobile-menu a{font-family:var(--rh-head);font-weight:700;}
.lang-btn.active{background:var(--rh-blue);}

/* ── section heading pattern ── */
.section-tag{
  font-family:var(--rh-text);
  font-weight:700;
  font-size:14px;
  letter-spacing:.14em;
  color:var(--rh-blue);
}
.section-title{font-size:clamp(30px,3.6vw,46px);line-height:1.15;}
.section-sub{color:var(--rh-muted);font-weight:400;}

/* ── buttons: template pill + arrow ── */
.btn-primary,.btn-forest,.btn-accent{
  background:var(--rh-blue) !important;
  color:#fff !important;
  border-radius:100px;
  font-family:var(--rh-head);
  font-weight:700;
  box-shadow:none !important;
  transition:background .4s var(--rh-ease),transform .4s var(--rh-ease);
}
.btn-primary:hover,.btn-forest:hover,.btn-accent:hover{background:var(--rh-blue-dark) !important;transform:translateY(-2px);}
.btn-outline,.btn-forest-ol{
  background:transparent;
  color:var(--rh-blue-dark);
  border:1.5px solid var(--rh-blue);
  border-radius:100px;
  font-family:var(--rh-head);
  font-weight:700;
}
.btn-outline:hover,.btn-forest-ol:hover{background:var(--rh-alice);border-color:var(--rh-cyan);}
.btn-arrow::after{
  content:"";
  display:inline-block;
  width:.7em;height:.7em;margin-left:.6em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M4 2h6v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 10 10 2M4 2h6v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .4s var(--rh-ease);
}
.btn-arrow:hover::after{transform:translate(2px,-2px);}

/* ── cards ── */
.how-step,.testi-card,.article-card,.intro-myth,.auth-card-user,.waitlist-card,.ib-card{
  background:#fff;
  border:1px solid var(--rh-line);
  border-radius:var(--rh-radius);
  box-shadow:var(--rh-shadow);
  backdrop-filter:none;
}
.how-step:hover,.testi-card:hover,.article-card:hover,.ib-card:hover{box-shadow:var(--rh-shadow-lg);}
.how-step::before{background:linear-gradient(90deg,var(--rh-cyan),var(--rh-blue));}
.step-num{color:var(--rh-alice);}
.session-step .step-num{background:var(--rh-blue);color:#fff;}

/* ============================================================
   FOOTER, Blue Bell (brand blue, not cobalt)
   ============================================================ */
footer{background:var(--rh-blue);}
.footer-tagline{color:rgba(255,255,255,.9);}
.footer-links a{color:rgba(255,255,255,.9);}
.footer-links a:hover{color:#fff;}
.footer-copy{color:rgba(255,255,255,.85);}

@media (prefers-reduced-motion:reduce){
  .btn-arrow::after,.btn-primary,.btn-outline{transition:none;}
}

/* ============================================================
   HOVER SYSTEM, replicates the template's interactions
   ============================================================ */
:root{
  --rh-roll-ease:cubic-bezier(.15,.85,.31,1);   /* template button curve */
  --rh-lift-ease:cubic-bezier(.25,1,.5,1);      /* template card curve   */
}

/* 1. Buttons: lift 4px + label roll (JS wraps label in .rh-roll) */
.btn-primary,.btn-outline,.btn-forest,.btn-forest-ol,.btn-paper,.btn-paper-ol,.btn-accent,
.rh-btn-light,.rh-btn-ghost,.nav-find-hyp,.nav-login,.nav-cta,.articles-see-all,#hd-submit-btn,.m-cta,.m-login{
  overflow:hidden;
  transition:transform .6s var(--rh-roll-ease),background-color .4s var(--rh-lift-ease),
             color .4s var(--rh-lift-ease),border-color .4s var(--rh-lift-ease),box-shadow .4s var(--rh-lift-ease) !important;
}
.btn-primary:hover,.btn-outline:hover,.btn-forest:hover,.btn-forest-ol:hover,.btn-paper:hover,.btn-paper-ol:hover,.btn-accent:hover,
.rh-btn-light:hover,.rh-btn-ghost:hover,.nav-find-hyp:hover,.nav-login:hover,.nav-cta:hover,.articles-see-all:hover,#hd-submit-btn:hover{
  transform:translateY(-4px) !important;
}
.btn-primary:hover,.btn-forest:hover,.btn-accent:hover,.nav-find-hyp:hover,.nav-cta:hover,#hd-submit-btn:hover{
  box-shadow:0 10px 40px rgba(64,144,205,.35) !important;
}
.rh-roll{display:inline-block;overflow:hidden;vertical-align:top;height:1.3em;line-height:1.3em;white-space:nowrap;}
.rh-roll-in{display:block;position:relative;transition:transform .5s var(--rh-roll-ease);}
.rh-roll-in::after{content:attr(data-text);position:absolute;left:0;right:0;top:100%;text-align:inherit;}
a:hover>.rh-roll>.rh-roll-in,button:hover>.rh-roll>.rh-roll-in{transform:translateY(-100%);}

/* 2. Cards: lift 6px + soft Blue Bell shadow */
.how-step,.testi-card,.article-card,.ib-card,.auth-card,.intro-myth,.fho-hyp-card{
  transition:transform .4s var(--rh-lift-ease),box-shadow .4s var(--rh-lift-ease),border-color .4s var(--rh-lift-ease),
             opacity .75s cubic-bezier(.22,.61,.36,1) !important;
}
.how-step:hover,.testi-card:hover,.article-card:hover,.ib-card:hover,.auth-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 20px 40px rgba(64,144,205,.14) !important;
  border-color:#CFE6F8 !important;
}

/* 3. Image zoom inside cards (template blog: scale 1.08) */
.article-thumb{overflow:hidden;transition:background-size .4s var(--rh-lift-ease);}
.article-thumb img{transition:transform .4s var(--rh-lift-ease);}
.article-card:hover .article-thumb img{transform:scale(1.08);}
.article-card:hover .article-thumb{background-size:64px,auto;}
.article-card:hover .article-title{color:var(--rh-blue-dark);}
.article-title{transition:color .3s;}

/* Nav links: template pale pill + primary colour */
.nav-center a{transition:color .3s,background-color .3s;}

/* Text links: underline grows from the left (template .btn-link) */
.footer-links a{position:relative;transition:color .3s;}
.footer-links a::before{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--rh-cyan);
  transition:width .6s cubic-bezier(.1,.75,.25,1);}
.footer-links a:hover{color:var(--rh-cyan) !important;}
.footer-links a:hover::before{width:100%;}

/* 4. Cursor dot (template "cb-cursor") */
.rh-cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;will-change:transform;}
.rh-cursor::before{content:"";position:absolute;top:-24px;left:-24px;width:48px;height:48px;border-radius:50%;
  background:var(--rh-cyan);transform:scale(0);transition:transform .3s ease-in-out,opacity .1s;}
.rh-cursor.is-visible::before{transform:scale(.2);}
.rh-cursor.is-visible.is-active::before{transform:scale(.23);transition-duration:.2s;}
.rh-cursor.is-visible.is-pointer::before{transform:scale(.15);}

@media (prefers-reduced-motion:reduce){
  .rh-roll-in,.article-thumb img{transition:none;}
  a:hover>.rh-roll>.rh-roll-in,button:hover>.rh-roll>.rh-roll-in{transform:none;}
  .how-step:hover,.testi-card:hover,.article-card:hover,.ib-card:hover,.auth-card:hover{transform:none !important;}
}

/* ============================================================
   ARTICLES, the three long-form articles were built dark
   (navy gradient). Flip them to the template's light reading page.
   Their CSS reads --bg/--text/--heading, which only they use.
   ============================================================ */
:root{
  --text:#3A4452;
  --text-muted:#5F6B7A;
  --heading:var(--rh-carbon);
}
.bg-forest{display:none !important;}
body:has(.bg-forest){background:#fff !important;}
body:has(.bg-forest) nav{background:rgba(255,255,255,.94) !important;border-bottom:1px solid var(--rh-line) !important;}
body:has(.bg-forest) .nav-back,body:has(.bg-forest) .nav-lang{color:var(--rh-blue-dark) !important;border-color:var(--rh-line) !important;background:#fff !important;}
body:has(.bg-forest) .nav-cta{background:var(--rh-blue) !important;color:#fff !important;}
body:has(.bg-forest) footer{background:var(--rh-blue) !important;color:rgba(255,255,255,.85) !important;}

/* Article closing CTA → template consultation band (Blue Bell + Cyan glow) */
.article-footer-cta{
  background:radial-gradient(60% 120% at 0% 0%,rgba(0,180,216,.55),transparent 70%),var(--rh-blue) !important;
  border:none !important;border-radius:var(--rh-radius) !important;padding:44px 32px !important;
}
.article-footer-cta p{color:rgba(255,255,255,.9) !important;font-size:16px !important;}
.article-footer-cta a{background:#fff !important;color:var(--rh-blue-dark) !important;font-family:var(--rh-head);font-weight:700 !important;
  padding:14px 30px !important;font-size:16px !important;}
.article-footer-cta a:hover{background:var(--rh-alice) !important;transform:translateY(-4px);}
.article-footer-cta a{overflow:hidden;transition:transform .6s var(--rh-roll-ease),background-color .4s !important;}