/* RealGram — realgram.no homepage "v4" layer (2026-10-24).
   Loaded after style.css + modern.css, homepages only (body.home-v4).
   Fixes the header (wrapping links, unstyled CTA, see-through mobile menu),
   puts the hero copy before the phone on small screens, and styles the
   compare / guides / FAQ sections. Same token set as style.css. */

/* ---------- header ---------- */
.home-v4 .site-header{background:rgba(3,6,9,0.55);border-bottom:1px solid transparent;}
.home-v4 .site-header.is-scrolled{background:rgba(3,6,9,0.86);border-bottom-color:var(--line-v3);}
.home-v4 .header-inner{height:68px;gap:24px;}
.home-v4 .brand{flex:none;gap:10px;}
.home-v4 .brand-mark{width:40px;height:40px;}
.home-v4 .brand-word{font-family:var(--font-heading);font-size:19px;white-space:nowrap;}

.home-v4 .site-nav{gap:4px;font-size:14.5px;color:var(--silver);flex-wrap:nowrap;}
.home-v4 .site-nav a{white-space:nowrap;}
.home-v4 .site-nav a:not(.btn){padding:8px 12px;border-radius:999px;transition:color .2s,background .2s;}
.home-v4 .site-nav a:not(.btn):hover{color:var(--gold-light);background:rgba(255,243,196,.06);}
.home-v4 .site-nav a:not(.btn)::after{display:none;}
.home-v4 .site-nav a:not(.btn)[aria-current="true"]{color:var(--gold-light);}
.home-v4 .site-nav .lang-switch{margin-left:6px;border:1px solid var(--line-v3);font-family:'Vazirmatn',var(--font-display);}
.home-v4 .site-nav .lang-switch[lang="en"]{font-family:var(--font-display);}
.home-v4 .site-nav .nav-cta{margin-left:10px;padding:10px 20px;font-size:14px;}
.home-v4 .nav-toggle{border:1px solid var(--line-v3);border-radius:12px;width:42px;height:42px;align-items:center;}
.home-v4 .nav-toggle span{transition:transform .25s,opacity .25s;}
.home-v4 .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.home-v4 .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.home-v4 .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

[dir="rtl"].home-v4 .site-nav .lang-switch,[dir="rtl"] .home-v4 .site-nav .lang-switch{margin-left:0;margin-right:6px;}
[dir="rtl"] .home-v4 .site-nav .nav-cta{margin-left:0;margin-right:10px;}

/* collapse to the menu button well before the links run out of room */
@media (max-width:1060px){
  .home-v4 .nav-toggle{display:flex;}
  .home-v4 .site-nav{
    position:absolute;top:68px;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:2px;padding:12px 16px 20px;
    background:#070D18;border-bottom:1px solid var(--line-v3);
    box-shadow:0 24px 60px rgba(0,0,0,.6);
  }
  .home-v4 .site-nav.open{display:flex;}
  .home-v4 .site-nav a:not(.btn){width:100%;padding:14px 12px;border-radius:12px;border-bottom:0;font-size:16px;color:var(--text-primary);}
  .home-v4 .site-nav .lang-switch{margin:6px 0 0;text-align:center;}
  .home-v4 .site-nav .nav-cta{margin:10px 0 0;padding:14px 20px;font-size:15.5px;}
  [dir="rtl"] .home-v4 .site-nav{align-items:stretch;}
  [dir="rtl"] .home-v4 .site-nav .lang-switch,[dir="rtl"] .home-v4 .site-nav .nav-cta{margin-right:0;}
}

/* ---------- hero ---------- */
.home-v4 .hero h1{max-width:14ch;}
[dir="rtl"] .home-v4 .hero h1{max-width:none;}
@media (max-width:920px){
  .home-v4 .hero{display:flex;flex-direction:column;gap:40px;padding-top:40px;}
  .home-v4 .hero-copy{order:1;}
  .home-v4 .hero-stage{order:2;width:100%;}
  .home-v4 .hero h1{max-width:none;}
}
@media (max-width:640px){
  .home-v4 .hero-actions{flex-direction:column;align-items:stretch;}
  .home-v4 .hero-actions .btn{width:100%;}
  .home-v4 .trust-row{flex-direction:row;flex-wrap:wrap;gap:8px 18px;}
}

/* inline text links under spotlight copy */
.home-v4 .inline-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14.5px;}
.home-v4 .inline-links a{color:var(--gold-light);border-bottom:1px solid var(--line-v3-hi);padding-bottom:2px;}
.home-v4 .inline-links a:hover{border-bottom-color:var(--gold);}

/* ---------- compare ---------- */
.home-v4 .compare,.home-v4 .guides,.home-v4 .home-faq{padding-top:110px;padding-bottom:40px;}
.home-v4 .compare-table{
  max-width:860px;margin:40px auto 0;border-radius:var(--radius-xl);overflow:hidden;
  background:var(--glass-v3);border:1px solid var(--line-v3);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.home-v4 .compare-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-top:1px solid var(--line-v3);}
