/* Фондация „Добро Има“. Layout pattern modelled on donation-first charity sites, in the Добро Има brand. */
:root {
  --purple: #8B52B0;
  --purple-deep: #6F3D95;
  --plum: #3B2450;
  --pink: #E67FAB;
  --pink-deep: #D75E92;
  --bg: #FBF8FD;
  --bg-2: #F4EEFA;
  --white: #fff;
  --line: #E6DCEF;
  --muted: #6E5F7D;
  --ok: #2E8B57;
  --calm: #1F7A72;
  --calm-deep: #17615B;
  --calm-bg: #E3F3F0;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(59, 36, 80, .10);
  --shadow-lg: 0 20px 50px rgba(59, 36, 80, .18);
  --head: "Comfortaa", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  --wrap: 1200px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); color: var(--plum); background: var(--bg); line-height: 1.55; font-size: 16px; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--purple-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 5.5vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 24px; font-weight: 800; font-size: 1rem; cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-donate { background: var(--pink-deep); color: #fff; box-shadow: 0 6px 18px rgba(215, 94, 146, .35); }
.btn-donate:hover { background: #c94d83; }
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-deep); }
.btn-ghost { background: transparent; color: var(--purple-deep); border: 2px solid var(--purple); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-light { background: #fff; color: var(--purple-deep); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: .9rem; }
.heart { width: 18px; height: 18px; flex: none; }

/* Top announcement bar */
.topbar { background: var(--plum); color: #fff; font-size: .88rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.topbar a { color: #fff; text-decoration: none; }
.topbar .urgent { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar .urgent b { background: var(--pink-deep); padding: 2px 10px; border-radius: 999px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; flex: none; }
.topbar .urgent span { overflow: hidden; text-overflow: ellipsis; }
.topbar .meta { display: none; gap: 20px; opacity: .9; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 16px; height: 68px; }
.logo img { height: 44px; width: auto; }
.logo { display: flex; align-items: center; flex: none; }
.nav { display: none; gap: 4px; margin-left: 12px; }
.nav > a, .nav > .has-mega > button { background: none; border: 0; padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--plum); font-weight: 700; cursor: pointer; }
.nav > a:hover, .nav > .has-mega > button:hover { background: var(--bg-2); }
.has-mega { position: relative; }
.mega { position: absolute; top: calc(100% + 8px); left: 0; width: 560px; background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; display: none; grid-template-columns: 1fr 1fr; gap: 6px; border: 1px solid var(--line); }
.has-mega.open .mega { display: grid; }
.mega a { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; text-decoration: none; color: var(--plum); }
.mega a:hover { background: var(--bg-2); }
.mega .ico { font-size: 1.4rem; line-height: 1; }
.mega strong { display: block; font-family: var(--head); font-size: .95rem; }
.mega small { color: var(--muted); font-size: .82rem; }
.mega .all { grid-column: 1 / -1; justify-content: center; font-weight: 800; color: var(--purple-deep); background: var(--bg-2); }
.hdr-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hdr-actions .btn-donate { padding: 11px 18px; }
.burger { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; }
.burger span, .burger span::before, .burger span::after { display: block; width: 20px; height: 2px; background: var(--plum); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* Mobile drawer menu */
.menu { position: fixed; inset: 0; z-index: 80; display: none; }
.menu.open { display: block; }
.menu-bg { position: absolute; inset: 0; background: rgba(59, 36, 80, .45); }
.menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 360px); background: #fff; padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.menu-top img { height: 40px; }
.menu-panel a { padding: 14px 12px; border-radius: 12px; text-decoration: none; color: var(--plum); font-weight: 700; }
.menu-panel a:hover { background: var(--bg-2); }
.menu-panel .sub { padding-left: 28px; font-weight: 600; color: var(--muted); }
.menu-panel .btn { margin-top: 12px; }
.x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--bg-2); font-size: 1.4rem; cursor: pointer; line-height: 1; }

/* Hero slider */
.hero { position: relative; background: var(--plum); color: #fff; overflow: hidden; }
.slides { position: relative; min-height: 460px; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; display: flex; align-items: flex-end; }
.slide.on { opacity: 1; z-index: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(59, 36, 80, .1) 0%, rgba(59, 36, 80, .55) 45%, rgba(59, 36, 80, .92) 100%); }
.slide .wrap { position: relative; z-index: 2; width: 100%; padding-top: 40px; padding-bottom: 48px; }
.slide .tag { display: inline-block; background: var(--pink-deep); color: #fff; padding: 5px 14px; border-radius: 999px; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.slide h1, .slide h2 { color: #fff; max-width: 680px; font-size: clamp(1.8rem, 5.5vw, 3.2rem); }
.slide p { max-width: 560px; font-size: 1.08rem; opacity: .95; }
.slide .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.dots { position: absolute; z-index: 3; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.dots button { width: 10px; height: 10px; padding: 0; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .2s; }
.dots button.on { width: 28px; background: #fff; }

/* Quick donate bar */
.quick { position: relative; z-index: 5; margin-top: -24px; }
.quick-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 18px; display: grid; gap: 14px; border: 1px solid var(--line); }
.quick-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quick-title h2 { font-size: 1.15rem; margin: 0; }
.quick-title small { color: var(--ok); font-weight: 800; font-size: .82rem; display: inline-flex; gap: 6px; align-items: center; }
.field label, .lbl { display: block; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.select, .input { width: 100%; height: 50px; border: 2px solid var(--line); border-radius: 12px; background: #fff; padding: 0 14px; font-weight: 700; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236F3D95' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.select:focus, .input:focus { border-color: var(--purple); outline: none; }
.toggle { display: grid; grid-template-columns: 1fr 1fr; background: var(--bg-2); border-radius: 12px; padding: 4px; height: 50px; }
.toggle button { border: 0; padding: 0 6px; white-space: nowrap; background: transparent; border-radius: 9px; font-weight: 800; cursor: pointer; color: var(--muted); }
.toggle button.on { background: #fff; color: var(--purple-deep); box-shadow: 0 2px 8px rgba(59, 36, 80, .12); }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.amounts button { height: 50px; border-radius: 12px; border: 2px solid var(--line); background: #fff; font-weight: 800; cursor: pointer; font-size: 1rem; }
.amounts button.on { border-color: var(--purple); background: var(--purple); color: #fff; }
.custom { position: relative; }
.custom .input { padding-left: 38px; }
.custom span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--muted); }
.quick .btn-donate { height: 52px; }
.note { font-size: .85rem; color: var(--muted); margin: 0; }
.note-warn { background: #FFF6E5; color: #7A5200; border-radius: 10px; padding: 8px 12px; font-size: .85rem; margin: 0; }

/* Trust strip */
.trust { padding: 28px 0 8px; }
.trust-grid { display: grid; gap: 12px; }
.trust-item { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.trust-item .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-2); display: grid; place-items: center; font-size: 1.3rem; flex: none; }
.trust-item strong { display: block; font-family: var(--head); font-size: .95rem; }
.trust-item span { font-size: .88rem; color: var(--muted); }

/* Sections */
.sec { padding: 56px 0; }
.sec-alt { background: var(--bg-2); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.sec-head p { color: var(--muted); margin: 0; max-width: 560px; }
.eyebrow { display: inline-block; color: var(--pink-deep); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; margin-bottom: 8px; }
.arrows { display: none; gap: 8px; }
.arrows button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--line); background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--purple-deep); }
.arrows button:hover { border-color: var(--purple); }

/* Appeal cards */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 18px; margin: 0 -16px; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.card { scroll-snap-align: start; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; border: 1px solid var(--line); }
.card-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-img img { transform: scale(1.04); }
.badge { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--purple-deep); font-size: .75rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.badge.urgent { background: var(--pink-deep); color: #fff; }
.card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-body h3 { margin: 0; }
.card-body h3 a { color: var(--plum); text-decoration: none; }
.card-body h3 a:hover { color: var(--purple-deep); }
.card-body p { color: var(--muted); font-size: .93rem; margin: 0; }
.card-foot { margin-top: auto; display: grid; gap: 10px; }
.card-amounts { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: 6px; }
.card-amounts button { height: 42px; border-radius: 10px; border: 2px solid var(--line); background: #fff; font-weight: 800; cursor: pointer; }
.card-amounts button.on { border-color: var(--purple); color: var(--purple-deep); background: var(--bg-2); }
.card-amounts .btn { height: 42px; padding: 0 10px; border-radius: 10px; }
.prog { display: grid; gap: 6px; }
.bar { height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); border-radius: 999px; min-width: 6px; }
.prog-row { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
.prog-row b { color: var(--plum); }
.new-tag { font-size: .85rem; color: var(--purple-deep); font-weight: 800; background: var(--bg-2); padding: 6px 12px; border-radius: 999px; justify-self: start; }

/* Направления tabs */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; padding-bottom: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 800; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.tabs button.on { background: var(--plum); border-color: var(--plum); color: #fff; }
.panel { display: grid; gap: 20px; background: #fff; border-radius: var(--radius-lg); padding: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.panel .quote { font-family: var(--head); font-size: 1.1rem; color: var(--pink-deep); margin: 0; }
.panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.panel li { display: flex; gap: 10px; align-items: flex-start; }
.panel li::before { content: ""; width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: 50%; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%238B52B0' stroke-width='2' fill='none'/%3E%3C/svg%3E") center no-repeat; }
.panel .side { display: grid; gap: 14px; align-content: start; }
.mini { display: flex; gap: 12px; align-items: center; background: var(--bg); border-radius: var(--radius); padding: 10px; text-decoration: none; color: var(--plum); border: 1px solid var(--line); }
.mini img { width: 72px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.mini strong { font-family: var(--head); font-size: .92rem; display: block; }
.mini small { color: var(--muted); }

/* Transparency */
.fee-grid { display: grid; gap: 24px; align-items: center; }
.donut { width: 220px; height: 220px; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--purple) 0 93%, var(--pink) 93% 100%); display: grid; place-items: center; position: relative; }
.donut::after { content: ""; position: absolute; inset: 26px; background: var(--bg-2); border-radius: 50%; }
.donut div { position: relative; z-index: 1; text-align: center; font-family: var(--head); }
.donut b { display: block; font-size: 2.6rem; color: var(--purple-deep); }
.donut span { font-size: .9rem; color: var(--muted); }
.legend { display: grid; gap: 10px; margin: 18px 0; }
.legend div { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.fee-quote { background: #fff; border-left: 4px solid var(--pink); padding: 14px 16px; border-radius: 0 12px 12px 0; font-size: .95rem; }
.calc { background: #fff; border-radius: var(--radius); padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; border: 1px solid var(--line); margin-top: 14px; }
.calc input { width: 110px; height: 42px; border: 2px solid var(--line); border-radius: 10px; padding: 0 10px; font-weight: 800; }

/* Tagline banner */
.banner { position: relative; color: #fff; text-align: center; overflow: hidden; background: linear-gradient(135deg, var(--purple-deep), var(--purple) 50%, var(--pink-deep)); }
.banner .wrap { position: relative; padding-top: 64px; padding-bottom: 64px; }
.banner img.mark { width: 84px; margin: 0 auto 18px; background: #fff; border-radius: 50%; padding: 10px; }
.banner h2 { color: #fff; font-size: clamp(1.7rem, 5vw, 2.8rem); max-width: 760px; margin: 0 auto 12px; }
.banner p { max-width: 580px; margin: 0 auto 24px; opacity: .95; }

/* Ways to help */
.ways { display: grid; gap: 16px; }
.way { background: #fff; border-radius: var(--radius-lg); padding: 22px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.way .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: var(--bg-2); }
.way p { color: var(--muted); margin: 0; }
.way a { margin-top: auto; font-weight: 800; text-decoration: none; }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 860px; margin: 0 auto; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 48px 16px 18px; font-weight: 800; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--purple); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 18px 16px; margin: 0; color: var(--muted); }

/* Newsletter */
.news { background: var(--plum); color: #fff; border-radius: var(--radius-lg); padding: 28px 22px; display: grid; gap: 18px; }
.news h2 { color: #fff; font-size: 1.5rem; }
.news p { opacity: .85; margin: 0; }
.news form { display: grid; gap: 10px; }
.news .input { border-color: transparent; }

/* Footer */
.ftr { background: var(--plum); color: rgba(255, 255, 255, .85); padding: 48px 0 110px; margin-top: 56px; }
.ftr-grid { display: grid; gap: 28px; }
.ftr-brand img { height: 64px; width: auto; background: #fff; border-radius: 14px; padding: 8px 12px; margin-bottom: 14px; }
.ftr h4 { color: #fff; font-size: 1rem; margin-bottom: 12px; }
.ftr-links { display: grid; gap: 8px; }
.ftr a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.pay { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pay span { background: #fff; color: var(--plum); font-weight: 800; font-size: .75rem; border-radius: 6px; padding: 5px 9px; }
.ftr-legal { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 32px; padding-top: 20px; display: grid; gap: 4px; font-size: .85rem; }
.ftr-legal strong { color: #fff; }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: .85rem; opacity: .8; }
.todo { background: #FFE9A8; color: #6B4D00; padding: 0 6px; border-radius: 4px; }

/* Sticky mobile donate bar */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(59, 36, 80, .12); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; transform: translateY(110%); transition: transform .25s; }
.sticky.show { transform: none; }
.sticky .info { flex: 1; min-width: 0; }
.sticky .info small { display: block; color: var(--muted); font-size: .75rem; }
.sticky .info strong { display: block; font-family: var(--head); font-size: .92rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Checkout drawer */
.drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.drawer.open { display: block; }
.drawer-bg { position: absolute; inset: 0; background: rgba(59, 36, 80, .5); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100vw, 460px); background: var(--bg); display: flex; flex-direction: column; animation: slidein .25s ease-out; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: #fff; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1.2rem; margin: 0; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; display: grid; gap: 16px; align-content: start; }
.drawer-foot { padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.sum-item { display: flex; gap: 12px; background: #fff; border-radius: var(--radius); padding: 12px; border: 1px solid var(--line); align-items: center; }
.sum-item img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; }
.sum-item strong { font-family: var(--head); font-size: .95rem; display: block; }
.sum-item small { color: var(--muted); }
.breakdown { background: #fff; border-radius: var(--radius); padding: 14px; border: 1px solid var(--line); display: grid; gap: 8px; font-size: .93rem; }
.breakdown div { display: flex; justify-content: space-between; gap: 10px; }
.breakdown .total { border-top: 1px dashed var(--line); padding-top: 8px; font-weight: 800; font-size: 1.05rem; }
.form { display: grid; gap: 12px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--purple); margin-top: 2px; flex: none; }
.done { text-align: center; padding: 30px 10px; }
.done .big { font-size: 3rem; }

/* Campaign page */
.c-hero { background: var(--plum); color: #fff; padding: 22px 0 26px; }
.crumbs { font-size: .85rem; opacity: .8; margin-bottom: 10px; }
.crumbs a { color: #fff; }
.c-hero h1 { color: #fff; font-size: clamp(1.6rem, 5vw, 2.6rem); }
.c-hero p { opacity: .9; margin: 0; }
.c-grid { display: grid; gap: 24px; padding-top: 24px; }
.gallery { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #000; aspect-ratio: 16 / 10; }
.gallery .track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery .track::-webkit-scrollbar { display: none; }
.gallery img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.gallery .count { position: absolute; right: 12px; bottom: 12px; background: rgba(0, 0, 0, .6); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 700; }
.gallery .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .9); cursor: pointer; font-size: 1.1rem; color: var(--plum); }
.gallery .prev { left: 10px; }
.gallery .next { right: 10px; }
.story { background: #fff; border-radius: var(--radius-lg); padding: 22px; border: 1px solid var(--line); }
.story .strong { font-family: var(--head); font-size: 1.15rem; color: var(--purple-deep); }
.story blockquote { margin: 18px 0; padding: 16px 18px; background: var(--bg-2); border-radius: var(--radius); font-family: var(--head); font-size: 1.2rem; color: var(--pink-deep); }
.story blockquote cite { display: block; font-size: .9rem; color: var(--muted); font-style: normal; margin-top: 6px; }
.info-box { background: var(--bg-2); border-radius: var(--radius); padding: 14px 16px; margin-top: 14px; font-size: .95rem; }
.info-box h3 { font-size: 1rem; }
.donate-box { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 20px; display: grid; gap: 14px; border: 1px solid var(--line); align-self: start; }
.donate-box .big-prog b { font-family: var(--head); font-size: 1.6rem; color: var(--purple-deep); }
.meta-list { display: grid; gap: 6px; font-size: .9rem; color: var(--muted); }
.meta-list b { color: var(--plum); }

/* Tablet and desktop */
@media (min-width: 700px) {
  .topbar .meta { display: flex; }
  .quick-card { padding: 22px; }
  .trust-grid { grid-template-columns: repeat(3, 1fr); }
  .rail { grid-auto-columns: calc((100% - 32px) / 2.2); }
  .ways { grid-template-columns: repeat(3, 1fr); }
  .news { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 36px; }
  .news form { grid-template-columns: 1fr auto; }
  .ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .slides { min-height: 520px; }
}
@media (min-width: 1000px) {
  .nav { display: flex; }
  .burger { display: none; }
  .slides { min-height: 580px; }
  .slide .wrap { padding-bottom: 110px; }
  .quick { margin-top: -64px; }
  .quick-card { grid-template-columns: 1.2fr 1.05fr 1.7fr .85fr auto; align-items: end; gap: 14px; padding: 24px 26px; }
  .quick-title { grid-column: 1 / -1; }
  .quick .note, .quick .note-warn { grid-column: 1 / -1; }
  .quick .btn-donate { padding: 0 28px; }
  .arrows { display: flex; }
  .rail { grid-auto-columns: calc((100% - 32px) / 3); margin: 0 -8px; padding: 4px 8px 32px; scroll-padding: 0 8px; }
  .panel { grid-template-columns: 1.4fr 1fr; padding: 32px; }
  .fee-grid { grid-template-columns: 1fr 1.4fr; gap: 48px; }
  .donut { width: 280px; height: 280px; }
  .sticky { display: none; }
  .ftr { padding-bottom: 32px; }
  .c-grid { grid-template-columns: 1.6fr 1fr; }
  .donate-box { position: sticky; top: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Basket */
.basket { position: relative; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--plum); }
.basket .count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--pink-deep); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.basket .count[hidden] { display: none; }
.basket-item { align-items: center; }
.bi-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.bi-amt { position: relative; max-width: 150px; }
.bi-amt span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-weight: 800; color: var(--muted); }
.bi-amt .input { height: 42px; padding-left: 30px; }
.rm { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--bg-2); cursor: pointer; font-size: 1.2rem; flex: none; }
.add-item { width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.add-item div { flex: 1; }
.plus { width: 32px; height: 32px; border-radius: 50%; background: var(--purple); color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
.more { background: #fff; border: 1px dashed var(--purple); border-radius: var(--radius); }
.more summary { padding: 12px 14px; cursor: pointer; font-weight: 800; color: var(--purple-deep); list-style: none; }
.more summary::-webkit-details-marker { display: none; }
.more-item { display: flex; justify-content: space-between; width: 100%; border: 0; border-top: 1px solid var(--line); background: none; padding: 12px 14px; cursor: pointer; font-weight: 700; text-align: left; }
.more-item b { color: var(--purple-deep); }

/* How it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.step { background: #fff; border-radius: var(--radius-lg); padding: 20px; border: 1px solid var(--line); position: relative; }
.step .num { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; font-family: var(--head); font-weight: 700; display: grid; place-items: center; margin-bottom: 12px; }
.step p { color: var(--muted); margin: 0; font-size: .95rem; }

/* Who we are */
.who { display: grid; gap: 16px; }
.board { display: grid; gap: 10px; }
.person { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--bg-2); color: var(--purple-deep); font-family: var(--head); font-weight: 700; display: grid; place-items: center; flex: none; }
.person strong { display: block; font-family: var(--head); }
.person small { color: var(--muted); }
.legal-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 6px 18px; }
.legal-card div { padding: 12px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.legal-card div:last-child { border-bottom: 0; }
.legal-card dt { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.legal-card dd { margin: 0; font-weight: 700; }
.promise { margin-top: 16px; background: var(--plum); color: #fff; border-radius: var(--radius-lg); padding: 22px; }
.promise h3 { color: #fff; }
.promise ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.promise li { display: flex; gap: 10px; }
.promise li::before { content: "💜"; flex: none; }
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .promise ul { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
  .who { grid-template-columns: 1fr 1.2fr; }
}
@media (max-width: 420px) {
  .hdr .wrap { gap: 8px; }
  .logo img { height: 36px; }
  .hdr-actions { gap: 6px; }
  .hdr-actions .btn-donate { padding: 10px 14px; }
  .basket, .burger { width: 40px; height: 40px; }
}
.card-amounts .btn-donate { background: var(--pink-deep); color: #fff; border: 0; }
.card-amounts .btn-donate:hover { background: #c94d83; }

/* Desktop gallery thumbnails */
.thumbs { display: none; }
@media (min-width: 1000px) {
  .thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; }
  .thumbs button { padding: 0; border: 3px solid transparent; border-radius: 12px; overflow: hidden; cursor: pointer; background: none; aspect-ratio: 4 / 3; }
  .thumbs button.on { border-color: var(--purple); }
  .thumbs img { width: 100%; height: 100%; object-fit: cover; }
  .hero .slide h1, .hero .slide h2 { font-size: 3.4rem; }
  .sec { padding: 80px 0; }
  .trust { padding-top: 36px; }
  .c-hero { padding: 32px 0 36px; }
  .story { padding: 32px; }
  .ftr-grid { gap: 40px; }
}
@media (min-width: 1500px) {
  :root { --wrap: 1320px; }
  .slides { min-height: 640px; }
}

/* ===== Added 3 October 2026. Free resources, inner pages, legal texts, cookie bar, print. ===== */

/* Fixes and small shared bits */
.ftr-links { align-content: start; }
.sec-alt .donut::after { background: #fff; }
.sec-tight { padding: 32px 0; }
.eyebrow.light { color: var(--pink); }
.narrow { max-width: 780px; margin-left: auto; margin-right: auto; }
.h3 { font-size: 1.25rem; margin-top: 28px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.show-m { margin-top: 18px; }
.hide-m { display: none; }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks li::before { content: ""; width: 20px; height: 20px; flex: none; margin-top: 2px; border-radius: 50%; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' stroke='%238B52B0' stroke-width='2' fill='none'/%3E%3C/svg%3E") center no-repeat; }
.todo-list li::before { content: "📝"; background: none; width: auto; height: auto; margin: 0; }
.print-only, .print-head { display: none; }

/* Header. The resources menu, active section, narrow desktops */
.nav > .has-mega.on > button, .nav > a.on { color: var(--purple-deep); background: var(--bg-2); }
.mega-res { width: 620px; left: -60px; }
.mega small { display: block; line-height: 1.35; margin-top: 2px; }
.topbar .meta a:first-child { font-weight: 800; }
@media (min-width: 1000px) and (max-width: 1239px) {
  .nav { margin-left: 4px; gap: 0; }
  .nav > a, .nav > .has-mega > button { padding: 10px 10px; }
  .nav .nav-wide { display: none; }
}

/* Mobile menu groups */
.menu-group { border-radius: 12px; }
.menu-group summary { list-style: none; cursor: pointer; padding: 14px 12px; border-radius: 12px; font-weight: 700; display: flex; justify-content: space-between; }
.menu-group summary::-webkit-details-marker { display: none; }
.menu-group summary::after { content: "▾"; color: var(--purple); transition: transform .2s; }
.menu-group[open] summary::after { transform: rotate(180deg); }
.menu-group summary:hover { background: var(--bg-2); }
.menu-group .sub { display: block; }
.menu-panel .menu-mail { font-weight: 600; color: var(--muted); }

/* Inner page hero */
.page-hero p, .res-hero .res-lead { max-width: 720px; }
.page-hero .eyebrow, .res-hero .eyebrow { margin-bottom: 4px; }

/* Situation buttons */
.sit-title { font-family: var(--head); font-size: 1.2rem; margin: 0 0 12px; }
.sit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sit { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 14px; background: #fff; border: 2px solid var(--line); border-radius: var(--radius); color: var(--plum); font-weight: 800; text-decoration: none; cursor: pointer; text-align: left; font-size: .95rem; line-height: 1.25; }
.sit span { font-size: 1.35rem; flex: none; }
.sit:hover { border-color: var(--purple); background: var(--bg); }
.sit-sos { border-color: #F2B8CF; background: #FFF5F9; color: var(--pink-deep); }
.sit-sos-box { margin-top: 12px; }
.sos { background: #fff; border: 2px solid var(--pink); border-radius: var(--radius-lg); padding: 16px 18px; display: grid; gap: 8px; }
.sos p { margin: 0; }
.sos a { color: var(--pink-deep); font-weight: 800; text-decoration: none; white-space: nowrap; }

/* Three rules */
.rules { display: grid; gap: 12px; }
.rule { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; }
.rule .num { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; font-family: var(--head); font-weight: 700; display: grid; place-items: center; margin-bottom: 10px; }
.rule p { color: var(--muted); margin: 0; font-size: .95rem; }

/* Resource filters */
.res-groups { margin-bottom: 12px; }
.res-groups a { flex: none; border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 10px 16px; font-weight: 800; display: inline-flex; gap: 8px; align-items: center; color: var(--plum); text-decoration: none; white-space: nowrap; }
.res-groups a.on { background: var(--plum); border-color: var(--plum); color: #fff; }
.fmt-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.fmt-filter .lbl { margin: 0 4px 0 0; }
.fmt-filter button { min-height: 40px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; cursor: pointer; color: var(--muted); }
.fmt-filter button.on { border-color: var(--purple); color: var(--purple-deep); background: var(--bg-2); }

/* Resource cards */
.res-group { margin-top: 28px; }
.res-group-head h2 { font-size: 1.35rem; margin-bottom: 4px; }
.res-group-head p { color: var(--muted); margin: 0 0 14px; }
.res-grid-cards { display: grid; gap: 14px; }
.res-card { display: flex; gap: 0; flex-direction: row; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: var(--plum); text-decoration: none; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
a.res-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.res-card[hidden] { display: none; }
.res-tile { flex: 0 0 92px; display: grid; place-items: center; font-size: 2.3rem; }
.tile-malki-detsa { background: linear-gradient(135deg, #F7E3F0, #EADCF7); }
.tile-uchenitsi { background: linear-gradient(135deg, #E6DDF8, #F3E6F7); }
.tile-vseki-roditel { background: linear-gradient(135deg, #FBE4EE, #F4EEFA); }
.tile-detsa { background: linear-gradient(135deg, #FDE8D9, #FBE4EE); }
.tile-uchiteli { background: linear-gradient(135deg, #E3EEF9, #EADCF7); }
.tile-treniori { background: linear-gradient(135deg, #DDF2E6, #E6DDF8); }
.tile-vazrastni { background: linear-gradient(135deg, #EFE3F7, #FBE4EE); }
.tile-izsledvaniya { background: linear-gradient(135deg, #E9E6F5, #DCEAF5); }
.res-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.res-body h3 { margin: 0; font-size: 1.05rem; }
.res-body p { margin: 0; color: var(--muted); font-size: .9rem; }
.fmts { display: flex; flex-wrap: wrap; gap: 6px; }
.fmt { font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--purple-deep); }
.fmt-tool { background: #FDE6F0; color: #B13F73; }
.fmt-print { background: #E4F2EA; color: #24704A; }
.res-foot { margin-top: auto; padding-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.res-foot .go { font-weight: 800; color: var(--purple-deep); }
.res-foot small { color: var(--muted); }
.res-foot .soon { font-size: .8rem; font-weight: 800; color: var(--muted); background: var(--bg); border: 1px dashed var(--line); padding: 3px 10px; border-radius: 999px; }
.res-card.is-soon { box-shadow: none; opacity: .8; }
.res-card.is-soon .res-tile { filter: grayscale(.5); }
.res-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 16px 8px; margin: 0 -16px; scrollbar-width: none; }
.res-rail::-webkit-scrollbar { display: none; }
.res-rail .res-card { scroll-snap-align: start; flex-direction: column; }
.res-rail .res-tile { flex: 0 0 110px; }
.res-bottom { display: grid; gap: 16px; }
.res-bottom > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.res-bottom h2 { font-size: 1.3rem; }
.res-bottom p { color: var(--muted); }
.res-bottom .give { background: linear-gradient(135deg, var(--purple-deep), var(--purple) 55%, var(--pink-deep)); color: #fff; border: 0; }
.res-bottom .give h2, .res-bottom .give p { color: #fff; }

/* Resource page */
.res-head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.res-icon { width: 64px; height: 64px; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: 2rem; }
.res-hero h1 { margin: 0; }
.res-lead { opacity: .92; margin: 6px 0 12px; font-size: 1.04rem; }
.res-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.res-meta .fmt { background: rgba(255, 255, 255, .16); color: #fff; }
.res-meta .mins { font-size: .85rem; opacity: .9; }
.res-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; margin-top: 8px; }
.res-layout { display: grid; gap: 22px; padding-top: 22px; padding-bottom: 32px; }
.article { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; min-width: 0; }
.article > h2, .article section > h2 { font-size: 1.35rem; margin-top: 28px; }
.article > h2:first-child { margin-top: 0; }
.article p { font-size: 1rem; }
.art-steps { list-style: none; counter-reset: st; padding: 0; margin: 0 0 1em; display: grid; gap: 10px; }
.art-steps li { counter-increment: st; position: relative; padding: 14px 14px 14px 56px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); }
.art-steps li::before { content: counter(st); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--purple), var(--pink)); color: #fff; font-family: var(--head); font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.art-steps strong { display: block; font-family: var(--head); margin-bottom: 4px; }
.art-steps p { margin: 0; color: var(--plum); font-size: .96rem; }
.say-grid, .type-grid { display: grid; gap: 10px; margin-bottom: 1em; }
.say { background: var(--bg-2); border-radius: var(--radius); padding: 14px 16px; }
.say strong { display: block; color: var(--purple-deep); margin-bottom: 4px; }
.say p { margin: 0; font-size: .96rem; }
.type-card { border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; }
.type-card h3 { margin-bottom: 6px; }
.type-card p { margin: 0; font-size: .95rem; }
.box { border-radius: var(--radius); padding: 16px 18px; margin: 18px 0; }
.box h3 { font-size: 1.02rem; margin-bottom: 8px; }
.box p:last-child, .box ul:last-child { margin-bottom: 0; }
.box ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.box-info { background: var(--bg-2); }
.box-science { background: #EEF3FB; border-left: 4px solid #7B93C9; }
.box-warn { background: #FFF5F9; border-left: 4px solid var(--pink-deep); }
.art-faq { max-width: none; margin-bottom: 1em; }
.art-faq details { background: var(--bg); }
.sources { margin-top: 28px; border-top: 1px solid var(--line); padding-top: 14px; }
.sources summary { cursor: pointer; font-weight: 800; color: var(--purple-deep); }
.sources ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: .88rem; color: var(--muted); }
.sources b { color: var(--plum); }
.res-note { margin-top: 18px; font-size: .88rem; color: var(--muted); }
.res-note p { margin: 0 0 6px; }
.res-side { display: grid; gap: 14px; align-content: start; }
.side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; display: grid; gap: 10px; }
.side-card h3, .side-card p { margin: 0; }
.give-card { background: var(--plum); color: #fff; border: 0; }
.soon-box { text-align: center; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 36px 20px; }
.soon-box > span { font-size: 2.6rem; }
.related .res-grid-cards { margin-top: 4px; }
.res-promo .btn { margin-top: 4px; }
.res-promo-row { display: flex; gap: 12px; align-items: center; background: var(--bg-2); border-radius: var(--radius); padding: 14px 16px; margin-top: 20px; }
.res-promo-row span { font-size: 1.6rem; }
.res-promo-row p { margin: 0; }
.mini-res { background: var(--bg-2); }
.mini-ic { width: 72px; height: 56px; border-radius: 10px; display: grid; place-items: center; background: #fff; font-size: 1.6rem; flex: none; }

/* Tool, age guide */
.tool-q { font-family: var(--head); font-size: 1.15rem; margin-bottom: 10px; }
.age-tabs button { padding: 10px 16px; }
.age-cols { display: grid; gap: 12px; }
.age-col { border-radius: var(--radius); padding: 16px; }
.age-col h3 { font-size: 1.02rem; margin-bottom: 10px; }
.age-col ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .96rem; }
.age-col.ok { background: #EEF7F1; }
.age-col.flag { background: #FFF2F6; }
.age-col.grow { background: var(--bg-2); }
.age-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.age-links span { font-weight: 800; color: var(--muted); font-size: .85rem; }
.age-links a { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--purple-deep); font-weight: 700; text-decoration: none; font-size: .9rem; }
.age-note { font-weight: 700; margin-top: 16px; }
.tool-cta { background: var(--plum); color: #fff; border-radius: var(--radius-lg); padding: 18px; margin: 18px 0; display: grid; gap: 12px; }
.tool-cta p { margin: 0; }
.tool-cta .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
.tool-cta .btn-ghost:hover { background: rgba(255, 255, 255, .1); }

/* Tool, specialist check */
.danger-q { background: #FFF5F9; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; }
.danger-q p { margin: 0 0 8px; }
.danger-toggle { max-width: 220px; }
.danger-q .sos { margin-top: 12px; }
.check-group { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.check-group legend { font-family: var(--head); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; padding: 0; }
.check-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; background: #fff; }
.check-card input { width: 22px; height: 22px; accent-color: var(--purple); flex: none; margin-top: 1px; }
.check-card:has(input:checked) { border-color: var(--purple); background: var(--bg-2); }
.check-result { display: grid; gap: 12px; }
.check-result .hint { margin: 0; color: var(--muted); font-weight: 700; }
.res-box { border-radius: var(--radius-lg); padding: 18px; }
.res-box h3 { margin-bottom: 6px; }
.res-box.ok { background: #EEF7F1; }
.res-box.early { background: #FFF8E8; }
.res-box.serious { background: #FFF2F6; border: 2px solid #F2B8CF; }
.res-box.parent { background: var(--bg-2); }

/* Tool, detective game */
.det-card { background: linear-gradient(160deg, #fff, var(--bg-2)); border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin: 18px 0; }
.det-prog { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--pink-deep); margin-bottom: 10px; }
.det-scene { display: flex; gap: 14px; align-items: center; }
.det-icon { font-size: 2.6rem; flex: none; }
.det-scene p { font-family: var(--head); font-size: 1.15rem; margin: 0; }
.det-q { font-weight: 800; margin: 16px 0 8px; }
.det-answers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.det-answers .btn { border: 2px solid var(--line); padding: 12px 6px; white-space: normal; }
.det-feedback { background: #fff; border-radius: var(--radius); padding: 12px 14px; margin: 14px 0 0; font-weight: 700; color: var(--purple-deep); }
.det-ideas, .det-actions { margin: 0 0 10px; padding-left: 0; list-style: none; display: grid; gap: 6px; }
.det-actions li::before { content: "✓ "; color: var(--purple); font-weight: 800; }
.det-done { text-align: center; }
.det-done .big { font-size: 3rem; }

/* Tool, myths */
.myth-actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.myth-grid { display: grid; gap: 12px; }
.myth { display: block; width: 100%; text-align: left; border: 2px solid var(--line); border-radius: var(--radius-lg); background: #fff; padding: 18px; cursor: pointer; color: var(--plum); min-height: 120px; transition: border-color .2s, background .2s; }
.myth small { display: block; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.myth-front small { color: var(--pink-deep); }
.myth-front strong { display: block; font-family: var(--head); font-size: 1.15rem; line-height: 1.3; }
.myth em { display: block; font-style: normal; font-size: .82rem; color: var(--muted); margin-top: 10px; }
.myth-back { display: none; }
.myth[aria-pressed="true"] { border-color: var(--purple); background: var(--bg-2); }
.myth[aria-pressed="true"] .myth-front { display: none; }
.myth[aria-pressed="true"] .myth-back { display: block; }
.myth-back small { color: var(--ok); }

/* Tool, study library */
.lib-controls { display: grid; gap: 10px; margin: 18px 0 6px; }
.lib-topics button { padding: 8px 14px; font-size: .9rem; }
.lib-topic { margin-top: 26px; }
.lib-topic > h2 { font-size: 1.3rem; margin-bottom: 4px; }
.lib-topic > p { color: var(--muted); }
.study { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 10px; background: #fff; scroll-margin-top: 90px; }
.study.hl { border: 2px solid var(--pink); box-shadow: 0 0 0 4px #FDE6F0; }
.study-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.study-n { width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--bg-2); color: var(--purple-deep); font-family: var(--head); font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.study h3 { margin: 0 0 2px; font-size: 1.02rem; }
.study-cite { margin: 0; font-size: .84rem; color: var(--muted); }
.study p { font-size: .95rem; margin-bottom: 8px; }
.study-line b { color: var(--purple-deep); margin-right: 4px; }
.study-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.study-tags span { font-size: .75rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--bg-2); color: var(--muted); }
.study-tags .tag-bg { background: #E4F2EA; color: #24704A; }
.study-tags .tag-verify { background: #FFF6E5; color: #7A5200; }
.study-tags a { font-size: .85rem; font-weight: 800; }

/* Tool, tracker and anger plan */
.tracker, .plan { background: var(--bg); border: 2px dashed var(--line); border-radius: var(--radius-lg); padding: 18px; margin: 22px 0; }
.tracker h2, .plan h2 { font-size: 1.25rem; margin-top: 0; }
.tracker table { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.tracker th { font-size: .78rem; color: var(--muted); font-weight: 800; }
.tracker td { text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; height: 40px; }
.tracker td input { width: 22px; height: 22px; accent-color: var(--purple); margin: 0; }
.tracker-notes p { font-weight: 800; margin: 14px 0 6px; }
.tracker-notes .lines i { display: block; height: 30px; border-bottom: 1px solid var(--line); }
.tracker .btn { margin-top: 12px; }
.plan .field { margin-bottom: 12px; }
.plan-pair { display: grid; gap: 0 12px; }
.input.area { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.45; font-weight: 600; }

/* Help, contact, legal, review */
.page-form { margin: 8px 0 18px; }
.err { color: #B3261E; font-weight: 700; margin: 0; }
.sent { background: #FDE6F0; border-radius: var(--radius); padding: 16px; font-weight: 700; margin: 8px 0 18px; }
.sent small { display: block; font-weight: 600; color: var(--muted); margin-top: 6px; }
.note-box { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-top: 16px; }
.note-box > span { font-size: 1.4rem; }
.note-box strong { display: block; }
.note-box span span { color: var(--muted); font-size: .92rem; }
.contact-grid { display: grid; gap: 10px; margin-top: 16px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 2px; }
.contact-card small { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.help-steps { margin-top: 10px; }
.legal { line-height: 1.7; }
.legal h2 { font-size: 1.2rem; margin: 28px 0 8px; }
.legal h3 { font-family: var(--body); font-size: 1rem; font-weight: 800; margin: 18px 0 4px; }
.legal ul { padding-left: 20px; }
.legal-note { background: #FDE6F0; border-radius: var(--radius); padding: 14px 16px; font-weight: 700; }
.legal-date { font-size: .88rem; color: var(--muted); }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.review-block { margin-bottom: 8px; }

/* Footer additions */
.ftr-law { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: .88rem; }
.ftr-law button { background: none; border: 0; padding: 0; color: rgba(255, 255, 255, .85); cursor: pointer; text-decoration: underline; font-size: inherit; }
.ftr-bottom a { color: #FFE9A8; }

/* Cookie bar */
.cookie { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 85; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 16px; display: grid; gap: 12px; }
.cookie[hidden] { display: none; }
.cookie p { font-size: .9rem; margin: 0; }
.cookie-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cookie .btn { white-space: normal; padding: 10px; }
body.has-cookie .sticky { display: none; }

@media (min-width: 700px) {
  .sit-grid { grid-template-columns: repeat(3, 1fr); }
  .rules { grid-template-columns: repeat(3, 1fr); }
  .res-grid-cards { grid-template-columns: repeat(2, 1fr); }
  .res-rail { grid-auto-columns: calc((100% - 28px) / 2.2); }
  .say-grid { grid-template-columns: repeat(2, 1fr); }
  .type-grid { grid-template-columns: repeat(3, 1fr); }
  .res-bottom { grid-template-columns: 1fr 1fr; }
  .myth-grid { grid-template-columns: 1fr 1fr; }
  .plan-pair { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid.wide { grid-template-columns: repeat(3, 1fr); }
  .tool-cta { grid-template-columns: 1fr auto; align-items: center; }
  .article { padding: 28px; }
  .ftr-grid { grid-template-columns: repeat(2, 1fr); }
  .ftr-brand { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .hide-m { display: inline-flex; }
  .show-m { display: none; }
  .sit-grid { grid-template-columns: repeat(6, 1fr); }
  .sit { flex-direction: column; text-align: center; justify-content: center; min-height: 104px; }
  .res-grid-cards { grid-template-columns: repeat(3, 1fr); }
  .res-grid-cards .res-card { flex-direction: column; }
  .res-grid-cards .res-tile { flex: 0 0 110px; }
  .res-rail { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 18px 0 0; }
  .res-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .res-side { position: sticky; top: 88px; }
  .age-cols { grid-template-columns: repeat(3, 1fr); }
  .lib-controls { grid-template-columns: 320px 1fr; align-items: start; }
  .ftr-grid { grid-template-columns: 1.3fr repeat(4, 1fr); }
  .ftr-brand { grid-column: auto; }
  .article { padding: 36px; }
}

/* Print. Resource pages print as clean handouts. Anything else prints its main content only. */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11.5pt; }
  .topbar, .hdr, .menu, .ftr, .sticky, .drawer, .cookie, .res-side, .related, .res-actions, .crumbs, .tool-cta, .myth-actions, .det-answers, [data-print], .lib-controls, .sit-grid { display: none !important; }
  .c-hero { background: #fff; color: var(--plum); padding: 0 0 6px; }
  .c-hero h1, .c-hero p { color: var(--plum); }
  .res-meta .fmt { background: var(--bg-2); color: var(--purple-deep); }
  .print-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--purple); padding-bottom: 8px; margin-bottom: 14px; }
  .print-head img { height: 34px; width: auto; }
  .print-head span { font-size: 9pt; color: var(--muted); }
  .res-hero { display: none; }
  .print-only { display: block; }
  .res-layout { display: block; padding: 0; }
  .article { border: 0; padding: 0; box-shadow: none; }
  .wrap { max-width: none; padding: 0; }
  .art-steps li, .box, .say, .type-card, .age-col, .check-card, .myth, .study, .tracker, .plan .field { break-inside: avoid; }
  .myth-back { display: block; margin-top: 8px; }
  .myth .myth-front em { display: none; }
  .sources[open] ol, .sources ol { display: grid; }
  details.sources > *:not(summary) { display: block; }
  .tracker, .plan { border: 1px solid #999; background: #fff; }
  .tracker td { height: 34px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; }
}
/* Footer on phones, two link columns under the brand */
@media (max-width: 699px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-brand { grid-column: 1 / -1; }
}

/* Planned materials as a compact list, wrapping filters, mobile hero buttons */
.soon-list { margin-top: 14px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: 14px 16px; }
.soon-list[hidden], .soon-list li[hidden] { display: none; }
.soon-h { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.soon-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.soon-list li { display: flex; gap: 12px; align-items: flex-start; }
.soon-list .ico { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--bg-2); display: grid; place-items: center; font-size: 1.15rem; }
.soon-list b { display: block; font-family: var(--head); font-size: .95rem; }
.soon-list small { color: var(--muted); font-size: .85rem; line-height: 1.4; display: block; }
.age-tabs { flex-wrap: wrap; overflow: visible; }
.res-actions .btn { flex: 1 1 auto; }
.hide-s { display: none; }
.rule { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; padding: 16px; }
.rule .num { margin: 0; }
.rule h3 { margin: 0; font-size: 1.05rem; }
.rule p { grid-column: 1 / -1; margin-top: 8px; }
@media (min-width: 420px) { .hide-s { display: inline; } }
@media (min-width: 700px) {
  .res-groups { flex-wrap: wrap; overflow: visible; }
  .res-actions .btn { flex: 0 0 auto; }
  .soon-list ul { grid-template-columns: 1fr 1fr; }
  .rule { display: block; padding: 20px; }
  .rule .num { margin-bottom: 10px; }
  .rule h3 { margin-bottom: .5em; }
}
@media (min-width: 1000px) { .soon-list ul { grid-template-columns: repeat(3, 1fr); } }

/* Mobile menu as one column. Calm pages without the sticky donate bar. */
#menu-links { display: flex; flex-direction: column; gap: 2px; }
.menu-panel .sub { padding-top: 10px; padding-bottom: 10px; }
body.calm .sticky { display: none; }

/* The first heading in an article sits at the top. The print header before it is hidden on screen. */
.article > h2:first-of-type { margin-top: 0; }
.res-actions .btn { gap: 5px; }


/* ===== Funds and volunteers, 3 October 2026 ===== */
/* Three fund cards. Stacked on phones, side by side as wide cards on tablets, three columns on desktop. */
.fund-grid { display: grid; gap: 16px; }
.fund-grid .card-body p { min-height: 0; }
.fund-h { font-size: 1.25rem; margin: 26px 0 10px; }
.story .note { margin-bottom: 14px; }
.roadmap { list-style: none; margin: 8px 0 18px; padding: 0 0 0 26px; position: relative; display: grid; gap: 12px; }
.roadmap::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.roadmap li { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.roadmap li::before { content: ""; position: absolute; left: -26px; top: 15px; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--line); box-sizing: border-box; }
.roadmap li.rm-now::before { border-color: var(--ok); background: var(--ok); }
.roadmap li.rm-next::before { border-color: var(--purple); }
.rm-status { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); color: var(--muted); margin-bottom: 4px; }
.rm-now .rm-status { background: #E4F2EA; color: #24704A; }
.rm-next .rm-status { background: #EFE4F8; color: var(--purple-deep); }
.roadmap strong { display: block; font-family: var(--head); }
.roadmap p { margin: 2px 0 0; font-size: .95rem; color: var(--muted); }
.gallery .track img { flex: 0 0 100%; }

/* Volunteers */
.vol-types { display: grid; gap: 14px; }
.vol-type { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.vol-type h2 { font-size: 1.35rem; margin: 0; }
.vol-type p { color: var(--muted); margin: 0; }
.vol-ic { font-size: 2rem; line-height: 1; }
.vol-form { max-width: 760px; scroll-margin-top: 90px; }
.vol-choice { border: 0; padding: 0; margin: 0 0 4px; }
.vol-choice legend { font-family: var(--head); font-weight: 700; font-size: 1.15rem; margin-bottom: 8px; padding: 0; }
.vol-toggle { max-width: 380px; }
.vol-toggle button[aria-pressed="true"] { background: #fff; color: var(--purple-deep); box-shadow: 0 2px 8px rgba(59, 36, 80, .12); }
.vol-block { display: grid; gap: 12px; }
.vol-block[hidden] { display: none; }
.radio-row { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-weight: 700; }
.radio-pill input { accent-color: var(--purple); width: 18px; height: 18px; margin: 0; flex: none; }
.radio-pill:has(input:checked) { border-color: var(--purple); background: var(--bg-2); }

@media (min-width: 700px) {
  .fund-grid .card { flex-direction: row; }
  .fund-grid .card-img { flex: 0 0 42%; aspect-ratio: auto; min-height: 240px; }
  .ways { grid-template-columns: repeat(2, 1fr); }
  .vol-types { grid-template-columns: 1fr 1fr; }
  .vol-form .check-group { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .fund-grid { grid-template-columns: repeat(3, 1fr); }
  .fund-grid.two { grid-template-columns: repeat(2, 1fr); }
  .fund-grid .card { flex-direction: column; }
  .fund-grid .card-img { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
  .fund-grid.two .card { flex-direction: row; }
  .fund-grid.two .card-img { flex: 0 0 42%; aspect-ratio: auto; min-height: 240px; }
  .ways { grid-template-columns: repeat(4, 1fr); }
  .ftr-grid { grid-template-columns: 1.4fr repeat(3, 1fr); }
}
/* Shorter volunteer form on phones, wider fund picker in the quick donate bar */
.vol-form .check-group { grid-template-columns: 1fr 1fr; }
.vol-form .check-card { padding: 10px 12px; font-size: .95rem; }
@media (min-width: 1000px) { .quick-card { grid-template-columns: 1.6fr 1.05fr 1.6fr .8fr auto; } }

/* Stock photos. Volunteer cards get a photo on top. */
.vol-type { overflow: hidden; padding-top: 0; }
.vol-img { width: calc(100% + 44px); max-width: none; margin: 0 -22px 6px; aspect-ratio: 16 / 9; object-fit: cover; }

.partner-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 8px; }
.partner-box .h3 { margin-top: 0; }

.activities { margin-top: 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.activities .ticks { margin: 0; }
.spend-rules { margin: 16px 0 0; font-size: .95rem; }
@media (min-width: 700px) { .activities .ticks { grid-template-columns: 1fr 1fr; gap: 10px 24px; } }

/* Нашата мисия, between the quick donate and the funds (3.10.2026) */
.mission { padding-top: 32px; padding-bottom: 0; }
.mission-card { background: var(--bg-2); border-radius: var(--radius-lg); padding: 26px 20px; }
.mission-card h2 { margin: 6px 0 14px; text-wrap: balance; }
.mission-text { display: grid; gap: 14px; }
.mission-text p { margin: 0; font-size: 1.04rem; line-height: 1.7; }
@media (min-width: 900px) {
  .mission-card { padding: 40px 44px; }
  .mission-text { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* Quick donate under the free resources, with the 7% and transparency notes (canvas edits, 3.10.2026) */
.quick.quick-mid { margin-top: 0; padding: 40px 0 8px; }
.trust-two { margin-top: 16px; }
.who-lead { color: var(--muted); margin: 0 0 14px; }
@media (min-width: 700px) { .trust-two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .quick.quick-mid { margin-top: 0; padding-top: 56px; } }
.quick-mid .quick-title { justify-content: center; text-align: center; }
.quick-secure { color: var(--ok); font-weight: 800; font-size: .82rem; }
@media (min-width: 900px) { .quick-secure { grid-column: 1 / -1; } }

/* Дишай сега. Teal so it reads as calm and never as another donate button (3.10.2026) */
.btn-breathe { background: var(--calm); color: #fff; }
.btn-breathe:hover { background: var(--calm-deep); }
.wind { width: 18px; height: 18px; flex: none; }
.hdr-breathe { display: none; padding: 11px 18px; }
@media (min-width: 640px) { .hdr-breathe { display: inline-flex; } }
.menu-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.menu-cta .btn { margin-top: 0; padding: 13px 10px; }
.breathe { position: fixed; inset: 0; z-index: 95; display: none; }
.breathe.open { display: grid; place-items: end center; }
.breathe-bg { position: absolute; inset: 0; background: rgba(23, 50, 48, .55); }
.breathe-panel { position: relative; width: min(100%, 440px); max-height: 100%; overflow-y: auto; background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); display: grid; gap: 14px; animation: rise .25s ease-out; }
@keyframes rise { from { transform: translateY(30px); opacity: 0; } }
@media (min-width: 600px) { .breathe.open { place-items: center; } .breathe-panel { border-radius: var(--radius-lg); padding: 24px; } }
.breathe-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.breathe-head h2 { margin: 0; font-size: 1.35rem; }
.breathe-lead, .breathe-hint { margin: 0; color: var(--muted); font-size: .95rem; }
.breathe-box { position: relative; width: min(64vw, 230px); aspect-ratio: 1; margin: 10px auto; border-radius: 28px; background: var(--calm-bg); display: grid; place-items: center; }
.b-text { position: relative; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); display: grid; }
.b-text b { font-family: var(--head); font-size: 1.35rem; }
.b-text span { font-size: 2rem; font-weight: 800; line-height: 1.1; min-height: 1.1em; }
.breathe-round { margin: 0; text-align: center; font-weight: 700; color: var(--calm-deep); min-height: 1.4em; }
.breathe-help { margin: 0; font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.nav > a, .nav > .has-mega > button, .hdr-actions .btn { white-space: nowrap; }
@media (min-width: 1000px) and (max-width: 1499px) { .nav .nav-wide { display: none; } }
@media (min-width: 1000px) and (max-width: 1139px) { .hdr-breathe .bt-more { display: none; } }
.breathe-box.is-box { border: 3px solid rgba(31, 122, 114, .35); border-radius: 18px; }
.b-dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--calm-deep); border: 3px solid #fff; transform: translate(-50%, -50%); }
.breathe-box { align-content: center; justify-items: center; gap: 4px; }
.breathe-box .b-text { color: var(--calm-deep); text-shadow: none; }
.breathe-box .b-text b { font-size: 1.25rem; }
.breathe-box .b-text span { font-size: 1.7rem; }
.turtle { position: relative; width: 74%; height: auto; overflow: visible; }
.turtle .t-shell path:first-child { fill: var(--calm); }
.turtle .t-plate { fill: none; stroke: #7CCFC4; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.turtle .t-rim { fill: var(--calm-deep); }
.turtle .t-head ellipse, .turtle .t-legs rect, .turtle .t-tail { fill: #9BD3B4; }
.turtle .t-eye { fill: var(--plum); }
.turtle .t-smile { stroke: var(--plum); stroke-width: 2.5; stroke-linecap: round; }
.turtle .t-shell { transform-box: fill-box; transform-origin: 50% 100%; }
.turtle .t-head, .turtle .t-legs, .turtle .t-tail { transition: transform .8s ease, opacity .8s ease; transform-box: fill-box; transform-origin: center; }
.turtle.tucked .t-head { transform: translateX(-34px) scale(.6); opacity: 0; }
.turtle.tucked .t-legs { transform: translateY(-14px) scaleY(.4); }
.turtle.tucked .t-tail { transform: translateX(14px); opacity: 0; }

/* Motion, fast and light (3.10.2026). Only with the .motion class, which app.js sets unless the visitor asks for reduced motion. */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); }
.motion .rv { opacity: 0; translate: 0 16px; transition: opacity .38s var(--ease-out) var(--d, 0ms), translate .38s var(--ease-out) var(--d, 0ms); }
.motion .rv.in { opacity: 1; translate: none; }
.motion #app.enter { animation: pagein .2s ease-out; }
@keyframes pagein { from { opacity: 0; } }
.motion .slide.on img { animation: slidezoom 1.2s var(--ease-out) both; }
@keyframes slidezoom { from { scale: 1.06; } }
.motion .has-mega.open .mega { animation: dropin .16s var(--ease-out); }
@keyframes dropin { from { opacity: 0; translate: 0 -6px; } }
.motion .menu.open .menu-panel { animation: panelin .22s var(--ease-out); }
.motion .menu.open .menu-bg, .motion .drawer.open .drawer-bg, .motion .breathe.open .breathe-bg { animation: fadein .2s ease-out; }
@keyframes panelin { from { translate: 24px 0; opacity: 0; } }
@keyframes fadein { from { opacity: 0; } }
.motion .faq details[open] > p, .motion details.menu-group[open] > a { animation: openin .2s var(--ease-out); }
@keyframes openin { from { opacity: 0; translate: 0 -4px; } }
.motion .basket .count.bump { animation: bump .3s var(--ease-out); }
@keyframes bump { 40% { scale: 1.35; } }
.amounts button, .card-amounts button, .toggle button, .sit, .tabs button, .faq summary::after { transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
.card, .way, .step, .trust-item, .person, .vol-type { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn-donate:hover { box-shadow: 0 10px 22px rgba(215, 94, 146, .4); }
  .card:hover, .way:hover, .vol-type:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .step:hover, .trust-item:hover, .person:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .sit:hover { transform: translateY(-1px); }
  .amounts button:hover, .card-amounts button:hover { border-color: var(--purple); }
}
.btn:active, .amounts button:active, .card-amounts button:active, .sit:active { transform: scale(.97); }
@media print { .rv { opacity: 1 !important; translate: none !important; } }

/* Signs under each study, the 112 summary and the regional library (3.10.2026) */
.study-signs { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.study-signs summary { cursor: pointer; font-weight: 800; color: var(--purple-deep); list-style: none; display: flex; align-items: center; gap: 6px; min-height: 36px; }
.study-signs summary::-webkit-details-marker { display: none; }
.study-signs summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-2); font-size: 1rem; }
.study-signs[open] summary::before { content: "−"; }
.study-signs dl { margin: 6px 0 0; display: grid; gap: 8px; }
.study-signs dl div { display: grid; gap: 1px; }
.study-signs dt { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.study-signs dd { margin: 0; font-size: .93rem; }
.lib-summary, .reg-patterns { display: grid; gap: 10px; margin-bottom: 18px; }
.lib-summary > h2, .reg-patterns > h2 { font-size: 1.3rem; margin: 0 0 2px; }
.lib-sum, .reg-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.lib-sum h3, .reg-box h3 { font-size: 1rem; margin: 0 0 4px; }
.lib-sum p { margin: 0; font-size: .94rem; }
.lib-sum.good { border-left: 4px solid var(--ok); }
.lib-sum.bad { border-left: 4px solid var(--pink-deep); }
.reg-box .ticks { margin: 6px 0 0; font-size: .94rem; }
.reg-box.gap { background: var(--bg-2); }
.study-sample { font-size: .88rem; color: var(--muted); margin-bottom: 6px; }
.study-limits { color: var(--muted); }
@media (min-width: 900px) { .lib-summary { grid-template-columns: 1fr 1fr; } .lib-summary > h2 { grid-column: 1 / -1; } .reg-patterns { grid-template-columns: repeat(3, 1fr); } .reg-patterns > h2 { grid-column: 1 / -1; } }
@media print { .study-signs > dl { display: grid !important; } }

/* Моят план prints in full and without the grey examples (4.10.2026) */
.plan .area { overflow: hidden; field-sizing: content; min-height: 3.4em; }
@media print {
  .plan .input::placeholder { color: transparent; }
  .plan .area { overflow: visible; min-height: 4.5em; }
}

/* What each fund pays for, on the fund cards (4.10.2026) */
.card-body .card-note { margin: 2px 0 0; color: var(--purple-deep); font-weight: 700; font-size: .88rem; }
.card-covers { margin: 0; gap: 6px; font-size: .9rem; }
.card-covers li::before { width: 18px; height: 18px; }

/* Bank transfer in the checkout (4.10.2026) */
.pay-method { margin: 2px 0; }
.bank-box { display: grid; gap: 10px; }
.bank-details { padding: 2px 16px; }
.bank-details div { padding: 10px 0; }
.bank-details dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; word-break: break-word; }
.copy-btn { border: 1px solid var(--line); background: var(--bg-2); color: var(--purple-deep); border-radius: 999px; padding: 4px 12px; font-size: .82rem; font-weight: 800; cursor: pointer; min-height: 32px; }
.btn-soon { background: #ECE7F0; color: #7A6E86; cursor: not-allowed; box-shadow: none; }
.btn-soon:hover { transform: none; }

/* Forms send through send.php. The hidden field catches bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button[disabled]:not(.btn-soon) { opacity: .7; cursor: progress; }

/* Simple cookie notice, one button, while the site loads no analytics or ad tags */
.cookie-simple { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cookie-simple[hidden] { display: none; }
.cookie-simple p { flex: 1; min-width: 0; font-size: .85rem; }
.cookie-simple .btn { flex: none; white-space: nowrap; padding: 10px 16px; }

/* Label above a fund name, for example Национална кампания */
.card-tag { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 4px; }

/* A slide whose photo has faces in the middle. On wide screens the photo takes the right part
   and the text sits on plain purple, so the title never covers a face. */
@media (min-width: 1200px) {
  .slide-split { background: #3B2450; }
  .slide-split img { left: 45%; width: 55%; }
  .slide-split::after { background: linear-gradient(90deg, #3B2450 45%, rgba(59, 36, 80, 0) 62%), linear-gradient(180deg, rgba(59, 36, 80, 0) 70%, rgba(59, 36, 80, .6) 100%); }
}
/* Below 1200px there is no room beside the text, so the same slide shows its photo as a band above it.
   The band is 38vw, enough for both heads in the close crop, and the slider grows by that much so the text still fits. */
@media (max-width: 1199px) {
  .slides { min-height: calc(38vw + 450px); }
  .slide-split { background: #3B2450; }
  .slide-split img { height: 38vw; bottom: auto; object-position: 50% 50% !important; }
  .slide-split::after { background: linear-gradient(180deg, rgba(59, 36, 80, 0) calc(38vw - 20px), #3B2450 38vw); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .slides { min-height: calc(38vw + 400px); }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .slides { min-height: calc(38vw + 480px); }
}
/* The two other funds on a fund page are too narrow for a photo beside the text between 1000 and 1199px,
   so there they show the photo on top, like the cards on the home page */
@media (min-width: 1000px) and (max-width: 1199px) {
  .fund-grid.two .card { flex-direction: column; }
  .fund-grid.two .card-img { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
}

/* Team photo in „Кои сме ние“, with the two chairs under it in the same order, left to right */
.team-photo { margin: 0; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); }
.team-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1236; object-fit: cover; }
.team-photo figcaption { padding: 10px 14px; font-size: .9rem; color: var(--plum); font-weight: 700; }
.board-people { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.board-people .person { flex-direction: column; text-align: center; gap: 8px; }
img.avatar { object-fit: cover; }
.board-people .person small { color: var(--plum); }