@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/assets/fonts/IBMPlexSansArabic-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("/assets/assets/fonts/IBMPlexSansArabic-Bold.ttf") format("truetype");
  /* 700, not `600 900`. The bundle ships four faces - 400, 500, 600, 700 - and
     claiming a 900 that does not exist is how `font-weight: 950` below ever
     looked reasonable. A weight outside this range is now resolved by the
     browser's own fallback rule rather than by this file, which for Arabic
     means a synthesised bold that smears the glyphs. */
  font-weight: 700;
  font-display: swap;
}
/* THE APP'S OWN TOKENS, and that is the whole point of this block.
   These pages used to run on a different palette from the app they lead to:
   #172942 navy, #ffda5a yellow, an #f6f8fb blue-grey page and #dde4ed
   blue-grey rules. Walking from the storefront to /privacy read as leaving
   WESH for somebody else's site, which on a page whose entire job is to be
   trusted is the worst place for that to happen.
   Every value below is from lib/design/wesh_tokens.dart - the sand, navy and
   teal the app is built from - and test/trust_design_lockstep_test.dart fails
   if any of them stops matching that file.
   Two are DERIVED rather than copied, and both are named where they are used:
   --warning-ink is one step darker than the token it comes from, because
   warning600 is 4.30:1 on warning100 and this stylesheet draws text there.
   The action needs no derivation any more: the palette now ships teal700 for
   text and teal600 for fills, which is the same distinction this file used to
   make on its own. A darker step of the
   same hue is what the contrast asked for; a different hue would have been a
   different palette. */
