/* ============================================================
   ResumeShine.ai — Resources add-on styles
   Shared by: resources.html (hub) + all four article pages.
   Same design tokens as the main site. Scope prefix: .rs- for
   components unique to this add-on; token names match styles.css.
   ============================================================ */

:root {
  --bg-1: #FFF7F1;
  --bg-2: #FFF2EA;
  --white: #FFFFFF;
  --ink: #111217;
  --ink-2: #2A2D35;
  --ink-3: #68707D;
  --ink-4: #79808C;
  --ink-5: #8A8F9A;
  --orange: #FF7A18;
  --red-orange: #FF3D2E;
  --coral: #FF3366;
  --pink: #F50070;
  --peach: #FF8A3D;
  --accent-text: #D5361F;
  --grad-brand: linear-gradient(100deg, #FF7A18 0%, #FF3D2E 40%, #F50070 100%);
  --grad-cta: linear-gradient(100deg, #FF7A18 0%, #FF3D2E 34%, #FF3366 68%, #F50070 100%);
  --grad-text: linear-gradient(100deg, #FF7A18 5%, #FF3D2E 48%, #F50070 95%);
  --grad-icon: linear-gradient(135deg, #FF7A18, #F50070);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--bg-1); }
::selection { background: rgba(255, 122, 24, .25); }

body {
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Nav (scrolling pages variant: sticky) ---------- */
.rs-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 26px;
  padding: 14px 56px;
  background: rgba(255,250,246,.85);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(17,18,23,.06);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); border-radius: 8px; }
.logo:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 3px; }
.wordmark { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; }
.wordmark .shine {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rs-nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-link {
  position: relative;
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; transition: color .2s ease;
  background: none; border: none; cursor: pointer; font-family: inherit; padding: 0;
}
.nav-link:hover { color: var(--red-orange); }
.nav-link:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 3px; border-radius: 4px; }
.nav-link.active { color: var(--red-orange); }
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2.5px;
  border-radius: 2px; background: var(--grad-brand);
}
.btn-nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: #fff;
  border-radius: 999px; background: var(--grad-brand);
  box-shadow: 0 8px 20px -8px rgba(255,61,46,.55);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
  text-decoration: none;
}
.btn-nav-cta:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 26px -8px rgba(245,0,112,.5); }
.btn-nav-cta:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 3px; }
.mobile-menu-btn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; margin-left: auto;
  border: none; background: transparent; cursor: pointer; border-radius: 12px;
}
.mobile-menu-btn:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 2px; }
.rs-mob-menu-backdrop { position: fixed; inset: 0; z-index: 54; background: transparent; }
.rs-mob-menu-backdrop[hidden] { display: none; }
.rs-mob-menu {
  position: fixed; top: 64px; right: 16px; z-index: 55; min-width: 210px;
  display: flex; flex-direction: column; gap: 2px;
  background: linear-gradient(165deg, rgba(255,255,255,.98), rgba(255,250,246,.97));
  border: 1px solid #fff; border-radius: 16px; padding: 8px;
  box-shadow: 0 24px 50px -18px rgba(245,0,112,.35), 0 8px 24px -12px rgba(255,122,24,.25);
  animation: rsPopIn .3s cubic-bezier(.2,.8,.3,1) both;
}
.rs-mob-menu[hidden] { display: none; }
.rs-mob-menu a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 10px; text-decoration: none;
  font-size: 14.5px; font-weight: 700; color: var(--ink-2);
}
.rs-mob-menu a:hover { background: rgba(255,122,24,.1); }
.rs-mob-menu a.active { color: var(--red-orange); }
.rs-mob-menu hr { border: none; height: 1px; background: rgba(17,18,23,.08); margin: 4px 6px; }

