/* =============================================================================
   KurdiCode 2.0 — pages made in the dashboard (page.php / app/pages.php)
   Builds on /assets/css/site.css: its tokens, .prose, .card, .btn, .icon-tile,
   .crumbs, .page-hero, .page-aurora and the content cards. Only what is
   particular to dashboard pages lives here:

     Templates
       main.page-standard   .page-hero, then .page-flow
       main.page-document   .doc-head, .doc-layout (.doc-aside > nav.doc-toc: a sticky
                            column at the end side from 1100px, as on the legal
                            pages | .doc-toc-mobile <details> on narrow screens),
                            .doc-body paper panel with the gradient top edge.
                            No script needed; prints cleanly.
       main.page-landing    .landing-hero (.landing-grid[.has-visual] > .landing-copy
                            + .landing-visual), then .page-flow.is-landing
       .draft-ribbon        "Draft — not public" strip for editors

     .page-flow             the block column: every block sits on the reading
                            column (--container-narrow, starting under the page
                            title); .is-wide on the site width; .is-full edge to
                            edge. On landing pages all blocks sit on the wide
                            column, boxed ones capped at a 780px measure.

     Blocks (class="block block-<type>")
       .block-richtext/.block-html (.prose)   .block-heading (h2|h3, id = anchor)
       .block-callout.tone-{info|success|warning|danger}  .block-steps (ol)
       .block-faq > details.faq-item          .block-image[.is-wide|.is-full][.is-rounded]
       .block-gallery.cols-{2|3|4}[data-gallery] > .gallery-item > a[data-gallery-item]
       .block-buttons                          .block-cards.cols-{2|3|4} > .pb-card
       .block-contact[.has-form] (.pb-contact-info + .pb-form)
       .block-toc   .block-divider   .block-collection   .block-app-links
       (.pb-stores > .pb-store-btn, .pb-app-nav)   .block-spacer.size-{s|m|l}

   Logical properties throughout; Kurdish and Arabic (RTL) need no overrides
   except the mirrored arrows site.css already handles. English standing in on
   a Kurdish or Arabic page carries lang="en" dir="ltr" on the smallest element
   that holds it (a
   list keeps one direction; only the words inside an item are marked).
   ============================================================================= */

/* ---------- Draft ribbon ---------- */
.draft-ribbon {
  position: sticky; top: var(--header-h); z-index: calc(var(--z-header) - 1);
  color: var(--st-dev-fg);
  /* stripes, then the amber tint, over the page colour (the ribbon floats over content) */
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--amber-ink) 7%, transparent) 14px 28px),
    linear-gradient(var(--st-dev-bg), var(--st-dev-bg)),
    var(--bg);
  box-shadow: inset 0 -1px 0 var(--st-dev-line), inset 0 1px 0 var(--st-dev-line);
  font-size: var(--fs-sm); line-height: 1.45;
}
.draft-ribbon-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-block: 8px; }
.draft-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--st-dev-fg); color: var(--bg); font-weight: 700; font-size: 0.8rem; letter-spacing: var(--tracking-label);
}
.draft-badge i { font-size: 0.85em; }
.draft-text { color: var(--ink); }
.draft-edit {
  position: relative; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 6px 14px; border-radius: var(--r-pill);
  color: var(--ink); font-weight: 600; background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.draft-edit::after { content: ""; position: absolute; inset: -4px 0; border-radius: inherit; } /* 44px touch target */
.draft-edit:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ---------- Breadcrumbs on pages ---------- */
.page-crumbs { padding-top: clamp(8px, 0.25rem + 1.5vw, 24px); }
.page-crumbs + .page-hero, .page-crumbs + .doc-head { padding-top: clamp(20px, 1rem + 1.5vw, 40px); }
.page-crumbs a { display: inline-flex; align-items: center; min-height: 44px; } /* touch target */
.page-crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
.page-meta span { display: inline-flex; align-items: center; }

/* ---------- The block column ---------- */
/* The reading column starts on the container's start edge, under the page
   title (as on the legal pages); wide blocks carry on to the container's end
   edge; full blocks run edge to edge. */
.page-flow {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start content-start] min(100% - 2 * var(--gutter), var(--container-narrow))
    [content-end] minmax(0, calc(var(--container) - var(--container-narrow)))
    [wide-end] minmax(var(--gutter), 1fr) [full-end];
  align-content: start;
  padding-bottom: var(--section-y);
}
.page-flow > * { grid-column: content; min-width: 0; }
.page-flow > .is-wide { grid-column: wide; }
.page-flow > .is-full { grid-column: full; }
.page-flow.is-landing > * { grid-column: wide; }
.page-flow.is-landing > .is-full { grid-column: full; }
.page-standard .page-flow { padding-top: 4px; }
.page-landing .page-flow { padding-top: clamp(8px, 2vw, 24px); }

