/* Hallmark · macrostructure: Split Studio adapted to the approved Trust Archive
   theme: custom (bone paper, ink document boundaries, restrained gold rules)
   axes: light / roman-serif / warm
   Pre-emit critique: P5 H4 E4 S5 R4 V4. Design contract: design.md.
   Trust Archive, approved direction B, 28 September 2026.
   Shared Siddiq/Oath tokens and primitives, followed by Siddiq page layouts.
   Actual brand assets retain their original geometry and colours.
   CIEA navigation and footer keep their shared house styles. */

:root {

    --ss-paper: #F3EEE5;
    --ss-paper-2: #EDE6D3;
    --ss-paper-3: #E8E1D2;
    --ss-ink: #0F1614;
    --ss-ink-2: #3A3A32;
    --ss-rule: #85867A;
    --ss-accent: #B08A3E;
    --ss-accent-2: #C9A961;
    --ss-accent-ink: #0F1614;
    --ss-wordmark-gold: #89672B;
    --ss-focus: #0F1614;


    --ss-seal-emerald: #0F5D42;
    --ss-seal-gold: #C5A059;


    --ss-font-display: "Fraunces", "Playfair Display", Georgia, serif;
    --ss-font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ss-font-arabic:  "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;


    --ss-space-1:  4px;
    --ss-space-2:  8px;
    --ss-space-3:  12px;
    --ss-space-4:  16px;
    --ss-space-6:  24px;
    --ss-space-8:  32px;
    --ss-space-12: 48px;
    --ss-space-16: 64px;
    --ss-space-24: 96px;
    --ss-space-32: 128px;


    --ss-fs-micro:       12px;  --ss-lh-micro:       18px;
    --ss-fs-caption:     12px;  --ss-lh-caption:     18px;
    --ss-fs-body:        14px;  --ss-lh-body:        22px;
    --ss-fs-body-l:      16px;  --ss-lh-body-l:      26px;
    --ss-fs-display-m:   32px;  --ss-lh-display-m:   40px;
    --ss-fs-display-l:   56px;  --ss-lh-display-l:   60px;
    --ss-fs-display-xl:  96px;  --ss-lh-display-xl: 100px;


    --ss-tracking-caps:      0.28em;
    --ss-tracking-strapline: 0.36em;
    --ss-tracking-ciea:      0.44em;

    --ss-tracking-caps-wide: 0.32em;


    --ss-container-max: 1280px;
    --ss-container-pad: clamp(20px, 5vw, 48px);
    --ss-seam:           clamp(64px, 8vw, 96px);
    --ss-radius: 3px;
    --ss-radius-panel: 6px;
    --ss-radius-card: 8px;


    --ss-shadow-card: 0 8px 24px rgba(15, 22, 20, 0.07);


    --ss-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ss-dur-fast: 180ms;
    --ss-dur-base: 240ms;
    --ss-dur-slow: 320ms;
}

