/* GENERATED by tools/amanah-css.py from the Amanah Intelligence build.
   Do not edit; put Darul Fiqh changes in darulfiqh.css. */


/* =========================================================================
   Amanah — shared base
   Structure, typography and components common to both properties.
   Brand colour comes from the per-property theme file (advisors.css /
   intelligence.css). This file stays colour-neutral where possible and
   reads brand values from CSS variables the theme sets.
   ========================================================================= */

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl{margin:0}
ul[role="list"],ol[role="list"]{list-style:none;padding:0}
img,svg,picture{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus,currentColor);outline-offset:3px}

/* ---- Accessibility utilities ------------------------------------------ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 12px 12px;font-weight:600;transition:top .18s ease}
.skip-link:focus{top:0}

/* ---- Breadcrumbs ------------------------------------------------------- */
.crumbs{padding-top:clamp(14px,2.4vw,22px)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 .5em;font-size:var(--step--1);color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.5em;color:var(--line-strong,currentColor);opacity:.6}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.crumbs [aria-current="page"]{color:var(--fg);font-weight:600}
/* Narrow screens: keep the parent and the current page, drop the middle. */
@media(max-width:560px){
  .crumbs li:not(:nth-last-child(-n+2)){display:none}
  .crumbs li:nth-last-child(2)::before{content:"…/";margin-right:.5em}
}

/* ---- Design tokens (house layer + scale) ------------------------------ */
:root{
  /* House palette (Concept 06) */
  --yellow:#F2C400; --ink:#0A0A0A; --cream:#F7F0D4; --paper:#FFFDF2; --white:#FFFFFF;

  /* Type */
  --font-display:"Schibsted Grotesk",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,sans-serif;
  --font-wordmark:"Space Grotesk",system-ui,sans-serif;
  --font-arabic:"Noto Naskh Arabic","Geeza Pro","Segoe UI",serif;

  /* Fluid type scale */
  --step--1:clamp(.82rem,.79rem + .12vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.12rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --step-2:clamp(1.45rem,1.28rem + .9vw,1.9rem);
  --step-3:clamp(1.8rem,1.5rem + 1.5vw,2.6rem);
  --step-4:clamp(2.3rem,1.8rem + 2.6vw,3.6rem);
  --step-5:clamp(2.9rem,2.1rem + 4vw,5rem);

  /* Spacing / layout */
  --container:1180px;
  /* Verticaal ritme, twee stappen. */
  --rhythm:clamp(56px,8vw,120px); --rhythm-tight:clamp(40px,5vw,72px);
  --gutter:clamp(20px,5vw,48px);
  --radius:14px; --radius-sm:8px; --radius-lg:22px;
  /* Mastercard-style shape language: oversized pill radii */
  --radius-pill:clamp(20px,2.4vw,36px); --radius-xl:clamp(28px,3.4vw,48px);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- Base typography --------------------------------------------------- */
body{
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  color:var(--fg,var(--ink));
  background:var(--bg,var(--paper));
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.04;
  letter-spacing:-.035em;
}
/* h1 had geen maat in dit bestand: elke pagina zette hem inline, en waar dat
   vergeten was viel de kop terug op de browserstandaard van 2em. Dat was het
   verschil tussen /research/ en /articles/. Eén maat hier, uitzonderingen
   alleen waar een blok er echt om vraagt. */
h1{font-size:var(--step-4);letter-spacing:-.04em}
h3{font-weight:700;letter-spacing:-.02em;line-height:1.12}
h4{font-weight:700;letter-spacing:-.01em;line-height:1.2}
p{max-width:66ch}
strong{font-weight:600}

/* ---- Layout primitives ------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:1320px}
/* Er was een tweede maat: .container--narrow, 860px. Die is weg.

   Hij begon gecentreerd (na "text is very left aligned" in de review), werd
   daarna links uitgelijnd zodat elke pagina één linkerrand kreeg — en toen bleek
   op tablet dat het probleem aan de andere kant zat. Tussen 1024 en 1440px is
   een blok van 860px 164 tot 320px korter dan de sectie eronder, en op het forum
   liep de hele inhoud smal onder een band die wel over de volle breedte ging.
   Dat leest als een fout, niet als een keuze.

   Nu is er één maat. De leesbreedte zit waar hij hoort: op de tekst zelf, via
   p{max-width:66ch} hierboven, en op componenten die er een nodig hebben. Eén
   linkerrand, één rechterrand, op elke pagina en elke breedte. */
/* Twee stappen in het ritme: een volle sectie en een krappe. */
.section{padding-block:var(--rhythm)}
.section--tight{padding-block:var(--rhythm-tight)}
/* De afstand tússen twee secties was de optelsom van hun beide paddings, dus
   hij hing af van welk paar toevallig op elkaar volgde: 115, 124, 144 en 187px
   op dezelfde site, en drie verschillende binnen één pagina. Een afstand hoort
   bij de overgang, niet bij allebei de secties. De onderkant van de eerste
   bepaalt hem nu; de bovenkant van de volgende valt weg.

   Panelen met een eigen achtergrond doen niet mee: hun padding is geen
   tussenruimte maar de binnenmarge van een gekleurd blok. */
main > section + section:not([class*="panel--"]){padding-top:0}
/* Behalve na een gekleurde band. Die padding zat binnen de kleur, niet ertussen,
   dus zonder dit begint de volgende sectie tegen de kleurrand aan.

   Let op welke secties een band zijn: niet alleen .panel--*, ook de hero's. Die
   heten anders, vielen daardoor eerst buiten deze uitzondering, en op de
   homepage plakte "Pick a subject" tegen de onderrand van het paarse blok.

   Na een hero de volle maat, want dat is de opening van de pagina; na een band
   halverwege de krappe. Twee banden op elkaar raken elkaar wel, met opzet. */
main > :is(.hw-hero,.section-hero) + section:not([class*="panel--"]){padding-top:var(--rhythm)}
main > section[class*="panel--"] + section:not([class*="panel--"]){padding-top:var(--rhythm-tight)}
/* De kop van een pagina staat direct onder het kruimelpad en heeft daar maar
   een kleine aanloop nodig. Zijn ondermarge komt van .section of
   .section--tight, en die bepaalt de afstand tot wat eronder staat. */
.section--head{padding-top:clamp(16px,2.5vw,28px)}
/* Twee secties die bij elkaar horen: een filterrij boven zijn eigen lijst, een
   kop boven zijn eigen tabel. Geen tussenruimte, met opzet. */
.section--joined{padding-bottom:0}
.stack>*+*{margin-top:1.1em}
.grid{display:grid;gap:clamp(20px,3vw,40px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
/* Between 900 and 1100 a three-up row leaves each card about 260px wide, which
   turns a paragraph into a ribbon four words across. Drop to two. */
@media(min-width:901px) and (max-width:1100px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
/* A row of cards that follows a heading or a standfirst needs air. Without it
   the top edge of the first card sits against the last line of the text, and a
   card that touches its introduction reads as part of it. */
:is(h1,h2,h3,p) + :is(.grid,.rail,.cats,.answers,.hw-answers){margin-top:clamp(22px,3vw,34px)}
/* And inside a card the body has to clear the heading. Most cards set this
   inline, which is why the ones that forgot read as a single wall of text. */
.card h3 + p,.card h4 + p{margin-top:.55em}

/* No eyebrow class here on purpose. A small uppercase label above a heading is
   not used on this site: the heading carries the meaning, or the second thought
   goes below it as a standfirst. Removed rather than left available. */

.display{font-size:var(--step-5);letter-spacing:-.045em}
.h-lead{font-size:var(--step-4)}
.h-sec{font-size:var(--step-3)}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--muted)}

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  --_bg:var(--btn-bg,var(--ink));
  --_fg:var(--btn-fg,var(--white));
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);font-weight:600;font-size:var(--step-0);
  line-height:1;letter-spacing:-.01em;
  padding:.72em 1.25em;border:1px solid transparent;border-radius:999px;
  background:var(--_bg);color:var(--_fg);cursor:pointer;
  transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease),opacity .2s;
}
.btn:hover{transform:translateY(-1px)}
.btn .arw{transition:transform .2s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn--ghost{--_bg:transparent;--_fg:var(--fg);border-color:var(--line,rgba(0,0,0,.2))}
.btn--ghost:hover{border-color:var(--fg)}
.btn--lg{padding:.86em 1.4em;font-size:var(--step-0)}
.btn--sm{padding:.6em 1em;font-size:var(--step--1)}
/* Light + glass variants (hero over imagery) */
.btn--light{--_bg:#F7F7F7;--_fg:#0C0C0C}
.btn--light:hover{--_bg:#fff}
.btn--glass{--_bg:rgba(255,255,255,.1);--_fg:#fff;border-color:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--glass:hover{--_bg:rgba(255,255,255,.22);border-color:#fff}
/* Soft grey fill (N26-style secondary) */
.btn--soft{--_bg:#F0EFEA;--_fg:var(--ink)}
.btn--soft:hover{--_bg:#E7E6E0}

/* ---- Site header / nav ------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg,var(--bg));border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
/* Logo lockup — wordmark is Space Grotesk 600 (per design system) */
/* Lockup proportions per design-system lock(): gap .36×size, emblem 1.04×size,
   wordmark .94×size, desc margin-left .3em. Expressed relative to wordmark. */
.brand{display:inline-flex;align-items:center;gap:.383em;font-family:var(--font-wordmark);font-weight:600;font-size:1.5rem;letter-spacing:-.02em}
.brand .emblem{height:1.06em;width:auto;flex:none;transform:translateY(.055em)}
/* Sub-brand descriptor: bound tight to "Amanah" (per design system) */
.brand .sub{font-weight:500;letter-spacing:-.02em;margin-left:-.15em;color:var(--sub-color,currentColor)}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{font-weight:500;font-size:.98rem;color:var(--muted);transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fg)}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle svg{width:24px;height:24px}
@media(max-width:1080px){
  .nav-links,.nav-actions .btn--ghost{display:none}
  .nav-toggle{display:inline-flex}
}

/* ---- The floating nav pill --------------------------------------------- */
/* ONE spec, both platforms. This block used to be duplicated in advisors.css
   and intelligence.css, which is how the two menus drifted apart: Intelligence
   had picked up a wider max-width, a smaller link size and a tighter gap.
   Themes may override COLOUR below this point. Nothing else. */
.site-header{background:transparent;border-bottom:0;padding-block:16px}
.site-header .nav{
  display:grid;grid-template-columns:1fr auto 1fr;column-gap:clamp(24px,3vw,48px);align-items:center;
  max-width:var(--container);
  height:auto;min-height:70px;
  padding:10px 18px 10px 28px;
  background:var(--nav-pill-bg,rgba(255,255,255,.82));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--nav-pill-line,rgba(0,0,0,.07));
  border-radius:999px;
  box-shadow:0 18px 44px -26px var(--nav-pill-shadow,rgba(10,10,10,.45));
  transition:box-shadow .28s var(--ease);
}
.site-header .brand{grid-column:1;justify-self:start;font-size:1.5rem}
.primary-nav{grid-column:2;display:flex;justify-content:center}
.primary-nav .nav-links{gap:clamp(22px,2.6vw,38px)}
.site-header .nav-links a{font-size:1.04rem;opacity:.82}
.site-header .nav-links a:hover,.site-header .nav-links a[aria-current]{opacity:1}
.site-header .nav-actions{grid-column:3;justify-self:end}
@media(max-width:1080px){
  .primary-nav{display:none}
  .site-header .nav{padding-left:22px;min-height:62px}
  .site-header .nav-actions a.btn{display:none}
  /* Solid white and locked once the menu opens */
  body.menu-open .site-header .nav{
    background-color:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    box-shadow:none;
  }
  /* Scrolled state, MOBILE ONLY — on desktop the pill always floats. Moved with
     a transform, not padding: changing the header's height would shift the page
     and bounce the scroll position across the threshold, flickering the bar. */
  .site-header[data-stuck] .nav{
    transform:translateY(-16px);
    max-width:none;
    background-color:#fff;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-color:transparent;
    border-radius:0 0 var(--radius-xl) var(--radius-xl);
    box-shadow:0 10px 30px -20px var(--nav-pill-shadow,rgba(10,10,10,.45));
  }
}
/* Mobile nav panel */
[data-mobile-nav]:not(.mobile-menu):not(.mm){display:none;border-top:1px solid var(--line,rgba(0,0,0,.08));background:var(--header-bg,var(--bg))}
[data-mobile-nav]:not(.mobile-menu):not(.mm)[data-open]{display:block}
[data-mobile-nav]:not(.mobile-menu):not(.mm) ul{list-style:none;margin:0;padding:16px var(--gutter) 22px;display:grid;gap:4px}
[data-mobile-nav]:not(.mobile-menu):not(.mm) a{display:block;padding:12px 4px;font-size:1.05rem;font-weight:500;border-bottom:1px solid var(--line,rgba(0,0,0,.06))}
[data-mobile-nav]:not(.mobile-menu):not(.mm) .btn{margin-top:14px}
@media(min-width:1081px){[data-mobile-nav]{display:none!important}}

/* ---- Footer ------------------------------------------------------------ */
.site-footer{background:var(--footer-bg,var(--ink));color:var(--footer-fg,rgba(255,255,255,.72));padding-block:clamp(48px,6vw,80px) 40px}
.site-footer a{color:inherit;opacity:.8}
.site-footer a:hover{opacity:1}
/* minmax(0,…) throughout: a plain 1fr floors at min-content, and the email
   address in the last column is one unbreakable word — enough to pull that
   track wide and squash the others on a narrow screen. */
.footer-top{display:grid;grid-template-columns:1.4fr minmax(0,1fr) minmax(0,1fr) 1.35fr;gap:40px}
/* `break-word`, paired with a <wbr> after the "@" in the email addresses:
   the wbr gives the line breaker a sensible place to split, and break-word
   only falls back to an arbitrary break if a segment still cannot fit. */
.footer-col ul{overflow-wrap:break-word}
/* Advisors' Services list is twice as long as its neighbours, so that footer
   gets a fifth track and runs the list in two sub-columns — all three lists
   end up a similar height instead of leaving a hole under the short one.
   Intelligence has no --wide column and keeps the plain four-track grid.
   Without :has() support this rule is skipped and the footer stays four
   even columns, which is the layout it had before. */
/* Last track runs wider so the email address sits on one line on desktop. */
.footer-top:has(.footer-col--wide){grid-template-columns:1.5fr repeat(3,minmax(0,1fr)) 1.3fr}
.footer-top:has(.footer-col--wide) .footer-col--wide{grid-column:span 2}
.footer-top:has(.footer-col--wide) .footer-col--wide ul{grid-template-columns:1fr 1fr;column-gap:24px}
/* The brand block goes full width once the columns get narrow, so the link
   lists keep two columns instead of collapsing into one very long stack. */
@media(max-width:1000px){
  .footer-top,
  .footer-top:has(.footer-col--wide){grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
  .footer-brand{grid-column:1/-1;padding-right:0}
  .footer-top:has(.footer-col--wide) .footer-col--wide{grid-column:span 2}
}
@media(max-width:620px){
  .footer-top,
  .footer-top:has(.footer-col--wide){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 20px}
  .footer-top:has(.footer-col--wide) .footer-col--wide{grid-column:1/-1}
  /* Intelligence has three link columns, so the last one lands alone on its
     row and the email breaks mid-word in half a column. Give it the row.
     Advisors' last column shares a row with Firm, so it stays put. */
  .footer-top:not(:has(.footer-col--wide)) .footer-col:last-child{grid-column:1/-1}
  .footer-col ul{font-size:.9rem}
}
.footer-col h4{font-family:var(--font-body);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--footer-head,inherit);margin-bottom:16px}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.96rem}
.footer-brand{padding-right:clamp(20px,2.2vw,40px)}
.footer-brand p{opacity:.7;font-size:.96rem;margin-top:14px;max-width:34ch}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:.85rem;opacity:.6}
@media(max-width:620px){
  .site-footer{padding-block:clamp(40px,8vw,56px) 28px}
  .footer-bottom{margin-top:36px;gap:8px;flex-direction:column;text-align:left}
}

/* ---- Cards / shared bits ---------------------------------------------- */
.card{background:var(--card,var(--white));border:1px solid var(--line,rgba(0,0,0,.08));border-radius:var(--radius);padding:clamp(22px,3vw,34px);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-3px)}
.tag{display:inline-block;font-size:var(--step--1);font-weight:600;letter-spacing:.02em;padding:.35em .8em;border-radius:999px;background:var(--tag-bg,rgba(0,0,0,.06));color:var(--tag-fg,inherit)}

/* Image slot */
.imgph{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--imgph-bg,linear-gradient(135deg,#e9e4d0,#cfc8ad));display:flex;align-items:flex-end}
.imgph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.imgph[data-label]::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.45);background:rgba(255,255,255,.55);padding:.35em .7em;border-radius:6px;backdrop-filter:blur(2px)}
.imgph[data-dark][data-label]::after{color:rgba(255,255,255,.7);background:rgba(0,0,0,.35)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.btn:hover{transform:none}}

/* =========================================================================
   Mastercard-style form language (colour-neutral; themed per property)
   Shapes only: oversized pills, circle pills, staggered columns, keylines,
   rounded section boxes and a dependency-free carousel.
   ========================================================================= */

/* ---- Section intro (big uppercase pretitle + display title + CTA) ------ */
.section-intro{max-width:52ch}
.section-intro h2{font-size:var(--step-4);letter-spacing:-.04em;line-height:1.05}
.section-intro p{color:var(--muted);margin-top:16px;font-size:var(--step-1);line-height:1.5;max-width:46ch}
.section-intro .btn,.section-intro .more{margin-top:26px}
.section-intro--center{margin-inline:auto;text-align:center}
.section-intro--center p{margin-inline:auto}

/* ---- Pill teaser cards (the signature shape) --------------------------- */
.pill-card{display:flex;flex-direction:column;color:inherit}
.pill-card .imgph{border-radius:var(--radius-xl);aspect-ratio:1/1;margin-bottom:18px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pill-card:hover .imgph{transform:translateY(-4px);box-shadow:0 30px 60px -34px rgba(10,10,10,.55)}
.pill-card .k{display:block;font-size:var(--step--1);font-weight:600;letter-spacing:.02em;color:var(--accent,var(--muted));margin-bottom:6px}
.pill-card h3{font-size:var(--step-1);letter-spacing:-.02em}
.pill-card p{color:var(--muted);font-size:var(--step--1);margin-top:8px}
.pill-card__link{margin-top:12px;font-weight:600;color:var(--accent,inherit);display:inline-flex;gap:.5em;align-items:center}
.pill-card__link .arw{transition:transform .2s var(--ease)}
.pill-card:hover .pill-card__link .arw{transform:translateX(4px)}
/* tall (9:16) and circle (1:1 masked round) variants */
.pill-card--tall .imgph{aspect-ratio:9/16;border-radius:var(--radius-pill)}
.pill-card--circle .imgph{aspect-ratio:1/1;border-radius:50%}

/* ---- Circle keyline (decorative gold ring around a circle pill) -------- */
.circle-keyline{position:relative}
.circle-keyline::before{content:"";position:absolute;z-index:0;border:1px solid var(--keyline,var(--line));border-radius:50%;width:118%;padding-bottom:118%;top:-9%;pointer-events:none}
.circle-keyline--left::before{left:-9%}
.circle-keyline--right::before{right:-9%}
.circle-keyline>*{position:relative;z-index:1}
@media(max-width:820px){.circle-keyline::before{display:none}}

/* ---- Staggered columns (alternating vertical offset) ------------------- */
.stagger-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.stagger-grid>*:nth-child(even){margin-top:clamp(40px,7vw,110px)}
@media(max-width:820px){.stagger-grid{grid-template-columns:1fr;gap:36px}.stagger-grid>*:nth-child(even){margin-top:0}}
.stagger-col{display:grid;gap:clamp(28px,4vw,56px)}

/* ---- Rounded section "box" (Mastercard white/circle box) --------------- */
.box{border-radius:var(--radius-xl);padding:clamp(28px,5vw,72px)}
.box--pad-lg{padding:clamp(40px,6vw,96px)}

/* ---- Carousel (vanilla; JS in app.js) ---------------------------------- */
.carousel{position:relative}
.carousel__viewport{overflow:hidden;border-radius:var(--radius-xl)}
.carousel__track{display:flex;transition:transform .6s var(--ease)}
.carousel__slide{flex:0 0 100%;min-width:0}
/* height:100% is wat elke foto laat passen. De slides zijn flex-items en
   krijgen allemaal de hoogte van de langste; zonder dit bleef de inhoud op zijn
   eigen hoogte staan en hield je onder een korte slide een wit vlak over, met
   het beeld dat maar een deel van de kaart vulde. Nu vult de mediakolom altijd
   de hele hoogte en snijdt object-fit:cover de foto bij, staand of liggend. */
.carousel__slide a,.carousel__slide .slide-inner{display:grid;grid-template-columns:1.15fr .85fr;min-height:clamp(280px,34vw,440px);height:100%;color:inherit}
@media(max-width:760px){.carousel__slide a,.carousel__slide .slide-inner{grid-template-columns:1fr}}
.carousel__media{position:relative;overflow:hidden}
.carousel__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carousel__body{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:clamp(28px,4vw,56px)}
.carousel__body .k{font-size:var(--step--1);font-weight:600;letter-spacing:.02em;color:var(--accent,var(--muted))}
.carousel__body h3{font-size:var(--step-3);letter-spacing:-.03em;line-height:1.06}
.carousel__body p{color:var(--muted);max-width:40ch}
.carousel__body .more{margin-top:6px;font-weight:600;color:var(--accent,inherit);display:inline-flex;gap:.5em;align-items:center}
/* controls */
.carousel__controls{display:flex;align-items:center;gap:16px;margin-top:22px}
.carousel__dots{display:flex;gap:10px;flex:1;flex-wrap:wrap}
.carousel__dot{appearance:none;border:0;cursor:pointer;height:4px;width:38px;border-radius:999px;background:var(--line);padding:0;transition:background .25s var(--ease)}
.carousel__dot[aria-selected="true"]{background:var(--accent,var(--fg))}
.carousel__nav{display:inline-flex;gap:8px}
.carousel__btn{appearance:none;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--fg);display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s var(--ease),background .2s var(--ease)}
.carousel__btn:hover{border-color:var(--fg)}
.carousel__btn svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.carousel__track{transition:none}.pill-card .imgph{transition:none}}

