/* ==========================================================================
   RankGear — site.css  (design system + chrome + homepage)
   ========================================================================== */
:root{
  --page:#F5F5F7; --card:#FFFFFF; --ink:#1D1D1F; --ink-2:#6E6E73; --ink-3:#98989D;
  --hairline:rgba(29,29,31,.09);
  --indigo:#5457D6; --indigo-deep:#3B3DA8; --indigo-soft:#EEEEFC;
  --coral:#FF6F61; --coral-soft:#FFEDEA;
  --dark-page:#1C1C1E; --dark-card:#2C2C2E; --indigo-dark:#7B7EF0; --coral-dark:#FF8A7E;
  --r-ctrl:10px; --r-card:14px; --r-sheet:20px;
  --shadow:0 2px 8px rgba(0,0,0,.06); --shadow-lg:0 18px 50px rgba(59,61,168,.16);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --round:"Nunito Sans","Inter",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --container:1120px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:var(--indigo);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- layout & type utilities ---- */
.rg-container{max-width:var(--container);margin:0 auto;padding:0 24px}
.rg-h1{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:1.02;font-size:clamp(2.6rem,6vw,4.4rem);margin:0 0 18px}
.rg-h2{font-weight:800;letter-spacing:-.025em;line-height:1.1;font-size:clamp(1.7rem,3.4vw,2.6rem);margin:0 0 14px}
.rg-h3{font-weight:750;letter-spacing:-.02em;font-size:clamp(1.3rem,2vw,1.6rem);margin:0 0 12px}
.rg-lede{font-size:1.14rem;color:var(--ink-2);max-width:62ch;margin:0 0 8px}
.rg-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--indigo);margin:0 0 14px}
.rg-kicker{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin:0 0 10px}
.rg-tc{text-align:center}
.rg-mx{margin-left:auto;margin-right:auto}
.rg-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-right:8px;vertical-align:middle}

