/* ============================================================
   AppleIDPro — the storefront, in the panel's own design system.
   Same tokens as panel/src/app/globals.css, so the site and the
   panel a buyer moves between look like one product.
   RTL · responsive · light and dark.
   ============================================================ */

:root {
  --brand: 61 47 214;
  --brand-600: 54 38 190;
  --brand-700: 42 31 156;
  --brand-soft: 238 236 253;
  --accent: 71 194 255;
  --ink: 20 21 43;
  --muted: 92 99 128;
  --line: 228 230 244;
  --bg: 244 245 252;
  --card: 255 255 255;
  --soft: 240 241 251;
  --ok: 21 128 61;
  --ok-soft: 220 252 231;
  --warn: 180 83 9;
  --warn-soft: 254 243 199;
  --bad: 200 30 30;
  --bad-soft: 254 226 226;

  --accent-2: 34 211 238;
  --brand-2: 106 75 255;

  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-card: 0 2px 10px rgb(29 26 92 / 0.06);
  --shadow-pop: 0 12px 34px rgb(38 31 140 / 0.12);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: 124 114 255;
    --brand-600: 108 97 245;
    --brand-700: 92 80 230;
    --brand-soft: 37 35 78;
    --accent: 96 205 255;
    --ink: 236 237 250;
    --muted: 160 166 196;
    --line: 45 48 78;
    --bg: 13 14 30;
    --card: 23 25 48;
    --soft: 31 33 62;
    --ok: 74 222 128;
    --ok-soft: 20 54 35;
    --warn: 251 191 36;
    --warn-soft: 58 44 12;
    --bad: 248 113 113;
    --bad-soft: 62 24 28;
    --accent-2: 34 211 238;
    --brand-2: 140 120 255;
    --shadow-card: 0 2px 10px rgb(0 0 0 / 0.3);
    --shadow-pop: 0 12px 34px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  font-family: Vazirmatn, Tahoma, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: rgb(var(--brand)); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid rgb(var(--brand) / 0.55); outline-offset: 2px; border-radius: 10px; }

/* Latin runs (emails, prices, codes) inside Persian text */
.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-feature-settings: "tnum"; }

h1, h2, h3 { line-height: 1.6; margin: 0 0 .5rem; font-weight: 800; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); letter-spacing: -.3px; }
h2 { font-size: clamp(1.25rem, 1.05rem + .9vw, 1.65rem); }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }

.wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 16px; }
.section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.section-tint {
  background:
    radial-gradient(620px 260px at 85% 0%, rgb(var(--accent) / .10), transparent 60%),
    rgb(var(--card));
  border-block: 1px solid rgb(var(--line));
}
.section-head h2 { position: relative; display: inline-block; padding-bottom: .4rem; }
.section-head h2::after {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0;
  width: 56px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--accent)));
}
.section-head { max-width: 46rem; margin-bottom: 1.75rem; }
.section-head p { color: rgb(var(--muted)); margin-bottom: 0; }
.muted { color: rgb(var(--muted)); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--card) / 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgb(var(--line));
}
.site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: rgb(var(--ink)); }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-700)));
  color: #fff;
}
.nav { display: flex; gap: .25rem; margin-inline-start: auto; align-items: center; }
.nav a {
  color: rgb(var(--ink)); padding: .5rem .75rem; border-radius: var(--r-md);
  font-weight: 600; font-size: .95rem;
}
.nav a:hover { background: rgb(var(--soft)); text-decoration: none; }
.nav a[aria-current="page"] { background: rgb(var(--brand-soft)); color: rgb(var(--brand)); }
/* the panel button is a .btn-primary, not a nav link: keep its own colours */
.nav a.btn-primary { color: #fff; background: rgb(var(--brand)); margin-inline-start: .35rem; }
.nav a.btn-primary:hover { color: #fff; background: rgb(var(--brand-700)); }
.nav-toggle {
  display: none; margin-inline-start: auto; background: rgb(var(--soft)); color: rgb(var(--ink));
  border: 0; border-radius: var(--r-md); width: 42px; height: 42px; cursor: pointer;
}

@media (max-width: 860px) {
  .nav {
    display: none; position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgb(var(--card)); border-bottom: 1px solid rgb(var(--line));
    padding: .5rem 16px 1rem;
  }
  .nav.open { display: flex; }
  .nav a { padding: .8rem .75rem; }
  .nav .btn { margin-top: .5rem; justify-content: center; }
  .nav-toggle { display: grid; place-items: center; }
}

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding-inline: 1.25rem; border-radius: var(--r-md);
  font-weight: 700; font-size: .98rem; border: 0; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: rgb(var(--brand)); color: #fff; box-shadow: var(--shadow-card); }
.btn-primary:hover { background: rgb(var(--brand-600)); color: #fff; }
.btn-secondary { background: rgb(var(--brand-soft)); color: rgb(var(--brand)); }
.btn-secondary:hover { background: rgb(var(--brand) / 0.15); }
.btn-ghost { background: transparent; color: rgb(var(--ink)); border: 1px solid rgb(var(--line)); }
.btn-ghost:hover { background: rgb(var(--soft)); }
.btn-lg { min-height: 54px; padding-inline: 1.75rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------ surfaces */
.card {
  background: rgb(var(--card)); border: 1px solid rgb(var(--line));
  border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow-card);
}
.badge {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  border-radius: 999px; padding: .2rem .65rem; font-size: .78rem; font-weight: 700;
  background: rgb(var(--soft)); color: rgb(var(--muted));
}
.badge-brand { background: rgb(var(--brand-soft)); color: rgb(var(--brand)); }
.badge-ok { background: rgb(var(--ok-soft)); color: rgb(var(--ok)); }
.badge-warn { background: rgb(var(--warn-soft)); color: rgb(var(--warn)); }

.grid { display: grid; gap: 1rem; }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 480px) and (max-width: 719px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ------------------------------------------------------------ hero */
.hero {
  color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(760px 340px at 15% -20%, rgb(var(--accent) / .45), transparent 62%),
    radial-gradient(520px 320px at 92% 110%, rgb(var(--accent-2) / .32), transparent 60%),
    linear-gradient(135deg, rgb(var(--brand-700)), rgb(var(--brand)) 52%, rgb(var(--brand-2)));
}
.hero::after {
  content: ""; position: absolute; inset-block-start: -140px; inset-inline-start: -90px;
  width: 440px; height: 440px; border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / .16) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .35;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.hero h1 { color: #fff; max-width: 20ch; }
.hero p { color: rgb(255 255 255 / 0.85); max-width: 52ch; font-size: 1.05rem; }
.hero .btn-primary { background: #fff; color: rgb(var(--brand-700)); }
.hero .btn-primary:hover { background: rgb(255 255 255 / 0.9); color: rgb(var(--brand-700)); }
.hero .btn-ghost { color: #fff; border-color: rgb(255 255 255 / 0.35); }
.hero .btn-ghost:hover { background: rgb(255 255 255 / 0.12); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.hero-points { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; }
.hero-points span {
  background: rgb(255 255 255 / 0.14); border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; font-weight: 600;
  backdrop-filter: blur(6px);
}

/* ------------------------------------------------------------ price cards */
.card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }

.plan { display: flex; flex-direction: column; gap: .9rem; height: 100%; position: relative; overflow: hidden; }
.plan.featured { border-color: rgb(var(--brand) / 0.45); box-shadow: var(--shadow-pop); }
.plan.featured::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px;
  background: linear-gradient(90deg, rgb(var(--accent)), rgb(var(--brand)), rgb(var(--brand-2)));
}
.plan-price { background: linear-gradient(90deg, rgb(var(--brand)), rgb(var(--brand-2)));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-head { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.plan-name { font-weight: 800; font-size: 1.05rem; }
.plan-price { font-size: 1.5rem; font-weight: 800; color: rgb(var(--brand)); }
.plan-price small { font-size: .8rem; font-weight: 600; color: rgb(var(--muted)); }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.plan li { display: flex; gap: .5rem; align-items: start; font-size: .92rem; line-height: 1.8; }
.plan li svg { flex: none; margin-top: .45rem; color: rgb(var(--ok)); }
.plan .btn { margin-top: auto; }

/* ------------------------------------------------------------ steps / faq */
.steps { counter-reset: step; }
.step { display: flex; gap: .9rem; }
.step-n {
  flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-2)));
  color: #fff; font-weight: 800; font-size: .9rem; box-shadow: var(--shadow-card);
}
.step:nth-child(2) .step-n { background: linear-gradient(135deg, rgb(var(--brand-2)), rgb(var(--accent))); }
.step:nth-child(3) .step-n { background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent-2))); }
.step:nth-child(4) .step-n { background: linear-gradient(135deg, rgb(var(--ok)), rgb(var(--accent-2))); }

/* a coloured tile for a feature card, so a row of cards is not one grey wall */
.tile {
  width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center;
  margin-bottom: .85rem;
}
.tile svg { width: 22px; height: 22px; }
.tile-brand { background: rgb(var(--brand-soft)); color: rgb(var(--brand)); }
.tile-accent { background: rgb(var(--accent) / .16); color: rgb(var(--accent)); }
.tile-ok { background: rgb(var(--ok-soft)); color: rgb(var(--ok)); }
.tile-warn { background: rgb(var(--warn-soft)); color: rgb(var(--warn)); }
.step h3 { margin-bottom: .15rem; }
.step p { color: rgb(var(--muted)); margin: 0; font-size: .92rem; }

details.faq {
  border: 1px solid rgb(var(--line)); border-radius: var(--r-md);
  background: rgb(var(--card)); padding: .9rem 1.1rem; margin-bottom: .65rem;
}
details.faq + details.faq { margin-top: 0; }
details.faq summary {
  cursor: pointer; font-weight: 700; list-style: none; display: flex;
  justify-content: space-between; gap: 1rem; align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; color: rgb(var(--brand)); font-weight: 800; }
details.faq[open] summary::after { content: "−"; }
details.faq p { margin: .75rem 0 0; color: rgb(var(--muted)); }

/* ------------------------------------------------------------ notes */
.note {
  display: flex; gap: .75rem; border-radius: var(--r-lg); padding: 1rem 1.1rem;
  font-size: .93rem; line-height: 1.85;
}
.note svg { flex: none; margin-top: .35rem; }
.note-warn { background: rgb(var(--warn-soft)); color: rgb(var(--warn)); }
.note-ok { background: rgb(var(--ok-soft)); color: rgb(var(--ok)); }
.note-brand { background: rgb(var(--brand-soft)); color: rgb(var(--brand)); }
.note strong { color: inherit; }

/* ------------------------------------------------------------ articles */
.post-card { display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.post-card h3 { margin: 0; font-size: 1rem; }
.post-card p { color: rgb(var(--muted)); font-size: .9rem; margin: 0; }
.post-card a.stretch::after { content: ""; position: absolute; inset: 0; }
.post-card { position: relative; }

.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.25rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .92rem; }
.prose th, .prose td { border: 1px solid rgb(var(--line)); padding: .6rem .75rem; text-align: start; }
.prose th { background: rgb(var(--soft)); font-weight: 700; }
.prose blockquote {
  margin: 1.25rem 0; padding: .9rem 1.1rem; border-inline-start: 4px solid rgb(var(--brand));
  background: rgb(var(--soft)); border-radius: var(--r-md); color: rgb(var(--muted));
}

.toc { background: rgb(var(--soft)); border-radius: var(--r-lg); padding: 1rem 1.25rem; margin-bottom: 2rem; }
.toc p { font-weight: 700; margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-inline-start: 1.1rem; }
.toc li { margin-bottom: .25rem; }

.crumbs { font-size: .85rem; color: rgb(var(--muted)); margin-bottom: 1rem; }
.crumbs a { color: rgb(var(--muted)); }

/* ------------------------------------------------------------ footer */
.site-footer {
  background: rgb(var(--card)); border-top: 1px solid rgb(var(--line));
  padding-block: 2.5rem 1.5rem; margin-top: 3rem;
}
.site-footer h4 { font-size: .95rem; margin: 0 0 .75rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.site-footer a { color: rgb(var(--muted)); font-size: .92rem; }
.site-footer a:hover { color: rgb(var(--brand)); }
.foot-trust { display: flex; justify-content: center; min-height: 85px; padding-top: 1.25rem; }
.foot-trust a { display: inline-flex; border-radius: 12px; }

.foot-bottom {
  border-top: 1px solid rgb(var(--line)); margin-top: 2rem; padding-top: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
  color: rgb(var(--muted)); font-size: .85rem;
}

/* ============================================================
   Markup carried over from the old pages.
   The article text is the site's SEO asset and moves across as
   it stands, so the classes it uses are styled here in the new
   design. Two of them hid their content without the old
   JavaScript — .reveal faded it out and .faq-a collapsed it —
   and both are neutralised first.
   ============================================================ */
.reveal { opacity: 1 !important; transform: none !important; }
.container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 16px; }

.article-meta {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  color: rgb(var(--muted)); font-size: .85rem; margin-bottom: 1.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid rgb(var(--line));
}
.article-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.prose p svg, .prose li svg, .prose h2 svg, .prose h3 svg {
  width: 1em; height: 1em; display: inline-block; vertical-align: -.12em;
}
.article-meta svg { width: 16px; height: 16px; flex: none; }

.prose ul.dotted { list-style: none; padding: 0; display: grid; gap: .5rem; margin: .5rem 0 1.25rem; }
.prose ul.dotted li { position: relative; padding-inline-start: 1.4rem; }
.prose ul.dotted li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .72em;
  width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--accent));
}

