/* ============================================================
   ToJupiter V2 — Resources section styles
   Loaded IN ADDITION to styles.css (which provides tokens, reset,
   buttons, nav, footer and the reveal system). Everything here is
   namespaced .r-* / --r-* so it can never collide with the shared
   stylesheet or the orbit/services modules.
   Font choice is centralised in --r-display (one-line swap).
   ============================================================ */

:root{
  /* single swap point for the resources display font */
  --r-display:'Inter Display','Inter',sans-serif;
  --r-pill:999px;

  /* dark parent surface tokens */
  --r-line:rgba(255,255,255,0.12);
  --r-line-bright:rgba(166,64,255,0.55);
  --r-card:rgba(255,255,255,0.03);

  /* light article surface tokens (scoped names so styles.css --ink etc. stay intact) */
  --r-ink:#0B0E3F;        /* body text on light */
  --r-ink-soft:#4A4D74;   /* meta text on light */
  --r-paper:#FFFFFF;
  --r-paper2:#F7F7FC;
  --r-line-l:#E7E7F2;
}

/* ============================================================
   SHARED — light nav variant (article pages sit on white)
   ============================================================ */
.tj-nav--rlight,
.tj-nav--rlight.is-solid{
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--r-line-l);
}
.tj-nav--rlight .tj-nav__link,
.tj-nav--rlight .tj-nav__trigger{color:var(--navy);}
.tj-nav--rlight .tj-nav__link:hover,
.tj-nav--rlight .tj-nav__trigger:hover{color:var(--purple-2);}
.tj-nav--rlight .tj-nav__logo-img--white{display:none;}
.tj-nav--rlight .tj-nav__logo-img--black{display:block;}
.tj-nav--rlight .tj-nav__burger span{background:var(--navy);}
.tj-nav--rlight :focus-visible{outline-color:var(--purple-2);}
/* No backdrop-filter on mobile. A non-none backdrop-filter makes the fixed nav
   the containing block for the fixed mobile panel, clipping the whole menu to
   the nav bar height (CLAUDE.md hard rule 3). styles.css only guards
   `.tj-nav.is-solid`, which never matches this variant, so it needs its own. */
@media (max-width:980px){
  .tj-nav--rlight,
  .tj-nav--rlight.is-solid{
    background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
}

/* ============================================================
   PARENT (dark) — starfield backdrop
   ============================================================ */
.r-stars{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,0.5),transparent),
    radial-gradient(1px 1px at 68% 12%,rgba(233,153,255,0.5),transparent),
    radial-gradient(1.5px 1.5px at 84% 42%,rgba(255,255,255,0.35),transparent),
    radial-gradient(1px 1px at 34% 62%,rgba(255,255,255,0.3),transparent),
    radial-gradient(1px 1px at 92% 78%,rgba(166,64,255,0.45),transparent),
    radial-gradient(1px 1px at 8% 84%,rgba(255,255,255,0.35),transparent);
}
.r-page{position:relative;z-index:1;}
body.r-parent-bg{background:var(--navy);}   /* no white flash behind the fixed nav / short pages */
.r-page-dark{position:relative;background:var(--navy);color:#fff;min-height:100vh;}
.r-page-dark::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% -8%,rgba(120,0,224,0.28),transparent 60%);
}