/* ---- buttons ---- */
.rg-btn{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:.95rem;border-radius:var(--r-ctrl);padding:11px 20px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.rg-btn:hover{text-decoration:none;transform:translateY(-1px)}
.rg-btn--coral{background:var(--coral);color:#fff}
.rg-btn--coral:hover{background:#ff5a4a;box-shadow:0 8px 20px rgba(255,111,97,.32)}
.rg-storebtn{display:inline-flex;align-items:center;gap:11px;background:#fff;color:var(--ink);border:1px solid var(--hairline);border-radius:12px;padding:10px 18px;font-weight:600;transition:transform .15s ease,box-shadow .15s ease}
.rg-storebtn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow)}
.rg-storebtn span{display:flex;flex-direction:column;line-height:1.15}
.rg-storebtn span span{font-size:.68rem;color:var(--ink-2);font-weight:500}
.rg-storebtn strong{font-size:1rem;font-weight:700}
.rg-storebtn svg{flex:0 0 auto;color:var(--ink)}
.rg-storebtn--dark{background:var(--dark-page);color:#fff;border-color:transparent}
.rg-storebtn--dark span span{color:rgba(255,255,255,.6)}
.rg-storebtn--dark svg{color:#fff}
.rg-storebtn--dark:hover{background:#000}

/* ---- WP core buttons ---- */
.wp-block-button__link{background:var(--coral);color:#fff;border-radius:var(--r-ctrl);padding:11px 22px;font-weight:650}
.is-style-outline .wp-block-button__link{background:transparent;color:var(--indigo);border:1px solid var(--indigo)}

/* ==========================================================================
   NAV (dark chrome)
   ========================================================================== */
.rg-skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;z-index:1000}
.rg-skip:focus{left:12px;top:12px}
.rg-nav{position:sticky;top:0;z-index:100;background:rgba(28,28,30,.92);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.rg-nav__inner{max-width:var(--container);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:24px}
.rg-wordmark{font-weight:800;letter-spacing:-.035em;font-size:1.5rem;color:#fff}
.rg-wordmark:hover{text-decoration:none}
.rg-wm-gear{color:var(--indigo-dark)}
.rg-wm-dot{color:var(--coral)}
.rg-nav__links{display:flex;align-items:center;gap:22px;margin-left:12px;flex:1}
.rg-nav__links>a,.rg-nav__trigger{color:rgba(255,255,255,.82);font-size:.92rem;font-weight:550;background:none;border:0;cursor:pointer;font-family:inherit;padding:0}
.rg-nav__links>a:hover,.rg-nav__trigger:hover{color:#fff;text-decoration:none}
.rg-nav__group{position:relative}
.rg-nav__trigger::after{content:"";display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:6px;vertical-align:middle}
.rg-nav__menu{position:absolute;top:calc(100% + 14px);left:-16px;min-width:230px;background:var(--dark-card);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-card);padding:8px;display:none;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.rg-nav__group.is-open .rg-nav__menu{display:block}
.rg-nav__menu a{display:block;color:rgba(255,255,255,.82);padding:9px 12px;border-radius:8px;font-size:.92rem}
.rg-nav__menu a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.rg-nav__cta{padding:9px 18px;font-size:.9rem}
.rg-nav__burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:8px}
.rg-nav__burger span{width:22px;height:2px;background:#fff;border-radius:2px}

/* ==========================================================================
   HERO
   ========================================================================== */
.rg-hero{background:radial-gradient(1200px 500px at 78% -10%,rgba(84,87,214,.10),transparent 60%),var(--page);padding:72px 0 84px;overflow:hidden}
.rg-hero__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.rg-hero__copy{max-width:560px}
.rg-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 18px}
.rg-hero__trust{font-size:.9rem;color:var(--ink-2);display:flex;align-items:center;flex-wrap:wrap}
.rg-hero__media{position:relative}

/* browser frame */
.rg-frame{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-sheet);box-shadow:var(--shadow-lg);overflow:hidden}
.rg-frame__bar{height:34px;background:#f0f0f3;border-bottom:1px solid var(--hairline);display:flex;align-items:center;gap:7px;padding:0 14px}
.rg-frame__bar span{width:11px;height:11px;border-radius:50%;background:#d6d6dc}
.rg-frame__bar span:first-child{background:#ff5f57}.rg-frame__bar span:nth-child(2){background:#febc2e}.rg-frame__bar span:nth-child(3){background:#28c840}
.rg-frame img{width:100%}
.rg-frame--sm{max-width:620px}

/* ==========================================================================
   BANDS
   ========================================================================== */
.rg-band{padding:84px 0}
.rg-band--soft{background:linear-gradient(180deg,#fff,#fafaff)}
.rg-band--dark{background:var(--dark-page);color:#fff}
.rg-band--dark .rg-lede{color:rgba(255,255,255,.72)}
.rg-band--dark .rg-kicker{color:var(--indigo-dark)}
.rg-band__center{text-align:center;max-width:820px;margin:0 auto}

/* six-stage rail */
.rg-rail{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:18px;counter-reset:none}
.rg-rail li{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px 18px;box-shadow:var(--shadow);position:relative}
.rg-rail__n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--indigo-soft);color:var(--indigo);font-weight:800;font-family:var(--round);margin-bottom:12px}
.rg-rail h3{font-size:1.05rem;margin:0 0 6px;letter-spacing:-.01em}
.rg-rail p{font-size:.86rem;color:var(--ink-2);margin:0;line-height:1.5}

/* proof chips */
.rg-proof__head{max-width:640px;margin-bottom:8px}
.rg-chips{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.rg-chips li{background:var(--dark-card);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:9px 15px;font-size:.9rem;color:rgba(255,255,255,.85)}
.rg-chips b{font-family:var(--round);font-weight:800;color:#fff;margin-left:6px}

/* spotlights */
.rg-spot{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;margin-top:56px}
.rg-spot--rev .rg-spot__copy{order:2}.rg-spot--rev .rg-spot__media{order:1}
.rg-spot--tight{margin-top:0}
.rg-spot__copy p{color:var(--ink-2);max-width:46ch}
.rg-band--dark .rg-spot__copy p{color:rgba(255,255,255,.72)}
.rg-link{font-weight:650;display:inline-block;margin-top:8px}
.rg-link--light{color:var(--indigo-dark)}

/* coral moment */
.rg-moment{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.rg-moment__ring{text-align:center}
.rg-ring__num{font-family:var(--round);font-weight:900;font-size:46px;fill:var(--ink)}
.rg-ring__lbl{font-size:11px;letter-spacing:.14em;fill:var(--ink-3);font-weight:700}
.rg-moment__avg{color:var(--ink-2);font-size:.9rem;margin-top:10px}
.rg-firstcard{margin-top:22px;background:var(--coral-soft);border:1px solid rgba(255,111,97,.28);border-radius:var(--r-card);padding:18px 20px;position:relative}
.rg-firstcard::before{content:"";position:absolute;left:20px;top:24px;width:9px;height:9px;border-radius:50%;background:var(--coral)}
.rg-firstcard{padding-left:44px}
.rg-firstcard__tag{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);display:block;margin-bottom:4px}
.rg-firstcard strong{font-size:1.15rem;letter-spacing:-.01em}
.rg-firstcard p{margin:6px 0 0;font-size:.88rem;color:var(--ink-2)}
.rg-firstcard code{font-family:var(--mono);font-size:.85em;background:rgba(84,87,214,.08);padding:1px 5px;border-radius:5px}

/* audiences */
.rg-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
.rg-aud>div{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow)}
.rg-aud h3,.rg-aud h4{margin:0 0 8px;font-size:1.05rem;letter-spacing:-.01em}
.rg-aud p{margin:0;color:var(--ink-2);font-size:.92rem}

/* final CTA */
.rg-cta{background:linear-gradient(140deg,var(--indigo-deep),var(--indigo));color:#fff;padding:88px 0}
.rg-cta__inner{text-align:center;max-width:760px;margin:0 auto}
.rg-cta .rg-lede{color:rgba(255,255,255,.82);margin-left:auto;margin-right:auto}
.rg-cta__btns{justify-content:center;margin-top:26px}
.rg-cta__note{margin-top:18px;font-size:.85rem;color:rgba(255,255,255,.7)}

/* ==========================================================================
   POST / PAGE
   ========================================================================== */
.rg-post-hero{max-width:820px}
.rg-eyebrow.wp-block-post-terms,.rg-post-hero .rg-eyebrow{color:var(--indigo)}
.rg-meta{color:var(--ink-3);font-size:.9rem}
main .wp-block-post-content{padding-top:32px;padding-bottom:64px}
main .wp-block-post-content>*{margin-top:1.1em}

/* ==========================================================================
   REVEAL
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.rg-foot{background:var(--dark-page);color:rgba(255,255,255,.7);padding:64px 0 28px}
.rg-foot__inner{max-width:var(--container);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.3fr 2fr;gap:48px}
.rg-foot__brand .rg-wordmark{font-size:1.6rem}
.rg-foot__tag{max-width:34ch;margin:14px 0 18px;font-size:.92rem}
.rg-foot__stores{display:flex;flex-wrap:wrap;gap:10px}
.rg-foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rg-foot__col h4,.rg-foot__col h3,.rg-foot__h{margin-top:0;color:#fff;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.rg-foot__col a{display:block;color:rgba(255,255,255,.7);font-size:.92rem;padding:5px 0}
.rg-foot__col a:hover{color:#fff;text-decoration:none}
.rg-foot__legal{max-width:var(--container);margin:40px auto 0;padding:22px 24px 0;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.82rem;color:rgba(255,255,255,.5)}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .rg-hero__grid{grid-template-columns:1fr;gap:40px}
  .rg-rail{grid-template-columns:repeat(3,1fr)}
  .rg-spot,.rg-spot--rev .rg-spot__copy,.rg-spot--rev .rg-spot__media{grid-template-columns:1fr;order:0}
  .rg-spot{gap:28px}
  .rg-moment{grid-template-columns:1fr;gap:32px;text-align:center}
  .rg-firstcard{text-align:left}
  .rg-aud{grid-template-columns:repeat(2,1fr)}
  .rg-foot__inner{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  .rg-nav__links{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:flex-start;gap:4px;background:var(--dark-page);padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);display:none}
  .rg-nav__links.is-open{display:flex}
  .rg-nav__menu{position:static;display:block;background:none;border:0;box-shadow:none;padding:4px 0 4px 12px}
  .rg-nav__cta{margin-left:auto}
  .rg-nav__burger{display:flex}
  .rg-rail{grid-template-columns:1fr 1fr}
  .rg-aud{grid-template-columns:1fr}
  .rg-band{padding:60px 0}
  .rg-foot__cols{grid-template-columns:1fr 1fr}
}

/* ==========================================================================
   PAGE HERO + PROSE CONTENT (page.html / single.html)
   ========================================================================== */
.rg-pagehero{padding-top:64px;padding-bottom:36px}
.rg-pagehero .wp-block-post-title{max-width:var(--container);margin:0 auto;font-weight:800;letter-spacing:-.03em;line-height:1.05;font-size:clamp(2.2rem,4.4vw,3.1rem)}
.rg-pagehero .rg-eyebrow{max-width:var(--container);margin:0 auto 12px}
main .wp-block-post-content{font-size:1.06rem}
main .wp-block-post-content>h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:750;letter-spacing:-.02em;margin:2.2em 0 .5em}
main .wp-block-post-content>h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em;margin:1.6em 0 .4em}
main .wp-block-post-content>p{margin:0 0 1.1em;color:#2a2a2c}
main .wp-block-post-content>ul,main .wp-block-post-content>ol{margin:0 0 1.1em;padding-left:1.3em}
main .wp-block-post-content li{margin:.3em 0}
main .wp-block-post-content strong{color:var(--ink)}
main .wp-block-post-content code{font-family:var(--mono);font-size:.88em;background:rgba(84,87,214,.08);padding:2px 6px;border-radius:6px}
main .wp-block-post-content blockquote{border-left:3px solid var(--indigo);margin:1.4em 0;padding:.2em 0 .2em 20px;color:var(--ink-2)}

/* answer-first callout (Layer 1, extractable) */
.rg-answer{background:var(--indigo-soft);border:1px solid rgba(84,87,214,.2);border-radius:var(--r-card);padding:20px 24px;margin:0 0 28px;font-size:1.1rem;line-height:1.55}
.rg-answer strong{color:var(--indigo-deep)}

/* honest caveat / note */
.rg-note{background:var(--coral-soft);border:1px solid rgba(255,111,97,.25);border-radius:var(--r-card);padding:14px 18px;margin:1.4em 0;font-size:.95rem;color:#7a3b34}
.rg-note b{color:var(--coral)}

/* definition (GEO extractable) */
.rg-def{border-left:3px solid var(--indigo);padding:2px 0 2px 18px;margin:1.4em 0}
.rg-def dt{font-weight:750;font-size:1.05rem;margin-bottom:4px}
.rg-def dd{margin:0;color:var(--ink-2)}

/* comparison table */
.rg-cmp{overflow-x:auto;margin:1.6em 0}
.rg-cmp table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.rg-cmp th,.rg-cmp td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hairline);vertical-align:top}
.rg-cmp thead th{background:var(--indigo-soft);color:var(--indigo-deep);font-weight:700;border-bottom:0}
.rg-cmp tbody tr:hover{background:#fafaff}
.rg-cmp td:first-child{font-weight:600}

/* FAQ (question-shaped H3s) */
.rg-faq{margin:1.6em 0}
.rg-faq details{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--card);margin:0 0 10px;padding:2px 20px}
.rg-faq summary{cursor:pointer;font-weight:650;font-size:1.05rem;padding:16px 0;list-style:none}
.rg-faq summary::-webkit-details-marker{display:none}
.rg-faq summary::after{content:"+";float:right;color:var(--indigo);font-weight:700}
.rg-faq details[open] summary::after{content:"\2212"}
.rg-faq details[open] summary{padding-bottom:6px}
.rg-faq p{margin:0 0 16px;color:var(--ink-2)}

/* steps (product tour / how-to) */
.rg-steps{list-style:none;counter-reset:s;margin:1.6em 0;padding:0}
.rg-steps li{counter-increment:s;position:relative;padding:0 0 22px 56px;border-left:2px solid var(--hairline);margin-left:16px}
.rg-steps li::before{content:counter(s);position:absolute;left:-17px;top:-2px;width:32px;height:32px;border-radius:50%;background:var(--indigo);color:#fff;display:grid;place-items:center;font-family:var(--round);font-weight:800;font-size:.9rem}
.rg-steps li:last-child{border-left-color:transparent}
.rg-steps h3{margin:0 0 4px;font-size:1.1rem}
.rg-steps p{margin:0;color:var(--ink-2)}

/* misc content helpers reused on wide pages */
.rg-band .rg-lede.rg-tc{margin-left:auto;margin-right:auto}
.rg-aud--3{grid-template-columns:repeat(3,1fr)}
.rg-feature-hero{padding-top:72px;padding-bottom:24px}
.rg-feature-hero .rg-container{max-width:820px}

/* blog post grid (home.html / archive) */
.rg-postgrid .wp-block-post-template{gap:24px}
.rg-postgrid .wp-block-post-template>li{background:var(--card);border:1px solid var(--hairline);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow)}
.rg-postgrid .wp-block-post-terms{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);margin-bottom:8px}
.rg-postgrid .wp-block-post-title{margin:0 0 8px;font-weight:750;letter-spacing:-.01em}
.rg-postgrid .wp-block-post-title a{color:var(--ink)}
.rg-postgrid .wp-block-post-excerpt__excerpt{color:var(--ink-2);font-size:.95rem}
.rg-postgrid .wp-block-post-excerpt__more-text a{color:var(--indigo);font-weight:600}
.rg-postgrid .wp-block-query-pagination{margin-top:28px;display:flex;gap:12px}
.rg-postgrid .wp-block-query-pagination a,.rg-postgrid .wp-block-query-pagination span{color:var(--indigo)}