/* Rhythm, shared by the block column and the document panel */
:is(.page-flow, .doc-body) > * + * { margin-top: var(--flow-gap, 22px); }
:is(.page-flow, .doc-body) > .block-heading { margin-top: clamp(40px, 2rem + 2vw, 64px); }
.doc-body > h2.block-heading { margin-top: clamp(32px, 1.5rem + 1.2vw, 44px); }
:is(.page-flow, .doc-body) > h3.block-heading { margin-top: clamp(28px, 1.4rem + 1vw, 40px); }
:is(.page-flow, .doc-body) > .block-heading:first-child { margin-top: 0; }
:is(.page-flow, .doc-body) > .block-heading + * { margin-top: 14px; }
:is(.page-flow, .doc-body) > :is(.is-wide, .is-full, .block-callout, .block-steps, .block-faq, .block-toc, .block-contact, .block-app-links),
:is(.page-flow, .doc-body) > :is(.is-wide, .is-full, .block-callout, .block-steps, .block-faq, .block-toc, .block-contact, .block-app-links) + * { margin-top: clamp(28px, 1.2rem + 1.6vw, 44px); }
:is(.page-flow, .doc-body) > .block-heading + :is(.is-wide, .is-full, .block-callout, .block-steps, .block-faq, .block-toc, .block-contact, .block-app-links) { margin-top: 18px; }
:is(.page-flow, .doc-body) > .block-spacer, :is(.page-flow, .doc-body) > .block-spacer + * { margin-top: 0; }

/* Landing pages: long text keeps a readable measure on the wide column. The
   boxed blocks take that whole measure (not the width of their words), so
   questions, steps and notes line up as one column; buttons and headings
   stay as wide as their content. */
.page-flow.is-landing > :is(.block-richtext:not(.is-wide), .block-html, .block-callout, .block-faq, .block-steps, .block-toc, .block-app-links) { inline-size: 100%; max-inline-size: 780px; }
.page-flow.is-landing > .block-buttons { max-inline-size: 780px; }
.page-flow.is-landing > .block-heading { max-width: 26ch; }
/* A block standing in English on a Kurdish or Arabic page sits on its own reading side. */
.page-flow.is-landing > :is(.block-richtext:not(.is-wide), .block-html, .block-callout, .block-faq, .block-steps, .block-toc, .block-buttons, .block-app-links, .block-heading) { justify-self: self-start; }

/* ---------- Headings ---------- */
.block-heading { text-wrap: balance; scroll-margin-top: calc(var(--header-h) + 24px); }
h2.block-heading { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); font-weight: 700; line-height: 1.2; }
h3.block-heading { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); font-weight: 700; line-height: 1.3; }
h2.block-heading:lang(ckb), h3.block-heading:lang(ckb), h2.block-heading:lang(ar), h3.block-heading:lang(ar) { line-height: 1.5; }
.is-landing > h2.block-heading { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: var(--tracking-display); }
.block-heading:target { animation: pb-flash 1.6s var(--ease); }
@keyframes pb-flash { 0%, 30% { color: var(--accent); } }

/* ---------- English standing in on a Kurdish or Arabic page ----------
   A value not yet translated is marked lang="en" dir="ltr" (pages.php). site.css
   gives such an island the Latin faces but sets font-family to the body face on
   the marked element itself, so a heading that carries the mark would lose its
   display face; and the display tracking stays at the Kurdish 0. Headings keep
   both here (the same values as the English page), and arrows inside a
   left-to-right island point by the island's direction, not the page's. */
