/* Shared styles for hAIp article pages (guide, privacy). Same tokens as the home page. */
:root {
  color-scheme: dark;
  --black: #0e0b12;
  --raised: #1b1622;
  --raised-2: #251e2e;
  --ink: #f7f2f8;
  --muted: #b3a7b8;
  --line: #2e2636;
  --orange: #f2600c;
  --orange-text: #ff8a3d;
  --on-orange: #0e0b12;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, ui-monospace, monospace;
  --gut-l: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px));
  --gut-r: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--black); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
::selection { background: var(--orange); color: var(--on-orange); }
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }
[hidden] { display: none !important; }
html[lang="ro"] [data-ru], html[lang="ru"] [data-ro] { display: none !important; }

.wrap { max-width: 1280px; margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.label { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.label.accent { color: var(--orange-text); }
.h-display { font-family: var(--display); font-weight: 400; line-height: 1.04; margin: 0; text-wrap: balance; position: relative; isolation: isolate; }
.sel { background: var(--orange); color: var(--on-orange); padding: 0 .07em; -webkit-box-decoration-break: clone; box-decoration-break: clone; position: relative; z-index: -1; }
.btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; padding: 15px 26px; font-weight: 600; font-size: 16px; text-decoration: none; }
.btn-primary { background: var(--orange); color: var(--on-orange); }

.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(14, 11, 18, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 16px; height: 68px; }
.logo { display: block; width: 92px; flex: none; }
.logo svg { display: block; width: 100%; height: auto; }
.head-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang button { background: none; border: 0; border-radius: 999px; padding: 6px 11px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--black); }
.head-cta { padding: 10px 18px; font-size: 14px; }
@media (max-width: 520px) { .head-cta { display: none; } }

.article-wrap { padding-block: clamp(40px, 7vw, 96px) clamp(64px, 9vw, 120px); }
article { max-width: 760px; margin-inline: auto; display: grid; gap: 28px; }
article h1 { font-size: clamp(44px, 7vw, 88px); line-height: 1.1; }
.lede { font-size: clamp(19px, 1.8vw, 23px); color: var(--muted); margin: 0; }
.back { display: inline-block; }
.back:hover { color: var(--ink); }
article section { display: grid; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
article h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; margin: 0; }
article p { margin: 0; }
article ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
article ul li { padding-left: 26px; position: relative; color: var(--muted); }
article ul li::before { content: "→"; position: absolute; left: 0; font-family: var(--mono); color: var(--orange-text); }
article ul li b, article p b { color: var(--ink); font-weight: 600; }
.step { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-orange); background: var(--orange); justify-self: start; padding: 3px 8px; border-radius: 4px; }
.tip { background: var(--raised); border-radius: 12px; padding: 18px 20px; color: var(--muted); font-size: 16px; }

.toc { background: var(--raised); border-radius: 14px; padding: 22px 24px; display: grid; gap: 10px; }
.toc ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.toc a { text-decoration: none; }
.toc a:hover { color: var(--orange-text); }
.toc li::marker { font-family: var(--mono); color: var(--orange-text); }

.frame-demo { margin: 6px 0 0; display: grid; gap: 12px; justify-items: center; }
.fd-phone { position: relative; width: 190px; aspect-ratio: 9 / 16; border-radius: 18px; border: 1px solid var(--line); background: var(--raised); overflow: hidden; }
.fd-zone { position: absolute; left: 0; right: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: repeating-linear-gradient(135deg, rgba(242,96,12,.14) 0 6px, transparent 6px 12px); }
.fd-zone.top { top: 0; height: 15%; border-bottom: 1px dashed var(--orange); }
.fd-zone.bottom { bottom: 0; height: 20%; border-top: 1px dashed var(--orange); }
.fd-person { position: absolute; left: 50%; bottom: 0; width: 72%; height: 58%; transform: translateX(-50%); border-radius: 48% 48% 0 0; background: #3b2f44; }
.fd-eyes { position: absolute; left: 50%; top: 22%; width: 34%; aspect-ratio: 1 / 1.15; transform: translateX(-50%); border-radius: 50%; background: #4a3d55; z-index: 1; }
.fd-eyes::after { content: ""; position: absolute; left: -40%; right: -40%; top: 42%; border-top: 1px dashed var(--ink); opacity: .5; }

.checklist { background: var(--raised); border-radius: 14px; padding: 24px; display: grid; gap: 14px; }
.checklist ul li::before { content: "☐"; color: var(--orange-text); }
.cta-box { background: var(--orange); color: var(--on-orange); border-radius: 16px; padding: clamp(24px, 4vw, 44px); display: grid; gap: 18px; justify-items: start; }
.cta-box .h-display { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; }
.cta-box .sel { background: var(--on-orange); color: var(--orange); }
.cta-box .btn-primary { background: var(--on-orange); color: var(--orange); }

.legal section { padding-top: 24px; }
.foot { border-top: 1px solid var(--line); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 26px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }