/* Layout for the 21 content pages. Uses the approved Re-Vanna design tokens. */
.content-hero { position:relative; padding: 28px 0 52px; }
.page-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(460px,1fr); gap:56px; align-items:start; }
.page-hero-copy { min-width:0; }
.page-hero-copy h1 { max-width:16ch; font-size:clamp(2.8rem,4.2vw,4rem); line-height:1; }
.page-hero-copy .eyebrow { margin-bottom:14px; }
.page-hero-copy .lede { max-width:62ch; margin-top:18px; font-size:17px; line-height:1.55; }
.page-hero-copy .hero-actions { margin-top:24px; }
.hero-trust { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin:28px 0 0; padding:0; overflow:hidden; border:1px solid rgba(15,26,24,.1); border-radius:18px; background:rgba(255,255,255,.72); box-shadow:0 16px 40px rgba(15,26,24,.05); list-style:none; backdrop-filter:blur(10px); }
.hero-trust li { display:flex; min-width:0; gap:10px; align-items:flex-start; padding:16px 14px; }
.hero-trust li + li { border-left:1px solid rgba(15,26,24,.09); }
.hero-trust-icon { display:grid; flex:0 0 26px; width:26px; height:26px; place-items:center; border-radius:50%; color:#1738d3; background:var(--lime); font-size:14px; font-weight:850; line-height:1; }
.hero-trust li > span:last-child { display:grid; min-width:0; gap:3px; }
.hero-trust strong { color:var(--ink); font-size:14px; line-height:1.2; }
.hero-trust small { color:var(--muted); font-size:12px; line-height:1.3; }
.page-hero-media { position:relative; padding-top:4px; }
.page-hero-media img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:30px; box-shadow:var(--shadow); }
.topic-panel { position:relative; display:flex; aspect-ratio:4/3; flex-direction:column; justify-content:space-between; overflow:hidden; padding:34px; border-radius:30px; color:white; background:linear-gradient(145deg,hsl(var(--panel-hue) 72% 48%),hsl(calc(var(--panel-hue) + 25) 70% 34%)); box-shadow:var(--shadow); }
.topic-panel::before { content:""; position:absolute; width:240px; height:240px; right:-54px; top:-64px; border-radius:50%; background:var(--lime); opacity:.9; }
.topic-panel::after { content:""; position:absolute; width:150px; height:150px; left:-38px; bottom:-54px; border:1px solid rgba(255,255,255,.35); border-radius:50%; }
.topic-panel span,.topic-panel strong { position:relative; z-index:1; }
.topic-panel span { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.topic-panel strong { max-width:11ch; font-size:clamp(2rem,4vw,4.25rem); line-height:.96; letter-spacing:-.055em; }
.page-shell { padding-top:86px; }
.article-body { min-width:0; }
.article-body > p:first-of-type { margin-top:0; }
.article-body p { font-size:18px; line-height:1.72; }
.article-body ul,.article-body ol { display:grid; gap:10px; margin:18px 0 28px; padding-left:24px; }
.article-body a { color:var(--accent-hover); font-weight:650; }
.article-body .price-table,.article-body .comparison-table { margin:26px 0 34px; background:white; }
.article-section + .article-section { margin-top:0; }
.article-body .faq-list { margin-top:24px; }
.article-body .faq-answer p { font-size:16px; }
.page-contact { margin-top:74px; }
.page-contact h2 { max-width:18ch; }
.breadcrumbs-wrap { padding-top:16px; }
.breadcrumbs-wrap .breadcrumbs { padding-top:0; }
@media (max-width:1080px) {
  .article-layout:has(table) { grid-template-columns:1fr; gap:30px; }
  .article-layout:has(table) .article-toc { position:static; padding:20px; border:1px solid var(--line); border-radius:16px; background:white; }
}
@media (min-width:1081px) {
  .content-hero { min-height:calc(100vh - 157px); min-height:calc(100svh - 157px); box-sizing:border-box; }
  .scroll-cue { position:absolute; left:50%; bottom:26px; display:grid; width:44px; height:44px; place-items:center; border:1px solid rgba(15,26,24,.12); border-radius:50%; color:var(--accent); background:rgba(255,255,255,.82); box-shadow:0 12px 30px rgba(15,26,24,.08); transform:translateX(-50%); transition:color .2s ease,background .2s ease,border-color .2s ease; backdrop-filter:blur(8px); }
  .scroll-cue:hover { color:white; border-color:var(--accent); background:var(--accent); }
  .scroll-cue span { display:block; font-size:24px; font-weight:750; line-height:1; animation:scroll-cue-bob 1.8s ease-in-out infinite; }
}
@keyframes scroll-cue-bob { 0%,100% { transform:translateY(-3px); } 50% { transform:translateY(4px); } }
@media (min-width:1081px) and (max-height:840px) {
  .content-hero { padding-top:16px; padding-bottom:32px; }
  .page-hero-grid { gap:46px; }
  .page-hero-copy h1 { font-size:clamp(2.55rem,3.9vw,3.5rem); }
  .page-hero-copy .lede { margin-top:16px; font-size:17px; line-height:1.55; }
  .page-hero-copy .hero-actions { margin-top:20px; }
  .hero-trust { margin-top:22px; }
  .hero-trust li { padding:13px 11px; }
  .hero-trust-icon { flex-basis:24px; width:24px; height:24px; }
  .page-hero-media img,.topic-panel { height:440px; min-height:0; aspect-ratio:auto; }
}
@media (max-width:1080px) { .content-hero { padding:38px 0 66px; } .page-hero-grid { grid-template-columns:1fr; gap:38px; } .page-hero-copy { max-width:800px; } .page-hero-media { width:min(100%,800px); padding-top:0; } .page-hero-media img { height:auto; aspect-ratio:4/3; } .topic-panel { min-height:360px; } .scroll-cue { display:none; } }
@media (max-width:760px) { .breadcrumbs-wrap { padding-top:14px; } .breadcrumbs { padding-top:14px; } .content-hero { padding:28px 0 52px; } .page-hero-grid { gap:30px; } .page-hero-copy h1 { max-width:100%; overflow-wrap:break-word; font-size:clamp(2.4rem,11vw,3.1rem); line-height:1.02; } .page-hero-copy .lede { margin-top:16px; font-size:16px; line-height:1.5; } .page-hero-copy .hero-actions { margin-top:20px; } .hero-trust { grid-template-columns:1fr; margin-top:24px; border-radius:16px; } .hero-trust li { align-items:center; padding:12px 14px; } .hero-trust li + li { border-top:1px solid rgba(15,26,24,.09); border-left:0; } .hero-trust strong { font-size:14px; } .hero-trust small { font-size:12px; } .topic-panel { min-height:280px; padding:26px; border-radius:22px; } .page-hero-media img { border-radius:22px; } .page-shell { padding-top:62px; } .article-body p { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { .scroll-cue span { animation:none; } }