:root:lang(ckb) main.page [lang="en"], :root:lang(ar) main.page [lang="en"] { --tracking-display: -0.032em; --tracking-heading: -0.022em; --tracking-label: 0.02em; }
:root:lang(ckb) main.page :is(h1, h2, h3, h4, .faq-q, .callout-title)[lang="en"],
:root:lang(ar) main.page :is(h1, h2, h3, h4, .faq-q, .callout-title)[lang="en"] { font-family: var(--font-display); }
/* A page heading still in English (the whole header marked, see page_head_lang()) keeps English leading. */
:root:lang(ckb) main.page .page-title:lang(en), :root:lang(ar) main.page .page-title:lang(en) { line-height: 1.08; }
[dir="rtl"] main.page [dir="ltr"] :is(.arrow, .flip, .icon-flip) { transform: none; }
[dir="rtl"] main.page [dir="ltr"] .link-arrow:hover .arrow,
[dir="rtl"] main.page .link-arrow[dir="ltr"]:hover .arrow,
[dir="rtl"] main.page [dir="ltr"] .card.is-interactive:hover .link-arrow .arrow,
[dir="rtl"] main.page .card[dir="ltr"].is-interactive:hover .link-arrow .arrow,
[dir="rtl"] main.page [dir="ltr"] .pb-card.is-interactive:hover .pb-card-go .arrow,
[dir="rtl"] main.page .pb-card[dir="ltr"].is-interactive:hover .pb-card-go .arrow { transform: translateX(3px); }

/* ---------- Rich text ---------- */
.block-richtext, .block-html { max-width: 100%; }
.block-richtext.is-wide { font-size: var(--fs-md); }
/* English standing in on a Kurdish or Arabic page (lang="en" blocks) keeps English leading. */
:root .prose:lang(en) { line-height: 1.75; }
:root .block-callout .prose:lang(en) { line-height: 1.65; }

/* ---------- Callout ---------- */
.block-callout {
  --tone-bg: var(--info-bg); --tone-line: var(--info-line); --tone-ink: var(--accent);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 18px 20px; border-radius: var(--r-lg);
  background: var(--tone-bg); box-shadow: inset 0 0 0 1px var(--tone-line);
  color: var(--ink);
}
.block-callout.tone-success { --tone-bg: var(--ok-bg); --tone-line: var(--ok-line); --tone-ink: var(--success); }
.block-callout.tone-warning { --tone-bg: var(--st-dev-bg); --tone-line: var(--st-dev-line); --tone-ink: var(--amber-ink); }
.block-callout.tone-danger  { --tone-bg: var(--err-bg); --tone-line: var(--err-line); --tone-ink: var(--danger); }
.callout-icon {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  color: var(--tone-ink); background: color-mix(in srgb, var(--tone-ink) 14%, transparent); font-size: 1rem;
}
.callout-body { display: grid; gap: 6px; min-width: 0; padding-top: 5px; }
.callout-title { font: 700 1.02rem/1.4 var(--font-display); color: var(--ink); }
.block-callout .prose { font-size: 0.97rem; line-height: 1.65; color: var(--ink); }
.block-callout .prose:lang(ckb), .block-callout .prose:lang(ar) { line-height: 1.9; }
.block-callout .prose > * + * { margin-top: 0.6em; }

/* ---------- Steps ---------- */
.block-steps { list-style: none; counter-reset: pb-step; display: grid; }
.block-steps > li {
  counter-increment: pb-step; position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px;
  padding-bottom: 26px;
}
.block-steps > li:last-child { padding-bottom: 0; }
.block-steps > li::before {
  content: counter(pb-step);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.02rem/1 var(--font-latin-display); color: var(--btn-primary-fg);
  background: var(--btn-primary-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), var(--btn-primary-ring), var(--btn-primary-shadow);
}
.block-steps > li:lang(ckb)::before, .block-steps > li:lang(ar)::before { content: counter(pb-step, arabic-indic); font-family: var(--font-kurdish); }
.block-steps > li:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 21px; top: 52px; bottom: 8px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--line-strong), transparent);
}
.step-body { grid-column: 2; display: grid; gap: 6px; padding-top: 9px; min-width: 0; }
/* A step still in English inside a Kurdish or Arabic list (the only case that marks
   .step-body with dir) reads left to right but sits beside its number. */
.block-steps > li > .step-body[dir] { justify-self: start; }
.step-title { font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.step-title:lang(ckb), .step-title:lang(ar) { line-height: 1.6; }
.step-text { font-size: 0.99rem; }
.step-text > * + * { margin-top: 0.6em; }

/* ---------- Questions (native <details>: no script needed) ---------- */
.block-faq { display: grid; gap: 10px; }
.faq-item {
  border-radius: var(--r-md); background: var(--glass-strong);
  box-shadow: var(--glass-highlight), inset 0 0 0 1px var(--line), var(--shadow-xs);
  transition: box-shadow var(--dur) var(--ease);
}
.faq-item[open] { box-shadow: var(--glass-highlight), inset 0 0 0 1px var(--line-strong), var(--shadow-sm); }
.faq-item > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 18px; border-radius: inherit;
  font: 600 1.02rem/1.45 var(--font-display); color: var(--ink);
}
.faq-item > summary .faq-q:lang(ckb), .faq-item > summary .faq-q:lang(ar) { line-height: 1.7; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--accent); }
.faq-icon {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: 0.8rem;
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 18px 18px; font-size: 0.98rem; }
/* An answer still in English inside a Kurdish or Arabic list reads left to right but
   starts on the list's side, under its question (margin-inline-start is on
   the answer's own left, so auto pushes it to the right). */