/* Shared layout and typography. */
body.ss-page {
    background: var(--ss-paper);
    color: var(--ss-ink);
    font-family: var(--ss-font-body);
    font-weight: var(--font-weight-body, 600);
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}
html:has(body.ss-page) { overflow-x: clip; }
.ss-wrap { max-width: var(--ss-container-max); margin-inline: auto; padding-inline: var(--ss-container-pad); }
.ss-section { padding-block: var(--ss-seam); scroll-margin-top: 112px; }
.ss-band { background: var(--ss-paper-2); }
.ss-headline {
    font-family: var(--ss-font-display);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.14;
    letter-spacing: -0.02em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    color: var(--ss-ink);
    min-width: 0;
}
.ss-lede { font: var(--font-weight-body, 600) 16px/1.7 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-kicker, .ss-subhead { font: var(--font-weight-body, 600) 12px/1.5 var(--ss-font-body); color: var(--ss-ink-2); letter-spacing: 0.16em; text-transform: uppercase; }
.ss-wordmark { font-family: var(--ss-font-body); font-weight: var(--font-weight-body, 600); letter-spacing: var(--ss-tracking-caps); text-transform: uppercase; }
.ss-strapline { font: var(--font-weight-body, 600) clamp(18px, 2vw, 24px)/1.5 var(--ss-font-body); color: var(--ss-ink); }
.ss-endorsement { font: var(--font-weight-body, 600) 12px/1.6 var(--ss-font-body); color: var(--ss-ink-2); letter-spacing: 0.2em; text-transform: uppercase; }
.ss-endorsement__ciea { color: var(--ss-ink); }
.ss-nowrap { white-space: nowrap; }
.ss-rule { height: 1px; background: var(--ss-rule); border: 0; }
.ss-ordinal { font: 400 32px/1.1 var(--ss-font-display); font-variant-numeric: tabular-nums; color: var(--ss-ink); }
.ss-arabic, .ss-hadith__arabic { font-family: var(--ss-font-arabic); font-weight: 400; direction: rtl; text-align: right; unicode-bidi: isolate; line-height: 1.7; }
.ss-arabic { font-size: 1.4em; }
.ss-hadith { display: flex; flex-direction: column; gap: var(--ss-space-6); }
.ss-hadith__arabic { font-size: clamp(28px, 3vw, 40px); color: var(--ss-ink); }
.ss-hadith__english { font: 400 clamp(19px, 2vw, 26px)/1.45 var(--ss-font-display); color: var(--ss-ink); }
.ss-hadith__rule { height: 1px; border: 0; background: var(--ss-accent); opacity: 0.5; }
.ss-hadith__attribution { font: var(--font-weight-body, 600) 12px/1.7 var(--ss-font-body); letter-spacing: 0.08em; color: var(--ss-ink-2); }
.ss-glyph-arabic { font-family: var(--ss-font-arabic); font-weight: 400; font-size: 1.6em; line-height: 0; letter-spacing: 0; }

/* Controls wrap naturally at narrow widths. Gold is never control text. */
.ss-button {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--ss-space-2); padding: 14px 24px; min-height: 48px; max-width: 100%;
    background: var(--ss-ink); color: var(--ss-paper); border: 1px solid var(--ss-ink);
    border-radius: var(--ss-radius); font: var(--font-weight-body, 600) 14px/1.5 var(--ss-font-body);
    text-align: center; text-decoration: none; white-space: normal; overflow-wrap: anywhere;
    cursor: pointer; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.ss-button:hover, .ss-button:active { background: var(--ss-ink-2); border-color: var(--ss-ink-2); color: var(--ss-paper); }
.ss-button--ghost { background: transparent; color: var(--ss-ink); }
.ss-button--ghost:hover, .ss-button--ghost:active { background: var(--ss-paper-2); color: var(--ss-ink); border-color: var(--ss-ink); }
.ss-button:focus-visible, .ss-text-link:focus-visible, .ss-inline-link:focus-visible,
.ss-cta-final__mailto:focus-visible, .ss-oath-preview:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 4px; }
.ss-text-link, .ss-inline-link, .ss-cta-final__mailto { color: var(--ss-ink); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.ss-text-link { font: var(--font-weight-body, 600) 14px/1.6 var(--ss-font-body); width: fit-content; }
.ss-text-link:hover, .ss-inline-link:hover, .ss-cta-final__mailto:hover { color: var(--ss-ink-2); }
.ss-card { padding: var(--ss-space-6); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-card); background: var(--ss-paper); box-shadow: var(--ss-shadow-card); }
.ss-reveal { animation: none; }

/* Native FAQ semantics retain keyboard interaction without custom scripts. */
.ss-details { border-bottom: 1px solid var(--ss-rule); }
.ss-details:last-child { border-bottom: 0; }
.ss-details summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; font: var(--font-weight-body, 600) 16px/1.6 var(--ss-font-body); color: var(--ss-ink); cursor: pointer; list-style: none; }
.ss-details summary::-webkit-details-marker { display: none; }
.ss-details summary::after { content: "+"; font: var(--font-weight-body, 600) 24px/1 var(--ss-font-body); flex: 0 0 auto; }
.ss-details[open] summary::after { content: "\2212"; }
.ss-details summary:hover { background: var(--ss-paper-2); }
.ss-details summary:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: -5px; }
.ss-details p { padding: 0 24px 24px; font: var(--font-weight-body, 600) 15px/1.75 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-marginal { display: grid; grid-template-columns: minmax(100px, 0.6fr) minmax(0, 1.4fr); gap: 24px; padding: 20px 24px; border-bottom: 1px solid var(--ss-rule); }
.ss-marginal:last-child { border-bottom: 0; }
.ss-marginal__label { font: var(--font-weight-body, 600) 12px/1.6 var(--ss-font-body); color: var(--ss-ink); }
.ss-marginal__body { font: var(--font-weight-body, 600) 14px/1.7 var(--ss-font-body); color: var(--ss-ink-2); }

/* Shared Oath component retains the canonical JSON renderer's class contract. */
.oath-block { display: flex; flex-direction: column; gap: 24px; }
.oath-block__header { display: flex; flex-direction: column; gap: 8px; }
.oath-block__kicker { font: var(--font-weight-body, 600) 12px/1.5 var(--ss-font-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ss-ink-2); }
.oath-block__title { font: 400 32px/1.25 var(--ss-font-display); color: var(--ss-ink); }
.oath-block__clauses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; margin: 0; list-style: none; }
.oath-block__clause { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; }
.oath-block__ordinal { font: var(--font-weight-body, 600) 14px/1.6 var(--ss-font-body); color: var(--ss-ink-2); }
.oath-block__text { font: var(--font-weight-body, 600) 16px/1.7 var(--ss-font-body); color: var(--ss-ink); }
.oath-block__dua { font: 400 18px/1.6 var(--ss-font-display); color: var(--ss-ink); }
.oath-block__download { width: fit-content; color: var(--ss-ink); font: var(--font-weight-body, 600) 14px/1.6 var(--ss-font-body); text-decoration: underline; text-underline-offset: 4px; }
.oath-block__download:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 4px; }

