/* =========================================================
   دُغري / DOGHRI — content pages
   About, privacy, terms, the other policies and contact.
   Tokens and buttons come from landing.css.
   ========================================================= */

/* ---------- page head: title on chalk, then a strip of road ---------- */
.dg-pagehead { position: relative; padding-top: clamp(28px, 5vw, 64px); overflow: hidden; }
.dg-pagehead::before { /* the sun behind the title */
  content: ""; position: absolute; z-index: -1; width: min(520px, 90vw); aspect-ratio: 1; border-radius: 50%;
  background: var(--dg-yellow); inset-inline-end: -12vw; top: -260px;
}
.dg-pagehead__inner { position: relative; padding-bottom: clamp(32px, 5vw, 56px); }
.dg-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14.4px; color: var(--dg-muted); margin-bottom: 18px; }
.dg-crumbs a { text-decoration: underline; text-decoration-color: var(--dg-line); text-underline-offset: 4px; }
.dg-crumbs a:hover { color: var(--dg-ink); text-decoration-color: var(--dg-yellow-deep); }
.dg-pagehead .dg-kicker { display: flex; }
.dg-pagehead__title { font-size: clamp(36px, 6vw, 68px); letter-spacing: -.02em; max-width: 16ch; }
.dg-pagehead__lead { margin-top: 16px; max-width: 58ch; font-size: clamp(16.8px, 1.6vw, 19.2px); color: var(--dg-muted); }
.dg-pagehead__road { position: relative; height: 22px; background: var(--dg-road); }
.dg-pagehead__road span { position: absolute; inset: 9px 0 auto; height: 4px; background: repeating-linear-gradient(90deg, var(--dg-yellow) 0 36px, transparent 36px 64px); }