/* =========================================================================
   Monzo-style component language (colour-neutral; themed per property)
   Full-bleed hero carousel · "Tell me about" product-nav · tabbed carousel
   · feature-switch crossfade · draggable flashcard deck.
   ========================================================================= */

/* ---- Full-bleed hero carousel ------------------------------------------ */
.hero-carousel{position:relative;border-radius:var(--radius-xl);overflow:hidden}
.hero-carousel .carousel__viewport{border-radius:var(--radius-xl)}
.hero-carousel .carousel__slide{position:relative;display:block}
.hero-slide{position:relative;min-height:clamp(440px,62vh,640px);display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero-slide>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.15) 0%,rgba(10,10,10,.35) 45%,rgba(10,10,10,.86) 100%)}
.hero-slide__body{position:relative;z-index:2;padding:clamp(28px,5vw,64px);max-width:640px}
.hero-slide__body h2{font-size:var(--step-4);letter-spacing:-.04em;line-height:1.03;margin-bottom:16px}
.hero-slide__body p{color:rgba(255,255,255,.86);font-size:var(--step-1);line-height:1.45;max-width:42ch;margin-bottom:26px}
/* hero slides aren't link-grids: neutralise the generic .carousel__slide a rule */
.hero-slide a.btn{display:inline-flex;grid-template-columns:none;min-height:0}
.hero-badges{position:absolute;z-index:2;right:clamp(20px,4vw,44px);bottom:clamp(20px,4vw,44px);display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;max-width:52%}
.hero-badge{display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em;border-radius:999px;font-size:var(--step--1);font-weight:600;letter-spacing:.01em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(3px)}
.hero-badge::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--hero-badge-dot,#fff)}
@media(max-width:640px){.hero-badges{display:none}.hero-slide__body{padding-bottom:clamp(40px,10vw,56px)}}
/* place controls over the image, bottom-left */
.hero-carousel .carousel__controls{position:absolute;z-index:3;left:clamp(28px,5vw,64px);bottom:clamp(20px,4vw,40px);right:auto;margin:0;width:min(360px,60%)}
.hero-carousel .carousel__dot{background:rgba(255,255,255,.4)}
.hero-carousel .carousel__dot[aria-selected="true"]{background:#fff}
.hero-carousel .carousel__btn{border-color:rgba(255,255,255,.5);color:#fff}
.hero-carousel .carousel__btn:hover{border-color:#fff;background:rgba(255,255,255,.12)}
@media(max-width:640px){.hero-carousel .carousel__controls{position:static;width:100%;padding:16px var(--gutter);background:var(--ink)}}

/* ---- "Tell me about" product-nav (hover reveal) ------------------------ */
.prodnav{border-top:1px solid var(--line)}
.prodnav__row{position:relative;display:flex;align-items:center;gap:16px;padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--line);color:inherit;overflow:hidden}
.prodnav__chev{flex:none;width:26px;color:var(--accent,currentColor);opacity:0;transform:translateX(-16px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.prodnav__chev svg{width:26px;height:26px;display:block}
.prodnav__label{font-family:var(--font-display);font-weight:700;font-size:var(--step-2);letter-spacing:-.025em;transition:transform .25s var(--ease);flex:1;min-width:0}
.prodnav__meta{color:var(--muted);font-size:var(--step--1);margin-right:auto;padding-left:4px;display:none}
.prodnav__icon{flex:none;width:clamp(40px,5vw,58px);height:clamp(40px,5vw,58px);border-radius:50%;display:grid;place-items:center;background:var(--prodnav-icon-bg,rgba(0,0,0,.05));color:var(--accent,currentColor);opacity:0;transform:translateX(18px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.prodnav__icon svg{width:52%;height:52%}
.prodnav__row:hover,.prodnav__row:focus-visible{color:var(--fg)}
.prodnav__row:hover .prodnav__chev,.prodnav__row:focus-visible .prodnav__chev{opacity:1;transform:none}
.prodnav__row:hover .prodnav__label,.prodnav__row:focus-visible .prodnav__label{transform:translateX(6px)}
.prodnav__row:hover .prodnav__icon,.prodnav__row:focus-visible .prodnav__icon{opacity:1;transform:none}
@media(min-width:640px){.prodnav__meta{display:block;flex:0 0 auto;max-width:34ch;text-align:right}}
@media(prefers-reduced-motion:reduce){.prodnav__chev,.prodnav__label,.prodnav__icon{transition:none}.prodnav__chev,.prodnav__icon{opacity:1;transform:none}}

/* ---- Tabbed carousel (tabs + horizontal card row) ---------------------- */
.tabcx__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 clamp(24px,3vw,36px)}
.tabcx__tab{appearance:none;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:var(--step--1);padding:.5em 1.05em;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);transition:.2s var(--ease)}
.tabcx__tab[aria-selected="true"]{background:var(--tabcx-active-bg,var(--ink));color:var(--tabcx-active-fg,var(--paper));border-color:transparent}
.tabcx__panel[hidden]{display:none}
.tabcx__row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:clamp(16px,2vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:calc(-1*var(--gutter));padding-right:var(--gutter);scrollbar-width:thin}
@media(min-width:1000px){.tabcx__row{grid-auto-columns:1fr;overflow:visible;margin-right:0;padding-right:0}}
.tabcx__card{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(340px,44vw,440px);border-radius:var(--radius-xl);overflow:hidden;color:#fff;isolation:isolate}
.tabcx__card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tabcx__card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,0) 30%,rgba(10,10,10,.82) 100%)}
.tabcx__card__body{position:relative;z-index:2;padding:clamp(20px,2.4vw,28px)}
.tabcx__card .k{display:block;font-size:var(--step--1);font-weight:600;letter-spacing:.02em;color:var(--card-k,rgba(255,255,255,.82));margin-bottom:8px}
.tabcx__card h3{font-size:var(--step-1);letter-spacing:-.02em}
.tabcx__card p{color:rgba(255,255,255,.82);font-size:var(--step--1);margin-top:8px;max-width:36ch}
.tabcx__hint{position:absolute;z-index:2;right:clamp(16px,2vw,22px);bottom:clamp(16px,2vw,22px);width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.85);display:grid;place-items:center;transition:transform .25s var(--ease),background .25s var(--ease)}
.tabcx__hint svg{width:16px;height:16px;color:#fff}
.tabcx__card:hover .tabcx__hint{background:rgba(255,255,255,.16);transform:translateX(3px)}

/* ---- Feature-switch crossfade (Monzo PhoneCarousel analog) ------------- */
.fswitch{display:grid;grid-template-columns:1fr minmax(280px,360px) 1fr;gap:clamp(20px,3vw,40px);align-items:center}
@media(max-width:960px){.fswitch{grid-template-columns:1fr}}
.fswitch__col{display:flex;flex-direction:column;gap:14px}
.fswitch__frame{position:relative;border-radius:var(--radius-xl);overflow:hidden;aspect-ratio:4/5;background:var(--imgph-bg)}
@media(max-width:960px){.fswitch__frame{order:-1;max-width:420px;margin-inline:auto;width:100%}.fswitch__col--right{order:1}.fswitch .fswitch__dots{display:none}.fswitch .fswitch__toggle p{max-height:8em;opacity:1;margin-top:6px}}
.fswitch__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease);z-index:0}
.fswitch__img[data-active]{opacity:1;z-index:1}
.fswitch__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,0) 55%,rgba(10,10,10,.28) 100%)}
.fswitch__toggle{appearance:none;text-align:left;cursor:pointer;border:1px solid var(--line);background:var(--card,#fff);color:inherit;border-radius:var(--radius);padding:clamp(16px,2vw,20px);transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.fswitch__toggle:hover{transform:translateY(-2px)}
.fswitch__toggle[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 18px 40px -30px rgba(10,10,10,.5)}
.fswitch__toggle .step-n{display:inline-flex;align-items:center;justify-content:center;width:1.9em;height:1.9em;border-radius:50%;font-family:var(--font-display);font-weight:800;font-size:.9rem;background:var(--fswitch-n-bg,rgba(0,0,0,.06));color:var(--accent);margin-bottom:10px}
.fswitch__toggle[aria-pressed="true"] .step-n{background:var(--accent);color:var(--fswitch-n-on,#fff)}
.fswitch__toggle h3{font-size:var(--step-1);letter-spacing:-.02em}
.fswitch__toggle p{color:var(--muted);font-size:var(--step--1);margin-top:6px;max-width:38ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--ease),opacity .3s var(--ease),margin-top .3s var(--ease)}
.fswitch__toggle[aria-pressed="true"] p{max-height:8em;opacity:1}
.fswitch__dots{display:flex;gap:8px;justify-content:center;margin-top:24px}
.fswitch__dot{appearance:none;border:0;cursor:pointer;width:34px;height:4px;border-radius:999px;background:var(--line);padding:0;transition:background .25s var(--ease)}
.fswitch__dot[aria-selected="true"]{background:var(--accent)}
@media(prefers-reduced-motion:reduce){.fswitch__img{transition:none}.fswitch__toggle p{transition:none}}

/* ---- Draggable flashcard deck ------------------------------------------ */
.deck{position:relative;width:min(420px,100%);margin-inline:auto;aspect-ratio:5/6;touch-action:pan-y}
.deck__card{position:absolute;inset:0;border-radius:var(--radius-xl);padding:clamp(24px,4vw,38px);display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 30px 60px -40px rgba(10,10,10,.6);will-change:transform;user-select:none}
.deck__card[data-top]{cursor:grab}
.deck__card[data-top]:active{cursor:grabbing}
.deck__card .k{font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.7}
.deck__card b{font-family:var(--font-display);font-weight:800;font-size:var(--step-4);letter-spacing:-.04em;line-height:1;display:block}
.deck__card p{font-size:var(--step-0);line-height:1.4}
.deck__hint{text-align:center;margin-top:18px;font-size:var(--step--1);color:var(--muted)}
@media(prefers-reduced-motion:reduce){.deck__card{transition:none}}

/* =========================================================================
   Nav panels (N26-style dropdowns) — desktop
   Pure CSS open on hover/focus-within; themed via existing vars.
   ========================================================================= */
.nav-item{position:relative}
.primary-nav .nav-links>li.nav-item{display:flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:6px}
.nav-item.has-panel>a::after{content:"";width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .18s var(--ease)}
.nav-item.has-panel:hover>a::after,.nav-item.has-panel:focus-within>a::after{transform:rotate(225deg) translateY(-1px)}
.nav-panel{
  position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);
  min-width:560px;background:var(--card,#fff);border:1px solid var(--line,rgba(0,0,0,.08));
  border-radius:var(--radius-lg);box-shadow:0 30px 70px -30px rgba(0,0,0,.35);
  padding:26px 28px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s var(--ease),transform .18s var(--ease);z-index:80}
.nav-item.has-panel:hover .nav-panel,.nav-item.has-panel:focus-within .nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* Never two at once. Three things can open a panel — hover, focus and the click
   toggle — and nothing stopped them overlapping: click Articles, hover The Orbit,
   and both hung there on top of each other. A hovered item now wins outright, so
   whatever was left open by a click or by focus closes as the pointer arrives. */
.nav-links:has(.nav-item.has-panel:hover) .nav-item.has-panel:not(:hover) .nav-panel{
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,8px)
}
.nav-panel--slim{min-width:420px;grid-template-columns:1fr 1fr}
.nav-panel__label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.nav-panel__hl{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--radius);transition:background .15s}
.nav-panel__hl:hover{background:var(--tag-bg,rgba(0,0,0,.05))}
.nav-panel__hl+.nav-panel__hl{margin-top:6px}
.nav-panel__thumb{flex:none;width:52px;height:52px;border-radius:12px;background-size:cover;background-position:center;background-color:var(--tag-bg,rgba(0,0,0,.08))}
.nav-panel__hl b{display:block;font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.nav-panel__hl small{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}
.nav-panel__links{display:flex;flex-direction:column;gap:2px}
.nav-panel__links a{padding:7px 10px;border-radius:10px;font-size:.95rem;color:var(--fg);transition:background .15s}
.nav-panel__links a:hover{background:var(--tag-bg,rgba(0,0,0,.05))}
.nav-panel__links a.more-link{color:var(--muted)}
@media(max-width:1080px){.nav-panel{display:none}}

/* =========================================================================
   N26-style fullscreen mobile menu with accordion sections
   ========================================================================= */
.mm{position:fixed;inset:0;z-index:90;background:var(--bg,#fff);display:none;flex-direction:column}
.mm[data-open]{display:flex}
body.menu-open{overflow:hidden}
.mm__bar{display:flex;align-items:center;justify-content:space-between;padding:18px var(--gutter);border-bottom:1px solid var(--line,rgba(0,0,0,.08))}
.mm__close{background:none;border:0;padding:8px;cursor:pointer;color:var(--fg)}
.mm__close svg{width:26px;height:26px}
.mm__scroll{flex:1;overflow-y:auto;padding:10px var(--gutter) 20px}
.mm__row,.mm__acc>button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:18px 6px;background:none;border:0;border-bottom:1px solid var(--line,rgba(0,0,0,.06));
  font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;
  color:var(--fg);text-align:left;cursor:pointer}
.mm__chev{flex:none;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);opacity:.5;transition:transform .18s var(--ease)}
.mm__acc>button[aria-expanded="true"] .mm__chev{transform:rotate(45deg)}
.mm__acc>button[aria-expanded="true"]{background:var(--tag-bg,rgba(0,0,0,.04));border-radius:var(--radius) var(--radius) 0 0;padding-inline:14px}
.mm__panel{display:none;padding:6px 14px 18px;background:var(--tag-bg,rgba(0,0,0,.04));border-radius:0 0 var(--radius) var(--radius);margin-bottom:6px}
.mm__acc>button[aria-expanded="true"]+.mm__panel{display:block}
.mm__panel .nav-panel__label{margin:14px 0 10px}
.mm__panel .nav-panel__hl{padding:8px 6px}
.mm__panel .nav-panel__links a{padding:9px 6px;font-size:1rem}
.mm__cta{padding:14px var(--gutter) calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line,rgba(0,0,0,.08));display:flex;flex-direction:column;gap:10px}
.mm__cta .btn{width:100%;justify-content:center;text-align:center}
@media(min-width:1081px){.mm{display:none!important}}

/* Click-toggled state for nav panels (set by app.js) */
.nav-item.has-panel.open .nav-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav-item.has-panel.open>a::after{transform:rotate(225deg) translateY(-1px)}

/* Hover bridge: keeps the dropdown open while the cursor crosses the gap
   between the nav link and its panel (the panel floats 18px below). */
.nav-item.has-panel{position:relative}
.nav-item.has-panel:hover::before{content:"";position:absolute;left:-14px;right:-14px;top:100%;height:36px}

/* Section head — promoted from page-local styles (used on nearly every page;
   pages that lacked the rule had headings touching the content below). */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(28px,4vw,44px)}
