/* Shared styles for the site's SUB-PAGES (account, privacy, terms).
   index.html keeps its own inline <style> — this file is a copy of that
   stylesheet's shared half (fonts, tokens, base, buttons, header, footer) plus
   the form styles the subscription page needs. Two consequences:
     • font URLs here are relative to /assets/, hence `url(fonts/…)`;
     • /assets/* is cached IMMUTABLE for a year — any edit needs a NEW `.vN`
       filename and the <link> in all three pages updated.
   Design tokens must stay identical to index.html's :root. */

  @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
    src:url(fonts/plexmono-400-latin.v1.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
  @font-face{ font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:400; font-display:swap;
    src:url(fonts/plexarabic-400-arabic.v1.woff2) format('woff2');
    unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1 }
  @font-face{ font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:400; font-display:swap;
    src:url(fonts/plexarabic-400-latin.v1.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
  @font-face{ font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:600; font-display:swap;
    src:url(fonts/plexarabic-600-arabic.v1.woff2) format('woff2');
    unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1 }
  @font-face{ font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:600; font-display:swap;
    src:url(fonts/plexarabic-600-latin.v1.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
  @font-face{ font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:700; font-display:swap;
    src:url(fonts/plexarabic-700-arabic.v1.woff2) format('woff2');
    unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1 }
  @font-face{ font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:700; font-display:swap;
    src:url(fonts/plexarabic-700-latin.v1.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
  @font-face{ font-family:'Outfit'; font-style:normal; font-weight:300; font-display:swap;
    src:url(fonts/outfit-300-latin.v1.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
  @font-face{ font-family:'Tajawal'; font-style:normal; font-weight:800; font-display:swap;
    src:url(fonts/tajawal-800-arabic.v1.woff2) format('woff2');
    unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1 }
  @font-face{ font-family:'Tajawal'; font-style:normal; font-weight:800; font-display:swap;
    src:url(fonts/tajawal-800-latin.v1.woff2) format('woff2');
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

  :root{
    --teal-100:#DCEBE2; --teal-200:#B4D6C2; --teal-300:#7FB697; --teal-400:#48936F;
    --teal-500:#2E7A55; --teal-600:#1C6244; --teal-700:#144B34; --teal-800:#0E3626; --teal-900:#0A251A;
    --amber-100:#FBF0D5; --amber-300:#F3D68A; --amber-400:#FAB219; --amber-500:#D99513; --amber-600:#8A5B06;
    --n-0:#FCFCFB; --n-100:#F3F1EC; --n-200:#E7E3DA; --n-300:#CFC9BC;
    --n-400:#A8A29A; --n-450:#8C877D; --n-500:#6E6E66; --n-700:#4A4A45; --n-900:#1A1A19;
    --ink-fg:#F4F2EC; --ink-mute:#A9B7AF;
    --wrap:1140px; --pad:21px; --head-h:60px;
    --num:'Outfit',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;
    --disp:'Tajawal',system-ui,sans-serif;
    --shadow-sm:0 2px 6px -2px rgba(10,37,26,.10), 0 8px 22px -14px rgba(10,37,26,.28);
    --shadow-lg:0 4px 12px -4px rgba(10,37,26,.14), 0 28px 60px -34px rgba(10,37,26,.55);
  }
  *,*::before,*::after{ box-sizing:border-box }
  /* clip (not hidden) — no scroll container, so position:sticky keeps working.
     Needed on <html> too: the hero stage's bleed pseudo-element escapes <body>. */
  html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head-h) + 20px); overflow-x:clip }
  body{
    margin:0; background:var(--n-0); color:var(--n-900);
    font-family:'IBM Plex Sans Arabic',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased; overflow-x:clip;
  }
  a{ color:var(--teal-700); text-decoration:none }
  a:hover{ color:var(--teal-600) }
  h1,h2,h3{ font-family:var(--disp); font-weight:800; margin:0 }
  p{ margin:0 }
  ul{ margin:0; padding:0; list-style:none }
  svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2;
       stroke-linecap:round; stroke-linejoin:round; flex:none }
  :focus-visible{ outline:3px solid var(--teal-600); outline-offset:3px; border-radius:8px }
  .ink :focus-visible, footer :focus-visible, .hero__stage :focus-visible{ outline-color:var(--amber-400) }

  .skip{ position:fixed; top:10px; inset-inline-start:12px; z-index:60;
         width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
         background:var(--teal-600); color:var(--n-0); padding:0;
         border-radius:8px; font-size:14px; font-weight:700 }
  .skip:focus{ width:auto; height:auto; overflow:visible; clip-path:none;
               padding:11px 18px; color:var(--n-0) }

  .wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad) }
  .sec{ padding-block:72px }
  .rule{ border-bottom:1px solid var(--n-200) }
  .soft{ background:var(--n-100) }
  .ink{ background:var(--teal-900); color:var(--ink-fg) }
  .ink h2{ color:var(--n-0) }

  .eyebrow{ display:flex; align-items:center; gap:10px; font-size:12.5px;
            font-weight:700; color:var(--teal-600); letter-spacing:.01em }
  .eyebrow::before{ content:""; width:21px; height:2px; background:var(--amber-400); flex:none }
  .ink .eyebrow{ color:var(--teal-300) }
  .kicker{ font-size:12.5px; font-weight:700; color:var(--teal-600); margin-bottom:13px }
  .lead{ font-size:16.5px; line-height:1.95; color:var(--n-700); text-wrap:pretty }
  .ink .lead{ color:var(--teal-100) }
  .note{ font-size:13px; line-height:1.85; color:var(--n-500); text-wrap:pretty }
  h2{ font-size:clamp(26px,3.4vw,38px); line-height:1.38; text-wrap:balance }
  h3{ text-wrap:pretty }
  .num{ font-family:var(--num); font-weight:300; line-height:1; font-variant-numeric:tabular-nums }
  .mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
  /* single numeric token inside Arabic prose — isolate only, keep Arabic order */
  .n{ unicode-bidi:isolate; font-variant-numeric:tabular-nums }
  /* multi-group latin/numeric strings (dates, account numbers, ranges) — force LTR run order */
  .ltr{ direction:ltr; unicode-bidi:isolate; text-align:right }

  /* ---- buttons ---- */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px;
        min-height:52px; padding-inline:26px; border-radius:999px; font-size:16px;
        font-weight:700; font-family:inherit; cursor:pointer; border:1.5px solid transparent;
        transition:background 160ms ease-out, border-color 160ms ease-out,
                   color 160ms ease-out, transform 160ms ease-out }
  .btn svg{ font-size:18px }
  .btn--primary{ background:var(--teal-600); border-color:var(--teal-600); color:var(--n-0);
                 box-shadow:var(--shadow-sm) }
  .btn--primary:hover{ background:var(--teal-700); border-color:var(--teal-700); color:var(--n-0) }
  .btn--ghost{ background:transparent; border-color:var(--n-450); color:var(--n-900); font-weight:600 }
  .btn--ghost:hover{ background:var(--n-100); border-color:var(--n-500); color:var(--n-900) }
  .btn--sm{ min-height:44px; font-size:14px; padding-inline:20px }
  .btn:active{ transform:translateY(1px) }
  .btns{ display:flex; flex-wrap:wrap; gap:12px }

  /* ---- header ---- */
  header{ position:sticky; top:0; z-index:20; background:rgba(252,252,251,.92);
          backdrop-filter:blur(12px); border-bottom:1px solid var(--n-200) }
  .bar{ display:flex; align-items:center; gap:12px; padding-block:11px }
  .bar img{ width:36px; height:36px; flex:none }
  .brand{ font-family:var(--disp); font-weight:800; font-size:19px; white-space:nowrap }
  .beta{ font-size:11px; font-weight:700; color:var(--amber-600); background:var(--amber-100);
         border:1px dashed var(--amber-500); border-radius:999px; padding:4px 9px; white-space:nowrap }
  header nav{ margin-inline-start:auto; display:flex; gap:21px; font-size:14px;
              font-weight:600; color:var(--n-700) }
  header nav a, .foot nav a{ display:inline-flex; align-items:center; min-height:24px }
  header nav a{ color:inherit }
  header nav a:hover{ color:var(--teal-600) }
  .bar .btn{ margin-inline-start:21px }


  footer{ background:var(--teal-900); color:var(--ink-fg) }
  .foot{ display:flex; flex-wrap:wrap; gap:21px; align-items:center; padding-block:34px }
  .foot__mark{ display:inline-flex; flex:none }
  .foot__mark img{ width:52px; height:52px; display:block }
  .foot__name{ font-family:var(--disp); font-weight:800; font-size:18px; color:var(--n-0) }
  .foot nav{ display:flex; flex-wrap:wrap; gap:13px 21px; font-size:14px }
  .foot nav a{ color:var(--teal-200) }
  .foot nav a:hover{ color:var(--n-0) }
  .foot__legal{ padding-bottom:34px; font-size:12.5px; color:#93A79C; line-height:1.9 }


  /* ---- sub-page layout ---- */
  .page{ max-width:760px; margin:0 auto; padding:44px var(--pad) 72px }
  .page h1{ font-size:clamp(28px,4.4vw,40px); line-height:1.3; text-wrap:balance }
  .page h2{ font-size:clamp(20px,2.6vw,25px); margin-top:38px }
  .page h3{ font-size:17px; margin-top:26px }
  .page p, .page li{ font-size:15.5px; line-height:1.95; color:var(--n-700); text-wrap:pretty }
  .page p{ margin-top:13px }
  .page ul{ list-style:disc; padding-inline-start:22px; margin-top:13px }
  .page li{ margin-top:8px }
  .page .updated{ font-size:13px; color:var(--n-500); margin-top:8px }
  .card{ background:var(--n-0); border:1px solid var(--n-200); border-radius:18px;
         padding:22px; box-shadow:var(--shadow-sm); margin-top:21px }
  .card--quiet{ background:var(--n-100); box-shadow:none }
  .card h2, .card h3{ margin-top:0 }

  /* ---- the bank-transfer panel ---- */
  .bank{ display:grid; gap:12px; margin-top:16px }
  .bank__row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px;
              justify-content:space-between; padding:13px 15px;
              background:var(--n-0); border:1px solid var(--n-200); border-radius:12px }
  .bank__label{ font-size:13px; font-weight:700; color:var(--n-500) }
  .bank__value{ font-size:19px; font-weight:700 }
  .copy{ min-height:38px; padding-inline:14px; border-radius:999px; font-size:13px;
         font-weight:700; font-family:inherit; cursor:pointer; color:var(--teal-700);
         background:var(--teal-100); border:1px solid var(--teal-200) }
  .copy:hover{ background:var(--teal-200) }

  /* ---- form ---- */
  .field{ margin-top:18px }
  .field > label{ display:block; font-size:14px; font-weight:700; margin-bottom:7px }
  .field .hint{ font-size:12.5px; color:var(--n-500); margin-top:6px; line-height:1.8 }
  input[type=text], input[type=number], select{
    width:100%; min-height:50px; padding:0 15px; font:inherit; font-size:16px;
    color:var(--n-900); background:var(--n-0);
    border:1.5px solid var(--n-300); border-radius:12px }
  input:focus-visible, select:focus-visible{ border-color:var(--teal-600) }
  input[aria-invalid=true]{ border-color:#B3261E }
  .choices{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px }
  .choice{ position:relative }
  .choice input{ position:absolute; inset:0; opacity:0; cursor:pointer }
  .choice span{ display:inline-flex; align-items:center; min-height:46px; padding-inline:18px;
                border:1.5px solid var(--n-300); border-radius:999px; font-size:15px;
                font-weight:600; cursor:pointer }
  .choice input:checked + span{ border-color:var(--teal-600); background:var(--teal-100);
                                color:var(--teal-700) }
  .choice input:focus-visible + span{ outline:3px solid var(--teal-600); outline-offset:3px }
  .total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px;
          margin-top:21px; padding:15px; border-radius:14px; background:var(--teal-900);
          color:var(--ink-fg) }
  .total b{ font-size:24px; color:var(--n-0) }
  .msg{ margin-top:16px; padding:14px 16px; border-radius:12px; font-size:14.5px;
        line-height:1.85; display:none }
  .msg[data-show]{ display:block }
  .msg--bad{ background:#FDECEA; border:1px solid #F3B8B2; color:#7A1B14 }
  .msg--good{ background:var(--teal-100); border:1px solid var(--teal-200); color:var(--teal-700) }
  .beta--inline{ display:inline-block; margin-top:13px }
  .dtplus{ font-size:13px; color:var(--ink-mute); line-height:1.9 }
  .dtplus a{ color:var(--teal-200) }
  .dtplus a:hover{ color:var(--n-0) }

  @media (max-width:700px){
    header nav{ display:none }
    .page{ padding-top:30px }
  }