/* Ahalina — holding page for ahalina.care.
   Values are the design system's tokens (Ahalina Design System/tokens/*.css);
   dark values are the asset catalogue's dark variants, so the page matches the apps. */

@font-face{font-family:"Petrona";src:url("/fonts/petrona.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-arabic-regular.woff2") format("woff2");font-weight:400;font-display:swap}
/* Plex Arabic registers Medium and SemiBold as separate families; here they are
   declared as weights of one family so font-weight works as expected. */
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-arabic-medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans Arabic";src:url("/fonts/plex-arabic-semibold.woff2") format("woff2");font-weight:600 700;font-display:swap}

:root{
  --ivory:#FAF7F1;--mist:#EEF3EC;
  --cedar:#2F5D50;--cedar-wash:#E3EDE9;
  --text-display:#1F433A;--text-body:#26312E;--text-secondary:#56635E;--text-tertiary:#616D67;
  --surface-card:#FFFFFF;--surface-sunken:#F4F1EA;
  --border-card:#E0D6C2;--border-field:#E0D6C2;
  --action-primary:#1F433A;--action-primary-text:#FFFFFF;
  --apricot:#E39A6B;--apricot-text:#9A5526;
  --focus-ring:rgba(47,93,80,.35);
  --shadow-card:0 1px 3px rgba(38,49,46,.05);
  --shadow-pill:0 8px 18px rgba(31,67,58,.18);

  --font-display:"Petrona",ui-serif,Georgia,serif;
  --font-ui:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-arabic:"IBM Plex Sans Arabic","Instrument Sans",sans-serif;
  --script-scale:1;--lh-body:1.5;--lh-display:1.12;

  --size-hero:clamp(40px, 8vw, 64px);
  --size-body:calc(17px * var(--script-scale));
  --size-callout:calc(15px * var(--script-scale));
  --size-footnote:calc(13px * var(--script-scale));
  --size-caption:calc(11px * var(--script-scale));

  --radius-card:18px;--radius-field:14px;--radius-pill:999px;
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --dur-fast:140ms;--dur-base:220ms;--dur-sheet:380ms;
}
@media (prefers-color-scheme:dark){
  :root{
    --ivory:#1B2521;--mist:#18211D;
    --cedar:#9CC2B3;--cedar-wash:#20312B;
    --text-display:#C8DFD4;--text-body:#EDE7DA;--text-secondary:#B6C3BB;--text-tertiary:#9AA8A0;
    --surface-card:#283630;--surface-sunken:#212C28;
    --border-card:#44564E;--border-field:#44564E;
    --action-primary:#9CC2B3;--action-primary-text:#10201A;
    --apricot:#E8A272;--apricot-text:#E1A170;
    --focus-ring:rgba(143,182,168,.45);
    --shadow-card:none;--shadow-pill:none;
  }
}
:root:lang(ar){
  --script-scale:1.07;--lh-body:1.7;--lh-display:1.35;
  --font-ui:var(--font-arabic);--font-display:var(--font-arabic);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background:linear-gradient(180deg,var(--ivory) 0%,var(--mist) 100%) fixed;
  background-color:var(--ivory);
  color:var(--text-body);font-family:var(--font-ui);font-size:var(--size-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.page{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
  max-width:1080px;margin:0 auto;
  padding:max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

/* ── Bar ─────────────────────────────────────────── */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px}
/* The wordmark is Petrona 600 in every language, Arabic included. */
.wordmark,.name{font-family:"Petrona",ui-serif,Georgia,serif;font-weight:600;letter-spacing:-.01em}
.wordmark{display:inline-flex;align-items:center;gap:.28em;font-size:24px;color:var(--text-display);line-height:1;text-decoration:none}
.wordmark:hover{color:var(--text-display)}
/* The ring, mark B: the dot closes the circle. Drawn from mockups/logo-ring.html, bold weight for small sizes. */
.mark{width:1.15em;height:1.15em;flex:none;transform:translateY(-.02em)}
.languages{display:flex;gap:4px}
.languages button{
  appearance:none;border:0;background:none;cursor:pointer;
  min-height:44px;padding:0 10px;border-radius:var(--radius-pill);
  font-size:14px;font-weight:500;color:var(--text-secondary);
  transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);
}
.languages button[lang="en"],.languages button[lang="fr"]{font-family:"Instrument Sans",sans-serif}
.languages button[lang="ar"]{font-family:"IBM Plex Sans Arabic",sans-serif}
.languages button:hover{color:var(--text-body)}
.languages button[aria-pressed="true"]{background:var(--cedar-wash);color:var(--cedar);font-weight:600}

/* ── Hero ────────────────────────────────────────── */
.hero{
  flex:1;width:100%;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 0 40px;
  animation:rise var(--dur-sheet) var(--ease-standard) both;
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.eyebrow{
  margin:0 0 16px;align-self:flex-start;
  padding:6px 12px;border-radius:var(--radius-pill);background:var(--cedar-wash);
  color:var(--cedar);font-size:var(--size-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
:lang(ar) .eyebrow{letter-spacing:0;font-size:var(--size-footnote)}

h1{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:var(--size-hero);line-height:var(--lh-display);letter-spacing:-.015em;
  color:var(--text-display);text-wrap:balance;
}
:lang(ar) h1{letter-spacing:0;font-size:calc(var(--size-hero) * .82)}
.lede{margin:20px 0 32px;color:var(--text-secondary);max-width:34em}

/* ── Card & form ─────────────────────────────────── */
.card{
  background:var(--surface-card);border:1px solid var(--border-card);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:20px;
}
form{display:grid;gap:16px}
.field{display:grid;gap:6px}
label{font-size:var(--size-footnote);font-weight:600;color:var(--text-secondary)}
input,select{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid var(--border-field);border-radius:var(--radius-field);background:var(--surface-sunken);
  color:var(--text-body);font:inherit;font-size:16px;
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
input::placeholder{color:var(--text-tertiary)}
:lang(ar) input[type="email"]{text-align:right}
input:focus,select:focus{outline:none;border-color:var(--cedar);box-shadow:0 0 0 3px var(--focus-ring)}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--apricot-text)}

.select{position:relative}
select{appearance:none;-webkit-appearance:none;padding-inline-end:40px;cursor:pointer}
select:invalid,select.empty{color:var(--text-tertiary)}
.select::after{
  content:"";position:absolute;inset-inline-end:16px;top:50%;
  width:8px;height:8px;margin-top:-6px;
  border-right:1.5px solid var(--text-secondary);border-bottom:1.5px solid var(--text-secondary);
  transform:rotate(45deg);pointer-events:none;
}

.cta{
  appearance:none;border:0;cursor:pointer;
  min-height:52px;margin-top:4px;padding:0 24px;border-radius:var(--radius-pill);
  background:var(--action-primary);color:var(--action-primary-text);box-shadow:var(--shadow-pill);
  font:inherit;font-size:var(--size-body);font-weight:600;
  transition:transform var(--dur-fast) var(--ease-standard),filter var(--dur-fast) var(--ease-standard);
}
.cta:hover{filter:brightness(1.08)}
.cta:active{transform:scale(.97);filter:brightness(.92)}
.cta[disabled]{cursor:progress;filter:none;opacity:.75}

.note{margin:0;font-size:var(--size-footnote);color:var(--text-tertiary);text-align:center}
.hint{margin:0;font-size:var(--size-footnote);color:var(--apricot-text);font-weight:500}
/* Spam trap, hidden without pushing the page wide (a negative offset scrolls in RTL). */
.trap{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.thanks{padding:12px 4px;text-align:center;outline:none;animation:rise var(--dur-base) var(--ease-standard) both}
.thanks h2{margin:0 0 6px;font-family:var(--font-display);font-weight:600;font-size:calc(28px * var(--script-scale));color:var(--text-display)}
.thanks p{margin:0;color:var(--text-secondary)}

/* ── Footer ──────────────────────────────────────── */
.foot{display:flex;justify-content:center;padding-top:16px;font-size:var(--size-footnote);color:var(--text-tertiary)}

@media (min-width:720px){
  .card{padding:24px}
  .lede{font-size:calc(19px * var(--script-scale))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .cta:active{transform:none}
}