/* site.css: Rahti design system (revamp, 2026-10-14).
 *
 * Direction: "One motif" (docs/design/BRIEF.md, docs/design/direction-sheet.md). The motif is the mihrab arch, the niche every
 * prayer faces. It frames every screen of the app, shapes the hero stage, the bullets and the bands that open and close the page.
 *
 * Split by use, so a page carries only what it shows (and the Learn tool's own .card, .tile and .step classes never meet the home
 * page's): site.css = tokens, fields, base, buttons, wordmark, navigation, footer (every page); home.css = the home page's
 * sections; cards.css = the index-card FAQ (home, Support, Rahti Live); pages.css = the inner pages; motion.css = motion.
 *
 * Load order on the home page: join.css (the signup component) first, then this file, then home.css. This file wins ties with join.css
 * and styles the component only through the design tokens, which keep the names join.css already uses (--ink, --cream, --gold,
 * --btn-*, --err, --field-*), so any coloured field can theme the signup form by redefining them locally.
 *
 * House rules kept (taste skill): no eyebrows, no gradients, no shadows at rest, no hairline rules, no glass, no icon-topped cards,
 * no accent words, headlines in two lines or fewer, two Latin typefaces, body text 16px+ in full-strength ink.
 */

/* ============================================================ 1. tokens */
:root{
  /* type */
  --serif:'Cormorant Garamond','Cormorant Fallback G','Cormorant Fallback T',serif;
  --sans:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --arabic:'Amiri',serif;
  /* Seven sizes, one per role (the inspector wants about five; the signup component adds its own 13 to 16px form text) */
  --step-giant:clamp(70px,17vw,300px);   /* the call to action */
  --step-mark:calc(var(--step-giant) * .72);   /* the closing mark: Latin letters and the Arabic share it */
  --step-xl:clamp(46px,6.2vw,104px);     /* the hero headline and the price */
  --step-l:clamp(34px,4.4vw,68px);       /* every section heading */
  --step-m:clamp(22px,2vw,32px);         /* clauses and commitments */
  --step-lead:clamp(18px,1.4vw,21px);    /* lead sentences */
  --step-t:clamp(16px,1.2vw,19px);       /* running text */
  --step-s:15px;                         /* interface text and captions (never smaller than 13px) */

  /* space */
  --margin:clamp(16px,2.2vw,32px);
  --gutter:clamp(10px,1.2vw,18px);
  --nav-h:64px;

  /* fixed colour fields (do not flip with the visitor's theme) */
  --f-night:#0B0A08; --f-night-2:#161410; --f-night-3:#1E1B15;
  --f-day:#F2EDE3;   --f-day-2:#FAF7F0;   --f-day-3:#FDFBF6;
  --f-gold:#D4AF8F;  --f-gold-lt:#E0C4A8; --f-gold-dp:#B08D57;
  /* the app's own screen colours (sampled from the App Store screenshots) */
  --app-bg:#160F1B; --app-card:#2D2136; --app-card-2:#241B36; --app-text:#F3ECF3; --app-dim:#B2A8BC; --app-gold:#D4AF8F;

  /* the ground: follows the visitor's theme. Names kept for join.css. */
  --ink:#0B0A08; --ink-2:#161410; --ink-3:#1E1B15;
  --cream:#F1ECE2; --cream-dim:#A39C8C; --cream-faint:#898273;
  --gold:#D4AF8F; --gold-soft:#E0C4A8; --gold-faint:rgba(212,175,143,.14); --gold-text:#D4AF8F;
  --btn-bg:#D9B48A; --btn-bg-hover:#E3C29D; --btn-ink:#181206; --btn-gold:#DCB98F; --btn-gold-border:rgba(220,185,143,.4);
  --err:#E8998A;
  --nav-bg:var(--ink);
  /* the arch as a mask of fixed height: a band that grows (an opened form panel, a taller textarea) must not push the curve down onto its text */
  --arch-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cpath d='M0,1 C0.14,1 0.33,0.31 0.5,0 C0.67,0.31 0.86,1 1,1 Z'/%3E%3C/svg%3E");

  /* motion tokens (motion.css uses them) */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.76,0,.24,1); --ease-soft:cubic-bezier(.33,1,.68,1);
  --t-press:140ms; --t-hover:180ms; --t-ui:240ms; --t-reveal:800ms;
}
@media (prefers-color-scheme: light){
  :root{
    --ink:#F2EDE3; --ink-2:#FAF7F0; --ink-3:#FDFBF6;
    --cream:#2A2722; --cream-dim:#5F5A4D; --cream-faint:#6A6355;
    --gold:#B08D57; --gold-soft:#C9A878; --gold-faint:rgba(176,141,87,.12); --gold-text:#7A5C33;
    --btn-bg-hover:#E3C29D; --btn-gold:#7A5C33; --btn-gold-border:rgba(122,92,51,.4);
    --err:#B0442E;
  }
}

