/* adalaty.com — the one stylesheet (Block W, W.3).
   Every colour, size and distance on the public site is a token here;
   no page or component names its own. Light only; Mist, the app's own
   light theme, with navy and gold kept for the wordmark's rule and the
   navy band, and teal for the mark. Mobile first. */

/* The app's four faces as WOFF2 subsets (Bengali and Latin, every shaping
   feature kept), 244 KB where the TTFs were 1.2 MB (W.8, 11 Oct 2026); the
   TTFs stay for the PDFs and the mail pages, and as the fallback here. */
@font-face { font-family: 'SolaimanLipi'; font-weight: 400; font-display: swap; src: url('/fonts/SolaimanLipi-Regular.woff2') format('woff2'), url('/fonts/SolaimanLipi-Regular.ttf') format('truetype'); }
@font-face { font-family: 'SolaimanLipi'; font-weight: 700; font-display: swap; src: url('/fonts/SolaimanLipi-Bold.woff2') format('woff2'), url('/fonts/SolaimanLipi-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/Inter-Regular.woff2') format('woff2'), url('/fonts/Inter-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'), url('/fonts/Inter-SemiBold.ttf') format('truetype'); }
/* The wordmark's face (Yaqub, 17 Oct 2026, B of two): Marcellus, Roman
   capitals, OFL (public/fonts/Marcellus-OFL.txt), cut down to the six
   letters of ADALATY — 1.4 KB. Nothing else is set in it. */
@font-face { font-family: 'Marcellus'; font-weight: 400; font-display: swap; src: url('/fonts/Marcellus-Regular.woff2') format('woff2'), url('/fonts/Marcellus-Regular.ttf') format('truetype'); }

:root {
    color-scheme: light;

    /* Mist (mobile/lib/theme/app_tokens.dart, light). */
    --ground: #F2F5F8;
    --panel: #FFFFFF;
    --border: #C7D1DB;
    /* A choice with words on it: the app's softer middle grey (28 Sep 2026). */
    --choice-edge: #9AA8B5;
    /* A box to type in or drop a file on: the app's field edge, 3.5 : 1 on
       white, where the choice's grey is 2.4 (flow 12). */
    --edge: #7D8B98;
    --ink: #0B1620;
    --ink-2: #1C2A35;
    --ink-3: #3B4B57;
    --link: #0B5C76;
    --fill: #0B4F66;
    --on-fill: #FFFFFF;
    --focus: #0B4F66;
    /* A refusal under a field: the app's own red (outstanding). */
    --error: #8F1F1F;
    /* Done: the app's own green (received), for the payment page's tick. */
    --done: #0B5E48;
    --done-tint: #E3F1EA;

    /* Brand: the navy band and the wordmark's gold rule (Step 9). */
    --navy: #11203A;
    --gold: #C9A227;
    /* On the navy band (P.0, B3): words, and the focus ring, which ocean
       blue would lose on navy. */
    --on-navy: #C9D1DE;
    /* The hero's light: a lighter navy behind the phone (P.3). */
    --navy-2: #1A2D4C;
    --focus-on-navy: #FFFFFF;
    /* The mark on a dark ground: the scales in a lighter teal
       (resources/brand/mark-dark.svg); on a light one they are the icon's teal. */
    --mark-main-on-dark: #4CC3D6;

    --font-bn: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
    --font-en: 'Inter', system-ui, sans-serif;

    /* The app's spacing scale, extended upward for a page. */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;

    --radius: 12px;
    --radius-lg: 24px;
    --tint: #E6EFF4;
    /* The foot of a phone's pale stage (P.5). */
    --tint-2: #DCE8EF;

    /* Type: 13 is the floor, as in the app. */
    --t-xs: 13px;
    --t-sm: 14px;
    --t-base: 16px;
    --t-lg: 18px;
    /* A small heading that does not grow with the screen: a post's H3, the
       payment page's title (Yaqub, 13 Oct 2026: "it is now looking big"). */
    --t-h3: 22px;
    --t-h1: clamp(28px, 1.4rem + 2.6vw, 44px);
    --leading: 1.6;

    --wrap: 1120px;
    --measure: 66ch;
    --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-bn);
    font-size: var(--t-base);
    line-height: var(--leading);
    background: var(--ground);
    color: var(--ink);
}
[lang="en"] { font-family: var(--font-en); }
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--fill); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--s-1); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-4); }
@media (min-width: 720px) { .wrap { padding: 0 var(--s-5); } }

/* The skip link, only when it is reached by keyboard. */
.skip {
    position: absolute;
    left: var(--s-4);
    top: -100px;
    padding: var(--s-2) var(--s-3);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    z-index: 10;
}
.skip:focus { top: var(--s-2); }

/* Header: white on every page, the navy hero below it (16 Oct 2026, the
   header review's A). The mark in its light-ground colours; the same four
   links at every width, the current page in a pale pill. */
.header { position: sticky; top: 0; z-index: 5; background: var(--panel); border-bottom: 1px solid var(--border); }
.hero :focus-visible { outline-color: var(--focus-on-navy); }
/* A section the header's links jump to lands below the bar, not under it. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.header-row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
/* The lockup (Yaqub, 17 Oct 2026): a 36 mark close to the name, and the
   name in navy as ADALATY, spaced Roman capitals in Marcellus — one unit,
   the inscription over a court's door. In the header the name shows only
   from 720px, where the links leave room for it. */
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.mark { width: 36px; height: 36px; }
.brand-name { font-family: 'Marcellus', var(--font-en); font-size: 18px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.header .brand-name { display: none; }
@media (min-width: 720px) { .header .brand-name { display: inline; } }
.reminder-card-icon, .post-app { --mark-main: var(--mark-main-on-dark); }
/* The brand block (Yaqub, 19 Oct 2026, A3, as the app's sign-in): the
   scales over the name, no gold rule; in the post's navy box the lighter-teal
   mark of a dark ground and the name in --on-navy. The spacing after the last
   letter is taken back, so the name centres under the mark. */
.brand-block { flex-direction: column; gap: var(--s-2); }
.brand-block .mark { width: 44px; height: 44px; }
.brand-block .brand-name { margin-right: -.14em; }
.post-app .brand-name { color: var(--on-navy); }

/* The page */
.main { flex: 1; }

.nav { display: flex; align-items: center; gap: var(--s-1); }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-3); border-radius: 999px; color: var(--ink-3); text-decoration: none; font-size: var(--t-base); white-space: nowrap; }
.nav-link:hover { color: var(--ink); background: var(--ground); }
.nav-link[aria-current="page"] { color: var(--fill); background: var(--tint); font-weight: 700; }
/* The focus ring follows the pill, not the page-wide 4px corner. */
.nav-link:focus-visible { border-radius: 999px; }
@media (min-width: 720px) { .nav-link { padding: var(--s-2) var(--s-4); } }

/* The one button: a pill at its label's width, as the app's (no full-width
   buttons anywhere, product-decisions). */
.button { display: inline-flex; align-items: center; height: 44px; padding: 0 var(--s-4); border-radius: 999px; background: var(--fill); color: var(--on-fill) !important; font-weight: 700; font-size: var(--t-sm); text-decoration: none; white-space: nowrap; }
.button:hover { background: var(--link); }

/* Google's badge: its own artwork, clear space included, at its own ratio;
   the badge itself at least 28px tall (Google Play badge guidelines, read
   13 Oct 2026). One size everywhere — the hero, the blog's side box and the
   footer (Yaqub, 29 Oct 2026). */
.play-heading { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; }
.play-badge { display: inline-block; --badge-w: 200px; }
.play-badge img { width: var(--badge-w); height: auto; }
/* The artwork carries its clear space, 6.35% of its width on every side, so
   the line over it sits as close as the guidelines allow; on a left edge the
   badge is pulled back by that space, so its visible edge lines up with the
   words above it. */
.hero .play-badge img, .footer-brand .play-badge img { margin-left: calc(var(--badge-w) * -0.0635); }

