/* [hidden] must always win. On AnxietyTools a display:flex class silently beat the
   UA stylesheet's [hidden]{display:none} and showed a hidden panel to donors
   (2026-08-05). Cheap insurance against the same mistake here. */
[hidden]{display:none!important}

@import url('/assets/fonts/fonts.css?v=cyr3');
/* AstroMapa — main.css
   High-fidelity theme per design-src/design_handoff_astro_mapa/README.md.
   Self-hosted fonts: assets/fonts/fonts.css (Sora, Manrope, Instrument Serif) — no CDN. */

:root{
  /* Surfaces */
  --bg:        #141A2B;  /* page background */
  --panel:     #1A2136;  /* panels */
  --card:      #202842;  /* cards / inputs */
  --raised:    #242C48;  /* raised panels */

  /* Borders */
  --line:      #333D5C;  /* primary border */
  --line-strong: #444F76;/* stronger border / focus */
  --line-soft: #3D476A;  /* medium border */
  --line-row:  #2B3450;  /* row dividers */
  --line-tick: #364060;  /* minor house lines */

  /* Text */
  --ink:       #F4F6FA;  /* primary text */
  --ink-2:     #D8DDE7;
  --ink-dim:   #AEB6C6;  /* secondary */
  --ink-muted: #97A1B8;  /* muted */
  --ink-label: #8791A8;  /* captions */

  /* Accents */
  --ion:       #6E7BFF;  /* primary accent */
  --ion-hover: #8C96FF;
  --ion-link:  #9AA6FF;
  --ion-link-hover: #C7CEFF;
  --aqua:      #4ADEC6;  /* harmonious aspects */
  --ember:     #FF6A3D;  /* tense aspects */
  --brass:     #E8C77A;  /* paid offer */
  --brass-hover: #F3D896;
  --conjunction: #D8DDE7;
  --ink-on-accent: #141A2B;

  --radius-input: 12px;
  --radius-btn: 14px;
  --radius-panel: 20px;
  --radius-panel-lg: 22px;
  --radius-pill: 999px;
  --radius-phone: 42px;

  --font-display: 'Sora','Manrope',sans-serif;
  --font-body: 'Manrope', sans-serif;
  --font-serif: 'Instrument Serif', serif;

  --maxw: 1320px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-weight: 400; line-height:1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; }
a{ color: var(--ion-link); text-decoration:none; }
a:hover{ color: var(--ion-link-hover); }
::selection{ background: var(--ion); color: var(--ink-on-accent); }
h1,h2,h3{ font-family: var(--font-display); font-weight:200; color: var(--ink); margin: 0 0 .5em; letter-spacing:-0.02em; }
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 22px; }

/* ---------- logo ---------- */
.logo-mark{ display:inline-flex; }
.logo-lockup{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo-lockup .word{
  font-family: var(--font-display); font-weight:200; font-size:26px;
  letter-spacing:0.3em; text-transform:uppercase; color: var(--ink);
}
.logo-lockup .word .dot{ color: var(--ion); }

/* ---------- header / navbar ---------- */
header.site{ height:52px; display:flex; align-items:center; border-bottom:1px solid var(--line); background: var(--panel); position:relative; }
header.site .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:100%; position:relative; }
header.site nav.links{ display:flex; gap:26px; font-size:13px; color: var(--ink-dim); }
header.site nav.links a{ color: var(--ink-dim); }
header.site nav.links a.active{ color: var(--ink); }
header.site .header-right{ display:flex; align-items:center; gap:14px; flex:none; }
/* language dropdown (replaced the inline ES/BR/UA row when EN arrived, 2026-07-29) */
header.site .lang-menu{ position:relative; flex:none; }
header.site .lang-btn{
  display:flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  font-size:12px; letter-spacing:0.08em; color: var(--ink-muted);
  background:transparent; border:1px solid var(--line-strong); border-radius:8px; cursor:pointer;
}
header.site .lang-menu.open .lang-btn{ color: var(--ink); border-color: var(--ion-link); }
header.site .lang-menu.open .lang-btn svg{ transform: rotate(180deg); }
header.site .lang-btn svg{ transition: transform 0.15s ease; }
header.site .lang-list{
  display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:150px; z-index:60;
  background: var(--card, #141A2B); border:1px solid var(--line-strong); border-radius:12px;
  padding:6px; box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
header.site .lang-menu.open .lang-list{ display:block; }
header.site .lang-list a{
  display:block; padding:9px 12px; border-radius:8px; font-size:13px; color: var(--ink-dim);
}
header.site .lang-list a:hover{ background: rgba(110,123,255,0.08); color: var(--ink); }
header.site .lang-list a.active{ color: var(--ion-link); }
/* burger: hidden on desktop, the same nav.links stays a plain inline row there */
header.site .burger{
  display:none; flex-direction:row; justify-content:center; align-items:center; gap:8px;
  height:34px; flex:none; border:1px solid var(--line-strong); border-radius:8px;
  background:transparent; cursor:pointer; padding:0 12px;
}
header.site .burger .burger-lines{ display:flex; flex-direction:column; gap:4px; }
header.site .burger .burger-lines span{ width:16px; height:2px; background: var(--ink); border-radius:2px; }
header.site .burger .burger-label{
  font-family: var(--font-body); font-size:13px; color: var(--ink); letter-spacing:0.02em;
}
header.site .burger[aria-expanded="true"]{ border-color: var(--ion); }
@media (max-width: 899px){
  /* burger breakpoint unified with the 900px desktop breakpoint (2026-07-29 fix): full
     inline nav.links only fits comfortably at >=900px viewport width. Below that (including
     the former 681-899px gap where neither burger nor a collapsed menu applied) it must
     always collapse into the burger — otherwise the 5-item nav overflows the header and
     causes horizontal scroll (qa-tester report, 2026-07-29, ~767px). */
  header.site{ height:auto; min-height:52px; }
  header.site .wrap{ flex-wrap:nowrap; gap:10px; padding:10px 20px; }
  header.site .burger{ display:flex; margin-right:4px; }
  /* mobile: nav.links becomes a dropdown panel under the header, opened by .burger.
     position:absolute so it overlays content instead of pushing the page and breaking
     scroll (no scroll-snap, no body fixation — see 2026-07-15 WBP scroll incident notes). */
  header.site nav.links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background: var(--raised); border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; opacity:0; padding:0 20px;
    transition: max-height .25s ease, opacity .2s ease, padding .25s ease;
    z-index:50;
  }
  header.site nav.links.open{ max-height:320px; opacity:1; padding:10px 20px 16px; }
  header.site nav.links a{ padding:10px 0; border-bottom:1px solid var(--line-row); }
  header.site nav.links a:last-child{ border-bottom:none; }
}
@media (max-width: 680px){
  .logo-lockup .word{ font-size:21px; }
}

/* ---------- hero (mobile landing) ---------- */
.hero{ padding: 40px 0 60px; }
.hero .wrap{ display:flex; flex-direction:column; gap:22px; max-width: 640px; }
.badge{
  align-self:flex-start; font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color: var(--ion-link); border:1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding:7px 14px;
}
.badge.gold{ color: var(--brass); border-color:#3A3322; }
.hero h1{ font-size: clamp(30px, 6vw, 40px); line-height:1.08; letter-spacing:-0.02em; }
.hero p.lead{ font-family: var(--font-body); font-size:15px; line-height:1.65; color: var(--ink-dim); margin:0; }
/* concept pattern: Sora Light line, then a second line in Instrument Serif Italic, white
   ("Precisión de instrumento, / lectura de persona.") — not a coloured accent, just voice change */
.h1-serif{ font-family: var(--font-serif); font-style: italic; font-weight:400; color: var(--ink); }
.accent-serif{ font-family: var(--font-serif); font-style: italic; font-weight:400; color: var(--ink); font-size:1.15em; }
.hero .wheel-decor{ opacity:.9; display:flex; justify-content:center; margin-top:8px; }
.hero .wheel-decor svg{ width:100%; max-width:330px; height:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:56px; padding:0 26px; border-radius: var(--radius-btn); border:none;
  background: var(--ion); color: var(--ink-on-accent);
  font-family: var(--font-body); font-weight:600; font-size:15px; letter-spacing:0.01em;
  cursor:pointer; text-decoration:none; transition: background .15s ease, border-color .15s ease;
}
.btn:hover{ background: var(--ion-hover); color: var(--ink-on-accent); }
.btn.white{ background: var(--ink); color: var(--ink-on-accent); }
.btn.white:hover{ background:#FFFFFF; }
.btn.gold{ height:58px; background: var(--brass); color: var(--ink-on-accent); }
.btn.gold:hover{ background: var(--brass-hover); }
.btn.ghost{
  height:50px; background:transparent; border:1px solid var(--line-strong); color: var(--ink);
  font-weight:400; font-size:14px;
}
.btn.ghost:hover{ border-color: var(--ion); }
.btn.solid-sm{ height:50px; font-size:14px; }
.btn-note{ text-align:center; font-size:12px; color: var(--ink-label); margin:0; }
/* подпись строго ПОД кнопкой на любой ширине: стек одной колонкой по ширине кнопки */
.cta-stack{ display:inline-flex; flex-direction:column; align-items:stretch; gap:10px; }
.cta-stack .btn{ width:100%; max-width:420px; text-align:center; }
.cta-stack .btn-note{ max-width:420px; }
@media(max-width:680px){ .cta-stack{ display:flex; } }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ flex:1; }

/* ---------- form (birth data) ---------- */
.form-shell{ max-width: 480px; margin: 0 auto; display:flex; flex-direction:column; gap:26px; }
.form-shell .step-label{ font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color: var(--ink-muted); }
.form-shell h1{ font-size:30px; }
.field-group{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-muted); }
.field input, .field select{
  height:54px; border-radius: var(--radius-input); border:1px solid var(--line-strong);
  background: var(--card); color: var(--ink); font-family: var(--font-display); font-weight:300; font-size:16px;
  padding:0 16px; width:100%;
}
.field input::placeholder{ font-family: var(--font-body); font-weight:400; color: var(--ink-label); }
.field input:focus, .field select:focus{ outline:none; border-color: var(--ion); }
.field-row{ display:flex; gap:12px; }
.field-row .field.date{ flex:1; }
.field-row .field.time{ width:118px; flex:none; }
.field .tz-note{ font-size:12px; color: var(--ink-label); }
.field.hidden{ display:none; }

.submit-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.submit-wrap .btn{ min-width:260px; }

.cityfind{ position:relative; }
.cityfind-list{
  position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:20;
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius-input);
  max-height:280px; overflow-y:auto; box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}
.cityfind-item{
  padding:12px 16px; font-family: var(--font-display); font-weight:300; font-size:15px;
  color: var(--ink); cursor:pointer; border-bottom:1px solid var(--line-row);
}
.cityfind-item:last-child{ border-bottom:none; }
.cityfind-item:hover, .cityfind-item.active{ background: var(--raised); }
.cityfind-empty{ padding:12px 16px; font-size:13px; color: var(--ink-label); }

.checkbox-row{ display:flex; gap:12px; align-items:flex-start; font-size:13px; line-height:1.5; color: var(--ink-dim); cursor:pointer; }
.checkbox-row input{ position:absolute; opacity:0; width:0; height:0; }
.checkbox-row .box{
  width:20px; height:20px; border-radius:6px; border:1px solid var(--line-strong); background:transparent;
  color: var(--ink-on-accent); display:flex; align-items:center; justify-content:center; font-size:13px; flex:none;
}
.checkbox-row input:checked + .box{ background: var(--ion); border-color: var(--ion); }
.checkbox-row .box::after{ content:''; }
.checkbox-row input:checked + .box::after{ content:'✓'; }

/* ---------- result screen ---------- */
.result-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.result-head .name{ font-family: var(--font-display); font-weight:200; font-size:26px; }
.result-head .meta{ font-size:12px; color: var(--ink-muted); }

.wheel-wrap{ display:flex; justify-content:center; margin: 20px 0; }
.wheel-wrap svg{ width:100%; max-width:346px; height:auto; }

.summary-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:8px; margin: 18px 0; }
.summary-grid .card{
  border:1px solid var(--line); border-radius: var(--radius-input); padding:12px;
  display:flex; flex-direction:column; gap:4px; background:transparent;
}
.summary-grid .card .label{ font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-muted); }
.summary-grid .card .value{ font-family: var(--font-display); font-weight:300; font-size:17px; white-space:nowrap; }

/* ---------- paywall ---------- */
.paywall-screen{ background: linear-gradient(180deg, var(--card) 0%, var(--bg) 55%); border-radius: var(--radius-panel); padding: 40px 26px; }
.paywall-screen .pdf-list{
  display:flex; flex-direction:column; gap:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding: 20px 0; margin: 22px 0;
}
.paywall-screen .pdf-list .row{ display:flex; gap:12px; align-items:baseline; font-size:14px; color: var(--ink-2); }
.paywall-screen .pdf-list .row .dash{ color: var(--ion); font-size:12px; }
.price-row{ display:flex; align-items:baseline; gap:12px; margin-bottom: 22px; }
.price-row .price{ font-family: var(--font-display); font-weight:200; font-size:44px; letter-spacing:-0.02em; }
.price-row .price-old{ font-size:13px; color: var(--ink-muted); text-decoration:line-through; }
.price-row.compact .price{ font-size:26px; }

/* legacy paywall grid (kept for /pay/ style cards if used) */
.paywall{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:36px 0; }
@media (max-width:760px){ .paywall{ grid-template-columns:1fr; } }
.paywall .card{ background: var(--panel); border:1px solid var(--brass); border-radius: var(--radius-panel); padding:24px; text-align:center; }
.paywall .card .price{ font-size:1.6rem; color:var(--brass); font-weight:700; margin:10px 0; }

/* ---------- desktop generator layout ---------- */
.generator{ border:1px solid var(--line); border-radius: var(--radius-panel-lg); background: var(--panel); overflow:hidden; margin: 30px 0; }
.generator-grid{ display:grid; grid-template-columns: minmax(0,1fr); }
.generator-chart{
  min-width:0; padding: 28px; display:flex; align-items:center; justify-content:center;
  background: var(--raised);
}
.generator-chart svg{ width:100%; max-width:520px; height:auto; }
.generator-side{ min-width:0; border-top:1px solid var(--line); padding: 28px 22px; display:flex; flex-direction:column; gap:22px; }
.generator-side .name{ font-family: var(--font-display); font-weight:200; font-size:24px; }
.generator-side .meta{ font-size:13px; color: var(--ink-muted); }
.side-block .side-title{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--ink-muted); padding-bottom:10px; border-bottom:1px solid var(--line); }
.position-row{
  display:grid; grid-template-columns: 26px 1fr auto 34px; gap:10px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--line-row); font-size:13px;
}
.position-row .glyph{ font-size:17px; color: var(--ink); }
.position-row .pname{ color: var(--ink-dim); }
.position-row .pos{ font-family: var(--font-display); font-weight:300; color: var(--ink); white-space:nowrap; }
.position-row .house{ color: var(--ink-label); text-align:right; font-family: var(--font-display); }
.chip-row{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  border:1px solid var(--line-soft); border-radius: var(--radius-pill); padding:6px 11px;
  font-size:12px; color: var(--ink-2); display:flex; gap:6px; align-items:center;
}
.chip .dot{ width:6px; height:6px; border-radius: var(--radius-pill); }

@media (min-width: 900px){
  .generator-grid{ grid-template-columns: minmax(0,1fr) 380px; }
  .generator-chart{ padding:44px; }
  .generator-side{ border-top:none; border-left:1px solid var(--line); padding: 32px 28px; }

  /* ---------- desktop centering hotfix (owner 2026-07-29: "десктоп кривой — по центру")
     Mobile-first text sits left (.hero .wrap max-width:640px) which reads lopsided once the
     containers are centered by .wrap/max-width on wide viewports. Center the hero/section
     HEADLINES here; leave form fields and long-form reading paragraphs left (readability). */
  .hero .wrap{ text-align:center; align-items:center; max-width:760px; }
  .hero .badge{ align-self:center; }
  /* Строка входов стоит над героем и обязана следовать его выравниванию: на мобильном
     герой прижат влево, с 1000px — по центру. Без этой строки пилюли оставались слева,
     а бейдж и h1 уезжали в центр, и на десктопе строка читалась как чужой элемент. */
  .quick-links{ justify-content:center; }

  /* form step header only (fields stay left — usability) */
  .form-shell .step-label,
  .form-shell > h1, .form-shell > h2{ text-align:center; }

  /* result / synastry-result headline block */
  .result-head{ flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; }

  /* section headings inside the result flow — long-form paragraphs (.portrait-body,
     .deep-lead, pdf-list rows) are left untouched for readability */
  .portrait > h2,
  .fulldata > h2,
  .deep-teaser > h2{ text-align:center; }
  .paywall-screen > .badge,
  .paywall-screen > h2,
  .paywall-screen > p.lead{ text-align:center; }

  /* synastry section headings (spheres/aspects) — score/cta blocks are already centered site-wide */
  .syn-spheres-block > h2,
  .syn-aspects-block > h2{ text-align:center; }

  /* programmatic pages (moon-в-знаке etc.): intro reads centered, article .block body stays left */
  .prog-page > .eyebrow,
  .prog-page > h1,
  .prog-page > p.lead{ text-align:center; }
}

/* ---------- programmatic page (Luna en X) ---------- */
.prog-page .eyebrow{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--ink-muted); }
.prog-page h1{ font-size: clamp(28px, 5vw, 38px); }
.prog-page .lead{ font-size:14px; line-height:1.7; color: var(--ink-dim); max-width:66ch; }
.prog-page .block{ margin: 22px 0; }
.prog-page .block h2{ font-family: var(--font-display); font-weight:300; font-size:18px; color: var(--ink); }

