/* FAI Legal theme tokens, copied verbatim from public/app-next.html (court is the default palette; night is chosen per palette, not inverted). Demos set data-pal / data-appearance on <html> exactly like the app. */
:root{
  --c-navy:20 67 58;      --c-navy2:28 90 77;    --c-charcoal:26 35 32;
  --c-brass:143 83 39;    --c-brassdk:120 68 31; --c-cream:242 240 230;
  --c-hair:224 221 205;   --c-muted:88 100 93;   --c-success:38 106 76;
  --c-paper:255 255 255; --c-heading:20 67 58;
  /* Text ON the accent. White on a light brass measured 2.8:1 against the app's own
     buttons -- below the 4.5 a paragraph needs and below the 3 even a large label needs.
     Each palette names the one that reads on its own accent. */
  --c-onacc:26 20 7; --c-accink:120 68 31;
  --ui-scale:.80;
}
:root[data-pal="court"]{
  --c-navy:15 42 67;      --c-navy2:21 50 79;    --c-charcoal:28 39 51;
  --c-brass:192 138 45;   --c-brassdk:168 118 31;--c-cream:247 246 243;
  --c-hair:229 226 219;   --c-muted:95 102 116;  --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:15 42 67;
  --c-onacc:26 20 7;
  --c-accink:138 94 20;
}
:root[data-pal="chambers"]{
  --c-navy:94 31 43;      --c-navy2:120 43 56;   --c-charcoal:42 30 32;
  --c-brass:176 137 72;   --c-brassdk:150 112 47;--c-cream:251 246 238;
  --c-hair:234 223 208;   --c-muted:105 88 90;   --c-success:58 100 68;
  --c-paper:255 255 255;
  --c-heading:94 31 43;
  --c-onacc:28 20 8;
  --c-accink:122 90 36;
}
:root[data-pal="slate"]{
  --c-navy:31 41 51;      --c-navy2:43 57 71;    --c-charcoal:27 34 41;
  --c-brass:11 104 112;   --c-brassdk:8 84 91;   --c-cream:243 246 247;
  --c-hair:223 230 233;   --c-muted:88 100 110;  --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:31 41 51;
  --c-onacc:255 255 255;
  --c-accink:8 84 91;
}
:root[data-pal="meadow"]{
  --c-navy:20 67 58;      --c-navy2:28 90 77;    --c-charcoal:26 35 32;
  --c-brass:143 83 39;    --c-brassdk:120 68 31; --c-cream:242 240 230;
  --c-hair:224 221 205;   --c-muted:88 100 93;   --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:20 67 58;
  --c-onacc:255 255 255;
  --c-accink:120 68 31;
}
:root[data-pal="ink"]{
  --c-navy:22 24 29;      --c-navy2:37 40 47;    --c-charcoal:21 23 27;
  --c-brass:75 73 232;    --c-brassdk:58 56 201; --c-cream:250 250 248;
  --c-hair:230 230 226;   --c-muted:94 100 112;  --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:22 24 29;
  --c-onacc:255 255 255;
  --c-accink:58 56 201;
}

/* ==================================================================================
   FIVE MORE, added 14-Sep-2026 at the owner's request.
   ----------------------------------------------------------------------------------
   The first five sit in a narrow band: four dark-neutral brand surfaces and a warm metal
   accent on three of them. These five deliberately go elsewhere. Cedar is the only warm
   brown. Indus puts the colour in the SURFACE and the warmth in the accent, the reverse of
   Slate. Plum is the only purple. Basalt is a cool near-black carrying a warm saffron,
   where Ink is a near-black carrying a cool indigo. Sandstone is the only one whose PAGE is
   not white or near-white, which changes the feel of a long judgment more than any accent.
   Every accent below was picked against its own --c-onacc and --c-accink rather than chosen
   first and checked later: a light accent takes near-black text, a dark one takes white, and
   --c-accink is the version dark enough to be read as body text on paper.
   ================================================================================== */
:root[data-pal="cedar"]{
  --c-navy:59 42 30;      --c-navy2:76 55 40;    --c-charcoal:42 36 32;
  --c-brass:63 107 60;    --c-brassdk:52 89 47;  --c-cream:244 241 234;
  --c-hair:227 222 210;   --c-muted:107 98 87;   --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:59 42 30;
  --c-onacc:255 255 255;
  --c-accink:52 89 47;
}
:root[data-pal="indus"]{
  --c-navy:14 59 62;      --c-navy2:21 80 84;    --c-charcoal:30 43 44;
  --c-brass:180 86 47;    --c-brassdk:147 68 31; --c-cream:241 245 244;
  --c-hair:216 227 225;   --c-muted:90 107 106;  --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:14 59 62;
  --c-onacc:255 255 255;
  --c-accink:147 68 31;
}
:root[data-pal="plum"]{
  --c-navy:59 31 61;      --c-navy2:82 44 85;    --c-charcoal:43 36 48;
  --c-brass:166 75 99;    --c-brassdk:138 59 80; --c-cream:246 242 245;
  --c-hair:230 220 228;   --c-muted:106 93 107;  --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:59 31 61;
  --c-onacc:255 255 255;
  --c-accink:138 59 80;
}
:root[data-pal="basalt"]{
  --c-navy:26 31 43;      --c-navy2:39 46 62;    --c-charcoal:29 33 41;
  --c-brass:154 96 9;     --c-brassdk:127 78 6;  --c-cream:245 245 243;
  --c-hair:226 226 222;   --c-muted:95 101 112;  --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:26 31 43;
  --c-onacc:255 255 255;
  --c-accink:127 78 6;
}
:root[data-pal="sandstone"]{
  /* The brand bar is a deep burnt sienna, not the mid rust it started as. At 107 58 37 it was
     the lightest surface of the ten and the only one the sidebar's white-alpha text could not
     clear 4.5 on: ten failures, all of them here, none anywhere else. The page ground is what
     makes this palette its own thing anyway, not the bar. */
  --c-navy:74 32 22;      --c-navy2:99 45 32;    --c-charcoal:51 41 31;
  --c-brass:46 90 138;    --c-brassdk:35 72 110; --c-cream:245 239 227;
  --c-hair:228 217 196;   --c-muted:110 100 85;  --c-success:38 106 76;
  --c-paper:255 255 255;
  --c-heading:74 32 22;
  --c-onacc:255 255 255;
  --c-accink:35 72 110;
}

/* ---- night ---- */
/* ---- night ----
   Two tokens, not one. `--c-navy` is the brand SURFACE: the header, the sidebar, the reader's
   own message bubble, a filled button. It stays dark in night, in the palette's own hue, or the
   header turns light-on-light -- which is exactly what happened when this file had one token for
   both jobs (reported with a screenshot, 13-Sep-2026). `--c-heading` is the text that used to
   borrow it, and that one goes light. The override at the bottom is what re-points .text-navy. */
:root[data-appearance="night"]{
  --c-accink:var(--c-brass);
  /* Day's green is 38 106 76: on navy, "2 cited" was unreadable (phase 17, OPEN #10.5). */
  --c-success:120 196 152;
  --c-cream:16 21 18;     --c-paper:24 31 27;    --c-hair:39 50 43;
  --c-charcoal:233 239 233; --c-muted:150 163 152;
  --c-navy:23 80 63;      --c-navy2:30 98 78;    --c-heading:233 239 233;
}
:root[data-appearance="night"][data-pal="court"]{
  --c-cream:14 19 26; --c-paper:22 28 37; --c-hair:38 47 60;
  --c-brass:214 163 72; --c-brassdk:214 163 72;
  --c-navy:18 40 61; --c-navy2:26 55 82; --c-charcoal:232 234 237; --c-muted:152 161 172; --c-heading:232 237 243;
 --c-onacc:14 16 12;}