/* A coloured field redefines the semantic tokens for everything inside it (including the signup form). */
[data-field]{background:var(--ink);color:var(--cream);
  --field-bg:var(--ink-2);--focus-ring:var(--btn-gold);--join-scheme:dark}
[data-field="night"]{
  --ink:#0B0A08;--ink-2:#161410;--ink-3:#1E1B15;--cream:#F1ECE2;--cream-dim:#A39C8C;--cream-faint:#898273;
  --gold:#D4AF8F;--gold-text:#D4AF8F;--gold-faint:rgba(212,175,143,.14);--btn-bg:#D9B48A;--btn-ink:#181206;--btn-gold:#DCB98F;--err:#E8998A;
  --field-border:rgba(212,175,143,.55);--join-scheme:dark}
[data-field="night-3"]{
  --ink:#1E1B15;--ink-2:#26231B;--ink-3:#2E2A21;--cream:#F1ECE2;--cream-dim:#A39C8C;--cream-faint:#9A9383;
  --gold:#D4AF8F;--gold-text:#D4AF8F;--btn-bg:#D9B48A;--btn-ink:#181206;--btn-gold:#DCB98F;--err:#E8998A;
  --field-border:rgba(212,175,143,.55);--join-scheme:dark}
[data-field="day"]{
  --ink:#F2EDE3;--ink-2:#FAF7F0;--ink-3:#FDFBF6;--cream:#2A2722;--cream-dim:#5F5A4D;--cream-faint:#6A6355;
  --gold:#B08D57;--gold-text:#7A5C33;--gold-faint:rgba(176,141,87,.14);--btn-bg:#181206;--btn-bg-hover:#2A2216;--btn-ink:#F1ECE2;--btn-gold:#7A5C33;--err:#B0442E;
  --field-border:rgba(122,92,51,.8);--join-scheme:light}