.faq-a[dir] { inline-size: fit-content; max-inline-size: 100%; margin-inline-start: auto; }

/* ---------- Image ---------- */
.block-image { display: grid; gap: 10px; }
.block-image img { width: 100%; }
.block-image.is-rounded img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.block-image.is-full img { max-height: 78vh; object-fit: cover; }
.block-image figcaption, .gallery-item figcaption { font-size: var(--fs-sm); color: var(--muted); text-align: center; text-wrap: pretty; }
.block-image.is-full figcaption { padding-inline: var(--gutter); }

/* ---------- Gallery ---------- */
.block-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
.block-gallery.cols-2 { --cols: 2; }
.block-gallery.cols-4 { --cols: 4; }
.gallery-item { display: grid; gap: 8px; align-content: start; }
.gallery-link {
  position: relative; display: block; overflow: hidden; border-radius: var(--r-md);
  background: var(--bg-tint); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
}
.gallery-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s var(--ease); }
.gallery-link:hover img { transform: scale(1.03); }
.gallery-zoom {
  position: absolute; inset-block-end: 10px; inset-inline-end: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8rem; color: var(--ink);
  background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--line); opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-link:hover .gallery-zoom, .gallery-link:focus-visible .gallery-zoom { opacity: 1; }
.gallery-link:focus-visible { outline-offset: 3px; }

/* ---------- Buttons ---------- */
.block-buttons, .landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.block-buttons .btn { white-space: normal; }
.block-buttons .link-arrow { min-height: 44px; font-size: 0.97rem; }

/* ---------- Cards ---------- */
.block-cards, .pb-cards { list-style: none; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 721px) {
  .block-cards, .pb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .block-cards.cols-3, .pb-cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .block-cards.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pb-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px, 2vw, 26px); background: var(--glass-strong); }
.pb-card .icon-tile { margin-bottom: 4px; }
.pb-card-title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.35; }
.pb-card-title:lang(ckb), .pb-card-title:lang(ar) { line-height: 1.6; }
.pb-card-title a:hover { color: var(--accent); }
.pb-card p { font-size: 0.95rem; line-height: 1.65; }
.pb-card p:lang(ckb), .pb-card p:lang(ar) { line-height: 1.85; }
.pb-card-go { margin-top: auto; padding-top: 4px; color: var(--accent); font-size: 0.85rem; }
.pb-card-go .arrow, .pb-card-more .arrow { transition: transform var(--dur) var(--ease); }
.pb-card.is-interactive:hover .pb-card-go .arrow { transform: translateX(3px); }
[dir="rtl"] .pb-card.is-interactive:hover .pb-card-go .arrow { transform: scaleX(-1) translateX(3px); }
.pb-card-more { margin-top: auto; }
:is(.block-cards, .pb-cards) > :nth-child(4n+1) .icon-tile { --tile-fg: var(--accent);    --tile-bg: rgba(1, 181, 255, 0.13);   --tile-line: rgba(1, 181, 255, 0.24); }
:is(.block-cards, .pb-cards) > :nth-child(4n+2) .icon-tile { --tile-fg: var(--teal-ink);  --tile-bg: rgba(6, 214, 210, 0.15);   --tile-line: rgba(6, 190, 190, 0.26); }
:is(.block-cards, .pb-cards) > :nth-child(4n+3) .icon-tile { --tile-fg: var(--lav-ink);   --tile-bg: rgba(130, 110, 255, 0.13); --tile-line: rgba(130, 110, 255, 0.26); }
:is(.block-cards, .pb-cards) > :nth-child(4n+4) .icon-tile { --tile-fg: var(--amber-ink); --tile-bg: rgba(254, 170, 6, 0.15);   --tile-line: rgba(254, 154, 6, 0.26); }