/* Siddiq page: precise document boundaries and varied reading structures. */
.ss-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.ss-split__a, .ss-split__b { min-width: 0; }
.ss-hero { padding-block: 56px 64px; }
.ss-hero__split { position: relative; z-index: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; align-items: start; }
.ss-hero__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.ss-hero__identity { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
/* Frame the delivered mark's transparent margins without altering its artwork. */
.ss-hero__mark { position: relative; display: block; width: 96px; height: 184px; overflow: hidden; }
.ss-hero__mark img { position: absolute; width: 240px; max-width: none; height: 240px; left: -72px; top: -36px; }
.ss-hero__brand .ss-headline { font-size: clamp(48px, 7.4vw, 108px); line-height: 1.04; text-wrap: initial; width: 100%; }
.ss-hero__wordmark-line { display: block; white-space: nowrap; }
.ss-hero__wordmark-line em { font-weight: inherit; color: var(--ss-wordmark-gold); }
.ss-hero__wordmark-dot { color: var(--ss-wordmark-gold); }
.ss-hero__brand .ss-strapline { margin-top: -8px; }
.ss-hero__brand .ss-lede { max-width: 48ch; }
.ss-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
/* Supplied A3 flyer composition: the delivered green seal sits large at the
   top right, inside a thin pale-gold ring about twice its width. The ring is
   anchored at its top right and bleeds left and down towards the wordmark, as
   on the flyer. The seal is inset from the ring's top right corner so it sits
   in the upper right of the circle and stays wholly inside it.
   The certificate preview is not in the hero; it appears only in #seal. */
.ss-hero__seal-figure {
    --ss-hero-seal: clamp(260px, 23vw, 340px);
    --ss-hero-seal-inset: calc(var(--ss-hero-seal) * 0.18);
    --ss-hero-ring: calc(var(--ss-hero-seal) * 2.1);
    position: relative; justify-self: end; box-sizing: content-box; width: var(--ss-hero-seal);
    margin: 0; padding: var(--ss-hero-seal-inset) var(--ss-hero-seal-inset) 0 0;
}
.ss-hero__ring { position: absolute; z-index: -1; top: 0; right: 0; box-sizing: border-box; width: var(--ss-hero-ring); height: var(--ss-hero-ring); border-radius: 50%; border: 1px solid var(--ss-accent-2); opacity: 0.65; pointer-events: none; }
.ss-hero__seal { display: block; width: 100%; height: auto; }
.ss-hero__hadith { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; row-gap: 16px; align-items: center; margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--ss-accent); }
.ss-hero__hadith .ss-hadith__arabic { grid-column: 2; grid-row: 1 / 3; }
.ss-hero__hadith .ss-hadith__english { grid-column: 1; grid-row: 1; }
.ss-hero__hadith .ss-hadith__attribution { grid-column: 1; }
.ss-hero__hadith .ss-hadith__rule { display: none; }

