/*
 * Guide rails: sticky table of contents on the left, sticky conversion card on the right.
 *
 * Used by landing/service.blade.php (guides + service pages) and pages/show.blade.php
 * (CMS articles). Deliberately NOT scoped to .rv-public: signed-in visitors read these
 * pages too, and revamp.css's auth scoping is exactly the trap this file avoids.
 *
 * Layout is decided by the width of the wrapper (container query), not the viewport,
 * because signed-in visitors also have the app sidebar eating ~300px of the screen.
 */
.gr-wrap{container-type:inline-size;width:100%}
.gr-grid{display:block}
.gr-toc,.gr-cro{display:none}
.gr-main{min-width:0}
/* Headings reached from the contents must not land underneath the sticky header. */
.gr-main [id]{scroll-margin-top:calc(var(--gr-top) + 16px)}

/* Header is sticky for guests only, so the rails clear it only when it exists. */
.gr-wrap{--gr-top:24px}
.rv-public .gr-wrap{--gr-top:96px}

@container (min-width: 1180px){
  .gr-grid{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:0 36px;
    max-width:1480px;margin:0 auto;padding:0 24px;align-items:start}
  .gr-toc,.gr-cro{display:block;position:sticky;top:var(--gr-top);padding:40px 0 24px;
    max-height:calc(100vh - var(--gr-top));overflow-y:auto;scrollbar-width:thin}
  .gr-toc-inline{display:none!important}
  .gr-bar{display:none!important}
  /* Inside the grid the article is already bounded by its column. */
  .gr-main .md-wrap{max-width:none;padding:0 8px}
  .gr-main .rv-article{max-width:780px}
  .gr-main .md-sec.md-soft{border-radius:16px}
}
@container (min-width: 1000px) and (max-width: 1179.98px){
  /* Mid widths: keep the contents, drop the sales card into the bottom bar. */
  .gr-grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0 28px;padding:0 20px;align-items:start}
  .gr-toc{display:block;position:sticky;top:var(--gr-top);padding:40px 0 24px;
    max-height:calc(100vh - var(--gr-top));overflow-y:auto}
  .gr-toc-inline{display:none!important}
  .gr-main .md-wrap{max-width:none;padding:0 8px}
}