/* hero — headline only */
.r-hero{max-width:1180px;margin:0 auto;padding:150px 48px 0;position:relative;z-index:1;}
.r-hero h1{
  font-family:var(--r-display);font-weight:800;
  font-size:clamp(38px,5.2vw,62px);line-height:1.05;letter-spacing:-0.03em;
  max-width:940px;color:#fff;text-wrap:balance;
}
.r-hero .r-grad{
  background:linear-gradient(135deg,var(--purple-1),var(--purple-4));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* type filter */
.r-filter{max-width:1180px;margin:0 auto;padding:44px 48px 0;display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:relative;z-index:1;}
.r-filter__label{font-size:16px;color:#fff;font-weight:500;flex-shrink:0;}
.r-pills{display:flex;gap:12px;flex-wrap:wrap;}
.r-pill{
  background:transparent;border:1.5px solid var(--r-line);color:#fff;
  padding:12px 26px;border-radius:var(--r-pill);font-size:16px;font-weight:600;letter-spacing:-0.005em;
  transition:border-color .22s ease,background .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease;
}
.r-pill:hover{border-color:var(--r-line-bright);}
.r-pill:active{transform:scale(0.97);}
.r-pill.on{
  border-color:var(--purple-1);background:rgba(166,64,255,0.14);color:#fff;
  box-shadow:0 0 0 1px rgba(166,64,255,0.35),0 8px 26px rgba(166,64,255,0.22);
}

/* feed */
.r-feed{max-width:1180px;margin:0 auto;padding:40px 48px 8px;position:relative;z-index:1;}
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.r-card{
  background:var(--r-card);border:1px solid var(--r-line);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.r-card:hover{transform:translateY(-4px);border-color:var(--r-line-bright);box-shadow:0 16px 38px rgba(76,0,143,0.3);}
.r-card.r-hidden{display:none;}
.r-thumb{height:158px;position:relative;overflow:hidden;}
.r-thumb.blog{background:linear-gradient(135deg,var(--purple-3),var(--purple-2) 55%,var(--purple-1));}
.r-thumb.tool{background:linear-gradient(135deg,var(--purple-2),var(--purple-1) 60%,var(--purple-4));}
.r-thumb.learning{background:linear-gradient(135deg,#1B0A4A,var(--purple-3) 55%,var(--purple-2));}
.r-thumb.playbook{background:linear-gradient(135deg,var(--purple-3),#2930CC 60%,var(--purple-2));}
.r-thumb::after{content:'';position:absolute;right:-30px;bottom:-50px;width:150px;height:150px;border-radius:50%;border:1px solid rgba(255,255,255,0.32);}
.r-thumb::before{content:'';position:absolute;left:-40px;top:-40px;width:110px;height:110px;border-radius:50%;border:1px solid rgba(255,255,255,0.14);}
/* a card with a real preview creative instead of the gradient placeholder */
.r-thumb--art{background:var(--navy);}
.r-thumb--art img{width:100%;height:100%;object-fit:cover;display:block;}
.r-thumb--art::before,.r-thumb--art::after{content:none;}
.r-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:11px;flex:1;}
.r-tag{align-self:flex-start;font-size:12px;font-weight:600;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--r-line);color:#fff;}
.r-tag.tool{border:none;color:#fff;background:linear-gradient(135deg,var(--purple-1),var(--purple-2));}
.r-tag.learning{border-color:var(--purple-1);color:var(--purple-4);}
.r-tag.playbook{border-color:var(--purple-4);color:var(--purple-4);}
.r-card h3{font-family:var(--r-display);font-size:18px;font-weight:700;line-height:1.32;color:#fff;}
.r-card-meta{margin-top:auto;font-size:12.5px;color:rgba(255,255,255,0.6);}

/* empty state */
.r-empty{display:none;flex-direction:column;align-items:center;text-align:center;padding:40px 24px 24px;}
.r-empty.show{display:flex;}
.r-orbit-svg{width:360px;max-width:84vw;height:auto;}
.r-empty p{margin-top:16px;font-family:var(--r-display);font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-0.01em;color:#fff;}
.r-empty span{margin-top:8px;font-size:14px;color:rgba(255,255,255,0.72);}

/* ============================================================
   PARENT — hero meteor sky (a curved meteor passes now and then)
   ============================================================ */
.r-sky{position:absolute;top:0;left:0;width:100%;height:780px;overflow:hidden;pointer-events:none;z-index:0;}
.r-sky-svg{width:100%;height:100%;display:block;}

/* ============================================================
   SHARED — dark, premium final CTA strip
   ============================================================ */
.r-cta{max-width:1180px;margin:80px auto 96px;padding:0 48px;position:relative;z-index:1;}
.r-cta__inner{
  position:relative;overflow:hidden;border-radius:28px;padding:54px 56px 44px;isolation:isolate;
  background:
    radial-gradient(ellipse 62% 105% at 10% -12%, rgba(120,0,224,0.42), transparent 58%),
    radial-gradient(ellipse 72% 120% at 110% 118%, rgba(166,64,255,0.26), transparent 60%),
    linear-gradient(140deg, #0C0733 0%, #06072C 52%, #140A3A 100%);
  border:1px solid rgba(166,64,255,0.22);
  box-shadow:0 40px 90px -42px rgba(120,0,224,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.r-cta__planet{position:absolute;right:-72px;bottom:-108px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#F3C9FF,var(--purple-1) 42%,#22004f);opacity:0.5;filter:blur(1px);}
.r-cta__ring{position:absolute;right:-26px;top:-60px;width:210px;height:210px;border-radius:50%;border:1px solid rgba(255,255,255,0.14);}
.r-cta__meteor{
  position:absolute;top:-6%;left:-14%;width:200px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(233,153,255,0.9),rgba(255,255,255,0));
  transform:rotate(24deg);filter:blur(0.4px);opacity:0;
  animation:rMeteor 9s ease-in-out infinite;
}
@keyframes rMeteor{
  0%{opacity:0;transform:translate(0,0) rotate(24deg);}
  5%{opacity:0.9;}
  18%{opacity:0;}
  100%{opacity:0;transform:translate(640px,320px) rotate(24deg);}
}
.r-cta__body{position:relative;z-index:1;}
.r-cta h2{font-family:var(--r-display);font-size:clamp(26px,3.4vw,36px);font-weight:800;color:#fff;letter-spacing:-0.02em;max-width:640px;line-height:1.12;}
.r-cta p{color:#fff;font-size:16px;margin-top:12px;max-width:560px;}
.r-cta__inner .tj-btn{margin-top:26px;}

/* rotating customer logos — one line, white silhouettes that fade in and out */
.r-cta__logos{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,0.10);}
.r-cta__logo{height:23px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:0.55;transition:opacity .7s ease;}
.r-cta__logo.is-fading{opacity:0;}
/* JS (initCtaLogos) upgrades the static set into one continuous left-scrolling
   strip that fades in and out at the edges; reduced-motion keeps the static set */
.r-cta__logos.is-marquee{display:block;flex-wrap:nowrap;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);}
.r-cta__logos-track{display:flex;align-items:center;gap:34px;width:max-content;
  animation:rCtaMarquee 45s linear infinite;will-change:transform;}
.r-cta__logos.is-marquee:hover .r-cta__logos-track{animation-play-state:paused;}
@keyframes rCtaMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* button shine sweep — a slow gloss travels across to draw the eye */
.r-shine{position:relative;overflow:hidden;}
.r-shine::after{content:"";position:absolute;top:-25%;left:-75%;width:45%;height:150%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.55),transparent);transform:skewX(-18deg);animation:rShine 5s ease-in-out infinite;pointer-events:none;}
@keyframes rShine{0%,70%{left:-75%;}84%{left:150%;}100%{left:150%;}}

/* ============================================================
   SHARED — Book a call modal (hosts the HubSpot embed)
   ============================================================ */
.r-modal-overlay{
  position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:24px;
  background:rgba(4,6,46,0.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.r-modal-overlay.is-open{display:flex;}
.r-modal{
  position:relative;width:100%;max-width:540px;max-height:90vh;overflow:auto;
  background:#fff;color:var(--r-ink);border-radius:24px;padding:38px 38px 34px;
  box-shadow:0 40px 120px -20px rgba(8,4,40,0.6);
  animation:rModalIn .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes rModalIn{from{opacity:0;transform:translateY(14px) scale(.98);}to{opacity:1;transform:none;}}
.r-modal__close{
  position:absolute;top:15px;right:15px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--r-line-l);background:#fff;color:var(--navy);
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:border-color .2s ease,color .2s ease,transform .2s ease;
}
.r-modal__close:hover{border-color:var(--purple-1);color:var(--purple-2);transform:rotate(90deg);}
.r-modal h2{font-family:var(--r-display);font-size:25px;font-weight:800;color:var(--navy);letter-spacing:-0.02em;line-height:1.15;padding-right:30px;}
.r-modal p{font-size:15px;color:var(--r-ink-soft);margin-top:8px;line-height:1.55;}
/* the homepage custom form (.cta-form/.tj-form, styled in styles.css) is hosted
   in the modal; the modal is already a white card, so strip the form's own card */
.r-modal .cta-form{background:transparent;box-shadow:none;padding:0;border-radius:0;color:var(--r-ink);margin-top:22px;}
.r-modal .tj-form__submit{margin-top:4px;}

/* ============================================================
   ARTICLE (light editorial)
   ============================================================ */
.r-article{background:var(--r-paper);color:var(--r-ink);}
.r-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--purple-1),var(--purple-4));z-index:1100;}

.r-layout{max-width:1160px;margin:0 auto;padding:76px 48px 0;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;}
.r-crumb{grid-column:1/-1;padding:26px 0 0;font-size:13.5px;color:var(--r-ink-soft);}
.r-crumb a:hover{color:var(--navy);}
.r-content{padding:26px 0 40px;min-width:0;}

.r-hero-img{
  width:100%;aspect-ratio:16/8.5;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--purple-3),var(--purple-2) 50%,var(--purple-1));
}
.r-hero-img::after{content:'';position:absolute;right:-70px;bottom:-120px;width:340px;height:340px;border-radius:50%;border:1px solid rgba(255,255,255,0.4);}
.r-hero-img::before{content:'';position:absolute;right:20px;bottom:-64px;width:190px;height:190px;border-radius:50%;border:1px solid rgba(255,255,255,0.28);}
.r-img-note{position:absolute;left:22px;bottom:16px;font-size:11.5px;color:rgba(255,255,255,0.72);}

.r-series{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-size:13.5px;color:var(--r-ink-soft);}
.r-series b{font-family:var(--r-display);font-weight:800;color:var(--purple-2);}
.r-series a{color:var(--r-ink-soft);}
.r-series a:hover{color:var(--navy);}
.r-series + h1{margin-top:10px;}

.r-content h1{font-family:var(--r-display);font-size:clamp(34px,4.6vw,52px);font-weight:800;line-height:1.08;letter-spacing:-0.028em;color:var(--navy);margin-top:36px;}

.r-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:var(--r-ink-soft);}
.r-meta .r-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--purple-3),var(--purple-1));display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;}
.r-meta .r-name{color:var(--navy);font-weight:600;}
.r-meta .r-dot{opacity:0.4;}
.r-updated{font-size:13px;color:var(--r-ink-soft);background:var(--r-paper2);border:1px solid var(--r-line-l);border-radius:var(--r-pill);padding:3px 12px;}

.r-ai-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;padding-bottom:30px;border-bottom:1px solid var(--r-line-l);}
.r-ai-btn{background:#fff;border:1px solid var(--r-line-l);color:var(--r-ink);padding:9px 18px;border-radius:var(--r-pill);font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s ease,color .2s ease;}
.r-ai-btn:hover{border-color:var(--purple-1);color:var(--navy);}
.r-ai-btn svg{width:14px;height:14px;opacity:0.7;}

.r-takeaways{margin:36px 0 6px;border:1px solid rgba(166,64,255,0.35);border-radius:20px;padding:26px 30px;background:linear-gradient(135deg,rgba(166,64,255,0.06),rgba(233,153,255,0.06));}
.r-takeaways h2{font-family:var(--r-display);font-size:15px;font-weight:700;color:var(--purple-2);margin:0;}
.r-takeaways ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px;}
.r-takeaways li{padding-left:22px;position:relative;font-size:16px;line-height:1.55;color:var(--r-ink);}
.r-takeaways li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:8px;border-radius:50%;background:var(--purple-1);}

.r-body p{margin-top:22px;}
.r-body h2{font-family:var(--r-display);font-size:27px;font-weight:700;letter-spacing:-0.015em;line-height:1.25;color:var(--navy);margin-top:52px;scroll-margin-top:96px;}
.r-body h3{font-family:var(--r-display);font-size:20px;font-weight:700;letter-spacing:-0.01em;line-height:1.3;color:var(--navy);margin-top:34px;scroll-margin-top:96px;}
.r-body strong{font-weight:700;color:var(--navy);}
.r-body a{color:var(--purple-2);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(120,0,224,.35);}
.r-body a:hover{text-decoration-color:var(--purple-2);}

/* lists */
.r-body ul,.r-body ol{margin:20px 0 0 22px;display:flex;flex-direction:column;gap:10px;}
.r-body li{font-size:16px;line-height:1.7;padding-left:4px;}
.r-body ul li::marker{color:var(--purple-1);}
.r-body ol li::marker{color:var(--purple-2);font-weight:700;}

/* in-body figures. Ad creatives are usually portrait, so cap the height and
   centre them rather than letting a 4:5 screenshot run 1200px down the page. */
.r-fig{margin:36px 0 0;}
.r-fig img{
  display:block;margin:0 auto;
  width:auto;height:auto;max-width:100%;max-height:720px;
  border-radius:16px;border:1px solid var(--r-line-l);background:var(--r-paper2);
}
.r-fig figcaption{margin-top:12px;font-size:14px;line-height:1.6;color:var(--r-ink-soft);text-align:center;max-width:60ch;margin-left:auto;margin-right:auto;}

/* pull quote: a line lifted from the flow, larger and purple-accented */
.r-pull{margin:42px 0 6px;padding:4px 0 4px 26px;border-left:3px solid var(--purple-2);}
.r-pull p{margin:0;font-family:var(--r-display);font-size:clamp(21px,2.5vw,27px);font-weight:600;line-height:1.35;letter-spacing:-0.02em;color:var(--navy);}

/* tables scroll on narrow screens rather than breaking the layout */
.r-tablewrap{margin-top:30px;overflow-x:auto;border:1px solid var(--r-line-l);border-radius:16px;-webkit-overflow-scrolling:touch;}
.r-body table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px;}
.r-body thead th{text-align:left;font-family:var(--r-display);font-weight:700;color:var(--navy);background:var(--r-paper2);padding:14px 18px;border-bottom:1px solid var(--r-line-l);white-space:nowrap;}
.r-body tbody td{padding:14px 16px;border-bottom:1px solid var(--r-line-l);color:var(--r-ink);vertical-align:top;line-height:1.55;}
.r-body tbody tr:last-child td{border-bottom:0;}
/* First column is the row label, so it gets weight and colour but NOT a large
   minimum width. At 230px it took a third of a 708px article table even when the
   label was two words, and the prose columns collapsed to ~118px, wrapping to
   seven lines of one or two words. Auto layout distributes far better from a low
   floor: columns carrying the most text get the most room. */