.ss-what__claim, .ss-what__body { display: flex; flex-direction: column; gap: 24px; }
.ss-what__body p { font: var(--font-weight-body, 600) 16px/1.75 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-what__evidence { border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-panel); padding: 32px; box-shadow: var(--ss-shadow-card); }
.ss-what__evidence .ss-subhead { font-size: 20px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--ss-ink); }
.ss-what-evidence__list { list-style: none; margin: 24px 0 0; padding: 0; }
.ss-what-evidence__item { padding-block: 24px; border-top: 1px solid var(--ss-rule); }
.ss-what-evidence__item:first-child { padding-top: 0; border-top: 0; }
.ss-what-evidence__item:last-child { padding-bottom: 0; }
.ss-what-evidence__name { font: var(--font-weight-body, 600) 16px/1.5 var(--ss-font-body); color: var(--ss-ink); }
.ss-what-evidence__body { margin-top: 8px; font: var(--font-weight-body, 600) 14px/1.7 var(--ss-font-body); color: var(--ss-ink-2); }

.ss-why__claim { max-width: 900px; margin: 0 auto 48px; text-align: center; }
.ss-why-list { border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-panel); background: var(--ss-paper); box-shadow: var(--ss-shadow-card); list-style: none; margin: 0; padding: 0; }
.ss-why-item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px; border-bottom: 1px solid var(--ss-rule); }
.ss-why-item:last-child { border-bottom: 0; }
.ss-why-item__ordinal { border-right: 1px solid var(--ss-rule); padding-right: 24px; }
.ss-why-item__body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.ss-why-item__heading { font: 400 25px/1.3 var(--ss-font-display); color: var(--ss-ink); }
.ss-why-item__text { font: var(--font-weight-body, 600) 15px/1.7 var(--ss-font-body); color: var(--ss-ink-2); }