:root {
  color-scheme: light dark;
  /* navy700, the app's `secondary` */
  --brand: #23262D;
  /* teal700, the app's text-safe action: 6.80:1 on the page ground */
  --brand-soft: #C92F09;
  /* teal600, the app's `primary` - a FILL. White on it is 4.81:1, and it is
     never used as text on paper: it measures 4.35 there. */
  --accent: #FF4F23;
  --accent-ink: #C92F09;
  --accent-soft: #FFE4DC;
  --focus: #C92F09;
  /* sand50, the app's page ground */
  --page: #F8F6F2;
  /* pearl, the app's card surface. Not white: a white card on a warm ground
     reads as a hole cut in the page. */
  --surface: #FFFFFF;
  /* sand100, the app's `surfaceContainer` */
  --surface-soft: #F0EDE7;
  /* navy900, the app's `onSurface` */
  --ink: #111318;
  /* navy500, the app's `onSurfaceVariant`: 5.74:1 on the ground */
  --muted: #5D626B;
  /* sand200, the app's `outlineVariant` */
  --line: #DDD8CF;
  /* gold, the app's `tertiary`. A GROUND, never an ink: 1.43:1 on paper. */
  --stamp: #FF4F23;
  --warning: #FBEBCF;
  --warning-line: #9A6300;
  --warning-ink: #8A5800;
  /* The app's radius scale: WeshRadius.lg and .md. 18px was a rounder corner
     than anything the app draws, which is most of why a trust page read as a
     different product even in a screenshot with no colour in it. */
  /* THE APP'S DARK PLATE: the colour of its top bar and of the banner that
     opens every page (navy900, with white text, mist300 for quiet text and
     teal400 for the eyebrow). It is the same in both themes, as it is in the
     app, so it is declared once and never redeclared below. */
  --plate: #111318;
  --plate-ink: #FFFFFF;
  --plate-muted: #B8BDC7;
  --plate-accent: #FF6A43;
  --radius-lg: 12px;
  --radius-md: 8px;
  /* The app's own content widths and gutters (lib/theme/storefront_layout.dart
     StorefrontMetrics): 1320 on a laptop, 1400 on a desktop, 1520 wide. The
     pages used to sit in a 1040px column, the first thing that made a guide
     look like a different site beside the storefront. */
  --max: 1320px;
  --gutter: 32px;
}
@media (min-width: 1440px) { :root { --max: 1400px; --gutter: 40px; } }
@media (min-width: 1920px) { :root { --max: 1520px; --gutter: 48px; } }
@media (max-width: 1023px) { :root { --gutter: 24px; } }
@media (max-width: 599px) { :root { --gutter: 16px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* A flat ground. The radial wash was a decorative gradient over the top of
     every trust page, and the app draws none anywhere. */
  background: var(--page);
  color: var(--ink);
  /* The site's own face, named here rather than in a second `body` rule 100
     lines further down that quietly overrode this one. Tahoma is the fallback
     that actually carries Arabic on a system without the asset; -apple-system
     and "Segoe UI" were leading a stack whose first Arabic-capable member was
     Tahoma anyway. */
  font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  /* overflow-wrap is inherited, so this reaches every text box on every page.
     Without it a word had no break opportunity inside itself: the single-word
     English <h1> "methodology" and the address support@askwesh.com were what
     capped a 320px phone under text-only enlargement. They now break. */
  overflow-wrap: anywhere;
}
a { color: var(--brand-soft); font-weight: 600; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-md); }
.shell { width: min(var(--max), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.skip-link { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 20; transform: translateY(-160%); background: var(--ink); color: var(--surface); padding: 8px 12px; border-radius: var(--radius-md); }
.skip-link:focus { transform: translateY(0); }
/* The header IS the app's desktop header (lib/app_shell.dart): the dark plate
   at a minimum of 88, a hairline and a soft shadow under it rather than an
   accent stripe, the wordmark at 40, and the app's four destinations beside
   it. The markup is shared with every static page (tools/site_chrome.cjs). */
.site-header { background: var(--plate); border-bottom: 1px solid #262A31; box-shadow: 0 5px 18px rgba(11, 24, 17, .03); }
.site-header a:focus-visible { outline-color: var(--plate-accent); }
.header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 14px; min-height: 88px; padding-block: 10px; }
.brand { display: inline-flex; align-items: center; gap: 7px; padding: 6px; color: var(--plate-ink); font-size: 40px; font-weight: 700; line-height: 1; text-decoration: none; }
/* The public wordmark is the navy word with the question mark in accent
   yellow, matching StorefrontWordmark in the app header. */
.brand strong { color: var(--plate-ink); }
.brand strong em { color: var(--accent); font-style: normal; }
/* The drawn mark (docs/brand/wesh-mark.svg): its two parts are masks filled
   with the page's own ink and accent, so it follows the reader's theme. The
   words stay in the page for anyone who cannot see the drawing. */
.brand strong { position: relative; display: inline-block; inline-size: 2.126em; block-size: 1em; }
.brand-word, .brand-q { position: absolute; inset: 0; background: var(--plate-ink); -webkit-mask: url(/wesh-word.svg) center / contain no-repeat; mask: url(/wesh-word.svg) center / contain no-repeat; }
.brand-q { background: var(--accent); -webkit-mask-image: url(/wesh-q.svg); mask-image: url(/wesh-q.svg); }
.brand-text { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); }
/* At 310 % zoom the latin half of the mark breaks mid-word - "WES" above "H" -
   and it is left that way on purpose. Pinning the white space was tried and this
   file's own rule refused it (`trust_surfaces_a11y_test.dart` forbids the
   property outright: it turns enlarged text into LOST text), and that rule is
   right: a brand that wraps is
   ugly, a brand that is cut off is unreadable, and at 126px of viewport there is
   no third option. */
.brand span { color: var(--plate-muted); font-size: 12px; letter-spacing: .12em; }
/* The app's _HeaderNav: 15px labels in the plate's quiet ink, the current one
   in white at 700 with the accent rule under the word. */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.site-nav a { display: inline-flex; flex-direction: column; align-items: center; padding: 8px 12px 4px; border-radius: var(--radius-md); color: var(--plate-muted); font-size: 15px; font-weight: 600; line-height: 1.6; text-decoration: none; transition: color .2s ease; }
.site-nav a::after { content: ""; display: block; width: 34px; margin-top: 7px; border-top: 3px solid transparent; border-radius: 999px; transition: border-color .2s ease; }
.site-nav a:hover { color: var(--plate-ink); }
.site-nav a[aria-current="page"] { color: var(--plate-ink); font-weight: 700; }
.site-nav a[aria-current="page"]::after { border-top-color: var(--accent); }
.site-nav [lang="en"] { display: none; }
:root[data-lang="en"] .site-nav [lang="ar"] { display: none; }
:root[data-lang="en"] .site-nav [lang="en"] { display: inline; }
.page { padding-block: 40px 72px; }
/* The banner that opens a page, drawn the way the app draws its own
   (StorefrontPageHeader): the dark plate, the app's corner, and the accent as
   a thick rule on the reading side. */
.hero { position: relative; margin-block-end: 24px; padding: clamp(20px, 4vw, 40px); border-radius: var(--radius-lg); background: radial-gradient(90% 120% at 0% 115%, rgba(255, 106, 67, .26), rgba(255, 106, 67, 0) 70%), var(--plate); color: var(--plate-ink); }
/* The app hero's texture (home_screen.dart _searchPlate): the mark's question
   mark, large and faint at the far edge, inside the panel so nothing has to
   be clipped - clipping is how enlarged text gets lost. Paint only. */
.hero::before { content: ""; position: absolute; inset-inline-end: clamp(-24px, 4vw, 48px); inset-block: 0; inline-size: clamp(120px, 22vw, 260px); background: rgba(255, 106, 67, .10); -webkit-mask: url(/wesh-q.svg) center / contain no-repeat; mask: url(/wesh-q.svg) center / contain no-repeat; pointer-events: none; }
.hero > * { position: relative; max-width: 850px; }
/* The app sets a page title at 24 on a phone and 28 on a desktop. */
.hero h1 { font-size: clamp(26px, 4vw, 40px); }
.hero .eyebrow { color: var(--plate-accent); }
.hero .lead, .hero .muted { color: var(--plate-muted); }
/* The link to the one disclosure page: present before the guide's content, but
   as quiet as the dates beside it rather than a second call to action. */
.hero .hero-note { margin-top: 2px; font-size: 14px; }
.hero .hero-note a { display: inline-block; padding-block: 4px; color: inherit; font-weight: 400; text-underline-offset: 3px; }
.eyebrow { margin: 0 0 7px; color: var(--accent-ink); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
h1, h2, h3 { line-height: 1.35; }
h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.025em; }
h2 { margin: 30px 0 7px; font-size: 24px; }
h3 { margin: 20px 0 5px; font-size: 18px; }
p { margin: 7px 0 14px; }
.lead { max-width: 760px; color: var(--muted); font-size: 18px; }
.language-jump { display: inline-flex; margin-top: 8px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); text-decoration: none; }
.card { margin-top: 18px; padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 2px 12px rgba(14, 27, 42, .06); }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-block: 18px; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-soft); }
.mini-card h2, .mini-card h3 { margin-top: 0; }
/* THE GUIDES INDEX, laid out the way the app lays out a section: a heading on
   the page ground and white cards under it - not one big white panel holding
   grey boxes of red underlined links. A card is the app's card (surface,
   hairline, 12 corner); its title is ink, and the whole card is the link. */
.guide-index > h2 { margin: 40px 0 14px; font-size: 24px; }
.guide-index > h2:first-child { margin-top: 8px; }
.guide-index .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-block: 0; }
.guide-index .mini-card { position: relative; padding: 20px 22px; background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
.guide-index .mini-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(14, 27, 42, .06); }
.guide-index .mini-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.guide-index .mini-card h3 { margin-bottom: 6px; font-size: 18px; }
/* The guide's subject, as the app's cards show it: the icon in the accent's
   tint. */
.guide-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; margin-bottom: 10px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); }
.guide-icon svg { inline-size: 22px; block-size: 22px; fill: currentColor; }
.guide-index .mini-card h3 a { color: var(--ink); font-weight: 700; text-decoration: none; }
.guide-index .mini-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.guide-index .mini-card h3 a:focus-visible { outline: none; }
.guide-index .mini-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
/* The category, as the app's section eyebrow: small, bold, accent ink. */
.guide-index .mini-card .card-eyebrow { margin-bottom: 6px; color: var(--accent-ink); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.guide-index > p { max-width: 760px; }
/* THE HUB (tools/guide_hub.json): «الجديد» first, then one grid per section,
   newest first in each. «الجديد» is a grid of two (four from 781px); each
   section is a row that scrolls sideways. The whole card is the link.
   The app draws the same order (lib/services/guide_hub.dart). */
.hub-block { margin-block: 8px 34px; }
.hub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.hub-head h2 { margin: 0; font-size: 21px; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .2s ease, box-shadow .2s ease; }
.hub-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(14, 27, 42, .06); }
.hub-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.hub-card .guide-icon { inline-size: 36px; block-size: 36px; margin: 0 0 2px; }
.hub-card .guide-icon svg { inline-size: 20px; block-size: 20px; }
.hub-card .card-eyebrow { margin: 0; color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.hub-card h3 { margin: 0; font-size: 15.5px; line-height: 1.55; overflow-wrap: anywhere; }
.hub-card h3 a { color: var(--ink); font-weight: 700; text-decoration: none; }
.hub-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hub-card h3 a:focus-visible { outline: none; }
.hub-card .hub-lead { display: none; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.hub-card .hub-date { margin: auto 0 0; padding-block-start: 4px; color: var(--muted); font-size: 12.5px; }
/* A section is one row that scrolls sideways, as the app's product and
   coupon rows do: CSS only, snapping card by card. On a phone a card is the
   row less 64px, so the next one peeks past the edge. */
.hub-row { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(236px, calc(100% - 64px), 300px); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 0; padding-block-end: 8px; scrollbar-width: thin; }
.hub-row > .hub-card { scroll-snap-align: start; }
.hub-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-lg); }
.hub-row .hub-lead { display: block; }
.hub-hero { padding-block: clamp(18px, 3vw, 28px); }
.hub-hero h1 { margin: 0; }
@media (min-width: 781px) {
  .hub-block { margin-block: 12px 40px; }
  .hub-head h2 { font-size: 24px; }
  .hub-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
  .hub-new .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-row { grid-auto-columns: 280px; gap: 16px; }
  .hub-card { padding: 18px 20px; }
  .hub-card h3 { font-size: 17px; }
  .hub-card .hub-lead { display: block; }
}
@media (prefers-reduced-motion: reduce) { .hub-card { transition: none; } }
/* A guide's text keeps a reading measure inside the wider page: the card is
   as wide as the app's content, its lines are not. */
main.page > article.card > :not(.table-scroll):not(.grid) { max-width: 760px; margin-inline: auto; }
main.page > article.card > .table-scroll { max-width: 1000px; margin-inline: auto; }
.notice { margin-block: 20px; padding: 17px 19px; border: 1px solid var(--warning-line); border-radius: var(--radius-lg); background: var(--warning); color: var(--ink); }
.notice strong { display: block; color: var(--warning-ink); }
.disclosure { border-inline-start: 5px solid var(--accent); }
.muted { color: var(--muted); }
.checklist { padding-inline-start: 22px; }
.checklist li { margin-block: 8px; }
/* An Amazon pick under the guide section that talks about it (tools/build_guides.cjs):
   the .mini-card box, tightened to sit between two sections. */
.guide-pick { margin-block: 14px 24px; padding: 12px 16px; }
.guide-pick p { margin-block: 4px; }
.guide-pick p.muted { margin-block-start: 8px; font-size: 13.5px; line-height: 1.7; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 18px; }
.toc a { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-size: 13px; text-decoration: none; }
.en { direction: ltr; text-align: left; scroll-margin-top: 18px; }
.en .checklist { padding-left: 22px; padding-right: 0; }
.contact-list { list-style: none; padding: 0; }
.contact-list li { padding-block: 7px; border-bottom: 1px solid var(--line); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 14px; }
/* The WhatsApp call to action is a contact channel, not one of the official
   profiles above, so it is a button rather than another pill in that row. */
/* White on #169b67 is 3.55:1, under the 4.5:1 this 16px/700 label needs, so
   the resting state takes what used to be the hover green (5.35:1) and hover
   darkens one further step (7.59:1). The state change stays visible. */
.whatsapp-cta { display: inline-block; padding: 11px 18px; border-radius: 999px; background: #127a51; color: #fff; font-weight: 700; text-decoration: none; }
.whatsapp-cta:hover, .whatsapp-cta:focus-visible { background: #0e6041; }
.socials a { padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-soft); font-size: 13px; text-decoration: none; }
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
/* Three rows, the app footer's order: the mark and its promise, whose product
   this is, then the links in an even grid rather than a ragged line. */
.footer-row { display: grid; gap: 14px; padding-block: 28px; color: var(--muted); font-size: 13px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; justify-self: start; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.footer-mark { position: relative; display: inline-block; inline-size: 68px; block-size: 32px; }
.footer-mark .brand-word { background: var(--ink); }
.footer-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 4px 16px; padding-block-start: 12px; border-top: 1px solid var(--line); }
:root:not([data-lang="en"]) .footer-row [lang="en"] { display: none; }
:root[data-lang="en"] .footer-row [lang="ar"] { display: none; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links a[aria-current="page"] { color: var(--accent-ink); }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
/* Whose product this is: present, readable, and never louder than the legal links. */
.footer-studio { color: var(--muted); font-size: 12.5px; }
.footer-studio a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.footer-links a { color: var(--ink); }

@media (max-width: 780px) {
  .header-row { min-height: 64px; }
  .brand { font-size: 32px; }
  .grid, .grid.three { grid-template-columns: 1fr; }
  .page { padding-block-start: 32px; }
}

/* A phone at 390px: the wordmark, and under it the app's four destinations
   on one row. Pages with the app's bottom bar hide this row (below). */
@media (max-width: 620px) {
  .site-nav { width: 100%; justify-content: space-between; }
  .site-nav a { padding-inline: 6px; font-size: 14px; }
  .brand { font-size: 28px; }
}

/* THE READER'S THEME, not only the phone's.
   The app keeps its own light / dark / system choice, and these pages used to
   ignore it: a reader who set WESH to light on a phone in dark mode opened a
   guide and got a black page. /site-prefs.js copies the saved choice onto
   <html data-theme>, so the phone's setting now decides only when the reader
   chose "system" or the script never ran. The two blocks below carry the same
   tokens, and test/trust_design_lockstep_test.dart fails if they drift. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* The app's dark tokens, as THREE surfaces rather than one black: ink950
       is the ground, ink900 the card, ink800 a filled container; ink700 is the
       hairline, mist300 quiet text, paper the primary text and teal400 the
       accent. */
    --page: #0B0C0F;
    --surface: #1A1D22;
    --surface-soft: #272B32;
    --ink: #F7F8FA;
    --muted: #B8BDC7;
    --line: #3A3F48;
    --stamp: #FF6A43;
    --warning: #2D2918;
    --warning-line: #77682D;
    --warning-ink: #FBEBCF;
    --brand-soft: #FF6A43;
    --accent: #FF6A43;
    --accent-ink: #FF6A43;
    --accent-soft: #3A1B13;
    --focus: #FF6A43;
  }
  :root:not([data-theme="light"]) .card { background: var(--surface); box-shadow: none; }
}
:root[data-theme="dark"] {
  --page: #0B0C0F;
  --surface: #1A1D22;
  --surface-soft: #272B32;
  --ink: #F7F8FA;
  --muted: #B8BDC7;
  --line: #3A3F48;
  --stamp: #FF6A43;
  --warning: #2D2918;
  --warning-line: #77682D;
  --warning-ink: #FBEBCF;
  --brand-soft: #FF6A43;
  --accent: #FF6A43;
  --accent-ink: #FF6A43;
  --accent-soft: #3A1B13;
  --focus: #FF6A43;
}
:root[data-theme="dark"] .card { background: var(--surface); box-shadow: none; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media print {
  .site-header, .language-jump, .site-footer, .app-tabbar { display: none; }
  body { background: #fff; color: #000; }
  .hero { padding: 0; border: 0; background: none; color: #000; }
  .hero .eyebrow, .hero .lead, .hero .muted { color: #000; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* Comparison tables in the buying guides. Scrolls inside its own box on a
   phone so the page itself never scrolls sideways. */
.spec-table { width: 100%; border-collapse: collapse; margin-block: 18px; font-size: 15px; }
.spec-table th, .spec-table td { border: 1px solid var(--line); padding: 10px 12px; text-align: start; vertical-align: top; }
.spec-table thead th { background: var(--surface-soft); font-weight: 600; }
.spec-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, .02); }
/* A wide table scrolls inside its own box, at EVERY width.
   This used to be `.spec-table { display: block; overflow-x: auto }` inside a
   `max-width: 640px` query, while the layout breakpoint is 780px - so between
   640 and 780 a table wider than the column pushed the whole page sideways
   instead of scrolling. A table is the one thing allowed to be wider than the
   reading column, and only inside a container that scrolls. The container also
   takes `tabindex="0"` and a role from the builder, so it can be scrolled with
   a keyboard and is announced rather than being a silent trap. */
.table-scroll { overflow-x: auto; max-width: 100%; }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 640px) { .spec-table { white-space: normal; } }

/* ONE LANGUAGE AT A TIME.
   Every bilingual page carries its whole text twice, Arabic then English, and
   that stays in the HTML: a crawler, a reader with no JavaScript and a
   screen reader all still get both. What changes is what a reader sees.
   /site-prefs.js sets <html data-lang> from the language the reader chose in
   the app, and only then is the other half hidden - so with no script the page
   is exactly what it was, and never shows nothing. */
:root[data-lang="ar"] main > .en { display: none; }
:root[data-lang="en"] main > :not(.en) { display: none; }
[data-lang-switch="ar"] { display: none; }
:root[data-lang="en"] [data-lang-switch="ar"] { display: inline-flex; }
.en > [data-lang-switch="ar"] { margin: 0 0 14px; }

/* THE APP'S BOTTOM BAR, on the pages the app sends a reader to.
   The guides are static pages, and on a phone they used to open with none of
   the app's navigation: the five destinations a reader had a second ago were
   gone. The same five come back here, in the same order and with the same
   words, and each is a plain link, so it works without a script too.
   It only appears between 300 and 780 pixels. Wider, the header already holds
   the navigation; narrower - a phone at 310 % zoom is 126 pixels - a fixed
   bar would cover half of what little screen is left, so the header's own
   links carry the page there, as they always did. */
.app-tabbar { display: none; }
.app-tabbar [lang="en"] { display: none; }
:root[data-lang="en"] .app-tabbar [lang="ar"] { display: none; }
:root[data-lang="en"] .app-tabbar [lang="en"] { display: inline; }
:root[data-lang="en"] .app-tabbar { direction: ltr; }
@media (min-width: 300px) and (max-width: 780px) {
  /* The bottom bar is the navigation here, as it is in the app; every header
     link is one tap from the bar. */
  .has-tabbar .site-nav { display: none; }
  .has-tabbar .header-row { padding-block: 10px; }
  /* No footer on a phone (owner, 2026-09-25): the phone is the app, and an
     app has none. Every link it carried is on «حسابي», one tap away in the
     bar, and so is whose product this is. The page keeps the room the fixed
     bar needs instead. */
  .has-tabbar .site-footer { display: none; }
  body.has-tabbar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .app-tabbar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 15; justify-content: space-around; gap: 2px; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -4px 18px rgba(14, 27, 42, .06); }
  .app-tabbar a { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 3px; min-width: 0; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; }
  /* WESH's own icons, as the app draws them (lib/design/wesh_nav_icons.dart):
     outlines stroked at 1.9 of 24 with round ends, in the label's colour; no
     pill behind them. The dot is the selection - the accent on the current
     page (a graphic: 3.28:1 on the light bar, more on the dark), the muted ink
     at half strength everywhere else. */
  .app-tabbar .tab-icon { display: block; width: 24px; aspect-ratio: 1; margin-block: 4px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .app-tabbar .tab-icon .detail-fill { fill: currentColor; stroke: none; }
  .app-tabbar .tab-icon .dot { fill: currentColor; stroke: none; opacity: .5; }
  .app-tabbar a[aria-current="page"] { color: var(--ink); font-weight: 700; }
  .app-tabbar a[aria-current="page"] .tab-icon .dot { fill: var(--accent); opacity: 1; }
}