@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  --ink: #2b2721;
  --green: #356142;
  --deep: #1f3a28;
  --cream: #f4f0e7;
  --paper: #fffdf8;
  --teal: #5f9c93;
  --clay: #bd6440;
  --line: rgb(43 39 33 / 13%);
  margin: 0;
  min-width: 320px;
  background: var(--cream);
  color: var(--ink);
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body[dir="ltr"], html[dir="ltr"] body { font-family: "Plus Jakarta Sans", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.helpShell { min-height: 100vh; overflow: clip; }
.helpShell { animation: helpPageIn 480ms cubic-bezier(.2, 0, 0, 1); transform-origin: 50% 18%; }
body.isLeaving .helpShell {
  opacity: 0;
  transform: translateY(-9px) scale(.996);
  filter: blur(1.5px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.4, 0, 1, 1), filter 220ms ease;
}
@keyframes helpPageIn {
  from { opacity: 0; transform: translateY(11px) scale(.997); filter: blur(1.5px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.revealItem {
  opacity: 0;
  translate: 0 20px;
  filter: blur(2px);
  transition:
    opacity 520ms cubic-bezier(.2, 0, 0, 1) var(--reveal-delay, 0ms),
    translate 520ms cubic-bezier(.2, 0, 0, 1) var(--reveal-delay, 0ms),
    filter 420ms ease var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}
.revealItem.isVisible { opacity: 1; translate: 0 0; filter: blur(0); }
.helpHeader {
  position: relative;
  z-index: 20;
  width: min(1280px, calc(100% - 56px));
  height: 88px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.helpBrand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.helpBrandHome { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.helpBrandHelp { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.helpBrandTile { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: var(--green); }
.helpBrandTile img { width: 29px; height: 29px; display: block; }
.helpWordmark { width: 86px; height: 23px; object-fit: contain; }
.helpBrand > i { width: 1px; height: 26px; margin-inline: 2px; background: var(--line); flex-shrink: 0; }
.helpBrandHelp b { font-size: .83rem; color: var(--green); white-space: nowrap; font-weight: 600; }
.helpBrandHelp:hover b { color: var(--green-dark, #264a32); }
.helpNav { display: flex; align-items: center; gap: 28px; font-size: .84rem; font-weight: 600; }
.helpNav a { color: rgb(43 39 33 / 72%); transition: color 160ms ease; }
.helpNav a:hover, .helpNav a[aria-current="page"] { color: var(--green); }
.helpHeaderActions { justify-self: end; display: flex; align-items: center; gap: 11px; }
.languageLink, .quietButton, .solidButton {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
}
.languageLink { padding: 0 16px; border: 1px solid var(--line); background: var(--paper); }
.quietButton { padding: 0 18px; color: var(--green); }
.solidButton { padding: 0 22px; background: var(--green); color: white; box-shadow: 0 10px 24px rgb(53 97 66 / 16%); }
.menuButton { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.menuButton span, .menuButton::before, .menuButton::after { content: ''; display: block; width: 16px; height: 1.5px; margin: 4px auto; background: currentColor; }

.helpHero {
  position: relative;
  min-height: 410px;
  display: grid;
  place-items: center;
  padding: 82px 28px 96px;
  overflow: visible;
  background:
    radial-gradient(circle at 22% 18%, rgb(95 156 147 / 13%), transparent 25rem),
    radial-gradient(circle at 82% 88%, rgb(189 100 64 / 9%), transparent 22rem),
    var(--deep);
  color: white;
}
.helpHero::before, .helpHero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 7%);
  pointer-events: none;
}
.helpHero::before { width: 420px; height: 420px; inset-inline-start: -170px; top: -230px; box-shadow: 0 0 0 46px rgb(255 255 255 / 2%); }
.helpHero::after { width: 300px; height: 300px; inset-inline-end: -130px; bottom: -200px; box-shadow: 0 0 0 38px rgb(95 156 147 / 6%); }
.helpHeroInner { position: relative; z-index: 2; width: min(790px, 100%); text-align: center; }
.helpEyebrow { margin: 0 0 17px; color: #b8d2cc; font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.helpHero h1 { max-width: 760px; margin: 0 auto; font-size: clamp(2.5rem, 5vw, 4.9rem); line-height: 1.1; letter-spacing: -.035em; }
.helpHeroLead { max-width: 600px; margin: 20px auto 0; color: rgb(255 255 255 / 72%); font-size: clamp(.96rem, 1.5vw, 1.12rem); line-height: 1.85; }
.helpSearch { position: relative; width: min(680px, 100%); margin: 34px auto -132px; text-align: start; }
.helpSearchBox {
  height: 78px;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  border: 1px solid rgb(43 39 33 / 10%);
  border-radius: 21px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgb(10 31 20 / 24%);
  color: var(--ink);
}
.searchGlyph { width: 22px; height: 22px; border: 2px solid var(--green); border-radius: 50%; position: relative; opacity: .8; }
.searchGlyph::after { content: ''; position: absolute; width: 8px; height: 2px; inset-inline-end: -6px; bottom: 0; transform: rotate(45deg); background: var(--green); border-radius: 4px; }
[dir="rtl"] .searchGlyph::after { transform: rotate(-45deg); }
.helpSearch input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; }
.helpSearch input::placeholder { color: rgb(43 39 33 / 48%); }
.searchHint { padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px; color: rgb(43 39 33 / 48%); font-size: .7rem; }
.searchResults {
  position: absolute;
  z-index: 10;
  top: calc(100% + 10px);
  inset-inline: 0;
  max-height: 420px;
  overflow: auto;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 22px 52px rgb(31 58 40 / 18%);
}
.searchResults[hidden] { display: none; }
.searchResultHead { display: flex; justify-content: space-between; padding: 10px 12px; color: var(--green); font-size: .75rem; }
.searchResult { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border-radius: 12px; }
.searchResult:hover { background: #f1eee6; }
.searchResult span { display: grid; gap: 4px; }
.searchResult b { font-size: .9rem; }
.searchResult small { color: rgb(43 39 33 / 57%); font-size: .7rem; }
.searchResult i { color: var(--green); font-style: normal; font-size: 1.1rem; }
.emptyResults { margin: 0; padding: 24px 14px; text-align: center; color: rgb(43 39 33 / 58%); }

.helpMain { width: min(1180px, calc(100% - 56px)); margin: 0 auto; padding: 102px 0 110px; }
.sectionHeading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.sectionHeading small { display: block; margin-bottom: 8px; color: var(--green); font-size: .72rem; font-weight: 700; }
.sectionHeading h2 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.8rem); line-height: 1.2; letter-spacing: -.025em; }
.sectionHeading p { max-width: 430px; margin: 0; color: rgb(43 39 33 / 60%); line-height: 1.8; font-size: .9rem; }

.categoryGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.categoryCard {
  position: relative;
  min-height: 270px;
  padding: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgb(255 253 248 / 72%);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.categoryCard:first-child { grid-column: span 2; min-height: 240px; background: var(--paper); }
.categoryCard:hover { transform: translateY(-3px); border-color: rgb(53 97 66 / 34%); box-shadow: 0 18px 42px rgb(31 58 40 / 9%); }
.categoryTop { display: flex; align-items: start; justify-content: space-between; gap: 22px; }
.categoryNumber { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 15px; background: #e7efea; color: var(--green); font: 700 .76rem "Plus Jakarta Sans", sans-serif; }
.categoryCard:nth-child(2) .categoryNumber, .categoryCard:nth-child(5) .categoryNumber { background: #f3e9e3; color: var(--clay); }
.categoryCard h3 { margin: 0 0 8px; font-size: 1.35rem; }
.categoryCard p { max-width: 460px; margin: 0; color: rgb(43 39 33 / 59%); line-height: 1.75; font-size: .85rem; }
.categoryArticles { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--line); }
.categoryArticles a { display: flex; justify-content: space-between; gap: 15px; padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: .82rem; font-weight: 600; }
.categoryArticles a span:last-child { color: var(--green); }
.categoryCount { margin-top: 16px; display: inline-block; color: var(--green); font-size: .7rem; font-weight: 700; }

.troubleshootingLink { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 17px; padding: 22px 28px; border: 1px dashed rgb(189 100 64 / 30%); border-radius: 16px; background: rgb(243 233 227 / 40%); transition: border-color 180ms ease, background 180ms ease; }
.troubleshootingLink:hover { border-color: var(--clay); background: rgb(243 233 227 / 70%); }
.troubleshootingLink b { display: block; margin-bottom: 4px; font-size: 1rem; }
.troubleshootingLink > span:last-child { color: var(--clay); font-size: 1.1rem; flex: none; }
.troubleshootingLink div span { color: rgb(43 39 33 / 55%); font-size: .82rem; }

.startSection { margin: 100px 0; padding: 54px; border-radius: 28px; background: var(--deep); color: white; }
.startSection .sectionHeading small { color: #a9c7c0; }
.startSection .sectionHeading p { color: rgb(255 255 255 / 61%); }
.startPath { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 35px; border-top: 1px solid rgb(255 255 255 / 14%); }
.startPath a { position: relative; min-height: 160px; padding: 27px 22px; border-inline-start: 1px solid rgb(255 255 255 / 14%); }
.startPath a:first-child { border-inline-start: 0; }
.startPath small { display: block; margin-bottom: 26px; color: #92b7ae; font: 700 .7rem "Plus Jakarta Sans", sans-serif; }
.startPath b { display: block; max-width: 190px; font-size: .93rem; line-height: 1.65; }
.startPath span { position: absolute; inset-inline-end: 20px; bottom: 20px; color: #b9d3cd; }
.startPath a:hover { background: rgb(255 255 255 / 5%); }

.popularGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.popularCard { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; border: 1px solid var(--line); border-radius: 19px; background: var(--paper); }
.popularCard:hover { border-color: rgb(53 97 66 / 38%); }
.popularMeta { display: flex; justify-content: space-between; color: var(--green); font-size: .68rem; font-weight: 700; }
.popularCard h3 { margin: 22px 0 0; font-size: 1rem; line-height: 1.55; }
.popularCard > span { margin-top: 24px; color: var(--green); font-size: 1.05rem; }

.helpCta { margin-top: 95px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; padding: 45px 50px; border: 1px solid rgb(53 97 66 / 16%); border-radius: 26px; background: #e8efeb; }
.helpCta small { color: var(--green); font-weight: 700; }
.helpCta h2 { margin: 9px 0 8px; font-size: clamp(1.45rem, 2.8vw, 2.3rem); }
.helpCta p { margin: 0; color: rgb(43 39 33 / 60%); }

.helpFooter { padding: 48px 28px 30px; background: var(--deep); color: white; }
.helpFooterInner { width: min(1180px, 100%); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.helpFooterBrand { display: flex; align-items: center; gap: 12px; }
.helpFooterBrand img:first-child { width: 36px; height: 36px; }
.helpFooterBrand img:last-child { width: 90px; height: 24px; }
.helpFooterLinks { display: flex; gap: 52px; color: rgb(255 255 255 / 68%); font-size: .78rem; }
.footerCol { display: grid; gap: 10px; }
.footerCol b { color: rgb(255 255 255 / 85%); font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 4px; }
.footerCol a { color: rgb(255 255 255 / 58%); font-size: .78rem; }
.footerCol a:hover { color: white; }
.helpFooterBottom { width: min(1180px, 100%); margin: 30px auto 0; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 12%); color: rgb(255 255 255 / 48%); font-size: .7rem; }

/* Article */
.articleMain { width: min(1180px, calc(100% - 56px)); margin: 0 auto; padding: 46px 0 110px; }
.articleBreadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 42px; color: rgb(43 39 33 / 52%); font-size: .75rem; }
.articleBreadcrumb a:hover { color: var(--green); }
.articleLayout { display: grid; grid-template-columns: minmax(0, 720px) 200px; justify-content: center; gap: clamp(32px, 5vw, 60px); align-items: start; }
.articleToc { position: sticky; top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgb(255 253 248 / 70%); }
.articleToc > p { margin: 0 0 14px; color: var(--green); font-size: .72rem; font-weight: 700; }
.articleToc > a { display: grid; grid-template-columns: 24px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); color: rgb(43 39 33 / 67%); font-size: .75rem; line-height: 1.5; }
.articleToc > a span { color: var(--teal); font: 600 .6rem "Plus Jakarta Sans", sans-serif; }
.articleToc > a:hover { color: var(--green); }
.articleToc > a.isActive { color: var(--green); font-weight: 600; border-color: var(--green); }
.tocMeta { display: grid; gap: 4px; margin-top: 18px; }
.tocMeta small { color: rgb(43 39 33 / 47%); font-size: .63rem; }
.tocMeta b { font-size: .76rem; }
.guideHeader { padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.guideMeta { display: flex; align-items: center; gap: 10px; color: var(--green); font-size: .72rem; font-weight: 700; }
.guideMeta i { width: 3px; height: 3px; border-radius: 50%; background: var(--teal); }
.guideHeader h1 { margin: 18px 0 20px; font-size: clamp(2.3rem, 5.2vw, 4.45rem); line-height: 1.14; letter-spacing: -.04em; }
.guideHeader > p { max-width: 650px; margin: 0; color: rgb(43 39 33 / 66%); font-size: 1rem; line-height: 1.9; }
.guideHeader > small { display: block; margin-top: 21px; color: rgb(43 39 33 / 43%); font-size: .67rem; }
.guideVisual {
  position: relative;
  width: 100%;
  margin: 42px 0 8px;
}

.guideVisual object, .guideVisual img {
  width: 100%;
  aspect-ratio: 12 / 7;
  display: block;
  border: 0;
  border-radius: 22px;
  background: #edf1ec;
}
.guideVisual object { box-shadow: 0 18px 48px rgb(31 58 40 / 10%); }
.guideVisual figcaption { margin-top: 12px; color: rgb(43 39 33 / 47%); font-size: .68rem; text-align: center; }
.guideBody { padding: 18px 0 0; }
.articleSection { position: relative; padding: 48px 0 8px; scroll-margin-top: 20px; }
.sectionNumber { display: inline-block; margin-bottom: 11px; color: var(--teal); font: 700 .68rem "Plus Jakarta Sans", sans-serif; }
.articleSection h2 { margin: 0 0 18px; font-size: 1.55rem; }
.articleSection p { margin: 0 0 15px; color: rgb(43 39 33 / 70%); line-height: 1.95; font-size: .94rem; }
.sectionBullets { margin: 16px 0 0; padding: 0 0 0 20px; display: grid; gap: 8px; }
[dir="rtl"] .sectionBullets { padding: 0 20px 0 0; }
.sectionBullets li { color: rgb(43 39 33 / 72%); line-height: 1.8; font-size: .9rem; }
.sectionBullets li::marker { color: var(--teal); }
.articleSection ol { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: steps; display: grid; gap: 12px; }
.articleSection li { counter-increment: steps; display: grid; grid-template-columns: 36px 1fr; align-items: start; gap: 13px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 253 248 / 66%); color: rgb(43 39 33 / 76%); line-height: 1.7; font-size: .88rem; }
.articleSection li::before { content: counter(steps); width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #e5eee9; color: var(--green); font: 700 .65rem "Plus Jakarta Sans", sans-serif; }
.articleFeedback { margin-top: 55px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 22px 24px; border-radius: 17px; background: #e7efea; color: var(--green); font-weight: 700; }
.articleFeedback div { display: flex; gap: 8px; }
.articleFeedback button { min-width: 82px; min-height: 36px; border: 1px solid rgb(53 97 66 / 20%); border-radius: 999px; background: white; color: var(--green); cursor: pointer; font-size: .75rem; font-weight: 700; }
.articleFeedback small { color: var(--green); }
.relatedGuides { margin-top: 65px; }
.relatedGuides h2 { margin: 0 0 18px; font-size: 1.35rem; }
.relatedGuides a { display: flex; justify-content: space-between; gap: 25px; padding: 17px 0; border-top: 1px solid var(--line); font-size: .86rem; font-weight: 600; }
.relatedGuides a small { color: rgb(43 39 33 / 48%); font-weight: 500; }
.missingArticle { min-height: 560px; display: grid; place-items: center; align-content: center; text-align: center; }
.missingArticle > span { color: var(--teal); font: 700 .8rem "Plus Jakarta Sans", sans-serif; }
.missingArticle h1 { margin: 12px 0; font-size: 2.3rem; }
.missingArticle p { margin: 0 0 25px; color: rgb(43 39 33 / 60%); }

/* Outcomes checklist */
.guideOutcomes { margin: 32px 0 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 15px; background: rgb(255 253 248 / 60%); }
.guideOutcomes > p { margin: 0 0 14px; color: var(--green); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.guideOutcomes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.guideOutcomes li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: rgb(43 39 33 / 72%); font-size: .88rem; line-height: 1.7; }
.guideOutcomes li::before { content: '✓'; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 3px; border-radius: 6px; background: #e5eee9; color: var(--green); font-size: .65rem; font-weight: 700; }

/* Category page */
.categoryPageMain { width: min(860px, calc(100% - 56px)); margin: 0 auto; padding: 46px 0 110px; }
.categoryPageHeader { padding: 42px 0 28px; }
.categoryPageHeader h1 { margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.03em; }
.categoryPageHeader p { max-width: 560px; margin: 0 0 16px; color: rgb(43 39 33 / 60%); line-height: 1.8; font-size: .95rem; }
.categoryPageHeader small { color: var(--green); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.categoryArticleList { display: grid; gap: 14px; }
.categoryArticleCard { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); transition: border-color 180ms ease, transform 180ms ease; }
.categoryArticleCard:hover { border-color: rgb(53 97 66 / 34%); transform: translateY(-2px); }
.categoryArticleCard b { display: block; margin-bottom: 8px; font-size: 1.05rem; }
.categoryArticleCard p { margin: 0 0 8px; color: rgb(43 39 33 / 60%); font-size: .84rem; line-height: 1.7; }
.categoryArticleCard small { color: rgb(43 39 33 / 45%); font-size: .72rem; }
.categoryArticleCard > span { color: var(--green); font-size: 1.2rem; flex: none; }

/* Persistent sidebar */
.helpWithSidebar { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: calc(100vh - 88px); }
.helpSidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 20px 16px; border-inline-end: 1px solid var(--line); background: var(--paper); }
.sidebarSearch { margin-bottom: 18px; }
.sidebarSearchBox { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sidebarSearchBox input { flex: 1; width: 100%; border: 0; outline: 0; background: transparent; font-size: .8rem; }
.sidebarSearchHint { padding: 3px 7px; border: 1px solid var(--line); border-radius: 5px; color: rgb(43 39 33 / 40%); font-size: .6rem; white-space: nowrap; }
.sidebarNav { display: grid; gap: 2px; }
.sidebarCatButton { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: .82rem; font-weight: 600; cursor: pointer; text-align: start; }
.sidebarCatButton:hover { background: rgb(53 97 66 / 6%); }
.sidebarCatButton span { color: var(--teal); font-size: .7rem; transition: transform 200ms ease; }
.sidebarCategory.isOpen .sidebarCatButton span { transform: rotate(90deg); }
.sidebarCatArticles { display: none; padding: 2px 0 8px 18px; }
[dir="rtl"] .sidebarCatArticles { padding: 2px 18px 8px 0; }
.sidebarCategory.isOpen .sidebarCatArticles { display: grid; gap: 1px; }
.sidebarArticle { display: block; padding: 7px 12px; border-radius: 7px; color: rgb(43 39 33 / 65%); font-size: .76rem; line-height: 1.5; }
.sidebarArticle:hover { background: rgb(53 97 66 / 6%); color: var(--ink); }
.sidebarArticle.isCurrent { background: #eef4f0; color: var(--green); font-weight: 600; }

@media (max-width: 980px) {
  .helpWithSidebar { grid-template-columns: 1fr; }
  .helpSidebar { display: none; }
  .helpHeader { grid-template-columns: 1fr auto; }
  .helpNav { display: none; position: absolute; top: 76px; inset-inline: 0; padding: 18px; flex-direction: column; align-items: stretch; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: 0 18px 40px rgb(31 58 40 / 14%); }
  .helpNav.isOpen { display: flex; }
  .helpHeaderActions .quietButton { display: none; }
  .menuButton { display: block; }
  .categoryGrid { grid-template-columns: 1fr; }
  .categoryCard:first-child { grid-column: auto; }
  .startPath { grid-template-columns: repeat(2, 1fr); }
  .startPath a:nth-child(3) { border-inline-start: 0; border-top: 1px solid rgb(255 255 255 / 14%); }
  .startPath a:nth-child(4) { border-top: 1px solid rgb(255 255 255 / 14%); }
  .popularGrid { grid-template-columns: repeat(2, 1fr); }
  .articleLayout { grid-template-columns: 1fr; }
  .articleToc { position: static; }
}

@media (max-width: 680px) {
  .helpHeader { width: calc(100% - 30px); height: 72px; }
  .helpBrand > i, .helpBrandHelp, .helpWordmark { display: none; }
  .helpHeaderActions { gap: 6px; }
  .languageLink { min-height: 38px; padding: 0 12px; }
  .helpHero { min-height: 390px; padding: 62px 18px 88px; }
  .helpHero h1 { font-size: clamp(2.35rem, 12vw, 3.45rem); }
  .helpHeroLead { font-size: .9rem; }
  .helpSearch { margin-top: 27px; margin-bottom: -124px; }
  .helpSearchBox { height: 70px; padding: 0 17px; border-radius: 17px; }
  .searchHint { display: none; }
  .helpMain, .articleMain { width: calc(100% - 30px); padding-top: 86px; padding-bottom: 80px; }
  .sectionHeading { display: block; }
  .sectionHeading p { margin-top: 15px; }
  .categoryCard { padding: 23px; border-radius: 18px; }
  .categoryTop { gap: 14px; }
  .categoryNumber { width: 42px; height: 42px; border-radius: 13px; }
  .startSection { margin: 72px -2px; padding: 35px 22px; border-radius: 22px; }
  .startPath { grid-template-columns: 1fr; }
  .startPath a { min-height: 130px; border-inline-start: 0; border-top: 1px solid rgb(255 255 255 / 14%); }
  .startPath a:first-child { border-top: 0; }
  .popularGrid { grid-template-columns: 1fr; }
  .popularCard { min-height: 155px; }
  .helpCta { margin-top: 70px; grid-template-columns: 1fr; padding: 32px 25px; }
  .helpCta .solidButton { justify-self: start; }
  .helpFooterInner { grid-template-columns: 1fr; }
  .helpFooterLinks { flex-wrap: wrap; gap: 36px 40px; }
  .articleBreadcrumb { margin-bottom: 30px; }
  .articleLayout { gap: 38px; }
  .articleToc { padding: 18px; }
  .guideHeader h1 { font-size: clamp(2.15rem, 11vw, 3.25rem); }
  .guideHeader > p { font-size: .91rem; }
  .guideVisual { margin-top: 32px; }
  .articleFeedback { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .revealItem { opacity: 1; translate: none; filter: none; }
}