.sec-head h2{max-width:20ch}
.sec-head a.more{font-weight:600;white-space:nowrap;color:var(--accent,currentColor)}


/* Hamburger morphs to X in place; header stays on top of the open menu */
.nav-toggle{position:relative}
.nav-toggle .ico{display:block}
.nav-toggle .ico--close{display:none}
.nav-toggle[aria-expanded="true"] .ico--menu{display:none}
.nav-toggle[aria-expanded="true"] .ico--close{display:block}
.site-header{z-index:60}
.site-header .nav{position:relative;z-index:70}
.mm{z-index:50}
.mm__scroll{padding-top:96px}


/* Section headings need breathing room from the content that follows.
   (.sec-head already carries the spacing on its wrapper.) */
.h-sec{margin-bottom:clamp(20px,3vw,32px)}
.sec-head .h-sec,.sec-head h2{margin-bottom:0}

/* Sub-headings that sit directly on a card grid */
h3 + .answers{margin-top:18px}
h3 + .member-row{margin-top:16px}

/* ---- Cookie consent ---------------------------------------------------- */
.cookiebar{
  position:fixed;left:var(--gutter);right:var(--gutter);bottom:16px;z-index:180;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:var(--ink);color:rgba(255,255,255,.82);
  border-radius:var(--radius-lg);padding:18px 22px;
  box-shadow:0 24px 60px -30px rgba(10,10,10,.7);
  animation:cookiebar-in .35s var(--ease) both;
}
.cookiebar p{margin:0;max-width:70ch;font-size:var(--step--1);line-height:1.55}
.cookiebar a{color:#fff;text-decoration:underline}
.cookiebar__btns{display:flex;gap:10px;flex-wrap:wrap}
/* The bar is always on ink, so both buttons set --_bg/--_fg directly —
   .btn--ghost resolves those itself and would ignore --btn-bg/--btn-fg. */
.cookiebar .btn{--_bg:#fff;--_fg:var(--ink)}
.cookiebar .btn--ghost{--_bg:transparent;--_fg:#fff;border-color:rgba(255,255,255,.45)}
.cookiebar .btn--ghost:hover{border-color:#fff}
@keyframes cookiebar-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cookiebar{animation:none}}
@media(max-width:700px){.cookiebar{left:10px;right:10px;padding:16px}}

/* Prototype form acknowledgement (see app.js) */
.form-ack{
  display:flex;align-items:center;gap:.6em;
  font-weight:600;color:var(--fg);
  padding:16px 20px;border-radius:var(--radius);
  background:var(--ack-bg,rgba(0,0,0,.04));
  animation:cookiebar-in .3s var(--ease) both;
}
.form-ack::before{content:"✓";color:var(--ack-mark,var(--gold-deep,currentColor));font-weight:700}
@media(prefers-reduced-motion:reduce){.form-ack{animation:none}}


/* =========================================================================
   Amanah Intelligence — theme (knowledge platform)
   Owns: purple ground, silver, bright-purple action, teal signal, white surfaces.
   NEVER: gold, yellow, black (body text uses a deep indigo ink, not pure black).
   ========================================================================= */
:root{
  --purple:#6E0522;        /* ground            */
  --purple-raised:#9D0731; /* raised cards      */
  --purple-action:#9D0731; /* buttons / action  */
  --teal:#E8A9B8;          /* signal / links    */
  --teal-tint:#F5E7EB;
  --silver-grad:linear-gradient(135deg,#E3E6EA 0%,#AEB4BC 50%,#7E858E 100%);
  --silver:#AEB4BC;
  --silver-deep:#7E858E;
  --teal-ink:#9D0731;      /* teal that survives as text on a light ground */

  --indigo-ink:#1E1E1E;    /* text on light (not black) */

  /* Surfaces (light reading base) */
  --bg:#fff;
  --fg:var(--indigo-ink);
  --muted:#5F5F5F;
  --line:rgba(30,30,30,.12);
  --card:#fff;
  --header-bg:#fff;
  --footer-bg:var(--purple);
  --footer-fg:rgba(227,230,234,.72);
  --footer-head:var(--teal);      /* footer column headings */
  --focus:var(--purple-action);

  --btn-bg:var(--purple-action);
  --btn-fg:#fff;

  --accent:var(--purple-action);
  --imgph-bg:linear-gradient(135deg,#6E0522,#9D0731);
}

body{background:var(--bg);color:var(--fg)}
::selection{background:var(--teal-tint);color:var(--indigo-ink)}
.prose a,a.link{color:var(--purple-action);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Panels ---------------------------------------------------------------- */
.panel--purple{background:var(--purple);color:#fff;--fg:#fff;--muted:rgba(227,230,234,.72);--line:rgba(255,255,255,.16);--card:var(--purple-raised);--btn-bg:var(--purple-action);--btn-fg:#fff}
.panel--raised{background:var(--purple-raised);color:#fff;--fg:#fff;--muted:rgba(227,230,234,.72);--line:rgba(255,255,255,.16)}
.panel--tint{background:#F5E7EB}

/* Emblem tint */
.brand .emblem g{fill:url(#bAgrad)}
.panel--purple .brand .emblem g{fill:var(--silver)}
.emblem--silver g{fill:var(--silver-deep)}

/* Signal accents */
.teal{color:var(--purple-action)}
.panel--purple .teal{color:var(--teal)}
.rule-teal{height:2px;width:56px;background:var(--teal);border:0;border-radius:2px}
.dot{width:.5em;height:.5em;border-radius:50%;background:var(--teal);display:inline-block;flex:none}

/* Search box (content-forward hub hallmark) */
.searchbox{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 22px;box-shadow:0 8px 30px rgba(30,30,30,.08)}
.panel--purple .searchbox{background:#fff;color:var(--indigo-ink)}
/* Gewone tekstgrootte. Op step-1 schreeuwde het veld harder dan de kop erboven,
   en de langere placeholders werden op een telefoon afgekapt. */
.searchbox input{flex:1;border:0;outline:0;background:none;font-size:var(--step-0);color:var(--indigo-ink);min-width:0}
.searchbox input::placeholder{color:#767676}

/* "Answered" pill */
.answered{display:inline-flex;align-items:center;gap:.5em;font-size:var(--step--1);font-weight:600;color:var(--purple-action)}
.answered .dot{background:var(--teal)}
.panel--purple .answered{color:var(--teal)}

/* Orbit nav-link accent — reused on every Intelligence page */
a.nav-orbit{color:var(--teal);font-weight:600}
a.nav-orbit:hover,a.nav-orbit[aria-current]{color:var(--teal)}

/* Trending chips */
.chip{display:inline-block;font-size:var(--step--1);font-weight:500;padding:.5em 1em;border-radius:999px;border:1px solid var(--line);color:var(--muted);transition:.15s}
.chip:hover{border-color:var(--purple-action);color:var(--purple-action)}
.panel--purple .chip{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85)}
.panel--purple .chip:hover{border-color:var(--teal);color:var(--teal)}

/* ---- The ruling on a forum thread ---------------------------------------
   One spec for all five threads; it used to be copied into each page's own
   <style>. Three changes from that version.

   The person who answered now leads the card instead of trailing it. On a
   fatwa forum the name and the standing behind it are the reason to believe
   the answer, and they were sitting in muted grey under four paragraphs.

   The 4px left stripe is gone: a single-sided accent on a 22px radius gets
   rounded away at both ends, which is what made that teal edge curve. The
   signal moved to the ring on the avatar.

   The ground is tinted with the same wash the papers use for an abstract. The
   community replies below are plain white, so the ruling now outweighs them
   without needing a heavier border. */
.tw-answer{
  background:linear-gradient(135deg,rgba(157,7,49,.06),rgba(232,169,184,.06));
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(22px,2.8vw,34px);margin-top:18px;
}
.tw-answer__head{
  display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line);
}
.tw-answer__head .avatar{
  width:40px;height:40px;border-radius:50%;background:var(--silver-grad);flex:none;
  box-shadow:0 0 0 2px rgba(232,169,184,.55);
}
.tw-answer__who{display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.tw-answer__who b{font-weight:600;color:var(--indigo-ink)}
.tw-answer__who small{color:var(--muted);font-size:var(--step--1)}
.tw-answer p{margin-top:.9em}
.tw-answer p:first-of-type{margin-top:0}
@media(max-width:520px){.tw-answer__who{margin-right:0}}

/* ---- Moderation on a thread (prototype) ---------------------------------
   The remove control only exists while moderating, and it stays quiet: this is
   a page people come to for an answer, not an admin screen. Grey until hover,
   then red — the destructive colour arrives at the moment of intent. */
/* A rounded rect, not a pill: this text wraps at narrow widths, and a wrapped
   pill reads as a mistake. The dot aligns to the first line, not the middle. */
.tw-modbar{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  margin-bottom:14px;padding:12px 16px;border-radius:var(--radius);
  background:rgba(226,75,74,.08);color:var(--muted);font-size:var(--step--1);max-width:none;
}
.tw-modbar .dot{background:#B3261E;transform:translateY(-.1em)}
.tw-modbar a{color:var(--purple-action);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.tw-reply__body{position:relative}
.tw-reply__remove{
  position:absolute;top:0;right:0;
  background:none;border:0;padding:2px 4px;cursor:pointer;
  color:var(--muted);font-size:var(--step--1);font-weight:600;
  border-radius:var(--radius-sm);transition:color .15s,background .15s;
}
.tw-reply__remove:hover{color:#B3261E;background:rgba(226,75,74,.1)}
.tw-reply__body p{padding-right:5.5em}
.tw-reply--removed{
  display:flex;align-items:center;gap:12px;
  background:#FAF8F5;border-style:dashed;
  padding:12px clamp(16px,2vw,22px);
}
.tw-reply__gone{color:var(--muted);font-size:var(--step--1)}
.tw-reply__undo{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--purple-action);font-size:var(--step--1);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
}

/* ---- The Exchange section ----------------------------------------------
   The numbered steps and the drawing of the product. Used by two of the three
   Exchange pages, so it sits here rather than three times in three <style>
   blocks — which is how .paper-row ended up written out five times. */
/* The steps. Numbered because the order is the promise. */
.ex-steps{counter-reset:step;display:grid;gap:2px;margin-top:clamp(24px,3vw,34px)}
.ex-step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  padding:clamp(20px,2.4vw,26px) 0;border-top:1px solid var(--line)}
.ex-step:last-child{border-bottom:1px solid var(--line)}
.ex-step__n{counter-increment:step;width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#F5E7EB;color:var(--purple-action);
  font-weight:700;font-size:var(--step--1);font-variant-numeric:tabular-nums}
.ex-step__n::before{content:counter(step)}
.ex-step h3{font-size:var(--step-1);letter-spacing:-.02em}
.ex-step p{color:var(--muted);margin-top:8px;max-width:60ch;font-size:var(--step--1);line-height:1.6}
.ex-step .when{display:block;margin-top:8px;color:var(--silver-deep);font-size:var(--step--1)}

/* Terms: a list you can actually check yourself against. */
.ex-terms{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(24px,3vw,34px)}
@media(max-width:760px){.ex-terms{grid-template-columns:1fr}}
.ex-term{padding:clamp(20px,2.4vw,26px);border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.ex-term h3{font-size:var(--step-0);letter-spacing:-.01em}
.ex-term p{color:var(--muted);margin-top:8px;font-size:var(--step--1);line-height:1.6}

/* The drawing of the product. Deliberately a drawing: it is a preview, and
   a fake screenshot of an empty room would promise a crowd that is not there. */
.ex-frame{margin-top:clamp(26px,4vw,40px);background:var(--purple);border-radius:var(--radius-xl);
  padding:clamp(16px,2.4vw,26px);box-shadow:0 40px 90px -50px rgba(30,30,30,.8)}
.ex-frame__bar{display:flex;align-items:center;gap:7px;padding:0 4px 14px}
.ex-frame__bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.ex-frame__body{background:#1E1E1E;border-radius:var(--radius-lg);padding:clamp(18px,2.4vw,26px);
  display:grid;grid-template-columns:190px 1fr;gap:clamp(16px,2vw,24px)}
@media(max-width:760px){.ex-frame__body{grid-template-columns:1fr}.ex-frame__rail{display:none}}
.ex-frame__rail{display:flex;flex-direction:column;gap:9px}
.ex-rail-item{color:rgba(227,230,234,.55);font-size:var(--step--1);padding:9px 12px;border-radius:10px}
.ex-rail-item[data-on]{background:rgba(255,255,255,.09);color:#fff}
.ex-today{background:linear-gradient(135deg,rgba(157,7,49,.28),rgba(232,169,184,.16));
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:clamp(18px,2.2vw,24px)}
.ex-today .label{color:var(--teal);font-size:var(--step--1);font-weight:600}
.ex-today h3{color:#fff;font-size:var(--step-1);margin-top:8px;letter-spacing:-.02em}
.ex-today p{color:rgba(227,230,234,.78);font-size:var(--step--1);margin-top:8px;line-height:1.55}
.ex-post{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);padding:clamp(16px,2vw,20px);margin-top:12px}
.ex-post .who{color:rgba(227,230,234,.6);font-size:var(--step--1)}
.ex-post h4{color:#fff;font-size:var(--step-0);margin-top:6px;letter-spacing:-.01em}
.ex-note{margin-top:16px;color:var(--muted);font-size:var(--step--1)}

/* ---- A quoted authority in a paper --------------------------------------
   Was a tinted panel with a 2px purple bar and one rounded corner: the callout
   widget every template ships with, dropped into the middle of a scholarly
   argument. A quotation does not need a container — indentation and a hairline
   say "this is someone else speaking", and the eye reads it as part of the
   text rather than as a box pasted over it.
   Written out in four pages before this. */
.pq{margin:clamp(30px,4vw,44px) 0;padding-left:clamp(18px,2.6vw,30px);border-left:1px solid var(--line)}
.pq p{margin:0;line-height:1.62}
.pq p+p{margin-top:.8em}
.pq__ar{font-size:1.35em;line-height:1.9;margin-bottom:14px!important;text-align:right}
.pq cite{display:block;margin-top:12px;font-style:normal;font-size:var(--step--1);color:var(--silver-deep)}

/* ---- Section hero ------------------------------------------------------
   The purple head of a section landing page. It lived in forum.html alone; the
   Exchange would have grown a third variant of it if it had stayed there. */
.section-hero{margin:14px var(--gutter) 0;border-radius:var(--radius-xl);color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#9D0731 0%,#6E0522 62%,#58041B 100%);
  padding:clamp(30px,4vw,52px) clamp(22px,5vw,60px);text-align:center}
.section-hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;top:-180px;left:-100px;
  background:radial-gradient(circle,rgba(232,169,184,.4),transparent 62%);opacity:.5}
.section-hero__in{position:relative;z-index:1;max-width:640px;margin-inline:auto}
.section-hero h1{font-size:var(--step-4);letter-spacing:-.04em;margin-bottom:12px}
.section-hero p{color:rgba(227,230,234,.86);max-width:46ch;margin:0 auto}
/* The Exchange pages read as a page, not a poster: the head sits on the same
   left edge as the sections beneath it. The forum keeps the centred original. */
/* The inner padding grows to whatever the centred .container is inset by, so
   the h1 sits on the same left edge as the section headings below the panel.
   Under about 1280 the container is already flush and the clamp takes over. */

/* ---- Subject chips ------------------------------------------------------
   The five subjects, shown as a row of cards on /articles/ and again on every
   subject page with the current one marked. Deliberately carry no counts: two
   of the five are thin, and a count is the fastest way to advertise that. */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
@media(max-width:980px){.cats{grid-template-columns:repeat(2,1fr)}}
/* Below the two-column point these stop being a grid and become one band that
   scrolls sideways. Stacked, five subjects are five screens of nothing but
   navigation before the first article — the reader came for the articles. */
@media(max-width:640px){
  .cats{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block:4px;
    /* Zonder dit lijnt de eerste kaart uit op de rand van het scrollvlak in
       plaats van op de padding: de balk springt bij het laden 20px opzij en de
       kaart plakt tegen de schermrand terwijl de kop erboven inspringt. */
    scroll-padding-inline:var(--gutter)}
  .cats::-webkit-scrollbar{display:none}
  .cats > *{flex:0 0 min(58vw,220px);scroll-snap-align:start;padding:16px 18px;gap:5px}
  .cats > * b{font-size:var(--step-0)}
}
.cat{display:flex;flex-direction:column;gap:8px;padding:22px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;transition:.2s var(--ease)}
.cat:hover{border-color:var(--purple-action);transform:translateY(-2px)}
.cat b{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);letter-spacing:-.02em}
.cat span{color:var(--muted);font-size:var(--step--1)}
.cat[aria-current]{border-color:var(--purple-action);background:#F5E7EB}
.cat[aria-current]:hover{transform:none}
/* .cat span pakt --muted, en dat is donkergrijs op een donkerpaarse kaart. */
.cat.card--ink b{color:#fff}
.cat.card--ink span{color:rgba(227,230,234,.8)}

/* De zijwaartse balk hierboven is er voor rubriekkaarten die bóven een lijst
   staan: daar is de rij navigatie en wil de lezer eronder zijn. Op de Money
   Q&A-hub zijn de onderwerpen zelf de inhoud, dus daar blijft het een raster
   en stapelen ze gewoon. */
@media(max-width:640px){
  .cats--stack{display:grid;grid-template-columns:1fr;gap:12px;
    margin-inline:0;padding-inline:0;overflow:visible}
  .cats--stack > *{flex:none;padding:20px 22px;gap:8px}
  .cats--stack > * b{font-size:var(--step-1)}
}
/* Tien onderwerpen plus een kaart voor "niet gevonden" is elf in een raster van
   drie; de laatste kaart neemt de rest van de rij. */
.cat--wide{grid-column:span 2}
@media(max-width:640px){.cat--wide{grid-column:span 1}}

/* ---- Genummerde kaartstapel --------------------------------------------
   Drie kaarten die op een breed scherm naast elkaar staan en op een smal
   scherm over elkaar heen schuiven. Elke kaart blijft even hangen terwijl de
   volgende eroverheen komt, dus de volgorde blijft voelbaar op een scherm dat
   er maar één tegelijk kwijt kan; drie losse kaarten onder elkaar zeggen niet
   dat ze bij elkaar horen. De top loopt per kaart 16px op zodat de rand van de
   vorige zichtbaar blijft — dat is wat de stapel leesbaar maakt. De 88px houdt
   de balk bovenaan vrij, die is sticky.

   Het nummer staat vóór de kop op dezelfde regel, niet als los blokje erboven:
   dezelfde vorm die de papers gebruiken voor hun paragraafnummers. */
.stack-cards--numbered{counter-reset:stackcard}
.stack-cards--numbered > .card{counter-increment:stackcard}
.stack-cards--numbered > .card h3::before{
  content:counter(stackcard);
  color:var(--silver-deep);font-weight:400;margin-right:.55em;
  font-variant-numeric:tabular-nums;
}
@media(max-width:760px){
  .stack-cards{display:block}
  /* Geen achtergrond zetten: .card is al dekkend en een getinte variant zou
     hier onder een specifiekere selector verdwijnen — dan stapelen zes witte
     kaarten en is de kleur weg. */
  .stack-cards > .card{position:sticky;top:88px}
  .stack-cards > .card + .card{margin-top:16px;box-shadow:0 -16px 34px -26px rgba(30,30,30,.5)}
  /* Elke volgende kaart hangt 16px lager, zodat de rand van de vorige zichtbaar
     blijft. Zes stappen is genoeg voor de langste rij die de site heeft. */
  .stack-cards > .card:nth-child(2){top:104px}
  .stack-cards > .card:nth-child(3){top:120px}
  .stack-cards > .card:nth-child(4){top:136px}
  .stack-cards > .card:nth-child(5){top:152px}
  .stack-cards > .card:nth-child(6){top:168px}
  .stack-cards > .card:hover{transform:none}
}
/* Wie beweging heeft uitgezet krijgt gewoon drie kaarten onder elkaar. */
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .stack-cards > .card{position:static;box-shadow:none}
}

/* ---- Question row ------------------------------------------------------
   One question in a list. Lives on the Fatwa Forum and on every subject page,
   so it sits here rather than in either page's own <style>. */
.fw-list{display:flex;flex-direction:column;gap:14px}
/* Any rule that sets display beats the [hidden] attribute, so a filtered-out
   row stayed on screen while the script believed it was gone. */
.fw-thread[hidden]{display:none}
.fw-thread{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(18px,2.2vw,24px);color:inherit;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.fw-thread:hover{transform:translateY(-3px);box-shadow:0 22px 44px -34px rgba(30,30,30,.4);border-color:transparent}
.fw-thread__main{min-width:0;display:flex;flex-direction:column;gap:8px}
.fw-thread__title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);letter-spacing:-.02em}
.fw-thread__tags{display:flex;gap:6px;flex-wrap:wrap}
/* Het fragment is een <span>, dus de kap op p{max-width:66ch} raakt hem niet.
   Zonder eigen kap liep hij over de volle 1180px: 109 tekens per regel. */
.fw-thread__snippet{color:var(--muted);font-size:var(--step--1);max-width:74ch}
.fw-thread__meta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:var(--step--1);margin-top:2px}
.fw-thread__meta .who{display:flex;align-items:center;gap:8px}
.fw-thread__meta .who .avatar{width:22px;height:22px;border-radius:50%;background:var(--silver-grad);flex:none}
.pending{display:inline-flex;align-items:center;gap:.5em;font-size:var(--step--1);font-weight:600;color:#8a6d1f}
.pending .dot{width:.5em;height:.5em;border-radius:50%;background:#e0b64a;display:inline-block;flex:none}
.fw-thread--new{animation:pop .5s var(--ease)}
@keyframes pop{from{transform:scale(.98);box-shadow:0 0 0 2px var(--teal)}to{transform:none}}

/* ---- The card that points at the other format ---------------------------
   A paper linking to the article that answers the same question, or the other
   way round. It was defined in eight page-level <style> blocks and used on
   three pages — and the two papers that used it were not among the eight, so
   the anchor stayed inline there: the border wrapped the line boxes instead of
   the card, and the heading fell outside it. */
.from-forum{display:block;text-decoration:none}
.from-forum h3{font-size:var(--step-1)}
.from-forum p{color:var(--muted);margin-top:8px}
.from-forum .go,.from-forum .link{color:var(--purple-action);font-weight:600;text-decoration:none;display:inline-block;margin-top:14px}

/* ---- Rail --------------------------------------------------------------
   A row of cards that scrolls sideways instead of wrapping. Cards keep a fixed
   width, so a rail holding one card is one card sitting at the left rather than
   a card stretched across the page — the shape has to survive a thin shelf as
   well as a full one. The rail bleeds into the gutter so the next card is cut
   by the screen edge, which is the only honest signal that there is more. */
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block:4px;
  /* Het snappunt moet de padding meenemen, anders schuift de rij bij het laden
     precies de gutter opzij en raakt de eerste kaart de schermrand. */
  scroll-padding-inline:var(--gutter)}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 clamp(258px,30vw,340px);scroll-snap-align:start}
@media(min-width:1100px){.rail > *{flex-basis:340px}}

.paper-card{display:flex;flex-direction:column;gap:8px}
.paper-card h3{font-size:var(--step-1);letter-spacing:-.02em;transition:color .15s}
.paper-card:hover h3{color:var(--purple-action)}
.paper-card p{color:var(--muted);font-size:var(--step--1);line-height:1.55}
.paper-card__meta{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px 14px;
  font-size:var(--step--1);color:var(--silver-deep)}

/* ---- Paper row ---------------------------------------------------------
   Still used by the related lists on the papers themselves and in the Orbit.
   Was written out five times, identically, in five <style> blocks. */
.paper-row{display:block;padding:clamp(22px,3vw,28px) 0;border-top:1px solid var(--line)}
.paper-row:last-child{border-bottom:1px solid var(--line)}
.paper-row h3{font-size:var(--step-1);letter-spacing:-.02em;transition:color .15s}
.paper-row:hover h3{color:var(--purple-action)}
.paper-row p{color:var(--muted);margin-top:8px;max-width:64ch;font-size:var(--step--1);line-height:1.6}
.paper-row__meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:var(--step--1);color:var(--silver-deep)}

/* ---- Orbit member sub-nav (T13) -----------------------------------------
   Sits directly under the site header on every Orbit member-area page
   (orbit-home, orbit-space-*, orbit-members, orbit-insights, orbit-advisory —
   5 pages). Active link gets aria-current + accent; right side carries the
   "Preview mode — prototype" tag. */
.orbit-nav{background:#F5E7EB;border-bottom:1px solid var(--line)}
.orbit-nav .container{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;flex-wrap:wrap}
.orbit-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.orbit-nav a{font-weight:600;font-size:var(--step--1);color:var(--muted)}
.orbit-nav a:hover{color:var(--purple-action)}
.orbit-nav a[aria-current]{color:var(--purple-action)}
.orbit-nav .tag{background:rgba(232,169,184,.18);color:#6E0522;flex:none}
@media(max-width:640px){.orbit-nav .container{gap:10px}.orbit-nav ul{gap:14px;width:100%}}

/* ---- Thread row (Forum list pattern) -----------------------------------
   Owned by T10 (forum.html). Reused on ≥3 pages: forum.html, both worked
   thread pages' "Related" lists, and podcasts.html's similar row layout.
   Hover behaviour follows base.css's .prodnav__row idiom (tint + shift). */
.thread-row{display:grid;grid-template-columns:1fr auto;align-items:start;gap:18px;padding:clamp(16px,2vw,22px) 10px;border-bottom:1px solid var(--line);color:inherit;border-radius:var(--radius-sm);transition:background .2s var(--ease)}
.thread-row:hover,.thread-row:focus-visible{background:var(--panel--tint,#F5E7EB)}
.thread-row__main{min-width:0;display:flex;flex-direction:column;gap:6px}
.thread-row__title{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);letter-spacing:-.02em;color:var(--fg)}
.thread-row__tags{display:flex;gap:6px;flex-wrap:wrap}
.thread-row__snippet{color:var(--muted);font-size:var(--step--1)}
.thread-row__meta{flex:none;color:var(--muted);font-size:var(--step--1);white-space:nowrap;padding-top:2px}
@media(max-width:640px){.thread-row{grid-template-columns:1fr;row-gap:6px}.thread-row__meta{grid-column:2;justify-self:start}}

/* =========================================================================
   Floating pill header — matched to Amanah Advisors (Mastercard-style).
   Same markup as every Intelligence page; the pill shape/behaviour lives here.
   Desktop: always-floating centred pill. Mobile: settles to a flush bar on scroll.
   No action buttons in the bar (menu carries navigation only).
   ========================================================================= */
/* Header — geometry lives in base.css (one spec, both platforms). Colour only.
   The old max-width:min(1320px,calc(100% - 64px)) here is what made this menu
   up to 140px wider than Advisors; it is gone deliberately. Do not re-add. */
:root{
  --nav-pill-line:rgba(30,30,30,.08);
  --nav-pill-shadow:rgba(30,30,30,.5);
}
.site-header .nav-links a{color:var(--indigo-ink)}
.site-header .nav-links a:hover,.site-header .nav-links a[aria-current]{color:var(--indigo-ink)}
.site-header .nav-links a.nav-orbit,.site-header .nav-links a.nav-orbit:hover{color:var(--teal);opacity:1}
.site-header .nav-toggle{color:var(--indigo-ink)}
/* The bridge to Advisors carries the same weight in the bar as "Get in touch"
   does on Advisors: one solid pill at the right end, no arrow. It used to be
   outlined on the reasoning that Intelligence informs and Advisors sells; Imad
   overruled that on 2026-08-12 in favour of matching the two menus.
   Purple rather than Advisors' near-black — this theme bans black outright. */
.site-header .nav-bridge{
  /* Maatvoering afgestemd op de knop bij Advisors: die vult ongeveer tweederde
     van de hoogte van de menubalk en draagt bijna twee keer zoveel padding
     opzij als tekstbreedte hem zou geven. Onze knop bleef op .58 steken en
     oogde daardoor kleiner in een balk van dezelfde hoogte. Kleur blijft paars,
     zie de regel hierboven. */
  font-size:1rem;font-weight:600;padding:.95em 2em;
  --_bg:var(--purple-action);--_fg:#fff;border-color:transparent;
}
.site-header .nav-bridge:hover{--_bg:#6E0522;border-color:transparent}
/* The brief — a field and an action, both in the house pill shape.
   These rules existed only in a <style> block on brief.html, so the same form
   rendered as a raw browser input on the other 23 pages carrying it: square
   corners and a grey inset border next to a fully rounded button, 35px tall
   against the button's 46px. Field and action now share one height token, so
   the pair reads as one control rather than two accidents. */
.brief-form{display:flex;align-items:center;gap:10px;max-width:440px;--brief-h:46px}
.brief-form input{
  flex:1 1 auto;min-width:0;min-height:var(--brief-h);
  padding:0 1.3em;background:#fff;color:var(--fg);
  border:1px solid var(--line);border-radius:999px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.brief-form input::placeholder{color:var(--muted);opacity:1}
.brief-form input:focus{outline:0;border-color:var(--purple-action);box-shadow:0 0 0 3px rgba(157,7,49,.16)}
.brief-form .btn{flex:none;min-height:var(--brief-h)}
/* On the purple ground the field stays white, as the hero search does — and so
   must its placeholder. Inside .panel--purple the --muted token flips to a pale
   grey meant for the dark ground, which on a white field is nearly invisible. */
.panel--purple .brief-form input{background:#fff;color:var(--indigo-ink);border-color:transparent}
.panel--purple .brief-form input::placeholder{color:#767676}
/* A card holding a form is not a link, so it must not lift when hovered. */
.card:has(.brief-form):hover{transform:none}

/* ---- De brief onder een artikel of paper ---------------------------------
   Dit stond hier als witte kaart met hairline, direct onder de rij
   "Read next"-kaarten: dezelfde vorm, dezelfde rand, dus je las hem als een
   vierde artikel in plaats van als een vraag. Een band met een eigen
   ondergrond kan niet meesmelten, en de tweedeling — links wat het is, rechts
   hem krijgen — geeft het blok een liggende vorm die verder nergens op de
   pagina voorkomt. Dezelfde behandeling als het briefblok op /articles/, dus
   de site wint er een patroon mee in plaats van er een uitzondering bij. */
.brief-band{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.brief-band h2{margin-bottom:0}
.brief-band p{color:var(--muted);margin-top:12px;max-width:46ch}
.brief-band .brief-form{max-width:none}
.brief-band__link{margin-top:14px;font-size:var(--step--1)}
.brief-band__link a{color:var(--teal)}
/* Wat er terugkomt na een inzending. Staat boven het veld en niet eronder: daar
   kijk je na het indrukken van de knop, en op een telefoon valt alles onder de
   knop buiten beeld. */
.brief-band__notice{margin-bottom:12px;font-size:var(--step--1);font-weight:600}
.brief-band__notice--ok{color:var(--teal)}
.brief-band__notice--error{color:#FFB4A9}
/* Onder de kolombreedte staan de twee helften onder elkaar; dan hoort de kop
   bovenaan te beginnen en niet in het midden van zijn eigen rij te zweven. */
@media(max-width:900px){
  .brief-band{grid-template-columns:1fr;gap:22px;align-items:start}
}
/* At phone widths the two do not fit on one line; the field takes the row and
   the button follows at full width rather than being squeezed to an ellipsis. */
@media(max-width:480px){
  .brief-form{flex-wrap:wrap;max-width:none}
  .brief-form input{flex:1 0 100%}
  .brief-form .btn{flex:1 1 auto;justify-content:center}
}
/* Phone widths: keep the hero search placeholder readable next to the Ask button. */
.searchbox input{text-overflow:ellipsis}
@media(max-width:480px){.searchbox input::placeholder{font-size:.92em}}

/* Logo spec: descriptor in teal; panel thumb variants for image-free Intelligence */
.brand .sub{color:var(--teal)}
.site-footer .brand .sub{color:var(--teal)}
.nav-panel__thumb--tint,.nav-panel__thumb--orbit,.nav-panel__thumb--paper{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:#fff;background:var(--purple-action)}
.nav-panel__thumb--orbit{background:var(--purple)}
.nav-panel__thumb--paper{background:var(--purple);color:var(--teal);font-size:1.5rem}

/* Mobile bar behaviour (menu-open, scrolled state) is in base.css. */

/* The tabs inside the drawing. The site's tab component assumes a light ground;
   here it sits on the purple, so only the colours change — the behaviour, the
   keyboard handling and the panel switching come from base.css and app.js. */
.ex-frame .tabcx__tabs{margin:0 0 16px}
.ex-frame .tabcx__tab{background:rgba(255,255,255,.07);color:rgba(227,230,234,.72);border-color:transparent}
.ex-frame .tabcx__tab:hover{color:#fff}
.ex-frame .tabcx__tab[aria-selected="true"]{background:#fff;color:var(--indigo-ink)}
/* One height for every panel, so switching a tab never moves the page. The
   tallest panel decides it; below the two-column breakpoint the panels reflow
   and grow, and there a few pixels of movement is invisible against a scroll. */
.ex-frame .tabcx__panel .ex-frame__body{align-content:start}
@media(min-width:761px){.ex-frame .tabcx__panel .ex-frame__body{min-height:572px}}
.ex-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ex-chips span{font-size:var(--step--1);color:rgba(227,230,234,.6);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.4em .9em}
.ex-chips span[data-on]{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
.ex-frame__note{color:rgba(227,230,234,.55);font-size:var(--step--1);margin-top:14px;line-height:1.55}

/* ---- Tinted cards -------------------------------------------------------
   The palette, used on surfaces instead of only on links and buttons. Two
   washes — the lilac the site already uses for panels, and a mint from the teal
   — alternating through a row so a group of cards reads as one family without
   any of them shouting. Border goes transparent: a tint and a hairline together
   is one boundary too many.

   The link inside inherits the card family: purple on lilac, deep teal on mint.
   Plain --teal is a signal colour on dark ground and too pale to read as text
   on a light one, which is why there is a separate ink for it. */
/* Vier vlakken uit twee kleuren. Een derde kleur zou het palet oprekken, dus de
   variatie zit in de diepte: elke tint heeft een lichtere en een vollere stap.
   Zo herhaalt een rij van zes zich niet en blijft alles één familie. */
.card--lilac{background:#F5E7EB;border-color:transparent}
.card--lilac-deep{background:#EED6DD;border-color:transparent}
.card--mint{background:#FAF8F5;border-color:transparent}
.card--mint-deep{background:#F3EEE8;border-color:transparent}
.card--lilac .link,.card--lilac a,
.card--lilac-deep .link,.card--lilac-deep a{color:var(--purple-action)}
.card--mint .link,.card--mint a,
.card--mint-deep .link,.card--mint-deep a{color:var(--teal-ink)}

/* The last card in a group, when it asks for something rather than telling you
   something. Dark ground, teal link — the same inversion the footer uses. */
.card--ink{background:linear-gradient(150deg,#9D0731,#58041B);border-color:transparent;color:#fff}
.card--ink h3{color:#fff}
.card--ink p{color:rgba(227,230,234,.82)}
.card--ink .link,.card--ink a{color:var(--teal)}

/* ---- Arabic and right-to-left --------------------------------------------
   The house fonts carry no Arabic glyphs, so anything in Arabic script needs
   its own family. Mark a term with lang="ar" and it picks the family up; mark
   a block with dir="rtl" and it also flips direction and alignment. English
   around it is untouched — this is bidirectional text, not a mirrored UI. */
:lang(ar),.ar{font-family:var(--font-arabic);line-height:1.9;font-feature-settings:"liga" 1}
/* Arabic naskh runs small next to a grotesk at the same size. */
:lang(ar),.ar{font-size:1.08em}
[dir="rtl"]{text-align:right}
[dir="rtl"] .prose ul,[dir="rtl"] ul{padding-left:0;padding-right:1.2em}
/* A block quotation of a source text: its own measure, right-aligned, with the
   rule on the side the text starts from. */
.quote-ar{margin:1.6em 0;padding-inline-start:20px;border-inline-start:3px solid var(--line-strong,var(--line));
  max-width:56ch;color:var(--fg)}
.quote-ar[dir="rtl"]{margin-inline-start:auto}
.quote-ar cite{display:block;margin-top:10px;font-family:var(--font-body);font-size:var(--step--1);
  font-style:normal;color:var(--muted);direction:ltr;text-align:left}

/* ---- Long-form frame -----------------------------------------------------
   An article or paper used to be a single 760px column centred in a 1180px
   page, which left both flanks empty — the review said so three times. The
   frame puts a contents rail beside the prose so the page carries its width,
   and collapses to one column before the rail would squeeze the measure. */
.longform{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:clamp(32px,5vw,72px);align-items:start}
.longform__aside{position:sticky;top:96px;font-size:var(--step--1)}
.longform__aside h2{font-size:var(--step--1);font-family:var(--font-body);font-weight:600;
  letter-spacing:0;color:var(--muted);margin-bottom:12px}
.longform__toc{display:flex;flex-direction:column;gap:2px;border-inline-start:1px solid var(--line);margin:0;padding:0;list-style:none}
.longform__toc a{display:block;padding:7px 0 7px 14px;margin-inline-start:-1px;color:var(--muted);
  border-inline-start:1px solid transparent;line-height:1.4;transition:color .15s,border-color .15s}
.longform__toc a:hover{color:var(--fg);border-inline-start-color:var(--line-strong,var(--muted))}
.longform__toc a[aria-current="true"]{color:var(--purple-action);border-inline-start-color:var(--purple-action);font-weight:600}
@media(max-width:1080px){
  .longform{grid-template-columns:1fr}
  .longform__aside{position:static;order:-1;top:auto;margin-bottom:8px}
  .longform__toc{flex-flow:row wrap;gap:0 18px;border:0;border-top:1px solid var(--line);padding-top:12px}
  .longform__toc a{padding-inline:0;border:0;margin-inline-start:0}
}

/* ---- Research categories -------------------------------------------------
   Name and scope on the left, the papers under it on the right. A category
   with nothing published yet still says what it covers, so the block carries
   its own weight instead of rendering an apology. */
.research-cat{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);padding:clamp(30px,4vw,44px) 0;border-top:1px solid var(--line)}
.research-cat:last-of-type{border-bottom:1px solid var(--line)}
.research-cat h2{font-size:var(--step-2);letter-spacing:-.03em}
.research-cat__lede{color:var(--fg);margin-top:12px;line-height:1.6}
.research-cat__scope{color:var(--muted);font-size:var(--step--1);line-height:1.6;margin-top:10px}
.research-cat__papers{display:flex;flex-direction:column;gap:0}
.research-cat__papers .paper-row:first-child{border-top:0;padding-top:0}
.research-cat__papers .paper-row:last-child{border-bottom:0}
.research-cat__soon{color:var(--muted);font-size:var(--step--1);font-style:italic;padding-top:4px}
@media(max-width:820px){.research-cat{grid-template-columns:1fr;gap:20px}}

/* ---- Section grids (Q&A sections, article categories) --------------------
   One card per section: the name, what it covers, and the sub-sections under
   it as plain text so a reader can see the scope before clicking. */
.sec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
@media(max-width:960px){.sec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sec-grid{grid-template-columns:1fr}}
.sec-card{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.4vw,26px);
  border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--white);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.sec-card:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 24px 46px -32px rgba(30,30,30,.42)}
.sec-card h3{font-size:var(--step-1);letter-spacing:-.02em}
.sec-card p{color:var(--muted);font-size:var(--step--1);line-height:1.6}
.sec-card__sub{margin-top:auto;padding-top:14px;color:var(--silver-deep,var(--muted));
  font-size:var(--step--1);line-height:1.55}

/* Tien rubrieken passen niet onder elkaar in een paneel. */
.nav-panel__links--two{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.nav-panel__links--two .more-link{grid-column:1/-1}
/* Tien onderwerpen in twee kolommen hebben meer breedte nodig dan het paneel
   standaard geeft, anders breekt "Crypto & digital assets" over twee regels. */
.nav-panel:has(.nav-panel__links--two){min-width:780px;grid-template-columns:1.6fr 1fr}

/* ---- Answer cards ---------------------------------------------------------
   Stond in een <style>-blok op elke rubriek- en artikelpagina. Nu de Q&A- en
   categoriepagina's erbij komen hoort het hier: één plek, één component. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
/* Op een smal scherm perst de link naast de kop die kop in twee regels. */
@media(max-width:640px){.sec-head{flex-direction:column;align-items:flex-start;gap:10px}}
/* Drie per rij als er drie zijn, maar twee kaarten vullen de rij ook: een
   vaste kolom van drie liet bij twee artikelen een derde van de rij leeg. */
.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.answer-card{display:flex;flex-direction:column;gap:12px}
.answer-card .tag{align-self:flex-start}
.answer-card h3{font-size:var(--step-1);letter-spacing:-.02em}
.answer-card .by{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--step--1)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--silver-grad);flex:none}
.byline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--step--1)}
.cat-heading{font-size:var(--step-2);letter-spacing:-.03em;margin-bottom:22px;scroll-margin-top:90px}

/* Een rij rubriekchips onder een kop: waar je bent, en waar je heen kunt. */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip[aria-current]{background:var(--purple-action);color:#fff;border-color:transparent}

/* Tien onderwerpen plus een kaart voor "niet gevonden" is elf in een raster van
   drie: de laatste rij bleef anders half leeg. De laatste kaart neemt de rest. */
.hw-cat--wide{grid-column:span 2}
@media(max-width:520px){.hw-cat--wide{grid-column:span 1}}

/* ---- Schuifrij ------------------------------------------------------------
   Eén rij die zijwaarts loopt in plaats van af te breken over meerdere regels.
   Veegbaar op een telefoon, sleepbaar met de muis, met pijlen erbij zodra de
   rij niet past. De rij loopt door tot de rand van het scherm, want een chip
   die halverwege wordt afgesneden is het enige eerlijke signaal dat er meer
   staat — hetzelfde principe als de onderwerpbalk op het forum. */
.rail-wrap{position:relative}
[data-rail]{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-block:4px;
  cursor:grab;overscroll-behavior-x:contain}
[data-rail]::-webkit-scrollbar{display:none}
[data-rail].is-grabbing{cursor:grabbing;scroll-snap-type:none;user-select:none}
[data-rail] > *{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap}
/* De pijlen staan boven de rij, rechts uitgelijnd met de kop ernaast. */
.rail-nav{position:absolute;top:-64px;right:0;display:flex;gap:8px}
.rail-nav[hidden]{display:none}
.rail-nav .carousel__btn{width:38px;height:38px}
.rail-nav .carousel__btn:disabled{opacity:.35;cursor:default}
.rail-nav .carousel__btn:disabled:hover{border-color:var(--line)}
@media(max-width:640px){.rail-nav{display:none}}

/* ---- De onderzoeksindex ---------------------------------------------------
   Gekozen uit twee varianten (14 aug-review, smaak A). De rubriek staat links
   en houdt zijn plek; de papers lopen ernaast als genummerde index. Tien papers
   lezen als één, en een rubriek is altijd op dezelfde hoogte terug te vinden.
   Het nummer is een volgnummer binnen de rubriek, geen rangorde. */
.ri-list{list-style:none;margin:0;padding:0;counter-reset:ri}
.ri-list li{counter-increment:ri;border-top:1px solid var(--line)}
.ri-list li:first-child{border-top:0}
.ri-row{display:grid;grid-template-columns:2.2rem 1fr;gap:0 16px;padding:16px 0;align-items:baseline}
.ri-row::before{content:counter(ri,decimal-leading-zero);color:var(--silver-deep,var(--muted));
  font-size:var(--step--1);font-variant-numeric:tabular-nums}
.ri-row__t{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);
  letter-spacing:-.02em;grid-column:2;transition:color .15s}
.ri-row:hover .ri-row__t{color:var(--purple-action)}
.ri-row__d{grid-column:2;color:var(--muted);font-size:var(--step--1);line-height:1.55;margin-top:4px;max-width:62ch}
.ri-row__m{grid-column:2;color:var(--silver-deep,var(--muted));font-size:var(--step--1);margin-top:8px;
  display:flex;flex-wrap:wrap;gap:4px 14px}
/* Het aantal staat er alleen als er iets te tellen valt: nooit "0 papers". */
.ri-count{color:var(--silver-deep,var(--muted));font-size:var(--step--1);margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
@media(max-width:820px){
  .ri-row{grid-template-columns:1.9rem 1fr;gap:0 12px}
}


/* ---- page styles: Amanah about.html ---- */

  .people-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
  @media(max-width:900px){.people-row{grid-template-columns:repeat(3,1fr)}}
  /* Op een telefoon wordt de bank een rij om doorheen te vegen, net als de
     rubrieken en de papers. Gestapeld is elk lid een half scherm hoog en zijn
     er vijf schermen nodig om te zien wie er zit. De rij loopt door de gutter
     heen zodat de volgende door de rand wordt afgesneden; scroll-padding houdt
     het snappunt gelijk aan die padding. */
  @media(max-width:560px){
    .people-row{
      display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
      scrollbar-width:none;-ms-overflow-style:none;
      margin-inline:calc(var(--gutter) * -1);
      padding-inline:var(--gutter);padding-block:4px;
      scroll-padding-inline:var(--gutter);
    }
    .people-row::-webkit-scrollbar{display:none}
    .people-row > *{flex:0 0 min(46vw,190px);scroll-snap-align:start}
  }
  .member-tile{text-align:center}
  .member-tile .avatar{width:72px;height:72px;border-radius:50%;background:var(--silver-grad);margin:0 auto 14px;display:block}
  .member-tile h3{font-size:var(--step-0);letter-spacing:-.01em}
  .member-tile span{display:block;color:var(--muted);font-size:var(--step--1);margin-top:4px}

/* ---- page styles: Amanah consult.html ---- */

  .member-tile{text-align:center}
  .member-tile .avatar{width:64px;height:64px;border-radius:50%;background:var(--silver-grad);margin:0 auto 16px;display:block}
  .member-tile h3{font-size:var(--step-1);letter-spacing:-.01em}
  .member-tile span{display:block;color:var(--muted);font-size:var(--step--1);margin-top:4px}

  .slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
  @media(max-width:520px){.slot-grid{grid-template-columns:repeat(2,1fr)}}
  .slot-grid .chip{width:100%;text-align:center;cursor:pointer;background:none;font:inherit}
  .slot-grid .chip[aria-pressed="true"]{border-color:var(--purple-action);color:var(--purple-action)}

  .consult-form{display:grid;gap:14px;margin-top:26px}
  .consult-form input,.consult-form textarea{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9em 1.1em;background:#fff;font-family:var(--font-body);font-size:var(--step-0);color:var(--indigo-ink);resize:vertical}
  .consult-form textarea{min-height:100px}
  .consult-form .fine-note{color:var(--muted);font-size:var(--step--1);margin:0}

  .faq-list{border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line);padding:18px 2px}
  .faq-item summary{cursor:pointer;font-weight:600;font-family:var(--font-display);letter-spacing:-.01em;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";color:var(--purple-action);font-weight:700;flex:none}
  .faq-item[open] summary::after{content:"–"}
  .faq-item p{color:var(--muted);margin-top:12px;font-size:var(--step--1);max-width:60ch}

/* ---- page styles: Amanah forum-thread-pension-fix.html ---- */

  .tw-wrap{padding-block:clamp(24px,4vw,44px)}
  .tw-back{display:inline-flex;align-items:center;gap:.5em;color:var(--muted);font-weight:600;font-size:var(--step--1);margin-bottom:18px}
  .tw-back:hover{color:var(--purple-action)}

  /* Question card */
  .tw-q{background:linear-gradient(150deg,#F5E7EB,#F1DDE3);border:1px solid var(--line);
    border-radius:var(--radius-xl);padding:clamp(24px,3vw,38px)}
  .tw-q h1{font-size:var(--step-3);letter-spacing:-.035em;margin-bottom:12px}
  .tw-q .tw-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
  .tw-q p{color:var(--fg);max-width:62ch}
  .tw-q__meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
  .tw-q__meta .who{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--step--1)}
  .tw-q__meta .who .avatar{width:32px;height:32px;border-radius:50%;background:var(--silver-grad);flex:none}


  /* Replies */
  .tw-repliesHead{display:flex;align-items:baseline;gap:12px;margin:clamp(28px,4vw,44px) 0 16px}
  .tw-repliesHead h2{font-size:var(--step-2);letter-spacing:-.03em}
  .tw-repliesHead .cnt{color:var(--muted);font-size:var(--step--1);font-weight:600}
  .tw-replies{display:flex;flex-direction:column;gap:12px}
  .tw-reply{background:#fff;border:1px solid var(--line);
    border-radius:var(--radius-lg);padding:clamp(16px,2vw,22px)}
  .tw-reply__body .who{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:var(--step--1);margin-bottom:6px}
  .tw-reply__body .who .avatar{width:26px;height:26px;border-radius:50%;background:var(--silver-grad);flex:none}
  .tw-reply__body p{color:var(--fg)}
  .tw-reply--new{animation:pop .5s var(--ease)}
  @keyframes pop{from{transform:scale(.99);box-shadow:0 0 0 2px var(--teal)}to{transform:none}}

  /* Reply composer */
  .tw-composer{background:#F5E7EB;border-radius:var(--radius-xl);padding:clamp(20px,2.6vw,28px);margin-top:18px}
  .tw-composer .row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
  .tw-composer .row .avatar{width:38px;height:38px;border-radius:50%;background:var(--silver-grad);flex:none}
  .tw-composer .row b{font-weight:600}
  .tw-composer .row span{display:block;color:var(--muted);font-size:var(--step--1)}
  .tw-composer textarea{width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:.9em 1.1em;
    font-family:inherit;font-size:var(--step-0);min-height:90px;resize:vertical;background:#fff;color:inherit}
  .tw-composer textarea:focus{outline:2px solid var(--purple-action);outline-offset:1px;border-color:transparent}
  .tw-composer__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px}
  .tw-composer__note{color:var(--muted);font-size:var(--step--1)}


/* ---- page styles: Amanah paper-sukuk-asset-backing.html ---- */


  /* ---- Paper layout: table of contents beside the prose ------------------ */
  .paper{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(32px,5vw,72px);align-items:start}
  @media(max-width:1000px){.paper{grid-template-columns:1fr}}
  .paper__body{min-width:0;max-width:70ch}

  .toc{position:sticky;top:110px;font-size:var(--step--1);border-left:1px solid var(--line);padding-left:20px}
  @media(max-width:1000px){
    .toc{position:static;border-left:0;border:1px solid var(--line);border-radius:var(--radius);padding:0;order:-1;width:100%}
    .toc .toc__list{padding:0 18px 16px}
    .toc__head{padding:16px 18px;margin:0;cursor:pointer;list-style:none}
    .toc__head::-webkit-details-marker{display:none}
    .toc__head::after{content:"";float:right;width:8px;height:8px;margin-top:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);opacity:.5}
    .toc[open] .toc__head::after{transform:rotate(225deg)}
  }
  .toc__head{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:500}
  .toc__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .toc__list a{display:block;padding:5px 0;color:var(--muted);line-height:1.35;transition:color .15s}
  .toc__list a:hover{color:var(--fg)}
  .toc__list a[data-current]{color:var(--purple-action);font-weight:500}
  .toc__list .toc--sub a{padding-left:16px;font-size:.94em;opacity:.85}
  .toc__n{display:inline-block;min-width:1.9em;color:var(--silver-deep);font-variant-numeric:tabular-nums}

  /* ---- Paper head -------------------------------------------------------- */
  .paper-head{max-width:none}
  .paper-head h1{max-width:24ch}
  .paper-head .dek{max-width:56ch}
  .paper-head__grid{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(30px,4vw,44px)}
  @media(max-width:1000px){.paper-head__grid{grid-template-columns:1fr;gap:24px}}
  .paper-head__grid .abstract{margin-top:0}
  .paper-head__facts{font-size:var(--step--1);color:var(--muted);display:flex;flex-direction:column;gap:10px}
  .paper-head__facts b{display:block;color:var(--fg);font-weight:600}
  @media(max-width:1000px){.paper-head__facts{flex-flow:row wrap;gap:8px 28px}}
  .paper-head h1{margin-top:.5em;letter-spacing:-.03em}
  .paper-head .dek{font-size:var(--step-1);color:var(--muted);margin-top:.6em;line-height:1.45}
  .paper-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--muted)}
  .paper-meta b{font-weight:500;color:var(--fg)}

  .members-first{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:var(--purple);color:var(--teal);font-size:var(--step--1);font-weight:500}
  .members-first .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}

  .abstract{margin-top:clamp(30px,4vw,44px);padding:clamp(22px,3vw,30px);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(157,7,49,.06),rgba(232,169,184,.06));border:1px solid var(--line)}
  .abstract h2{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-action);margin:0 0 14px}
  .abstract p{margin:0;max-width:none}
  .abstract p+p{margin-top:14px}


  /* ---- Paper prose ------------------------------------------------------- */
  .paper__body h2{margin-top:clamp(40px,5vw,60px);letter-spacing:-.02em;scroll-margin-top:110px}
  .paper__body h3{margin-top:clamp(28px,3.5vw,38px);font-size:var(--step-1);scroll-margin-top:110px}
  .paper__body h2 .sec-n,.paper__body h3 .sec-n{color:var(--silver-deep);font-weight:400;margin-right:.5em;font-variant-numeric:tabular-nums}
  .paper__body p{margin-top:1em;line-height:1.68}


  .fnref a{font-size:.72em;vertical-align:super;line-height:0;padding:0 .15em;color:var(--purple-action);text-decoration:none}
  .fnref a:hover{text-decoration:underline}

  .paper-notes{margin-top:clamp(44px,5vw,64px);padding-top:clamp(28px,3.5vw,38px);border-top:1px solid var(--line)}
  .paper-notes h2{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
  .paper-notes ol,.paper-notes ul{margin:0;padding-left:1.4em;display:grid;gap:10px;font-size:var(--step--1);color:var(--muted);line-height:1.6}
  .paper-notes li{max-width:64ch}
  .paper-notes .back{margin-left:.4em;text-decoration:none;color:var(--purple-action)}
  .paper-notes+.paper-notes{margin-top:clamp(30px,3.5vw,40px)}

  /* ---- Index ------------------------------------------------------------- */
  .theme-block+.theme-block{margin-top:clamp(44px,5vw,64px)}
  .theme-block h2{font-size:var(--step-2);letter-spacing:-.02em;scroll-margin-top:110px}
  .theme-block .empty{color:var(--muted);margin-top:14px;font-size:var(--step--1)}

/* ---- page styles: Amanah article-cash-isa.html ---- */


  .byline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--step--1)}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--silver-grad);flex:none}
  .prose{max-width:68ch}
  .prose h2{font-size:var(--step-1);letter-spacing:-.02em;margin:2em 0 .7em}
  .prose h2:first-child{margin-top:0}
  .prose p{color:var(--muted);line-height:1.75}
  .prose p+p{margin-top:.9em}
  .prose ul{margin-top:.9em;padding-left:1.2em;display:flex;flex-direction:column;gap:.6em}
  .prose li{color:var(--muted);line-height:1.7}
  .prose li strong{color:var(--fg)}
  .answers{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  @media(max-width:820px){.answers{grid-template-columns:1fr}}
  .answer-card{display:flex;flex-direction:column;gap:12px}
  .answer-card .tag{align-self:flex-start}
  .answer-card h3{font-size:var(--step-1);letter-spacing:-.02em}
  .answer-card .by{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--step--1)}
  .not-advice{max-width:68ch;margin-top:clamp(28px,4vw,44px);padding:18px 20px;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);font-size:var(--step--1);line-height:1.6}

/* ---- page styles: Amanah articles.html ---- */

  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}

  /* Answer cards */
  .answers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media(max-width:920px){.answers{grid-template-columns:1fr}}
  .answer-card{display:flex;flex-direction:column;gap:12px}
  .answer-card .tag{align-self:flex-start}
  .answer-card h3{font-size:var(--step-1);letter-spacing:-.02em}
  .answer-card .by{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--step--1)}
  .avatar{width:30px;height:30px;border-radius:50%;background:var(--silver-grad);flex:none}

  .cat-heading{font-size:var(--step-2);letter-spacing:-.03em;margin-bottom:22px;scroll-margin-top:90px}

  /* Brief band */
  .brief{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
  @media(max-width:820px){.brief{grid-template-columns:1fr}}
  .brief-form{display:flex;gap:10px;max-width:440px;margin-top:22px}
  .brief-form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:.9em 1.3em;background:#fff}

/* ---- page styles: Amanah research.html ---- */


  /* ---- Paper layout: table of contents beside the prose ------------------ */
  .paper{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:clamp(32px,5vw,72px);align-items:start}
  @media(max-width:1000px){.paper{grid-template-columns:1fr}}
  .paper__body{min-width:0;max-width:70ch}

  .toc{position:sticky;top:110px;font-size:var(--step--1);border-left:1px solid var(--line);padding-left:20px}
  @media(max-width:1000px){
    .toc{position:static;border-left:0;border:1px solid var(--line);border-radius:var(--radius);padding:0;order:-1;width:100%}
    .toc .toc__list{padding:0 18px 16px}
    .toc__head{padding:16px 18px;margin:0;cursor:pointer;list-style:none}
    .toc__head::-webkit-details-marker{display:none}
    .toc__head::after{content:"";float:right;width:8px;height:8px;margin-top:6px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);opacity:.5}
    .toc[open] .toc__head::after{transform:rotate(225deg)}
  }
  .toc__head{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:500}
  .toc__list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .toc__list a{display:block;padding:5px 0;color:var(--muted);line-height:1.35;transition:color .15s}
  .toc__list a:hover{color:var(--fg)}
  .toc__list a[data-current]{color:var(--purple-action);font-weight:500}
  .toc__list .toc--sub a{padding-left:16px;font-size:.94em;opacity:.85}
  .toc__n{display:inline-block;min-width:1.9em;color:var(--silver-deep);font-variant-numeric:tabular-nums}

  /* ---- Paper head -------------------------------------------------------- */
  .paper-head{max-width:70ch}
  .paper-head h1{margin-top:.5em;letter-spacing:-.03em}
  .paper-head .dek{font-size:var(--step-1);color:var(--muted);margin-top:.6em;line-height:1.45}
  .paper-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--muted)}
  .paper-meta b{font-weight:500;color:var(--fg)}

  .members-first{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:var(--purple);color:var(--teal);font-size:var(--step--1);font-weight:500}
  .members-first .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex:none}

  .abstract{margin-top:clamp(30px,4vw,44px);padding:clamp(22px,3vw,30px);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(157,7,49,.06),rgba(232,169,184,.06));border:1px solid var(--line)}
  .abstract h2{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-action);margin:0 0 14px}
  .abstract p{margin:0;max-width:none}
  .abstract p+p{margin-top:14px}


  /* ---- Paper prose ------------------------------------------------------- */
  .paper__body h2{margin-top:clamp(40px,5vw,60px);letter-spacing:-.02em;scroll-margin-top:110px}
  .paper__body h3{margin-top:clamp(28px,3.5vw,38px);font-size:var(--step-1);scroll-margin-top:110px}
  .paper__body h2 .sec-n,.paper__body h3 .sec-n{color:var(--silver-deep);font-weight:400;margin-right:.5em;font-variant-numeric:tabular-nums}
  .paper__body p{margin-top:1em;line-height:1.68}


  .fnref a{font-size:.72em;vertical-align:super;line-height:0;padding:0 .15em;color:var(--purple-action);text-decoration:none}
  .fnref a:hover{text-decoration:underline}

  .paper-notes{margin-top:clamp(44px,5vw,64px);padding-top:clamp(28px,3.5vw,38px);border-top:1px solid var(--line)}
  .paper-notes h2{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
  .paper-notes ol,.paper-notes ul{margin:0;padding-left:1.4em;display:grid;gap:10px;font-size:var(--step--1);color:var(--muted);line-height:1.6}
  .paper-notes li{max-width:64ch}
  .paper-notes .back{margin-left:.4em;text-decoration:none;color:var(--purple-action)}
  .paper-notes+.paper-notes{margin-top:clamp(30px,3.5vw,40px)}

  /* ---- Index ------------------------------------------------------------- */
  .theme-block+.theme-block{margin-top:clamp(44px,5vw,64px)}
  .theme-block h2{font-size:var(--step-2);letter-spacing:-.02em;scroll-margin-top:110px}
  .theme-block .empty{color:var(--muted);margin-top:14px;font-size:var(--step--1)}

/* ---- page styles: Amanah index.html ---- */

  /* ---- Warm hero: soft rounded panel, search led ---------------------- */
  .hw-hero{margin:14px var(--gutter) 0;border-radius:var(--radius-xl);
    background:linear-gradient(150deg,#9D0731 0%,#6E0522 60%,#58041B 100%);
    color:#fff;position:relative;overflow:hidden;
    padding:clamp(34px,4.5vw,60px) clamp(22px,5vw,64px)}
  .hw-hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
    top:-180px;right:-120px;background:radial-gradient(circle,rgba(232,169,184,.5),transparent 62%);opacity:.5}
  .hw-hero::after{content:"";position:absolute;width:440px;height:440px;border-radius:50%;
    bottom:-220px;left:-80px;background:radial-gradient(circle,rgba(157,7,49,.65),transparent 60%);opacity:.6}
  .hw-hero__in{position:relative;z-index:1;max-width:760px;margin-inline:auto;text-align:center}
  .hw-hero h1{font-size:var(--step-4);letter-spacing:-.04em;max-width:16ch;margin:0 auto 14px}
  /* Zelfde maat als de kop op het forum: gewone tekstgrootte, 46ch breed. Op
     step-1 werd deze regel bijna zo zwaar als de kop erboven. */
  .hw-hero .lead{font-size:var(--step-0);line-height:1.6;color:rgba(227,230,234,.86);max-width:46ch;margin:0 auto 26px}
  .hw-search{max-width:600px;margin-inline:auto;box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
  .hw-trending{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
  .hw-trending .chip{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.88)}
  .hw-trending .chip:hover{border-color:var(--teal);color:var(--teal)}

  /* ---- Big rounded category cards ------------------------------------- */
  .hw-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  @media(max-width:820px){.hw-cats{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.hw-cats{grid-template-columns:1fr}}
  .hw-cat{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,30px);
    border-radius:var(--radius-lg);color:var(--indigo-ink);border:1px solid transparent;
    transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
  .hw-cat:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(30,30,30,.4)}
  .hw-cat .ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;flex:none}
  .hw-cat .ico svg{width:22px;height:22px}
  .hw-cat b{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);letter-spacing:-.02em}
  .hw-cat span{color:var(--muted);font-size:var(--step--1)}
  .hw-cat .cc{margin-top:4px;font-weight:600;font-size:var(--step--1);color:var(--purple-action)}
  .hw-cat--a{background:#F5E7EB}.hw-cat--a .ico{background:var(--purple-action)}
  .hw-cat--b{background:#FAF8F5}.hw-cat--b .ico{background:#9D0731}.hw-cat--b .cc{color:#6E0522}
  .hw-cat--c{background:#F5E7EB}.hw-cat--c .ico{background:var(--purple)}
  .hw-cat--d{background:#FAF8F5}.hw-cat--d .ico{background:#9D0731}.hw-cat--d .cc{color:#6E0522}
  .hw-cat--e{background:#F5E7EB}.hw-cat--e .ico{background:var(--purple-action)}

  /* ---- Friendly answer cards ------------------------------------------ */
  .hw-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  /* Onder de 920 wordt dit een rij om doorheen te vegen, niet drie kaarten
     onder elkaar. De rij loopt door de marge heen en de kaart is smaller dan
     het scherm, dus de volgende steekt er altijd net uit: dat is het enige
     wat vertelt dat er meer staat. */
  @media(max-width:920px){
    .hw-answers{
      display:flex;gap:14px;
      overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
      scrollbar-width:none;
      margin-inline:calc(var(--gutter) * -1);
      padding:2px var(--gutter) 8px;
      scroll-padding-inline:var(--gutter);
    }
    .hw-answers::-webkit-scrollbar{display:none}
    .hw-acard{flex:0 0 min(78vw,340px);scroll-snap-align:start}
    /* Een hover-lift heeft geen betekenis op een vinger en botst met de veeg. */
    .hw-acard:hover{transform:none;box-shadow:none;border-color:var(--line)}
  }
  .hw-acard{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.6vw,30px);
    border-radius:var(--radius-lg);background:#fff;border:1px solid var(--line);
    transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
  .hw-acard:hover{transform:translateY(-4px);box-shadow:0 26px 50px -34px rgba(30,30,30,.35);border-color:transparent}
  .hw-acard h3{font-size:var(--step-1);letter-spacing:-.02em}
  .hw-acard p{color:var(--muted);font-size:var(--step--1)}
  .hw-acard .by{margin-top:auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--step--1)}
  .hw-acard .avatar{width:30px;height:30px;border-radius:50%;background:var(--silver-grad);flex:none}

  /* ---- Community + brief ---------------------------------------------- */
  .hw-com{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  @media(max-width:820px){.hw-com{grid-template-columns:1fr}}
  .hw-comcard{padding:clamp(28px,3.4vw,44px);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:14px;min-height:250px;color:#fff}
  .hw-comcard h3{font-size:var(--step-2)}
  .hw-comcard p{color:rgba(227,230,234,.85);max-width:42ch}
  .hw-comcard .meta{margin-top:auto;font-size:var(--step--1);color:rgba(227,230,234,.8);font-weight:600}
  .hw-comcard--open{background:linear-gradient(140deg,#9D0731,#6E0522)}
  .hw-comcard--orbit{background:linear-gradient(140deg,#6E0522,#1E1E1E)}
  .hw-comcard .lock{display:inline-flex;align-items:center;gap:.5em;font-size:var(--step--1);font-weight:600;color:var(--teal);letter-spacing:.04em;text-transform:uppercase}

  .hw-brief{border-radius:var(--radius-xl);background:#F5E7EB;padding:clamp(32px,4vw,64px);
    display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center}
  @media(max-width:820px){.hw-brief{grid-template-columns:1fr}}
  .hw-brief h2{font-size:var(--step-3);letter-spacing:-.035em;max-width:20ch}
  .hw-brief p{color:var(--muted);margin-top:12px}
  .hw-briefform{display:flex;gap:10px;max-width:440px;margin-top:22px}
  .hw-briefform input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:.9em 1.3em;background:#fff}
  @media(max-width:480px){.hw-briefform{flex-wrap:wrap}.hw-briefform .btn{flex:1 1 auto}}
  .hw-briefcard{background:#fff;border-radius:var(--radius-lg);padding:clamp(22px,3vw,30px);border:1px solid var(--line)}
  .hw-briefcard h3{font-size:var(--step-1);margin:12px 0 8px;letter-spacing:-.02em}
  .hw-briefcard p{color:var(--muted);font-size:var(--step--1);margin:0}