[data-field="gold"]{
  --ink:#D4AF8F;--ink-2:#E0C4A8;--ink-3:#C99F78;--cream:#181206;--cream-dim:#3B2F1B;--cream-faint:#4A3B22;
  --gold:#181206;--gold-text:#181206;--gold-faint:rgba(24,18,6,.14);--btn-bg:#181206;--btn-bg-hover:#2A2216;--btn-ink:#F1ECE2;--btn-gold:#181206;--err:#7A1F10;
  --field-bg:#F2EDE3;--field-border:rgba(24,18,6,.7);--join-scheme:light}
[data-field="gold-lt"]{
  --ink:#E0C4A8;--ink-2:#EAD5BE;--ink-3:#D4B592;--cream:#181206;--cream-dim:#3B2F1B;--cream-faint:#4A3B22;
  --gold:#181206;--gold-text:#181206;--btn-bg:#181206;--btn-bg-hover:#2A2216;--btn-ink:#F1ECE2;--btn-gold:#181206;--err:#7A1F10;--join-scheme:light}
[data-field="gold-dp"]{
  --ink:#B08D57;--ink-2:#BE9D69;--ink-3:#A07F4B;--cream:#181206;--cream-dim:#2A200F;--cream-faint:#2A200F;
  --gold:#181206;--gold-text:#181206;--btn-bg:#181206;--btn-bg-hover:#2A2216;--btn-ink:#F1ECE2;--btn-gold:#181206;--join-scheme:light}
/* "contrast" is the opposite of the ground: day on a dark theme, night on a light one. */
[data-field="contrast"]{
  --ink:#F2EDE3;--ink-2:#FAF7F0;--ink-3:#FDFBF6;--cream:#2A2722;--cream-dim:#5F5A4D;--cream-faint:#6A6355;
  --gold:#B08D57;--gold-text:#7A5C33;--btn-bg:#181206;--btn-bg-hover:#2A2216;--btn-ink:#F1ECE2;--btn-gold:#7A5C33;--err:#B0442E;
  --field-border:rgba(122,92,51,.8);--join-scheme:light}
/* On a light theme the ground is already the day colour, so the "day" field becomes a parchment one step darker: it must still read as a field. */
@media (prefers-color-scheme: light){
  [data-field="day"]{--ink:#E8DECB;--ink-2:#F0E8D8;--ink-3:#F6F0E3;--field-border:rgba(122,92,51,.8);--err:#9C3A26}
}
@media (prefers-color-scheme: light){
  [data-field="contrast"]{
    --ink:#0B0A08;--ink-2:#161410;--ink-3:#1E1B15;--cream:#F1ECE2;--cream-dim:#A39C8C;--cream-faint:#898273;
    --gold:#D4AF8F;--gold-text:#D4AF8F;--btn-bg:#D9B48A;--btn-bg-hover:#E3C29D;--btn-ink:#181206;--btn-gold:#DCB98F;--err:#E8998A;
    --field-border:rgba(212,175,143,.55);--join-scheme:dark}
}

/* ============================================================ 2. base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:var(--step-t);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--ink)}
:where(a,button,summary,input):focus-visible{outline:2px solid var(--focus-ring,var(--btn-gold));outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--margin);top:-60px;z-index:100;padding:12px 18px;background:var(--btn-bg);color:var(--btn-ink);border-radius:999px;font-weight:600}
.skip:focus{top:12px}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--step-xl);line-height:.96}
h2{font-size:var(--step-l);line-height:1}
.ar{font-family:var(--arabic)}
p{text-wrap:pretty}
.arch-defs{position:absolute;width:0;height:0;overflow:hidden}

/* the arch, as a reusable shape (clipPaths live in the inline <svg class="arch-defs"> at the top of <body>) */
.arch-stage{clip-path:url(#arch-stage)}
.arch-screen{clip-path:url(#arch-screen)}
.arch-band{clip-path:url(#arch-band)}

/* ============================================================ 3. buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-ink);font:600 var(--step-s)/1 var(--sans);letter-spacing:.005em;white-space:nowrap;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease,color var(--t-hover) ease}
.btn[hidden]{display:none}
.btn.ghost{background:var(--ink-3);color:var(--cream)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--btn-bg-hover)}
  .btn.ghost:hover{background:var(--ink-2)}
}
.btn--lg{min-height:56px;padding:0 32px;font-size:var(--step-s)}
.link{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.22em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.link:hover{text-decoration-color:currentColor}}

/* bullets are small arches */
.bullets li{position:relative;padding-left:1.35em}
.bullets li::before{content:'';position:absolute;left:0;top:.42em;width:.72em;height:.92em;background:var(--gold-text);clip-path:url(#arch-bullet)}

/* ============================================================ 4. wordmark + navigation */
.wordmark{display:inline-flex;align-items:baseline;gap:9px;line-height:1;padding-block:7px;margin-block:-7px}
.wordmark .lat{font-family:var(--serif);font-weight:600;color:var(--cream);display:inline-flex;align-items:baseline;font-size:25px}
.wordmark .w-big{font-size:1.22em}
.wordmark .w-rest{font-size:.86em;letter-spacing:.03em;margin-left:.01em}
.wordmark .cal{font-family:var(--arabic);font-weight:700;color:var(--gold-text);font-size:20px}

.nav{position:sticky;top:0;z-index:50;background:var(--ink);height:var(--nav-h)}
.nav__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--margin)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px);font-size:var(--step-s)}
.nav__links a{white-space:nowrap}
.nav__links a:not(.btn){color:var(--cream);padding:10px 0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:.07em;transition:text-decoration-color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.nav__links a:not(.btn):hover{text-decoration-color:currentColor}}
.nav__links .btn{min-height:42px;padding:0 20px;font-size:var(--step-s)}
.menu{display:none}
@media (max-width:920px){
  .nav__links{display:none}
  .menu{display:block}
  .menu>summary{display:flex;align-items:center;min-height:44px;padding:0 4px;font-size:var(--step-s);font-weight:600;list-style:none;cursor:pointer}
  .menu>summary::-webkit-details-marker{display:none}
  .menu[open]>summary{color:var(--gold-text)}
  .menu__panel{position:fixed;left:0;right:0;top:var(--nav-h);bottom:0;z-index:49;background:var(--ink);padding:24px var(--margin) 40px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;overflow-x:hidden}
  .menu__panel a{font-family:var(--serif);font-size:clamp(34px,10vw,52px);line-height:1.15;padding:8px 0;letter-spacing:-.02em}
  .menu__panel .btn{margin-top:18px;align-self:flex-start;font-family:var(--sans);font-size:16px;padding:0 28px}
}

/* ============================================================ 13. footer: the mark, built large */
.footer{margin-top:clamp(72px,10vw,200px);padding:clamp(28px,4vw,56px) var(--margin) clamp(24px,3vw,40px)}
.mark{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,2.3fr);align-items:end;gap:4px;height:clamp(140px,26vw,400px);margin-bottom:clamp(36px,5vw,72px)}
.mark span{display:block;background:var(--gold);color:#181206;font-family:var(--serif);font-weight:600;line-height:.8;letter-spacing:-.04em;
  display:flex;align-items:flex-end;justify-content:center;padding:0 clamp(2px,.6vw,10px) clamp(6px,1vw,16px);font-size:var(--step-mark);overflow:clip;min-width:0}
.mark span:nth-child(1){height:100%}.mark span:nth-child(2){height:84%;background:var(--cream);color:var(--ink)}.mark span:nth-child(3){height:94%}
.mark span:nth-child(4){height:72%;background:var(--cream);color:var(--ink)}.mark span:nth-child(5){height:88%}
.mark span.ar{font-family:var(--arabic);font-weight:700;height:78%;margin-left:clamp(6px,1.2vw,20px);font-size:min(var(--step-mark),184px);background:var(--cream);color:var(--ink);line-height:1.2;padding-bottom:0;align-items:center}
.footer__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gutter) var(--gutter);align-items:start}
.footer__links{grid-column:1/span 8;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px var(--gutter);font-size:var(--step-s)}
.footer__links a{display:flex;align-items:center;min-height:44px}
.footer__contact{grid-column:9/span 4;font-size:var(--step-s);display:grid;gap:12px}
.footer__contact a{display:flex;align-items:center;min-height:44px}
.footer__legal{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(28px,4vw,56px);font-size:var(--step-s);color:var(--cream-dim)}
.footer__legal .btn{min-height:44px}
@media (max-width:860px){
  .footer__links{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__contact{grid-column:1/-1;margin-top:16px}
  .mark{gap:3px;grid-template-columns:repeat(5,minmax(0,1fr));height:clamp(120px,40vw,220px)}
  .mark span{font-size:clamp(46px,16vw,150px)}
  .mark span.ar{display:none}
}

/* the fixed-height arch: .arch-top sets --arch (the height of the curve) and masks the box with it */
.arch-top{--arch:clamp(80px,8vw,136px);
  -webkit-mask:var(--arch-img) top/100% var(--arch) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--arch) - 1px)/100% calc(100% - var(--arch) + 1px) no-repeat; /* taste-skill-ignore: a solid mask layer, not a gradient fill */
  mask:var(--arch-img) top/100% var(--arch) no-repeat,linear-gradient(#000 0 0) 0 calc(var(--arch) - 1px)/100% calc(100% - var(--arch) + 1px) no-repeat} /* taste-skill-ignore: a solid mask layer, not a gradient fill */

/* Windows high-contrast and other forced-colour modes remove backgrounds: pills keep an outline */
@media (forced-colors: active){.btn{border:1px solid}}