/* ---------- inline related-page cross-links (mapa/luna hubs) ---------- */
.related-links{ font-size:13px; line-height:1.7; color: var(--ink-dim); margin:18px 0; }
.related-links a{ color: var(--ion-link); }
.related-links a:hover{ color: var(--ion-link-hover); }
.ad-slot{
  border:1px dashed var(--line-strong); border-radius: var(--radius-input); height:90px;
  display:flex; align-items:center; justify-content:center; font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; color: var(--ink-label); margin: 20px 0;
}
.faq{ display:flex; flex-direction:column; }
.faq .q{
  display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px 0;
  border-top:1px solid var(--line-row); font-size:14px; color: var(--ink-2); cursor:pointer; background:none; border-left:none; border-right:none; border-bottom:none;
  width:100%; text-align:left; font-family: var(--font-body);
}
.faq .item:last-child .q{ border-bottom:1px solid var(--line-row); }
.faq .q .sign{ color: var(--ion); flex:none; font-size:16px; transition: transform .15s ease; }
.faq .item.open .q .sign{ transform: rotate(45deg); }
.faq .a{ display:none; padding: 0 0 16px; font-size:13px; line-height:1.7; color: var(--ink-dim); }
.faq .item.open .a{ display:block; }
.meta-chips{ display:flex; gap:8px; flex-wrap:wrap; font-size:11px; color: var(--ink-label); margin-top:8px; }
.meta-chips span{ border:1px solid var(--line); border-radius: var(--radius-pill); padding:5px 10px; }
.moon-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:10px; margin: 20px 0; }
.moon-grid a{
  border:1px solid var(--line); border-radius: var(--radius-input); padding:12px; display:flex; align-items:center; gap:8px;
  color: var(--ink-dim); font-size:13px;
}
.moon-grid a:hover{ border-color: var(--ion); color: var(--ink); }
.moon-grid .g{ font-size:16px; color: var(--ink); }

/* ---------- sky dome ---------- */
.sky-wrap{ text-align:center; margin:40px 0; }
.sky-wrap h2{ font-size:28px; line-height:1.15; }
.sky-subtitle{ color: var(--ink-muted); font-size:14px; margin:6px 0 22px; }
.sky-panel{
  display:inline-block; max-width:100%; padding:20px;
  border:1px solid var(--line); border-radius:20px;
  background: radial-gradient(circle at 50% 42%, #1F2740, #141A2B);
}
.sky-panel canvas{ display:block; max-width:100%; height:auto; border-radius:14px; background:#0E1220; }
.sky-caption{ margin-top:16px; }
.zenith-star{ margin-top:6px; color: var(--brass); font-family: var(--font-display); font-weight:300; font-size:20px; }
.zenith-sub{ margin-top:4px; color: var(--ink-muted); font-size:13px; }
.sky-poster-btn{ display:inline-flex; margin-top:22px; }

/* ---------- deep-type teaser ---------- */
.deep-teaser{ margin: 40px 0; }
.deep-lead{ color: var(--ink-2); font-size:15px; line-height:1.7; max-width:640px; }
.deep-blur-wrap{ position:relative; margin-top:18px; border-radius: var(--radius-panel); overflow:hidden; }
.deep-blur-text{ padding:18px 20px; filter: blur(6px); user-select:none; pointer-events:none; }
.deep-blur-text p{ color: var(--ink-dim); font-size:14px; line-height:1.7; margin:0 0 .8em; }
.deep-blur-fade{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 90%);
}
.deep-unlock-btn{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-50%);
  white-space:nowrap;
}

/* ---------- money/love teaser blocks ----------
   The first paragraph is fully readable (real value, free). The second one starts the next
   thought and fades out mid-sentence — deliberately NOT blur()+overlay like .deep-teaser:
   a hook only pulls if the reader can actually read where it breaks off. */
.teaser-cut-wrap{ position:relative; margin-top:2px; }
.teaser-cut-text{
  color: var(--ink-dim); font-size:15px; line-height:1.75; margin:0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 96%);
  user-select:none;
}
.teaser-unlock-group{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:14px; }
.teaser-unlock-group .btn{ white-space:nowrap; }
.teaser-veil-text{ color: var(--ink-2); font-size:13px; line-height:1.5; max-width:420px; text-align:center; margin:0; }

/* ---------- generic sections ---------- */
.panel{ background: var(--panel); border:1px solid var(--line); border-radius: var(--radius-panel); padding:28px; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
@media (max-width:760px){ .grid-2{ grid-template-columns: 1fr; } }

.portrait{ margin: 30px 0; }
.portrait h3{ color: var(--ion-link); font-size:1.05rem; margin-top:22px; font-family: var(--font-display); font-weight:300; }

.solar-intro{ background: var(--card); border-radius: var(--radius-panel); padding:22px 24px; margin-bottom:22px; }
.solar-intro p{ font-family: var(--font-body); font-size:16px; line-height:1.7; color: var(--ink); margin:0 0 14px; }
.solar-intro p:last-child{ margin-bottom:0; }

.solar-note{ font-family: var(--font-body); font-size:13px; line-height:1.6; color: var(--ink-dim); font-style:italic; margin-top:8px; }

.solar-closing{ border:1px solid var(--brass); background: var(--raised); border-radius: var(--radius-panel); padding:22px 24px; margin-top:26px; }
.solar-closing p{ font-family: var(--font-body); font-size:15px; line-height:1.7; color: var(--ink); margin:0 0 12px; }
.solar-closing p:last-child{ margin-bottom:0; }

footer.site{ border-top:1px solid var(--line); padding: 30px 0; margin-top:60px; color: var(--ink-label); font-size:.85rem; }
footer.site a{ color: var(--ink-label); text-decoration:underline; }
.todo{ color: var(--ember); font-size:.8rem; }
.blog-list{ display:grid; gap:16px; }
.blog-list .item{ padding:16px; border:1px solid var(--line); border-radius:12px; }
.hreflang-note{ display:none; }

/* ---------- full chart data (planets/houses/aspects/balance) ---------- */
.fulldata{ margin: 36px 0; }
.fulldata h2{ font-size: 22px; }
.fd-grid{ display:grid; grid-template-columns: 1fr; gap:22px; margin-bottom:22px; }
@media (min-width: 760px){ .fd-grid{ grid-template-columns: 1fr 1fr; } }
.fd-block{ border:1px solid var(--line); border-radius: var(--radius-panel); padding:18px 16px; background: var(--panel); }
.fd-title{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--ink-muted); padding-bottom:10px; margin-bottom:6px; border-bottom:1px solid var(--line); }
.fd-row{ display:grid; grid-template-columns: 22px 1fr auto auto 34px; gap:8px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line-row); font-size:13px; }
.fd-table-houses .fd-row{ grid-template-columns: 64px 1fr auto; }
.fd-row:last-child{ border-bottom:none; }
.fd-row.fd-head{ color: var(--ink-label); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; border-bottom:1px solid var(--line); padding-bottom:8px; }
.fd-glyph{ font-size:15px; color: var(--ink); }
.fd-name{ color: var(--ink-dim); }
.fd-sign{ color: var(--ink-2); white-space:nowrap; }
.fd-deg{ font-family: var(--font-display); font-weight:300; color: var(--ink); white-space:nowrap; }
.fd-house{ color: var(--ink-label); text-align:right; font-family: var(--font-display); }
.fd-house-num{ color: var(--ink-dim); font-family: var(--font-display); }
.retro{ color: var(--ember); font-size:11px; font-weight:600; letter-spacing:0.02em; }
.fd-ang-tag{ color: var(--ion-link); font-size:10px; letter-spacing:0.1em; border:1px solid var(--line-soft); border-radius:5px; padding:1px 5px; margin-left:4px; }
.fd-row.fd-angular .fd-house-num{ color: var(--ink); }
.fd-note{ font-size:12px; color: var(--ink-label); margin: 12px 0 0; }

.fd-matrix-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius: var(--radius-panel); padding:14px; margin-bottom:22px; }
.fd-matrix{ display:inline-block; }
.fd-matrix-row{ display:flex; }
.fd-mcell{
  width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:14px; border-bottom:1px solid var(--line-row); border-right:1px solid var(--line-row);
}
.fd-matrix-row:last-child .fd-mcell{ border-bottom:none; }
.fd-mcell:last-child{ border-right:none; }
.fd-mcorner{ border:none !important; }
.fd-mglyph{ color: var(--ink-dim); font-size:15px; }
.fd-mrow-glyph{ color: var(--ink); }
.fd-mempty{ border-color:transparent; }
.fd-mdot{ color: var(--line-soft); font-size:16px; }
.fd-masp{ font-size:15px; }

