/* Citrus Mobile detail page */
.mobile-page .features-page-hero {
  min-height: calc(100svh - 94px);
  background-image:
    linear-gradient(90deg, rgba(8,11,13,.86) 0%, rgba(8,11,13,.74) 42%, rgba(8,11,13,.42) 72%, rgba(8,11,13,.34) 100%),
    url('https://citruslibrary.app/SiteImg/mobile-page-hero-v25.jpg');
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.mobile-page .features-page-hero::before { display:none; }
.mobile-page .features-page-hero::after {
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18));
}
.mobile-page .features-page-hero .shell { max-width: var(--content-width); }
.mobile-page .features-page-hero h1 { max-width: 930px; }
.mobile-hero-price {
  display:inline-flex; align-items:baseline; gap:12px; margin-top:32px;
  color:#fff; font-weight:850;
}
.mobile-hero-price strong { color:var(--accent); font-size:clamp(2.7rem,5vw,4.7rem); line-height:1; letter-spacing:-.055em; }
.mobile-hero-price span { color:rgba(255,255,255,.72); font-size:.9rem; }
.mobile-store-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.mobile-store-row .store-badge { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; }

.mobile-connect { padding:var(--section-space) 0; }
.mobile-connect-heading { max-width:820px; margin:0 auto 50px; text-align:center; }
.mobile-connect-heading h2 { margin:.35rem 0 1rem; font-size:clamp(2.6rem,5vw,4.8rem); letter-spacing:-.055em; line-height:.98; }
.mobile-connect-heading p { margin:0 auto; max-width:720px; color:var(--muted); }
.connect-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.connect-card {
  position:relative; min-height:330px; padding:28px; overflow:hidden;
  border:1px solid rgba(255,255,255,.62); border-radius:var(--radius-lg);
  background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(255,255,255,.43));
  box-shadow:0 22px 60px rgba(42,35,18,.075), inset 0 1px rgba(255,255,255,.75);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.connect-number { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--accent); color:#3c3100; font-weight:950; }
.connect-card h3 { margin:55px 0 12px; font-size:1.38rem; letter-spacing:-.025em; }
.connect-card p { margin:0; color:var(--muted); font-size:.93rem; line-height:1.62; }
.connect-card::after { content:""; position:absolute; right:-48px; bottom:-58px; width:160px; height:160px; border-radius:50%; background:rgba(243,196,0,.10); }

.mobile-story { padding:var(--section-space) 0; background:#fff; }
.mobile-story-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:clamp(42px,7vw,100px); align-items:center; }
.mobile-story-copy h2 { margin:.4rem 0 1.15rem; font-size:clamp(2.8rem,5.2vw,5rem); line-height:.94; letter-spacing:-.06em; }
.mobile-story-copy p { color:var(--muted); font-size:1.05rem; line-height:1.7; }
.mobile-story-media { border-radius:var(--radius-xl); overflow:hidden; background:#151c21; box-shadow:0 32px 80px rgba(25,28,31,.16); }
.mobile-story-media img { display:block; width:100%; aspect-ratio:16/11; object-fit:cover; }
.mobile-benefit-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px; }
.mobile-benefit-list div { padding:18px; border-radius:18px; background:var(--surface-soft); border:1px solid var(--line); }
.mobile-benefit-list strong { display:block; margin-bottom:5px; }
.mobile-benefit-list span { color:var(--muted); font-size:.85rem; line-height:1.45; }

.free-streaming-section { position:relative; overflow:hidden; padding:var(--section-space) 0; background:var(--pro-bg); color:#fff; }
.free-streaming-section::after { content:""; position:absolute; width:560px; height:560px; right:-120px; top:-160px; border-radius:50%; background:radial-gradient(circle,rgba(243,196,0,.22),transparent 66%); pointer-events:none; }
.free-streaming-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.65fr); gap:70px; align-items:end; }
.free-streaming-section h2 { margin:.35rem 0 1.1rem; max-width:850px; font-size:clamp(3rem,6.4vw,6.4rem); line-height:.9; letter-spacing:-.065em; }
.free-streaming-section h2 span { color:var(--accent); }
.free-streaming-section p { max-width:760px; color:var(--pro-muted); font-size:1.05rem; line-height:1.7; }
.mobile-free-price { text-align:right; }
.mobile-free-price .price { color:var(--accent); font-size:clamp(4rem,8vw,7.8rem); font-weight:950; line-height:.84; letter-spacing:-.07em; }
.mobile-free-price .label { margin-top:14px; color:var(--pro-muted); font-size:.88rem; font-weight:750; }
.mobile-account-note { margin-top:28px!important; max-width:820px!important; color:rgba(255,255,255,.48)!important; font-size:.76rem!important; line-height:1.5!important; }