/* Footer (P.2, redone 16 Oct 2026, the footer review's A): white — the
   mark with the name, the tagline and the badge; the site's pages; how to
   reach us, each line only when its fact is set — and under a hairline one
   row, the two policies and the copyright. The brand over the two lists
   from 720px, three columns from 900px (flow 12). Every link is 44px tall
   to the finger (flow 12): the lists' links by their own padding, the
   policies' by a padding their negative margin takes back, so the row
   keeps its height. */
.footer { background: var(--panel); border-top: 1px solid var(--border); }
.footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-7) 0 var(--s-6); }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.footer-line { color: var(--ink-3); max-width: 36ch; }
.footer-brand .play-heading { margin-bottom: calc(var(--s-3) * -1); }
.footer-col-title { margin-bottom: var(--s-1); font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); }
.footer-col ul { list-style: none; display: flex; flex-direction: column; }
.footer-col a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--ink); text-decoration: none; }
.footer-col a:hover, .footer-legal a:hover { color: var(--link); }
.footer-col .icon { width: 18px; height: 18px; color: var(--fill); }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; border-top: 1px solid var(--border); padding: var(--s-4) 0 var(--s-5); font-size: var(--t-sm); color: var(--ink-3); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-1) var(--s-4); }
.footer-legal a { padding-block: 11px; margin-block: -11px; color: var(--ink-3); text-decoration: none; }
@media (min-width: 720px) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
    .footer-cols { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-7); padding: var(--s-8) 0 var(--s-7); }
    .footer-brand { grid-column: auto; }
    .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* A page's opening line under its title (contact). */
.section-line { margin-top: var(--s-2); color: var(--ink-3); max-width: var(--measure); }

/* A phone, drawn here so every screenshot sits in the same device. */
.phone-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.phone { position: relative; width: 250px; max-width: 100%; aspect-ratio: 1080 / 2400; border-radius: 40px; background: linear-gradient(160deg, #2A3645, var(--ink) 40%); padding: 9px; box-sizing: border-box; box-shadow: 0 30px 50px -20px rgba(11, 22, 32, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.phone::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 84px; height: 22px; border-radius: 0 0 14px 14px; background: var(--ink); z-index: 1; }
.phone-screen { display: block; width: 100%; height: 100%; border-radius: 28px; object-fit: cover; background: var(--panel); }
.phone-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s-6) var(--s-4); font-size: var(--t-sm); color: var(--ink-3); background: var(--ground); }
@media (max-width: 599px) { .phone { width: 210px; } }

/* Hero: the one navy band under the white header (P.3, redone 16 Oct 2026,
   the hero review's B). The words beside a small phone, the evening-before
   reminder on its lower edge, nothing hanging out of the band; under
   1024px the phone drops out and the reminder stays under the badge. */
.hero { background: radial-gradient(70% 80% at 80% 70%, var(--navy-2), var(--navy) 70%); color: var(--on-fill); }
.hero-row { display: flex; flex-direction: column; gap: var(--s-5); padding-top: var(--s-6); padding-bottom: var(--s-6); }
.hero-text { max-width: 600px; }
/* The tagline after a short gold rule, as every section's small line opens
   (17 Oct 2026, in place of the gold-edged pill); 13px on a phone so it
   stays on one line. */
.hero-eyebrow { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-xs); color: var(--on-navy); }
.hero-eyebrow::before { content: ''; flex: none; width: 24px; height: 2px; border-radius: 2px; background: var(--gold); }
@media (min-width: 720px) { .hero-eyebrow { font-size: var(--t-base); } }
.hero-heading { margin-top: var(--s-3); font-size: clamp(32px, 1.4rem + 2.6vw, 56px); font-weight: 700; line-height: 1.17; text-wrap: balance; }
.hero-line { margin-top: var(--s-4); font-size: var(--t-lg); color: var(--on-navy); max-width: var(--measure); }
.hero .play-heading { margin-top: var(--s-5); }
.hero-pics { position: relative; display: flex; }
.hero-pics .phone-figure { display: none; }
/* The reminder card (x-site.reminder): a phone notification, white on
   whatever dark it stands on; on the hero's phone. */
.reminder-card { display: flex; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--panel); color: var(--ink); border-radius: 18px; box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .55); }
.reminder-card-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); }
.reminder-card-icon .mark { width: 17px; height: 17px; }
.reminder-card-text { display: flex; flex-direction: column; min-width: 0; }
.reminder-card-app { font-size: var(--t-xs); color: var(--ink-3); }
.reminder-card-title { margin-top: 2px; font-size: var(--t-sm); font-weight: 700; line-height: 1.35; }
.reminder-card-body { font-size: var(--t-xs); line-height: 1.4; color: var(--ink-2); }
.hero-alert { width: 300px; max-width: 100%; }
/* Side by side from 1024px; narrower, the words would get a squeezed column. */
@media (min-width: 1024px) {
    .hero-row { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s-7); padding-top: var(--s-7); padding-bottom: var(--s-7); }
    .hero-text { flex: 1 1 0; }
    .hero-pics { flex: 0 0 420px; height: 470px; }
    .hero-pics .phone-figure { display: flex; position: absolute; }
    .hero-pics .phone { border-radius: 30px; padding: 7px; }
    .hero-pics .phone::before { top: 7px; width: 56px; height: 15px; }
    .hero-pics .phone-screen { border-radius: 24px; }
    .hero-phone-front { top: 0; right: 0; }
    .hero-phone-front .phone { width: 215px; }
    .hero-phone-back { top: 40px; right: 150px; transform: rotate(-4deg); }
    .hero-phone-back .phone { width: 200px; }
    .hero-alert { position: absolute; z-index: 3; left: -10px; bottom: 36px; width: 290px; padding: var(--s-4); border-radius: 20px; }
    .hero-alert .reminder-card-icon { width: 32px; height: 32px; }
    .hero-alert .reminder-card-icon .mark { width: 20px; height: 20px; }
    .hero-alert .reminder-card-title { font-size: var(--t-base); }
    .hero-alert .reminder-card-body { font-size: var(--t-sm); }
}

/* Features (the screens review, 29 Oct 2026): five rows, each the app's
   screen in a phone with its labels and the words beside it. One column on
   a phone, the words first; from 900px two columns, the phone on the right
   and then on the left, row by row. */
.eyebrow { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-base); color: var(--ink-3); }
.eyebrow::before { content: ''; flex: none; width: 24px; height: 2px; border-radius: 2px; background: var(--gold); }
/* A section's head, centred at every width (Yaqub, 13 Oct 2026, P.9:
   "make text in center"): the list of every feature. */