.fd-balance{ background: var(--panel); }
.fd-balance-row{ margin-bottom:16px; }
.fd-balance-row:last-child{ margin-bottom:0; }
.fd-balance-label{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color: var(--ink-muted); margin-bottom:8px; }
.fd-bar{ display:flex; height:8px; border-radius: var(--radius-pill); overflow:hidden; background: var(--card); margin-bottom:10px; }
.fd-bar-seg{ height:100%; }
.fd-legend{ display:flex; flex-wrap:wrap; gap:12px 16px; font-size:12px; color: var(--ink-dim); }
.fd-legend-item{ display:flex; align-items:center; gap:6px; }
.fd-legend-item b{ color: var(--ink); font-weight:600; }
.fd-dot{ width:8px; height:8px; border-radius:50%; flex:none; }

/* ---------- side star decor (desktop only, decorative, requested by owner) ---------- */
.star-side{
  position:fixed; top:0; bottom:0; width:64px; pointer-events:none; z-index:1;
  background-repeat:no-repeat;
}
.star-side.star-left{ left:0; }
.star-side.star-right{ right:0; }
.star-side::before{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 8%,  rgba(244,246,250,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 14%,     rgba(244,246,250,.30) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 35% 22%, rgba(244,246,250,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 30%,     rgba(244,246,250,.25) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 38%, rgba(244,246,250,.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 25% 46%,     rgba(244,246,250,.20) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 45% 54%, rgba(244,246,250,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 62%,     rgba(244,246,250,.25) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 52% 70%, rgba(244,246,250,.40) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 78%,     rgba(244,246,250,.20) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 58% 86%, rgba(244,246,250,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 92%,     rgba(244,246,250,.25) 50%, transparent 51%);
}
.star-side::after{
  content:''; position:absolute; inset:0;
  background-image:
    radial-gradient(2.5px 2.5px at 40% 18%, rgba(232,199,122,.9) 50%, rgba(232,199,122,0) 70%),
    radial-gradient(2px 2px at 22% 64%,     rgba(232,199,122,.8) 50%, rgba(232,199,122,0) 70%);
  filter: blur(.2px);
}
@media (max-width: 680px){ .star-side{ display:none; } }

/* mobile status bar (design fidelity, decorative on phone-frame screenshots) */
.status-row{ display:flex; justify-content:space-between; padding: 10px 0; font-size:12px; color: var(--ink-muted); }

/* ---------- homepage content sections (about / how it works / free vs paid / faq) ---------- */
.form-intro{ margin: 4px 0 2px; }
.footer-privacy{ font-size:12px; color: var(--ink-label); margin-top:6px; }

/* eyebrow labels reused across all home sections, same style as the §04 pdf-content panel */
.home-eyebrow{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--ink-dim); margin-bottom:10px; }

.about-section{ margin: 56px 0; }
.about-section h2{ font-size: clamp(22px, 4vw, 28px); letter-spacing:-0.01em; }
.about-section p{ font-size:14px; line-height:1.75; color: var(--ink-2); max-width:72ch; margin:0 0 1em; }

/* horoscope-2027 life-sphere blocks — same rhythm as the neighbouring sections */
.spheres-section{ margin: 56px 0; }
.spheres-section h2{ font-size: clamp(22px, 4vw, 28px); margin: 34px 0 12px; letter-spacing:-0.01em; }
.spheres-section h2:first-child{ margin-top:0; }
.spheres-section p{ color: var(--ink-2); line-height:1.75; margin:0 0 12px; }

.steps-section{ margin: 56px 0; }
.steps-section h2{ font-size: clamp(22px, 4vw, 28px); margin-bottom:22px; letter-spacing:-0.01em; }
.steps-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width: 760px){ .steps-grid{ grid-template-columns: 1fr; } }
.step-card{ border:1px solid var(--line); border-radius: var(--radius-panel); padding:22px 20px; background: var(--panel); }
.step-card .num{ font-family: var(--font-display); font-weight:200; font-size:34px; color: var(--ion-link); }
.step-card .glyph{ font-size:18px; margin-left:8px; color: var(--brass); vertical-align: middle; }
.step-card h3{ font-family: var(--font-display); font-weight:300; font-size:17px; margin:10px 0 6px; }
.step-card p{ font-size:13px; line-height:1.6; color: var(--ink-dim); margin:0; }

.footer-credit{ font-size:11px; letter-spacing:0.06em; color: var(--ink-label); margin-top:14px; opacity:.85; }

/* «2027 по знакам» — 12 коротких карточек на странице гороскопа */
.section-lead{ font-size:14px; line-height:1.65; color: var(--ink-dim); max-width:640px; margin:0 0 20px; }
.signs-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 900px){ .signs-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .signs-grid{ grid-template-columns: 1fr; } }
.sign-card{ border:1px solid var(--line); border-radius: var(--radius-panel); padding:18px 18px; background: var(--panel); }
.sign-card h3{ font-family: var(--font-display); font-weight:300; font-size:16px; margin:0 0 8px; color: var(--ink); }
.sign-card p{ font-size:13px; line-height:1.65; color: var(--ink-dim); margin:0; }

.compare-section{ margin: 56px 0; }
.compare-section h2{ font-size: clamp(22px, 4vw, 28px); margin-bottom:6px; letter-spacing:-0.01em; }
.compare-section > .lead{ color: var(--ink-muted); font-size:14px; margin-bottom:22px; }
.compare-col h3{ font-family: var(--font-display); font-weight:300; font-size:16px; margin-bottom:14px; }
.compare-col.gold-edge{ border-color: var(--brass); }
.compare-list{ display:flex; flex-direction:column; gap:12px; }
.compare-list .row{ display:flex; gap:12px; align-items:baseline; font-size:14px; color: var(--ink-2); }
.compare-list .row .dash{ color: var(--ion); font-size:12px; }
.compare-col.gold-edge .compare-list .row .dash{ color: var(--brass); }
.compare-col .price-row{ margin: 18px 0 14px; }
.compare-col .btn{ width:100%; }

.faq-section{ margin: 56px 0; }
.faq-section h2{ font-size: clamp(22px, 4vw, 28px); margin-bottom:8px; letter-spacing:-0.01em; }

/* ---------- products section (4 cards) ---------- */
.products-section{ margin: 56px 0; }
.products-section h2{ font-size: clamp(22px, 4vw, 28px); margin-bottom:6px; letter-spacing:-0.01em; }
.products-section > .lead{ color: var(--ink-muted); font-size:13px; margin-bottom:22px; }
.products-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; }
@media (max-width: 900px){ .products-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .products-grid{ grid-template-columns: 1fr; } }
.product-card{
  display:block; border:1px solid var(--line); border-radius: var(--radius-panel);
  background: var(--panel); padding:20px 18px; text-decoration:none; color:inherit;
  position:relative; transition: border-color .15s ease;
}
.product-card:hover{ border-color: var(--ion); }
.product-card:hover h3{ color: var(--ink); }
.product-card.gold{ border-color: var(--brass); }
.product-card .badge-sm{
  position:absolute; top:14px; right:14px; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--brass); border:1px solid #3A3322; border-radius: var(--radius-pill); padding:3px 8px;
}
.product-card h3{ font-family: var(--font-display); font-weight:300; font-size:16px; color: var(--ink); margin:0 0 8px; padding-right:0; }
.product-card p{ font-size:13px; line-height:1.55; color: var(--ink-dim); margin:0 0 16px; }
.product-card .price-row{ margin:0; gap:8px; align-items:baseline; }
.product-card .price-row .price{ font-family: var(--font-display); font-weight:300; font-size:20px; color: var(--brass); letter-spacing:normal; }
.product-card .price-row .price-old{ font-size:11px; }
.products-hint{ text-align:center; font-size:12px; color: var(--ink-label); margin-top:16px; }

/* ---------- PDF content section (04) ---------- */
.pdf-content-section{ margin: 56px 0; }
.pdf-content-panel{ padding: 32px 26px; }
.pdf-content-panel .eyebrow{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color: var(--ion-link); margin-bottom:10px; }
.pdf-content-panel h2{ font-size: clamp(24px, 5vw, 32px); }
.pdf-content-panel > .lead{ color: var(--ink-dim); font-size:14px; line-height:1.7; max-width:70ch; margin-bottom:22px; }
.pdf-chapters{ display:flex; flex-direction:column; margin: 4px 0 26px; }
.pdf-chapters .row{
  display:flex; gap:14px; align-items:flex-start; padding:12px 0;
  border-bottom:1px solid var(--line-row); font-size:14px; color: var(--ink-2);
}
.pdf-chapters .row:last-child{ border-bottom:none; }
.pdf-chapters .num-chip{
  flex:none; width:26px; height:26px; border:1px solid var(--line-soft); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:300; font-size:12px; color: var(--ion-link);
}