/* ---------- Contact ---------- */
.block-contact {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: clamp(24px, 3vw, 44px); align-items: start;
  padding: clamp(22px, 1rem + 2.6vw, 48px); border-radius: var(--r-xl);
  background: var(--glass-strong);
  box-shadow: var(--glass-highlight), inset 0 0 0 1px var(--line), var(--shadow-md);
}
.block-contact::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--aurora-soft); pointer-events: none; }
@media (min-width: 961px) {
  .block-contact.has-form { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.pb-contact-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pb-contact-text { display: grid; gap: 14px; }
.pb-contact-title { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); font-weight: 700; line-height: 1.2; text-wrap: balance; }
.pb-contact-title:lang(ckb), .pb-contact-title:lang(ar) { line-height: 1.5; }
.pb-contact-info .prose { font-size: var(--fs-md); }
.pb-contact-mail { margin-top: 6px; }
.pb-contact-mail .contact-link strong { font-size: 1.05rem; }
.pb-form.form-card { padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-lg); box-shadow: var(--glass-highlight), inset 0 0 0 1px var(--line), var(--shadow-sm); }
.pb-form-title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.35; margin-bottom: 18px; }
.pb-form .field textarea { min-height: 128px; }
@media (max-width: 720px) { .pb-form .form-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contents ---------- */
.block-toc {
  padding: 18px 22px; border-radius: var(--r-lg);
  background: var(--glass-strong); box-shadow: var(--glass-highlight), inset 0 0 0 1px var(--line), var(--shadow-xs);
}
.toc-title, .doc-toc-title {
  font: 600 0.8rem/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.block-toc ol { list-style: none; margin-top: 10px; display: grid; gap: 2px; counter-reset: pb-toc; }
.block-toc > ol > li { counter-increment: pb-toc; }
.block-toc a {
  display: inline-flex; gap: 10px; align-items: baseline; min-height: 44px; padding-block: 10px;
  color: var(--ink); font-weight: 500; line-height: 1.45;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}
.block-toc > ol > li > a::before { content: counter(pb-toc, decimal-leading-zero); font: 500 0.8rem/1 var(--font-mono); color: var(--accent); direction: ltr; }
.block-toc > ol > li > a:lang(ckb)::before, .block-toc > ol > li > a:lang(ar)::before { content: counter(pb-toc, arabic-indic); font-family: var(--font-kurdish); }
.block-toc a:hover { color: var(--accent); text-decoration-color: currentColor; }
.block-toc ol ol { margin: 0 0 4px; padding-inline-start: 30px; }
.block-toc ol ol a { font-weight: 400; color: var(--text); padding-block: 10px; }

/* ---------- Divider & spacer ---------- */
hr.block-divider {
  height: 1px; border: 0; margin-block: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong) 12%, var(--line-strong) 88%, transparent);
}
:is(.page-flow, .doc-body) > hr.block-divider { margin-block: clamp(20px, 1rem + 1vw, 36px); }
:is(.page-flow, .doc-body) > hr.block-divider + * { margin-top: 0; }
.block-spacer.size-s { height: 16px; }
.block-spacer.size-m { height: 40px; }
.block-spacer.size-l { height: 88px; }

/* ---------- Collections (the site's own cards) ---------- */
.block-collection { display: grid; gap: clamp(22px, 2.5vw, 36px); }
.pb-collection-head { display: grid; gap: 10px; max-width: 62ch; }
.pb-collection-head h2 { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem); font-weight: 700; line-height: 1.15; text-wrap: balance; }
.pb-collection-head h2:lang(ckb), .pb-collection-head h2:lang(ar) { line-height: 1.45; }
.pb-collection-head p { font-size: var(--fs-lg); text-wrap: pretty; }
.block-collection .past-grid { margin-top: 18px; }
/* The site's content cards reveal on scroll on the home page; here they are simply shown. */
.block-collection .reveal { opacity: 1 !important; transform: none !important; }

/* ---------- App links: store buttons and policy links ---------- */
.block-app-links { display: grid; gap: 16px; justify-items: start; }
.pb-stores { display: flex; flex-wrap: wrap; gap: 12px; }
.pb-store-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 22px 8px 16px;
  border-radius: 14px; background: #0B0F14; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent), var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pb-store-btn:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-md); }