/* ---------- Hub hero ---------- */
.hub-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #FFF7F1 0%, #FFF3EB 70%, #FFF1E8 100%);
  border-bottom: 1px solid rgba(17,18,23,.05);
}
.hub-hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(380px, 560px) minmax(420px, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: center;
  max-width: 1400px; margin: 0 auto; padding: 56px 56px 60px;
}
.hub-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid rgba(255,122,24,.3);
  box-shadow: 0 4px 14px -6px rgba(255,122,24,.3);
  font-size: 13px; font-weight: 700; color: #BE3E12;
  animation: rsFadeUp .6s cubic-bezier(.2,.7,.2,1) .05s backwards;
}
.hub-h1 {
  margin: 18px 0 0; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.08;
  font-weight: 800; letter-spacing: -0.03em; text-wrap: balance;
  animation: rsFadeUp .6s cubic-bezier(.2,.7,.2,1) .12s backwards;
}
.hub-sub {
  margin: 18px 0 0; max-width: 48ch; font-size: 17px; line-height: 1.65; font-weight: 500;
  color: var(--ink-3); text-wrap: pretty;
  animation: rsFadeUp .6s cubic-bezier(.2,.7,.2,1) .2s backwards;
}
.hub-search {
  position: relative; margin-top: 26px; max-width: 430px;
  animation: rsFadeUp .6s cubic-bezier(.2,.7,.2,1) .28s backwards;
}
.hub-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.hub-search input {
  width: 100%; min-height: 54px; border-radius: 999px;
  border: 1px solid rgba(17,18,23,.1); padding: 14px 20px 14px 48px;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: #fff; outline: none;
  box-shadow: 0 10px 28px -18px rgba(255,61,46,.35), 0 2px 8px rgba(17,18,23,.03);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hub-search input::placeholder { color: #A9AFB9; }
.hub-search input:focus { border-color: rgba(245,0,112,.5); box-shadow: 0 12px 30px -16px rgba(245,0,112,.35), 0 0 0 4px rgba(245,0,112,.08); }

/* Hero right: orb + orbits + floating category cards */
.hub-orb-wrap { position: relative; min-height: 420px; animation: rsFadeIn .9s ease .2s backwards; }
/* Big hero sphere — peach/orange upper-left melting into a hot-pink core
   just right of center, soft salmon base, hazy edges (matches mockup). */
.hub-orb {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 430px; height: 430px; border-radius: 50%;
  background:
    radial-gradient(circle at 60% 42%, rgba(255,77,148,.8), rgba(255,77,148,.35) 34%, rgba(255,77,148,0) 55%),
    radial-gradient(circle at 30% 16%, rgba(255,177,102,.95), rgba(255,177,102,0) 52%),
    radial-gradient(circle at 72% 78%, rgba(255,133,110,.6), rgba(255,133,110,0) 55%),
    radial-gradient(circle at 48% 50%, #FFD9BC 0%, #FFC3A4 52%, rgba(255,193,160,.55) 78%, rgba(255,193,160,0) 99%);
  filter: blur(12px);
}
.hub-orb::before {
  content: ""; position: absolute; inset: -16%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgba(255,160,110,.4), rgba(255,110,130,0) 70%);
  filter: blur(30px);
}
/* faint overlapping inner-circle rim in the lower-right quadrant */
.hub-orb::after {
  content: ""; position: absolute; left: 14%; top: 20%; width: 96%; height: 96%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,104,124,0) 57%, rgba(236,104,124,.3) 63%, rgba(236,104,124,0) 70%);
  filter: blur(5px);
}
.hub-orbit {
  position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255,140,90,.35);
  border-radius: 50%; pointer-events: none;
}
.hub-orbit-a { width: 520px; height: 340px; transform: translate(-50%,-50%) rotate(-16deg); }
.hub-orbit-b { width: 620px; height: 430px; transform: translate(-50%,-50%) rotate(9deg); border-color: rgba(248,150,96,.32); }
/* Tiny spheres traveling the orbit ellipses.
   Kinematics: tilt(rotate+squash to the ellipse) > spin(rsOrbit) > arm(radius)
   > counter(reverse spin, same duration+delay) > unsquash — keeps each ball
   perfectly round while it traces the drawn line. Orbit A: 520×340 @ -16° →
   squash .6538, radius 260. Orbit B: 620×430 @ 9° → squash .6935, radius 310. */
.orb-dot-sys { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.o-tilt-a, .o-tilt-b, .o-spin, .o-arm-a, .o-arm-b, .o-counter, .o-unsq-a, .o-unsq-b { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.o-tilt-a { transform: rotate(-16deg) scaleY(.6538); }
.o-tilt-b { transform: rotate(9deg) scaleY(.6935); }
.o-arm-a { transform: translateX(260px); }
.o-arm-b { transform: translateX(310px); }
.o-unsq-a { transform: scaleY(1.5295); }
.o-unsq-b { transform: scaleY(1.4420); }
.o-ball { display: block; border-radius: 50%; }
.o-ball-orange { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: #F26522; box-shadow: 0 3px 9px -2px rgba(242,101,34,.65); }
.o-ball-white { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; background: #FFFDFB; box-shadow: 0 2px 8px rgba(190,95,60,.4); }
.o-ball-small { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #FF8A3D; box-shadow: 0 2px 6px -1px rgba(255,138,61,.6); }
.hub-spark { position: absolute; animation: rsTwinkle 3s ease-in-out infinite; }
.hub-cat-card {
  position: absolute; display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.94); border: 1px solid #fff; border-radius: 16px;
  padding: 13px 18px 13px 13px; text-decoration: none;
  box-shadow: 0 18px 40px -18px rgba(255,61,46,.35), 0 4px 14px -8px rgba(17,18,23,.08);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
  animation: rsFadeUp .7s cubic-bezier(.2,.7,.2,1) backwards;
}
.hub-cat-card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 26px 52px -18px rgba(245,0,112,.4); }
.hub-cat-card:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 3px; }
.hub-cat-icon {
  width: 44px; height: 44px; flex: none; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFEDD9, #FFDDE7);
}
.hub-cat-name { font-size: 14.5px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.hub-cat-count { font-size: 12px; font-weight: 600; color: var(--ink-4); }
/* Featured glow — cycles with the center paper card */
.hub-cat-card.is-featured {
  border-color: rgba(255,176,120,.95);
  box-shadow: 0 0 0 2px rgba(255,122,24,.5), 0 0 30px 5px rgba(245,0,112,.42), 0 22px 46px -18px rgba(245,0,112,.5);
}

/* Center "paper" card — cross-fading snapshots of each article, angled left, behind the category cards */
.hub-paper {
  position: absolute; left: 50%; top: 50%;
  width: 272px; height: 353px; padding: 9px;
  background: #fff; border-radius: 16px; border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 34px 66px -24px rgba(31,17,10,.5), 0 6px 18px -8px rgba(31,17,10,.3);
  transform: translate(-50%,-50%) rotate(-6.5deg);
  animation: hubPaperFloat 9s ease-in-out infinite;
  will-change: transform;
}
.hub-paper-inner {
  position: absolute; inset: 8px; border-radius: 9px; overflow: hidden; background: #fff;
}
.hub-paper-shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  opacity: 0; transition: opacity 1.1s ease;
}
.hub-paper-shot.active { opacity: 1; }
/* subtle top-light sheen so it reads as glass/paper */
.hub-paper::after {
  content: ""; position: absolute; inset: 8px; border-radius: 9px; pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.5), rgba(255,255,255,0) 42%);
  z-index: 2;
}
@keyframes hubPaperFloat {
  0%, 100% { transform: translate(-50%, calc(-50% - 5px)) rotate(-6.5deg); }
  50% { transform: translate(-50%, calc(-50% + 6px)) rotate(-5.4deg); }
}