:root[data-appearance="night"][data-pal="chambers"]{
  --c-cream:23 16 15; --c-paper:33 24 22; --c-hair:52 39 36;
  --c-brass:199 154 87; --c-brassdk:199 154 87;
  --c-navy:78 26 36; --c-navy2:99 35 46; --c-charcoal:240 230 220; --c-muted:170 152 146; --c-heading:245 233 222;
 --c-onacc:14 16 12;}
:root[data-appearance="night"][data-pal="slate"]{
  --c-cream:14 20 23; --c-paper:22 30 34; --c-hair:37 49 54;
  --c-brass:42 167 178; --c-brassdk:42 167 178;
  --c-navy:27 37 46; --c-navy2:38 52 63; --c-charcoal:230 238 240; --c-muted:145 161 168; --c-heading:230 240 242;
 --c-onacc:14 16 12;}
:root[data-appearance="night"][data-pal="meadow"]{
  --c-cream:16 21 18; --c-paper:24 31 27; --c-hair:39 50 43;
  --c-brass:208 138 78; --c-brassdk:208 138 78;
  --c-navy:23 80 63; --c-navy2:30 98 78; --c-charcoal:233 239 233; --c-muted:150 163 152; --c-heading:234 242 233;
 --c-onacc:14 16 12;}
:root[data-appearance="night"][data-pal="ink"]{
  --c-cream:12 13 16; --c-paper:21 23 28; --c-hair:36 39 48;
  --c-brass:124 122 255; --c-brassdk:124 122 255;
  --c-navy:26 28 34; --c-navy2:38 41 50; --c-charcoal:237 237 242; --c-muted:150 154 166; --c-heading:238 238 245;
 --c-onacc:14 16 12;}
/* The five new palettes at night. Each names its own accent rather than reusing the day one:
   a 154 96 9 saffron that reads well on white is mud on near-black. */
:root[data-appearance="night"][data-pal="cedar"]{
  --c-cream:23 18 14; --c-paper:34 27 21; --c-hair:58 46 36;
  --c-brass:143 191 133; --c-brassdk:143 191 133;
  --c-navy:59 42 30; --c-navy2:76 55 40; --c-charcoal:237 230 220; --c-muted:169 160 147; --c-heading:240 233 223;
 --c-onacc:14 16 12;}
:root[data-appearance="night"][data-pal="indus"]{
  --c-cream:12 26 27; --c-paper:20 38 39; --c-hair:36 64 63;
  --c-brass:224 138 95; --c-brassdk:224 138 95;
  --c-navy:17 71 74; --c-navy2:23 93 97; --c-charcoal:228 237 236; --c-muted:147 168 166; --c-heading:232 241 240;
 --c-onacc:14 16 12;}
:root[data-appearance="night"][data-pal="plum"]{
  --c-cream:23 16 24; --c-paper:34 25 38; --c-hair:60 46 66;
  --c-brass:217 139 160; --c-brassdk:217 139 160;
  --c-navy:61 33 64; --c-navy2:82 44 85; --c-charcoal:237 228 238; --c-muted:166 151 168; --c-heading:240 232 241;
 --c-onacc:14 16 12;}
:root[data-appearance="night"][data-pal="basalt"]{
  --c-cream:14 17 22; --c-paper:25 29 37; --c-hair:44 50 61;
  --c-brass:232 183 90; --c-brassdk:232 183 90;
  --c-navy:30 36 49; --c-navy2:43 51 68; --c-charcoal:231 234 240; --c-muted:152 160 174; --c-heading:235 238 244;
 --c-onacc:14 16 12;}
:root[data-appearance="night"][data-pal="sandstone"]{
  --c-cream:23 18 12; --c-paper:34 28 20; --c-hair:59 49 35;
  --c-brass:143 182 224; --c-brassdk:143 182 224;
  --c-navy:74 32 22; --c-navy2:99 45 32; --c-charcoal:239 231 217; --c-muted:171 160 140; --c-heading:242 235 222;
 --c-onacc:14 16 12;}