/* ---------- table of contents ---------- */
.gr-toc-title{font:700 11.5px/1 Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  color:#64748B;margin:0 0 12px}
.gr-toc ol,.gr-toc-inline ol{list-style:none;margin:0;padding:0;counter-reset:gr}
.gr-toc li{margin:0}
.gr-toc a{display:block;padding:7px 10px 7px 12px;border-left:2px solid #E2E8F0;color:#475569;
  font:500 13.5px/1.4 Inter,system-ui,sans-serif;text-decoration:none!important;transition:color .15s,border-color .15s,background .15s}
.gr-toc a:hover{color:#0F172A;background:#F8FAFC}
.gr-toc a.is-active{color:#4F46E5;border-left-color:#6366F1;background:#EEF2FF;font-weight:600}
.gr-toc-progress{height:3px;border-radius:3px;background:#E2E8F0;margin:16px 0 0;overflow:hidden}
.gr-toc-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#6366F1,#8B5CF6);transition:width .1s linear}

.gr-toc-inline{max-width:820px;margin:0 auto 8px;border:1px solid #E2E8F0;border-radius:14px;background:#F8FAFC;padding:0}
.gr-toc-inline summary{cursor:pointer;list-style:none;padding:14px 18px;font:600 15px/1.3 Inter,system-ui,sans-serif;color:#0F172A;display:flex;justify-content:space-between;align-items:center}
.gr-toc-inline summary::-webkit-details-marker{display:none}
.gr-toc-inline summary::after{content:"+";font-size:20px;color:#6366F1;line-height:1}
.gr-toc-inline[open] summary::after{content:"\2212"}
.gr-toc-inline ol{padding:0 18px 14px}
.gr-toc-inline li{counter-increment:gr;padding:5px 0}
.gr-toc-inline li::before{content:counter(gr) ".";color:#94A3B8;font-size:13px;margin-right:8px}
.gr-toc-inline a{color:#334155;font-size:14.5px;text-decoration:none}
.gr-toc-inline-wrap{padding:24px 20px 0}

/* ---------- conversion card ---------- */
.gr-card{border:1px solid #E2E8F0;border-radius:16px;background:#fff;padding:20px 18px;
  box-shadow:0 18px 40px -28px rgba(15,23,42,.35)}
.gr-card-kicker{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:#16A34A;background:#F0FDF4;border-radius:999px;padding:6px 9px;margin:0 0 12px}
.gr-card-kicker i{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.gr-card h3,.gr-card .gr-card-title{font:700 18px/1.3 "Plus Jakarta Sans",Inter,sans-serif;color:#0F172A;margin:0 0 8px}
.gr-card p{font-size:14px;line-height:1.55;color:#475569;margin:0 0 12px}
.gr-card ul{list-style:none;margin:0 0 16px;padding:0}
.gr-card li{position:relative;padding:4px 0 4px 24px;font-size:13.5px;line-height:1.45;color:#334155}
.gr-card li::before{content:"";position:absolute;left:0;top:7px;width:15px;height:15px;border-radius:50%;
  background:#EEF2FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%234F46E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.gr-btn{display:block;text-align:center;border-radius:11px;padding:12px 14px;font:600 14.5px/1.2 Inter,system-ui,sans-serif;text-decoration:none!important;transition:transform .12s,box-shadow .12s}
.gr-btn-primary{background:linear-gradient(135deg,#6366F1,#8B5CF6);color:#fff!important;box-shadow:0 10px 24px -12px rgba(99,102,241,.8)}
.gr-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(99,102,241,.9)}
.gr-btn-ghost{color:#4F46E5!important;margin-top:8px}
.gr-btn-ghost:hover{background:#EEF2FF}
.gr-card-foot{font-size:12.5px!important;color:#64748B!important;text-align:center;margin:12px 0 0!important}
.gr-card + .gr-card{margin-top:16px}
.gr-mini h3,.gr-mini .gr-card-title{font-size:15px}
.gr-mini a{font-size:13.5px;font-weight:600;color:#4F46E5}

/* ---------- bottom bar (narrow screens) ---------- */
.gr-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:1020;display:flex;align-items:center;gap:12px;
  background:#0F172A;color:#fff;border-radius:14px;padding:10px 10px 10px 16px;box-shadow:0 18px 40px -16px rgba(15,23,42,.7);
  transform:translateY(140%);transition:transform .25s ease;max-width:640px;margin:0 auto}
.gr-bar.is-on{transform:none}
.gr-bar-txt{flex:1;min-width:0;font:600 14px/1.3 Inter,system-ui,sans-serif}
.gr-bar-txt small{display:block;font-weight:400;color:#94A3B8;font-size:12px}
.gr-bar .gr-btn{padding:10px 14px;white-space:nowrap;font-size:14px}
.gr-bar-x{background:none;border:0;color:#94A3B8;font-size:20px;line-height:1;padding:4px 6px;cursor:pointer}
@media print{.gr-toc,.gr-cro,.gr-bar,.gr-toc-inline{display:none!important}}
@media (prefers-reduced-motion:reduce){.gr-bar,.gr-btn,.gr-toc a{transition:none}}

/* ---------- product screenshots inside guides ---------- */
.gr-shot{display:block;margin:18px 0 24px}
.gr-shot a{display:block;border-radius:12px;outline-offset:3px}
.gr-shot img{display:block;width:100%;height:auto;border:1px solid #E2E8F0;border-radius:12px;
  box-shadow:0 14px 34px -24px rgba(15,23,42,.45);background:#fff}
.gr-shot .gr-cap{display:block;margin-top:9px;font-size:14px;line-height:1.5;color:#64748B;font-style:normal}
.gr-shot .gr-cap b{color:#334155;font-weight:600}
.gr-step-note{display:block;margin:10px 0 0;padding:10px 14px;border-left:3px solid #F59E0B;background:#FFFBEB;border-radius:0 10px 10px 0;font-size:15px;color:#78350F}