/* ---------- doc layout: side links + readable column ---------- */
.dg-doc { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.dg-doc__side { position: sticky; top: 96px; display: grid; gap: 16px; }
.dg-doc__nav { padding: 18px; border-radius: var(--dg-r); background: var(--dg-paper); border: 1px solid var(--dg-line); }
.dg-doc__navh, .dg-doc__helph { font-weight: 800; font-size: 14.4px; margin-bottom: 8px !important; }
.dg-doc__navh { color: var(--dg-muted); }
.dg-doc__nav ul { display: grid; gap: 2px; }
.dg-doc__nav a { display: block; padding: 9px 12px; border-radius: 12px; font-size: 15.2px; transition: background .2s; }
.dg-doc__nav a:hover { background: rgba(27,27,27,.05); }
.dg-doc__nav a.is-current { background: var(--dg-ink); color: var(--dg-chalk); font-weight: 700; }
.dg-doc__help { padding: 18px; border-radius: var(--dg-r); background: var(--dg-ink); color: var(--dg-chalk); }
.dg-doc__help p { font-size: 14.4px; color: var(--dg-muted-dark); }
.dg-doc__help .dg-doc__helph { color: var(--dg-yellow); font-size: 16px; }
.dg-doc__help .dg-btn { margin-top: 14px; width: 100%; min-height: 44px; font-size: 14.4px; }

/* long-form text: admin HTML or the default copy */
.dg-prose { max-width: 70ch; font-size: 17.6px; line-height: 1.9; color: #2B2924; }
.dg-prose > * + * { margin-top: 1em !important; }
.dg-prose :where(h1, h2, h3, h4) { font-family: var(--dg-font-body); font-weight: 800; color: var(--dg-ink); line-height: 1.35; }
.dg-prose :where(h1, h2) { font-size: 24px; margin-top: 1.8em !important; }
.dg-prose :where(h3, h4) { font-size: 19.2px; margin-top: 1.4em !important; }
.dg-prose > :first-child, .dg-prose > section:first-child h2, .dg-prose__intro + section h2 { margin-top: 0 !important; }
.dg-prose section + section { margin-top: 2em !important; padding-top: 2em; border-top: 1px dashed var(--dg-line); }
.dg-prose section p { margin-top: .6em !important; }
.dg-prose :where(ul, ol) { padding-inline-start: 1.3em; }
.dg-prose :where(ul li) { list-style: disc; }
.dg-prose :where(ol li) { list-style: decimal; }
.dg-prose li + li { margin-top: .4em; }
.dg-prose a { text-decoration: underline; text-decoration-color: var(--dg-yellow-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dg-prose img { max-width: 100%; height: auto; border-radius: var(--dg-r-sm); }
.dg-prose table { width: 100%; border-collapse: collapse; font-size: 15.2px; display: block; overflow-x: auto; }
.dg-prose :where(td, th) { border: 1px solid var(--dg-line); padding: 8px 10px; }
.dg-prose__intro { font-size: clamp(18.4px, 1.8vw, 20.8px); color: var(--dg-ink); line-height: 1.75; }
.dg-prose__no { display: inline-grid; place-items: center; min-width: 38px; height: 28px; padding-inline: 6px; margin-inline-end: 12px; border-radius: 8px; background: var(--dg-yellow); font-size: 14.4px; vertical-align: 3px; font-variant-numeric: tabular-nums; }
.dg-prose--bare { max-width: 62ch; }

@media (max-width: 860px) {
  .dg-doc { grid-template-columns: minmax(0, 1fr); }
  .dg-doc__side { position: static; order: 2; }
  .dg-doc__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dg-prose { font-size: 16.8px; }
}

/* ---------- about ---------- */
.dg-about__h { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.01em; margin-bottom: 20px !important; }
.dg-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 6vw, 88px); }
.dg-about .dg-prose p + p { margin-top: 1em; }
.dg-about__name { margin: 0; border-radius: var(--dg-r-lg); background: var(--dg-paper); border: 2px solid var(--dg-ink); box-shadow: var(--dg-hard); overflow: hidden; }
.dg-about__name svg { width: 100%; height: auto; display: block; }
.dg-about__name figcaption { padding: 20px 24px 24px; display: grid; gap: 6px; }
.dg-about__name b { font-family: var(--dg-font-head); font-size: 30px; line-height: 1.2; }
.dg-about__name span { color: var(--dg-muted); font-size: 15.2px; }

.dg-values { padding-block: 0 clamp(40px, 6vw, 88px); }
.dg-values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dg-value { padding: 24px; border-radius: var(--dg-r); background: var(--dg-paper); border: 1px solid var(--dg-line); transition: transform .25s var(--dg-ease), box-shadow .25s var(--dg-ease); }
.dg-value:hover { transform: translateY(-3px); box-shadow: var(--dg-shadow); }
.dg-value__ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--dg-yellow); margin-bottom: 16px; }
.dg-value h3 { font-family: var(--dg-font-body); font-weight: 800; font-size: 18.4px; margin-bottom: 6px; }
.dg-value p { color: var(--dg-muted); font-size: 15.2px; line-height: 1.7; }

.dg-steps-row { padding-block: 0 clamp(40px, 6vw, 88px); }
.dg-steps-row__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.dg-steps-row__list::before { /* the lane linking the three stops */
  content: ""; position: absolute; inset-inline: 8% 8%; top: 27px; height: 4px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--dg-ink) 0 14px, transparent 14px 24px);
}
.dg-steps-row__list li { position: relative; z-index: 1; display: grid; gap: 6px; justify-items: start; }
.dg-steps-row__no { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--dg-yellow); border: 3px solid var(--dg-ink); font-family: var(--dg-font-head); font-size: 22px; margin-bottom: 10px; }
.dg-steps-row__list b { font-size: 18.4px; }
.dg-steps-row__list span:last-child { color: var(--dg-muted); font-size: 15.2px; }

.dg-joinband { padding-block: 0 clamp(56px, 7vw, 104px); }
.dg-joinband__card { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: clamp(24px, 4vw, 44px); border-radius: var(--dg-r-lg); background: var(--dg-ink); color: var(--dg-chalk); }
.dg-joinband__h { font-size: clamp(24px, 3vw, 34px); color: var(--dg-yellow); margin-bottom: 8px !important; }
.dg-joinband__card p { color: var(--dg-muted-dark); max-width: 48ch; }
.dg-joinband__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dg-btn--ghost { --b-bg: transparent; --b-fg: var(--dg-chalk); box-shadow: inset 0 0 0 2px rgba(255,248,231,.4); }
.dg-btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--dg-yellow); }