.mobile-app-cta { padding:var(--section-space-tight) 0; text-align:center; }
.mobile-app-cta h2 { margin:0 0 14px; font-size:clamp(2.4rem,4.5vw,4.3rem); letter-spacing:-.05em; }
.mobile-app-cta p { margin:0 auto 26px; max-width:680px; color:var(--muted); }
.mobile-app-cta .mobile-store-row { justify-content:center; }
.mobile-app-cta .store-badge { background:#111; color:#fff; }

@media(max-width:1050px){ .connect-grid{grid-template-columns:1fr 1fr}.mobile-story-grid,.free-streaming-grid{grid-template-columns:1fr}.mobile-free-price{text-align:left} }
@media(max-width:650px){ .connect-grid{grid-template-columns:1fr}.connect-card{min-height:260px}.connect-card h3{margin-top:38px}.mobile-benefit-list{grid-template-columns:1fr}.mobile-page .features-page-hero{background-position:center,62% center}.free-streaming-section h2{font-size:clamp(3rem,15vw,5rem)} }


/* V25: Mobile stories are full-cover sections, not image cards */
.mobile-page .mobile-connect { background:#f1eee5; border:0; }
.mobile-page .mobile-story {
  position:relative; isolation:isolate; overflow:hidden; min-height:clamp(580px,78svh,900px);
  padding:0; display:flex; align-items:center; color:#fff; background:#0e1318;
}
.mobile-page .mobile-story::before {
  content:""; position:absolute; inset:0; z-index:-2; background-image:var(--story-image);
  background-position:center; background-size:cover; background-repeat:no-repeat;
}
.mobile-page .mobile-story::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgba(6,8,11,.91) 0%,rgba(6,8,11,.78) 38%,rgba(6,8,11,.48) 68%,rgba(6,8,11,.24) 100%);
}
.mobile-page .mobile-story:nth-of-type(even)::after { background:linear-gradient(270deg,rgba(6,8,11,.91) 0%,rgba(6,8,11,.78) 38%,rgba(6,8,11,.48) 68%,rgba(6,8,11,.24) 100%); }
.mobile-page .mobile-story .mobile-story-grid { width:100%; grid-template-columns:1fr; }
.mobile-page .mobile-story .mobile-story-copy { width:min(650px,100%); max-width:650px; }
.mobile-page .mobile-story:nth-of-type(even) .mobile-story-copy { margin-left:auto; }
.mobile-page .mobile-story-copy h2 { color:#fff; text-shadow:0 2px 28px rgba(0,0,0,.22); }
.mobile-page .mobile-story-copy p { color:rgba(255,255,255,.88); }
.mobile-page .mobile-story .eyebrow { color:#f3c400; }
.mobile-page .mobile-story-media { display:none!important; }
.mobile-page .mobile-benefit-list div { background:rgba(7,9,12,.50); border-color:rgba(255,255,255,.14); backdrop-filter:blur(10px); }
.mobile-page .mobile-benefit-list strong { color:#fff; }
.mobile-page .mobile-benefit-list span { color:rgba(255,255,255,.78); }
.mobile-page .free-streaming-section { border:0; }
.mobile-page .mobile-app-cta { background:#f1eee5; border:0; }
@media(max-width:760px){
  .mobile-page .mobile-story { min-height:650px; }
  .mobile-page .mobile-story::after,.mobile-page .mobile-story:nth-of-type(even)::after { background:linear-gradient(180deg,rgba(6,8,11,.40) 0%,rgba(6,8,11,.78) 45%,rgba(6,8,11,.94) 100%); }
  .mobile-page .mobile-story:nth-of-type(even) .mobile-story-copy { margin-left:0; }
}

/* V26 layout correction: keep full-bleed imagery while copy remains in the standard shell. */
.mobile-page .mobile-story .mobile-story-grid { padding-block:clamp(70px,9vw,140px); }
@media(max-width:760px){ .mobile-page .mobile-story .mobile-story-grid { padding-block:74px; } }

/* V27: keep mobile copy comfortably inset from the viewport edge. */
@media(max-width:760px){
  .mobile-page .shell {
    width:min(var(--content-max), calc(100% - 64px));
  }
}
@media(max-width:420px){
  .mobile-page .shell {
    width:min(var(--content-max), calc(100% - 48px));
  }
}