/* Generated from the Claude Design file Rashihli_Landing_Page.html (inline styles lifted into classes so the page can run under a strict CSP). Hand-written additions are in the second half. */
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/readex-pro-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/readex-pro-latin-400.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:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/readex-pro-arabic-500.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/readex-pro-latin-500.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:"Readex Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/readex-pro-arabic-600.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Readex Pro";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/readex-pro-latin-600.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}
html{scroll-behavior:smooth}body{margin:0;background:#f7f5ff;color:#1c1536;font-family:'Readex Pro','Segoe UI',Tahoma,'Noto Naskh Arabic',sans-serif;-webkit-font-smoothing:antialiased}a{color:#5b3df5;text-decoration:none}a:hover{color:#3d22c9}*{box-sizing:border-box}@keyframes rl-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.c1{min-height:100vh;display:flex;flex-direction:column}
.c2{position:sticky;top:0;z-index:20;background:rgba(247,245,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #e7e2f7}
.c3{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.c4{display:flex;align-items:center;gap:10px;flex:none}
.c5{height:46px;width:auto;display:block}
.c6{height:40px;width:auto;display:block}
.c7{display:flex;gap:28px;font-size:15px;flex-wrap:wrap;justify-content:center}
.c8{color:#1c1536}
.c9{flex:none;background:#1c1536;color:#fff;border-radius:999px;padding:10px 20px;font-size:14px;font-weight:500}
.c10{flex:1}
.c11{position:relative;overflow:hidden}
.c12{position:absolute;inset:0;background:radial-gradient(60% 70% at 15% 20%,#e4dcff 0%,rgba(228,220,255,0) 70%),radial-gradient(40% 50% at 90% 90%,#ece6ff 0%,rgba(236,230,255,0) 70%);pointer-events:none}
.c13{position:relative;max-width:1200px;margin:0 auto;padding:72px 24px 88px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:56px;align-items:center}
.c14{display:flex;flex-direction:column;gap:28px}
.c15{align-self:flex-start;max-width:100%;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e7e2f7;border-radius:999px;padding:6px 6px 6px 14px;font-size:13px;color:#6b6490}
.c16{flex:none;white-space:nowrap;background:#f1eeff;color:#5b3df5;border-radius:999px;padding:3px 10px;font-weight:500}
.c17{min-width:0;line-height:1.5}
.c18{margin:0;font-size:clamp(44px,6vw,80px);line-height:1.18;font-weight:600;text-wrap:balance}
.c19{color:#5b3df5}
.c20{margin:0;font-size:clamp(17px,1.6vw,20px);line-height:1.85;color:#6b6490;max-width:34em;text-wrap:pretty}
.c21{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.c22{flex:none;white-space:nowrap;display:flex;align-items:center;gap:10px;background:#5b3df5;color:#fff;border-radius:999px;padding:16px 30px;font-size:17px;font-weight:600;box-shadow:0 12px 30px -10px rgba(91,61,245,.6);transition:transform .2s,box-shadow .2s}
.c22:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(91,61,245,.7);color:#fff}
.c23{font-size:20px;line-height:1}
.c24{flex:none;white-space:nowrap;border:1.5px solid #1c1536;color:#1c1536;border-radius:999px;padding:14px 26px;font-size:16px;font-weight:500}
.c24:hover{background:#fff;color:#1c1536}
.c25{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;padding-top:20px;border-top:1px solid #e7e2f7}
.c26{display:flex;flex-direction:column;gap:4px}
.c27{font-size:18px;font-weight:600;color:#5b3df5}
.c28{font-size:13px;color:#6b6490;line-height:1.5}
.c29{position:relative;display:flex;justify-content:center}
.c30{position:absolute;width:78%;aspect-ratio:1;border-radius:40px;background:#5b3df5;transform:rotate(-8deg);opacity:.12;top:6%}
.c31{position:relative;width:100%;max-width:380px;background:#fff;border-radius:24px;overflow:hidden;border:1px solid #e7e2f7;box-shadow:0 40px 80px -30px rgba(28,21,54,.35)}
.c32{background:#5b3df5;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}
.c33{display:flex;align-items:center;gap:10px}
.c34{width:34px;height:34px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center}
.c35{height:26px;width:auto}
.c36{display:flex;flex-direction:column;line-height:1.3}
.c37{font-size:15px}
.c38{font-size:11px;opacity:.85}
.c39{width:30px;height:30px;border-radius:9px;border:none;background:rgba(255,255,255,.2);color:#fff;font:inherit;font-size:14px;cursor:pointer}
.c40{padding:18px;display:flex;flex-direction:column;gap:10px;min-height:340px}
.c41{max-width:1200px;margin:0 auto;padding:0 24px 96px}
.c42{border-radius:28px;overflow:hidden;border:1px solid #e7e2f7;box-shadow:0 30px 60px -30px rgba(28,21,54,.25);background:#fff}
.c43{width:100%;display:block}
.c44{background:#1c1536;color:#fff}
.c45{max-width:1200px;margin:0 auto;padding:88px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:40px;align-items:center}
.c46{margin:0;font-size:clamp(32px,4vw,52px);line-height:1.3;font-weight:600;text-wrap:balance}
.c47{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c48{border:1px solid #403670;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px}
.c49{font-size:13px;color:#a8a0c9}
.c50{font-size:44px;font-weight:400;line-height:1}
.c51{font-size:16px;color:#a8a0c9;line-height:1.6}
.c52{background:#5b3df5;border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:10px}
.c53{font-size:13px}
.c54{font-size:44px;font-weight:600;line-height:1}
.c55{font-size:16px;line-height:1.6}
.c56{max-width:1200px;margin:0 auto;padding:104px 24px;display:flex;flex-direction:column;gap:48px;scroll-margin-top:80px}
.c57{display:flex;flex-direction:column;gap:12px;max-width:640px}
.c58{color:#5b3df5;font-weight:500;font-size:15px}
.c59{margin:0;font-size:clamp(32px,4vw,52px);font-weight:600;line-height:1.25}
.c60{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.c61{display:flex;flex-direction:column;gap:18px}
.c62{border-radius:20px;overflow:hidden;border:1px solid #e7e2f7;background:#fff;box-shadow:0 20px 40px -28px rgba(28,21,54,.3)}
.c63{display:flex;gap:14px;align-items:flex-start}
.c64{flex:none;width:40px;height:40px;border-radius:12px;background:#1c1536;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.c65{font-size:20px;font-weight:600}
.c66{font-size:15px;color:#6b6490;line-height:1.7}
.c67{background:#fff;border-top:1px solid #e7e2f7;border-bottom:1px solid #e7e2f7;scroll-margin-top:80px}
.c68{max-width:1200px;margin:0 auto;padding:104px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.c69{grid-column:1/-1;display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.c70{margin:0;font-size:clamp(32px,4vw,52px);font-weight:600;line-height:1.25;max-width:14em}
.c71{background:#f7f5ff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px}
.c72{font-size:24px;font-weight:600}
.c73{font-size:16px;color:#6b6490;line-height:1.75}
.c74{width:100%;border-radius:16px;display:block;margin-top:auto}
.c75{background:#5b3df5;color:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px}
.c76{font-size:16px;line-height:1.75}
.c77{grid-column:1/-1;background:#1c1536;color:#fff;border-radius:24px;padding:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px;align-items:center}
.c78{display:flex;flex-direction:column;gap:14px}
.c79{font-size:28px;font-weight:600;line-height:1.35}
.c80{font-size:16px;color:#c9c2e8;line-height:1.75}
.c81{display:flex;gap:8px;flex-wrap:wrap;font-size:13px}
.c82{border:1px solid #403670;border-radius:999px;padding:5px 12px}
.c83{width:100%;border-radius:16px;display:block;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.c84{background:#1c1536;color:#fff;scroll-margin-top:80px}
.c85{max-width:1000px;margin:0 auto;padding:96px 24px;display:flex;flex-direction:column;gap:32px;align-items:center;text-align:center}
.c86{display:flex;flex-direction:column;gap:12px;align-items:center}
.c87{color:#c4b5fd;font-weight:500;font-size:15px}
.c88{margin:0;font-size:clamp(30px,3.8vw,48px);font-weight:600;line-height:1.3;text-wrap:balance}
.c89{color:#c4b5fd;font-size:15px}
.c90{max-width:1200px;margin:0 auto;padding:88px 24px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center}
.c91{margin:0;font-size:clamp(28px,3.4vw,44px);font-weight:600}
.c92{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.c93{background:#fff;border:1px solid #e7e2f7;border-radius:999px;padding:10px 20px;font-size:16px;transition:border-color .15s,color .15s}
.c93:hover{border-color:#5b3df5;color:#5b3df5}
.c94{max-width:1200px;margin:0 auto;padding:104px 24px;display:flex;flex-direction:column;gap:48px}
.c95{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.c96{margin:0;font-size:16px;color:#6b6490;max-width:36em;line-height:1.75}
.c97{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px;align-items:stretch}
.c98{background:#f7f5ff;color:#1c1536;border:1.5px solid #e7e2f7;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:20px;transition:transform .2s}
.c98:hover{transform:translateY(-4px)}
.c99{display:flex;justify-content:space-between;align-items:center}
.c100{display:flex;flex-direction:column;gap:2px}
.c101{font-size:40px;font-weight:600;line-height:1.1}
.c102{font-size:14px;opacity:.8}
.c103{display:flex;flex-direction:column;gap:10px;font-size:15px;border-top:1px solid #ddd6fe;padding-top:20px}
.c104{margin-top:auto;text-align:center;background:#1c1536;color:#fff;border-radius:999px;padding:14px;font-size:16px;font-weight:600}
.c105{background:#5b3df5;color:#fff;border:1.5px solid #5b3df5;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:20px;transition:transform .2s}
.c105:hover{transform:translateY(-4px)}
.c106{display:flex;flex-direction:column;gap:10px;font-size:15px;border-top:1px solid rgba(255,255,255,.25);padding-top:20px}
.c107{margin-top:auto;text-align:center;background:#fff;color:#5b3df5;border-radius:999px;padding:14px;font-size:16px;font-weight:600}
.c108{margin:0;text-align:center;font-size:14px;color:#6b6490;line-height:1.9}
.c109{max-width:880px;margin:0 auto;padding:104px 24px;display:flex;flex-direction:column;gap:32px;scroll-margin-top:80px;width:100%}
.c110{display:flex;flex-direction:column;gap:12px}
.c111{margin:0;font-size:clamp(32px,4vw,52px);font-weight:600}
.c112{display:flex;flex-direction:column;border-top:1px solid #ddd6fe}
.c113{border-bottom:1px solid #ddd6fe}
.c114{width:100%;font:inherit;background:none;border:none;color:#1c1536;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;text-align:right;font-size:18px;font-weight:500}
.c114:hover{color:#5b3df5}
.c115{flex:none;width:32px;height:32px;border-radius:50%;background:#f1eeff;color:#5b3df5;display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .25s;transform:none}
.c116{margin:0;padding:0 0 22px;font-size:16px;line-height:1.85;color:#6b6490;max-width:44em;animation:rl-up .3s both}
.c117{padding:0 24px 104px;scroll-margin-top:80px}
.c118{max-width:1200px;margin:0 auto;position:relative;overflow:hidden;border-radius:32px;background:#5b3df5;color:#fff;padding:72px 40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px;align-items:center}
.c119{position:absolute;inset:0;background:radial-gradient(50% 80% at 0% 100%,rgba(139,92,246,.9) 0%,rgba(139,92,246,0) 70%);pointer-events:none}
.c120{position:relative;display:flex;flex-direction:column;gap:22px}
.c121{margin:0;font-size:clamp(36px,5vw,64px);font-weight:600;line-height:1.2}
.c122{margin:0;font-size:18px;line-height:1.8;max-width:28em}
.c123{align-self:flex-start;display:flex;align-items:center;gap:12px;background:#fff;color:#5b3df5;border-radius:999px;padding:20px 38px;font-size:19px;font-weight:600;box-shadow:0 18px 40px -14px rgba(28,21,54,.5);transition:transform .2s}
.c123:hover{transform:translateY(-2px) scale(1.02);color:#5b3df5}
.c124{font-size:22px;line-height:1}
.c125{width:min(100%,300px);height:auto;filter:drop-shadow(0 30px 40px rgba(28,21,54,.35));transform:rotate(-6deg)}
.c126{background:#1c1536;color:#c9c2e8}
.c127{max-width:1200px;margin:0 auto;padding:56px 24px 28px;display:flex;flex-direction:column;gap:40px}
.c128{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.c129{display:flex;flex-direction:column;gap:14px;max-width:320px}
.c130{background:#fff;border-radius:14px;padding:8px 12px;display:flex;align-items:center;gap:8px}
.c131{height:36px;width:auto}
.c132{height:32px;width:auto}
.c133{font-size:15px;line-height:1.7}
.c134{display:flex;gap:56px;flex-wrap:wrap;font-size:15px}
.c135{display:flex;flex-direction:column;gap:10px}
.c136{color:#fff;font-weight:500}
.c137{color:#c9c2e8}
.c138{border-top:1px solid #2f2656;padding-top:20px;font-size:13px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ===== hand-written additions ===== */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 3px; border-radius: 8px; }
button { cursor: pointer; }
img { max-width: 100%; height: auto; }

/* demo quiz (rendered by landing.js) */
.q-dots { display: flex; gap: 4px; }
.q-dots i { flex: 1; height: 5px; border-radius: 3px; background: #e7e2f7; transition: background .3s; }
.q-dots i.on { background: #5b3df5; }
.q-count { font-size: 12px; color: #6b6490; }
.q-title { font-size: 18px; font-weight: 600; line-height: 1.6; }
.q-opt { font: inherit; font-size: 15px; text-align: right; background: #fff; color: #1c1536; border: 1.5px solid #e7e2f7; border-radius: 12px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: border-color .15s, background .15s; margin-top: 0; }
.q-opt:hover { border-color: #5b3df5; background: #f7f5ff; }
.q-opt i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #c9bffc; }
.q-opt.picked { border-color: #5b3df5; background: #f1eeff; }
.q-opt.picked i { background: #5b3df5; border-color: #5b3df5; }
.q-list { display: flex; flex-direction: column; gap: 10px; }
.r-card { border: 1.5px solid #e7e2f7; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 4px; animation: rl-up .4s both; }
.r-card.best { border-color: #5b3df5; }
.r-card.d2 { animation-delay: .1s; }
.r-badge { align-self: flex-start; background: #f1eeff; color: #5b3df5; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 500; }
.r-card b { font-size: 15px; font-weight: 600; }
.r-price { color: #5b3df5; font-weight: 600; }
.r-why { font-size: 13px; color: #6b6490; }
.r-note { font-size: 12px; color: #8f88b0; text-align: center; }
.r-again { font: inherit; background: #5b3df5; color: #fff; border: none; border-radius: 12px; padding: 12px; font-size: 15px; margin-top: auto; }
.r-again:hover { background: #4b2fe0; }

/* video */
.rl-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: #000; border: 1px solid #403670; box-shadow: 0 40px 90px -40px rgba(91,61,245,.8); }
.rl-video img, .rl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.rl-play { position: absolute; inset: 0; width: 100%; display: grid; place-items: center; border: 0; background: linear-gradient(180deg, rgba(18,13,38,.1), rgba(18,13,38,.55)); font: inherit; }
.rl-play span { background: #fff; color: #5b3df5; border-radius: 999px; padding: 16px 30px; font-size: 17px; font-weight: 600; box-shadow: 0 20px 50px -12px rgba(0,0,0,.6); transition: transform .2s; }
.rl-play:hover span { transform: scale(1.05); }

/* faq: keep a visible state for keyboard users */
button[data-faq]:focus-visible { outline-offset: 4px; }
button[data-faq][aria-expanded="true"] > span:last-child { transform: rotate(45deg); }

/* small screens: the design's grids already collapse; keep header tidy */
@media (max-width: 560px) {
  header .c3, header nav { gap: 16px; }
}

/* ===== interactivity layer ===== */
/* demo card */
#demo-body { min-height: 430px; }
.d-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 2px; scrollbar-width: none; }
.d-tabs::-webkit-scrollbar { display: none; }
.d-tab { flex: none; font: inherit; font-size: 12px; background: #f7f5ff; color: #6b6490; border: 1px solid #e7e2f7; border-radius: 999px; padding: 4px 12px; transition: background .15s, color .15s, border-color .15s; }
.d-tab:hover { border-color: #5b3df5; color: #5b3df5; }
.d-tab.on { background: #5b3df5; border-color: #5b3df5; color: #fff; }
.q-opt.picked { border-color: #5b3df5; background: #f1eeff; }
.q-opt.picked i { background: #5b3df5; border-color: #5b3df5; box-shadow: inset 0 0 0 3px #f1eeff; }
.q-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; }
.q-next { flex: 1; font: inherit; font-size: 15px; font-weight: 600; background: #5b3df5; color: #fff; border: none; border-radius: 12px; padding: 12px; transition: background .15s, opacity .15s; }
.q-next:hover:not(:disabled) { background: #4b2fe0; }
.q-next:disabled { opacity: .35; cursor: not-allowed; }
.q-back { font: inherit; font-size: 15px; background: #fff; color: #1c1536; border: 1.5px solid #e7e2f7; border-radius: 12px; padding: 12px 18px; }
.q-back:hover:not(:disabled) { border-color: #5b3df5; }
.q-back:disabled { opacity: .35; cursor: not-allowed; }
.r-card { font: inherit; text-align: right; background: #fff; color: #1c1536; width: 100%; transition: border-color .15s, box-shadow .15s, transform .15s; }
.r-card:hover { border-color: #5b3df5; transform: translateY(-2px); }
.r-card.sel { box-shadow: 0 0 0 3px #ddd6fe; border-color: #5b3df5; }

/* header: mobile menu + active link */
.menu-btn { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 44px; padding: 0 12px; background: #fff; border: 1px solid #e7e2f7; border-radius: 12px; }
.menu-btn span { display: block; height: 2px; background: #1c1536; border-radius: 2px; }
nav a.active { color: #5b3df5 !important; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
@media (max-width: 760px) {
  .menu-btn { display: flex; }
  #site-nav { display: none !important; }
  #site-nav.open { display: flex !important; flex-direction: column; align-items: stretch; width: 100%; order: 5; gap: 0 !important; padding: 4px 0 8px; }
  #site-nav.open a { padding: 12px 4px; border-bottom: 1px solid #e7e2f7; }
}

/* how it works: clickable steps */
.st-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 900px) { .st-wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 40px; } }
.st-list { display: flex; flex-direction: column; gap: 12px; }
.st-btn { font: inherit; text-align: right; display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1.5px solid #e7e2f7; border-radius: 20px; padding: 18px; color: #1c1536; transition: border-color .2s, box-shadow .2s, transform .2s; }
.st-btn:hover { border-color: #c4b5fd; transform: translateY(-2px); }
.st-btn.on { border-color: #5b3df5; box-shadow: 0 18px 40px -26px rgba(91,61,245,.7); }
.st-n { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #1c1536; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; transition: background .2s; }
.st-btn.on .st-n { background: #5b3df5; }
.st-t { display: flex; flex-direction: column; gap: 4px; }
.st-t b { font-size: 20px; font-weight: 600; }
.st-t span { font-size: 15px; color: #6b6490; line-height: 1.7; }
.st-view { position: relative; border-radius: 24px; overflow: hidden; border: 1px solid #e7e2f7; background: #fff; box-shadow: 0 24px 50px -30px rgba(28,21,54,.35); aspect-ratio: 16 / 9; }
.st-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; pointer-events: none; }
.st-img.on { opacity: 1; pointer-events: auto; }

/* niches + pricing */
.niche-btn { font: inherit; font-size: 16px; color: #1c1536; }
.niche-btn:hover { background: #f1eeff; transform: translateY(-2px); }
.niche-hint { margin: 0; font-size: 14px; color: #6b6490; }
[data-plan] { cursor: pointer; }
[data-plan].sel { box-shadow: 0 0 0 4px #c4b5fd; transform: translateY(-4px); }
.plan-sum { margin: 0; text-align: center; font-size: 16px; font-weight: 500; color: #5b3df5; min-height: 1.7em; }

/* screenshots: click to enlarge */
.zoomable { cursor: zoom-in; transition: transform .25s, box-shadow .25s; }
.zoomable:hover { transform: scale(1.01); }
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(18,13,38,.88); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; animation: rl-up .25s both; }
.lb img { max-width: min(1400px, 100%); max-height: 100%; border-radius: 16px; box-shadow: 0 40px 100px -20px rgba(0,0,0,.7); background: #fff; }
.lb-x { position: absolute; top: 16px; left: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff; color: #1c1536; font-size: 26px; line-height: 1; }
.lb-open { overflow: hidden; }

/* video */
.rl-video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }

/* reveal (added by JS only) */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* niche picker inside the demo card: a native select, so no label is ever clipped */
.d-select { width: 100%; font: inherit; font-size: 14px; font-weight: 500; color: #1c1536; background: #f7f5ff; border: 1.5px solid #e7e2f7; border-radius: 12px; padding: 9px 12px; margin-bottom: 4px; cursor: pointer; }
.d-select:hover, .d-select:focus-visible { border-color: #5b3df5; }

/* plans: full detail */
.pl-block { display: flex; flex-direction: column; gap: 16px; }
.pl-h { margin: 8px 0 0; font-size: clamp(22px, 2.4vw, 28px); font-weight: 600; line-height: 1.5; }
.pl-scroll { overflow-x: auto; border: 1px solid #e7e2f7; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px -30px rgba(28,21,54,.3); }
.pl-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.pl-table th, .pl-table td { padding: 14px 18px; text-align: right; border-bottom: 1px solid #e7e2f7; line-height: 1.7; vertical-align: top; }
.pl-table thead th { background: #f7f5ff; font-weight: 600; font-size: 16px; position: sticky; top: 0; }
.pl-table tbody th { font-weight: 500; color: #1c1536; width: 34%; }
.pl-table tr:last-child th, .pl-table tr:last-child td { border-bottom: 0; }
.pl-yes { color: #0f7b52; font-weight: 600; }
.pl-no { color: #8f88b0; }
.pl-table[data-sel="basic"] .col-basic, .pl-table[data-sel="growth"] .col-growth, .pl-table[data-sel="pro"] .col-pro { background: #f1eeff; }
.pl-note { margin: 0; font-size: 14px; color: #6b6490; line-height: 1.8; }
.pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.pl-card { background: #f7f5ff; border: 1px solid #e7e2f7; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.pl-card b { font-size: 17px; font-weight: 600; }
.pl-card span { font-size: 15px; color: #6b6490; line-height: 1.8; }
.pl-addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.pl-add { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #f1eeff; border: 1px solid #ddd6fe; border-radius: 18px; padding: 20px 22px; }
.pl-add b { display: block; font-size: 17px; font-weight: 600; }
.pl-add span { display: block; font-size: 14px; color: #6b6490; line-height: 1.8; margin-top: 2px; }
.pl-add i { flex: none; font-style: normal; font-size: 20px; font-weight: 600; color: #5b3df5; white-space: nowrap; }

/* plan prices */
.pl-price { display: flex; align-items: baseline; gap: 8px; }
.pl-price b { font-size: 44px; font-weight: 600; line-height: 1.1; }
.pl-price span { font-size: 15px; opacity: .8; }
.pl-table tr.pl-price-row td { font-size: 18px; font-weight: 600; color: #5b3df5; }
.pl-table tr.pl-price-row th { color: #1c1536; }