.pb-store-btn > i { font-size: 1.65rem; width: 1.65rem; text-align: center; }
.pb-store-btn small { display: block; font: 500 0.74rem/1.2 var(--font-body); color: rgba(255, 255, 255, 0.82); }
.pb-store-btn strong { display: block; font: 700 1.12rem/1.2 var(--font-latin-display); color: #FFFFFF; letter-spacing: -0.01em; }
.pb-app-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pb-app-nav a {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink); font-weight: 500; font-size: 0.93rem;
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pb-app-nav a i { color: var(--accent); font-size: 0.9em; }
.pb-app-nav a:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.pb-app-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.pb-app-nav a[aria-current="page"] i { color: inherit; }

/* ---------- Standard template ---------- */
.page-standard .page-hero { padding-bottom: clamp(24px, 1rem + 2.4vw, 48px); }

/* ---------- Document template (policies) ---------- */
.doc-wrap { padding-bottom: var(--section-y); }
.doc-head { display: grid; gap: 16px; justify-items: start; max-width: 880px; padding-block: clamp(32px, 1.5rem + 3vw, 64px) clamp(24px, 1rem + 2vw, 40px); }
.doc-head h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); font-weight: 800; line-height: 1.1; letter-spacing: var(--tracking-display); text-wrap: balance; }
.doc-head h1:lang(ckb), .doc-head h1:lang(ar) { line-height: 1.4; }
.doc-summary { font-size: var(--fs-lg); line-height: 1.65; max-width: 64ch; text-wrap: pretty; }
.doc-summary:lang(ckb), .doc-summary:lang(ar) { line-height: 1.9; }
.doc-updated {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--line);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--text);
}
.doc-updated i { color: var(--accent); }
/* "Available in English only": a Kurdish or Arabic page whose blocks are all still
   English (page_lang_note()); the same note and look as on the legal pages. */
.doc-lang-note {
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 8px 14px; border-radius: var(--r-md);
  font-size: var(--fs-sm); line-height: 1.45;
  background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); color: var(--ink);
}
.doc-lang-note i { color: var(--accent); }
.page-hero .doc-lang-note { margin-top: 16px; }
.landing-copy .doc-lang-note { margin-top: 22px; }
@media (max-width: 720px) { .doc-lang-note { padding: 7px 12px; font-size: 0.84rem; } }
.doc-layout { display: grid; gap: 32px; align-items: start; }
.doc-body {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-width: 0; max-width: 880px;
  padding: clamp(22px, 0.6rem + 3.6vw, 56px);
  border-radius: var(--r-xl); background: var(--glass-strong);
  box-shadow: var(--glass-highlight), inset 0 0 0 1px var(--line), var(--shadow-md);
}
/* A hairline of the brand gradient along the top edge, as on the legal pages (legal.css .doc-paper). */
.doc-body::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, rgba(1, 181, 255, 0.55), rgba(169, 155, 255, 0.5) 55%, rgba(254, 202, 8, 0.55));
  opacity: 0.75; pointer-events: none;
}
.doc-body > .block-richtext, .doc-body > .block-html { font-size: 1.04rem; }
.doc-body > h2.block-heading { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem); }
.doc-body > h3.block-heading { font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem); }
.doc-body > h2.block-heading:not(:first-child) { padding-top: clamp(22px, 1rem + 0.8vw, 28px); border-top: 1px solid var(--line); }
.doc-body > .doc-toc-mobile + h2.block-heading,
.doc-body > .block-toc:first-child + h2.block-heading { padding-top: 0; border-top: 0; margin-top: 28px; }
.doc-aside { display: none; }
.doc-toc ol { list-style: none; }
.doc-toc > ol { margin-top: 12px; border-inline-start: 1px solid var(--line-strong); }
.doc-toc a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 16px; margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  color: var(--text); font-size: 0.92rem; line-height: 1.45;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.doc-toc a:hover { color: var(--ink); border-inline-start-color: var(--accent); background: var(--hover-bg); }
.doc-toc ol ol a { padding-inline-start: 30px; font-size: 0.88rem; color: var(--muted); }
.doc-toc-mobile {
  margin-bottom: 8px; border-radius: var(--r-md);
  background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line);
}
.doc-toc-mobile > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 12px 16px; border-radius: inherit;
  font-weight: 600; color: var(--ink);
}
.doc-toc-mobile > summary::-webkit-details-marker { display: none; }
.doc-toc-mobile > summary i { color: var(--muted); font-size: 0.8rem; transition: transform var(--dur) var(--ease); }
.doc-toc-mobile[open] > summary i { transform: rotate(180deg); }
.doc-toc-mobile > ol { list-style: none; padding: 0 8px 10px; }
.doc-toc-mobile > ol ol { list-style: none; padding-inline-start: 16px; }
.doc-toc-mobile a {
  display: flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: var(--r-xs);
  color: var(--text); line-height: 1.4;
}
.doc-toc-mobile a:hover { background: var(--hover-bg); color: var(--ink); }
/* From 1100px the contents sit in a sticky column at the end side of the text
   (right in English, left in Kurdish and Arabic), the same place and width as on the
   legal pages. It comes first in the source, so keyboard and screen-reader
   users meet the contents before the text, as there. */