.r-body tbody td:first-child{font-weight:600;color:var(--navy);min-width:130px;}

/* FAQ inside an article (reuses the .faq accordion from styles.css) */
.r-faq{margin-top:26px;}
.r-faq .faq__q{font-size:16.5px;}

/* optional real hero image; without one the gradient block is used */
.r-hero-img--photo{background:none;aspect-ratio:auto;border-radius:24px;}
.r-hero-img--photo img{width:100%;height:auto;display:block;border-radius:24px;border:1px solid var(--r-line-l);}
.r-hero-img--photo::before,.r-hero-img--photo::after{content:none;}

.r-stat{margin-top:32px;display:flex;gap:24px;align-items:center;border:1px solid var(--r-line-l);background:var(--r-paper2);border-radius:20px;padding:26px 30px;}
.r-stat__num{font-family:var(--r-display);font-size:44px;font-weight:800;letter-spacing:-0.03em;line-height:1;background:linear-gradient(135deg,var(--purple-2),var(--purple-1));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;}
.r-stat__text{font-size:15px;color:var(--r-ink);line-height:1.5;}

.r-change{margin-top:48px;border-radius:22px;padding:2px;background:linear-gradient(135deg,var(--purple-1),var(--purple-4));}
.r-change__inner{background:#fff;border-radius:20px;padding:30px 32px;}
.r-change__inner h2{font-family:var(--r-display);font-size:20px;font-weight:700;margin-top:0;color:var(--navy);}
.r-change__inner ol{margin:16px 0 0 20px;display:flex;flex-direction:column;gap:10px;font-size:16px;color:var(--r-ink);}

/* upgraded author box */
.r-author{
  margin-top:60px;display:flex;gap:22px;align-items:center;
  border:1px solid var(--r-line-l);border-radius:22px;padding:26px 30px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(166,64,255,0.05),rgba(233,153,255,0.05));
}
.r-author::after{content:'';position:absolute;right:-60px;top:-60px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(166,64,255,0.16),transparent 70%);pointer-events:none;}
.r-author__av{width:72px;height:72px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,var(--purple-3),var(--purple-1));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#fff;box-shadow:0 8px 24px rgba(166,64,255,0.28);position:relative;z-index:1;}
/* photo avatars: the headshot PNG already has its own circular treatment and
   purple ring, so no gradient/shadow/clip, just size it */