/* ---------- Topics + featured section ---------- */
.hub-body { background: #FFFDFB; }
.hub-body-inner { max-width: 1400px; margin: 0 auto; padding: 40px 56px 72px; }
.topics-label { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 16px; }
.chips-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topic-chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(17,18,23,.1); background: #fff; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.topic-chip:hover { border-color: rgba(255,61,46,.45); transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(255,61,46,.4); }
.topic-chip:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 2px; }
.topic-chip.active {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -10px rgba(245,0,112,.55);
}
.topic-chip.active svg path, .topic-chip.active svg circle, .topic-chip.active svg rect { stroke: #fff; }

.featured-head { display: flex; align-items: baseline; gap: 16px; margin: 44px 0 20px; }
.featured-head h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; }
.view-all {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: none;
  background: none; border: none; cursor: pointer; font-family: inherit; padding: 0;
}
.view-all:hover { text-decoration: underline; }
.view-all:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 3px; border-radius: 4px; }

/* ---------- Article Library — 3D depth carousel ---------- */
.carousel-wrap { position: relative; padding: 4px 62px 0; }
.car-blobs { position: absolute; inset: -70px -10px -10px; z-index: 0; pointer-events: none; overflow: visible; }
.car-blob {
  position: absolute; border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: blur(46px); opacity: .58; animation: carBlobMorph 17s ease-in-out infinite;
}
.car-blob-a { width: 360px; height: 300px; left: 0%; top: 8%; background: radial-gradient(circle at 35% 35%, rgba(255,122,24,.6), rgba(255,122,24,0) 70%); animation-delay: 0s; }
.car-blob-b { width: 320px; height: 280px; right: 2%; top: -6%; background: radial-gradient(circle at 60% 40%, rgba(245,0,112,.52), rgba(245,0,112,0) 70%); animation-delay: -6s; }
.car-blob-c { width: 300px; height: 250px; left: 40%; bottom: -10%; background: radial-gradient(circle at 50% 60%, rgba(255,61,46,.44), rgba(255,61,46,0) 70%); animation-delay: -11.5s; }
@keyframes carBlobMorph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; transform: translate(0,0) rotate(0deg) scale(1); }
  33% { border-radius: 58% 42% 40% 60% / 55% 65% 35% 45%; transform: translate(16px,-12px) rotate(8deg) scale(1.06); }
  66% { border-radius: 48% 52% 55% 45% / 40% 50% 50% 60%; transform: translate(-12px,14px) rotate(-6deg) scale(.96); }
}
.car-viewport { position: relative; z-index: 1; overflow: hidden; padding: 18px 0 12px; cursor: grab; touch-action: pan-y; }
.car-viewport.is-dragging { cursor: grabbing; }
.car-viewport.is-dragging .car-card { transition: none; }
.car-track { position: relative; height: 420px; perspective: 1400px; }
.car-card {
  position: absolute; top: 0; left: 50%; width: 292px; margin-left: -146px;
  background: #fff; border-radius: 20px; border: 1px solid rgba(17,18,23,.07);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  box-shadow: 0 20px 46px -24px rgba(255,61,46,.4), 0 4px 14px -8px rgba(17,18,23,.06);
  transition: transform .55s cubic-bezier(.22,.75,.24,1), opacity .55s ease, box-shadow .3s ease;
  will-change: transform, opacity; backface-visibility: hidden; -webkit-user-drag: none; user-select: none;
}
.car-card.is-center { box-shadow: 0 32px 64px -26px rgba(245,0,112,.42), 0 10px 22px -10px rgba(255,61,46,.2); cursor: default; }
.car-card:not(.is-center) { cursor: pointer; }
.car-card:focus-visible { outline: 3px solid rgba(245,0,112,.4); outline-offset: 3px; }
.car-thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #FFF0E6; flex: none; }
.car-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }
.car-body { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 20px; flex: 1; }
.car-cat { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.car-title {
  margin: 0; font-size: 16.5px; line-height: 1.28; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.car-desc {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.car-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-4); margin-top: 2px; }
.car-popular {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
  padding: 5px 12px; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  color: #fff; background: var(--grad-brand); box-shadow: 0 8px 16px -8px rgba(245,0,112,.55);
}
.car-arrow {
  position: absolute; top: 174px; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(17,18,23,.08); background: #fff; cursor: pointer; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center; z-index: 30;
  box-shadow: 0 14px 28px -14px rgba(17,18,23,.28);
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.car-arrow:hover { color: var(--red-orange); transform: translateY(-1px) scale(1.06); box-shadow: 0 16px 32px -14px rgba(255,61,46,.45); }
.car-arrow:focus-visible { outline: 3px solid rgba(245,0,112,.4); outline-offset: 2px; }
.car-arrow-prev { left: 0; }
.car-arrow-next { right: 0; }
.car-dots { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 22px; }
.car-dot { width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; background: rgba(17,18,23,.15); cursor: pointer; transition: background .2s ease, transform .2s ease; }
.car-dot:hover { background: rgba(255,61,46,.5); }
.car-dot.active { background: var(--grad-brand); transform: scale(1.35); }
.car-count-text { font-size: 12.5px; font-weight: 700; color: var(--ink-4); }

@media (max-width: 900px) {
  .carousel-wrap { padding: 4px 50px 0; }
  .car-track { height: 400px; }
  .car-card { width: 250px; margin-left: -125px; }
  .car-arrow { top: 164px; width: 40px; height: 40px; }
}
@media (max-width: 640px) {
  .carousel-wrap { padding: 0; }
  .car-blobs { inset: -40px 6px -10px; }
  .car-blob { filter: blur(32px); }
  .car-blob-a { width: 220px; height: 190px; }
  .car-blob-b { width: 200px; height: 180px; }
  .car-blob-c { width: 190px; height: 160px; }
  .car-viewport { padding: 6px 0 14px; }
  .car-track { height: 380px; }
  .car-card { width: min(78vw, 320px); margin-left: calc(-1 * min(78vw, 320px) / 2); }
  .car-arrow { display: none; }
}

/* ---------- Stats + Trending topics ---------- */
.hub-stats-row { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 20px; margin-top: 40px; }
.stats-card {
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  background: #fff; border: 1px solid rgba(17,18,23,.07); border-radius: 20px; padding: 24px 26px;
  box-shadow: 0 14px 34px -26px rgba(255,61,46,.35), 0 2px 8px rgba(17,18,23,.03);
}
.stat-row-item { display: flex; align-items: center; gap: 14px; }
.stat-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFEDD9, #FFDDE7);
}
.stat-text { display: flex; flex-direction: column; gap: 1px; }
.stat-num { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.stat-label { font-size: 12px; font-weight: 600; color: var(--ink-4); }
.trending-card {
  background: #fff; border: 1px solid rgba(17,18,23,.07); border-radius: 20px; padding: 24px 26px;
  box-shadow: 0 14px 34px -26px rgba(255,61,46,.35), 0 2px 8px rgba(17,18,23,.03);
}
.trending-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.trending-head h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.trending-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.trend-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 8px 16px;
  border-radius: 999px; border: 1.5px solid rgba(255,61,46,.32); background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-text); cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.trend-chip:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(255,61,46,.4); }
