/* ============================================================
   angeo.dev — shared styles for Custom HTML pages
   Namespaces: .amod (modules hub) · .amp (module page) · .abr (benchmark)
   Вставляється ОДИН раз (див. INSTRUCTIONS, крок 1).
   Після цього жодна сторінка не містить <style>.
   ============================================================ */

/* ---------- tokens (спільні для всіх трьох неймспейсів) ---------- */
.amod, .amp, .abr{
  /* Успадковуємо токени теми (main.css :root) — це автоматично дає
     коректний вигляд у dark mode, який у темі вже реалізований.
     Fallback-значення на випадок, якщо main.css не завантажився. */
  --ink:      var(--text-primary,   #1a1a1a);
  --ink-soft: var(--text-secondary, #5a5a5a);
  --ink-faint:var(--text-tertiary,  #9a9a9a);
  --line:     var(--border,         rgba(0,0,0,.1));
  --line-soft:var(--bg-secondary,   #f7f7f5);
  --paper:    var(--bg-primary,     #fff);
  --shell:#0f2231;
  --mono: var(--font-mono, ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  color:var(--ink);
  line-height:1.65;
}
.amod *, .amod *::before, .amod *::after,
.amp  *, .amp  *::before, .amp  *::after,
.abr  *, .abr  *::before, .abr  *::after{ box-sizing:border-box }

.amod p, .amp p, .abr p{ margin:0 0 1rem }
.amod a, .abr a{ color:var(--brand-dark) }
.amod a{ text-decoration:none }
.abr a{ text-decoration:underline; text-underline-offset:2px }
.abr a:hover{ color:var(--accent-hover) }

/* ---------- спільні примітиви ---------- */
.amod-eyebrow, .amp-eyebrow, .abr-eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-dark); margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem;
}
.amod-eyebrow::after, .amp-eyebrow::after, .abr-eyebrow::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.amod h1.amod-h1, .amp h1.amp-h1, .abr h1.abr-h1{
  font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.08; letter-spacing:-.025em;
  font-weight:800; margin:0 0 1.1rem; color:var(--ink);
}
.amod-lede, .amp-lede, .abr-lede{ font-size:1.09rem; color:var(--ink-soft) }

.amod-term, .amp-term, .abr-term{
  background:var(--shell); border-radius:10px; padding:1.15rem 1.25rem;
  font-family:var(--mono); font-size:.83rem; line-height:1.85; color:#cbd5e1;
  overflow-x:auto; margin:0 0 .75rem;
  /* КРИТИЧНО: без цього переноси рядків у <div> схлопуються в пробіли
     і весь термінал виводиться одним абзацом */
  white-space:pre; tab-size:2; -moz-tab-size:2;
}
.amod-term .c, .amp-term .c, .abr-term .c{ color:#64748b }
.amod-term .p, .amp-term .p{ color:var(--accent) }
.amod-term .k, .amp-term .k, .abr-term .k{ color:#93c5fd }
.amod-note, .amp-note{ font-size:.85rem; color:var(--ink-faint); margin:0 }

/* ============================================================
   .amod — MODULES HUB
   ============================================================ */
.amod-intro{ margin:0 0 3rem }
.amod h1.amod-h1 em{ font-style:normal; color:var(--brand) }
.amod-lede{ margin:0 0 1.6rem }

.amod-group{ margin:3.25rem 0 0; padding-top:1.5rem; border-top:1px solid var(--line) }
.amod-ghead{ display:flex; gap:1.1rem; align-items:baseline; margin:0 0 1.4rem; flex-wrap:wrap }
.amod-gnum{ font-family:var(--mono); font-size:.95rem; font-weight:700; color:var(--accent); letter-spacing:.05em; flex:none }
.amod-gtitle{ margin:0; font-size:1.3rem; font-weight:700; letter-spacing:-.015em }
.amod-gdesc{ flex:1 1 320px; min-width:260px; margin:0; color:var(--ink-faint); font-size:.93rem }

.amod-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:1.1rem }
.amod-card{
  border:1px solid var(--line); border-radius:var(--radius-lg,12px); background:var(--paper);
  padding:1.35rem 1.35rem 1.15rem; display:flex; flex-direction:column;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.amod-card:hover{ border-color:var(--brand); box-shadow:0 6px 22px -12px rgba(45,106,148,.45); transform:translateY(-2px) }
.amod-cname{ font-family:var(--mono); font-size:.95rem; font-weight:700; color:var(--ink); margin:0 0 .5rem; word-break:break-word }
.amod-cname span{ color:var(--brand-dark); font-weight:600 }
.amod-cname a{ color:inherit }
.amod-cname a:hover{ color:var(--brand-dark) }
.amod-cwhat{ margin:0 0 .85rem; font-size:.94rem; color:var(--ink-soft) }
.amod-clist{ margin:0 0 1rem; padding:0; list-style:none; font-size:.87rem; color:var(--ink-soft) }
.amod-clist li{ padding-left:1.05rem; position:relative; margin-bottom:.3rem }
.amod-clist li::before{ content:"—"; position:absolute; left:0; color:var(--brand) }
.amod-meta{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.03em }
.amod-tag{ background:var(--brand-light); color:var(--brand-dark); padding:.2rem .5rem; border-radius:4px }
.amod-tag.is-free{ background:#fff2e6; color:var(--accent-hover) }
.amod-install{
  background:var(--line-soft); border-radius:7px; padding:.55rem .7rem; margin:0 0 1.05rem;
  font-family:var(--mono); font-size:.74rem; color:#334155; overflow-x:auto; white-space:nowrap;
}
.amod-install::before{ content:"$ "; color:var(--accent) }
.amod-actions{ margin-top:auto; display:flex; gap:.5rem; flex-wrap:wrap }
.amod-btn{ font-size:.82rem; font-weight:600; padding:.45rem .85rem; border-radius:7px; border:1px solid var(--line); color:var(--ink-soft); transition:all .16s ease }
.amod-btn:hover{ border-color:var(--brand); color:var(--brand-dark); background:var(--brand-light) }
.amod-btn.is-primary{ background:var(--brand); border-color:var(--brand); color:#fff }
.amod-btn.is-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff }
.amod-card.is-soon{ border-style:dashed; background:#fafafa }
.amod-card.is-soon:hover{ transform:none; box-shadow:none }

.amod-faq{ margin:3.5rem 0 0; padding-top:1.75rem; border-top:1px solid var(--line) }
.amod-faq h2{ font-size:1.45rem; font-weight:700; letter-spacing:-.02em; margin:0 0 1.4rem }
.amod-q{ border-bottom:1px solid var(--line-soft); padding:0 0 1.1rem; margin:0 0 1.1rem }
.amod-q:last-child{ border-bottom:0 }
.amod-q h3{ font-size:1.02rem; font-weight:700; margin:0 0 .45rem; color:var(--ink) }
.amod-q p{ margin:0; color:var(--ink-soft); font-size:.95rem }

/* ============================================================
   .amp — SINGLE MODULE PAGE
   ============================================================ */
.amp-hero{ margin:0 0 2.25rem }
.amp-pkg{
  font-family:var(--mono); font-size:.95rem; font-weight:700; color:var(--brand-dark);
  margin:0 0 1rem; word-break:break-word;
}
.amp-lede{ margin:0 0 1.5rem }
.amp-badges{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.75rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.03em }
.amp-badge{ background:var(--brand-light); color:var(--brand-dark); padding:.25rem .6rem; border-radius:5px }
.amp-badge.is-free{ background:#fff2e6; color:var(--accent-hover) }
.amp-badge.is-plain{ background:var(--line-soft); color:var(--ink-soft) }

.amp-sec{ margin:2.75rem 0 0; padding-top:1.6rem; border-top:1px solid var(--line) }
.amp-sec h2{ font-size:1.45rem; font-weight:700; letter-spacing:-.02em; margin:0 0 .35rem }
.amp-sub{ color:var(--ink-faint); font-size:.93rem; margin:0 0 1.5rem }
.amp-sec h3{ font-size:1.05rem; font-weight:700; margin:1.6rem 0 .5rem }

.amp-feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem }
.amp-feat{ border:1px solid var(--line); border-radius:11px; padding:1.2rem 1.25rem; background:var(--paper) }
.amp-feat h3{ margin:0 0 .45rem; font-size:1rem; font-weight:700 }
.amp-feat p{ margin:0; font-size:.92rem; color:var(--ink-soft) }

.amp-tablewrap{ overflow-x:auto }
.amp table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:380px }
.amp th{
  text-align:left; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600;
  padding:.6rem .8rem; border-bottom:2px solid var(--line);
}
.amp td{ padding:.7rem .8rem; border-bottom:1px solid var(--line-soft); color:var(--ink-soft) }
.amp td:first-child{ color:var(--ink); font-weight:600; white-space:nowrap }

.amp-callout{
  background:#fffaf5; border:1px solid #fde3cc; border-left:4px solid var(--accent);
  border-radius:10px; padding:1.2rem 1.35rem; margin:1.5rem 0 0;
}
.amp-callout p{ margin:0; font-size:.94rem; color:var(--ink-soft) }
.amp-callout strong{ color:var(--ink) }

.amp-q{ border-bottom:1px solid var(--line-soft); padding:0 0 1.1rem; margin:0 0 1.1rem }
.amp-q:last-child{ border-bottom:0 }
.amp-q h3{ font-size:1.02rem; font-weight:700; margin:0 0 .4rem }
.amp-q p{ margin:0; color:var(--ink-soft); font-size:.95rem }

.amp-related{ display:flex; flex-wrap:wrap; gap:.55rem; margin:0 }
.amp-rel{
  font-family:var(--mono); font-size:.8rem; font-weight:600; text-decoration:none;
  border:1px solid var(--line); border-radius:7px; padding:.5rem .85rem;
  color:var(--brand-dark); transition:all .16s ease;
}
.amp-rel:hover{ border-color:var(--brand); background:var(--brand-light) }

/* ============================================================
   .abr — BENCHMARK REPORT
   ============================================================ */
.abr-x{
  font-family:var(--mono); color:var(--accent-hover); background:#fff4ea;
  border:1px dashed var(--accent); border-radius:4px; padding:0 .25em; font-size:.92em;
}
.abr-hero{ margin:0 0 2.5rem }
.abr-byline{ font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:.85rem; margin-top:1.5rem }

.abr-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg,12px); overflow:hidden; margin:0 0 2.75rem;
}
.abr-stat{ background:var(--paper); padding:1.4rem 1.25rem }
.abr-statnum{ font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; letter-spacing:-.03em; color:var(--brand-dark); line-height:1; margin:0 0 .45rem }
.abr-statlab{ font-size:.86rem; color:var(--ink-faint); margin:0 }

.abr-sec{ margin:3rem 0 0; padding-top:1.6rem; border-top:1px solid var(--line) }
.abr-sec h2{ font-size:1.5rem; font-weight:700; letter-spacing:-.02em; margin:0 0 .35rem }
.abr-sub{ color:var(--ink-faint); font-size:.93rem; margin:0 0 1.5rem }
.abr-sec h3{ font-size:1.05rem; font-weight:700; margin:1.75rem 0 .5rem }

.abr-ledger{ border:1px solid var(--line); border-radius:var(--radius-lg,12px); overflow:hidden }
.abr-row{ display:grid; grid-template-columns:1fr 130px; gap:1rem; align-items:center; padding:.95rem 1.2rem; border-bottom:1px solid var(--line-soft) }
.abr-row:last-child{ border-bottom:0 }
.abr-row:nth-child(odd){ background:#fcfdfe }
.abr-sname{ font-family:var(--mono); font-size:.83rem; font-weight:700; margin:0 0 .12rem }
.abr-sdesc{ font-size:.83rem; color:var(--ink-faint); margin:0 0 .5rem }
.abr-bar{ height:9px; border-radius:5px; background:#eef2f6; overflow:hidden }
.abr-bar i{ display:block; height:100%; border-radius:5px; width:calc(var(--v,0) * 1%); background:var(--brand) }
.abr-row.is-weak .abr-bar i{ background:var(--accent) }
.abr-val{ text-align:right }
.abr-pct{ font-family:var(--mono); font-size:1.15rem; font-weight:700; color:var(--brand-dark); display:block }
.abr-row.is-weak .abr-pct{ color:var(--accent-hover) }
.abr-plab{ font-size:.72rem; color:var(--ink-faint); letter-spacing:.03em }

.abr-dist{ display:grid; grid-template-columns:repeat(5,1fr); gap:.6rem; align-items:end; height:190px; margin:1.5rem 0 .75rem }
.abr-col{ display:flex; flex-direction:column; justify-content:flex-end; height:100%; text-align:center }
.abr-colbar{ background:var(--brand); border-radius:var(--radius-sm,6px) 6px 0 0; height:calc(var(--v,0) * 1%); min-height:4px; margin-bottom:.55rem }
.abr-col.is-hot .abr-colbar{ background:var(--accent) }
.abr-colv{ font-family:var(--mono); font-size:.9rem; font-weight:700; display:block; margin-bottom:.15rem }
.abr-coll{ font-size:.72rem; color:var(--ink-faint); line-height:1.3 }

.abr-tablewrap{ overflow-x:auto }
.abr table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:460px }
.abr th{ text-align:left; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; padding:.6rem .8rem; border-bottom:2px solid var(--line) }
.abr td{ padding:.7rem .8rem; border-bottom:1px solid var(--line-soft); color:var(--ink-soft) }
.abr td:first-child{ color:var(--ink); font-weight:600 }
.abr td.num{ font-family:var(--mono); text-align:right }

.abr-cite{ background:var(--brand-light); border:1px solid #cfe4f2; border-radius:var(--radius-lg,12px); padding:1.5rem 1.5rem 1.35rem; margin:0 0 2.75rem }
.abr-cite h2{ font-size:1.05rem; font-weight:700; margin:0 0 .6rem; letter-spacing:0 }
.abr-citebox{ background:var(--paper); border-radius:var(--radius-md,8px); padding:.9rem 1rem; font-family:var(--mono); font-size:.82rem; line-height:1.7; color:#334155; border-left:3px solid var(--brand) }
.abr-limits{ background:#fffaf5; border:1px solid #fde3cc; border-left:4px solid var(--accent); border-radius:10px; padding:1.4rem 1.5rem }
.abr-limits h2{ margin-top:0 }
.abr-limits ul{ margin:0; padding-left:1.15rem; color:var(--ink-soft); font-size:.94rem }
.abr-limits li{ margin-bottom:.5rem }
.abr-q{ border-bottom:1px solid var(--line-soft); padding:0 0 1.1rem; margin:0 0 1.1rem }
.abr-q:last-child{ border-bottom:0 }
.abr-q h3{ font-size:1.02rem; font-weight:700; margin:0 0 .4rem }
.abr-q p{ margin:0; color:var(--ink-soft); font-size:.95rem }

/* ============================================================
   спільний CTA-блок
   ============================================================ */
.amod-cta, .amp-cta, .abr-cta{
  margin:3rem 0 0; border-radius:14px; background:var(--brand-light);
  border:1px solid #cfe4f2; padding:2rem 1.75rem;
}
.amod-cta h2, .amp-cta h2, .abr-cta h2{ margin:0 0 .6rem; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; border:0; padding:0 }
.amod-cta p, .amp-cta p, .abr-cta p{ color:var(--ink-soft) }
.amod-ctarow, .amp-ctarow, .abr-ctarow{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1.4rem }
.amod-ctabtn, .amp-ctabtn, .abr-btn, .acmp-btn{
  display:inline-flex; align-items:center;
  background:var(--accent); color:#fff; font-weight:700; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:var(--radius-md,8px); text-decoration:none;
  transition:background .16s ease;
}
.amod-ctabtn:hover, .amp-ctabtn:hover, .abr-btn:hover, .acmp-btn:hover{ background:var(--accent-hover); color:#fff }

/* вторинна дія — текстове посилання зі стрілкою, як на головній */
.amod-ctabtn.is-ghost, .amp-ctabtn.is-ghost, .abr-btn.is-ghost, .acmp-btn.is-ghost{
  background:transparent; border:0; color:var(--ink-soft); font-weight:600;
  padding:.85rem .35rem;
}
.amod-ctabtn.is-ghost::after, .amp-ctabtn.is-ghost::after,
.abr-btn.is-ghost::after, .acmp-btn.is-ghost::after{
  content:" \2192"; margin-left:.4rem; transition:transform .16s ease;
}
.amod-ctabtn.is-ghost:hover, .amp-ctabtn.is-ghost:hover,
.abr-btn.is-ghost:hover, .acmp-btn.is-ghost:hover{ background:transparent; color:var(--ink) }

/* ============================================================
   responsive + a11y
   ============================================================ */
@media (max-width:640px){
  .amod-grid{ grid-template-columns:1fr }
  .amod-term, .amp-term, .abr-term, .acmp-term{ font-size:.74rem; padding:.9rem 1rem }
  .amod-cta, .amp-cta, .abr-cta, .abr-limits, .amp-callout{ padding:1.5rem 1.25rem }
  .abr-row{ grid-template-columns:1fr; gap:.5rem }
  .abr-val{ text-align:left; display:flex; align-items:baseline; gap:.4rem }
  .abr-dist{ height:150px; gap:.35rem }
}
@media (prefers-reduced-motion:reduce){
  .amod-card, .amod-btn, .amod-ctabtn, .amp-ctabtn, .amp-rel, .abr-btn{ transition:none }
  .amod-card:hover{ transform:none }
}
.amod a:focus-visible, .amp a:focus-visible, .abr a:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* ============================================================
   .acmp — COMPARISON / ROUNDUP PAGES
   ============================================================ */
.acmp{
  /* Успадковуємо токени теми (main.css :root) — це автоматично дає
     коректний вигляд у dark mode, який у темі вже реалізований.
     Fallback-значення на випадок, якщо main.css не завантажився. */
  --ink:      var(--text-primary,   #1a1a1a);
  --ink-soft: var(--text-secondary, #5a5a5a);
  --ink-faint:var(--text-tertiary,  #9a9a9a);
  --line:     var(--border,         rgba(0,0,0,.1));
  --line-soft:var(--bg-secondary,   #f7f7f5);
  --paper:    var(--bg-primary,     #fff);
  --shell:#0f2231;
  --mono: var(--font-mono, ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  color:var(--ink); line-height:1.65;
}
.acmp *, .acmp *::before, .acmp *::after{ box-sizing:border-box }
.acmp p{ margin:0 0 1rem }
.acmp a{ color:var(--brand-dark) }

.acmp-eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-dark); margin:0 0 .9rem; display:flex; align-items:center; gap:.6rem;
}
.acmp-eyebrow::after{ content:""; flex:1; height:1px; background:var(--line) }
.acmp-hero{ margin:0 0 2rem }
.acmp h1.acmp-h1{ font-size:clamp(1.85rem,4.3vw,2.85rem); line-height:1.1; letter-spacing:-.025em; font-weight:800; margin:0 0 1.1rem }
.acmp-lede{ font-size:1.09rem; color:var(--ink-soft) }
.acmp-stamp{ font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); border-top:1px solid var(--line); padding-top:.85rem; margin-top:1.4rem }

/* verdict up top — the answer before the table */
.acmp-verdicts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin:0 0 2.5rem }
.acmp-verdict{ border:1px solid var(--line); border-radius:var(--radius-lg,12px); padding:1.3rem 1.35rem; background:var(--paper) }
.acmp-verdict.is-ours{ border-color:var(--brand); background:var(--brand-light) }
.acmp-verdict h2{ font-size:1rem; font-weight:700; margin:0 0 .55rem; letter-spacing:0 }
.acmp-verdict ul{ margin:0; padding-left:1.1rem; font-size:.91rem; color:var(--ink-soft) }
.acmp-verdict li{ margin-bottom:.35rem }

.acmp-sec{ margin:2.9rem 0 0; padding-top:1.6rem; border-top:1px solid var(--line) }
.acmp-sec h2{ font-size:1.45rem; font-weight:700; letter-spacing:-.02em; margin:0 0 .35rem }
.acmp-sub{ color:var(--ink-faint); font-size:.93rem; margin:0 0 1.5rem }
.acmp-sec h3{ font-size:1.05rem; font-weight:700; margin:1.7rem 0 .5rem }

.acmp-tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg,12px) }
.acmp table{ width:100%; border-collapse:collapse; font-size:.88rem; min-width:540px }
.acmp th{
  text-align:left; font-family:var(--mono); font-size:.7rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600;
  padding:.75rem .85rem; border-bottom:2px solid var(--line); background:#fcfdfe;
}
.acmp th.is-ours{ color:var(--brand-dark); background:var(--brand-light) }
.acmp td{ padding:.7rem .85rem; border-bottom:1px solid var(--line-soft); color:var(--ink-soft); vertical-align:top }
.acmp td:first-child{ color:var(--ink); font-weight:600 }
.acmp td.is-ours{ background:#f6fbfe; color:var(--ink) }
.acmp tr:last-child td{ border-bottom:0 }
.acmp .y{ color:var(--brand-dark); font-weight:700 }
.acmp .n{ color:var(--ink-faint) }
.acmp .partial{ color:var(--accent-hover); font-weight:600 }

.acmp-note{ font-size:.83rem; color:var(--ink-faint); margin:.9rem 0 0 }
.acmp-note code{ font-family:var(--mono); font-size:.95em }

.acmp-disclosure{
  background:#fffaf5; border:1px solid #fde3cc; border-left:4px solid var(--accent);
  border-radius:10px; padding:1.25rem 1.4rem; margin:2rem 0 0;
}
.acmp-disclosure h2{ font-size:1rem; margin:0 0 .5rem; font-weight:700 }
.acmp-disclosure p{ margin:0 0 .6rem; font-size:.92rem; color:var(--ink-soft) }
.acmp-disclosure p:last-child{ margin-bottom:0 }

.acmp-term{
  background:var(--shell); border-radius:10px; padding:1.05rem 1.2rem;
  font-family:var(--mono); font-size:.82rem; line-height:1.85; color:#cbd5e1; overflow-x:auto; margin:1.2rem 0 0;
  white-space:pre; tab-size:2; -moz-tab-size:2;
}
.acmp-term .c{ color:#64748b }
.acmp-term .k{ color:#93c5fd }

.acmp-q{ border-bottom:1px solid var(--line-soft); padding:0 0 1.1rem; margin:0 0 1.1rem }
.acmp-q:last-child{ border-bottom:0 }
.acmp-q h3{ font-size:1.02rem; font-weight:700; margin:0 0 .4rem }
.acmp-q p{ margin:0; color:var(--ink-soft); font-size:.95rem }

.acmp-cta{ margin:3rem 0 0; border-radius:14px; background:var(--brand-light); border:1px solid #cfe4f2; padding:2rem 1.75rem }
.acmp-cta h2{ margin:0 0 .6rem; font-size:1.35rem; font-weight:700; letter-spacing:-.02em }
.acmp-cta p{ color:var(--ink-soft) }
.acmp-ctarow{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1.4rem }

.acmp-related{ display:flex; flex-wrap:wrap; gap:.55rem; margin:0 }
.acmp-rel{ font-size:.85rem; font-weight:600; text-decoration:none; border:1px solid var(--line); border-radius:7px; padding:.5rem .85rem; color:var(--brand-dark) }
.acmp-rel:hover{ border-color:var(--brand); background:var(--brand-light) }

@media (max-width:640px){
  .acmp-cta, .acmp-disclosure{ padding:1.4rem 1.15rem }
}

/* ============================================================
   .agf — SITE FOOTER  ·  .ahs — HOME SECTIONS
   ============================================================ */
.agf, .ahs{
  /* Успадковуємо токени теми (main.css :root) — це автоматично дає
     коректний вигляд у dark mode, який у темі вже реалізований.
     Fallback-значення на випадок, якщо main.css не завантажився. */
  --ink:      var(--text-primary,   #1a1a1a);
  --ink-soft: var(--text-secondary, #5a5a5a);
  --ink-faint:var(--text-tertiary,  #9a9a9a);
  --line:     var(--border,         rgba(0,0,0,.1));
  --line-soft:var(--bg-secondary,   #f7f7f5);
  --paper:    var(--bg-primary,     #fff);
  --shell:#0f2231;
  --mono: var(--font-mono, ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  line-height:1.65;
}
.agf *, .agf *::before, .agf *::after,
.ahs *, .ahs *::before, .ahs *::after{ box-sizing:border-box }

/* ---------- footer ---------- */
.agf{
  background:var(--shell); color:#94a3b8; margin-top:4rem;
  padding:3.25rem 1.5rem 1.75rem; font-size:.92rem;
}
.agf-inner{ max-width:1200px; margin:0 auto }
.agf a{ color:#cbd5e1; text-decoration:none; transition:color .15s ease }
.agf a:hover{ color:#fff }
.agf-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid #1e3a52;
}
.agf-brand p{ margin:.85rem 0 0; max-width:38ch; font-size:.88rem; line-height:1.7 }
.agf-logo{ font-size:1.15rem; font-weight:800; color:#fff; letter-spacing:-.02em }
.agf-logo span{ color:var(--accent) }
.agf-cpn{
  display:inline-block; margin-top:1.1rem; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; color:#8fb8d4;
  border:1px solid #2d5573; border-radius:5px; padding:.3rem .6rem;
}
.agf-col h3{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:#64809a; font-weight:600; margin:0 0 1rem;
}
.agf-col ul{ list-style:none; margin:0; padding:0 }
.agf-col li{ margin-bottom:.55rem; font-size:.88rem }

/* machine-readable strip — the part an agent reads */
.agf-machine{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  padding:1.5rem 0; border-bottom:1px solid #1e3a52;
  font-family:var(--mono); font-size:.75rem;
}
.agf-machine .lbl{ color:#64809a; letter-spacing:.08em; text-transform:uppercase; margin-right:.4rem }
.agf-machine a{
  border:1px solid #24445e; border-radius:5px; padding:.3rem .6rem; color:#8fb8d4;
}
.agf-machine a:hover{ border-color:var(--brand); color:#fff; background:#16304a }

.agf-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:1.5rem; font-size:.8rem; color:#64809a;
}
.agf-bottom ul{ list-style:none; display:flex; flex-wrap:wrap; gap:1.25rem; margin:0; padding:0 }

@media (max-width:900px){ .agf-grid{ grid-template-columns:1fr 1fr; gap:2rem } }
@media (max-width:560px){
  .agf{ padding:2.5rem 1.15rem 1.5rem }
  .agf-grid{ grid-template-columns:1fr; gap:1.75rem }
}

/* ---------- home sections ---------- */
.ahs{ color:var(--ink); padding:1rem 0 }
.ahs-eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-dark); margin:0 0 .8rem;
}
.ahs h2{ font-size:clamp(1.6rem,3.4vw,2.3rem); line-height:1.15; letter-spacing:-.02em; font-weight:800; margin:0 0 .9rem }
.ahs-lede{ font-size:1.05rem; color:var(--ink-soft); margin:0 0 2rem }

.ahs-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg,12px); overflow:hidden; margin:0 0 1.25rem;
}
.ahs-stat{ background:var(--paper); padding:1.5rem 1.3rem }
.ahs-statnum{
  font-size:clamp(1.8rem,3.6vw,2.5rem); font-weight:800; letter-spacing:-.03em;
  color:var(--brand-dark); line-height:1; margin:0 0 .5rem;
}
.ahs-stat.is-hot .ahs-statnum{ color:var(--accent-hover) }
.ahs-statlab{ font-size:.87rem; color:var(--ink-faint); margin:0; line-height:1.5 }
.ahs-source{ font-size:.82rem; color:var(--ink-faint); margin:0 0 1.5rem }

.ahs-q{ border-bottom:1px solid var(--line-soft); padding:0 0 1.15rem; margin:0 0 1.15rem }
.ahs-q:last-of-type{ border-bottom:0 }
.ahs-q h3{ font-size:1.05rem; font-weight:700; margin:0 0 .45rem; color:var(--ink) }
.ahs-q p{ margin:0; color:var(--ink-soft); font-size:.96rem }
.ahs-q p + p{ margin-top:.6rem }

.ahs-cta{ display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-top:1.75rem }
.ahs-btn{
  display:inline-flex; align-items:center; background:var(--accent); color:#fff;
  font-weight:700; font-size:.95rem; padding:.85rem 1.6rem; border-radius:var(--radius-md,8px);
  text-decoration:none; transition:background .16s ease;
}
.ahs-btn:hover{ background:var(--accent-hover); color:#fff }
.ahs-btn.is-ghost{ background:transparent; color:var(--ink-soft); font-weight:600; padding:.85rem .35rem }
.ahs-btn.is-ghost::after{ content:" \2192"; margin-left:.4rem }
.ahs-btn.is-ghost:hover{ background:transparent; color:var(--ink) }


/* ============================================================
   dark mode — тема має @media (prefers-color-scheme: dark),
   тут доводимо ті поверхні, що лишилися захардкодженими
   ============================================================ */
@media (prefers-color-scheme: dark){
  .amod-card, .amp-feat, .acmp-verdict, .abr-stat, .ahs-stat,
  .acmp-tablewrap, .amod-ledger, .abr-ledger{ background:var(--bg-primary) }
  .amod-cta, .amp-cta, .abr-cta, .acmp-cta{
    background:var(--brand-light); border-color:rgba(70,144,191,.28);
  }
  .amp-callout, .abr-limits, .acmp-disclosure{
    background:rgba(249,115,22,.08); border-color:rgba(249,115,22,.3);
  }
  .abr-x{ background:rgba(249,115,22,.14) }
  .abr-citebox, .amod-install{ background:var(--bg-secondary); color:var(--text-secondary) }
  .abr-row:nth-child(odd), .acmp th{ background:var(--bg-secondary) }
  .abr-bar, .acmp-rel, .amp-rel{ background:var(--bg-secondary) }
  .amod-btn.is-primary, .amod-ctabtn, .amp-ctabtn, .abr-btn, .acmp-btn, .ahs-btn{ color:#fff }
}