.r-author__av--photo{width:88px;height:88px;background:none;box-shadow:none;border-radius:0;}
.r-author__av--photo img{width:100%;height:100%;object-fit:contain;display:block;}
/* headshot byline avatars ship as transparent PNGs with their own planet ring,
   so the gradient disc and circular crop must both come off. Scoped to .r-meta
   because the plain .r-meta .r-avatar rule that paints them is class+class and
   would otherwise win. */
.r-meta .r-avatar--img{background:none;border-radius:0;}
.r-avatar--img img{width:100%;height:100%;object-fit:contain;display:block;}
.r-author__meta{position:relative;z-index:1;}
.r-author__name{font-family:var(--r-display);font-weight:700;font-size:17px;color:var(--navy);display:flex;align-items:center;gap:9px;}
/* LinkedIn link sits on the name row: one glance finds the person, and the bio
   stays clean prose (it used to end in a "More from X" link) */
.r-author__li{display:inline-flex;color:var(--purple-2);transition:color .2s ease,transform .2s ease;}
.r-author__li:hover{color:var(--purple-1);transform:translateY(-1px);}
.r-author__li svg{display:block;}
.r-author__role{font-size:13.5px;color:var(--purple-2);font-weight:600;margin-top:2px;}
.r-author__bio{font-size:14.5px;color:var(--r-ink-soft);margin-top:9px;line-height:1.6;max-width:60ch;}
.r-author__bio a{color:var(--purple-2);font-weight:600;}