@media (max-width: 960px) {
  .dg-about { grid-template-columns: minmax(0, 1fr); }
  .dg-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dg-values__grid, .dg-steps-row__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dg-steps-row__list::before { inset-inline: 27px auto; top: 8px; bottom: 8px; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--dg-ink) 0 14px, transparent 14px 24px); }
  .dg-steps-row__list li { grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .dg-steps-row__no { grid-row: span 2; margin: 0; }
  .dg-joinband__actions, .dg-joinband__actions .dg-btn { width: 100%; }
  .dg-value { padding: 20px; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .dg-value__ico { grid-row: span 2; margin: 0; }
}

/* ---------- contact ---------- */
.dg-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-block: clamp(36px, 5vw, 72px) clamp(56px, 7vw, 96px); }
.dg-contact__ways { display: grid; gap: 12px; }
.dg-way { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border-radius: var(--dg-r); background: var(--dg-paper); border: 1px solid var(--dg-line); }
.dg-way__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--dg-sand); }
.dg-way h2 { font-family: var(--dg-font-body); font-weight: 800; font-size: 16px; margin-bottom: 2px !important; }
.dg-way a:not(.dg-btn), .dg-way span { color: var(--dg-muted); overflow-wrap: anywhere; }
.dg-way a:not(.dg-btn):hover { color: var(--dg-ink); text-decoration: underline; }
.dg-way--wa { background: var(--dg-ink); color: var(--dg-chalk); border-color: var(--dg-ink); }
.dg-way--wa .dg-way__ico { background: #25D366; color: #fff; }
.dg-way--wa p { color: var(--dg-muted-dark); font-size: 15.2px; margin: 4px 0 14px !important; }

.dg-cform { position: relative; padding: clamp(22px, 3.4vw, 40px); border-radius: var(--dg-r-lg); background: var(--dg-paper); border: 2px solid var(--dg-ink); box-shadow: var(--dg-hard); }
.dg-cform__h { font-size: clamp(24px, 2.6vw, 32px); }
.dg-cform__sub { color: var(--dg-muted); margin: 6px 0 22px !important; }
.dg-cform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dg-cfield { display: grid; gap: 8px; min-width: 0; }
.dg-cfield--full { grid-column: 1 / -1; }
.dg-cfield label { font-weight: 700; font-size: 15.2px; }
.dg-cfield :where(input, textarea) {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid rgba(27,27,27,.18);
  background: #fff; font: inherit; font-size: 16px; color: var(--dg-ink); transition: border-color .2s, box-shadow .2s;
}
.dg-cfield textarea { min-height: 136px; resize: vertical; line-height: 1.7; }
.dg-cfield :where(input, textarea):focus { outline: none; border-color: var(--dg-ink); box-shadow: 0 0 0 4px rgba(255,194,51,.45); }
.dg-cfield ::placeholder { color: #9A937F; }
.dg-cfield.is-invalid :where(input, textarea) { border-color: var(--dg-red); }
.dg-cfield__err { color: #B4232A; font-size: 14.4px; font-weight: 700; }
.dg-cfield__captcha { display: flex; gap: 12px; align-items: stretch; }
.dg-cfield__captcha input { flex: 1; }
.dg-cfield__captcha img { height: 52px; width: auto; border-radius: 12px; background: #fff; border: 1px solid var(--dg-line); }
.dg-cform__send { margin-top: 22px; min-height: 54px; padding-inline: 32px; }
.dg-cform__send[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 900px) {
  .dg-contact { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .dg-cform__grid { grid-template-columns: minmax(0, 1fr); }
  .dg-cform__send { width: 100%; }
}
@media (max-width: 640px) { .dg-pagehead::before { width: 340px; top: -250px; inset-inline-end: -120px; } }