/* residence city (solar-return products: year2027 / bundle_all) */
.res-city{ display:flex; flex-direction:column; gap:8px; max-width:520px; margin:36px auto 0; }
.res-city label{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-muted); }
.res-city input[type="text"]{
  height:54px; border-radius: var(--radius-input); border:1px solid var(--line-strong);
  background: var(--card); color: var(--ink); font-family: var(--font-display); font-weight:300; font-size:16px;
  padding:0 16px; width:100%;
}
.res-city input[type="text"]::placeholder{ font-family: var(--font-body); font-weight:400; color: var(--ink-label); }
.res-city input[type="text"]:focus{ outline:none; border-color: var(--ion); }

/* ---------- compatibility / synastry calculator ---------- */
.syn-people{ display:flex; flex-direction:column; gap:22px; margin-bottom:8px; }
@media (min-width: 760px){ .syn-people{ flex-direction:row; gap:20px; } .syn-people .syn-person{ flex:1; } }
.syn-person{ border:1px solid var(--line); border-radius: var(--radius-panel); padding:20px 18px; background: var(--panel); }
.syn-person-label{ font-family: var(--font-display); font-weight:300; font-size:16px; color: var(--ink); margin-bottom:14px; }

.syn-score-block{ text-align:center; margin: 40px 0 30px; }
.syn-score-block h2{ font-size: clamp(20px, 4vw, 26px); margin-bottom:18px; }
.syn-score-ring{ display:flex; justify-content:center; }
.syn-score-band{ font-size:14px; color: var(--ink-dim); max-width:60ch; margin: 14px auto 0; line-height:1.6; }

.syn-spheres-block{ margin: 30px 0; }
.syn-spheres-block h2{ font-size: clamp(18px, 3.4vw, 22px); margin-bottom:16px; }
.syn-bar-row{ display:grid; grid-template-columns: 110px 1fr 44px; align-items:center; gap:12px; margin-bottom:12px; }
.syn-bar-label{ font-size:13px; color: var(--ink-2); }
.syn-bar-track{ height:10px; border-radius: var(--radius-pill); background: var(--card); overflow:hidden; }
.syn-bar-fill{ height:100%; border-radius: var(--radius-pill); }
.syn-bar-value{ font-family: var(--font-display); font-weight:300; font-size:13px; color: var(--ink-dim); text-align:right; }

.syn-aspects-block{ margin: 36px 0; }
.syn-aspects-block h2{ font-size: clamp(18px, 3.4vw, 22px); margin-bottom:16px; }
.syn-cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
@media (max-width: 760px){ .syn-cards{ grid-template-columns: 1fr; } }
.syn-card{ border:1px solid var(--line); border-radius: var(--radius-panel); padding:18px; background: var(--panel); }
.syn-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.syn-card-head .dot{ width:8px; height:8px; border-radius: var(--radius-pill); flex:none; }
.syn-card-glyphs{ font-size:15px; color: var(--ink-muted); }
.syn-card h3{ font-family: var(--font-display); font-weight:300; font-size:15px; margin:0 0 8px; line-height:1.4; }
.syn-card p{ font-size:13px; line-height:1.65; color: var(--ink-dim); margin:0; }

.syn-unknown-note{ font-size:13px; color: var(--ink-label); text-align:center; margin: 8px 0 30px; }
.syn-cta{ text-align:center; margin: 40px 0; }
.syn-cta h2{ font-size: clamp(20px, 4vw, 26px); margin-bottom:8px; }
.syn-cta p{ color: var(--ink-dim); font-size:14px; margin:0 0 20px; }

/* ---------- blog index grid ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-top:20px; }
@media (max-width: 900px){ .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .blog-grid{ grid-template-columns: 1fr; } }
.article-card{
  display:block; border:1px solid var(--line); border-radius: var(--radius-panel);
  background: var(--panel); padding:20px 18px; text-decoration:none; color:inherit;
  transition: border-color .15s ease;
}
.article-card:hover{ border-color: var(--ion); }
.article-card:hover h3{ color: var(--ink); }
.article-card:hover .topic-icon{ color: var(--brass); }
.article-card .topic-icon{ display:block; color: var(--ion); margin-bottom:12px; transition: color .15s ease; }
.article-card .topic-icon svg{ width:28px; height:28px; display:block; }
.article-card h3{ font-family: var(--font-display); font-weight:300; font-size:16px; color: var(--ink-2); margin:0 0 8px; }
.article-card p{ font-size:13px; line-height:1.55; color: var(--ink-dim); margin:0; }

/* ---------- article body (blog posts) ---------- */
.article-body{ max-width:720px; margin:0 auto; padding-top:30px; padding-bottom:50px; }
.article-body .topic-icon{ display:block; color: var(--ink-dim); margin-bottom:14px; }
.article-body .topic-icon svg{ width:22px; height:22px; display:block; }
.article-body h1{ font-size: clamp(28px, 5vw, 38px); line-height:1.15; margin-bottom:.6em; }
.article-body h2{
  font-family: var(--font-display); font-weight:300; font-size:20px; color: var(--ink);
  margin-top:1.7em; margin-bottom:.9em; padding-bottom:14px; border-bottom:1px solid rgba(232,199,122,.35);
}
/* h3 — подзаголовок внутри раздела (напр. 12 знаков): мельче h2 и без разделителя */
.article-body h3{
  font-family: var(--font-display); font-weight:300; font-size:16px; color: var(--ink);
  margin-top:1.5em; margin-bottom:.5em;
}
.article-body p{ font-family: var(--font-body); font-size:15px; line-height:1.7; color: var(--ink-2); margin:0 0 1em; }
/* lead paragraph: the first <p> right after <h1> reads as the article's intro line */
.article-body h1 + p{ font-size: clamp(16px, 2.4vw, 18px); line-height:1.75; color: var(--ink); margin-bottom:1.3em; }
.article-body ul{ list-style:none; margin:0 0 1.2em; padding-left:1.3em; color: var(--ink-2); font-size:15px; line-height:1.7; }
.article-body li{ position:relative; margin-bottom:.5em; }
.article-body li::before{ content:'★'; position:absolute; left:-1.3em; top:.05em; font-size:10px; color: var(--ion); }
.article-body strong{ color: var(--ink); font-weight:600; }
.article-body em{ font-style: italic; }
.article-body a{ color: var(--ion-link); text-decoration:none; }
.article-body a:hover{ color: var(--ion-link-hover); text-decoration:underline; }

/* neutral blockquote (no fact/tip/warn/myth marker) — left line in Graphite */
.article-body blockquote{
  margin: 0 0 1.5em; padding: 4px 0 4px 20px; border-left:3px solid var(--raised);
  color: var(--ink-dim); font-style:italic;
}
.article-body blockquote p{ margin:0 0 .6em; color:inherit; font-style:inherit; }
.article-body blockquote p:last-child{ margin-bottom:0; }

/* callout cards — colour per semantic type, ~8% tinted panel + 3px left rule */
.article-body .callout{
  margin: 0 0 1.5em; padding: 18px 20px 20px; border-radius: var(--radius-panel);
  border-left:3px solid var(--callout-color); background: var(--callout-bg);
}
.article-body .callout-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.article-body .callout-icon{ color: var(--callout-color); font-size:15px; line-height:1; flex:none; }
.article-body .callout-label{
  color: var(--callout-color); font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
}
.article-body .callout p{ margin:0 0 .6em; color: var(--ink-2); }
.article-body .callout p:last-child{ margin-bottom:0; }
.article-body .callout-fact{ --callout-color: var(--ion);   --callout-bg: rgba(110,123,255,.08); }
.article-body .callout-tip{  --callout-color: var(--aqua);  --callout-bg: rgba(74,222,198,.08); }
.article-body .callout-warn{ --callout-color: var(--ember);  --callout-bg: rgba(255,106,61,.08); }
.article-body .callout-myth{ --callout-color: var(--brass);  --callout-bg: rgba(232,199,122,.08); }

.article-body .faq-block{ margin-top:2.2em; }

/* ---------- contact form (legal/contacts page) — reuses .form-shell/.field/.btn tokens,
   adds only what's missing: textarea, honeypot hiding, submit-result message states. */
.article-body .contact-form{ margin: 1.6em 0 2em; max-width:480px; }
.article-body .contact-form.form-shell{ gap:18px; }
.field textarea{
  height:auto; min-height:130px; border-radius: var(--radius-input); border:1px solid var(--line-strong);
  background: var(--card); color: var(--ink); font-family: var(--font-body); font-weight:400; font-size:15px;
  line-height:1.6; padding:14px 16px; width:100%; resize:vertical;
}
.field textarea::placeholder{ font-family: var(--font-body); font-weight:400; color: var(--ink-label); }
.field textarea:focus{ outline:none; border-color: var(--ion); }
/* honeypot: fully off-screen (not display:none, which some bots skip filling but a screen
   reader also skips) — tabindex=-1 + aria-hidden keep it invisible and unreachable for humans,
   while still present in the DOM and thus fillable by naive form-scraping bots. */