.prose ol.steps-list { list-style: none; padding: 0; counter-reset: sl; display: grid; gap: .75rem; margin: .75rem 0 1.5rem; }
.prose ol.steps-list li { counter-increment: sl; position: relative; padding-inline-start: 2.6rem; min-height: 2rem; }
.prose ol.steps-list li::before {
  content: counter(sl, persian); position: absolute; inset-inline-start: 0; top: .15em;
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(var(--brand-soft)); color: rgb(var(--brand)); font-weight: 800; font-size: .82rem;
}

.tbl-wrap { overflow-x: auto; margin: 1.25rem 0 1.5rem; }
.cmp-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: .92rem; }
.cmp-table th, .cmp-table td { padding: .7rem .85rem; text-align: start; border-bottom: 1px solid rgb(var(--line)); }
.cmp-table thead th { background: rgb(var(--brand)); color: #fff; font-weight: 800; }
.cmp-table tbody tr:nth-child(even) { background: rgb(var(--soft)); }
.cmp-table td:first-child { font-weight: 700; }

/* the old FAQ opened with JavaScript; here every answer is simply shown */
.faq-item {
  background: rgb(var(--card)); border: 1px solid rgb(var(--line));
  border-radius: var(--r-md); padding: 1rem 1.15rem; margin-bottom: .65rem;
}
.faq-q { font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq-q .chev { display: none; }
.faq-a { max-height: none !important; overflow: visible !important; }
.faq-a p { margin: .6rem 0 0; color: rgb(var(--muted)); padding: 0 !important; }

.rule-card {
  background: rgb(var(--card)); border: 1px solid rgb(var(--line));
  border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 1rem;
}
.btn-outline { background: transparent; color: rgb(var(--ink)); border: 1px solid rgb(var(--line)); }
.btn-outline:hover { background: rgb(var(--soft)); }
.btn-light { background: #fff; color: rgb(var(--brand-700)); }

.article-card {
  position: relative; background: rgb(var(--card)); border: 1px solid rgb(var(--line));
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.article-cover { background: rgb(var(--brand-soft)); display: grid; place-items: center; padding: 1.5rem; }
.article-cover svg { width: 46px !important; height: 46px !important; color: rgb(var(--brand)); }
.article-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.article-body h3 { margin: 0; font-size: 1rem; }
.article-body p { color: rgb(var(--muted)); font-size: .9rem; margin: 0; }
.cat { align-self: start; background: rgb(var(--soft)); color: rgb(var(--muted));
       border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 700; }
.more { margin-top: auto; font-weight: 700; font-size: .9rem; }
.cta-band {
  border-radius: var(--r-xl); padding: clamp(2rem, 1rem + 4vw, 3.5rem); text-align: center; color: #fff;
  background:
    radial-gradient(620px 280px at 82% -40%, rgb(var(--accent) / .42), transparent 62%),
    linear-gradient(135deg, rgb(var(--brand-700)), rgb(var(--brand)) 55%, rgb(var(--brand-2)));
  margin-block: 2rem; box-shadow: var(--shadow-pop);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgb(255 255 255 / .85); }
.hide-sm { display: none; }


/* ---------------------------------------------------- article pages */
.article-hero {
  color: #fff; position: relative; overflow: hidden;
  padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  background:
    radial-gradient(640px 300px at 12% -30%, rgb(var(--accent) / .45), transparent 62%),
    linear-gradient(135deg, rgb(var(--brand-700)), rgb(var(--brand)) 55%, rgb(var(--brand-2)));
}
.article-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgb(255 255 255 / .16) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .3;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.article-hero .wrap { position: relative; z-index: 1; }
.article-hero h1 { color: #fff; margin: .35rem 0 .75rem; max-width: 26ch; }
.article-hero .crumbs, .article-hero .crumbs a { color: rgb(255 255 255 / .75); }
.article-hero .crumbs a:hover { color: #fff; }
.article-hero .eyebrow {
  display: inline-block; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .22);
  border-radius: 999px; padding: .25rem .8rem; font-size: .8rem; font-weight: 700;
  backdrop-filter: blur(6px);
}
.article-hero .article-meta {
  border: 0; padding: 0; margin: 0; color: rgb(255 255 255 / .8);
}
.article-hero .article-meta svg { width: 16px; height: 16px; }

/* the diagrams the articles ship with: full width, on their own card */
.article-fig {
  margin: 1.75rem 0; padding: 1.25rem; border-radius: var(--r-lg);
  background:
    radial-gradient(420px 200px at 80% 0%, rgb(var(--accent) / .12), transparent 65%),
    rgb(var(--soft));
  border: 1px solid rgb(var(--line));
}
.article-fig svg { width: 100%; height: auto; display: block; }
.article-fig figcaption {
  margin-top: .75rem; text-align: center; font-size: .85rem; color: rgb(var(--muted));
}

/* the first paragraph of an article reads as a lead */
.prose > p:first-of-type { font-size: 1.08rem; color: rgb(var(--ink)); }

/* callouts inside the article text */
.prose .note {
  display: block; border-inline-start: 4px solid rgb(var(--brand));
  background: rgb(var(--brand-soft)); color: rgb(var(--ink));
  border-radius: var(--r-md); padding: 1rem 1.15rem; margin: 1.5rem 0;
}
.prose .note.warn { border-color: rgb(var(--warn)); background: rgb(var(--warn-soft)); }
.prose .note.ok   { border-color: rgb(var(--ok));   background: rgb(var(--ok-soft)); }
.prose .note.bad  { border-color: rgb(var(--bad));  background: rgb(var(--bad-soft)); }
.prose .note p:last-child { margin-bottom: 0; }

.prose h2 {
  position: relative; padding-inline-start: .85rem;
}
.prose h2::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: .25em .25em;
  width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, rgb(var(--brand)), rgb(var(--accent)));
}

.article-tail { padding-bottom: 1rem; }
.related { margin-bottom: 2rem; }
.related ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 720px) { .related ul { grid-template-columns: repeat(3, 1fr); } }
.related li a {
  display: block; height: 100%; background: rgb(var(--card)); border: 1px solid rgb(var(--line));
  border-radius: var(--r-md); padding: .9rem 1rem; font-weight: 700; font-size: .93rem;
  color: rgb(var(--ink)); transition: border-color .2s, transform .2s;
}
.related li a:hover { border-color: rgb(var(--brand) / .5); transform: translateY(-2px); text-decoration: none; }

/* products hero: the warranty, said up front */
.prod-warranty {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .55rem .95rem;
  border-radius: 999px; font-size: .92rem; text-decoration: none;
  color: rgb(var(--ok)); background: rgb(var(--ok-soft)); border: 1px solid rgb(var(--ok) / .25);
}
.prod-warranty:hover { color: rgb(var(--ok)); filter: brightness(.97); }
.prod-warranty b { font-weight: 800; }