@media (min-width: 1100px) {
  .doc-layout.has-toc { grid-template-columns: minmax(0, 1fr) 272px; column-gap: clamp(32px, 3.5vw, 56px); }
  .doc-layout.has-toc .doc-body { grid-column: 1; grid-row: 1; max-width: none; }
  .doc-layout.has-toc .doc-aside { display: block; grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--header-h) + 20px); }
  /* Room on every side for the focus ring, which the scrolling box would otherwise cut off. */
  .doc-toc {
    max-height: calc(100vh - var(--header-h) - 48px); max-height: calc(100dvh - var(--header-h) - 48px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px;
  }
  .doc-toc-title { padding-inline-start: 18px; }
  .doc-toc-mobile { display: none; }
  /* The hidden fold-out list, or a contents block the side column replaces,
     leaves no gap above the text. */
  .doc-layout.has-toc .doc-body > .doc-toc-mobile + *,
  .doc-layout.has-toc .doc-body > .block-toc:first-child + * { margin-top: 0; }
  /* The side column already lists the headings. */
  .doc-layout.has-toc .doc-body > .block-toc { display: none; }
}

/* ---------- Landing template ---------- */
/* No position here: the colour wash (.page-aurora) belongs to the page, so it runs up behind the header as on every other page. */
.landing-hero { padding-block: clamp(40px, 1.5rem + 5vw, 104px) clamp(24px, 0.5rem + 3vw, 56px); }
.landing-grid { display: grid; gap: clamp(32px, 4vw, 64px); align-items: center; }
.landing-grid:not(.has-visual) { justify-items: center; text-align: center; }
.landing-grid:not(.has-visual) .landing-copy { display: grid; justify-items: center; }
.landing-grid:not(.has-visual) .landing-actions { justify-content: center; }
@media (min-width: 961px) {
  .landing-grid.has-visual { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
.landing-title {
  font-size: var(--fs-h1); font-weight: 800; line-height: 1.05; letter-spacing: var(--tracking-display);
  text-wrap: balance; max-width: 18ch;
}
.landing-title:lang(ckb), .landing-title:lang(ar) { line-height: 1.35; }
.landing-sub { margin-top: 22px; font-size: var(--fs-lg); line-height: 1.65; max-width: 58ch; text-wrap: pretty; }
.landing-sub:lang(ckb), .landing-sub:lang(ar) { line-height: 1.9; }
.landing-actions { margin-top: 32px; }
.landing-meta { margin-top: 26px; font-size: var(--fs-sm); color: var(--muted); }
.landing-visual { position: relative; display: grid; place-items: center; min-height: clamp(240px, 26vw, 380px); isolation: isolate; }
.landing-visual::before {
  content: ""; position: absolute; inset: 6% 4%; z-index: -1; border-radius: 50%;
  background:
    radial-gradient(closest-side at 32% 38%, rgba(1, 181, 255, 0.34), transparent),
    radial-gradient(closest-side at 72% 34%, rgba(6, 255, 252, 0.26), transparent),
    radial-gradient(closest-side at 62% 78%, rgba(169, 155, 255, 0.30), transparent),
    radial-gradient(closest-side at 24% 82%, rgba(254, 202, 8, 0.18), transparent);
  filter: blur(26px);
}
.landing-orbit {
  position: absolute; width: clamp(210px, 22vw, 320px); aspect-ratio: 1; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--accent) 34%, transparent);
  animation: pb-orbit 60s linear infinite;
}
.landing-orbit.is-outer { width: clamp(270px, 29vw, 420px); border-style: solid; border-color: var(--line); animation-direction: reverse; animation-duration: 90s; }
.landing-orbit::before {
  content: ""; position: absolute; top: 12%; inset-inline-start: 8%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad-dot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-cyan) 16%, transparent);
}
.landing-orbit.is-outer::before { top: auto; bottom: 16%; inset-inline-start: auto; inset-inline-end: 4%; width: 9px; height: 9px; }
@keyframes pb-orbit { to { transform: rotate(360deg); } }
.landing-app {
  position: relative; display: grid; place-items: center; overflow: hidden;
  width: clamp(132px, 13vw, 184px); aspect-ratio: 1; border-radius: 28%;
  color: #7FE6FF; font-size: clamp(3rem, 5vw, 4.6rem);
  background: linear-gradient(150deg, var(--brand-navy-700), var(--brand-navy-900));
  box-shadow: 0 30px 60px -24px rgba(3, 16, 30, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transform: rotate(-6deg);
}
[dir="rtl"] .landing-app { transform: rotate(6deg); }
.landing-app > i { filter: drop-shadow(0 6px 16px rgba(1, 181, 255, 0.45)); }
.landing-app.has-image { background: var(--surface); }
.landing-app.has-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) {
  .landing-visual { order: -1; min-height: 0; padding-block: 12px; justify-self: start; }
  .landing-orbit, .landing-visual::before { display: none; }
  .landing-app { width: 88px; border-radius: 26%; font-size: 2.4rem; transform: none; box-shadow: 0 14px 30px -14px rgba(3, 16, 30, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
  [dir="rtl"] .landing-app { transform: none; }
}

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  .block-gallery { --cols: 2; gap: 10px; }
  .block-gallery.cols-2 { --cols: 1; }
  .block-callout { padding: 16px; gap: 12px; }
  .faq-item > summary { padding: 12px 14px; font-size: 0.98rem; }
  .faq-a { padding: 0 14px 16px; }
  .block-steps > li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .block-steps > li::before { width: 40px; height: 40px; font-size: 0.95rem; }
  .block-steps > li:not(:last-child)::after { inset-inline-start: 19px; top: 48px; }
  .step-body { padding-top: 7px; }
  .doc-body { border-radius: var(--r-lg); padding: 22px 18px 26px; }
  .draft-text { flex-basis: 100%; order: 3; }
  .block-contact { padding: 20px 16px; border-radius: var(--r-lg); }
  .pb-contact-mail .contact-link strong { font-size: 0.97rem; }
  /* Cards read as a compact list: icon, title and arrow on one line, the text below. */
  .pb-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 8px; padding: 18px; }
  .pb-card .icon-tile { margin-bottom: 0; }
  .pb-card > p, .pb-card > .pb-card-more { grid-column: 1 / -1; }
  .pb-card-go { grid-row: 1; grid-column: 3; margin-top: 0; padding-top: 0; }
  .pb-card:not(:has(> .icon-tile)) > .pb-card-title { grid-column: 1 / 3; }
  .draft-edit { margin-inline-start: 0; }
}
@media (max-width: 420px) {
  .block-gallery { --cols: 1; }
  .pb-store-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .landing-orbit { animation: none; }
  .gallery-link:hover img, .pb-store-btn:hover { transform: none; }
  .block-heading:target { animation: none; }
}