.trend-chip.is-popular { background: var(--grad-brand); color: #fff; border-color: transparent; box-shadow: 0 10px 22px -10px rgba(245,0,112,.5); }
@media (max-width: 880px) {
  .hub-stats-row { grid-template-columns: 1fr; }
}

.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.a-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(17,18,23,.07); border-radius: 18px; overflow: hidden;
  text-decoration: none;
  box-shadow: 0 10px 30px -24px rgba(255,61,46,.4), 0 2px 8px rgba(17,18,23,.03);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
  animation: rsFadeUp .6s cubic-bezier(.2,.7,.2,1) backwards;
}
.a-card:nth-child(2) { animation-delay: .07s; }
.a-card:nth-child(3) { animation-delay: .14s; }
.a-card:nth-child(4) { animation-delay: .21s; }
.a-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 26px 50px -22px rgba(255,61,46,.45), 0 6px 16px -6px rgba(245,0,112,.15);
  border-color: rgba(255,138,61,.5);
}
.a-card:focus-visible { outline: 3px solid rgba(245,0,112,.4); outline-offset: 3px; }
.a-thumb { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #FFF0E6; }
.a-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.a-card:hover .a-thumb img { transform: scale(1.045); }
.a-flag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--grad-brand); border-radius: 999px; padding: 5px 11px;
  box-shadow: 0 6px 14px -6px rgba(245,0,112,.6);
}
.a-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; flex: 1; }
.a-cat { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.a-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
.a-desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); flex: 1; }
.a-meta { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-4); margin-top: 4px; }
.hub-empty {
  display: none; flex-direction: column; align-items: center; gap: 10px;
  padding: 54px 20px; text-align: center;
  background: #fff; border: 1px dashed rgba(17,18,23,.14); border-radius: 18px;
}
.hub-empty.show { display: flex; }
.hub-empty .t { font-size: 16px; font-weight: 800; color: var(--ink-2); }
.hub-empty .d { font-size: 13.5px; color: var(--ink-4); max-width: 44ch; }