/* sidebar */
.r-sidebar{padding:26px 0 40px;}
.r-side-sticky{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px;}
.r-toc{border:1px solid var(--r-line-l);border-radius:18px;padding:24px 26px;background:#fff;}
.r-toc h2{font-size:12.5px;font-weight:700;letter-spacing:0.06em;color:var(--r-ink-soft);text-transform:uppercase;}
.r-toc ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:2px;}
.r-toc a{display:block;font-size:14px;line-height:1.45;color:var(--r-ink-soft);padding:7px 10px;border-radius:10px;border-left:2px solid transparent;transition:color .15s ease,background .15s ease,border-color .15s ease;}
.r-toc a:hover{color:var(--navy);background:var(--r-paper2);}
.r-toc a.active{color:var(--purple-2);font-weight:600;border-left-color:var(--purple-1);background:rgba(166,64,255,0.06);}

/* next reads */
.r-next{max-width:1160px;margin:0 auto;padding:0 48px 40px;}
.r-next h2{font-family:var(--r-display);font-size:26px;font-weight:700;letter-spacing:-0.02em;color:var(--navy);}
.r-next__grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.r-nr{border:1px solid var(--r-line-l);border-radius:18px;overflow:hidden;background:#fff;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.r-nr:hover{transform:translateY(-4px);border-color:var(--purple-1);box-shadow:0 14px 34px rgba(76,0,143,0.12);}
.r-nr__thumb{height:120px;background:linear-gradient(135deg,var(--purple-3),var(--purple-2) 55%,var(--purple-1));}
.r-nr__thumb.v2{background:linear-gradient(135deg,var(--purple-2),var(--purple-1) 60%,var(--purple-4));}
.r-nr__body{padding:18px 20px 20px;}
.r-nr__body h3{font-family:var(--r-display);font-size:16.5px;font-weight:700;line-height:1.35;color:var(--navy);}
.r-nr__body span{display:block;font-size:13px;color:var(--r-ink-soft);margin-top:8px;}

/* light footer wrapper for article (footer stays dark; this just spaces it) */
.r-article .tj-footer{margin-top:0;}

/* copy toast */
.r-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);color:#fff;padding:11px 22px;border-radius:var(--r-pill);font-size:14px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:2100;}
.r-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .r-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:960px){
  .r-layout{grid-template-columns:1fr;gap:0;}
  .r-sidebar{display:none;}
  .r-next__grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .r-hero{padding:118px 22px 0;}
  .r-filter,.r-feed,.r-cta{padding-left:22px;padding-right:22px;}
  .r-filter{gap:14px;}
  .r-grid{grid-template-columns:1fr;}
  .r-cta__inner{padding:36px 26px;}
  .r-layout,.r-next{padding-left:22px;padding-right:22px;}
  .r-stat{flex-direction:column;align-items:flex-start;gap:12px;}
  .r-author{flex-direction:column;align-items:flex-start;gap:16px;}
  .r-modal{padding:30px 24px 26px;}
}

/* The global reduced-motion rule in styles.css already disables CSS
   animations/transitions (meteor, modal, spinner). The comet is SMIL,
   handled in resources.js (build skipped + SMIL paused under reduce). */