.ss-standards__claim { max-width: 840px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 24px; }
.ss-standards__claim::after { content: ""; width: 48px; height: 2px; background: var(--ss-accent); margin: 8px auto 0; }
.ss-standards-note { font: var(--font-weight-body, 600) 14px/1.7 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-standards__evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 48px; }
.ss-citation { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px; background: var(--ss-paper-2); border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-panel); }
.ss-citation__name { font: 400 32px/1.25 var(--ss-font-display); color: var(--ss-ink); }
.ss-citation__body { font: var(--font-weight-body, 600) 15px/1.75 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-citation__links { list-style: none; margin: auto 0 0; padding: 8px 0 0; }

.ss-process__claim { max-width: 900px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 24px; }
.ss-process-note { font: var(--font-weight-body, 600) 16px/1.7 var(--ss-font-body); color: var(--ss-ink-2); max-width: 70ch; margin-inline: auto; }
.ss-process-contact { font: var(--font-weight-body, 600) 14px/1.7 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-process-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 48px 0 0; padding: 0; }
.ss-process-step { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-panel); background: var(--ss-paper); }
.ss-process-step__head { display: flex; flex-direction: column; gap: 24px; }
.ss-process-step__head .ss-ordinal { font-size: 40px; }
.ss-process-step__head .ss-ordinal::after { content: ""; display: block; margin-top: 20px; width: 32px; height: 1px; background: var(--ss-ink); }
.ss-process-step__name { font: var(--font-weight-body, 600) 18px/1.45 var(--ss-font-body); color: var(--ss-ink); }
.ss-process-step__body { font: var(--font-weight-body, 600) 14px/1.75 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-process-step__checklist { margin: 0; padding-left: 16px; list-style: disc; font: var(--font-weight-body, 600) 13px/1.8 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-process-step__meta { font: var(--font-weight-body, 600) 12px/1.7 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-process-step .ss-text-link { margin-top: auto; }

/* Client-approved certificate and seal display, without design annotations. */
.ss-seal-display { display: grid; gap: 40px; }
.ss-seal__claim { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ss-seal-close { font: 400 24px/1.4 var(--ss-font-display); color: var(--ss-ink); }
.ss-seal-figures { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 24px; align-items: stretch; }
.ss-seal-figures figure { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; margin: 0; min-width: 0; padding: 24px 16px; text-align: center; background: var(--ss-paper-2); border-radius: var(--ss-radius-panel); }
.ss-seal-figures img { width: 100%; height: auto; }
.ss-seal-figures figure:first-child img { max-width: 280px; }
.ss-seal-figures figure:last-child img { border: 1px solid var(--ss-rule); box-shadow: var(--ss-shadow-card); }
.ss-seal-figures figcaption { font: var(--font-weight-body, 600) 12px/1.6 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-seal-where { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ss-accent); }
.ss-seal-where__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.ss-seal-where__list li { padding: 8px 24px; border-left: 1px solid var(--ss-rule); font: var(--font-weight-body, 600) 15px/1.6 var(--ss-font-body); }

.ss-oath-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 64px; align-items: center; padding: 48px; border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-panel); background: var(--ss-paper); }
.ss-oath-teaser { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.ss-oath-teaser__text { font: var(--font-weight-body, 600) 16px/1.75 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-oath-preview { display: block; padding-left: 48px; border-left: 1px solid var(--ss-rule); }
.ss-oath-preview img { width: 100%; height: auto; border: 1px solid var(--ss-rule); box-shadow: var(--ss-shadow-card); }
.ss-faq-layout { display: grid; gap: 40px; }
.ss-faq-list { border: 1px solid var(--ss-ink); border-radius: var(--ss-radius-panel); }
/* FAQ 3: progressively enhance the native accordion into a reference index. */
.ss-faq-content [hidden] { display: none; }
.ss-faq-browser { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; }
.ss-faq-index { display: flex; flex-direction: column; gap: 4px; padding-right: 32px; border-right: 1px solid var(--ss-rule); }
.ss-faq-tab { display: flex; align-items: baseline; gap: 20px; width: 100%; min-height: 48px; padding: 16px; border: 0; border-left: 3px solid transparent; border-radius: var(--ss-radius); background: transparent; color: var(--ss-ink); text-align: left; font: var(--font-weight-body, 600) 15px/1.6 var(--ss-font-body); cursor: pointer; }
.ss-faq-tab:hover { background: var(--ss-paper-2); }
.ss-faq-tab[aria-selected="true"] { background: var(--ss-paper-2); border-left-color: var(--ss-ink); font-weight: var(--font-weight-body, 600); }
.ss-faq-number { flex: 0 0 auto; font: var(--font-weight-body, 600) 14px/1.6 var(--ss-font-body); color: var(--ss-ink); }
.ss-faq-answers { min-width: 0; padding: 40px; background: var(--ss-paper-2); border-radius: var(--ss-radius-panel); }
.ss-faq-answer__heading { font: 400 clamp(26px, 2.5vw, 36px)/1.25 var(--ss-font-display); color: var(--ss-ink); margin: 24px 0; }
.ss-faq-answer__heading::after { content: ""; display: block; width: 48px; height: 1px; background: var(--ss-accent); margin-top: 24px; }
.ss-faq-answer p { font: var(--font-weight-body, 600) 16px/1.8 var(--ss-font-body); color: var(--ss-ink-2); }
.ss-faq-tab:focus-visible, .ss-faq-answer:focus-visible { outline: 2px solid var(--ss-focus); outline-offset: 4px; }


.ss-ecosystem__head { max-width: 960px; margin-inline: auto; text-align: center; }
.ss-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 48px auto 0; max-width: 960px; }
.ss-pillar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; min-width: 0; padding: 40px 32px; border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-panel); background: var(--ss-paper-2); }
.ss-pillar__name { order: -1; font: 400 30px/1.3 var(--ss-font-display); color: var(--ss-ink); }
.ss-pillar__mark { width: auto; max-width: 100%; height: 144px; object-fit: contain; }
.ss-pillar__text { font: var(--font-weight-body, 600) 16px/1.7 var(--ss-font-body); color: var(--ss-ink-2); max-width: 34ch; }
.ss-pillars__cta { text-align: center; margin-top: 32px; }
.ss-cta-panel { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 64px; align-items: center; padding: 56px; border: 1px solid var(--ss-rule); border-radius: var(--ss-radius-panel); background: var(--ss-paper-2); }
.ss-cta-final { max-width: 760px; }
.ss-cta-final__line { margin-top: 24px; }
.ss-cta-final__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.ss-cta-final__mailto { font: var(--font-weight-body, 600) 15px/1.6 var(--ss-font-body); }
.ss-cta-seal { width: 100%; height: auto; }

@media (max-width: 1100px) {
    .ss-hero__split, .ss-split { gap: 40px; }
    /* Narrower columns: a slightly smaller ring keeps it clear of the lede. */
    .ss-hero__seal-figure { --ss-hero-ring: calc(var(--ss-hero-seal) * 1.9); }
    .ss-process-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .ss-process-step { padding: 32px; }
    .ss-cta-panel { gap: 32px; padding: 40px; }
    .ss-faq-answers { padding: 32px; }
}
/* Below desktop the hero stacks. The flyer's top band is kept: the mark on
   the left, the seal in its ring on the right, then the full-width wordmark,
   lede and CTAs. The wrappers become layout-transparent so their children
   share one grid; DOM and reading order are unchanged. */
@media (max-width: 1023px) {
    .ss-hero__split { grid-template-columns: auto minmax(0, 1fr); gap: 24px; }
    .ss-hero__brand, .ss-hero__identity { display: contents; }
    .ss-hero__brand > *, .ss-hero__identity > .ss-endorsement { grid-column: 1 / -1; }
    .ss-hero__identity > .ss-hero__mark { grid-column: 1; grid-row: 2; }
    .ss-hero__seal-figure { --ss-hero-seal: clamp(200px, 30vw, 272px); grid-column: 2; grid-row: 2; align-self: start; }
    .ss-hero__brand .ss-headline { font-size: clamp(48px, 9vw, 92px); }
    .ss-hero__brand .ss-strapline { margin-top: -8px; }
}
@media (max-width: 800px) {
    .ss-split, .ss-hero__hadith, .ss-standards__evidence,
    .ss-oath-panel, .ss-faq-layout { grid-template-columns: minmax(0, 1fr); }
    .ss-seal-figures figure { padding: 32px 24px; }
    .ss-seal-figures img { max-width: 280px; }
    .ss-seal-where { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .ss-seal-where__list li:first-child { border-left: 0; padding-left: 0; }
    .ss-hero { padding-top: 32px; }
    .ss-hero__brand .ss-headline { max-width: 640px; }
    .ss-hero__hadith { gap: 24px; margin-top: 40px; }
    .ss-hero__hadith .ss-hadith__arabic,
    .ss-hero__hadith .ss-hadith__english,
    .ss-hero__hadith .ss-hadith__attribution { grid-column: auto; grid-row: auto; }
    .ss-why-item { gap: 24px; padding: 24px; }
    .ss-why-item__body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .ss-citation { padding: 32px; }
    .ss-oath-panel { gap: 40px; padding: 32px; }
    .ss-oath-preview { padding-left: 0; border-left: 0; max-width: 300px; margin-inline: auto; }
    .ss-cta-panel { grid-template-columns: minmax(0, 1fr); }
    .ss-cta-seal { width: 100px; }
    .ss-pillars { gap: 24px; }
    .ss-pillar { padding: 32px 24px; }
}
@media (max-width: 540px) {
    .ss-hero__split { column-gap: 16px; row-gap: 20px; }
    .ss-hero__brand .ss-headline { font-size: clamp(40px, 12.5vw, 64px); }
    .ss-hero__mark { width: 72px; height: 136px; }
    .ss-hero__mark img { width: 176px; height: 176px; left: -52px; top: -26px; }
    .ss-hero__ctas { width: 100%; gap: 12px; }
    .ss-hero__ctas .ss-button { width: 100%; }
    /* Phones: a tighter ring (1.5 times the seal) keeps it clear of the mark. */
    .ss-hero__seal-figure { --ss-hero-seal: clamp(136px, 46vw, 220px); --ss-hero-seal-inset: calc(var(--ss-hero-seal) * 0.125); --ss-hero-ring: calc(var(--ss-hero-seal) * 1.5); }
    .ss-what__evidence, .ss-citation, .ss-process-step { padding: 24px; }
    .ss-why-item { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px 20px; align-items: start; }
    .ss-why-item__ordinal { font-size: 24px; padding-right: 12px; }
    .ss-why-item__heading { font-size: 22px; }
    .ss-process-ladder, .ss-pillars { grid-template-columns: minmax(0, 1fr); }
    .ss-process-step__head { gap: 16px; }
    .ss-marginal { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px; }
    .ss-oath-panel, .ss-cta-panel { padding: 24px; }
    .ss-seal-figures { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ss-seal-figures figure { padding: 24px; }
    .ss-seal-figures figure:first-child img { max-width: 200px; }
    .ss-seal-where__list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ss-seal-where__list li { border-left: 0; padding: 0; }
    .ss-faq-layout { gap: 32px; }
    .ss-details summary { padding: 20px; font-size: 15px; gap: 16px; }
    .ss-details p { padding: 0 20px 20px; }
    .ss-citation__name { font-size: 28px; }
    .ss-cta-final__actions { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-button { transition: none; }
}