/* Yusra marketing site design system. Mirrors the app's Theme.swift. */
:root{
  --cream:#fdf6ea; --cream2:#f6e7c8; --card:#ffffff;
  --teal:#1f9e86; --teal-dark:#16826f; --teal-tint:#eaf6f2;
  --coral:#e0664a; --coral-soft:#f0a08c;
  --amber:#f0a93b; --amber-soft:#f6c87a; --amber-wash:#fde4c4;
  --purple:#7c6bb0; --purple-soft:#9b8ad0;
  --ink:#2c2723; --ink-soft:#3a3028; --muted:#7a7062; --ghost:#a99e8c;
  --shadow:0 8px 30px rgba(60,45,25,.10); --shadow-sm:0 3px 12px rgba(60,45,25,.08);
  --radius:24px; --radius-lg:30px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',-apple-system,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
.display{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:-.5px;line-height:1.1}
.arabic{font-family:'Amiri',serif}
a{color:var(--teal-dark);text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.teal{color:var(--teal-dark)} .coral{color:var(--coral)} .muted{color:var(--muted)}

/* Header */
header{position:sticky;top:0;z-index:50;background:rgba(253,246,234,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(60,45,25,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:9px;font-family:'Fredoka';font-weight:600;font-size:24px;color:var(--teal-dark)}
.logo .moon{position:relative;width:22px;height:22px;flex:none}
.logo .moon i{position:absolute;inset:0;border-radius:50%;background:var(--amber)}
.logo .moon b{position:absolute;left:6px;top:-1px;width:19px;height:19px;border-radius:50%;background:var(--cream)}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--ink-soft);font-weight:700;font-size:15px}
.nav-links a:hover{color:var(--teal-dark)}
@media(max-width:720px){.nav-links a:not(.btn){display:none}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:#fff;font-weight:800;font-size:15px;padding:12px 22px;border-radius:40px;box-shadow:0 6px 18px rgba(224,102,74,.28);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(224,102,74,.34);color:#fff}
.btn-ghost{background:#fff;color:var(--teal-dark);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{color:var(--teal-dark)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:72px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}}
.hero-copy{position:relative;z-index:2}
.pill{display:inline-block;background:var(--amber-wash);color:var(--coral);font-weight:800;font-size:13px;letter-spacing:.4px;padding:6px 14px;border-radius:30px;margin-bottom:18px}
h1{font-family:'Fredoka';font-weight:600;font-size:clamp(36px,5.4vw,58px);line-height:1.05;color:var(--teal-dark);letter-spacing:-1px;text-wrap:balance}
h1 .c{color:var(--coral)}
.lead{font-size:19px;color:var(--muted);margin:20px 0 28px;max-width:30em}
@media(max-width:900px){.lead{margin-left:auto;margin-right:auto}}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:900px){.cta-row{justify-content:center}}
.subnote{font-size:13px;color:var(--ghost);margin-top:14px}

/* Hero sparkle field */
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:0}
.spark{position:absolute;width:9px;height:9px;background:var(--amber);border-radius:50%;
  box-shadow:0 0 8px 1px rgba(240,169,59,.55);opacity:.7}
.spark::before,.spark::after{content:"";position:absolute;background:var(--amber);border-radius:2px}
.spark::before{left:50%;top:-40%;width:1.5px;height:180%;transform:translateX(-50%)}
.spark::after{top:50%;left:-40%;height:1.5px;width:180%;transform:translateY(-50%)}
.spark-lg{width:14px;height:14px}

/* Hero phone mockups */
.hero-phones{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;z-index:1}
.phone{position:relative;width:246px;border-radius:38px;background:#211d1a;padding:11px;
  box-shadow:0 26px 60px rgba(40,28,12,.30),0 6px 18px rgba(40,28,12,.16)}
.phone img{display:block;width:100%;height:auto;border-radius:28px}
.phone-notch{position:absolute;top:17px;left:50%;transform:translateX(-50%);width:78px;height:19px;
  background:#211d1a;border-radius:0 0 12px 12px;z-index:2}
.hero-phones .phone-front{position:relative;z-index:2}
.hero-phones .phone-back{position:absolute;z-index:1;left:calc(50% - 168px);top:26px;
  transform:rotate(-7deg);width:222px;opacity:.97}
@media(max-width:900px){
  .hero-phones{min-height:0;margin-top:8px}
  .hero-phones .phone-back{left:calc(50% - 150px);top:34px}
}
@media(max-width:420px){
  .phone{width:214px}
  .hero-phones .phone-back{width:190px;left:calc(50% - 128px)}
}
.phone-static{width:100%;max-width:270px;margin:0 auto}

/* Sections */
section{padding:56px 0}
.band{background:linear-gradient(120deg,var(--teal),var(--teal-dark));color:#fff;text-align:center;padding:46px 24px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.band h2{font-family:'Fredoka';font-weight:600;font-size:clamp(26px,3.6vw,38px);color:#fff}
.band p{color:rgba(255,255,255,.9);max-width:34em;margin:12px auto 0;font-size:17px}
.eyebrow{text-align:center;color:var(--teal);font-weight:800;letter-spacing:1.5px;font-size:13px;text-transform:uppercase}
.h2{font-family:'Fredoka';font-weight:600;font-size:clamp(28px,3.8vw,40px);color:var(--teal-dark);text-align:center;margin-top:8px}
.sub{text-align:center;color:var(--muted);font-size:17px;margin:12px auto 0;max-width:34em}

/* Feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm)}
.card .chip{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:14px}
.card h3{font-family:'Fredoka';font-weight:600;font-size:19px;color:var(--ink)}
.card p{color:var(--muted);font-size:15px;margin-top:6px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{text-align:center;padding:10px}
.step .num{width:52px;height:52px;border-radius:50%;background:var(--teal-tint);color:var(--teal-dark);font-family:'Fredoka';font-weight:600;font-size:22px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.step h3{font-family:'Fredoka';font-weight:600;font-size:19px}
.step p{color:var(--muted);font-size:15px;margin-top:6px}


/* Pricing */
.price{max-width:440px;margin:40px auto 0;background:var(--card);border-radius:var(--radius-lg);padding:34px;text-align:center;box-shadow:var(--shadow);border:2px solid var(--teal-tint)}
.price .tag{background:linear-gradient(120deg,var(--teal),#28b39a);color:#fff;border-radius:18px;padding:18px;margin-bottom:20px}
.price .tag .big{font-family:'Fredoka';font-weight:600;font-size:40px}
.price ul{list-style:none;text-align:left;margin:0 auto;display:inline-block}
.price li{padding:7px 0 7px 30px;position:relative;color:var(--ink-soft);font-weight:600}
.price li::before{content:"✓";position:absolute;left:0;top:7px;width:20px;height:20px;background:var(--teal);color:#fff;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center}

/* Feature showcase rows */
.feature{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center;margin-top:44px}
.feature-rev{direction:rtl}
.feature-rev > *{direction:ltr}
@media(max-width:820px){.feature,.feature-rev{grid-template-columns:1fr;gap:20px;text-align:center}.feature-rev{direction:ltr}}
.feature-art{display:flex;justify-content:center}
.feature-text h3{font-family:'Fredoka';font-weight:600;font-size:clamp(23px,3vw,30px);color:var(--teal-dark)}
.feature-text p{color:var(--muted);font-size:17px;margin-top:12px;max-width:34em}
@media(max-width:820px){.feature-text p{margin-left:auto;margin-right:auto}}
.band-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
@media(max-width:820px){.band-chips{justify-content:center}}
.band-chips span{background:#fff;border-radius:30px;padding:8px 15px;font-weight:700;font-size:14px;color:var(--ink-soft);box-shadow:var(--shadow-sm)}

/* Content preview carousel */
.carousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:32px 24px 8px;margin:0 auto;max-width:1128px}
.carousel::-webkit-scrollbar{display:none}
.carousel .tile{flex:0 0 auto;width:190px;scroll-snap-align:start;border-radius:var(--radius);
  overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm);margin:0}
.carousel .tile img{display:block;width:100%;height:auto;aspect-ratio:373/560;object-fit:cover}
.carousel .tile figcaption{padding:11px 14px;font-family:'Fredoka';font-weight:500;font-size:15px;color:var(--ink)}
@media(max-width:560px){.carousel .tile{width:150px}}

/* Trust: elevated (soft teal tint) */
.trust-section{background:var(--teal-tint)}

/* FAQ */
.faq{max-width:760px;margin:36px auto 0}
.faq details{background:#fff;border-radius:16px;padding:4px 20px;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.faq summary{font-family:'Fredoka';font-weight:500;font-size:18px;padding:16px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--teal);font-size:24px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);padding:0 0 18px;font-size:16px}

/* Footer */
footer{background:var(--teal-dark);color:rgba(255,255,255,.82);padding:48px 0 36px;margin-top:40px}
footer .frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px;align-items:flex-start}
footer .logo{color:#fff}
footer .logo .moon b{background:var(--teal-dark)}
footer a{color:rgba(255,255,255,.82);font-weight:600}
footer a:hover{color:#fff}
footer .flinks{display:flex;gap:24px;flex-wrap:wrap}
footer .copy{margin-top:28px;font-size:13px;color:rgba(255,255,255,.55)}

/* Legal / support article pages */
.doc{max-width:760px;margin:0 auto;padding:48px 24px 20px}
.doc h1{font-size:clamp(30px,4vw,42px);margin-bottom:8px}
.doc .updated{color:var(--ghost);font-weight:700;font-size:14px;margin-bottom:32px}
.doc h2{font-family:'Fredoka';font-weight:600;font-size:23px;color:var(--ink);margin:34px 0 10px}
.doc p,.doc li{color:var(--ink-soft);font-size:16px;margin-bottom:12px}
.doc ul{padding-left:22px;margin-bottom:12px}
.doc li{margin-bottom:7px}
.doc a{font-weight:700}
.doc .box{background:#fff;border-radius:18px;padding:22px 26px;box-shadow:var(--shadow-sm);margin:18px 0}
.back{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:var(--teal-dark);margin-bottom:8px}

/* --- v2 sections (Theo-informed, honest) --- */
.stats{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:14px}
.stat{background:#fff;border-radius:18px;padding:18px 22px;text-align:center;box-shadow:var(--shadow-sm);flex:1 1 150px;min-width:140px;max-width:210px}
.stat .n{font-family:'Fredoka';font-weight:600;font-size:32px;color:var(--teal-dark);line-height:1}
.stat .l{color:var(--muted);font-size:13px;font-weight:700;margin-top:6px}
.card.trust{display:flex;gap:14px;align-items:flex-start;padding:22px}
.card.trust .tick{flex:none;width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800}
.card.trust h3{font-size:17px}
.card.trust p{margin-top:3px;font-size:14px}
.mission{max-width:720px;margin:0 auto;background:var(--card);border-radius:var(--radius-lg);padding:clamp(28px,4vw,46px);box-shadow:var(--shadow-sm);text-align:center;border:1px solid rgba(60,45,25,.06)}
.mission .ar{font-family:'Amiri',serif;color:var(--teal);font-size:26px;margin-bottom:14px}
.mission p{font-size:clamp(17px,2.1vw,21px);color:var(--ink-soft);line-height:1.6}
.mission .sig{margin-top:18px;font-weight:800;color:var(--teal-dark);font-size:15px}
.ctaband{text-align:center;background:linear-gradient(120deg,var(--coral),#d2563c);border-radius:var(--radius-lg);padding:46px 24px;box-shadow:var(--shadow)}
.ctaband h2{font-family:'Fredoka';font-weight:600;font-size:clamp(26px,3.6vw,38px);color:#fff}
.ctaband p{color:rgba(255,255,255,.92);margin:10px auto 22px;max-width:30em}
.ctaband .btn{background:#fff;color:var(--coral)}
.ctaband .subnote{color:rgba(255,255,255,.8)}

/* --- waitlist form --- */
.wait-form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.wait-form input[type=email]{flex:1 1 220px;min-width:0;border:none;border-radius:40px;padding:14px 20px;font-size:15px;font-family:'Nunito',sans-serif;font-weight:600;color:var(--ink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.wait-form input[type=email]:focus{outline:none;box-shadow:inset 0 0 0 2px #fff}
.wait-form button{border:none;cursor:pointer;font-family:'Nunito',sans-serif}
.wait-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wait-msg{margin-top:14px;font-weight:800;min-height:1.2em}
.wait-msg.ok{color:#fff}
.wait-msg.err{color:#ffe2d8}

/* --- decorative "coming soon" store badges --- */
.store-badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}
.store-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.4);border-radius:14px;padding:9px 16px;color:#fff;
  cursor:default;transition:background .15s}
.store-badge:hover{background:rgba(0,0,0,.38);color:#fff}
.badge-glyph{width:22px;height:26px;flex:none;background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268c-.5-52 42.4-77 44.3-78.3-24.2-35.4-61.8-40.2-75.1-40.7-31.9-3.3-62.3 18.8-78.5 18.8-16.2 0-41.1-18.4-67.7-17.9-34.8.5-66.9 20.2-84.8 51.4-36.2 62.7-9.3 155.5 26 206.4 17.2 24.9 37.7 52.9 64.6 51.9 25.9-1 35.7-16.7 67-16.7 31.2 0 40 16.7 67.4 16.2 27.8-.5 45.4-25.4 62.4-50.4 19.7-28.8 27.8-56.7 28.2-58.1-.6-.3-54.1-20.8-54.6-82.5zM267 117.9c14.3-17.4 24-41.5 21.3-65.5-20.6.8-45.6 13.7-60.4 31-13.2 15.3-24.8 39.8-21.7 63.3 23 1.8 46.5-11.7 60.8-28.8z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268c-.5-52 42.4-77 44.3-78.3-24.2-35.4-61.8-40.2-75.1-40.7-31.9-3.3-62.3 18.8-78.5 18.8-16.2 0-41.1-18.4-67.7-17.9-34.8.5-66.9 20.2-84.8 51.4-36.2 62.7-9.3 155.5 26 206.4 17.2 24.9 37.7 52.9 64.6 51.9 25.9-1 35.7-16.7 67-16.7 31.2 0 40 16.7 67.4 16.2 27.8-.5 45.4-25.4 62.4-50.4 19.7-28.8 27.8-56.7 28.2-58.1-.6-.3-54.1-20.8-54.6-82.5zM267 117.9c14.3-17.4 24-41.5 21.3-65.5-20.6.8-45.6 13.7-60.4 31-13.2 15.3-24.8 39.8-21.7 63.3 23 1.8 46.5-11.7 60.8-28.8z'/></svg>") center/contain no-repeat}
.badge-glyph-play{-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M325.3 234.3 104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l220.7-221.3 60.1 60.1L104.6 499z'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M325.3 234.3 104.6 13l280.8 161.2-60.1 60.1zM47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0zm425.2 225.6-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8zM104.6 499l220.7-221.3 60.1 60.1L104.6 499z'/></svg>") center/contain no-repeat}
.badge-text{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.badge-text small{font-size:10px;font-weight:600;opacity:.8}
.badge-text strong{font-family:'Fredoka';font-weight:600;font-size:16px}

/* --- scroll reveal --- */
.reveal{opacity:1}

/* --- focus visibility --- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-offset:4px}

/* --- motion (opt-in; static under reduced-motion) --- */
@media(prefers-reduced-motion:no-preference){
  /* Hidden-initial is opt-in via .js so no-JS / crawlers / link previews always see
     content; JS reveals on scroll and a load-time safety net catches any misses. */
  html.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
  html.js .reveal.in{opacity:1;transform:none}

  .hero-phones .phone-front{animation:float 6s ease-in-out infinite}
  .hero-phones .phone-back{animation:float 6s ease-in-out infinite;animation-delay:-3s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .hero-phones .phone-back{animation-name:floatb}
  @keyframes floatb{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-6px)}}

  .spark{animation:twinkle 3.4s ease-in-out infinite}
  .sparkles .spark:nth-child(2){animation-delay:.6s}
  .sparkles .spark:nth-child(3){animation-delay:1.2s}
  .sparkles .spark:nth-child(4){animation-delay:1.8s}
  .sparkles .spark:nth-child(5){animation-delay:2.4s}
  .sparkles .spark:nth-child(6){animation-delay:.9s}
  .sparkles .spark:nth-child(7){animation-delay:1.5s}
  @keyframes twinkle{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:.9;transform:scale(1.1)}}
}