.section-head { text-align: center; }
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after { content: ''; flex: none; width: 24px; height: 2px; border-radius: 2px; background: var(--gold); }
.features-heading { margin-top: var(--s-2); font-size: var(--t-h1); font-weight: 700; line-height: 1.25; text-wrap: balance; }
.icon { width: 22px; height: 22px; fill: currentColor; flex: none; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius); background: var(--tint); color: var(--fill); }
/* The rows are white and pale by turns, the first white under the navy hero, the list after them pale and the footer white again. */
.features { background: var(--panel); }
.feature-bands { list-style: none; }
.feature-band { padding-block: var(--s-7); }
.feature-band:nth-child(even) { background: var(--ground); }
/* min-width 0: a flex child keeps its content's minimum width otherwise, and at 360px a row ran past the screen. */
.feature-row { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); min-width: 0; }
.feature-row-text { width: 100%; min-width: 0; }
.feature-row-heading { margin-top: var(--s-2); font-size: var(--t-h3); font-weight: 700; line-height: 1.3; text-wrap: balance; }
.feature-row-points { list-style: none; margin-top: var(--s-4); border-bottom: 1px solid var(--border); }
.feature-row-points li { padding: var(--s-3) 0; border-top: 1px solid var(--border); color: var(--ink-2); }
.feature-row-shot { display: block; width: 100%; max-width: 420px; height: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
@media (min-width: 900px) {
    .feature-band { padding-block: var(--s-8); }
    .feature-row { flex-direction: row; justify-content: space-between; gap: var(--s-7); }
    .feature-band:nth-child(even) .feature-row { flex-direction: row-reverse; }
    .feature-row-text { flex: 1 1 0; max-width: 460px; }
    .feature-row-shot { flex: 0 0 420px; }
}

/* Every feature in one list (29 Oct 2026): the same pale ground as the other bands, five white
   groups of check lines; one column on a phone, two from 720px, three from
   1024px (the last row's two groups sit left). */
.all-features { background: var(--ground); padding-top: var(--s-7); padding-bottom: var(--s-8); }
.all-groups { display: grid; grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.all-group { min-width: 0; padding: var(--s-5) var(--s-5) var(--s-3); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.all-group-title { font-size: var(--t-lg); font-weight: 700; color: var(--fill); }
.all-group ul { list-style: none; margin-top: var(--s-2); }
.all-group li { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--border); color: var(--ink-2); }
.all-group li .icon { margin-top: 1px; width: 20px; height: 20px; color: var(--done); }
@media (min-width: 720px) { .all-groups { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 1024px) { .all-groups { grid-template-columns: repeat(3, 1fr); } }

/* Legal pages */
/* The text in a white card on the pale page, as a post is (Yaqub, 29 Oct 2026). */
.legal { max-width: 760px; margin: var(--s-6) 0 var(--s-8); padding: var(--s-5) var(--s-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
@media (min-width: 720px) { .legal { padding: var(--s-7); } }
.legal-updated { font-size: var(--t-sm); color: var(--ink-3); }
.legal .prose { margin-top: var(--s-5); }

/* Contact (13 Oct 2026): the direct rows with their icons, then the form;
   one column on a phone, side by side on a wide screen. A field is the
   app's own: its name on the box's edge, 12px corners, 56px tall. */
.contact-page { padding: var(--s-6) 0 var(--s-8); }
.contact-cols { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }
.contact-card { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.contact-card-title { margin-bottom: var(--s-2); font-size: var(--t-lg); font-weight: 700; }
.contact-rows { list-style: none; }
.contact-rows li + li { border-top: 1px solid var(--border); }
.contact-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) 0; color: inherit; text-decoration: none; }
.contact-row > .icon { color: var(--choice-edge); }
.icon-tile-md { width: 40px; height: 40px; border-radius: var(--radius); }
.contact-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.contact-row-label { font-size: var(--t-sm); color: var(--ink-3); }
.contact-row-value { color: var(--link); font-weight: 600; overflow-wrap: anywhere; }
.contact-form { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-2); }
.field { position: relative; display: block; border: 1px solid var(--edge); border-radius: var(--radius); }
.field:focus-within { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.field-name { position: absolute; top: -10px; left: var(--s-3); padding: 0 var(--s-1); background: var(--panel); font-size: var(--t-xs); line-height: 18px; color: var(--ink-3); }
.field input, .field textarea { display: block; width: 100%; height: 56px; padding: var(--s-4); border: 0; border-radius: var(--radius); background: transparent; font: inherit; color: var(--ink); }
.field textarea { height: auto; min-height: 120px; resize: vertical; }
.field :focus-visible { outline: none; }
/* A refused field (flow 12, as the email pages' .field.bad): the red edge,
   focused or not, and its message close under the box, in line with the
   text typed in it, so it reads as that field's and not the next one's. */
.field-bad, .field-bad:focus-within { border-color: var(--error); }
.field-bad:focus-within { box-shadow: inset 0 0 0 1px var(--error); }
.field-error { margin-top: calc(-1 * var(--s-2)); padding: 0 var(--s-4); color: var(--error); font-size: var(--t-sm); }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-done { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-5) 0; text-align: center; }
@media (min-width: 900px) {
    .contact-cols { flex-direction: row; align-items: flex-start; gap: var(--s-5); }
    .contact-card { flex: 1 1 0; padding: var(--s-6); }
}

/* Every inner page's title, one size (13 Oct 2026: "make consistent"):
   contact, payment, the blog, a post, the legal pages, not found. */
.page-title { font-size: var(--t-h3); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.empty { color: var(--ink-3); padding: var(--s-6) 0; }

/* Chips: one sideways-scrolling row, never a second row. */
.chips { display: flex; gap: var(--s-2); overflow-x: auto; margin-top: var(--s-5); padding-bottom: var(--s-2); margin-bottom: var(--s-4); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-4); border: 1px solid var(--choice-edge); border-radius: 999px; background: var(--panel); color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); line-height: 1.4; }
.chip:hover { border-color: var(--fill); color: var(--fill); }
.chip-on { background: var(--fill); border-color: var(--fill); color: var(--on-fill); }
.chip-on:hover { color: var(--on-fill); }

/* The blog's list */
.blog { padding: var(--s-6) 0 var(--s-8); }
/* Posts as cards (13 Oct 2026, Yaqub's pick A): one column on a phone, two
   from 720px, three from 1024px; cards in a row stand the same height. The
   title's link is stretched over the card; the category tag sits above it. */
.post-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.post-card { position: relative; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.post-card:hover { border-color: var(--choice-edge); }
.post-card-picture { background: var(--ground); }
.post-card-picture img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); }
/* A post's category tag, on the cards and atop a post. */
.post-tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2); border-radius: 999px; background: var(--tint); color: var(--fill); font-size: var(--t-xs); font-weight: 700; line-height: 1.5; text-decoration: none; }
/* 28px drawn, 44px to the finger: the tag's reach stretched past its pill
   into the space around it (flow 12). */
.post-tag::after { content: ''; position: absolute; inset: -8px -4px; }
.post-tag .icon { width: 16px; height: 16px; }
.post-tag:hover { background: var(--tint-2); color: var(--fill); }
.post-card-title { font-size: var(--t-lg); font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.post-card-title a { color: var(--ink); text-decoration: none; }
.post-card-title a::after { content: ''; position: absolute; inset: 0; }
.post-card:hover .post-card-title a { color: var(--link); }
.post-card-excerpt { color: var(--ink-3); font-size: var(--t-base); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-foot { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--t-xs); color: var(--ink-3); }
.post-card-read { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--link); font-weight: 700; }
.post-card-read .icon { width: 18px; height: 18px; }
.post-card:has(.post-card-title a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.post-card-title a:focus-visible { outline: none; }
@media (min-width: 720px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
    .post-card-text { padding: var(--s-5); }
}
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.pager { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-5); }
/* 44px to the finger, the row's height kept (flow 12); as the trail's. */
.pager a { padding-block: 9px; margin-block: -9px; }

/* A post (13 Oct 2026, Yaqub's pick B): the trail, then the post in one
   white card with a side column beside it from 1024px, under it before. */
.post-page { padding-top: var(--s-5); padding-bottom: var(--s-8); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); font-size: var(--t-sm); }
.crumbs a { padding-block: 11px; margin-block: -11px; text-decoration: none; }
.crumbs .icon { width: 18px; height: 18px; color: var(--ink-3); }
.post-layout { display: flex; flex-direction: column; gap: var(--s-5); margin-top: var(--s-4); }
.post { min-width: 0; padding: var(--s-5) var(--s-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.post-head { display: flex; flex-direction: column; align-items: flex-start; }
.post-head .page-title { margin-top: var(--s-3); }
.post-date { margin-top: var(--s-1); font-size: var(--t-sm); color: var(--ink-3); }
.post-head .post-picture { align-self: stretch; }
.post .prose { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.post-side { display: flex; flex-direction: column; gap: var(--s-4); }
.post-app { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5); border-radius: var(--radius-lg); background: var(--navy); text-align: center; }
.post-app-line { font-size: var(--t-sm); color: var(--on-navy); }
.post-app .play-heading { margin: var(--s-2) 0 calc(var(--s-2) * -1); color: var(--on-fill); }
.post-app .play-badge { margin-top: 0; }
.post-app :focus-visible { outline-color: var(--focus-on-navy); }
.post-more { display: flex; flex-direction: column; padding: var(--s-4) var(--s-5); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.post-more-title { font-size: var(--t-base); font-weight: 700; padding-bottom: var(--s-2); }
.post-more-row { display: flex; flex-direction: column; padding: var(--s-3) 0; color: var(--ink); text-decoration: none; }
.post-more-row + .post-more-row { border-top: 1px solid var(--border); }
.post-more-row:hover { color: var(--link); }
.post-more-category { font-size: var(--t-xs); color: var(--fill); }
.post-more-name { font-size: var(--t-base); font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.post-picture { margin-top: var(--s-5); border-radius: var(--radius-lg); overflow: hidden; background: var(--panel); border: 1px solid var(--border); }
.post-picture img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 720px) { .post { padding: var(--s-7); } }
@media (min-width: 1024px) {
    .post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: var(--s-5); }
    .post-side { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}

/* The body as the editor wrote it, sanitised. */
.prose { margin-top: var(--s-5); line-height: 1.75; color: var(--ink); overflow-wrap: break-word; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--t-lg); line-height: 1.4; margin-top: var(--s-6); }
.prose h3 { font-size: var(--t-base); line-height: 1.4; margin-top: var(--s-5); }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose blockquote { border-left: 3px solid var(--gold); padding-left: var(--s-4); color: var(--ink-2); }
/* height auto: a picture pasted with its width and height kept its height
   when the column shrank it (flow 12). */
.prose img { height: auto; border-radius: var(--radius); margin: var(--s-5) 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-6) 0; }
.prose a { word-break: break-word; }
/* A table or a code block wider than the column scrolls inside itself,
   never the page (flow 12). */
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { border-bottom-color: var(--edge); }
.prose pre { overflow-x: auto; }

/* A notice page: not found, and the like. */
.notice { max-width: var(--measure); margin: var(--s-6) 0 var(--s-8); padding: var(--s-5) var(--s-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
@media (min-width: 720px) { .notice { padding: var(--s-6); } }
.notice-line { margin-top: var(--s-3); color: var(--ink-3); }
.notice-link { display: inline-block; margin-top: var(--s-5); }

/* The payment page (Block 9, 9.4), in three numbered steps, drawn for a
   phone: the plan as two radio rows, the amount to send following the
   choice (:has, no script), the QR, the screenshot. After sending, a tick
   and the button back to the app. */
.pay { max-width: 520px; padding: var(--s-5) 0 var(--s-8); display: flex; flex-direction: column; gap: var(--s-4); }
.pay-steps { display: flex; flex-direction: column; gap: var(--s-4); }
.pay-step { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pay-step-title { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--t-lg); font-weight: 700; line-height: 1.35; }
.pay-num { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill); color: var(--on-fill); font-size: var(--t-sm); }
.pay-plans { display: flex; flex-direction: column; gap: var(--s-3); }
.pay-plan { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.pay-plan:has(input:checked) { border-color: var(--fill); background: var(--tint); }
.pay-plan input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--fill); }
.pay-plan-name { display: flex; flex-direction: column; flex: 1; font-weight: 700; }
.pay-plan-name small { font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); }
.pay-plan-amount { font-size: var(--t-lg); font-weight: 700; }
.pay-send { color: var(--ink-3); }
.pay-send b { color: var(--ink); font-size: var(--t-lg); }
.pay-send-year { display: none; }
.pay-steps:has(input[value="year"]:checked) .pay-send-month { display: none; }
.pay-steps:has(input[value="year"]:checked) .pay-send-year { display: inline; }
/* The QR alone, large and centred on white, nothing around it (Yaqub, 29 Oct 2026): a phone's camera needs the room, and the bank's own image carries its marks. */
.pay-qr { align-self: center; width: min(100%, 300px); height: auto; padding: var(--s-3); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 14px 28px -20px rgba(11, 22, 32, .4); }
.pay-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pay-file { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1.5px dashed var(--edge); border-radius: var(--radius); color: var(--ink-3); cursor: pointer; word-break: break-all; }
.pay-file .icon { color: var(--fill); }
.pay-file.has { border-style: solid; border-color: var(--fill); background: var(--tint); color: var(--ink); }
.pay-input:focus-visible + .pay-file { outline: 2px solid var(--focus); outline-offset: 2px; }
.pay-error { color: var(--error); font-size: var(--t-sm); }
.pay-submit { align-self: flex-start; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.pay-done { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-4); text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pay-tick { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--done-tint); color: var(--done); }
.pay-tick .icon { width: 30px; height: 30px; }
.pay-done-line { font-size: var(--t-lg); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}