/* Misaq brand v3 — cherry/cream system, ported from _brand-kit/reference/brand.css.
   This file is the single source of the v3 tokens and shared components (nav, footer,
   section bands, polaroids, stats, accordion, app-style screens). Served with
   max-age=0 (see vercel.json /assets/css override), so edits land immediately —
   but PAGE BACKGROUND PAINT STILL LIVES INLINE IN EACH PAGE with literal fallbacks;
   a paint rule that exists only here has produced two outages before.
   Differences from the kit file, on purpose:
   - the duplicated "tinder-copy / restored" block (kit lines 444-513) is folded to
     one copy, keeping `.compat .box .q` (the selector the markup actually uses);
   - the `.idc` prototype ID card, its `.styles` picker and the unused `.gate` are
     omitted — Moiz kept the five shipped Nikah ID themes (2026-11-13);
   - body background carries a literal fallback before the var;
   - html gets scroll-padding-top so in-page anchors land below the sticky nav. */
:root{--cherry:#C8102E;--cherry2:#E8304A;--pome:#8E1B30;--wine:#4A0B12;--wine2:#2E060B;--night:#1E1420;--pink:#F3DDE5;--blush:#FDE9E6;--blushtxt:#FFB4B4;--lilac:#E9A8D6;--safe:#E3E8F0;--safeink:#17332B;--cream:#F6F1EA;--paper:#FBF8F3;--cream2:#EFE7DC;--ink:#1A1A1C;--ink2:#5B5B61;--ink3:#8A8A90;--line:rgba(26,26,28,.10);--linel:rgba(246,241,234,.16);--gold:#C9A24B;--gold2:#F2D98A;--blue:#2563A8;--blue2:#2F6FD8;--green:#22A06B;--serif:'Fraunces',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--script:'Great Vibes',cursive;--mono:'IBM Plex Mono',ui-monospace,monospace;--arabic:'Noto Naskh Arabic',serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
@media (max-width:1100px){html{scroll-padding-top:64px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;font-family:var(--sans);color:#1A1A1C;color:var(--ink);background:#F6F1EA;background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit}
.ic{width:22px;height:22px;flex-shrink:0}
.wrap{max-width:1260px;margin:0 auto;padding:0 40px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:56px;padding:0 30px;border-radius:999px;font-weight:800;font-size:16px;border:none;cursor:pointer;transition:transform .15s,background .2s,border-color .2s;font-family:inherit;white-space:nowrap;color:var(--ink)}
.btn:active{transform:scale(.98)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--cherry);outline-offset:3px}
.primary{background:var(--cherry);color:#fff}.primary:hover{background:#B00E29}
.white{background:#fff;color:var(--ink)}.white:hover{background:#F3EDE6}
.outline{background:transparent;color:var(--ink);border:2px solid var(--ink)}.outline:hover{background:rgba(26,26,28,.06)}
.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}.ghost:hover{border-color:#fff}
.soonpill{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.6);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.soonpill i.dot{width:8px;height:8px;border-radius:999px;background:var(--cherry);display:block}
.wa-cta{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 24px;border-radius:999px;background:var(--green);color:#fff;font-weight:800;font-size:19px;text-decoration:none}
.wa-cta:hover{background:#1C8A5B}
.meanwhile{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--cherry);text-decoration:underline;text-underline-offset:4px;padding:10px 0;margin:-10px 0}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.04}
h2{font-size:clamp(40px,5.6vw,80px)}
h3{font-size:clamp(34px,4.2vw,60px)}
em{font-style:italic}
.script{font-family:var(--script);font-style:normal;font-weight:400;letter-spacing:0}
.label{font-size:clamp(18px,1.8vw,24px);font-weight:600;margin:22px 0 0;opacity:.8}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pome)}
.p{font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:820px;margin:0 auto}
.center{text-align:center}
.learn{display:inline-flex;align-items:center;gap:6px;font-weight:800;text-decoration:underline;text-underline-offset:4px;padding:10px 0;margin:-10px 0}
.arabic{font-family:var(--arabic);direction:rtl;color:var(--gold);font-size:28px;line-height:1.6}
/* nav */
/* 64px desktop / 56px phone. The height never changes on scroll — only the
   shadow fades in — so the bar can never shift the page under the reader. */
nav.site{position:sticky;top:0;z-index:50;background:var(--cream);
  border-bottom:1px solid var(--cream2);box-shadow:0 0 0 rgba(26,26,28,0);
  transition:box-shadow .25s ease}
nav.site.sc{box-shadow:0 6px 18px rgba(26,26,28,.06)}
nav.site .wrap{display:flex;align-items:center;gap:22px;height:64px}
/* line-height:1 keeps the lock-up box the height of the mark, and the mark
   needs BOTH dimensions here — the markup carries width/height attributes,
   so a width-only rule leaves a 32px-tall box and a squashed mark. */
.wordmark{font-weight:800;font-size:24px;line-height:1;letter-spacing:-.03em;color:var(--cherry);display:flex;align-items:center;gap:8px;padding:0;min-height:44px}
.wordmark img{width:26px;height:26px}
/* the lockup — brand_shell.lockup(): official mark <img> + the word in the
   loaded brand font. Word colour and size inherit from the context
   (.wordmark = cherry 36px, footer .brand = cream 20px). */
.lockup{display:inline-flex;align-items:center;gap:10px}
.lockup img{display:block}
.links{display:flex;gap:28px;font-weight:600;font-size:15px;margin-left:22px;white-space:nowrap}
.links a{color:var(--ink2)}
.links a:hover,.links a.on{color:var(--ink)}
nav.site .cta{margin-left:auto;display:flex;gap:14px;align-items:center}
nav.site .btn{height:44px;padding:0 20px;font-size:15px}
.burger{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;align-items:center;justify-content:center;cursor:pointer}
.sheet{position:fixed;inset:0;background:var(--cream);z-index:60;display:none;flex-direction:column;padding:30px 28px;overflow-y:auto}
.sheet.open{display:flex}
.sheet .x{align-self:flex-end;width:48px;height:48px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sheet a.big{font-family:var(--serif);font-size:34px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--line)}
.sheet .btn{margin-top:auto}
/* hero (stories strip) */
.hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:var(--wine)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.slide.on{opacity:1}
.slide .pic{position:absolute;inset:0;background-size:cover;background-position:center 30%;transform:scale(1.02);transition:transform 5s linear}
.slide.on .pic{transform:scale(1.14)}
/* Spec gradient + a left scrim behind the text column, so the headline
   passes AA on every slide, not just the dark ones. */
.hero .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,0,5,.45) 0%,rgba(20,0,5,.45) 46%,rgba(20,0,5,0) 78%),linear-gradient(180deg,rgba(20,0,5,.55),rgba(20,0,5,.25) 35%,rgba(46,6,11,.88))}
.bars{position:absolute;top:22px;left:50%;transform:translateX(-50%);width:min(1180px,calc(100% - 80px));display:grid;grid-template-columns:repeat(4,1fr);gap:6px;z-index:3}
.bars i{height:3px;border-radius:999px;background:rgba(255,255,255,.3);overflow:hidden;display:block;cursor:pointer}
.bars i b{display:block;height:100%;width:0;background:#fff}
.bars i.done b{width:100%}.bars i.run b{animation:barfill 4s linear forwards}
@keyframes barfill{to{width:100%}}
.hero .wrap{position:relative;padding-bottom:96px;padding-top:140px;width:100%}
.hero h1{font-size:clamp(54px,8.6vw,122px);line-height:.94;max-width:1000px}
.hero h1 .script{color:var(--blushtxt);font-size:1.12em;line-height:.8}
.hero .sub{font-size:clamp(18px,2vw,24px);max-width:640px;margin:26px 0 0;color:rgba(255,244,242,.9)}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;align-items:center}
.hero .soonrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:26px}
.hero .soonpill{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.hero .meanwhile{color:#fff}
.up{opacity:0;transform:translateY(14px);animation:up .3s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes up{to{opacity:1;transform:none}}
section{padding:clamp(90px,10vw,150px) 0}
/* tiles */
.changed h2{font-size:clamp(36px,4.6vw,64px);margin-bottom:48px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tile{position:relative;min-height:700px;padding:52px 44px;display:flex;flex-direction:column;overflow:hidden;border-radius:4px}
.tile .k{font-weight:700;font-size:20px}
.tile h3{font-size:clamp(38px,3.6vw,54px);margin-top:8px;max-width:420px}
.tile .obj{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 0}
.tile .obj svg{width:min(300px,70%);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25))}
.tile .cap{font-size:19px;margin:0 0 10px}
.t-wine{background:var(--wine);color:#FFF4F2}
.t-night{background:var(--night);color:#F6E6F2}.t-night h3,.t-night .k{color:var(--lilac)}
.t-pink{background:var(--pink);color:var(--ink)}
.t-white{background:#fff;color:var(--ink)}.t-white .k{color:var(--pome)}
/* red quote */
.quote{background:var(--cherry);color:#fff}
.quote h2{font-size:clamp(40px,5vw,72px);max-width:1100px;margin:0 0 42px}
.quote .sign{font-family:var(--serif);font-style:italic;font-size:clamp(30px,4vw,56px);font-weight:500;margin-top:70px}
.quote .grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.quote.white{background:#fff;color:var(--cherry)}
.quote.white h2{max-width:1100px}
/* blush stats */
.blushb{background:var(--blush);color:var(--ink);position:relative;overflow:hidden}
.blushb h2 .script{color:var(--cherry)}
.statsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
.stat{background:#fff;padding:40px 36px;border-radius:4px;box-shadow:0 20px 50px rgba(26,26,28,.08)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(52px,5.4vw,84px);font-weight:600;color:var(--cherry);line-height:1;letter-spacing:-.03em}
.stat p{margin:16px 0 0;font-size:19px;line-height:1.4}
.stat small{display:block;margin-top:14px;font-size:13px;color:var(--ink2)}
.stat small a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.reqs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:60px}
.reqs span{background:#fff;border:1px solid var(--line);padding:12px 20px;border-radius:999px;font-weight:700;font-size:17px;text-decoration:line-through;color:var(--ink2);text-decoration-color:var(--cherry);text-decoration-thickness:2px}
.reqs .note{text-decoration:none;color:var(--cherry);background:transparent;border:0;font-family:var(--serif);font-style:italic;font-size:22px;font-weight:500}
/* polaroid + bubbles */
.pols{position:relative;height:clamp(420px,46vw,620px);margin-top:70px}
.pol{position:absolute;padding:0;background:#fff;box-shadow:0 30px 60px rgba(0,0,0,.35);transform:rotate(var(--r));transition:transform .5s}
.pol:hover{transform:rotate(0) scale(1.03);z-index:5}
.pol img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.bubble{position:absolute;background:#fff;border-radius:22px;padding:16px 22px;font-size:20px;font-weight:600;box-shadow:0 14px 30px rgba(0,0,0,.12);transform:rotate(var(--r));max-width:300px;line-height:1.3}
.bubble::after{content:'';position:absolute;left:28px;bottom:-10px;width:20px;height:20px;background:#fff;transform:rotate(45deg);border-radius:4px}
/* wine */
.wine{background:var(--wine);color:#FFF4F2}
.stack h2{color:var(--cherry2);font-size:clamp(44px,6vw,84px);line-height:1.08}
.stack .meet{color:var(--cherry2);font-size:22px;font-weight:700;margin-top:36px}
.feature{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;margin-top:clamp(90px,10vw,150px)}
.feature .fi{width:72px;height:72px}
.feature .fi .ic{width:72px;height:72px;stroke-width:1.3}
.feature .p{max-width:860px}
/* safety */
.safety{background:var(--safe);color:var(--safeink)}
.safety h2{font-size:clamp(44px,6vw,86px);max-width:1000px;margin:0 auto}
.safety .label{color:var(--safeink)}
.approach{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:end;margin-top:clamp(110px,13vw,200px)}
.approach h3{font-family:var(--sans);font-weight:600;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.02em}
.approach p{margin:0;font-size:22px;line-height:1.5}
.scards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.scard{background:#fff;padding:48px 44px 40px;min-height:600px;display:flex;flex-direction:column;color:var(--ink);border-radius:4px}
.scard .k{font-size:20px;font-weight:600;color:var(--ink2)}
.scard h4{font-size:clamp(36px,3.4vw,52px);margin:10px 0 24px;line-height:1.05}
.scard p{margin:0;font-size:20px;line-height:1.5;color:var(--ink2)}
.scard .obj{flex:1;display:flex;align-items:center;justify-content:center;padding-top:40px}
.scard .obj svg{width:min(260px,65%);height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.18))}
/* investors */
.invest .grid2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.invest h2{font-size:clamp(40px,5vw,72px)}
.invest .p{margin:26px 0 0;max-width:none;font-size:20px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:40px}
.fact{background:#fff;padding:28px;border-radius:4px}
.fact b{display:block;font-family:var(--serif);font-size:48px;font-weight:600;color:var(--cherry);line-height:1;letter-spacing:-.03em}
.fact small{display:block;margin-top:10px;font-size:14px;color:var(--ink2);font-weight:700;letter-spacing:.02em}
/* invest: one action. The plain-text address is for mail clients that never
   open — user-select:all so one tap grabs the whole thing. */
.investcta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:40px}
.investmail{font-size:15px;color:var(--ink2);margin:0}
.investmail .sel{font-weight:700;color:var(--ink);user-select:all;-webkit-user-select:all}
.disc{font-size:13px;color:var(--ink2);margin-top:22px;line-height:1.5}
/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;margin-top:80px;text-align:center}
/* team tiles — flat and aligned: identical frames, no rotation, hover is a
   4px lift only; the group chip rides the bottom so a row's chips share a
   baseline whatever the name length. */
.member{display:flex;flex-direction:column;align-items:center}
.member .ph{width:100%;aspect-ratio:1;background:#fff;padding:10px;border-radius:16px;border:1px solid var(--line);box-shadow:0 12px 30px rgba(26,26,28,.08);transition:transform .3s,box-shadow .3s;margin-bottom:22px}
.member:hover .ph{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,26,28,.12)}
.member .ph .av{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:clamp(40px,5vw,72px);color:#fff;background:var(--c,var(--cherry))}
/* the photo overlays the initials, which stay beneath as the onerror fallback */
.member .ph .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.member b{display:block;font-size:19px;font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
.member small{display:block;color:var(--ink2);font-size:15px;margin-top:4px}
.member .grp{display:inline-block;margin-top:auto;padding-top:10px;font-size:11px;letter-spacing:.14em;font-weight:700;text-transform:uppercase;color:#8B6914;background:#fff;padding:4px 10px;border-radius:999px}
/* night roadmap */
.night{background:var(--night);color:#F6E6F2;position:relative;overflow:hidden}
.night h2,.night h3,.night .label{color:var(--lilac)}
.stars{position:absolute;inset:0;pointer-events:none}
.stars i{position:absolute;width:3px;height:3px;border-radius:999px;background:#fff;animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:.9}}
.night .road,.night .step{text-align:left}.road{position:relative;max-width:720px;margin:80px auto 0}
.road::before{content:'';position:absolute;left:27px;top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,var(--gold),rgba(242,217,138,.1))}
.step{position:relative;display:flex;gap:26px;padding:0 0 38px}
.step .dot{width:56px;height:56px;border-radius:999px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:var(--gold2);position:relative;z-index:1}
.step.done .dot{background:var(--gold);color:#3A2600;border-color:var(--gold)}
.step.now .dot{border-color:var(--cherry2);color:var(--cherry2);box-shadow:0 0 0 0 rgba(224,36,63,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,36,63,.6)}100%{box-shadow:0 0 0 18px rgba(224,36,63,0)}}
.step b{display:block;font-family:var(--serif);font-size:26px;font-weight:600;color:#fff}
.step p{margin:6px 0 0;color:rgba(246,230,242,.75);font-size:17px}
.step .st{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--gold2);margin-top:6px;display:block}
.night .moon{position:absolute;right:4%;top:60px;width:min(300px,24vw);opacity:.95}
/* faq */
.faqs{background:var(--wine);color:#FFF4F2}
.faqs h2{font-size:clamp(40px,5.6vw,80px)}
.acc{max-width:860px;margin:70px auto 0;text-align:left;border-top:1px solid var(--linel)}
.acc details{border-bottom:1px solid var(--linel)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);font-weight:600}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{width:28px;height:28px;transition:transform .3s;color:var(--cherry2);flex-shrink:0}
.acc details[open] summary .ic{transform:rotate(45deg)}
.acc .a{padding:0 0 28px;font-size:18px;line-height:1.6;color:rgba(255,244,242,.85);max-width:720px}
.acc .a a{color:var(--gold2);text-decoration:underline;text-underline-offset:3px}
.faqs .fn{margin-top:80px;font-size:16px;color:rgba(255,244,242,.75)}
/* big statement */
.ummah{background:var(--cream);text-align:center}
.ummah h2{font-size:clamp(48px,8vw,130px);line-height:.92;letter-spacing:-.03em}
.ummah h2 .script{color:var(--cherry);font-size:1.1em}
.ummah .row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:40px}
/* final */
.final{background:var(--wine);color:#FFF4F2;position:relative;overflow:hidden;padding-bottom:0}
.final h2{max-width:720px;font-size:clamp(44px,6.4vw,92px)}
.final .soon{margin:40px 0 0;font-size:22px;font-weight:700}
.final .soon span{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);padding:6px 14px;border-radius:999px;font-size:14px;letter-spacing:.14em;margin-right:12px;vertical-align:middle}
.final .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.qrwrap{position:relative;width:330px;height:330px;margin-top:60px}
.qrwrap svg.ring{position:absolute;inset:0;width:100%;height:100%}
.qrwrap .box{position:absolute;inset:58px;background:#fff;border-radius:14px;padding:12px}
.qrwrap .box i{display:block;width:100%;height:100%;background:repeating-linear-gradient(0deg,#1A0507 0 7px,transparent 7px 14px),repeating-linear-gradient(90deg,#1A0507 0 7px,#fff 7px 14px);opacity:.85}
.qrwrap .box b{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;background:#fff url(/assets/brand/misaq-monogram-c8102e.png) center/36px no-repeat;border-radius:8px}
.final .mono{position:absolute;right:5%;bottom:120px;width:min(400px,26vw);aspect-ratio:440/402;height:auto;pointer-events:none}
.final .soon,.final .acts{max-width:640px;position:relative;z-index:2}
.socials{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.socials a{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--linel);font-weight:700;font-size:15px}
.socials a:hover{background:rgba(255,255,255,.08)}
/* footer — v3.1. Quiet cream-on-wine: headings are small uppercase labels,
   links are cream-72 lifting to cream on hover, and NOTHING in the footer is
   cherry (the grep gate enforces that). The one accent allowed is the
   WhatsApp link in green. */
footer.site{background:var(--wine2);color:rgba(246,241,234,.78);padding:120px 0 0;overflow:hidden}
footer.site .top{display:grid;grid-template-columns:1.5fr 1fr 1fr .9fr 1fr;gap:40px}
footer.site .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:20px;color:var(--cream)}
footer.site .brand img{width:26px}
footer.site .desc{margin:24px 0 20px;font-size:17px;line-height:1.55;max-width:470px;color:rgba(246,241,234,.72)}
footer.site .addr{font-size:15px;color:rgba(246,241,234,.72);line-height:1.6}
footer.site .addr a{color:rgba(246,241,234,.72);display:inline-block;padding:11px 0;margin:-11px 0}
footer.site .addr a:hover{color:var(--cream)}
/* column labels, not document headings — h5s here skipped heading levels
   on every page and said nothing a heading should */
footer.site .colh{display:block;margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cream)}
footer.site ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;font-size:15px}
footer.site ul a{color:rgba(246,241,234,.72);font-weight:500;display:inline-block;padding:11px 0;margin:-11px 0;min-width:44px}
footer.site ul a:hover{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
footer.site ul a.wa{color:var(--green)}
footer.site ul a.wa:hover{color:var(--green)}
footer.site .soonb{font-size:11px;letter-spacing:.14em;background:rgba(246,241,234,.12);color:rgba(246,241,234,.72);padding:3px 8px;border-radius:999px;margin-left:6px;vertical-align:middle;border:0}
footer.site .legal{margin-top:60px;padding-top:24px;border-top:1px solid rgba(246,241,234,.12);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:rgba(246,241,234,.55)}
/* the watermark is generated content: no text node, so neither axe nor a
   screen reader ever meets it — it is pure decoration (WCAG 1.4.3) */
.giant{margin-top:70px;font-weight:800;font-size:clamp(120px,24vw,360px);line-height:.78;letter-spacing:-.05em;color:rgba(246,241,234,.06);white-space:nowrap;transform:translateY(14%);text-align:center}
.giant::before{content:"MISAQ"}
/* Reveals hide ONLY under html.js (stamped inline before first paint), so a
   failed bundle or JS-off visitor still gets a complete page — the live site's
   own no-JS rule, kept. */
html.js .reveal{opacity:0;transform:translateY(28px);transition:.9s cubic-bezier(.2,.8,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
/* ===== inner pages ===== */
.phero{padding:90px 0 60px}
.phero .eyebrow{margin-bottom:18px}
.phero h1{font-size:clamp(44px,6.4vw,92px);letter-spacing:-.025em}
.phero h1 .script{color:var(--cherry);font-size:1.1em}
.phero .p{margin:26px 0 0;max-width:720px}
.phero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;align-items:center}
.band{background:var(--cream2)}
.measure{max-width:720px;margin:0 auto}
.prose{font-size:19px;line-height:1.7}
.prose h2{font-size:clamp(30px,3.4vw,44px);margin:56px 0 18px}
.prose h3{font-size:clamp(24px,2.4vw,30px);margin:36px 0 12px}
.prose p{margin:0 0 20px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px;margin:0 0 20px}.prose li{margin-bottom:8px}
.prose blockquote{margin:30px 0;padding:6px 0 6px 26px;border-left:3px solid var(--cherry);font-family:var(--serif);font-size:24px;font-style:italic;color:var(--ink2)}
.prose .dropcap::first-letter{font-family:var(--serif);font-size:4.2em;float:left;line-height:.8;padding:8px 10px 0 0;color:var(--cherry)}
.toc{position:sticky;top:120px;font-size:15px}
.toc b{display:block;margin-bottom:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.toc a{display:block;padding:6px 0;color:var(--ink2);border-left:2px solid var(--line);padding-left:14px}
.toc a:hover{color:var(--cherry);border-color:var(--cherry)}
.legalgrid{display:grid;grid-template-columns:240px 1fr;gap:60px;align-items:start}
/* blog */
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.chip{height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:15px;cursor:pointer;color:var(--ink)}
.chip.on{background:var(--cherry);color:#fff;border-color:var(--cherry)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 28px;margin-top:50px}
.post{display:block}
.post .ph{background:#fff;padding:10px 10px 10px;box-shadow:0 18px 40px rgba(26,26,28,.12);transform:rotate(var(--r,-1.5deg));transition:transform .4s;margin-bottom:22px}
.post:hover .ph{transform:rotate(0) translateY(-4px)}
.post .ph div{aspect-ratio:4/3;background:var(--wine) center/cover;display:flex;align-items:flex-end;padding:18px;color:#fff;font-family:var(--serif);font-size:22px;line-height:1.1}
.post .eyebrow{display:block;margin-bottom:8px}
.post h3{font-size:26px;line-height:1.15}
.post p{margin:10px 0 0;color:var(--ink2);font-size:16px;line-height:1.5}
.post .meta{display:block;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--ink3)}
.empty{display:none;text-align:center;padding:60px 0;color:var(--ink2);font-size:19px}
.empty.on{display:block}
.next{margin-top:80px;padding:50px;background:var(--cream2);border-radius:4px}
.next h3{font-size:clamp(26px,3vw,40px)}
.next ul{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.next li{font-family:var(--serif);font-size:24px;line-height:1.2;padding-left:20px;border-left:3px solid var(--cherry)}
.author{display:flex;align-items:center;gap:16px;margin:50px 0 0;padding:24px;background:#fff;border-radius:4px}
.author .av{width:64px;height:64px;border-radius:999px;background:var(--cherry);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:24px;flex-shrink:0}
.author b{display:block;font-size:18px}.author small{color:var(--ink2)}
.ctaband{background:var(--wine);color:#FFF4F2;padding:80px 0;text-align:center}
.ctaband h3{font-size:clamp(32px,4vw,56px)}
/* pillars */
.donhero{background:var(--cherry);color:#fff;padding:110px 0 120px}
.donhero h1{font-size:clamp(48px,7vw,104px);max-width:1000px}
.donhero .p{margin:26px 0 0;max-width:680px;color:rgba(255,255,255,.9)}
.counter{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:20px;background:#fff;padding:34px;border-radius:4px;box-shadow:0 30px 70px rgba(26,26,28,.12);margin-top:-70px;position:relative;z-index:2;color:var(--ink)}
.counter .c b{display:block;font-family:var(--serif);font-size:40px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.counter .c small{display:block;color:var(--ink2);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
.counter .live{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--green);margin-bottom:8px}
.counter .live i{width:8px;height:8px;border-radius:999px;background:var(--green);animation:tw 1.6s infinite}
.bar{height:10px;border-radius:999px;background:var(--cream2);overflow:hidden;margin-top:12px}
.bar b{display:block;height:100%;width:0;background:var(--cherry);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.donate>*,.grid2>*,.thero>*,.legalgrid>*,.why>*{min-width:0}
.donate{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-top:80px}
.form{background:#fff;padding:36px;border-radius:4px;box-shadow:0 30px 70px rgba(26,26,28,.08)}
.seg{display:grid;grid-template-columns:1fr 1fr;background:var(--cream);border-radius:999px;padding:4px;margin-bottom:14px}
.seg button{height:48px;border:0;border-radius:999px;background:transparent;font-weight:700;font-size:14px;line-height:1.15;padding:0 6px;cursor:pointer;color:var(--ink2)}
.seg button.on{background:var(--cherry);color:#fff}
.field{margin-top:16px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;height:54px;border:1px solid var(--line);border-radius:14px;background:var(--cream);padding:0 16px;font-size:16px;font-family:inherit;color:var(--ink)}
.field textarea{height:110px;padding:14px 16px}
.field input:focus,.field textarea:focus{outline:2px solid var(--cherry);outline-offset:1px;border-color:transparent}
.amts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:8px}
.amts button{height:50px;border:1px solid var(--line);background:#fff;border-radius:14px;font-weight:800;font-size:16px;cursor:pointer;color:var(--ink)}
.amts button.on{background:var(--cherry);color:#fff;border-color:var(--cherry)}
.upload{margin-top:16px;border:2px dashed rgba(200,16,46,.5);border-radius:16px;padding:26px;text-align:center;color:var(--ink2);font-size:15px;background:rgba(200,16,46,.03)}
.upload .ic{width:30px;height:30px;color:var(--cherry);margin-bottom:8px}
.check{display:flex;gap:10px;align-items:center;font-size:15px;margin-top:16px;color:var(--ink2)}
.form .btn{width:100%;margin-top:22px}
.form .fine{font-size:13px;color:var(--ink3);margin:14px 0 0;text-align:center}
.wall{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.wall span{background:#fff;border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-weight:600;font-size:15px}
/* careers / contact */
.roles{display:grid;gap:20px;margin-top:50px}
.role{background:#fff;padding:34px;border-radius:4px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.role h3{font-size:30px}
.role .tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
@media (max-width:520px){.role{padding:24px 20px}.role .btn{white-space:normal;height:auto;min-height:56px;padding:12px 22px;text-align:center}}
.role .tags span{font-size:13px;font-weight:700;background:var(--cream);padding:6px 12px;border-radius:999px;color:var(--ink2)}
.role p{margin:0;color:var(--ink2);font-size:17px;line-height:1.55;max-width:640px}
.role .filledb{display:inline-block;font-size:11px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;color:var(--pome);background:var(--pink);padding:5px 12px;border-radius:999px;margin-left:10px;vertical-align:middle}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px}
.col{background:#fff;padding:36px;border-radius:4px}
.col h3{font-size:28px;margin-bottom:14px}
.col p{margin:0;color:var(--ink2);font-size:17px;line-height:1.6}
.ctiles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.ctile{background:#fff;padding:32px;border-radius:4px;display:flex;flex-direction:column;gap:14px;min-height:240px}
.ctile .ic{width:34px;height:34px;color:var(--cherry)}
.ctile h3{font-size:26px}
.ctile p{margin:0;color:var(--ink2);font-size:16px;line-height:1.55;flex:1}
.ctile a.l{font-weight:800;color:var(--cherry);text-decoration:underline;text-underline-offset:3px;word-break:break-all;display:inline-block;padding:10px 0;margin:-10px 0;min-width:44px}
/* team page */
.thero{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center;padding:80px 0 60px}
.thero .ph{background:#fff;padding:14px 14px 56px;box-shadow:0 40px 80px rgba(26,26,28,.16);transform:rotate(-2.5deg);max-width:460px}
.thero .ph .av{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:140px;color:#fff;background:var(--c,var(--cherry))}
.thero .ph .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.thero h1{font-size:clamp(44px,5.6vw,80px);letter-spacing:-.025em;margin-top:12px}
.thero .role{display:block;font-size:22px;color:var(--ink2);margin-top:12px;background:none;padding:0;border-radius:0;grid-template-columns:none}
.thero .one{font-size:21px;line-height:1.5;margin:22px 0 0;max-width:560px}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.pills a{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px}
.pills a:hover{border-color:var(--cherry);color:var(--cherry)}
.glance{list-style:none;padding:0;margin:20px 0 0}
.glance li{padding:16px 0;border-top:1px solid rgba(201,162,75,.5);font-size:18px;display:flex;gap:14px;align-items:flex-start}
.glance li .ic{color:var(--gold);width:20px;height:20px;margin-top:4px}
.rest{display:flex;gap:20px;overflow-x:auto;padding:30px 0 20px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rest .member{flex:0 0 190px;scroll-snap-align:start}
.rest .member .ph{margin-bottom:14px}
.rest .member b{font-size:16px}.rest .member small{font-size:13px}
.todo{display:inline-block;background:var(--pink);color:var(--pome);font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding:6px 10px;border-radius:6px;margin-top:12px}
/* ===== app style (survey + create + portal) ===== */
.app{min-height:100dvh;background:var(--cream);display:flex;flex-direction:column;color:var(--ink)}
.app .top{position:sticky;top:0;z-index:5;background:var(--cream);display:flex;align-items:center;gap:14px;padding:18px max(20px,calc(50% - 300px)) 12px}
.app .top img{width:30px}
.app .top .cnt{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--ink2)}
.app .top .time{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink2)}
.app .top .time .ic{width:16px;height:16px;color:var(--cherry)}
.app .top .x{width:38px;height:38px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer}
.app .top .x .ic{width:18px;height:18px}
.prog{height:3px;background:rgba(26,26,28,.08);margin:0 max(20px,calc(50% - 300px))}
.prog b{display:block;height:100%;width:0;background:var(--cherry);transition:width .4s cubic-bezier(.2,.8,.2,1)}
.app .body{flex:1;display:flex;flex-direction:column;align-items:center;padding:34px 20px 120px;position:relative;overflow:hidden}
.scr{width:100%;max-width:440px;animation:slidein .28s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.scr.back{animation-name:slideback}
@keyframes slideback{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
.scr .ch{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pome);display:flex;align-items:center;gap:8px}
.scr .ch .ic{width:16px;height:16px}
.scr h2{font-family:var(--serif);font-size:clamp(28px,4vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:14px 0 8px}
.scr .hint{color:var(--ink2);font-size:15px;margin:0 0 22px;line-height:1.5}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 18px;background:#fff;border:1px solid var(--line);border-radius:18px;font-weight:600;font-size:16px;cursor:pointer;text-align:left;color:var(--ink);transition:transform .12s,background .2s,border-color .2s;width:100%}
.opt .ic{width:22px;height:22px;color:var(--ink2);flex-shrink:0}
.opt:active{transform:scale(.985)}
.opt.on{background:var(--cherry);color:#fff;border-color:var(--cherry)}
.opt.on .ic{color:#fff}
.opt .tick{margin-left:auto;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.opt.on .tick{background:#fff;border-color:#fff}
.opt.on .tick .ic{width:14px;height:14px;color:var(--cherry)}
.optgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.optgrid .opt{flex-direction:column;justify-content:center;text-align:center;min-height:96px;padding:16px}
.optgrid .opt .ic{width:26px;height:26px}
.app input.txt,.app textarea.txt{width:100%;height:56px;border:1px solid var(--line);border-radius:18px;background:#fff;padding:0 18px;font-size:16px;font-family:inherit;color:var(--ink)}
.app textarea.txt{height:120px;padding:16px 18px;resize:none}
.app input.txt:focus,.app textarea.txt:focus{outline:2px solid var(--cherry);outline-offset:1px;border-color:transparent}
.sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.sugg button{height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink2)}
.sugg button:hover{border-color:var(--cherry);color:var(--cherry)}
.foot{position:fixed;left:0;right:0;bottom:0;padding:14px max(20px,calc(50% - 220px)) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(246,241,234,0),var(--cream) 30%);display:flex;gap:10px;z-index:6}
.foot .btn{flex:1;height:56px}
.foot .back{flex:0 0 56px;width:56px;padding:0;background:#fff;border:1px solid var(--line)}
.mirror{background:var(--wine);color:#FFF4F2;border-radius:28px;padding:30px;position:relative;overflow:hidden}
.mirror .arabic{font-size:24px;margin-bottom:10px}
.mirror h2{color:#fff}
.mirror p{color:rgba(255,244,242,.85);font-size:16px;line-height:1.6}
.mirror .ic{width:28px;height:28px;color:var(--gold2)}
.mirror .g{position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle,rgba(201,162,75,.45),transparent 70%)}
.done{text-align:center}
.done .big{width:96px;height:96px;border-radius:999px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:pop .6s cubic-bezier(.2,.8,.2,1)}
.done .big .ic{width:44px;height:44px}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.gift{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 18px;margin-top:10px;text-align:left;font-weight:600}
.gift .ic{color:var(--cherry)}
.gift small{display:block;color:var(--ink2);font-weight:500;font-size:13px}
.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scale .opt{flex-direction:column;min-height:72px;padding:10px;font-family:var(--serif);font-size:22px}
.scale .opt small{font-family:var(--sans);font-size:11px;font-weight:600;opacity:.7}
.chaps{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.chaps .c{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 18px}
.chaps .c .n{width:34px;height:34px;border-radius:999px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;flex-shrink:0}
.chaps .c b{display:block;font-size:15px}.chaps .c small{color:var(--ink2);font-size:13px}
.chaps .c .t{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink3)}
/* home extras (uicards / compat / pink scatter / why / company) — deduped: one copy */
.night .uicards{position:relative;margin-top:90px;padding:70px 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.45) 40%,rgba(0,0,0,.6));display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;text-align:left}
.uic{background:rgba(20,10,16,.85);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:26px;color:#fff;max-width:520px;backdrop-filter:blur(10px);justify-self:center;width:100%}
.uic .uich{margin:0 0 18px;font-size:22px;font-weight:700;font-family:inherit}
.mix{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px}
.mix div{display:flex;gap:12px;align-items:center}
.mix .b{width:54px;height:54px;border-radius:999px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;color:var(--lilac)}
.mix .b span{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:#fff;color:#000;font-size:11px;font-weight:800;padding:2px 8px;border-radius:999px}
.mix b{display:block;font-size:15px}.mix small{display:block;color:rgba(255,255,255,.65);font-size:13px}
.compat .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.compat .top b{font-family:var(--serif);font-size:30px;font-weight:600}
.compat .top .tag{font-size:12px;background:rgba(255,255,255,.12);padding:4px 10px;border-radius:999px;margin-left:8px;font-family:var(--sans);font-weight:700}
.compat .avs{display:flex}.compat .avs span{width:46px;height:46px;border-radius:999px;border:2px solid #000;background-size:cover;background-position:center top;margin-left:-12px}
.compat .box{background:rgba(255,255,255,.07);border-radius:18px;padding:18px}
.compat .box .h{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:10px}
.compat .box .h .ic{color:var(--gold2);width:20px;height:20px}
.compat .box p{margin:8px 0 0;font-size:16px}.compat .box .q{display:block;margin-top:10px;font-weight:800;font-size:18px;line-height:1.4}
.pinkb{background:var(--pink);color:var(--ink)}
.pinkb h2{color:var(--cherry)}.pinkb h3{color:#3A0A14}
.scatter{position:relative;height:clamp(460px,48vw,640px);margin-top:70px}
.scatter .pol{box-shadow:0 20px 50px rgba(0,0,0,.18)}
.why{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.why h2{margin-bottom:40px}
.why .p{margin:0 0 26px;max-width:none;font-size:21px}
.phone{width:330px;margin:0 auto;border-radius:46px;box-shadow:0 0 0 10px #0F0C0D,0 0 0 11px rgba(255,255,255,.25),0 50px 100px rgba(0,0,0,.5);overflow:hidden;background:#000}
.phone img{display:block;width:100%;height:auto;aspect-ratio:330/672}
.company .grid2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.company h2{font-size:clamp(40px,5vw,72px)}
.company .p{margin:26px 0 0;max-width:none;font-size:20px}
.company .facts{grid-template-columns:repeat(3,1fr)}
.story-pic{width:100%;max-width:480px;aspect-ratio:4/5;border-radius:6px;background-size:cover;background-position:center 20%;box-shadow:0 40px 80px rgba(60,30,30,.25);transform:rotate(-2deg);justify-self:center}
/* breakpoints */
@media (max-width:1300px){.blushb .deco .bubble{display:none}}
@media (max-width:1100px){.links{display:none}.burger{display:flex}.tiles,.scards{grid-template-columns:1fr}.tile,.scard{min-height:0}.tile .obj svg,.scard .obj svg{width:220px}.quote .grid2,.invest .grid2,.approach,.donate,.thero,.legalgrid{grid-template-columns:1fr}.team{grid-template-columns:1fr 1fr}.posts{grid-template-columns:1fr 1fr}.counter{grid-template-columns:1fr 1fr}.cols3,.ctiles{grid-template-columns:1fr}footer.site .top{grid-template-columns:1fr 1fr}.final .mono{width:220px;right:-30px;top:auto;bottom:0;transform:none}.pols{height:560px}.night .moon{display:none}.toc{display:none}.role{grid-template-columns:1fr}.thero .ph{max-width:360px}.night .uicards,.why,.company .grid2{grid-template-columns:1fr}.scatter{height:560px}.statsrow{grid-template-columns:1fr}.company .facts{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:600px){.wrap{padding:0 22px}.hm{display:none}nav.site .btn{height:44px;padding:0 18px;font-size:15px}nav.site .wrap{gap:10px;height:56px}.wordmark{font-size:22px}.wordmark img{width:24px;height:24px}.team,.posts{grid-template-columns:1fr}.hero .wrap{padding-bottom:56px;padding-top:110px}.qrwrap{width:260px;height:260px}.facts,.next ul,.counter{grid-template-columns:1fr}.amts{grid-template-columns:repeat(2,1fr)}.optgrid{grid-template-columns:1fr 1fr}.scale{grid-template-columns:repeat(5,1fr)}.blushb .deco{display:none}.bars{width:calc(100% - 44px)}.company .facts{grid-template-columns:1fr}.scatter{height:520px}}

/* app pages: the monogram home link and small auxiliary links reach 44px
   hit areas without moving a pixel of layout. */
.app .top a{display:inline-flex;align-items:center;justify-content:center;padding:7px;margin:-7px}
.aux a{display:inline-block;padding:11px 0;margin:-11px 0}