/* ---------- Article page layout ---------- */
.art-wrap { max-width: 1400px; margin: 0 auto; padding: 28px 56px 72px; }
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--ink-4); }
.crumbs a { color: var(--ink-4); text-decoration: none; }
.crumbs a:hover { color: var(--red-orange); }
.crumbs .sep { color: #C9CFD8; }
.crumbs .here { color: var(--ink-2); }

.art-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 3.5vw, 56px); margin-top: 22px; }
.art-main { min-width: 0; }

.cat-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.9); border: 1px solid rgba(255,122,24,.35);
  box-shadow: 0 4px 12px -6px rgba(255,122,24,.3);
  font-size: 12.5px; font-weight: 800; color: #BE3E12;
}
.art-h1 {
  margin: 18px 0 0; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.12;
  font-weight: 800; letter-spacing: -0.025em; text-wrap: balance;
}
.art-dek { margin: 16px 0 0; font-size: 17px; line-height: 1.6; font-weight: 500; color: var(--ink-3); max-width: 62ch; text-wrap: pretty; }

.byline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding: 14px 0; border-top: 1px solid rgba(17,18,23,.07); border-bottom: 1px solid rgba(17,18,23,.07);
}
.byline .avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-icon); box-shadow: 0 6px 14px -5px rgba(245,0,112,.5);
}
.byline .who { display: flex; flex-direction: column; }
.byline .name { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.byline .role { font-size: 11.5px; font-weight: 500; color: var(--ink-4); }
.byline .div { width: 1px; height: 26px; background: rgba(17,18,23,.09); }
.byline .meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-4); }
.share-row { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.share-label { font-size: 12.5px; font-weight: 700; color: var(--ink-4); margin-right: 2px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(17,18,23,.1); background: #fff; cursor: pointer; color: var(--ink-3);
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.share-btn:hover { color: var(--red-orange); border-color: rgba(255,61,46,.45); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(255,61,46,.4); }
.share-btn:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 2px; }
.share-btn.save { width: auto; border-radius: 999px; padding: 0 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; }
.share-btn.copied { color: #fff; background: var(--grad-brand); border-color: transparent; }

.poster {
  margin-top: 24px; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 30px 60px -30px rgba(255,61,46,.4), 0 10px 26px -18px rgba(245,0,112,.25);
}
.poster img { display: block; width: 100%; height: auto; }

/* Article body typography */
.art-body { margin-top: 30px; }
.art-body p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.art-body p.lede { font-size: 16.5px; color: var(--ink-2); }
.art-body h2 {
  margin: 38px 0 14px; font-size: 24px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink);
  scroll-margin-top: 96px;
}
.art-body h3 { margin: 26px 0 10px; font-size: 17.5px; font-weight: 800; color: var(--ink); }
.art-body ul, .art-body ol { margin: 0 0 16px; padding: 0 0 0 4px; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.art-body ul li, .art-body ol li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.art-body ul li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--grad-icon);
}
.art-body ol { counter-reset: rs-ol; }
.art-body ol li { padding-left: 30px; counter-increment: rs-ol; }
.art-body ol li::before {
  content: counter(rs-ol); position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; background: var(--grad-icon);
}
.art-body strong { color: var(--ink); }
.art-body a { color: var(--accent-text); font-weight: 700; }

/* Quote callout */
.callout-quote {
  display: flex; gap: 14px; margin: 22px 0;
  background: linear-gradient(160deg, #FFF4EC, #FFEFF3);
  border: 1px solid rgba(255,122,24,.25); border-radius: 16px; padding: 20px 22px;
}
.callout-quote .q { font-size: 15.5px; line-height: 1.6; font-weight: 700; color: var(--accent-text); margin: 0; }
.callout-quote .attr { margin: 8px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ink-4); }

/* Example / info boxes */
.info-box {
  display: flex; gap: 16px; align-items: flex-start; margin: 22px 0;
  background: #fff; border: 1px solid rgba(255,122,24,.3); border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 10px 26px -20px rgba(255,61,46,.4);
}
.info-box .ib-icon {
  width: 44px; height: 44px; flex: none; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFEDD9, #FFDDE7);
}
.info-box .ib-title { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); margin: 0 0 4px; }
.info-box .ib-main { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0; }
.info-box .ib-sub { font-size: 12.5px; font-weight: 600; color: var(--ink-4); margin: 5px 0 0; }

/* Script / template box (for scripts, email templates, examples) */
.script-box {
  margin: 18px 0; background: #FFFDFB;
  border: 1px solid rgba(17,18,23,.09); border-left: 3px solid #FF3D2E;
  border-radius: 0 14px 14px 0; padding: 16px 20px;
}
.script-box .sb-label { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 8px; }
.script-box p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 10px; }
.script-box p:last-child { margin-bottom: 0; }

