/* =====================================================================================================================
   Ghalixy theme: the one design system of every Ghalixy site (ghalixy.com, ghalixy.app, messages.ghalixy.com/.app).
   It lives in shared/ and build.py copies it into each site, so each published site is self-contained.

   The look: an observatory at night. A dark galaxy sky, hairline borders, one calm column of text, the GH mark with
   its moon, and solar amber only where something asks for you. There is little motion, and none at all when the
   system asks for less. The light theme appears only when the system asks for it (prefers-color-scheme: light).
   Every layout uses logical properties, so Arabic (dir="rtl") mirrors by itself.

   Nothing is loaded from anywhere else: the fonts are in ../fonts (Unbounded, IBM Plex Sans, IBM Plex Mono, IBM Plex
   Sans Arabic, and Space Grotesk 700 for the wordmark's "alixy" alone; all SIL Open Font License 1.1, OFL-*.txt beside
   them). Sources: Unbounded 1.701 (googlefonts/unbounded) and Space Grotesk 2.000 (floriankarsten/space-grotesk), static
   Latin instances as Fontsource cut them (@fontsource 5.3.0; neither has a reserved name); IBM Plex Sans (font 3.005),
   IBM Plex Mono (2.005) and IBM Plex Sans Arabic, Latin-1 and Arabic cuts.

   Parts: .container .section(--band) .section__head .eyebrow .lede .prose | .nav .brand .switch | .hero | .btn
   (--primary --ghost --sm) .actions | .grid .card .chips .chip .state | .steps | .plans .plan | .faq | .form .field
   .note | .table-wrap | .footer | .sky
   ===================================================================================================================== */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/unbounded-latin-300-normal.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:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/unbounded-latin-400-normal.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:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/unbounded-latin-500-normal.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';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSans-Regular-Latin1.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexSans-Medium-Latin1.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/IBMPlexSans-SemiBold-Latin1.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-Regular-Latin1.woff2) format('woff2');unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212,U+FB01-FB02}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/space-grotesk-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexSansArabic-Regular.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/IBMPlexSansArabic-SemiBold.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFF}

/* ---- tokens (dark: the default). check.py measures every text colour against every ground, here and in light ----- */
:root{color-scheme:dark;
  --ink:#06070c;--deep:#0b0d16;--panel:#121524;--panel2:#181c2e;--sky-peak:#2e2466;
  --surface:rgba(18,21,36,.72);--surface-2:rgba(24,28,46,.9);--line:rgba(170,182,235,.16);--line-2:rgba(170,182,235,.28);
  --text:#eceef8;--text-2:#c4c8dc;--mute:#9aa0b9;
  --solar:#ffb35c;--solar-ink:#ffb35c;--ion:#8fd8ff;--mint:#72e3b4;--coral:#ff7d6e;--violet:#a395ff;--pink:#f0a0ff;
  --btn-bg:#eceef8;--btn-ink:#0b0d16;--focus:#ffb35c;
  --font-display:'Unbounded','Avenir Next',ui-sans-serif,system-ui,sans-serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans Arabic',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-arabic:'IBM Plex Sans Arabic','IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --step--1:.8rem;--step-0:.94rem;--step-1:1rem;--step-2:1.125rem;--step-3:1.25rem;
  --step-4:clamp(1.55rem,1.15rem + 1.6vw,2.25rem);--step-5:clamp(1.9rem,1.2rem + 3vw,3.4rem);
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:36px;--s-7:56px;--s-8:96px;
  --gutter:clamp(20px,5vw,40px);--maxw:72rem;--measure:40rem;--nav-h:4rem;
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--r-pill:999px;--ease:cubic-bezier(.22,1,.36,1)}
@media (prefers-color-scheme: light){:root{color-scheme:light;
  --ink:#f5f6fb;--deep:#eceef7;--panel:#ffffff;--panel2:#f0f1f9;--sky-peak:#dfe2f5;
  --surface:rgba(255,255,255,.8);--surface-2:rgba(255,255,255,.94);--line:rgba(40,48,96,.16);--line-2:rgba(40,48,96,.3);
  --text:#14172b;--text-2:#383d58;--mute:#515775;
  --solar:#c46a00;--solar-ink:#8f4d00;--ion:#0b5f8c;--mint:#0a6a49;--coral:#b3261e;--violet:#5a43d6;--pink:#a21caf;
  --btn-bg:#14172b;--btn-ink:#f5f6fb;--focus:#8f4d00}}

/* ---- base ----------------------------------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px);scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--ink);color:var(--text-2);font-family:var(--font-body);font-size:var(--step-1);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4{margin:0;color:var(--text);line-height:1.15;text-wrap:balance}
h1,h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.01em}
h1{font-size:var(--step-5);font-weight:300}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-3);font-weight:600;line-height:1.3}
p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
p{text-wrap:pretty}
a{color:inherit}
strong,b{color:var(--text);font-weight:600}
img,svg{display:block;max-width:100%}
code{font-family:var(--font-mono);font-size:.92em;color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
[lang="ar"]{font-family:var(--font-arabic)}
[lang="ar"] :is(h1,h2,h3,h4),:is(h1,h2,h3,h4)[lang="ar"]{font-family:var(--font-arabic);font-weight:600;letter-spacing:0;line-height:1.35}
::selection{background:rgba(163,149,255,.4);color:var(--text)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.skip-link{position:fixed;inset-block-start:-100px;inset-inline-start:16px;z-index:1000;padding:10px 18px;border-radius:0 0 10px 10px;background:var(--btn-bg);color:var(--btn-ink);font-weight:600;text-decoration:none}
.skip-link:focus{inset-block-start:0}
.visually-hidden{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.container{inline-size:min(100% - 2 * var(--gutter),var(--maxw));margin-inline:auto}

/* ---- the sky: a galaxy seen from the observatory (dark only; light gets a quiet wash) ---------------------------- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;--gx-x:73vw;--gx-y:46vh;--gx:min(1400px,130vw);
  background:radial-gradient(48% 42% at var(--gx-x) var(--gx-y),rgba(92,64,190,.30),transparent 72%),radial-gradient(40% 36% at 10% 6%,rgba(28,96,150,.28),transparent 72%),radial-gradient(50% 40% at 96% 96%,rgba(24,120,96,.14),transparent 72%),linear-gradient(180deg,#090b17 0%,var(--ink) 70%)}
.sky>i{position:absolute;display:block}
.sky__stars{inset:0;background:url(../img/sky-stars.svg) 0 0/1200px 1000px;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.5) 40%,#000 64%);mask-image:linear-gradient(90deg,rgba(0,0,0,.4),rgba(0,0,0,.5) 40%,#000 64%)}
.sky__galaxy{inset:0 0 -32vh 0;background:url(../img/sky-galaxy.svg) no-repeat calc(var(--gx-x) - var(--gx)) calc(var(--gx-y) - var(--gx))/calc(var(--gx) * 2) calc(var(--gx) * 2);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.5) 34%,#000 60%);mask-image:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.5) 34%,#000 60%)}
[dir=rtl] .sky{scale:-1 1}
@media (max-width:800px){.sky{--gx-x:86vw;--gx-y:15vh;--gx:170vw}
  .sky__stars{-webkit-mask-image:linear-gradient(180deg,#000 16%,rgba(0,0,0,.45) 34%);mask-image:linear-gradient(180deg,#000 16%,rgba(0,0,0,.45) 34%)}
  .sky__galaxy{inset:0;opacity:.7;-webkit-mask-image:linear-gradient(180deg,#000 18%,rgba(0,0,0,.4) 44%);mask-image:linear-gradient(180deg,#000 18%,rgba(0,0,0,.4) 44%)}}
@media (prefers-color-scheme: light){.sky{background:radial-gradient(48% 42% at var(--gx-x) var(--gx-y),rgba(120,100,230,.16),transparent 72%),linear-gradient(180deg,#eef0fa 0%,var(--ink) 70%)}.sky>i{display:none}}

/* ---- header ---------------------------------------------------------------------------------------------------- */
.nav{position:sticky;inset-block-start:0;z-index:50;background:color-mix(in srgb,var(--ink) 78%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-block-end:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:var(--s-5);min-block-size:var(--nav-h)}
.brand{display:inline-flex;align-items:center;flex:none;font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:-.035em;color:var(--text);text-decoration:none;direction:ltr}
.brand picture{display:contents}
.brand__mark{box-sizing:content-box;inline-size:1.6em;block-size:1.6em;flex:none;padding:.6em;margin:-.75em -.87em -.75em -.72em}
.brand__text{background:linear-gradient(100deg,var(--text) 20%,var(--ion) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.switch{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:var(--step--1);font-weight:500}
.switch a{padding:5px 12px;border-radius:var(--r-pill);color:var(--mute);text-decoration:none;white-space:nowrap}
.switch a:hover{color:var(--text)}
.switch a[aria-current]{background:var(--btn-bg);color:var(--btn-ink)}
.nav__links{display:flex;align-items:center;gap:var(--s-5);margin-inline-start:auto;font-size:var(--step-0)}
.nav__links a:not(.btn){color:var(--text-2);text-decoration:none;padding-block:var(--s-2)}
.nav__links a:not(.btn):hover,.nav__links a[aria-current]{color:var(--text)}
.nav__links a[aria-current]:not(.btn){box-shadow:0 2px 0 var(--solar)}
.nav__toggle{display:none;margin-inline-start:auto;inline-size:44px;block-size:44px;border:1px solid var(--line-2);border-radius:var(--r-md);background:transparent;cursor:pointer;padding:0;place-items:center;align-content:center;gap:5px}
.nav__toggle span{display:block;inline-size:20px;block-size:2px;background:var(--text);border-radius:2px}
@media (max-width:1080px){
  .nav__inner{flex-wrap:wrap;row-gap:0;padding-block:var(--s-2)}
  .nav__toggle{display:grid}
  .nav__links{display:none;flex:1 0 100%;order:5;flex-direction:column;align-items:stretch;gap:0;margin:0;padding-block:var(--s-2) var(--s-4);border-block-start:1px solid var(--line)}
  .nav__links.is-open{display:flex}
  .nav__links a:not(.btn){padding:var(--s-3) 0;box-shadow:none!important}
  .nav__links .btn{margin-block-start:var(--s-3)}
}
@media (max-width:520px){.switch{order:4;flex:1 0 100%;justify-content:space-between}.switch a{flex:1;text-align:center}.nav__inner{gap:var(--s-3)}}

/* ---- type helpers ---------------------------------------------------------------------------------------------- */
.eyebrow{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;color:var(--solar-ink);margin-block-end:var(--s-4)}
[lang="ar"] .eyebrow{font-family:var(--font-arabic);letter-spacing:0;text-transform:none;font-size:var(--step-0);font-weight:600}
.lede{font-size:var(--step-2);line-height:1.6;color:var(--text-2);max-inline-size:var(--measure)}
.grad{background:linear-gradient(100deg,var(--ion),var(--violet) 55%,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.muted{color:var(--mute)}
.small{font-size:var(--step-0)}
.prose{max-inline-size:var(--measure)}
.prose>*+*{margin-block-start:var(--s-4)}
.prose h2{font-size:var(--step-3);font-family:var(--font-body);font-weight:600;margin-block-start:var(--s-7)}
.prose ul{list-style:disc;padding-inline-start:1.25em}
.prose li+li{margin-block-start:var(--s-2)}
.prose a,.link{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.2em}
.prose a:hover,.link:hover{text-decoration-color:var(--solar)}

/* ---- sections and hero ----------------------------------------------------------------------------------------- */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--band{background:var(--surface);border-block:1px solid var(--line)}
.section__head{max-inline-size:var(--measure);margin-block-end:var(--s-7)}
.section__head .lede{margin-block-start:var(--s-4)}
.section__head--center{margin-inline:auto;text-align:center}
.section__head--center .lede{margin-inline:auto}
.hero{padding-block:clamp(3.5rem,10vw,8rem) clamp(3rem,7vw,5.5rem)}
.hero h1{max-inline-size:20ch}
.hero .lede{margin-block-start:var(--s-5)}
.hero--page{padding-block-end:clamp(1.5rem,4vw,3rem)}
.hero--page h1{font-size:clamp(1.8rem,1.2rem + 2.6vw,3rem);max-inline-size:24ch}
.coord{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.12em;color:var(--mute);margin-block-start:var(--s-6)}
.section__head--center .actions{justify-content:center}
.container>.small{margin-block-start:var(--s-6);max-inline-size:var(--measure)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-block-start:var(--s-6)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 24px;border-radius:var(--r-pill);border:1px solid transparent;font-weight:600;font-size:var(--step-0);line-height:1.2;text-decoration:none;cursor:pointer;transition:transform .16s var(--ease),border-color .16s}
.btn--primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn--ghost{border-color:var(--line-2);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--text-2)}
.btn--primary:hover{transform:translateY(-1px)}
.btn--sm{padding:8px 16px;font-size:var(--step--1)}
[dir=rtl] .arrow{display:inline-block;transform:scaleX(-1)}

/* ---- cards, chips ---------------------------------------------------------------------------------------------- */
.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.card{padding:var(--s-5) var(--s-5) var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.card h3{margin-block-end:var(--s-3)}
.card p{color:var(--text-2)}
.card__list{margin-block-start:var(--s-4);display:grid;gap:var(--s-2);color:var(--mute);font-size:var(--step-0)}
.card__list li{padding-inline-start:1.1em;position:relative}
.card__list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.7em;inline-size:.5em;block-size:1px;background:var(--solar)}
.container>.chips{margin-block-start:var(--s-5)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{display:inline-block;padding:4px 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:var(--step-0);color:var(--text-2)}
.chip b{color:var(--text)}
.state{display:inline-block;font-size:var(--step--1);font-weight:500;padding:2px 12px;border-radius:var(--r-pill);border:1px solid var(--line-2);white-space:nowrap;vertical-align:middle}
.state--now{border-color:var(--mint);color:var(--mint)}
.state--soon{border-color:var(--solar);color:var(--solar-ink)}
.state--server{border-color:var(--violet);color:var(--violet)}

/* ---- steps ----------------------------------------------------------------------------------------------------- */
.steps{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));counter-reset:step}
.steps>li{counter-increment:step;padding-block-start:var(--s-4);border-block-start:1px solid var(--line-2)}
.steps>li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.12em;color:var(--solar-ink);margin-block-end:var(--s-3)}
.steps h3{margin-block-end:var(--s-2)}
.steps p{color:var(--text-2)}

/* ---- prices ---------------------------------------------------------------------------------------------------- */
.plans{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:stretch}
.plan{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.plan--feature{border-color:var(--solar)}
.plan__tag{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--solar-ink)}
[lang="ar"] .plan__tag{font-family:var(--font-arabic);letter-spacing:0;text-transform:none;font-size:var(--step-0)}
.plan__price{font-family:var(--font-display);font-weight:500;font-size:var(--step-4);color:var(--text);line-height:1.1}
.plan__price small{display:block;margin-block-start:var(--s-2);font-family:var(--font-body);font-weight:400;font-size:var(--step-0);color:var(--mute)}
.plan ul{display:grid;gap:var(--s-2);font-size:var(--step-0);color:var(--text-2);margin-block:var(--s-2) var(--s-4)}
.plan li{padding-inline-start:1.4em;position:relative}
.plan li::before{content:"";position:absolute;inset-inline-start:.1em;inset-block-start:.55em;inline-size:.5em;block-size:.28em;border:solid var(--mint);border-width:0 0 2px 2px;transform:rotate(-45deg)}
.plan .btn{margin-block-start:auto;align-self:flex-start}

/* ---- questions ------------------------------------------------------------------------------------------------- */
.faq{max-inline-size:48rem;border-block-start:1px solid var(--line)}
.faq details{border-block-end:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--s-4) 0;padding-inline-end:2rem;position:relative;color:var(--text);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;inset-inline-end:.25rem;inset-block-start:var(--s-4);color:var(--solar-ink);font-weight:400;font-size:1.3em;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-block-end:var(--s-5);color:var(--text-2);max-inline-size:42rem}

/* ---- forms (they only open the person's own email app, or send them to their own server) ---------------------------- */
.form{display:grid;gap:var(--s-4);max-inline-size:34rem;padding:var(--s-5) var(--s-5) var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.field{display:grid;gap:var(--s-2);font-size:var(--step-0);font-weight:500;color:var(--text)}
.field input,.field select,.field textarea{inline-size:100%;padding:11px 14px;border:1px solid var(--mute);border-radius:var(--r-md);background:var(--panel);color:var(--text);font-weight:400}
.field textarea{min-block-size:7rem;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--mute)}
.field .is-invalid,.is-invalid{border-color:var(--coral)}
.field-row{display:flex;align-items:stretch;gap:0;direction:ltr}
.field-row input{border-start-end-radius:0;border-end-end-radius:0;min-inline-size:0}
.field-row span{display:grid;place-items:center;padding-inline:14px;border:1px solid var(--line-2);border-inline-start:0;border-radius:0 var(--r-md) var(--r-md) 0;background:var(--panel2);color:var(--mute);font-family:var(--font-mono);font-size:var(--step-0)}
.note{font-size:var(--step-0);color:var(--mute);min-block-size:1.5em}
.note.is-err{color:var(--coral)}
.note.is-ok{color:var(--mint)}
.contact-list{display:grid;gap:var(--s-3);margin-block-start:var(--s-5)}
.contact-list dt{font-size:var(--step--1);color:var(--mute);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.split{display:grid;gap:var(--s-7);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));align-items:start}

/* ---- tables ---------------------------------------------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.table{inline-size:100%;border-collapse:collapse;font-size:var(--step-0)}
.table th,.table td{text-align:start;padding:var(--s-4) var(--s-5);border-block-end:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-block-end:0}
.table th{color:var(--mute);font-weight:500;font-size:var(--step--1);letter-spacing:.04em}
.table td:first-child{color:var(--text);font-weight:500}
.table code{white-space:nowrap}

/* ---- footer ---------------------------------------------------------------------------------------------------- */
.footer{border-block-start:1px solid var(--line);padding-block:var(--s-7) var(--s-5);background:var(--surface)}
.footer__grid{display:grid;gap:var(--s-6) var(--s-7);grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.footer__brand{grid-column:1/-1;max-inline-size:34rem}
.footer__brand .brand{margin-block-end:var(--s-4)}
.footer__brand p{color:var(--mute);font-size:var(--step-0)}
.footer__brand p+p{margin-block-start:var(--s-2)}
.footer__h{font-family:var(--font-body);font-size:var(--step--1);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-block-end:var(--s-3)}
[lang="ar"] .footer__h{letter-spacing:0;text-transform:none;font-size:var(--step-0)}
.footer__col a{display:block;padding-block:4px;color:var(--text-2);font-size:var(--step-0);text-decoration:none}
.footer__col a:hover{color:var(--text);text-decoration:underline}
.footer__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);margin-block-start:var(--s-7);padding-block-start:var(--s-5);border-block-start:1px solid var(--line);font-size:var(--step--1);color:var(--mute)}
.footer__mail{color:var(--text);font-weight:500}

@media (prefers-color-scheme: light){.brand__text{background:none;-webkit-text-fill-color:var(--text);color:var(--text)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.sky,.nav,.nav__toggle{display:none}body{background:#fff;color:#000}}