.home-v4 .compare-row:first-child{border-top:0;}
.home-v4 .compare-row > span{padding:16px 20px;font-size:15px;color:#9DB4CF;}
.home-v4 .compare-row > [role="rowheader"]{color:var(--text-primary);font-weight:600;}
.home-v4 .compare-row .yes{color:var(--gold-light);background:rgba(255,182,39,.05);}
.home-v4 .compare-head > span{font-family:var(--font-heading);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--silver);}
.home-v4 .compare-head > span:nth-child(2){color:var(--gold);background:rgba(255,182,39,.08);}
[dir="rtl"] .home-v4 .compare-head > span{text-transform:none;letter-spacing:0;}
.home-v4 .compare-more{margin-top:22px;}
.home-v4 .compare-more a{color:var(--gold-light);border-bottom:1px solid var(--line-v3-hi);}
@media (max-width:640px){
  .home-v4 .compare-row{grid-template-columns:1fr 1fr;}
  .home-v4 .compare-row > [role="rowheader"]{grid-column:1 / -1;padding-bottom:0;font-size:14px;color:var(--silver);}
  .home-v4 .compare-head > span:first-child{display:none;}
  .home-v4 .compare-row > span{padding:12px 16px;font-size:14.5px;}
}

/* ---------- guides ---------- */
.home-v4 .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px;}
.home-v4 .guide-card{
  --mx:50%;--my:0%;display:flex;flex-direction:column;gap:12px;min-height:170px;padding:22px 22px 20px;border-radius:var(--radius-xl);
  background:radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),var(--glass-v3);
  border:1px solid var(--line-v3);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:transform .3s ease,border-color .3s ease;
}
.home-v4 .guide-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--accent) 45%, transparent);}
.home-v4 .guide-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
[dir="rtl"] .home-v4 .guide-tag{font-family:'Vazirmatn',var(--font-display);letter-spacing:0;text-transform:none;font-size:13px;}
.home-v4 .guide-card h3{font-family:var(--font-heading);font-size:18px;line-height:1.35;font-weight:600;color:var(--text-primary);}
[dir="rtl"] .home-v4 .guide-card h3{font-family:'Vazirmatn',var(--font-heading);line-height:1.7;}
.home-v4 .guide-go{margin-top:auto;font-size:14px;color:var(--gold-light);}
.home-v4 .guide-all{border-style:dashed;}
@media (max-width:920px){.home-v4 .guide-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.home-v4 .guide-grid{grid-template-columns:1fr;}.home-v4 .guide-card{min-height:0;}}

/* ---------- FAQ ---------- */
.home-v4 .faq-list{max-width:820px;margin:36px auto 0;display:flex;flex-direction:column;gap:10px;}
.home-v4 .faq-list details{
  border-radius:16px;background:var(--glass-v3);border:1px solid var(--line-v3);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .25s;
}
.home-v4 .faq-list details[open]{border-color:var(--line-v3-hi);}
.home-v4 .faq-list summary{
  list-style:none;cursor:pointer;padding:18px 52px 18px 22px;position:relative;
  font-weight:600;font-size:16.5px;color:var(--text-primary);
}
.home-v4 .faq-list summary::-webkit-details-marker{display:none;}
.home-v4 .faq-list summary::after{
  content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .25s;
}
.home-v4 .faq-list details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;}
[dir="rtl"] .home-v4 .faq-list summary{padding:18px 22px 18px 52px;}
[dir="rtl"] .home-v4 .faq-list summary::after{right:auto;left:22px;}
.home-v4 .faq-list details p{padding:0 22px 20px;color:#9DB4CF;line-height:1.7;}
[dir="rtl"] .home-v4 .faq-list details p{line-height:2;}
.home-v4 .faq-list details a{color:var(--gold-light);border-bottom:1px solid var(--line-v3-hi);}

/* ---------- download band ---------- */
.home-v4 .cta-note{font-size:.88rem;opacity:.78;max-width:650px;margin:12px auto 0;}
.home-v4 #android-alternative a{margin:0 4px;}

@media (max-width:640px){
  .home-v4 .compare,.home-v4 .guides,.home-v4 .home-faq{padding-top:72px;}
}

/* reveal-left/right start 52px off-screen; clip so they never cause sideways scroll */
.home-v4 #main-content{overflow-x:clip;}

/* section headings for the new sections, same scale as the other chapters */
.home-v4 .compare h2,.home-v4 .guides h2,.home-v4 .home-faq h2{font-family:var(--font-heading);font-size:clamp(30px,4.2vw,52px);font-weight:600;line-height:1.08;letter-spacing:-0.025em;margin-top:8px;}
[dir="rtl"] .home-v4 .compare h2,[dir="rtl"] .home-v4 .guides h2,[dir="rtl"] .home-v4 .home-faq h2{font-family:'Vazirmatn',var(--font-heading);line-height:1.4;letter-spacing:0;}
.home-v4 .compare .lead{margin-top:14px;max-width:620px;}