/* Do / Don't table-ish rows */
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.dd-col { background: #fff; border: 1px solid rgba(17,18,23,.08); border-radius: 14px; padding: 16px 18px; }
.dd-col .dd-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; margin: 0 0 10px; }
.dd-col.do .dd-h { color: #1F8A5B; }
.dd-col.dont .dd-h { color: var(--accent-text); }
.dd-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dd-col li { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.dd-col.do li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #2AA36D; }
.dd-col.dont li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #FF3D2E; }

/* ---------- Sidebar ---------- */
.art-side { display: flex; flex-direction: column; gap: 18px; }
.side-sticky { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; }
.side-card {
  position: relative; background: #fff; border: 1px solid rgba(255,255,255,.95);
  border-radius: 20px; padding: 20px 22px;
  box-shadow: 0 18px 40px -28px rgba(255,61,46,.45), 0 4px 14px -10px rgba(17,18,23,.08);
}
.side-card .sc-title { margin: 0 0 14px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.side-ball {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #FFB3C9 30%, #FF5C93 62%, #F50070 100%);
  box-shadow: 0 8px 18px -6px rgba(245,0,112,.5);
}

/* On this page */
.toc { display: flex; flex-direction: column; }
.toc a {
  position: relative; display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0 7px 18px; text-decoration: none;
  font-size: 13px; font-weight: 600; color: var(--ink-4);
  border-left: 2px solid rgba(17,18,23,.07);
  transition: color .2s ease;
}
.toc a::before {
  content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%) scale(.6);
  width: 8px; height: 8px; border-radius: 50%; background: #E4DAD1;
  transition: background .2s ease, transform .2s ease;
}
.toc a:hover { color: var(--ink-2); }
.toc a.active { color: var(--accent-text); font-weight: 700; }
.toc a.active::before { background: var(--red-orange); transform: translateY(-50%) scale(1); box-shadow: 0 0 0 4px rgba(255,61,46,.15); }

/* Key takeaways */
.takeaways { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.takeaways li { display: flex; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.takeaways svg { flex: none; margin-top: 1px; }

/* Sidebar CTA card */
.side-cta {
  background: linear-gradient(165deg, #FFFFFF 20%, #FFF4EC);
  border: 1px solid rgba(255,255,255,1);
}
.side-cta .logo-tile {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFEDD9, #FFDDE7);
  margin-bottom: 12px;
}
.side-cta .t { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; }
.side-cta .d { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.side-cta ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.side-cta li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.btn-cta-full {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 50px; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--grad-cta); box-shadow: 0 12px 26px -12px rgba(255,61,46,.6);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}
.btn-cta-full:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 30px -12px rgba(245,0,112,.55); }
.btn-cta-full:focus-visible { outline: 3px solid rgba(245,0,112,.4); outline-offset: 3px; }
.side-cta .see-link {
  display: block; margin-top: 12px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--accent-text); text-decoration: underline;
}

/* ---------- Mid-article CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap;
  margin: 44px 0 0; border-radius: 22px; padding: 28px 32px;
  background: linear-gradient(120deg, #FFF0E4, #FFE9EE 65%, #FFEDE2);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 20px 44px -30px rgba(255,61,46,.4);
}
.cta-band .ball { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, #FFB3C9 30%, #FF5C93 62%, #F50070 100%); opacity: .85; }
.cta-band .t { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -0.015em; }
.cta-band .d { margin: 0; font-size: 14px; font-weight: 500; color: var(--ink-3); }
.cta-band .actions { margin-left: auto; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.btn-band {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 14px 26px; border: none; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--grad-cta); box-shadow: 0 12px 26px -12px rgba(255,61,46,.6);
  transition: transform .25s ease, filter .25s ease;
}
.btn-band:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-band:focus-visible { outline: 3px solid rgba(245,0,112,.4); outline-offset: 3px; }
.band-link { font-size: 14px; font-weight: 700; color: var(--accent-text); text-decoration: underline; }

/* ---------- FAQ ---------- */
.faq-h { margin: 44px 0 18px; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.faq-item { background: #fff; border: 1px solid rgba(17,18,23,.08); border-radius: 14px; overflow: hidden; }
.faq-q {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 14px 18px; border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink); text-align: left;
}
.faq-q:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: -3px; border-radius: 14px; }
.faq-q svg { margin-left: auto; flex: none; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.faq-item.open .faq-q svg { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.2,.7,.2,1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { margin: 0; padding: 0 18px 16px; font-size: 13.5px; line-height: 1.65; color: var(--ink-3); }

/* ---------- Related articles ---------- */
.related-h { margin: 44px 0 16px; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rel-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid rgba(17,18,23,.07); border-radius: 16px; padding: 18px;
  box-shadow: 0 10px 28px -24px rgba(255,61,46,.4);
}
.rel-icon {
  width: 46px; height: 46px; flex: none; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFEDD9, #FFDDE7);
}
.rel-card .t { margin: 0 0 5px; font-size: 14.5px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.rel-card .d { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.rel-card .soon {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; color: var(--ink-5);
}

/* ---------- Full footer ---------- */
.rs-footer { background: #FFFDFB; border-top: 1px solid rgba(17,18,23,.06); margin-top: 26px; }
.rs-footer-inner {
  display: grid; grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(140px, 1fr)) auto;
  gap: 28px; max-width: 1400px; margin: 0 auto; padding: 40px 56px 20px;
}
.rs-footer .brand-col { display: flex; flex-direction: column; gap: 10px; }
.rs-footer .tagline { font-size: 12.5px; line-height: 1.6; color: var(--ink-4); max-width: 30ch; }
.rs-footer .col-h { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 4px 0 12px; }
.rs-footer .col-links { display: flex; flex-direction: column; gap: 9px; }
.rs-footer .col-links a { font-size: 13px; font-weight: 600; color: var(--ink-4); text-decoration: none; }
.rs-footer .col-links a:hover { color: var(--red-orange); }
.social-row { display: flex; gap: 10px; }
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(17,18,23,.1); background: #fff; color: var(--ink-3); text-decoration: none;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.social-btn:hover { color: var(--red-orange); border-color: rgba(255,61,46,.45); transform: translateY(-1px); }
.rs-footer-legal {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
  max-width: 1400px; margin: 0 auto; padding: 16px 56px 26px;
  border-top: 1px solid rgba(17,18,23,.05);
  font-size: 12px; color: var(--ink-5);
}
.rs-footer-legal a { color: var(--ink-4); font-weight: 600; text-decoration: none; }
.rs-footer-legal a:hover { color: var(--red-orange); }
.rs-footer-legal .links { display: flex; gap: 18px; }

/* ---------- Article inline modules ---------- */
.value-stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.value-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(255,99,72,.35);
  font-size: 12.5px; font-weight: 700; color: var(--accent-text);
  box-shadow: 0 4px 12px -8px rgba(255,61,46,.4);
}
.steps-card {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0 24px;
}
.steps-card .step {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid rgba(17,18,23,.08); border-radius: 14px; padding: 14px;
  box-shadow: 0 8px 22px -18px rgba(255,61,46,.4);
}
.steps-card .n {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; background: var(--grad-icon);
}
.steps-card .s-t { font-size: 13px; font-weight: 800; color: var(--ink); }
.steps-card .s-d { font-size: 11.5px; line-height: 1.5; color: var(--ink-4); }
.icon-grid-card {
  background: #fff; border: 1px solid rgba(17,18,23,.08); border-radius: 16px;
  padding: 18px 20px; margin: 20px 0 24px;
  box-shadow: 0 10px 26px -20px rgba(255,61,46,.4);
}
.icon-grid-card .igc-t { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--ink); }
.icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.icon-grid .ig-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.icon-grid .ig-ic {
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFEDD9, #FFDDE7);
}
.check-module {
  background: linear-gradient(160deg, #FFF6EF, #FFF0F4);
  border: 1px solid rgba(255,122,24,.25); border-radius: 16px;
  padding: 18px 20px; margin: 20px 0 24px;
}
.check-module .cm-t { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.check-module ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.check-module li { position: relative; display: flex; align-items: center; gap: 9px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.check-module li::before { display: none; }
.check-module svg { flex: none; }
.takeaway-card {
  position: relative; overflow: hidden;
  display: flex; gap: 16px; align-items: flex-start;
  margin: 22px 0; border-radius: 18px; padding: 22px 24px;
  background: linear-gradient(120deg, #FFF0E4, #FFE7EE);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 16px 36px -26px rgba(255,61,46,.5);
}
.takeaway-card .tk-icon {
  width: 44px; height: 44px; flex: none; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-icon); box-shadow: 0 8px 18px -6px rgba(245,0,112,.5);
}
.takeaway-card p { margin: 0; font-size: 15px; line-height: 1.65; font-weight: 700; color: var(--ink); }
.takeaway-card p span { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
@media (max-width: 760px) {
  .steps-card { grid-template-columns: 1fr 1fr; }
  .icon-grid { grid-template-columns: 1fr; }
  .check-module ul { grid-template-columns: 1fr; }
}

/* Template / letter cards (cover letter examples) */
.tpl-card {
  margin: 20px 0 24px; background: #FFFDF9;
  border: 1px solid rgba(255,122,24,.28); border-radius: 16px; overflow: hidden;
  box-shadow: 0 12px 30px -24px rgba(255,61,46,.45);
}
.tpl-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #fff; border-bottom: 1px solid rgba(17,18,23,.06);
}
.tpl-label {
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #fff; background: var(--grad-brand); border-radius: 999px; padding: 4px 10px;
}
.tpl-type { font-size: 13px; font-weight: 800; color: var(--ink); }
.tpl-copy {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 6px 13px; border-radius: 999px;
  border: 1.5px solid rgba(255,61,46,.4); background: #fff; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--accent-text);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.tpl-copy:hover { background: #FFF3EC; }
.tpl-copy.copied { background: var(--grad-brand); color: #fff; border-color: transparent; }
.tpl-copy:focus-visible { outline: 3px solid rgba(245,0,112,.35); outline-offset: 2px; }
.tpl-body { padding: 16px 20px; }
.tpl-body p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px; }
.tpl-body p:last-child { margin-bottom: 0; }
.ph {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: #FFE4EE; color: #C61A62; font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.tpl-why {
  padding: 13px 20px 15px; background: linear-gradient(160deg, #FFF4EC, #FFEFF3);
  border-top: 1px solid rgba(255,122,24,.18);
}
.tpl-why .w-t { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.tpl-why p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); }

/* Specificity meter */
.meter-card {
  background: #fff; border: 1px solid rgba(17,18,23,.08); border-radius: 16px;
  padding: 18px 20px; margin: 20px 0 24px;
  box-shadow: 0 10px 26px -20px rgba(255,61,46,.4);
}
.meter-card .m-t { margin: 0 0 12px; font-size: 15px; font-weight: 800; color: var(--ink); }
.meter-track {
  position: relative; height: 10px; border-radius: 6px; margin: 6px 0 8px;
  background: linear-gradient(90deg, #EDE7E0, #FFC59E 45%, #FF3D2E 75%, #F50070);
}
.meter-track .dot {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 3px solid #F50070; box-shadow: 0 4px 10px -3px rgba(245,0,112,.6);
}
.meter-ends { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-4); }
.meter-card .ex { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.meter-card .ex p { margin: 0; font-size: 13px; line-height: 1.55; }
.meter-card .ex .bad { color: var(--ink-4); }
.meter-card .ex .good { color: var(--ink-2); font-weight: 600; }
.meter-card .ex .tag { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.meter-card .ex .bad .tag { color: #A9AFB9; }
.meter-card .ex .good .tag { color: var(--accent-text); }

/* ---------- Keyframes ---------- */
@keyframes rsFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rsFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rsTwinkle { 0%, 100% { opacity: .3; transform: scale(.78) rotate(-6deg); } 50% { opacity: 1; transform: scale(1.08) rotate(10deg); } }
@keyframes rsPopIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rsFloatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rsOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rsOrbitRev { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .article-grid { grid-template-columns: 1fr 1fr; }
  .art-grid { grid-template-columns: 1fr; }
  .side-sticky { position: static; }
  .side-toc { display: none; } /* TOC surfaces via the inline <details> instead */
  .toc-inline { display: block; }
  .rs-footer-inner { grid-template-columns: 1fr 1fr; }
  .rs-footer .brand-col { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .rs-nav { padding: 12px 22px; }
  .rs-nav-links { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .hub-hero-inner { grid-template-columns: 1fr; padding: 36px 22px 44px; }
  .hub-orb-wrap { min-height: 380px; }
  .hub-body-inner { padding: 32px 22px 56px; }
  .art-wrap { padding: 22px 22px 56px; }
}
/* The inline TOC (<details>) is hidden on wide screens where the sidebar TOC shows */
.toc-inline { display: none; margin: 20px 0 0; background: #fff; border: 1px solid rgba(17,18,23,.09); border-radius: 14px; }
.toc-inline summary {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 18px;
  font-size: 14px; font-weight: 800; color: var(--ink); cursor: pointer; list-style: none;
}
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline .toc { padding: 0 18px 14px; }

@media (max-width: 640px) {
  .rs-nav { padding: 10px 16px; }
  .hub-hero-inner { padding: 28px 16px 30px; gap: 20px; }
  .hub-h1 { font-size: 32px; }
  .hub-sub { font-size: 14.5px; }
  .hub-search input { min-height: 50px; font-size: 14px; }
  .hub-orb-wrap { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 6px; }
  .hub-orb, .hub-orbit, .hub-orbit-dot, .orb-dot-sys, .hub-spark, .hub-paper { display: none; }
  .hub-cat-card { position: static !important; padding: 11px 12px; border: 1px solid rgba(17,18,23,.06); animation: none; }
  .hub-cat-icon { width: 38px; height: 38px; border-radius: 11px; }
  .hub-cat-name { font-size: 12px; white-space: normal; line-height: 1.25; }
  .hub-cat-count { font-size: 10.5px; }
  .hub-body-inner { padding: 26px 16px 44px; }
  .topics-label { font-size: 17px; }
  .chips-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .chips-row::-webkit-scrollbar { display: none; }
  .topic-chip { flex: none; }
  .featured-head { margin-top: 30px; }
  .featured-head h2 { font-size: 19px; }
  .article-grid { grid-template-columns: 1fr; gap: 14px; }
  .art-wrap { padding: 18px 16px 44px; }
  .art-h1 { font-size: 27px; }
  .art-dek { font-size: 14.5px; }
  .byline { gap: 10px; }
  .byline .div { display: none; }
  .share-row { margin-left: 0; width: 100%; }
  .poster { border-radius: 16px; }
  .art-body p { font-size: 14.5px; }
  .art-body h2 { font-size: 20px; }
  .dd-grid { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 22px 20px; }
  .cta-band .actions { margin-left: 0; width: 100%; }
  .btn-band { width: 100%; }
  .rs-footer-inner { grid-template-columns: 1fr 1fr; gap: 22px; padding: 30px 16px 14px; }
  .rs-footer-legal { padding: 14px 16px 22px; justify-content: center; text-align: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}