/* GuruHat header and problem-first hero, shared by every page that gets the new top section.
   The header gets a full-width navy band even when the page below it is still light. */
body header.site-header{background:#0b1d38!important;position:relative;z-index:5;box-shadow:0 0 0 100vmax #0b1d38;clip-path:inset(0 -100vmax)}
body header.site-header .brand{background:transparent;padding:0}
body header.site-header .brand img{filter:none}
body header.site-header .brand-word{color:#fff}
body header.site-header .brand-word b{color:#ffb36b}
body header.site-header .nav a{color:rgba(255,255,255,.88)}
body header.site-header .nav .social a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);color:#fff}
body header.site-header .nav .social a svg{fill:currentColor}
body header.site-header .nav .lang,body header.site-header .nav [class*="lang"]{color:#fff;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.08)}

/* Shared problem-first hero for app pages */
.ah{position:relative;overflow:hidden;color:#fff;padding:44px 0 88px;
  background:radial-gradient(55% 80% at 6% 108%,rgba(255,122,61,.55),transparent 62%),radial-gradient(50% 70% at 94% -6%,rgba(139,92,246,.55),transparent 62%),radial-gradient(45% 60% at 62% 112%,rgba(255,61,127,.45),transparent 58%),linear-gradient(160deg,#0b1d38 0,#25235f 58%,#432a78 100%)}
.ah-inner{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.ah-kicker{color:#ffb36b;font-weight:800;letter-spacing:.07em;text-transform:uppercase;font-size:.82rem}
.ah h1{font-size:clamp(2.4rem,5vw,4.3rem);line-height:1.02;letter-spacing:-.035em;margin:14px 0 18px;color:#fff}
.ah h1 em{font-style:normal;color:#ffb36b}
.ah-sub{font-size:1.22rem;line-height:1.5;color:rgba(255,255,255,.84);max-width:34em;margin:0}
.ah-dl{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 16px}
.ah-note{margin:0;color:rgba(255,255,255,.72);font-size:.92rem}
.ah-note b{color:#ffb36b}

.dl-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 11px;border:1.5px solid #fff;border-radius:11px;background:#fff;color:#0b1d38!important;font-size:.68rem;font-weight:500;line-height:1.02;letter-spacing:.01em;text-decoration:none;white-space:nowrap;box-shadow:0 3px 8px #0b1d3830;transition:background .15s,color .15s}
.dl-badge small{display:block;font-size:1.08rem;font-weight:650;letter-spacing:-.02em;line-height:1.02}
.dl-badge .bi{display:grid;place-items:center;flex:none;width:24px;height:26px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Symbol",sans-serif;font-size:1.6rem;line-height:1}
.dl-badge .wi{display:grid;grid-template-columns:repeat(2,9px);grid-template-rows:repeat(2,9px);gap:2px;width:20px;height:20px}
.dl-badge .wi i{display:block;width:9px;height:9px;background:currentColor}
.dl-badge .wi i:nth-child(odd){transform:skewY(-5deg)}
.dl-badge .wi i:nth-child(even){transform:skewY(5deg)}
.dl-badge:hover{background:rgba(255,255,255,.14);color:#fff!important}
.dl-badge:focus-visible{outline:3px solid #ff7625;outline-offset:2px}
.dl-badge.alt{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.55);box-shadow:none}
.dl-badge.alt:hover{background:rgba(255,255,255,.14)}

/* The scene on the right: a small desktop with the app's real screen */
.ah-screen{position:relative;aspect-ratio:4/3.1;border-radius:18px;overflow:hidden;container-type:inline-size;
  background:radial-gradient(60% 70% at 8% 108%,rgba(255,122,61,.6),transparent 62%),radial-gradient(55% 70% at 96% 0,rgba(139,92,246,.6),transparent 62%),linear-gradient(160deg,#0f1c48 0,#2b2562 60%,#4a2c80 100%);
  border:1px solid rgba(255,255,255,.2);box-shadow:0 30px 70px rgba(5,10,30,.5)}
.ah-bar{position:absolute;left:0;right:0;top:0;height:28px;background:rgba(255,255,255,.13);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:11.5px;color:#fff;z-index:3}
.ah-menus,.ah-status{display:flex;align-items:center;gap:14px;white-space:nowrap}
.ah-menus b{font-weight:800}
.ah-menus span{font-weight:500;opacity:.92}
.ah-status{gap:9px;font-weight:500}
.ah-bat{background:#fff;color:#0b1d38;font-weight:800;font-size:.85em;border-radius:4px;padding:0 4px}
@media(max-width:560px){.ah-menus span{display:none}.ah-bat{display:none}}
.ah-pop{position:absolute;margin:0;line-height:0;opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .3s ease,transform .45s cubic-bezier(.16,.84,.24,1)}
.ah-pop img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 18px 44px #0006}
.ah-pop.in{opacity:1;transform:none}
.ah-panel{position:absolute;top:28px;right:0;bottom:0;width:46%;overflow:hidden;line-height:0;background:#d9e7f2;transform:translateX(110%);transition:transform .6s cubic-bezier(.16,.84,.24,1);filter:drop-shadow(-10px 0 24px rgba(0,0,0,.3))}
.ah-panel img.top{display:block;width:100%;height:auto}
.ah-panel img.foot{position:absolute;left:0;bottom:0;width:100%}
.ah-panel.in{transform:none}
@media(prefers-reduced-motion:reduce){.ah-pop,.ah-panel{transition:none;opacity:1;transform:none}}
@media(max-width:860px){.ah-inner{grid-template-columns:1fr;gap:36px}.ah{padding:28px 0 60px}.ah-screen{aspect-ratio:4/3.4}}

.ah-note a{color:#ffb36b;text-decoration:underline}

/* Phone mockups (RateGuru): real phone bodies floating on the gradient, no desktop around them */
.ah-phones{position:relative;aspect-ratio:1/.9;container-type:inline-size}
.ah-phone{position:absolute;width:34%;padding:1.4cqw;background:#090b11;border-radius:5.8cqw;border:1px solid rgba(255,255,255,.22);box-shadow:0 30px 60px rgba(4,8,28,.55),inset 0 0 0 1px rgba(255,255,255,.06);line-height:0;opacity:0;transform:translateY(26px);transition:opacity .45s ease,transform .6s cubic-bezier(.16,.84,.24,1)}
.ah-phone img{display:block;width:100%;height:auto;border-radius:4.6cqw}
.ah-phone::before{content:"";position:absolute;top:2.5cqw;left:50%;width:5cqw;height:1.4cqw;transform:translateX(-50%);background:#000;border-radius:99px;z-index:2}
.ah-phone.one{left:12%;top:3%;transform:translateY(26px) rotate(-3deg)}
.ah-phone.two{right:12%;top:13%;transform:translateY(26px) rotate(3deg)}
.ah-phone.in.one{opacity:1;transform:rotate(-3deg)}
.ah-phone.in.two{opacity:1;transform:rotate(3deg)}
@media(prefers-reduced-motion:reduce){.ah-phone{transition:none;opacity:1}.ah-phone.one{transform:rotate(-3deg)}.ah-phone.two{transform:rotate(3deg)}}
.ah strong{font-weight:800;color:#fff}