/* ---- landing: the failegal.site landing page colours (public/index.html: paper #F4F1EB, ink #151412, brass #A8782B,
   oxblood #7A2E2A). FAI Media opens in this look until the member picks a palette in Settings; then it follows that. ---- */
:root[data-pal="landing"]{
  --c-navy:21 20 18;      --c-navy2:44 41 37;    --c-charcoal:21 20 18;
  --c-brass:168 120 43;   --c-brassdk:140 98 30; --c-cream:244 241 235;
  --c-hair:222 217 207;   --c-muted:110 105 97;  --c-success:62 90 75;
  --c-paper:253 252 249;  --c-heading:21 20 18;
  --c-onacc:26 20 7;      --c-accink:138 94 20;
}
:root[data-appearance="night"][data-pal="landing"]{
  --c-cream:20 19 17; --c-paper:30 28 25; --c-hair:52 49 44;
  --c-brass:216 170 96; --c-brassdk:216 170 96;
  --c-navy:34 32 29; --c-navy2:48 45 41; --c-charcoal:238 234 226; --c-muted:164 157 145; --c-heading:242 238 230;
  --c-onacc:20 16 8;
}

/* FAI Media public pages (failegal.site/media): the reel pages, their Urdu twins, the topic pages and the index.
   Plain HTML written at publish time by scripts/build-media.mjs; this file is appended to shared/tokens.css, so the
   landing look is the default and a palette or night chosen in the app carries through. Flat paper, no glows. */
:root { --k-heart: 237 73 86; --k-pop: var(--c-navy2); --k-ease: cubic-bezier(.2, .7, .2, 1);
  --k-serif: "DM Serif Display", Georgia, "Times New Roman", serif; --k-ui: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --k-ur: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif; }
:root[data-appearance="night"] { --k-pop: var(--c-brass); }
:root[data-pal="landing"] { --k-pop: 122 46 42; }
:root[data-appearance="night"][data-pal="landing"] { --k-pop: 196 92 84; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; }
body { font: 16px/1.6 var(--k-ui); color: rgb(var(--c-charcoal)); background: rgb(var(--c-cream)); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
::selection { background: rgb(var(--c-brass) / .28); }
:focus-visible { outline: 2.5px solid rgb(var(--c-brass)); outline-offset: 2px; border-radius: 6px; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: absolute; inset-inline-start: 8px; top: 8px; z-index: 100; background: rgb(var(--c-paper)); padding: 10px 14px; border-radius: 10px; transform: translateY(-200%); }
.skip:focus { transform: none; }
[lang="ur"] { font-family: var(--k-ur); }
[lang="en"] { font-family: var(--k-ui); }

/* ---- header ---- */
.mtop { position: sticky; top: 0; z-index: 20; background: rgb(var(--c-cream) / .92); border-bottom: 1px solid rgb(var(--c-hair));
  backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); }
.mtop-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px; min-height: 60px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: rgb(var(--c-heading)); }
.mark svg { width: 26px; height: 30px; }
.mark b { font: 400 23px/1 var(--k-serif); letter-spacing: -.01em; }
.mark i { font: italic 400 23px/1 var(--k-serif); color: rgb(var(--k-pop)); }
.mtop nav { display: flex; align-items: center; gap: 8px; }
.mlink { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; border-radius: 999px; text-decoration: none; font: 600 14px/1 var(--k-ui); color: rgb(var(--c-heading)); }
.mlink:hover { background: rgb(var(--c-charcoal) / .06); }
.mlink[lang="ur"] { font: 600 15px/1.6 var(--k-ur); padding-top: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 0;
  background: rgb(var(--c-navy)); color: #fff; font: 600 14.5px/1.2 var(--k-ui); text-decoration: none; cursor: pointer; transition: transform .15s var(--k-ease), background-color .2s; white-space: nowrap; }
.btn:hover { background: rgb(var(--c-navy2)); }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: rgb(var(--c-heading)); box-shadow: inset 0 0 0 1.5px rgb(var(--c-hair)); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px rgb(var(--c-charcoal) / .35); background: transparent; }
.mtop .btn { min-height: 40px; padding: 8px 16px; }

/* ---- shared bits ---- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 18px 16px 48px; outline: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: rgb(var(--c-muted)); margin: 0 0 14px; }
.crumbs a { color: inherit; }
.kk { font: 700 11.5px/1.3 var(--k-ui); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--c-accink)); margin: 0 0 8px; display: flex; align-items: center; gap: 7px; }
.kk .ic { width: 16px; height: 16px; }
.stamp { display: inline-block; padding: 5px 12px 4px; border: 2px solid rgb(var(--k-heart)); color: rgb(var(--k-heart)); border-radius: 8px; font: 800 14px/1.2 var(--k-ui); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg); }
.fine { font-size: 13px; line-height: 1.55; color: rgb(var(--c-muted)); margin: 18px 0 0; }

/* ---- the reel page ---- */
.phead { max-width: 820px; margin-bottom: 26px; }
.phead h1 { font: 400 clamp(31px, 6.4vw, 54px)/1.07 var(--k-serif); color: rgb(var(--c-heading)); margin: 2px 0 14px; letter-spacing: -.012em; text-wrap: balance; }
.verdict { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.verdict .myth { font-size: 15.5px; color: rgb(var(--c-muted)); }
.verdict .stamp { font-size: 15px; padding: 6px 14px 5px; }
.answer { background: rgb(var(--c-paper)); border-radius: 18px; padding: 16px 18px 6px; margin: 0 0 16px; box-shadow: 0 0 0 1px rgb(var(--c-hair)), inset 4px 0 0 rgb(var(--c-brass)); }
.answer h2 { margin: 0 0 6px; }
.answer p { font-size: 18.5px; line-height: 1.55; color: rgb(var(--c-heading)); margin: 0 0 12px; }
.by { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: rgb(var(--c-muted)); margin: 0; }
.by .av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: rgb(var(--c-navy)); color: #fff; flex: none; }
.by .av svg { width: 15px; height: 17px; }
.by > span:last-child { padding-top: 3px; }
.pgrid { display: grid; gap: 26px; }
.pvid { display: grid; gap: 12px; align-content: start; }
.player { border-radius: 20px; overflow: hidden; background: #0d0c0b; box-shadow: 0 14px 34px rgb(0 0 0 / .14); }
.player video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 78vh; object-fit: contain; background: #0d0c0b; }
.vbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(var(--c-charcoal) / .07); }
.seg button { appearance: none; border: 0; background: none; cursor: pointer; min-height: 36px; padding: 4px 14px; border-radius: 999px; font: 600 13.5px/1 var(--k-ui); color: rgb(var(--c-muted)); }
.seg button[lang="ur"] { font: 600 14.5px/1.5 var(--k-ur); }
.seg button[aria-pressed="true"] { background: rgb(var(--c-paper)); color: rgb(var(--c-heading)); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.vlab { display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1 var(--k-ui); color: rgb(var(--c-muted)); }
.vlab .ic { color: rgb(var(--c-accink)); }
.share { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  background: rgb(var(--c-paper)); box-shadow: 0 0 0 1px rgb(var(--c-hair)); font: 600 13.5px/1 var(--k-ui); color: rgb(var(--c-heading)); }
.share:active { transform: scale(.97); }
.chap { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; background: rgb(var(--c-paper)); border-radius: 16px; box-shadow: 0 0 0 1px rgb(var(--c-hair)); }
.chap a { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; font: 500 14.5px/1.35 var(--k-ui); color: rgb(var(--c-charcoal)); text-decoration: none; }
.chap a span { font: 700 12.5px/1 var(--k-ui); color: rgb(var(--c-accink)); min-width: 34px; font-variant-numeric: tabular-nums; }
.chap a:hover, .chap a[data-now] { background: rgb(var(--c-brass) / .12); }
.chap[lang="ur"] a { font: 500 14.5px/1.9 var(--k-ur); }
.ptext { font-size: 17.5px; line-height: 1.7; min-width: 0; }
.ptext p { margin: 0 0 15px; }
.sec { margin: 30px 0 0; }
.sec h2, .more h2 { font: 400 27px/1.2 var(--k-serif); color: rgb(var(--c-heading)); margin: 0 0 12px; }
.sec ul { padding-inline-start: 20px; margin: 0 0 14px; }
.sec li { margin-bottom: 9px; }
.dl { display: grid; grid-template-columns: 1fr; gap: 4px 18px; margin: 0; }
.dl dt { font: 700 12px/1.3 var(--k-ui); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--c-accink)); margin-top: 12px; }
.dl dd { margin: 0; }
blockquote { margin: 0 0 16px; padding: 4px 0; padding-inline-start: 18px; border-inline-start: 3px solid rgb(var(--c-brass)); }
blockquote p { font: 400 21px/1.42 var(--k-serif); color: rgb(var(--c-heading)); margin: 0 0 6px !important; }
blockquote .qnote { font: 16px/2 var(--k-ur); color: rgb(var(--c-charcoal)); margin: 4px 0 8px !important; }
blockquote cite { font-style: normal; font-size: 13.5px; color: rgb(var(--c-muted)); }
.stat, .src li { padding: 13px 15px; border-radius: 14px; background: rgb(var(--c-paper)); box-shadow: 0 0 0 1px rgb(var(--c-hair)); margin-bottom: 10px; }
.stat span { color: rgb(var(--c-accink)); font-weight: 600; }
.stat p { margin: 6px 0 0 !important; font-size: 15.5px; }
.faq { border-bottom: 1px solid rgb(var(--c-hair)); padding: 13px 0; }
.faq summary { cursor: pointer; font-weight: 600; color: rgb(var(--c-heading)); }
.faq p { margin: 8px 0 0 !important; }
.src { list-style: none; padding: 0 !important; margin: 0; }
.src li { font-size: 15.5px; line-height: 1.55; }
.src span { color: rgb(var(--c-muted)); }
.src em { font-style: normal; font-size: 12.5px; color: rgb(var(--c-success)); font-weight: 600; }
.trans summary { cursor: pointer; font-weight: 600; color: rgb(var(--c-accink)); margin-bottom: 10px; }
.cta { margin: 32px 0 6px; padding: 20px; border-radius: 20px; background: rgb(var(--c-navy)); color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.cta p { margin: 0 !important; font: 400 22px/1.25 var(--k-serif); max-width: 24ch; }
.cta .btn { background: rgb(var(--c-brass)); color: rgb(var(--c-onacc)); }
.ptext[lang="ur"] { font-size: 17.5px; }
.ptext[lang="ur"] p, .ptext[lang="ur"] li, .ptext[lang="ur"] dd, .answer[lang="ur"] p { line-height: 2.2; }
.ptext[lang="ur"] .sec h2, .phead h1[lang="ur"], .answer[lang="ur"] .kk { font-family: var(--k-ur); font-weight: 600; line-height: 1.95; letter-spacing: 0; text-transform: none; }
.ptext[lang="ur"] .sec h2 { font-size: 23px; }
.phead h1[lang="ur"] { font-size: clamp(25px, 5vw, 40px); }
.answer[lang="ur"] .kk { font-size: 15px; }
.ptext[lang="ur"] .dl dt { font: 600 14.5px/1.9 var(--k-ur); letter-spacing: 0; text-transform: none; }

/* ---- cards: related reels, topic pages and the index ---- */
.more { margin-top: 52px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; list-style: none; margin: 0; padding: 0; }
.card a { display: grid; gap: 8px; text-decoration: none; }
.card .pic { position: relative; border-radius: 16px; overflow: hidden; background: rgb(var(--c-hair)); box-shadow: 0 0 0 1px rgb(var(--c-hair)); }
.card img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; transition: transform .5s var(--k-ease); }
.card a:hover img { transform: scale(1.025); }
.card .len { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: rgb(0 0 0 / .62); color: #fff; font: 600 11.5px/1.2 var(--k-ui); font-variant-numeric: tabular-nums; }
.card .kk { margin: 2px 0 0; font-size: 10.5px; }
.card b { font: 400 18px/1.25 var(--k-serif); color: rgb(var(--c-heading)); }
.card small { font-size: 13px; color: rgb(var(--c-muted)); line-height: 1.4; }
.card .stamp { font-size: 11px; padding: 3px 8px 2px; border-width: 1.5px; justify-self: start; }

/* ---- index and topic pages ---- */
.hero { max-width: 760px; margin: 10px 0 30px; }
.hero h1 { font: 400 clamp(38px, 8vw, 72px)/1.02 var(--k-serif); color: rgb(var(--c-heading)); margin: 4px 0 16px; letter-spacing: -.015em; text-wrap: balance; }
.hero h1 i { color: rgb(var(--k-pop)); }
.hero p { font-size: 18.5px; line-height: 1.6; margin: 0 0 18px; max-width: 58ch; }
.free { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.2 var(--k-ui); color: rgb(var(--c-success)); }
.free::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; padding: 0; list-style: none; }
.chips a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  background: rgb(var(--c-paper)); box-shadow: 0 0 0 1px rgb(var(--c-hair)); font: 600 14px/1 var(--k-ui); color: rgb(var(--c-heading)); }
.chips a:hover { box-shadow: 0 0 0 1.5px rgb(var(--c-charcoal) / .3); }
.chips a[aria-current="page"] { background: rgb(var(--c-navy)); color: #fff; box-shadow: none; }
.chips .ic { width: 17px; height: 17px; }

/* ---- footer ---- */
.mfoot { border-top: 1px solid rgb(var(--c-hair)); }
.mfoot-in { max-width: 1180px; margin: 0 auto; padding: 22px 16px calc(36px + env(safe-area-inset-bottom, 0px)); font-size: 13.5px; color: rgb(var(--c-muted)); }
.mfoot p { margin: 0 0 8px; }
.mfoot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }

@media (min-width: 640px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .mtop-in { padding: 10px 28px; }
  .wrap { padding: 26px 28px 64px; }
  .pgrid { grid-template-columns: 360px minmax(0, 1fr); gap: 52px; }
  .pvid { position: sticky; top: 86px; }
  .player video { max-height: calc(100vh - 230px); }
  .ptext { max-width: 700px; }
  .dl { grid-template-columns: 170px 1fr; }
  .dl dt { margin-top: 0; padding-top: 3px; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
  .more .cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mfoot-in { padding: 24px 28px 48px; }
}
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* phones scroll with an overlay bar; a desktop window this narrow (or the demo's phone frame) shows no gutter either */
@media (max-width: 639px) { html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } }
@media (max-width: 639px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } .chips::-webkit-scrollbar { display: none; } .chips li { flex: none; } }
@media (max-width: 520px) { .mtop .btn { display: none; } .mark b, .mark i { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* moving between the feed and these pages (or from page to page) crossfades, and a tapped reel grows into the player */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.player { view-transition-name: kreel; }
::view-transition-group(kreel) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

/* carousel posts (round seven phase 7): the slides swipe sideways; arrows and a count once the script runs */
.deck { position: relative; border-radius: 20px; overflow: hidden; background: #0d0c0b; box-shadow: 0 14px 34px rgb(0 0 0 / .14); }
.deck ol { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 0; scrollbar-width: none; overscroll-behavior-x: contain; }
.deck ol::-webkit-scrollbar { display: none; }
.deck li { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.deck img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; }
.deck .dn { position: absolute; top: 12px; right: 12px; padding: 4px 10px; border-radius: 999px; background: rgb(0 0 0 / .58); color: #fff; font: 600 12px/1.3 var(--k-ui); font-variant-numeric: tabular-nums; pointer-events: none; }
.deck button { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / .92); color: #151412; box-shadow: 0 2px 12px rgb(0 0 0 / .28); transition: opacity .2s, transform .15s; }
.deck button .ic { width: 18px; height: 18px; }
.deck button[data-d="-1"] { left: 12px; } .deck button[data-d="-1"] .ic { transform: scaleX(-1); }
.deck button[data-d="1"] { right: 12px; }
.deck button:active { transform: scale(.92); }
.deck button[disabled] { opacity: 0; pointer-events: none; }
@media (hover: none) { .deck button { display: none; } }
.dots { display: flex; justify-content: center; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--c-hair)); transition: background .2s, transform .2s; }
.dots i[data-on] { background: rgb(var(--c-brass)); transform: scale(1.25); }
.items { list-style: none; padding: 0 !important; margin: 0 0 16px; display: grid; gap: 10px; }
.items li { padding: 12px 15px; border-radius: 14px; background: rgb(var(--c-paper)); box-shadow: 0 0 0 1px rgb(var(--c-hair)); line-height: 1.5; }
.items b { display: block; color: rgb(var(--c-heading)); font-weight: 600; }
.items span { display: block; margin-top: 3px; font-size: 15.5px; color: rgb(var(--c-charcoal)); }
.qnote2 { font-size: 13.5px; color: rgb(var(--c-muted)); }
.card .pic.sq img { aspect-ratio: 3 / 4; }

/* SEO round (10 Oct): the case line under the H1, the trace note under Sources, official-text links */
.case { font-size: 13.5px; color: rgb(var(--c-muted)); margin: 6px 0 10px; line-height: 1.45; }
.chk { font-size: 13px; color: rgb(var(--c-muted)); margin: 10px 0 0; }
.srcl { display: inline-block; margin-left: 6px; font-size: 13px; font-weight: 600; color: rgb(var(--c-brass, 184 135 63)); text-decoration: underline; text-underline-offset: 2px; }

/* Check yourself (myth reels): true or false, then the next myth */
.quiz .qq { font-weight: 600; }
.quiz .qb { display: flex; gap: 10px; margin: 8px 0 12px; }
.quiz .qb button { min-height: 44px; min-width: 96px; padding: 0 18px; border-radius: 999px; border: 1.5px solid rgb(var(--c-navy)); background: transparent; color: rgb(var(--c-navy)); font: inherit; font-weight: 600; cursor: pointer; }
.quiz .qb button:disabled { cursor: default; opacity: .55; }
.quiz .qb button[aria-pressed="true"] { opacity: 1; background: rgb(var(--c-navy)); color: #fff; }
.quiz[data-done="f"] .qr b::before { content: "Right. The answer: "; }
.quiz[data-done="t"] .qr b::before { content: "Not quite. The answer: "; }
.quiz .qn { font-size: 14.5px; }
.about .sec p { max-width: 68ch; }

/* guides (step-by-step answer pages) and the pointer to them on reels and carousels */
.gnote { margin: 22px 0; padding: 14px 16px; border: 1px solid rgb(var(--c-line, 226 220 207)); border-left: 4px solid rgb(var(--c-brass)); border-radius: 10px; background: rgb(var(--c-cream)); }
.gnote .kk { margin: 0 0 6px; }
.gnote a { display: block; font-weight: 600; color: rgb(var(--c-navy)); text-underline-offset: 3px; padding: 4px 0; }
.card.guide a { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid rgb(var(--c-line, 226 220 207)); border-left: 4px solid rgb(var(--c-brass)); border-radius: 12px; background: rgb(var(--c-cream)); height: 100%; }
.card.guide small { color: rgb(var(--c-muted)); line-height: 1.45; }
.gtext .items li { margin-bottom: 10px; }

.cards:has(> .card.guide) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }