/* =====================================================================================================================
   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. By day (prefers-color-scheme: light) it is Sunrise: the night's sky turning to dawn in the orb's own
   colours, violet overhead behind the header and the hero, rose, then amber at the horizon where the sun comes up under
   the galaxy's core, the last stars still out; the page below sits on a pale dawn ground with white panels. Night and
   day read as one place at two times.
   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);
  --elev:inset 0 1px 0 rgba(255,255,255,.035);--elev-lg:0 30px 80px rgba(0,0,0,.55)}
@media (prefers-color-scheme: light){:root{color-scheme:light;
  --ink:#f7f1f6;--deep:#efe6f0;--panel:#ffffff;--panel2:#faf6fa;--sky-peak:#ecdff0;
  --surface:rgba(255,255,255,.88);--surface-2:rgba(255,255,255,.97);--line:rgba(26,18,51,.12);--line-2:rgba(26,18,51,.24);
  --text:#1a1233;--text-2:#3b2f57;--mute:#5a4e75;
  --solar:#c46a00;--solar-ink:#8a4100;--ion:#0a5a88;--mint:#06674a;--coral:#b0251d;--violet:#5f2fc0;--pink:#9a1aa6;
  --btn-bg:#1a1233;--btn-ink:#fff6ee;--focus:#6a35c9;
  --elev:0 1px 2px rgba(40,20,80,.06),0 12px 32px -14px rgba(60,30,110,.22);--elev-lg:0 34px 70px -24px rgba(50,24,100,.42)}}

/* ---- 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) ---------------------------- */
:root{--gx-x:73vw;--gx-y:46vh}   /* where the sky's galaxy has its core: the hero's galaxy (.galaxy) sits on it */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict;--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){:root{--gx-x:86vw;--gx-y:15vh}.sky{--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%)}}

/* ---- 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)}
.switch a i{display:inline-block;inline-size:7px;block-size:7px;margin-inline-end:6px;border-radius:50%;background:var(--pc);vertical-align:.05em}
/* each of Ghalixy's sites is a planet, in its own colour: the switch's dot and the hero's galaxy (build.py PLANETS) */
.p-studio{--pc:var(--solar)}.p-ai{--pc:var(--violet)}.p-os{--pc:var(--ion)}.p-messages{--pc:var(--mint)}
.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}
/* the menu folds where the longest header (os.ghalixy.com: five links, Your account, a long call to action) stops fitting */
@media (max-width:1240px){
  .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))}
.grid:has(>:nth-child(4):last-child){grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}   /* four: one row of four, or two of two, never three and one */
.card{padding:var(--s-5) var(--s-5) var(--s-6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--elev)}
.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);box-shadow:var(--elev)}
.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);box-shadow:var(--elev)}
.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);box-shadow:var(--elev)}
.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)}}
/* ---- "In orbit": what is built but in no release yet, said once for the whole band (NextOrbitPlan SK7), never a chip per card */
.orbit{columns:2 22rem;column-gap:var(--s-7);margin:0;padding:0;list-style:none}
.orbit li{position:relative;break-inside:avoid;padding-inline-start:var(--s-5);padding-block-end:var(--s-5);border-inline-start:1px dashed var(--line-2)}
.orbit li::before{content:'';position:absolute;inset-inline-start:-5px;inset-block-start:.4em;inline-size:9px;block-size:9px;border-radius:50%;background:var(--ink);border:2px solid var(--solar)}
.orbit h3{font-size:var(--step-2);margin:0 0 var(--s-2)}
.orbit p{margin:0;color:var(--text-2)}
/* ---- the hero's galaxy (a page's {{galaxy}}): the mark at the core, the four sites as planets on a tilted orbit -------- */
.hero--galaxy{position:relative}
.galaxy{--gw:min(420px,86vw);position:relative;inline-size:var(--gw);aspect-ratio:1;margin:var(--s-7) auto 0}
.galaxy__ring{position:absolute;inset-inline-start:0;inset-block-start:31%;inline-size:100%;block-size:38%;border:1px solid var(--line-2);border-radius:50%;rotate:-20deg}
[dir=rtl] .galaxy__ring{rotate:20deg}
.galaxy__core{position:absolute;inset:31%;display:grid;place-items:center;filter:drop-shadow(0 0 28px color-mix(in srgb,var(--violet) 55%,transparent))}
.galaxy__core img{inline-size:100%;block-size:auto}
.planet{--d:10px;position:absolute;display:inline-flex;align-items:center;gap:var(--s-2);margin-inline-start:calc(var(--d) / -2);margin-block-start:calc(var(--d) / -2);
  font:500 var(--step--1)/1 var(--font-mono);letter-spacing:.04em;color:var(--text-2);text-decoration:none;white-space:nowrap}
.planet i{flex:none;inline-size:var(--d);block-size:var(--d);border-radius:50%;background:var(--pc);box-shadow:0 0 12px color-mix(in srgb,var(--pc) 70%,transparent)}
a.planet:hover{color:var(--text)}
.planet--here{--d:20px;color:var(--text)}
.planet--here i{box-shadow:0 0 0 6px color-mix(in srgb,var(--pc) 18%,transparent),0 0 30px var(--pc)}
.planet.s0{inset-inline-start:48%;inset-block-start:71%}
.planet.s1{inset-inline-start:96%;inset-block-start:40%}
.planet.s2{inset-inline-start:60%;inset-block-start:27%;opacity:.7}
.planet.s3{inset-inline-start:4%;inset-block-start:60%}
.planet.s1{flex-direction:row-reverse}   /* at the orbit's far end, its name is on the inside */
@media (min-width:1240px){   /* over the sky's own galaxy, its core on the painted core */
  .galaxy{--gw:min(560px,40vw);position:absolute;margin:0;inset-inline-start:calc(var(--gx-x) - var(--gw) / 2);inset-block-start:calc(var(--gx-y) - var(--nav-h) - var(--gw) / 2)}}
/* Sunrise: the header and the hero are the dawn sky (violet overhead with the last stars, rose under the words, then coral
   and amber in the hero's bottom padding (--hz, the same length), where the sun comes up under the galaxy's core and the
   light melts into the ground); everything in them takes the sky's own pale words. Checked by hand: every word on #8a3f9a
   (the sky's lightest colour under words) is at least 4.9:1; --solar (4.17:1) only draws borders. */
@media (prefers-color-scheme: light){
  .sky{background:radial-gradient(40% 36% at var(--gx-x) 0,rgba(255,190,140,.20),transparent 70%),linear-gradient(180deg,#f1e3f1 0%,var(--ink) 55%)}
  .sky>i{display:none}
  .nav,.hero{--text:#ffffff;--text-2:#ffe7f1;--mute:#f8dcec;--solar:#ffc677;--solar-ink:#ffe2bd;--ion:#cfe9ff;--mint:#c4f5df;
    --violet:#e4dcff;--pink:#ffd9f3;--coral:#ffdcd4;--line:rgba(255,255,255,.26);--line-2:rgba(255,255,255,.5);
    --surface:rgba(255,255,255,.12);--btn-bg:#ffffff;--btn-ink:#2a1a5e;--focus:#ffe2bd;color:var(--text-2)}
  .nav{background:color-mix(in srgb,#241c66 90%,transparent);border-block-end-color:rgba(255,255,255,.14)}
  .hero{--hz:clamp(3rem,7vw,5.5rem);--sun-x:var(--gx-x);
    background:
      radial-gradient(1px 1px at 14% 9%,rgba(255,255,255,.9) 60%,transparent),radial-gradient(1px 1px at 37% 15%,rgba(255,255,255,.7) 60%,transparent),
      radial-gradient(1.5px 1.5px at 58% 6%,rgba(255,255,255,.85) 60%,transparent),radial-gradient(1px 1px at 86% 13%,rgba(255,255,255,.65) 60%,transparent),
      radial-gradient(1px 1px at 26% 30%,rgba(255,255,255,.45) 60%,transparent),radial-gradient(1px 1px at 93% 34%,rgba(255,255,255,.4) 60%,transparent),
      radial-gradient(260px 120px at var(--sun-x) 100%,rgba(255,244,214,.95),rgba(255,200,120,.6) 40%,transparent 100%),
      radial-gradient(46% calc(var(--hz) * 2.6) at var(--sun-x) 100%,rgba(255,170,120,.34),transparent 72%),
      radial-gradient(50% 45% at 22% 18%,rgba(163,149,255,.24),transparent 70%),
      linear-gradient(180deg,#241c66 0%,#3d2884 34%,#6a3896 68%,#8a3f9a calc(100% - var(--hz)),#d4648f calc(100% - var(--hz) * .66),#ff9a7a calc(100% - var(--hz) * .4),#ffc98e calc(100% - var(--hz) * .22),#fbe2dc calc(100% - var(--hz) * .08),var(--ink) 100%)}
  .hero--page{--hz:clamp(1.5rem,4vw,3rem)}
  .hero .btn--primary{box-shadow:0 10px 24px -10px rgba(20,8,60,.6)}
  .galaxy__core{filter:drop-shadow(0 0 22px rgba(255,214,190,.7))}
  .btn--primary{box-shadow:0 8px 20px -10px rgba(26,18,51,.45)}
}
@media (prefers-reduced-motion: no-preference){.planet--here i{animation:breathe 4s ease-in-out infinite}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.7}}
@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}}