/* ItriPay — site.css (direction C, Aurora).
   Fonts are the app's own files (itripay_test/assets/fonts), self-hosted as WOFF from /assets/fonts
   (tool/make_fonts.dart), no third-party request. Palette is built from the logo blue #0D48BE.
   Every text pair is WCAG AA or better; see mockups/HANDOFF.md section 4 for the table. */
@font-face{font-family:'Cairo';src:url(/assets/fonts/Cairo-Regular.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Cairo';src:url(/assets/fonts/Cairo-SemiBold.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Cairo';src:url(/assets/fonts/Cairo-Bold.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Cairo';src:url(/assets/fonts/Cairo-ExtraBold.woff) format('woff');font-weight:800;font-display:swap}
@font-face{font-family:'Poppins';src:url(/assets/fonts/Poppins-ExtraBold.woff) format('woff');font-weight:800;font-display:swap}
@font-face{font-family:'Poppins';src:url(/assets/fonts/Poppins-Black.woff) format('woff');font-weight:900;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/assets/fonts/DMSans-Bold.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/assets/fonts/DMSans-Black.woff) format('woff');font-weight:900;font-display:swap}

:root{
  /* the logo blue #0D48BE, one small step lighter. White on it: 6.8:1; on --blue-d: 9.0:1 */
  --blue:#1452CC; --blue-d:#0E40AA; --blue-l:#7CA4F7; --blue-xl:#A9C4FF;
  --night:#061A55; --night-0:#020A22;
  --ink:#0A1433; --body:#46526F; --mute:#5A6682; --line:#D3DEF6; --tint:#E4ECFD; --paper:#F1F5FE;
  --sky-txt:#E8EFFF;   /* 4.6:1 even on the lightest stop of the sky */
  /* the hero and header sky. White on its lightest stop: 5.3:1 */
  --sky-top:#1A63E6;
  --sky-grad:linear-gradient(168deg,var(--sky-top) 0%,#1452CC 30%,#0D389A 62%,#061A55 100%);
  --orange:#F97316; --orange-d:#C2410C; --orange-ink:#2B1203; --cream:#FFF4E8;
  --gold:#F2CD73; --gold-l:#FFE9A8; --gold-d:#C99A2E; --coal:#0E0C08; --coal-2:#1A160D; --ivory:#F6EFDD; --sand:#CFC4A6;
  --r:28px; --r-btn:999px; --r-in:14px;
  /* Poppins for display (the app ships 800/900 only), DM Sans bold for labels, buttons and figures, Cairo for reading text */
  --f-head:'Poppins','Cairo',system-ui,sans-serif;
  --f-ui:'DM Sans','Cairo',system-ui,sans-serif;
  --f-body:'Cairo',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --vh:1vh;
  /* The hero is one screen tall plus the 44px the white sheet below tucks under, so the sheet's curve sits
     exactly at the bottom edge of the first screen and only appears on scroll. */
  --sheet:44px;
  --hero-h:max(calc(var(--vh)*100 + var(--sheet)),calc(560px + var(--sheet)));
}
/* on phones, the screen with the browser's bars showing */
@supports (height:1svh){:root{--vh:1svh}}
[dir=rtl]{--f-head:'Cairo',system-ui,sans-serif;--f-ui:'Cairo',system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--f-body);font-size:17px;line-height:1.65;color:var(--body);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure,fieldset{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
svg,canvas{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:100;background:#fff;color:var(--blue);padding:12px 18px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.hero :focus-visible,.site-head :focus-visible,.partners :focus-visible,.site-foot :focus-visible{outline-color:#fff}
.premium :focus-visible{outline-color:var(--gold)}
.credit :focus-visible{outline-color:var(--orange-ink)}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
[dir=rtl] .ar{transform:scaleX(-1)}
[dir=rtl] *{letter-spacing:0 !important}
#top-mark{position:absolute;top:0;left:0;width:1px;height:12px;pointer-events:none}

/* ---------- star ---------- */
.star{width:100%;height:auto;overflow:visible;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.b-line{fill:none;stroke:currentColor;stroke-width:7;stroke-linejoin:round;opacity:0}
.blade{transition:transform .45s var(--ease),opacity .35s}
.star[role=group] .blade{opacity:.55;cursor:pointer;outline-offset:0}
.star[role=group] .blade.on{opacity:1;transform:translateY(-34px)}
.star>g:nth-child(2){--d:.12s}.star>g:nth-child(3){--d:.24s}.star>g:nth-child(4){--d:.36s}
.motion .star.draw .b-body{animation:fadein .7s calc(var(--d,0s) + .95s) backwards}
.motion .star.draw .b-line{stroke-dasharray:1;animation:draw 1.15s cubic-bezier(.6,0,.2,1) var(--d,0s) backwards,lineout .5s calc(var(--d,0s) + 1.2s) backwards}
@keyframes draw{from{stroke-dashoffset:1;opacity:1}to{stroke-dashoffset:0;opacity:1}}
@keyframes lineout{from{opacity:1}to{opacity:0}}
@keyframes fadein{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes turn{to{transform:rotate(360deg)}}
.vglyph{display:inline-block;width:40px;flex:none;color:var(--blue)}
.vglyph .blade{opacity:.25}
.vglyph[data-own="0"] .b0,.vglyph[data-own="1"] .b1,.vglyph[data-own="2"] .b2,.vglyph[data-own="3"] .b3{opacity:1}

/* ---------- reveal ---------- */
.motion .rv{opacity:0}
.motion .rv.in{opacity:1;animation:rise .75s var(--ease) calc(var(--i,0)*70ms) backwards}
.motion .hero .up{animation:rise .9s var(--ease) calc(var(--i,0)*90ms + .15s) backwards}

/* ---------- header: always blue, always solid, white logo and links. It paints the top strip of the hero's
   own sky (same gradient, same size, anchored at the top of the screen), so at the top of the page there is
   no seam, and over white sections it stays the same blue. Once scrolled it gains a soft shadow. ---------- */
.site-head{position:fixed;inset-inline:0;top:0;z-index:50;color:#fff;background:var(--sky-top) var(--sky-grad) no-repeat 0 0/100% var(--hero-h);transition:box-shadow .25s}
.site-head .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;height:72px;gap:20px}
.site-head.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.08),0 12px 28px -12px rgba(2,10,34,.55)}
.brand{display:flex;align-items:center;gap:6px}
.logo-spin{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;transition:background-color .25s}
.logo-spin:hover{background:rgba(255,255,255,.14)}
.logo-spin .star{width:36px;will-change:transform}
.wordmark{font-family:'Poppins',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.01em;direction:ltr}
.nav{display:flex;justify-content:center;gap:28px;font-family:var(--f-ui);font-size:15px;font-weight:700}
.nav a{padding:10px 2px;position:relative;opacity:.9;transition:opacity .2s}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:4px;height:2px;background:currentColor;transform:scaleX(0);transition:transform .25s var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after{transform:scaleX(1)}
.head-end{display:flex;align-items:center;gap:12px}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);font-family:var(--f-ui);font-size:13px;font-weight:700}
.lang a{min-width:38px;height:34px;display:grid;place-items:center;border-radius:999px;transition:background-color .2s}
.lang a:hover{background:rgba(255,255,255,.16)}
.lang a[aria-current]{background:#fff;color:var(--blue)}
@media (pointer:coarse){.lang a{height:40px;min-width:42px}}
@media (max-width:1000px){.nav{display:none}.site-head .wrap{grid-template-columns:auto auto;justify-content:space-between}}
@media (max-width:620px){.site-head .btn-sm{display:none}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:var(--r-btn);font-family:var(--f-ui);font-weight:700;font-size:16px;line-height:1.2;text-align:center;cursor:pointer;transition:transform .2s var(--ease),box-shadow .25s,background-color .2s,color .2s}
.btn .ar{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
[dir=rtl] .btn:hover .ar{transform:scaleX(-1) translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-d);box-shadow:0 14px 28px -12px rgba(13,72,190,.7)}
.hero .btn-primary,.btn-light,.btn-sm{background:#fff;color:var(--blue)}
.hero .btn-primary:hover,.btn-light:hover{background:#fff;box-shadow:0 14px 34px -10px rgba(124,164,247,.8)}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-sm{min-height:40px;padding:0 18px;font-size:14px}.btn-sm .ar{display:none}
.btn-gold{background:linear-gradient(180deg,#FFE08A,#E3B341);color:#1C1400;box-shadow:0 0 0 1px rgba(255,233,168,.5),0 16px 40px -14px rgba(242,205,115,.75)}
.btn-gold:hover{box-shadow:0 0 0 1px rgba(255,233,168,.8),0 20px 50px -12px rgba(242,205,115,.95)}
/* waitlist buttons: the script moves a pulled button every frame, so it must not ease its transform */
.btn.pulled{transition:box-shadow .25s,background-color .2s,color .2s}
/* the thread layer: one fixed full-screen canvas above everything (the header is z-index 50), created on demand
   and removed when idle. It never takes clicks. */
canvas.threads{position:fixed;inset:0;width:100%;height:100%;z-index:70;pointer-events:none}
/* absorbed: the threads are drawn back in and the button gives off a soft glow */
.btn.absorb::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 26px 5px var(--glow,#fff);opacity:0;animation:absorb .8s ease-out}
@keyframes absorb{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.12,1.3)}}
/* touch: no cursor to reach for, so the button breathes instead */
@media (hover:none){
  .motion [data-wait]::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2px currentColor;opacity:0;animation:breathe 3.2s ease-out infinite;pointer-events:none}
  .motion .btn-primary[data-wait]::after{color:var(--blue-l)}
  .motion .hero [data-wait]::after{color:#fff}
  .motion .btn-gold[data-wait]::after{color:var(--gold)}
}
@keyframes breathe{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.18,1.5);opacity:0}}

/* ---------- hero: exactly one screen tall. Headline, text, both buttons, four chips and the star all fit
   without scrolling; type and star scale with the viewport height as well as its width. ---------- */
.hero{position:relative;isolation:isolate;color:#fff;background:var(--sky-grad);overflow:hidden;height:var(--hero-h);display:flex;flex-direction:column}
canvas.sky{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
/* one faint pool of light low on the far side, away from the star (the star itself sits on clean sky) */
.aurora{position:absolute;inset:0;z-index:-2;background:radial-gradient(40% 36% at 8% 92%,rgba(40,110,255,.35),transparent 70%)}
[dir=rtl] .aurora{transform:scaleX(-1)}
.hero-c{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);grid-template-rows:minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;padding-top:72px;padding-bottom:calc(44px + clamp(10px,calc(var(--vh)*3),36px))}
.hero-text{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,calc(var(--vh)*2.6),24px)}
.headline{font-family:var(--f-head);font-weight:800;font-size:clamp(38px,min(5.6vw,calc(var(--vh)*10.4)),88px);line-height:1.04;letter-spacing:-.03em}
.headline .ln{display:block}
.headline .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.14em;margin-block:-.14em}
.headline .w i{display:inline-block;font-style:normal}
.motion .headline .w i{animation:wordup 1s var(--ease) calc(var(--w)*110ms + .25s) backwards}
@keyframes wordup{from{transform:translateY(115%)}}
[dir=rtl] .headline{line-height:1.3;font-size:clamp(36px,min(5.4vw,calc(var(--vh)*9)),84px)}
:lang(fr) .headline{font-size:clamp(34px,min(4.4vw,calc(var(--vh)*9)),62px)}
[dir=rtl] .headline .w{padding-block:.3em;margin-block:-.3em}
.hero-sub{color:var(--sky-txt);font-size:clamp(15.5px,min(1.45vw,calc(var(--vh)*2.5)),20px);line-height:1.6;max-width:54ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 10px;border-radius:999px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-family:var(--f-ui);font-weight:700;font-size:15px;color:#fff;transition:background-color .3s,color .3s,transform .3s var(--ease)}
[dir=rtl] .pill{padding:0 10px 0 16px}
.pill .vglyph{width:28px;color:currentColor;transition:transform .6s var(--ease)}
.pill.on{background:#fff;color:var(--blue);transform:translateY(-3px)}
.pill.on .vglyph{transform:rotate(90deg)}
/* the star: no ring, just the star and a soft light behind it. It takes whatever height is left. */
.stage{position:relative;align-self:stretch;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:6px}
.bigstar{position:relative;height:min(100%,600px);max-width:100%;aspect-ratio:1;display:grid;place-items:center;}
.rot{width:86%;height:86%;display:grid;place-items:center}
.rot .star{width:100%;height:100%}
.motion .rot{animation:turn 64s linear infinite}
/* a mouse resting on the star pauses it. Only with a real mouse: on a phone :hover sticks to whatever was last
   tapped, so one tap on the star used to stop it turning for good. */
@media (hover:hover) and (pointer:fine){.motion .bigstar:hover .rot{animation-play-state:paused}}
.vcap{position:relative;display:grid;gap:2px;text-align:center;min-height:3.9em;align-content:start}
.vcap b{font-family:var(--f-head);font-weight:800;font-size:clamp(20px,min(2.2vw,calc(var(--vh)*3.8)),30px);letter-spacing:-.02em;line-height:1.2}
.vcap span{color:var(--sky-txt);font-size:clamp(13.5px,calc(var(--vh)*2.1),16px);line-height:1.4}
/* the self-click: the newly selected point dips, then springs out */
.motion .star[role=group] .blade.on{animation:press .6s var(--ease)}
@keyframes press{0%{transform:translateY(0) scale(1)}32%{transform:translateY(6px) scale(.9)}100%{transform:translateY(-34px) scale(1)}}

@media (max-width:860px){
  :root{--hero-h:max(calc(var(--vh)*100 + var(--sheet)),calc(540px + var(--sheet)))}
  .hero-c{display:flex;flex-direction:column;align-items:stretch;gap:clamp(8px,calc(var(--vh)*1.6),16px);padding-top:calc(60px + clamp(2px,calc(var(--vh)*1.4),16px));padding-bottom:calc(44px + 10px)}
  .hero-text{gap:clamp(8px,calc(var(--vh)*1.7),16px)}
  .headline{font-size:clamp(28px,min(9.4vw,calc(var(--vh)*6)),46px)}
  [dir=rtl] .headline{font-size:clamp(27px,min(9vw,calc(var(--vh)*5.2)),44px);line-height:1.28}
  .hero-sub{font-size:clamp(14px,calc(var(--vh)*2.15),16px);line-height:1.5}
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .hero-cta .btn{min-height:48px;padding:4px 10px;font-size:14px;line-height:1.15}
  .hero-cta .btn .ar{display:none}
  .pills{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%}
  .pill,[dir=rtl] .pill{justify-content:center;min-height:44px;padding:0 2px;font-size:12.5px}
  .pill .vglyph{display:none}
  .stage{flex:1 1 0;min-height:96px;gap:2px}
  .bigstar{height:min(100%,300px)}
  .vcap{min-height:3.5em}
}

/* ---------- sections ---------- */
.sec{padding-block:clamp(64px,8vw,116px);background:var(--paper)}
.sec.first{position:relative;z-index:1;margin-top:-44px;border-radius:44px 44px 0 0}
.sec-head{max-width:780px;margin:0 auto clamp(36px,5vw,60px);text-align:center}
.sec-head .lede{margin-inline:auto}
.eyebrow{font-family:var(--f-ui);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
h2{font-family:var(--f-head);font-weight:800;font-size:clamp(30px,4.5vw,58px);line-height:1.08;letter-spacing:-.03em;color:var(--ink);margin:12px 0 16px;text-wrap:balance}
h3{font-family:var(--f-ui);font-weight:700;font-size:21px;line-height:1.25;color:var(--ink);margin-bottom:8px}
.lede{font-size:clamp(17px,1.4vw,20px);max-width:62ch}
[dir=rtl] h2{line-height:1.35}

.grid-3,.grid-feat,.grid-4,.steps{display:grid;gap:20px}
.grid-3,.grid-feat,.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid-feat,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.grid-3,.steps{grid-template-columns:1fr}}
@media (max-width:600px){.grid-feat,.grid-4{grid-template-columns:1fr}}

.card{position:relative;background:#fff;border-radius:var(--r);padding:28px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(280px circle at var(--mx,50%) var(--my,0px),rgba(13,72,190,.1),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
@media (hover:hover){
  .card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -22px rgba(10,20,51,.32)}
  .card:hover::before{opacity:1}
  .card:hover .ico{background:var(--blue);color:#fff}
}
.card p{font-size:16px}
.ico{width:54px;height:54px;border-radius:50%;background:var(--tint);color:var(--blue);display:grid;place-items:center;margin-bottom:18px;transition:background-color .3s,color .3s}

.steps li{background:#fff;border-radius:var(--r);padding:28px}
.step-n{display:block;font-family:var(--f-head);font-weight:800;font-size:104px;line-height:.85;letter-spacing:-.05em;margin-bottom:26px;color:var(--blue)}
.steps li:nth-child(2){background:var(--ink);color:#C9D8FA}
.steps li:nth-child(2) h3{color:#fff}.steps li:nth-child(2) .step-n{color:var(--blue-l)}

.grid-feat .card:first-child{grid-column:span 2;background:var(--blue) radial-gradient(60% 90% at 100% 0%,rgba(124,164,247,.6),transparent 70%);color:var(--sky-txt);display:flex;flex-direction:column;justify-content:flex-end;min-height:250px}
.grid-feat .card:first-child h3{color:#fff;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em}
.grid-feat .card:first-child p{font-size:18px}
.grid-feat .card:first-child .ico{background:rgba(255,255,255,.16);color:#fff}
@media (max-width:600px){.grid-feat .card:first-child{grid-column:auto}}
/* who it is for: six short cards, an icon and a name each */
.grid-who{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.grid-who{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.who .card{text-align:center;padding:26px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.who .ico{margin-inline:auto}
.who h3{margin-bottom:0}.who .card p{margin-top:6px;font-size:15px}
@media (max-width:600px){.who .card{padding:20px 12px}.who h3{font-size:17px}}

/* ---------- credit carnet: the orange section ---------- */
.credit-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center;border-radius:40px;padding:clamp(28px,5.5vw,76px);color:var(--orange-ink);
  background:var(--orange) radial-gradient(70% 90% at 100% 0%,#FDBA74,transparent 65%)}
.credit .eyebrow,.credit h2{color:var(--orange-ink)}
.credit .lede{color:var(--orange-ink)}
.cpoints{margin-top:26px;display:grid;gap:10px}
.cpoints li{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:18px;background:rgba(255,255,255,.3);font-weight:600;line-height:1.4}
.cpoints .ic{color:var(--orange-ink)}
.carnet{position:relative;justify-self:center;width:min(400px,100%);padding:38px 24px 22px;border-radius:26px;background:#fff;color:#111827;transform:rotate(-2.5deg);box-shadow:0 40px 70px -30px rgba(90,35,0,.65),0 2px 0 rgba(255,255,255,.6) inset;font-family:var(--f-ui)}
[dir=rtl] .carnet{transform:rotate(2.5deg)}
.cn-rings{position:absolute;top:-9px;inset-inline:34px;display:flex;justify-content:space-between}
.cn-rings i{width:12px;height:26px;border-radius:8px;background:var(--orange-ink);box-shadow:0 2px 0 rgba(255,255,255,.35)}
.cn-head{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:16px;background:var(--cream)}
.cn-head>span{font-size:13px;font-weight:700;color:var(--orange-d)}
.cn-head b{font-size:34px;font-weight:900;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
[dir=rtl] .cn-head b{text-align:end}
.cn-head b i{font-style:normal;font-size:.42em;font-weight:700;color:#6B7280}
.carnet ul{margin-top:8px}
.carnet li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:11px 8px;margin-inline:-8px;border-bottom:1px solid #F1F2F4;border-radius:12px;transition:background-color .4s}
.motion .carnet.in li{animation:rise .6s var(--ease) calc(var(--i)*110ms + .25s) backwards}
.cn-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--orange-d);font-weight:900;font-size:15px}
.cn-who b{display:block;font-size:15px;line-height:1.3}
.cn-who small{display:block;font-size:12.5px;color:#6B7280;font-family:var(--f-body);transition:color .3s}
.carnet em{font-style:normal;font-weight:900;font-size:16px;color:var(--orange-d);font-variant-numeric:tabular-nums;transition:color .3s}
.carnet li.nudge{background:var(--cream)}
.carnet li.paid em{color:#15803D}.carnet li.paid small{color:#15803D;font-weight:700}
.carnet li.paid .cn-av{background:#DCFCE7;color:#15803D}
.cn-sms{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 14px;border-radius:14px;background:#EFF6FF;color:#1D4ED8;font-size:13.5px;font-weight:700;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .45s,transform .45s var(--ease)}
.cn-sms .ic{width:18px;height:18px}
.carnet.sms .cn-sms,.carnet.static .cn-sms{opacity:1;transform:none}
@media (max-width:860px){.credit-in{grid-template-columns:1fr;border-radius:32px}.carnet{margin-top:8px}}

/* ---------- Premium: gold on coal, a soft glow, a shimmer that sweeps across ---------- */
.prem-card{position:relative;display:grid;grid-template-columns:1.1fr .9fr;border-radius:36px;overflow:hidden;color:var(--sand);
  background:radial-gradient(70% 90% at 0% 0%,rgba(242,205,115,.2),transparent 60%),linear-gradient(160deg,var(--coal-2),var(--coal));
  box-shadow:inset 0 0 0 1px rgba(242,205,115,.45),0 0 90px -20px rgba(242,205,115,.55),0 50px 100px -50px rgba(60,40,0,.8)}
.shimmer{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:2}
.shimmer::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,233,168,.17) 45%,rgba(255,255,255,.26) 50%,rgba(255,233,168,.17) 55%,transparent);transform:translateX(-140%) skewX(-18deg)}
.motion .shimmer::before{animation:sweep 5.2s ease-in-out 1s infinite}
@keyframes sweep{0%{transform:translateX(-140%) skewX(-18deg)}55%,100%{transform:translateX(440%) skewX(-18deg)}}
.price-main,.price-inc{position:relative;padding:clamp(26px,4.4vw,60px)}
.premium .eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold)}
.premium .eyebrow .vglyph{width:26px;color:var(--gold)}
.premium .eyebrow .vglyph .blade{opacity:1}
.premium h2{color:var(--ivory)}
.price{display:flex;align-items:flex-end;gap:14px;margin:8px 0 22px;color:var(--ivory);font-family:var(--f-ui)}
.price b{font-family:var(--f-head);font-weight:900;font-size:clamp(100px,13vw,164px);line-height:.84;letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:1.25em;direction:ltr;
  color:var(--gold);background:linear-gradient(175deg,#FFF3C4 5%,#F2CD73 45%,#B8862B 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 26px rgba(242,205,115,.35))}
.price span{font-weight:700;font-size:22px;line-height:1.2;padding-bottom:8px}
.price small{display:block;font-size:16px;color:var(--sand)}
.nodevice{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:rgba(242,205,115,.1);box-shadow:inset 0 0 0 1px rgba(242,205,115,.25);color:var(--ivory);margin-bottom:20px}
.nodevice .ic{color:var(--gold)}.nodevice b{display:block;font-family:var(--f-ui)}
.rule{font-weight:700;color:var(--ivory)}.rule-how{font-size:15px;margin:6px 0 26px}
.price-inc{border-inline-start:1px solid rgba(242,205,115,.2);background:rgba(255,255,255,.025)}
.price-inc h3{color:var(--gold)}
.price-inc li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid rgba(242,205,115,.16);color:var(--ivory);font-size:16px}
.price-inc li:last-child{border:0}.price-inc .ic{color:var(--gold);stroke-width:2.2;margin-top:3px}
@media (max-width:860px){.prem-card{grid-template-columns:1fr}.price-inc{border-inline-start:0;border-top:1px solid rgba(242,205,115,.2)}}

/* ---------- partners, name, faq, join, footer ---------- */
.partners-in{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:center;background:var(--sky-grad);color:#fff;border-radius:36px;padding:clamp(28px,5.5vw,76px)}
.partners h2{color:#fff}.partners .eyebrow{color:#fff}
.partners .lede{color:var(--sky-txt);margin-bottom:28px}
.plist li{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.18);font-weight:600}
.plist li:last-child{border:0}.plist .vglyph{color:#fff;width:34px}
@media (max-width:860px){.partners-in{grid-template-columns:1fr}}

.name-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,6vw,96px);align-items:center;background:#fff;border-radius:36px;padding:clamp(28px,5vw,72px)}
.name-star{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--blue)}
.name-star .star{width:min(300px,62%)}
.tifinagh{font-family:'Noto Sans Tifinagh','Ebrima',sans-serif;font-size:clamp(44px,6vw,76px);line-height:1.1;color:var(--ink);letter-spacing:.08em !important;direction:ltr}
.name-foot{margin:18px 0 6px;font-weight:700;color:var(--ink)}
@media (max-width:820px){.name-in{grid-template-columns:1fr}}
.slogan{display:flex;flex-wrap:wrap;align-items:center}
.slogan li{display:flex;align-items:center}
.slogan li+li::before{content:"";width:1px;height:16px;background:currentColor;opacity:.3;margin-inline:14px}
.sl{min-height:44px;padding:0 2px;font-family:var(--f-ui);font-weight:700;font-size:15px;color:var(--sky-txt);position:relative;transition:color .25s}
.sl::after{content:"";position:absolute;inset-inline:0;bottom:8px;height:2px;background:currentColor;transform:scaleX(0);transition:transform .3s var(--ease)}
.sl.on{color:#fff}.sl.on::after{transform:scaleX(1)}
.slogan.on-light .sl{color:var(--mute)}.slogan.on-light .sl.on{color:var(--blue)}

.faq-list{max-width:840px;margin-inline:auto;display:grid;gap:10px}
details{background:#fff;border-radius:22px;padding-inline:26px;transition:box-shadow .3s}
details[open]{box-shadow:0 20px 44px -28px rgba(13,72,190,.55)}
summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;min-height:44px;font-family:var(--f-ui);font-weight:700;font-size:18px;color:var(--ink);cursor:pointer;transition:color .2s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--blue)}
summary .ic{color:var(--blue);transition:transform .3s var(--ease)}
details[open] summary .ic{transform:rotate(45deg)}
details p{padding-bottom:24px;max-width:66ch}

.join-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,88px);align-items:start}
.join .alt{margin-top:22px}.join .alt a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px;direction:ltr;unicode-bidi:isolate}
.form{display:grid;gap:8px;background:#fff;border-radius:32px;padding:clamp(20px,3vw,36px);box-shadow:0 30px 70px -45px rgba(13,72,190,.5)}
.form label{font-family:var(--f-ui);font-weight:700;font-size:14px;color:var(--ink);margin-top:10px}
.form label small{font-weight:400;font-family:var(--f-body);color:var(--mute)}
.form input:not([type=radio]),.form textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid #8A96B0;border-radius:var(--r-in);padding:13px 16px;min-height:50px;width:100%;transition:border-color .2s,box-shadow .2s}
.form textarea{resize:vertical}
.form input:focus,.form textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(13,72,190,.18)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:0;border-radius:var(--r-in);background:var(--tint)}
.seg label{margin:0;position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:grid;place-items:center;min-height:46px;padding:4px 8px;border-radius:10px;text-align:center;font-size:14px;color:var(--body);cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.seg input:checked+span{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(10,20,51,.18)}
.seg input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.form .btn{margin-top:14px;width:100%}
.form-status{min-height:24px;font-size:14px;font-weight:700}
.form-status.bad{color:#B42318}.form-status.ok{color:#0B6B3A}
@media (max-width:860px){.join-in{grid-template-columns:1fr}}

.site-foot{background:var(--night-0);color:#C9D8FA;padding:64px 0 28px;font-size:15px;border-radius:44px 44px 0 0}
.foot-top{display:grid;gap:14px;justify-items:start;padding-bottom:36px}
.site-foot .brand{color:#fff;gap:10px}.site-foot .brand .star{width:38px}
.foot-bot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-bot a{padding:8px 0;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.foot-bot a:hover{color:#fff;text-decoration-color:currentColor}
.foot-bot .lang a{padding:0;text-decoration:none}
.foot-bot p a{direction:ltr;unicode-bidi:isolate}
.copy{margin-inline-start:auto}
@media (max-width:700px){body{font-size:16px}.copy{margin-inline-start:0;width:100%}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition-duration:.01ms !important}html{scroll-behavior:auto}}

/* ---------- live form: honeypot, the "sending" state, the inline success ---------- */
/* hidden in place (an offset of -9999px on the inline start throws it 10 000px to the right in Arabic) */
.form{position:relative}
.form input.hp{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;min-height:0;padding:0;margin:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.form-status.wait{color:var(--body)}
.form button[disabled]{opacity:.7;cursor:progress}
.form-done{display:grid;gap:10px;justify-items:start;background:#fff;border-radius:32px;padding:clamp(24px,3.4vw,40px);box-shadow:0 30px 70px -45px rgba(13,72,190,.5)}
/* the script hides the form on success with the hidden attribute; .form's display:grid would otherwise win */
.form[hidden],.form-done[hidden]{display:none}
.form-done:focus{outline:0}
.form-done h3{font-family:var(--f-head);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px 0 10px;border-radius:999px;background:#DCFCE7;color:#0B6B3A;font-family:var(--f-ui);font-weight:700;font-size:14px}
.chip .ic{width:18px;height:18px;stroke-width:2.4}
[dir=rtl] .chip{padding:0 10px 0 14px}

/* ---------- the sent page (no-JS landing after the form): one screen of the hero's sky ---------- */
.sent .site-head .wrap{grid-template-columns:auto;justify-content:start}
.sent-hero{height:auto;min-height:max(calc(var(--vh)*100),560px);justify-content:center}
.sent-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(12px,calc(var(--vh)*2.4),22px);padding:calc(72px + 24px) 0 48px}
.sent-star{width:clamp(110px,calc(var(--vh)*24),220px);aspect-ratio:1;color:#fff}
.sent-star .rot{width:100%;height:100%}
.sent-title{font-family:var(--f-head);font-weight:800;font-size:clamp(32px,min(5vw,calc(var(--vh)*8)),64px);line-height:1.08;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
[dir=rtl] .sent-title{line-height:1.35}
.sent-hero .hero-sub{margin-inline:auto}
.chip.on-sky{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.sent-hero .btn-primary{background:#fff;color:var(--blue)}
.sent-mail{color:var(--sky-txt);font-size:15px}
.sent-mail a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;direction:ltr;unicode-bidi:isolate}