.hp-field{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.form-msg{ min-height:1.4em; font-size:13px; text-align:center; margin:0; }
.form-msg.is-ok{ color: var(--aqua); }
.form-msg.is-err{ color: var(--ember); }
.contact-form .btn[aria-busy="true"]{ opacity:.7; cursor:default; }
.article-body .faq-block h2{ margin-bottom:1em; }
/* article FAQ: each question its own Graphite card, not the flat accordion-row look used
   elsewhere (homepage .faq-section etc.) — scoped to .article-body so those stay untouched */
.article-body .faq-block .faq{ gap:12px; }
.article-body .faq-block .faq .item{
  background: var(--raised); border-radius: var(--radius-panel); overflow:hidden;
}
.article-body .faq-block .faq .q{
  padding:16px 18px; border:none; font-size:14.5px; font-weight:600; color: var(--ink);
}
.article-body .faq-block .faq .item:last-child .q{ border-bottom:none; }
.article-body .faq-block .faq .a{ padding: 0 18px 18px; color: var(--ink-dim); }
.res-city .res-note{ text-align:left; }

/* --- paywall delivery email --- */
.pay-step-eyebrow{ margin-bottom:8px; }
.pay-step2-eyebrow{ max-width:420px; margin:22px auto 0; text-align:left; }
.pay-email{ max-width:420px; margin:28px auto 6px; text-align:left; }
.pay-email label{ display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px; }
.pay-email input{ width:100%; box-sizing:border-box; background:var(--raised); border:1px solid #333D5C; border-radius:10px; padding:12px 14px; color:var(--ink); font:inherit; }
.pay-email input:focus{ outline:none; border-color:var(--ion); }
.pay-email input.invalid{ border-color:var(--ember); }
.pay-email-hint{ font-size:12px; color:var(--ink-dim); margin-top:6px; }
.pay-email input.invalid + .pay-email-hint{ color:var(--ember); }

/* hero badge x2 (owner 2026-07-28) */
.hero .badge{ font-size:20px; letter-spacing:.18em; padding:12px 22px; border-radius:14px; }
@media (max-width:680px){ .hero .badge{ font-size:16px; padding:10px 16px; } }
.btn-note-dim{ opacity:.65; font-size:11px; margin-top:2px; }

/* "calculate first" notice shown when a buy button is pressed before the chart exists */
.calc-first-note{ display:none; max-width:560px; margin:0 auto 18px; padding:14px 18px;
  background:rgba(255,106,61,.09); border:1px solid rgba(255,106,61,.45); border-left-width:3px;
  border-radius:12px; color:var(--ink); font-size:14px; line-height:1.5; }
.result-ctas{ flex-wrap:wrap; gap:10px; }
.result-ctas .btn{ min-width:230px; }

/* inline email box under each buy button */
.inline-email{ margin:12px auto 4px; max-width:420px; text-align:left; }
.inline-email label{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:7px; }
.inline-email-row{ display:flex; gap:8px; }
.inline-email input{ flex:1; min-width:0; background:var(--raised); border:1px solid #333D5C; border-radius:10px; padding:12px 14px; color:var(--ink); font:inherit; }
.inline-email input:focus{ outline:none; border-color:var(--ion); }
.inline-email input.invalid{ border-color:var(--ember); }
.inline-email .btn{ white-space:nowrap; }
.inline-email-err{ font-size:12px; color:var(--ember); margin-top:6px; }
@media (max-width:520px){ .inline-email-row{ flex-direction:column; } }

/* order progress */
.report-progress{ max-width:420px; height:6px; background:var(--raised); border-radius:999px; overflow:hidden; margin:18px 0 10px; }
#report-progress-fill{ height:100%; width:8%; background:linear-gradient(90deg, var(--ion), var(--aqua)); border-radius:999px; transition:width 1s linear; }
.report-stage{ font-size:13px; color:var(--ink-dim); }

/* --- native date/time inputs: brand-dark on iOS/Android (owner 2026-07-28) --- */
input[type="date"], input[type="time"]{
  color-scheme: dark;                    /* native picker opens dark on both platforms */
  -webkit-appearance: none; appearance: none;
  min-height: 52px; font-size: 16px;     /* uniform height; 16px stops iOS auto-zoom */
  font-family: var(--font-body);
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{ text-align: left; }  /* iOS centers it by default */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  opacity: .9; cursor: pointer; width: 18px; height: 18px;
  background-size: 18px 18px; background-repeat: no-repeat;
}
input[type="date"]::-webkit-calendar-picker-indicator{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7BFF' stroke-width='1.7'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
input[type="time"]::-webkit-calendar-picker-indicator{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7BFF' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E");
}
.field input{ min-height: 52px; font-size: 16px; }

/* birth date triplet: day / month / year */
.date-triplet{ display:flex; gap:8px; }
.date-triplet .dt-day{ flex:0 0 64px; }
.date-triplet .dt-month{ flex:1; min-width:0; }
.date-triplet .dt-year{ flex:0 0 88px; }
.date-triplet input, .date-triplet select{
  height:52px; border-radius: var(--radius-input); border:1px solid var(--line-strong);
  background: var(--card); color: var(--ink); font-family: var(--font-display); font-weight:300;
  font-size:16px; padding:0 12px; width:100%; -moz-appearance:textfield; appearance:none;
}
.date-triplet input::-webkit-outer-spin-button, .date-triplet input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.date-triplet select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7BFF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:14px; padding-right:32px; }
.date-triplet input:focus, .date-triplet select:focus{ outline:none; border-color: var(--ion); }

/* birth-date triplet needs room: stack date over time on narrow screens */
@media (max-width:680px){
  .field-row{ flex-wrap:wrap; }
  .field-row .field.date{ flex:1 1 100%; }
  .field-row .field.time{ width:140px; }
}
.date-triplet .dt-day{ flex:0 0 58px; }
.date-triplet .dt-year{ flex:0 0 80px; }
.date-triplet .dt-month{ flex:1; min-width:96px; }

/* my-orders panel rows: product name first, ref demoted to small meta */
.order-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; border-bottom:1px solid var(--line, rgba(110,123,255,0.12)); }
.order-row:last-child{ border-bottom:none; }
.order-name{ font-size:15px; color: var(--ink); }
.order-meta{ font-size:11px; color: var(--ink-dim); margin-top:3px; letter-spacing:0.04em; }
.order-open{ flex:none; font-size:13px; color: var(--ion-link); border:1px solid var(--line-strong); border-radius:10px; padding:8px 16px; }
.order-open:hover{ border-color: var(--ion-link); }

/* ---- daily / weekly horoscope block on the sign pages ---- */
.daily-horoscope{
  margin:28px 0 34px; padding:22px 20px; background: var(--panel);
  border:1px solid var(--line); border-radius:14px;
}
.daily-horoscope .dh-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin-bottom:14px; }
.daily-horoscope .dh-head h2{ margin:0; font-size:18px; }
.dh-stamp{ margin:0; font-size:12px; color: var(--ink-label); letter-spacing:0.03em; }
.dh-tabs{ display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.dh-tab{
  appearance:none; border:1px solid var(--line-soft); background:transparent;
  color: var(--ink-dim); font-family: var(--font-body); font-size:14px;
  padding:8px 16px; border-radius:999px; cursor:pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.dh-tab:hover{ color: var(--ink); border-color: var(--line-strong); }
.dh-tab.active{ background: var(--ion); border-color: var(--ion); color: var(--ink-on-accent); font-weight:600; }
/* Every pane stays in the markup so the text is indexable; only display toggles. */
.dh-pane{ display:none; }
.dh-pane.active{ display:block; }
.dh-mood{
  font-family: var(--font-serif); font-style:italic; font-size:1.1em;
  color: var(--ink); margin:0 0 14px;
}
.daily-horoscope h3{ font-size:14px; letter-spacing:0.05em; text-transform:uppercase;
  color: var(--ink-label); margin:16px 0 6px; font-weight:600; }
.daily-horoscope p{ font-size:15px; line-height:1.7; color: var(--ink-2); margin:0 0 10px; }
.dh-note{ font-size:13px !important; color: var(--ink-muted) !important; border-top:1px solid var(--line-row);
  padding-top:12px; margin-top:16px !important; }
.dh-cta{ margin:18px 0 0 !important; }
.dh-cta .btn{ height:48px; font-size:14px; }
@media (max-width:600px){
  .daily-horoscope{ padding:18px 14px; }
  .dh-tab{ flex:1 1 auto; padding:8px 10px; }
}
/* Grid of 12 signs on the /today/ index */
.today-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:22px 0; }
.today-card{ display:block; padding:16px 18px; background: var(--card); border:1px solid var(--line);
  border-radius:12px; text-decoration:none; transition:border-color .15s ease; }
.today-card:hover{ border-color: var(--ion); }
.today-card .tc-name{ display:flex; align-items:center; gap:8px; font-family: var(--font-display);
  font-size:17px; color: var(--ink); margin-bottom:6px; }
.today-card .tc-mood{ font-size:14px; line-height:1.55; color: var(--ink-dim); margin:0; }
/* Явное «читати весь день» на каждой плитке. Карточка и раньше была ссылкой целиком,
   но выглядела как законченный короткий текст — по двенадцати одинаковым плиткам не
   читалось, что за каждой лежит полный разбор дня. Стрелка едет вправо на наведении,
   чтобы направление действия читалось и без слов. */
.today-card .tc-more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; font-size:13px; font-weight:500; color: var(--ion);
}
.today-card .tc-more::after{
  content:'→'; transition:transform .18s ease;
}
.today-card:hover .tc-more::after{ transform:translateX(3px); }
@media (prefers-reduced-motion:reduce){
  .today-card .tc-more::after{ transition:none; }
  .today-card:hover .tc-more::after{ transform:none; }
}

/* ---- 12-sign strip under the home-page calculator ---- */
.signs-strip{ margin:38px auto 10px; }
.signs-strip h2{ font-size:20px; margin:0 0 16px; }
.sign-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.sign-chip{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background: var(--card); border:1px solid var(--line); border-radius:12px;
  text-decoration:none; transition:border-color .15s ease, background .15s ease;
}
.sign-chip:hover{ border-color: var(--ion); background: var(--raised); }
.sc-glyph{ font-size:19px; color: var(--ion); line-height:1; }
.sc-name{ font-family: var(--font-body); font-size:15px; color: var(--ink-2); }
@media (max-width:600px){
  .sign-chips{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .sign-chip{ padding:10px 12px; }
  .sc-name{ font-size:14px; }
}
.signs-strip .strip-lead{ font-size:15px; color: var(--ink-dim); margin:0 0 16px; max-width:56ch; }
.signs-strip .strip-cta{ margin:18px 0 0; }
@media (max-width:600px){ .signs-strip .strip-cta .btn{ width:100%; } }

/* Narrow desktop (burger not yet active): six nav items — the longest being the
   Portuguese «Horóscopo hoje» + «Horóscopo 2027» pair — overflow the header by a
   few px at ~900–1050px. Tighten the row instead of shortening the labels. */
@media (min-width: 900px) and (max-width: 1099px){
  header.site nav.links{ gap:16px; font-size:12.5px; }
}
.h27-order{ font-size:14px; line-height:1.6; color: var(--ink-dim); margin:0 0 18px; max-width:60ch;
  padding-left:12px; border-left:2px solid var(--line-strong); }

/* ---- mobile header: make room, and make the menu button the obvious control ----
   Measured at 375px before this block: logo 246 + right side 122 + padding 40 = 418,
   i.e. 43px wider than the screen. The logo was the hog — its 0.3em letter-spacing
   alone cost ~60px. Tightening it frees enough room for a labelled menu button. */
@media (max-width: 680px){
  header.site .wrap{ padding-left:14px; padding-right:14px; gap:8px; }
  .logo-lockup{ gap:8px; }
  header.site .logo-lockup .word{ font-size:17px; letter-spacing:0.14em; }
  header.site .header-right{ gap:8px; }
  /* the language chip stops competing with the menu button: no border, no chevron */
  header.site .lang-btn{ border-color:transparent; padding:0 4px; gap:2px; }
  header.site .lang-btn svg{ display:none; }
  header.site .burger{ margin-right:0; }
}

/* ---- payment method icons pill (copied verbatim from ~/stopanxiety/build.py, owner 2026-08-05) ---- */
.paypill{display:flex;width:100%;max-width:290px;margin:13px auto 0;align-items:center;justify-content:space-evenly;gap:10px;padding:7px 16px;border-radius:999px;background:#fff;box-sizing:border-box}
.paypill .pl{display:inline-flex;align-items:center}
.paypill .pl svg{display:block;width:auto}
.paypill .pv svg{height:13px}
.paypill .pm svg{height:19px}
.paypill .pn svg{height:16px;color:#111}

/* ---------- markdown tables in articles (added 2026-08-05 together with table support
   in md_to_html; .table-wrap keeps a wide table scrollable instead of pushing the page) */
.table-wrap{ overflow-x:auto; margin:20px 0; -webkit-overflow-scrolling:touch; }
.table-wrap table{ border-collapse:collapse; width:100%; min-width:420px; font-size:15px; }
.table-wrap th{
  text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
  color: var(--ink-2); font-weight:600; white-space:nowrap;
}
.table-wrap td{ padding:10px 14px; border-bottom:1px solid var(--line); color: var(--ink-dim); line-height:1.6; vertical-align:top; }
.table-wrap tr:last-child td{ border-bottom:none; }
.table-wrap td:first-child{ color: var(--ink-2); font-weight:500; white-space:nowrap; }

/* consent tick in the inline buy box (EU withdrawal-right acknowledgement, 2026-08-05) */
.inline-consent{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 0; cursor:pointer; }
.inline-consent input{ margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color: var(--ion); }
.inline-consent span{ font-size:12.5px; line-height:1.55; color: var(--ink-dim); }
.inline-consent a{ color: var(--ion-link); text-decoration:underline; text-underline-offset:2px; }

/* Блоки доверия под формой расчёта (08.08.2026).
   Два факта, которые снимают возражения ещё до того, как человек упрётся в поле времени:
   бесплатный расчёт идёт в браузере, и точный час рождения не обязателен.
   Формулировка про приватность намеренно ограничена БЕСПЛАТНЫМ расчётом: при покупке
   PDF данные уходят на сервер, иначе документ не собрать. */
.cb-note{ margin:6px 0 0 32px; font-size:12px; line-height:1.4; color: var(--ink-label); opacity:.85; }
.trust-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px; max-width:720px; margin:28px auto 0; padding:0 4px;
}
.trust-item h3{ margin:0 0 4px; font-size:14px; line-height:1.3; color: var(--ink); }
.trust-item p{ margin:0; font-size:13px; line-height:1.5; color: var(--ink-dim); }
@media (max-width:600px){ .trust-row{ gap:14px; margin-top:22px; } }

/* ---- article footer: targeted offer + keep-reading -------------------------
   Added 2026-08-09: every article ended at the FAQ with no button anywhere, so a reader
   who finished a post had no next step. The CTA leads with the FREE tool; the paid PDF is
   the quiet line under it. .art-cta-<kind> lets one offer type be recoloured without
   touching the others. */
.art-cta{ text-align:center; margin-top:28px; border:1px solid var(--line-strong);
  background: linear-gradient(180deg, var(--raised), var(--panel)); }
.art-cta h2{ margin:0 0 8px; font-size:26px; }
.art-cta p{ margin:0 auto 18px; max-width:56ch; color: var(--ink-dim); }
.art-cta .btn{ display:inline-block; }
.art-cta-up{ margin:14px auto 0!important; font-size:13.5px; color: var(--ink-label)!important; }
/* deliberately NOT a link: every paid offer on this site lives inside the result screen,
   which is display:none until the visitor actually calculates something. A link promising
   "PDF" would land them on a page where that block does not exist yet. The button sends
   them to the tool; this line only sets the expectation and the price. */
.art-cta-up strong{ color: var(--brass); font-weight:600; }
/* one accent per offer type, so the four CTAs don't read as the same banner repeated */
.art-cta-chart{ border-color: var(--ion); }
.art-cta-compat{ border-color: var(--ember); }
.art-cta-h2027{ border-color: var(--brass); }
.art-cta-moon{ border-color: var(--aqua); }

.art-more{ margin-top:36px; }
.art-more h2{ font-size:20px; margin:0 0 4px; color: var(--ink-dim); font-weight:600;
  letter-spacing:.02em; }
.art-more .article-card h3{ margin:0; }
@media (max-width: 860px){
  .art-cta h2{ font-size:22px; }
  .art-more .blog-grid{ grid-template-columns: 1fr; }
}

/* ---- report preview inside the paywall -------------------------------------
   Added 2026-08-09. There are no reviews to show (nothing has been sold yet), so the
   product has to vouch for itself: four real pages plus an explicit free-vs-paid split.
   The strip scrolls horizontally rather than shrinking pages into unreadable stamps. */
.pv{ margin:22px 0 4px; text-align:left; }
.pv h3{ font-size:16px; margin:0 0 12px; color: var(--ink-dim); font-weight:600; letter-spacing:.02em; }
.pv-strip{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.pv-thumb{ flex:0 0 auto; width:150px; scroll-snap-align:start; border:1px solid var(--line);
  border-radius:8px; overflow:hidden; line-height:0; transition:border-color .15s, transform .15s; }
.pv-thumb:hover{ border-color: var(--brass); transform: translateY(-2px); }
.pv-thumb img{ width:100%; height:auto; display:block; }
.pv-note{ margin:10px 0 0; font-size:12px; color: var(--ink-label); }
.pv-table{ margin-top:18px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.pv-row{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.pv-row > span{ padding:10px 14px; font-size:13.5px; line-height:1.45; border-top:1px solid var(--line-row); }
.pv-row:first-child > span{ border-top:0; }
.pv-free{ color: var(--ink-muted); }
.pv-paid{ color: var(--ink-2); border-left:1px solid var(--line-row); }
.pv-head > span{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink-label); background: var(--panel); }
.pv-head .pv-paid{ color: var(--brass); }
@media (min-width: 720px){
  /* wide enough for all four pages side by side — a 636px strip left-aligned inside a
     1184px panel just looked like the block had failed to load the rest */
  .pv-strip{ display:grid; grid-template-columns:repeat(4, 1fr); overflow:visible; }
  .pv-thumb{ width:100%; }
}
@media (max-width: 640px){
  .pv-thumb{ width:124px; }
  .pv-row > span{ padding:9px 11px; font-size:12.5px; }
}

/* ---- email capture on the result screen ------------------------------------
   Added 2026-08-09. Until now the address was only asked for at checkout, so everyone who
   calculated a free chart and left was unreachable. Styled quieter than the paywall — it
   sits above it and must not compete with the actual offer. */
.lead{ margin:26px 0 0; padding:20px 22px; border:1px solid var(--line);
  border-radius: var(--radius-panel); background: var(--panel); text-align:left; }
.lead h3{ margin:0 0 6px; font-size:19px; }
.lead-sub{ margin:0 0 14px; font-size:14px; color: var(--ink-dim); max-width:56ch; }
.lead-row{ display:flex; gap:10px; flex-wrap:wrap; }
.lead-row input{ flex:1 1 240px; min-width:0; padding:13px 14px; border-radius: var(--radius-input);
  border:1px solid var(--line-soft); background: var(--card); color: var(--ink); font:inherit; font-size:15px; }
.lead-row input:focus{ outline:none; border-color: var(--ion); }
.lead-row input:disabled{ opacity:.6; }
.lead-send{ flex:0 0 auto; }
.lead-opt{ display:flex; gap:10px; align-items:flex-start; margin:12px 0 0; cursor:pointer; }
.lead-opt input{ margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color: var(--ion); }
.lead-opt span{ font-size:12.5px; line-height:1.5; color: var(--ink-label); }
/* honeypot: off-screen rather than display:none — some bots skip hidden fields */
.lead-company{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.lead-msg{ margin:12px 0 0; font-size:13.5px; }
.lead-msg.ok{ color: var(--aqua); }
.lead-msg.err{ color: var(--ember); }
@media (max-width: 560px){
  .lead{ padding:16px; }
  .lead-send{ width:100%; }
}

/* ---- dated 2027 events table (quality release 2026-08-13) ------------------ */
.t27{ margin:26px 0; }
.t27 h2{ font-size:22px; margin:0 0 12px; }
.t27-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.t27-table td{ padding:9px 12px; border-top:1px solid var(--line-row); line-height:1.5; }
.t27-table tr:first-child td{ border-top:0; }
.t27-date{ white-space:nowrap; color: var(--brass); font-weight:600; width:1%; }
.t27-note{ margin:10px 0 0; font-size:12.5px; color: var(--ink-label); }
.mapa-prose{ margin-top:34px; }
.byline{ margin:-6px 0 18px; font-size:13px; color: var(--ink-label); }
.byline a{ color: var(--ink-dim); text-decoration:underline; text-underline-offset:2px; }

/* /method/ reads as documentation, not as a landing: quieter, smaller, denser */
.method-page h1{ font-size:26px; }
.method-page h2{ font-size:15px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-dim); margin-top:26px; }
.method-page p{ font-size:13.5px; line-height:1.65; color: var(--ink-muted); max-width:68ch; }
.dh-pane-date{ margin:0 0 6px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color: var(--brass); }
.t27-why{ margin-top:4px; font-size:13px; line-height:1.55; color: var(--ink-muted); }

/* Просмотрщик страниц-превью отчёта (assets/js/preview-lightbox.js).
   Раньше миниатюра вела на голый .webp в новой вкладке — закрыть было нечем. */
.pvlb{ position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; gap:8px;
  background:rgba(12,10,18,.92); padding:56px 16px 48px; }
.pvlb.is-on{ display:flex; }
.pvlb-img{ max-width:min(560px, 92vw); max-height:82vh; width:auto; height:auto;
  display:block; border-radius:6px; box-shadow:0 18px 60px rgba(0,0,0,.55); }
.pvlb-x{ position:absolute; top:12px; right:12px; width:44px; height:44px;
  font-size:30px; line-height:1; color:#fff; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22); border-radius:50%; cursor:pointer; }
.pvlb-x:hover{ background:rgba(255,255,255,.20); }
.pvlb-nav{ flex:0 0 auto; width:44px; height:44px; font-size:26px; line-height:1;
  color:#fff; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.22);
  border-radius:50%; cursor:pointer; }
.pvlb-nav:hover{ background:rgba(255,255,255,.20); }
.pvlb-cap{ position:absolute; bottom:16px; left:0; right:0; text-align:center;
  font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.72); }
/* На телефоне стрелки увели бы место у самой страницы — листаем свайпом/крестиком. */
@media (max-width:640px){ .pvlb-nav{ display:none; } .pvlb{ padding:56px 10px 44px; } }

/* Узкая строка входов НАД героем (25.08.2026). До неё гороскоп дня и гороскоп 2027
   жили только в шапке, а на мобильном шапка схлопывается в бургер — для большинства
   пришедших их не существовало. Строка стоит перед h1, поэтому подчёркнуто негромкая:
   маленькие пилюли, тонкая рамка, приглушённый текст — заголовок остаётся главным.
   flex-wrap вместо media-query: на узком экране пилюли переносятся сами, без JS —
   resize-слушатели на этом сайте уже ломали скролл в Android WebView. */
.quick-links{
  display:flex; flex-wrap:wrap; gap:10px;
  /* 760px — ширина внутреннего .wrap героя. Общий .wrap на сайте 1320px, поэтому
     без этой строки на десктопе пилюли уезжали к левому краю окна (left:22px), тогда
     как бейдж и h1 стоят в центрированной колонке (left:260px). На телефоне обе
     ширины совпадают, и расхождение было видно только от 1000px и шире. */
  max-width:760px;
  margin:14px auto 0;
}
.quick-links .qpill{
  position:relative;
  padding:9px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel);
  color:var(--ink-2); text-decoration:none;
  font-size:13.5px; line-height:1.2; white-space:nowrap;
  transition:border-color .18s ease, color .18s ease;
}
/* Видимая пилюля остаётся ~34px, а палец получает 44px: зона касания растягивается
   псевдоэлементом, а не паддингом. Иначе строка становится громоздкой и перестаёт быть
   вспомогательной — а она стоит перед h1 и не должна с ним спорить. Расширение ±5px
   при gap:10px ровно смыкается с соседним рядом при переносе и не перекрывает его. */
.quick-links .qpill::after{ content:''; position:absolute; inset:-5px 0; }
.quick-links .qpill:hover{ border-color:var(--ion); color:var(--ink); }
/* Без этого клавиатурный пользователь не видел, где находится: у ссылок в этой строке
   не было ни одного правила :focus, а браузерное кольцо гасится глобальным сбросом. */
.quick-links .qpill:focus-visible{
  outline:2px solid var(--ion); outline-offset:2px; color:var(--ink);
}
@media (prefers-reduced-motion:reduce){ .quick-links .qpill{ transition:none; } }

/* Блок «сегодня в твоей карте» на странице гороскопа дня. Появляется только если в
   браузере лежит сохранённая карта: скрипт снимает hidden сам. Пока карты нет, секция
   остаётся hidden и не занимает места — пустой заголовок над пустотой хуже, чем ничего. */
.tr-block[hidden]{ display:none; }
.tr-block{ margin:26px auto 8px; }
.tr-title{ font-family:var(--font-display); font-size:22px; margin:0 0 6px; }
.tr-lead{ font-size:14px; color:var(--ink-dim); margin:0 0 16px; max-width:56ch; }
.tr-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.tr-item{
  padding:14px 16px; border-radius:14px;
  background:var(--card); border:1px solid var(--line);
}
.tr-head{ margin:0 0 4px; font-size:15px; font-weight:600; line-height:1.3; }
/* Орб — служебное число: показывает, насколько аспект точен, но не должен читаться
   наравне с названием. Отсюда меньший кегль и приглушённый цвет. */
.tr-orb{ font-size:12.5px; font-weight:400; color:var(--ink-label); white-space:nowrap; }
.tr-text{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-dim); }
.tr-note{ margin:12px 0 0; font-size:12.5px; color:var(--ink-label); max-width:60ch; }
/* Пояснения натальных точек под списком: справка, а не контент — мельче и приглушённее
   карточек, чтобы не спорить с самими транзитами. */
.tr-about{ list-style:none; margin:14px 0 0; padding:0; display:grid; gap:6px; }
.tr-about li{ font-size:13px; line-height:1.5; color:var(--ink-label); }
/* Карточка «ближайший аспект» в тихий день: пунктир вместо сплошной рамки — визуально
   отличает «ещё не наступило» от «идёт сейчас», чтобы человек не принял анонс за факт. */
.tr-item.tr-soon{ border-style:dashed; }