/* ---------- Print: a clean paper copy of a policy ---------- */
@media print {
  @page { margin: 16mm 14mm; }
  body { font-size: 11pt; }
  .draft-ribbon, .page-crumbs, .doc-aside, .doc-toc-mobile, .block-toc, .landing-visual,
  .pb-form, .block-spacer, .gallery-zoom, .page-aurora, .doc-body::before { display: none !important; }
  .page-flow, .doc-layout { display: block; }
  .page-flow > *, .doc-body, .doc-head { max-width: none !important; }
  .doc-head { padding-block: 0 12pt; }
  .doc-head h1, .landing-title, .page-title { font-size: 20pt; }
  .doc-updated { padding: 0; box-shadow: none; background: none; }
  .doc-body { padding: 0 !important; border-radius: 0; background: none !important; box-shadow: none !important; overflow: visible !important; }
  .doc-body > h2.block-heading:not(:first-child) { border-top: 0; padding-top: 0; }
  .block-callout, .block-contact, .faq-item, .block-toc, .pb-card { background: none !important; box-shadow: none !important; border: 1px solid #bbb; }
  .block-contact::before { display: none; }
  .block-steps > li::before { background: none; color: #000; box-shadow: inset 0 0 0 1px #000; }
  .faq-item::details-content { content-visibility: visible; display: block; }
  .pb-store-btn { background: none !important; color: #000 !important; border: 1px solid #000; box-shadow: none; }
  .pb-store-btn small, .pb-store-btn strong { color: #000 !important; }
  .block-steps > li, .block-callout, .faq-item, figure { break-inside: avoid; }
  h2.block-heading, h3.block-heading { break-after: avoid; }
  .landing-hero { padding-block: 0 16pt; }
}