/* Alifba website: shared styles for about / features / pricing / faq / contact.
   Tokens match alifba-homepage-v4-videos.html (white-grey ground, amber accent, no gold/dark). */
.asite {
  --ink: #1a1a1a; --ink2: #555555; --mute: #707070; --faint: #9a9a9a;
  --line: #e2e2e2; --bg: #f4f4f4; --card: #ffffff; --amber: #c07a28; --amber-soft: rgba(192,122,40,0.07);
}
.asite.lang-ar { --body: 'IBM Plex Sans Arabic', sans-serif; }
.asite.lang-en { --body: 'Space Grotesk', sans-serif; }
.asite, .asite * { box-sizing: border-box; }
.asite { scroll-behavior: smooth; overflow-x: clip; }
.asite {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--body); font-weight: 300; overflow-x: clip;
  transition: background-color .8s ease;
}
.asite a { color: var(--amber); text-decoration: none; }
.asite a:hover { color: #a6661f; }
.asite ::selection { background: rgba(192,122,40,0.30); }
.asite :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.asite img, .asite video { max-width: 100%; }
.asite h1, .asite h2, .asite h3, .asite p { margin: 0; }
.asite .mono { font-family: 'Courier Prime', monospace; }

.asite .wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px); }
.asite .section { padding-top: clamp(80px, 9vw, 130px); }

/* ---- header ---- */
.asite .site-header { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(14px); background: rgba(255,255,255,0.62); border-bottom: 1px solid rgba(0,0,0,0.07); }
.asite .site-header .bar { display: flex; align-items: center; gap: 28px; padding-block: 14px; }
.asite .brand { display: flex; align-items: baseline; gap: 10px; }
.asite .brand img { height: 30px; width: auto; display: block; }
.asite .brand i { width: 6px; height: 6px; border-radius: 999px; background: var(--amber); display: inline-block; }
.asite .site-nav { display: flex; gap: 22px; align-items: center; margin-inline-start: 18px; font-size: 14.5px; }
.asite .site-nav a { color: var(--mute); transition: color .2s; }
.asite .site-nav a:hover, .asite .site-nav a.on { color: var(--ink); }
.asite .site-nav a.on { font-weight: 500; }
.asite .bar .grow { flex: 1; }
.asite .lang-btn { font-family: 'Courier Prime', monospace; font-size: 12px; letter-spacing: .08em; padding: 9px 14px; border-radius: 999px; border: 1px solid #d8d8d8; background: transparent; color: #333; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.asite .lang-btn:hover { border-color: var(--amber); color: var(--ink); }
.asite .lang-btn span { opacity: .55; }
.asite .menu-btn { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid #d8d8d8; background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.asite .menu-btn b { display: block; width: 16px; height: 1.5px; background: var(--ink); }
@media (max-width: 900px) {
  .asite .site-nav { display: none; position: absolute; inset-inline: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 8px clamp(20px,4vw,40px) 18px; background: rgba(250,250,250,0.97); border-bottom: 1px solid var(--line); font-size: 16px; }
  .asite .site-nav a { padding: 13px 0; border-bottom: 1px solid #ececec; }
  .asite .nav-open .site-nav { display: flex; }
  .asite .menu-btn { display: flex; }
  .asite .site-header .cta-pill { display: none; }
}

/* ---- type + buttons ---- */
.asite .pill { display: inline-flex; align-items: center; gap: 10px; font-family: 'Courier Prime', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); border: 1px solid rgba(192,122,40,0.35); background: var(--amber-soft); padding: 7px 14px; border-radius: 999px; }
.asite .kicker { font-family: 'Courier Prime', monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.asite .display { font-weight: 600; font-size: clamp(38px, 6vw, 72px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; white-space: pre-line; }
.asite.lang-ar .display { line-height: 1.25; letter-spacing: 0; }
.asite .h2 { font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance; }
.asite.lang-ar .h2 { line-height: 1.4; letter-spacing: 0; }
.asite .lede { font-size: clamp(16.5px, 1.5vw, 19.5px); line-height: 1.7; color: #636363; text-wrap: balance; max-width: 640px; }
.asite.lang-ar .lede { line-height: 1.95; }
.asite .body { font-size: 16.5px; line-height: 1.8; color: #444; text-wrap: pretty; }
.asite.lang-ar .body { line-height: 2; }
.asite .btn { display: inline-flex; align-items: center; justify-content: center; font-family: inherit; font-size: 15.5px; font-weight: 500; padding: 14px 26px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.asite .btn.dark { background: var(--ink); color: #fff; }
.asite .btn.dark:hover { background: #2e2e2e; color: #fff; }
.asite .btn.line { border-color: #d0d0d0; color: #2a2a2a; background: transparent; }
.asite .btn.line:hover { border-color: var(--ink); color: var(--ink); }
.asite .btn.sm { padding: 10px 20px; font-size: 14.5px; }
.asite .cta-pill { font-size: 14.5px; font-weight: 500; padding: 10px 20px; border-radius: 999px; background: var(--ink); color: #fff; }
.asite .cta-pill:hover { background: #2e2e2e; color: #fff; }
.asite .row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.asite .center { text-align: center; margin-inline: auto; }
.asite .page-hero { padding-top: clamp(60px, 8vw, 110px); }
.asite .page-hero .lede { margin-top: 24px; }
.asite .page-hero.center .lede { margin-inline: auto; }
.asite .page-hero .display { margin-top: 24px; }

/* ---- reveal ---- */
.asite [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.asite [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .asite [data-reveal] { opacity: 1; transform: none; transition: none; } .asite { scroll-behavior: auto; } }

/* ---- cards / grids ---- */
.asite .card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px; }
.asite .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.asite .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.asite .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 900px) { .asite .grid3, .asite .grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .asite .grid2, .asite .grid3, .asite .grid4 { grid-template-columns: 1fr; } }
.asite .dot { width: 5px; height: 5px; border-radius: 999px; background: var(--amber); flex: none; }
.asite .ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.asite .ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.6; color: #3d3d3d; }
.asite .ticks li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--amber); margin-top: 9px; flex: none; }

/* ---- closing band ---- */
.asite .end-band { position: relative; border: 1px solid #dcdcdc; border-radius: 22px; overflow: hidden; background: linear-gradient(150deg, #fdf3e7, #ececec); padding: clamp(40px, 6vw, 84px); text-align: center; }
.asite .end-band::after { content: ""; position: absolute; left: 50%; bottom: -180px; width: 700px; height: 380px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(192,122,40,0.16), transparent 68%); pointer-events: none; }
.asite .end-band > * { position: relative; z-index: 1; }
.asite .end-band .h2 { font-size: clamp(28px, 4vw, 50px); }
.asite .end-band p { font-size: 17.5px; line-height: 1.7; color: #555; max-width: 520px; margin: 18px auto 30px; text-wrap: pretty; }

/* ---- footer ---- */
.asite .site-footer { padding: clamp(60px, 7vw, 90px) 0 48px; }
.asite .foot-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; border-top: 1px solid #e0e0e0; padding-top: 40px; }
.asite .foot-top img { height: 34px; width: auto; display: block; margin-bottom: 12px; }
.asite .foot-top p { font-size: 14.5px; line-height: 1.7; color: #838383; max-width: 280px; }
.asite .foot-col { display: flex; flex-direction: column; gap: 11px; }
.asite .foot-col h4 { margin: 0 0 4px; font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #9c9c9c; font-weight: 400; }
.asite .foot-col a { font-size: 14.5px; color: #555; }
.asite .foot-col a:hover { color: var(--ink); }
.asite .foot-bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; margin-top: 44px; font-family: 'Courier Prime', monospace; font-size: 11.5px; color: #a3a3a3; }

/* =========================== ABOUT =========================== */
.asite .letters { display: flex; justify-content: center; direction: rtl; gap: clamp(8px, 2vw, 28px); font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 600; font-size: clamp(110px, 20vw, 260px); line-height: 1.1; }
.asite .letters span { color: #1a1a1a; opacity: .08; transition: color .5s, opacity .5s, transform .5s cubic-bezier(.16,1,.3,1); cursor: default; }
.asite .letters span:hover, .asite .letters.in span { }
.asite .letters span.a { color: var(--amber); opacity: .55; }
.asite .letters span.b { color: var(--amber); opacity: .3; }
.asite .letters span:hover { opacity: .85; transform: translateY(-8px); color: var(--amber); }
.asite .standard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .asite .standard { grid-template-columns: 1fr; } }
.asite .page-mini { width: 100%; max-width: 420px; margin-inline: auto; background: #fff; border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,0.10); padding: 38px 42px; aspect-ratio: 0.78; position: relative; overflow: hidden; }
.asite .page-mini .ln { height: 7px; border-radius: 4px; background: #e6e6e6; margin-bottom: 14px; }
.asite .page-mini .min { position: absolute; inset-inline-end: 18px; bottom: 16px; font-family: 'Courier Prime', monospace; font-size: 12px; color: var(--amber); border: 1px solid rgba(192,122,40,.4); background: var(--amber-soft); padding: 6px 12px; border-radius: 999px; }

/* ========================== FEATURES ========================== */
.asite .zoom-stage { height: 185vh; position: relative; margin-top: clamp(40px, 5vw, 70px); }
.asite .zoom-sticky { position: sticky; top: 64px; height: calc(100vh - 64px); display: grid; place-items: center; --p: 0; }
.asite .zoom-screen {
  width: calc(100vw - (100vw - min(1080px, 88vw)) * var(--p));
  height: calc(100% - (100% - min(607px, 49.5vw, 100vh - 150px)) * var(--p));
  border-radius: calc(var(--p) * 22px); overflow: hidden; position: relative; background: #f4f4f4;
  box-shadow: 0 calc(var(--p) * 60px) calc(var(--p) * 130px) rgba(192,122,40,calc(var(--p) * .22)), 0 calc(var(--p) * 30px) calc(var(--p) * 70px) rgba(0,0,0,calc(var(--p) * .16));
  will-change: width, height;
}
.asite .zoom-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transform: scale(calc(1.18 - var(--p) * .18)); }
.asite .zoom-cap { position: absolute; inset-inline: 0; bottom: 0; padding: 26px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); font-size: 15px; opacity: calc(1 - var(--p) * 1.6); }
.asite .words { font-weight: 600; font-size: clamp(26px, 4.2vw, 52px); line-height: 1.3; letter-spacing: -0.015em; max-width: 1000px; text-wrap: balance; }
.asite.lang-ar .words { line-height: 1.6; letter-spacing: 0; }
.asite .words .w { opacity: .16; transition: opacity .25s linear; }
.asite .words .w.lit { opacity: 1; }
.asite .frow { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.asite .frow.flip .ftext { order: 2; }
@media (max-width: 900px) { .asite .frow { grid-template-columns: 1fr; } .asite .frow.flip .ftext { order: 0; } }
.asite .ftext .h2 { margin: 0 0 18px; }
.asite .ftext .ticks { margin-top: 22px; }
.asite .fwin { border: 1px solid #dcdcdc; border-radius: 18px; overflow: hidden; background: #f4f4f4; position: relative; aspect-ratio: 16 / 10; box-shadow: 0 40px 100px rgba(0,0,0,0.12); transform: scale(var(--s, .94)); transition: transform .12s linear; }
.asite .fwin video, .asite .fwin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.asite .fvis { display: grid; place-items: center; padding: 28px; background: #fff; }
.asite .demo-toggle { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; margin-top: 20px; cursor: pointer; background: none; border: 0; font-family: inherit; color: var(--ink); padding: 0; }
.asite .demo-toggle .sw { width: 44px; height: 26px; border-radius: 999px; background: #d9d9d9; position: relative; transition: background .25s; }
.asite .demo-toggle .sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: inset-inline-start .25s; }
.asite .demo-toggle.on .sw { background: var(--amber); }
.asite .demo-toggle.on .sw::after { inset-inline-start: 21px; }
.asite .tash-line { font-family: 'Noto Naskh Arabic', serif; font-size: clamp(24px, 3vw, 34px); line-height: 2; direction: rtl; text-align: center; color: #1a1a1a; min-height: 2.2em; }
.asite .bars { display: flex; align-items: center; gap: 6px; height: 120px; direction: ltr; }
.asite .bars i { width: 7px; border-radius: 4px; background: var(--amber); height: 20%; animation: as-bar 1.1s ease-in-out infinite; }
@keyframes as-bar { 0%, 100% { height: 14%; } 50% { height: 92%; } }
.asite .bars i:nth-child(3n) { animation-duration: 1.5s; } .asite .bars i:nth-child(3n+1) { animation-duration: .9s; } .asite .bars i:nth-child(2n) { background: #1a1a1a; opacity: .75; }
.asite .fmt-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; direction: ltr; }
.asite .fmt { font-family: 'Courier Prime', monospace; font-size: 18px; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--line); background: #fafafa; }
.asite .fmt.amber { border-color: rgba(192,122,40,.5); background: var(--amber-soft); color: var(--amber); }
.asite .dots { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 320px; }
.asite .dots i { width: 34px; height: 34px; border-radius: 999px; display: block; transition: transform .3s; }
.asite .dots i:hover { transform: scale(1.25); }
.asite .more-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; transition: border-color .2s, transform .3s; }
.asite .more-card:hover { border-color: #c8c8c8; transform: translateY(-3px); }
.asite .more-card h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 8px; }
.asite .more-card p { font-size: 14.5px; line-height: 1.7; color: #666; }
.asite .stat-n { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.02em; line-height: 1; }
.asite .stat-l { margin-top: 8px; font-size: 14.5px; color: #777; }

/* =========================== PRICING =========================== */
.asite .bill { display: inline-flex; padding: 4px; border: 1px solid #dcdcdc; border-radius: 999px; background: #fff; }
.asite .bill button { font-family: inherit; font-size: 14px; font-weight: 500; padding: 9px 24px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; color: #555; transition: background .25s, color .25s; }
.asite .bill button.on { background: var(--ink); color: #fff; }
.asite .save-chip { font-family: 'Courier Prime', monospace; font-size: 12px; color: var(--amber); border: 1px solid rgba(192,122,40,.35); background: var(--amber-soft); padding: 6px 12px; border-radius: 999px; }
.asite .plan { display: flex; flex-direction: column; gap: 20px; }
.asite .plan h3 { font-size: 19px; font-weight: 600; }
.asite .plan .amt { font-family: 'Space Grotesk', sans-serif; font-size: 46px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.asite .plan .unit { font-size: 14.5px; color: #787878; }
.asite .plan .note { font-size: 13px; color: #9a9a9a; min-height: 18px; }
.asite .plan .desc { font-size: 15px; line-height: 1.7; color: #636363; }
.asite .plan .btn { margin-top: auto; }
.asite .trial-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.asite .cmp-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.asite table.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.asite .cmp th, .asite .cmp td { padding: 15px 20px; border-bottom: 1px solid #eee; font-size: 15px; text-align: center; }
.asite .cmp th:first-child, .asite .cmp td:first-child { text-align: start; width: 46%; }
.asite .cmp thead th { position: sticky; top: 0; background: #fff; font-weight: 600; font-size: 15px; z-index: 1; }
.asite .cmp tbody tr:last-child td { border-bottom: 0; }
.asite .cmp tbody tr:hover td { background: #fafafa; }
.asite .cmp .yes { color: var(--ink); font-weight: 600; }
.asite .cmp .no { color: #ccc; font-size: 20px; line-height: 1; }

/* ============================ FAQ ============================ */
.asite .search { width: 100%; max-width: 620px; margin: 30px auto 0; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #dcdcdc; border-radius: 999px; padding: 6px 22px; transition: border-color .2s, box-shadow .2s; }
.asite .search:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(192,122,40,.12); }
.asite .search input { flex: 1; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 16px; padding: 12px 0; color: var(--ink); min-width: 0; }
.asite .search svg { flex: none; opacity: .5; }
.asite .chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.asite .chip { font-family: inherit; font-size: 14px; padding: 8px 16px; border-radius: 999px; border: 1px solid #d8d8d8; background: transparent; color: #444; cursor: pointer; transition: all .2s; }
.asite .chip:hover { border-color: #aaa; }
.asite .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.asite .faq-group { margin-top: 44px; }
.asite .faq-group h2 { font-family: 'Courier Prime', monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #888; font-weight: 400; margin-bottom: 18px; }
.asite.lang-ar .faq-group h2 { font-family: inherit; font-size: 14px; letter-spacing: 0; text-transform: none; }
.asite details.q { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 0 24px; margin-bottom: 10px; transition: border-color .2s; }
.asite details.q[open] { border-color: #d6d6d6; }
.asite details.q summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 16px; font-weight: 500; }
.asite details.q summary::-webkit-details-marker { display: none; }
.asite details.q summary::after { content: "+"; color: var(--amber); font-size: 24px; font-weight: 300; flex: none; transition: transform .25s; }
.asite details.q[open] summary::after { transform: rotate(45deg); }
.asite details.q p { padding: 0 0 22px; font-size: 15.5px; line-height: 1.85; color: #555; max-width: 70ch; text-wrap: pretty; }
.asite.lang-ar details.q p { line-height: 2; }
.asite .no-res { text-align: center; color: #777; padding: 60px 0 10px; display: none; }

/* =========================== CONTACT =========================== */
.asite .contact-card { display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, transform .3s; color: var(--ink); }
.asite .contact-card:hover { border-color: var(--amber); transform: translateY(-3px); color: var(--ink); }
.asite .contact-card .l { font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #aaa; }
.asite .contact-card .v { font-family: 'Courier Prime', monospace; font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; letter-spacing: -0.01em; word-break: break-all; }
.asite .contact-card .d { font-size: 14.5px; color: #777; line-height: 1.7; }

/* Arabic: no letter-spacing (it breaks the joins) and no Latin mono fallback for Arabic labels. */
.asite.lang-ar .pill, .asite.lang-ar .kicker, .asite.lang-ar .foot-col h4, .asite.lang-ar .foot-bottom, .asite.lang-ar .save-chip, .asite.lang-ar .contact-card .l, .asite.lang-ar .page-mini .min, .asite.lang-ar .mono {
  letter-spacing: 0; text-transform: none; font-family: var(--body);
}
.asite.lang-ar .plan .amt, .asite.lang-ar .stat-n { font-family: var(--body); font-weight: 600; }

/* ======================= REVISION DEMO: marks draw in, one draft color at a time ======================= */
.asite .revwrap { display: grid; place-items: center; padding: 10px; }
.asite .revpage { background: #fff; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.10); padding: clamp(14px, 2vw, 26px) clamp(18px, 2.6vw, 34px); width: min(90%, 430px); }
.asite .revpage p { margin: 0 0 7px; font-size: clamp(11px, 1.12vw, 14.5px); line-height: 1.55; color: #1a1a1a; }
.asite .revpage.ar p { font-family: 'Noto Naskh Arabic', serif; direction: rtl; }
.asite .revpage.en p { font-family: 'Courier Prime', monospace; direction: ltr; }
.asite .revpage ins, .asite .revpage del { text-decoration: none; background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; }
.asite .revpage ins { background-image: linear-gradient(currentColor, currentColor); }
.asite .revpage del { background-image: linear-gradient(currentColor, currentColor); background-position: 0 55%; opacity: .85; }
.asite .revpage .b { color: #2563eb; } .asite .revpage .p { color: #db2777; } .asite .revpage .y { color: #b7791f; }
.asite .revleg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eee; font-family: var(--body); font-size: 12px; color: #666; }
.asite .revleg > span:not(.acts) { display: inline-flex; align-items: center; gap: 7px; opacity: .45; }
.asite .revleg i { width: 10px; height: 10px; border-radius: 999px; display: block; }
.asite .revleg i.b { background: #2563eb; } .asite .revleg i.p { background: #db2777; } .asite .revleg i.y { background: #eab308; }
.asite .revleg .acts { margin-inline-start: auto; display: inline-flex; gap: 6px; opacity: 0; }
.asite .revleg .acts b { font-weight: 500; font-size: 11px; padding: 3px 10px; border-radius: 999px; border: 1px solid #d4d4d4; }
.asite .revleg .acts .ok { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
@media (prefers-reduced-motion: no-preference) {
  .asite .revpage .m1 { animation: as-mk1 12s infinite; } .asite .revpage .m2 { animation: as-mk2 12s infinite; } .asite .revpage .m3 { animation: as-mk3 12s infinite; }
  .asite .revleg .lg1 { animation: as-lg1 12s infinite; } .asite .revleg .lg2 { animation: as-lg2 12s infinite; } .asite .revleg .lg3 { animation: as-lg3 12s infinite; }
  .asite .revleg .acts { animation: as-acts 12s infinite; }
}
@keyframes as-mk1 { 0%, 6% { background-size: 0 2px; } 16%, 92% { background-size: 100% 2px; } 100% { background-size: 0 2px; } }
@keyframes as-mk2 { 0%, 22% { background-size: 0 2px; } 34%, 92% { background-size: 100% 2px; } 100% { background-size: 0 2px; } }
@keyframes as-mk3 { 0%, 40% { background-size: 0 2px; } 52%, 92% { background-size: 100% 2px; } 100% { background-size: 0 2px; } }
@keyframes as-lg1 { 0%, 4% { opacity: .35; } 8%, 20% { opacity: 1; } 24%, 100% { opacity: .55; } }
@keyframes as-lg2 { 0%, 20% { opacity: .35; } 24%, 38% { opacity: 1; } 42%, 100% { opacity: .55; } }
@keyframes as-lg3 { 0%, 38% { opacity: .35; } 42%, 58% { opacity: 1; } 62%, 100% { opacity: .55; } }
@keyframes as-acts { 0%, 62% { opacity: 0; } 68%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ======================= FORMATTING DEMO: raw text snaps into screenplay format as you scroll ======================= */
.asite .fpage { background: #fff; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.10); width: min(70%, 470px); padding: clamp(16px, 2.2vw, 28px) clamp(18px, 2.6vw, 34px); font-size: clamp(12px, 1.45vw, 17px); line-height: 1.25; color: #1a1a1a; margin: auto; }
.asite .fpage.ar { direction: rtl; font-family: 'Noto Naskh Arabic', serif; } .asite .fpage.en { direction: ltr; font-family: 'Courier Prime', monospace; }
.asite .fl { position: relative; margin-top: 3px; transition: margin .55s cubic-bezier(.16,1,.3,1), font-weight .35s, color .35s; color: #777; }
.asite .fl .tg { position: absolute; inset-inline-start: calc(100% + 16px); top: 50%; transform: translateY(-50%); white-space: nowrap; font-family: var(--body); font-size: 10.5px; font-weight: 500; color: var(--amber); border: 1px solid rgba(192,122,40,.4); background: var(--amber-soft); padding: 2px 8px; border-radius: 999px; opacity: 0; transition: opacity .4s; }
.asite .fl.on { color: #1a1a1a; } .asite .fl.on .tg { opacity: 1; }
.asite .fl.sh.on { font-weight: 700; margin-top: 4px; } .asite .fl.ac.on { margin-top: .9em; }
.asite .fl.ch.on { font-weight: 700; margin-top: .9em; margin-inline-start: 36.63%; }
.asite .fl.pa.on { margin-top: 0; margin-inline-start: 26.74%; margin-inline-end: 34.72%; }
.asite .fl.di.on { margin-top: 2px; margin-inline-start: 16.67%; margin-inline-end: 16.67%; }
.asite .fl.tr.on { font-weight: 700; margin-top: .9em; text-align: end; }
.asite .fl.di.on .tg, .asite .fl.pa.on .tg { inset-inline-start: calc(100% + 16px); }
@media (max-width: 700px) { .asite .fl .tg { display: none; } .asite .fpage { width: 80%; } }

/* ======================= VOICE DEMO: a phone listens, words land on the page ======================= */
.asite .vox { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); padding: 18px; direction: ltr; }
.asite .phone { width: clamp(96px, 22%, 150px); aspect-ratio: 9 / 17; border: 2px solid #1a1a1a; border-radius: 22px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12px 10px; position: relative; box-shadow: 0 18px 44px rgba(0,0,0,.10); }
.asite .phone::before { content: ""; position: absolute; top: 7px; width: 28%; height: 4px; border-radius: 4px; background: #d9d9d9; }
.asite .phone .mic { width: 44px; height: 44px; border-radius: 999px; background: var(--amber); display: grid; place-items: center; position: relative; }
.asite .phone .mic::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 2px solid var(--amber); opacity: 0; }
.asite .vbars { display: flex; align-items: center; gap: 3px; height: 26px; }
.asite .vbars i { width: 3px; border-radius: 3px; background: #1a1a1a; height: 20%; display: block; }
.asite .phone .say { margin: 0; font-family: var(--body); font-size: clamp(8.5px, .8vw, 11px); line-height: 1.5; color: #555; text-align: center; direction: ltr; }
.asite.lang-ar .phone .say { direction: rtl; }
.asite .vsend { flex: none; }
.asite .vpage { background: #fff; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.10); width: clamp(150px, 38%, 250px); padding: 16px 18px; font-size: clamp(9.5px, 1vw, 13px); line-height: 1.5; color: #1a1a1a; min-height: 40%; }
.asite .vpage.ar { direction: rtl; font-family: 'Noto Naskh Arabic', serif; } .asite .vpage.en { direction: ltr; font-family: 'Courier Prime', monospace; }
.asite .vl { margin-bottom: 8px; opacity: 0; } .asite .vl.sh { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .asite .vbars i { animation: as-vbar 1s ease-in-out infinite; } .asite .phone .mic::after { animation: as-ring 2.2s ease-out infinite; }
  .asite .vl.v0 { animation: as-vl0 9s infinite; } .asite .vl.v1 { animation: as-vl1 9s infinite; } .asite .vl.v2 { animation: as-vl2 9s infinite; }
}
@media (prefers-reduced-motion: reduce) { .asite .vl { opacity: 1; } .asite .vbars i { height: 60%; } }
@keyframes as-vbar { 0%, 100% { height: 16%; } 50% { height: 100%; } }
@keyframes as-ring { 0% { transform: scale(.85); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes as-vl0 { 0%, 12% { opacity: 0; transform: translateY(6px); } 20%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes as-vl1 { 0%, 34% { opacity: 0; transform: translateY(6px); } 42%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes as-vl2 { 0%, 58% { opacity: 0; transform: translateY(6px); } 66%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ============================ HOME HERO ============================ */
.asite .home-hero { position: relative; overflow-x: clip; }
.asite .home-hero .alpha { position: absolute; inset: 0; display: flex; direction: rtl; align-items: center; justify-content: center; gap: clamp(2px, 1vw, 14px); overflow: hidden; pointer-events: none; z-index: 0; }
.asite .home-hero .alpha span { font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 600; font-size: clamp(60px, 10vw, 160px); line-height: 1; color: #1a1a1a; opacity: .035; flex: none; }
.asite .home-hero .alpha .a1 { color: var(--amber); opacity: .2; } .asite .home-hero .alpha .a2 { color: var(--amber); opacity: .12; }
.asite .home-hero .glow { position: absolute; left: 50%; top: -60px; width: 900px; height: 520px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(192,122,40,0.12), transparent 65%); pointer-events: none; filter: blur(10px); }
.asite .home-hero > .wrap { position: relative; z-index: 1; }
@media (max-width: 860px) { .asite .home-hero .alpha { display: none; } }
.asite .chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.asite .chips-row span { font-size: 13.5px; color: #666; border: 1px solid #dcdcdc; background: rgba(255,255,255,.6); padding: 7px 16px; border-radius: 999px; }

/* ====================== TRAILER SCREEN (zooms out from full-bleed) ====================== */
.asite .zoom-screen .trailer { position: absolute; inset: 0; container-type: inline-size; background: #e9e9e9; display: flex; flex-direction: column; font-family: var(--body); }
.asite .zoom-screen video.trailer-video, .asite .zoom-screen img.trailer-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.asite .tr-top { display: flex; align-items: center; gap: 2cqw; padding: 1.3cqw 2cqw; background: #f3f3f3; border-bottom: 1px solid #dcdcdc; font-size: max(11px, 1.15cqw); color: #666; }
.asite .tr-dots { display: flex; gap: .6cqw; } .asite .tr-dots i { width: 1cqw; height: 1cqw; min-width: 8px; min-height: 8px; border-radius: 999px; background: #d5d5d5; display: block; }
.asite .tr-title { flex: 1; text-align: center; color: #444; font-weight: 500; }
.asite .tr-live { display: inline-flex; align-items: center; gap: .6cqw; } .asite .tr-live i { width: .8cqw; height: .8cqw; min-width: 7px; min-height: 7px; background: #c07a28; border-radius: 999px; animation: as-pulse 1.4s ease-in-out infinite; }
@keyframes as-pulse { 50% { opacity: .25; } }
.asite .tr-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.4cqw; padding: 2.6cqw 3cqw 0; min-height: 0; direction: ltr; }
.asite .tr-page { background: #fff; box-shadow: 0 1.5cqw 5cqw rgba(0,0,0,.10); border-radius: .5cqw .5cqw 0 0; padding: 4cqw 4.6cqw; overflow: hidden; font-size: max(11px, 1.55cqw); line-height: 1.55; color: #1a1a1a; position: relative; }
.asite .tr-page.ar { direction: rtl; font-family: 'Noto Naskh Arabic', serif; } .asite .tr-page.en { direction: ltr; font-family: 'Courier Prime', monospace; }
.asite .tr-page .ln { min-height: 1.55em; margin-bottom: .9em; } .asite .tr-page .sh, .asite .tr-page .ch { font-weight: 700; }
.asite .tr-page .ch { margin-inline-start: 34%; margin-bottom: .1em; } .asite .tr-page .di { margin-inline: 14%; margin-top: 0; }
.asite .tr-page .caret { display: inline-block; width: .12em; height: 1.1em; background: #c07a28; vertical-align: -.15em; animation: as-pulse 1s steps(2) infinite; }
.asite .tr-side { display: flex; flex-direction: column; gap: 1.4cqw; min-height: 0; overflow: hidden; direction: ltr; }
.asite .tr-label { font-size: max(10px, 1.1cqw); letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; font-family: 'Courier Prime', monospace; }
.asite .tr-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 1cqw; overflow: hidden; background: #d9d9d9; flex: none; }
.asite .tr-frame .scene { position: absolute; inset: 0; opacity: 0; transform: scale(1.08); filter: blur(10px); transition: opacity 1.1s ease, transform 1.4s ease, filter 1.1s ease; }
.asite .tr-frame.done .scene { opacity: 1; transform: none; filter: none; }
.asite .tr-frame .gen { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(110deg, #dedede 30%, #efefef 45%, #dedede 60%); background-size: 220% 100%; animation: as-shimmer 1.4s linear infinite; opacity: 0; transition: opacity .5s; }
.asite .tr-frame.run .gen { opacity: 1; } .asite .tr-frame.done .gen { opacity: 0; transition-delay: .3s; }
@keyframes as-shimmer { to { background-position: -120% 0; } }
.asite .tr-frame .gen b { font-weight: 500; font-size: max(10px, 1.15cqw); color: #8a8a8a; }
.asite .tr-frame .cap { position: absolute; inset-inline: 0; bottom: 0; padding: .8cqw 1.2cqw; font-size: max(10px, 1.05cqw); color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.5)); opacity: 0; transition: opacity .8s ease .5s; font-family: var(--body); }
.asite .tr-frame.done .cap { opacity: 1; }
.asite .scene.s1 { background: linear-gradient(180deg, #f6c98d 0%, #e9955a 38%, #b4583e 52%, #4a2f2b 53%, #2b1d1d 100%); }
.asite .scene.s1::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; bottom: 0; background: linear-gradient(90deg, transparent 38%, rgba(255,214,160,.35) 49%, rgba(255,214,160,.35) 51%, transparent 62%); }
.asite .scene.s2 { background: radial-gradient(circle at 50% 42%, #a8b5bd 0 14%, transparent 15%), radial-gradient(ellipse at 50% 108%, #8d9aa3 0 40%, transparent 41%), linear-gradient(180deg, #33424d, #1f2a33); }
.asite .scene.s3 { background: radial-gradient(ellipse at 30% 70%, #3a2a22 0 22%, transparent 23%), linear-gradient(180deg, #e9c590 0%, #c98f5d 55%, #7a5238 56%, #3d2a20 100%); }

/* =============== SCROLL SEQUENCE (formatting, co-writing, tashkeel, translation) =============== */
.asite .seq2-page { background: #fff; border-radius: 6px; padding: clamp(28px,3.4vw,46px) clamp(26px,3.2vw,52px); box-shadow: 0 30px 90px rgba(0,0,0,.10); min-height: 620px; position: relative; }
.asite .seq2-ln { font-size: 16px; line-height: 1; color: #1a1a1a; position: relative; }
.asite .seq2-ln .seq2-arstack { direction: rtl; font-family: 'Noto Naskh Arabic', serif; position: relative; width: 100%; }
.asite .seq2-ln .seq2-arstack .seq2-tash { position: absolute; inset: 0; opacity: 0; }
.asite .seq2-ln .seq2-en { display: none; direction: ltr; font-family: 'Courier Prime', monospace; font-size: 16px; line-height: 1; }
.asite .seq2-sh { font-weight: 700; margin-top: 32px; } .asite .seq2-ac { margin-top: 16px; }
.asite .seq2-ch { font-weight: 700; margin-top: 16px; margin-inline-start: 36.63%; }
.asite .seq2-pa { margin-top: 0; margin-inline-start: 26.74%; margin-inline-end: 34.72%; }
.asite .seq2-di { margin-top: 4px; margin-inline-start: 16.67%; margin-inline-end: 16.67%; }
.asite .seq2-tr { margin-top: 16px; font-weight: 700; text-align: end; }
.asite .seq2-bubble { position: absolute; inset-inline-end: -58px; top: 0; width: 154px; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.asite .seq2-bubble .card { background: #fff; border: 1px solid #e2e2e2; border-radius: 12px; padding: 12px 14px; box-shadow: 0 16px 34px -22px rgba(0,0,0,.35); direction: rtl; position: relative; font-family: 'Space Grotesk', sans-serif; }
.asite .seq2-bubble .card::after { content: ""; position: absolute; top: 16px; inset-inline-end: -7px; width: 14px; height: 14px; background: #fff; border-inline-end: 1px solid #e2e2e2; border-block-end: 1px solid #e2e2e2; transform: rotate(-45deg); }
.asite .seq2-bubble .who { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.asite .seq2-bubble .av { width: 22px; height: 22px; border-radius: 999px; background: #c07a28; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.asite .seq2-bubble .name { font-size: 12px; font-weight: 700; color: #1a1a1a; }
.asite .seq2-bubble .msg { font-size: 12.5px; line-height: 1.6; color: #5c5c5c; }
.asite .seq2-bubble .live { width: 6px; height: 6px; border-radius: 999px; background: #4ade80; display: inline-block; margin-inline-end: 5px; }
.asite .seq-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.asite .seq-left { position: sticky; top: 96px; }
.asite .seq-step { min-height: 74vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .5s ease; }
.asite .seq-step h3 { font-weight: 600; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.015em; margin-bottom: 16px; }
.asite.lang-ar .seq-step h3 { letter-spacing: 0; line-height: 1.5; }
.asite .seq-step p { font-size: 17px; line-height: 1.75; color: #5c5c5c; max-width: 420px; text-wrap: pretty; }
.asite .seq-step .n { font-family: 'Courier Prime', monospace; font-size: 11.5px; letter-spacing: .12em; color: var(--amber); margin-bottom: 14px; }
@media (max-width: 980px) { .asite .seq2-bubble { position: static; opacity: 1 !important; width: auto; max-width: 320px; margin: 14px auto 0; } .asite .seq2-bubble .card::after { display: none; } }
@media (max-width: 860px) {
  .asite .seq-grid { grid-template-columns: 1fr; gap: 0; }
  .asite .seq-left { top: 72px; z-index: 2; background: transparent; }
  .asite .seq2-page { zoom: .6; min-height: 0; }
  .asite .seq-step { min-height: 62vh; }
}

/* ============================ GUT CHECK ============================ */
.asite .gut { border: 1px solid #e2e2e2; border-radius: 20px; background: linear-gradient(160deg, #f4f4f4, #ececec); padding: clamp(28px, 4vw, 60px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .asite .gut { grid-template-columns: 1fr; } }
.asite .gut .kicker { color: #1a6e4d; }
.asite .ring-wrap { display: flex; align-items: center; gap: 26px; margin-bottom: 30px; }
.asite .ring { position: relative; width: 132px; height: 132px; flex: none; }
.asite .ring svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.asite .ring .score { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; font-size: 34px; letter-spacing: -0.02em; }
.asite .metric { margin-bottom: 16px; } .asite .metric .top { display: flex; justify-content: space-between; font-size: 14px; color: #4a4a4a; margin-bottom: 8px; }
.asite .metric .bar { height: 6px; border-radius: 999px; background: #e8e8e8; overflow: hidden; } .asite .metric .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: #1a6e4d; transition: width 1.4s cubic-bezier(.16,1,.3,1); }
.asite .eg-tag { display: inline-block; font-size: 12px; color: #777; border: 1px solid #d8d8d8; border-radius: 999px; padding: 4px 12px; background: rgba(255,255,255,.6); }

.asite.lang-ar .tr-label { letter-spacing: 0; text-transform: none; font-family: var(--body); }

.asite .fvis:has(.revpage) { padding: 10px; }

/* Phones: keep the screen 16:9 so a 16:9 trailer is not cropped to its middle. */
@media (max-width: 860px) { .asite .zoom-screen { height: auto; aspect-ratio: 16 / 9; } }

.asite #features { scroll-margin-top: 64px; }

/* Rows: the picture always gets the wide column, left or right (it used to be narrower on flipped rows). */
.asite .frow.flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
@media (max-width: 900px) { .asite .frow.flip { grid-template-columns: 1fr; } }
.asite .fvis { overflow: hidden; }
.asite .fvis.io { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vw, 26px); direction: ltr; padding: 16px; }
.asite .io-col { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.asite .io-col .fmt { font-size: clamp(12px, 1.4vw, 17px); padding: 10px 16px; text-align: center; }
.asite .io-cap { font-family: var(--body); font-size: 12px; color: #8a8a8a; text-align: center; }
.asite .io-core { font-family: 'Space Grotesk', sans-serif; font-size: clamp(15px, 2vw, 22px); padding: 18px clamp(16px, 2.4vw, 30px); }
.asite .io-arr { flex: none; }

/* ---- demos fill their window (no cropping, no stray white space) ---- */
.asite .fwin > .fvis { position: absolute; inset: 0; aspect-ratio: auto !important; }
.asite .fvis.col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 14px; }
.asite .fvis.col .fpage { margin: 0; }
.asite .fpage.tash { width: min(78%, 520px); font-size: clamp(11px, 1.22vw, 15px); line-height: 1.65; padding: clamp(14px, 2vw, 24px) clamp(18px, 2.4vw, 32px); }
.asite .fpage.tash .fl { color: #1a1a1a; margin-top: 2px; }
.asite .fpage.rv { width: min(78%, 520px); line-height: 1.5; padding-inline: clamp(18px, 2.4vw, 32px); }
.asite .fpage.rv .fl.on { color: #1a1a1a; }
.asite .fpage ins, .asite .fpage del { text-decoration: none; background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; background-image: linear-gradient(currentColor, currentColor); }
.asite .fpage del { background-position: 0 55%; opacity: .85; }
.asite .fpage .b { color: #2563eb; } .asite .fpage .p { color: #db2777; } .asite .fpage .y { color: #b7791f; }
.asite .fvis.col .revleg { width: min(78%, 520px); margin: 0; }
.asite .star { position: absolute; left: -24px; top: 0; font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 1.2em; opacity: 0; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .asite .fpage .m1 { animation: as-mk1 12s infinite; } .asite .fpage .m2 { animation: as-mk2 12s infinite; } .asite .fpage .m3 { animation: as-mk3 12s infinite; }
  .asite .star.s1 { animation: as-st1 12s infinite; } .asite .star.s2 { animation: as-st2 12s infinite; } .asite .star.s3 { animation: as-st3 12s infinite; }
  .asite .revleg .lg1 { animation: as-lg1 12s infinite; } .asite .revleg .lg2 { animation: as-lg2 12s infinite; } .asite .revleg .lg3 { animation: as-lg3 12s infinite; }
  .asite .revleg .acts { animation: as-acts 12s infinite; }
}
@media (prefers-reduced-motion: reduce) { .asite .star { opacity: 1; } .asite .revleg .acts { opacity: 1; } }
.asite .star.b { color: #2563eb; } .asite .star.p { color: #db2777; } .asite .star.y { color: #b7791f; }
@keyframes as-st1 { 0%, 6% { opacity: 0; } 16%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes as-st2 { 0%, 22% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes as-st3 { 0%, 40% { opacity: 0; } 52%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ---- voice: phone listens, an empty portrait page fills, then formats itself ---- */
.asite .fvis.vox { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 34px); padding: 4% 5%; direction: ltr; }
.asite .phone { height: 82%; aspect-ratio: 9 / 17; width: auto; max-width: 26%; border: 2px solid #1a1a1a; border-radius: 24px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16%; position: relative; box-shadow: 0 18px 44px rgba(0,0,0,.10); padding: 0; }
.asite .phone::before { content: ""; position: absolute; top: 3.5%; width: 26%; height: 1.6%; border-radius: 4px; background: #d9d9d9; }
.asite .phone .mic { width: 46%; aspect-ratio: 1; border-radius: 999px; background: var(--amber); display: grid; place-items: center; position: relative; }
.asite .phone .mic svg { width: 48%; height: 48%; }
.asite .phone .mic::after { content: ""; position: absolute; inset: -12%; border-radius: 999px; border: 2px solid var(--amber); opacity: 0; }
.asite .vbars { display: flex; align-items: center; justify-content: center; gap: 4%; height: 12%; width: 72%; }
.asite .vbars i { flex: 1; max-width: 6px; border-radius: 3px; background: #1a1a1a; height: 20%; display: block; }
.asite .vpg { height: 88%; aspect-ratio: 0.74; background: #fff; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.10); padding: 5% 6%; font-size: clamp(9px, 1.05vw, 13px); line-height: 1.5; overflow: hidden; }
.asite .vpg.ar { direction: rtl; font-family: 'Noto Naskh Arabic', serif; } .asite .vpg.en { direction: ltr; font-family: 'Courier Prime', monospace; }
.asite .vpg .fl { color: #1a1a1a; margin-top: 3px; } .asite .vpg .fl .tg { display: none; }
.asite .vw { opacity: 0; transition: opacity .25s; } .asite .vw.in { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .asite .vbars i { animation: as-vbar 1s ease-in-out infinite; } .asite .phone .mic::after { animation: as-ring 2.2s ease-out infinite; } }
@media (prefers-reduced-motion: reduce) { .asite .vw { opacity: 1; } .asite .vbars i { height: 60%; } }

/* ---- import/export: paste chip + arrows that move ---- */
.asite .fmt.paste { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-color: rgba(192,122,40,.5); color: var(--amber); background: var(--amber-soft); font-family: var(--body); }
.asite .fmt.paste em { font-style: normal; font-size: clamp(11px, 1.2vw, 14px); }
@media (prefers-reduced-motion: no-preference) { .asite .io-arr { animation: as-nudge 1.8s ease-in-out infinite; } }
@keyframes as-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.asite .fpage.rv .fl.di.on { margin-inline: 0; }

/* ===== Revision mode, as in the app: a thin banner in the draft color, new text colored, deletions struck through ===== */
.asite .fvis.revwrap { justify-content: flex-start; align-items: stretch; padding: 0 0 14px; gap: 0; }
.asite .rvbars { position: relative; height: 34px; flex: none; }
.asite .rvbar { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-family: var(--body); font-size: 11.5px; color: #333; border-bottom: 1px solid color-mix(in srgb, var(--dc) 25%, transparent); background: color-mix(in srgb, var(--dc) 9%, #fff); opacity: 0; white-space: nowrap; overflow: hidden; }
.asite .rvbar .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--dc); flex: none; }
.asite .rvbar b { font-weight: 700; } .asite .rvbar em { font-style: normal; color: #888; overflow: hidden; text-overflow: ellipsis; }
.asite .rvbar .rvb { margin-inline-start: auto; display: inline-flex; gap: 6px; flex: none; }
.asite .rvbar u { text-decoration: none; font-size: 10.5px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--dc); color: var(--dc); }
.asite .rvbar u.g { border-color: #c9c9c9; color: #777; }
.asite .rvbar.c1 { --dc: #4a7fc1; opacity: 1; } .asite .rvbar.c2 { --dc: #e07c9a; } .asite .rvbar.c3 { --dc: #c8a820; }
.asite .fvis.revwrap .fpage.rv { margin: auto; width: min(80%, 520px); }
.asite .fpage.rv .b { color: #4a7fc1; } .asite .fpage.rv .p { color: #e07c9a; } .asite .fpage.rv .y { color: #c8a820; }
.asite .fpage.rv ins { background: none; }
.asite .fpage.rv del { background-size: 100% 1.5px; opacity: .6; }
@media (max-width: 700px) { .asite .rvbar em { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .asite .fpage.rv .i1 { animation: as-ri1 12s infinite; } .asite .fpage.rv .i2 { animation: as-ri2 12s infinite; } .asite .fpage.rv .i3 { animation: as-ri3 12s infinite; }
  .asite .fpage.rv .d2 { animation: as-mk2 12s infinite; } .asite .fpage.rv .d3 { animation: as-mk3 12s infinite; }
  .asite .rvbar.c1 { animation: as-bn1 12s infinite; } .asite .rvbar.c2 { animation: as-bn2 12s infinite; } .asite .rvbar.c3 { animation: as-bn3 12s infinite; }
}
@media (prefers-reduced-motion: reduce) { .asite .rvbar.c2, .asite .rvbar.c3 { display: none; } }
@keyframes as-ri1 { 0%, 6% { opacity: 0; } 14%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes as-ri2 { 0%, 34% { opacity: 0; } 42%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes as-ri3 { 0%, 62% { opacity: 0; } 70%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes as-bn1 { 0%, 30% { opacity: 1; } 33%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes as-bn2 { 0%, 30% { opacity: 0; } 33%, 60% { opacity: 1; } 63%, 100% { opacity: 0; } }
@keyframes as-bn3 { 0%, 60% { opacity: 0; } 63%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ===== Voice, as in the app: coral mic with a pulsing ring and a timer; the lines arrive after, then format ===== */
.asite .phone .mic { background: #e07060; }
.asite .phone .mic::after { border-color: #e07060; }
.asite .phone .vtimer { font-family: 'Courier Prime', monospace; font-size: clamp(9px, 1vw, 12px); color: #777; }
.asite .phone { gap: 9%; }
.asite .vln { opacity: 0; transition: opacity .35s, margin .55s cubic-bezier(.16,1,.3,1), font-weight .35s; }
.asite .vln.in { opacity: 1; }

/* ===== Voice (v2): no blank page. What is said turns into the right element. ===== */
.asite .vcard { background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.10); padding: clamp(14px, 2vw, 24px) clamp(16px, 2.2vw, 28px); width: min(52%, 330px); display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; font-size: clamp(12px, 1.3vw, 15.5px); line-height: 1.55; }
.asite .vcard.show { opacity: 1; transform: none; }
.asite .vcard.ar { direction: rtl; font-family: 'Noto Naskh Arabic', serif; } .asite .vcard.en { direction: ltr; font-family: 'Courier Prime', monospace; }
.asite .vb { display: grid; } .asite .vsay, .asite .vres { grid-area: 1 / 1; transition: opacity .5s; }
.asite .vsay { color: #8a8a8a; opacity: 0; font-family: var(--body); font-size: .92em; } .asite .vsay::before { content: "\201C"; } .asite .vsay::after { content: "\201D"; }
.asite .vres { opacity: 0; }
.asite .vb.said .vsay { opacity: 1; } .asite .vb.res .vsay { opacity: 0; } .asite .vb.res .vres { opacity: 1; }
.asite .vres .fl { color: #1a1a1a; } .asite .vres .fl.ch.on { margin-inline-start: 0; } .asite .vres .fl.di.on { margin-inline: 0; margin-top: 2px; } .asite .vres .fl.sh.on { margin-top: 0; }
.asite .vres .lab { display: inline-block; font-family: var(--body); font-size: 10px; font-weight: 500; color: var(--amber); border: 1px solid rgba(192,122,40,.4); background: var(--amber-soft); padding: 1px 8px; border-radius: 999px; margin-inline-end: 8px; vertical-align: 2px; }
.asite .vres .fl.di .lab, .asite .vres .fl.ch .lab { margin-inline-end: 8px; }

/* ===== Hero alphabet: a crisp single line under the buttons (no longer faded behind the headline) ===== */
.asite .home-hero .alpha { display: none; }
.asite .alpha-strip { display: flex; flex-wrap: wrap; justify-content: center; direction: rtl; gap: clamp(8px, 1.5vw, 20px); margin: 38px auto 0; max-width: 980px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 500; font-size: clamp(20px, 2.3vw, 28px); line-height: 1; color: #c3c3c3; user-select: none; }
.asite .alpha-strip span { transition: color .25s; } .asite .alpha-strip span:hover { color: var(--amber); }
.asite .alpha-strip .a1, .asite .alpha-strip .a2 { color: var(--amber); }

.asite .alpha-strip { flex-wrap: nowrap; gap: clamp(5px, 1vw, 14px); font-size: clamp(15px, 1.7vw, 22px); font-weight: 400; color: #cdcdcd; max-width: 100%; margin-top: 34px; }
@media (max-width: 760px) { .asite .alpha-strip { display: none; } }
.asite .vres .lab { display: table; margin: 0 0 3px; }
.asite .vres .fl + .fl { margin-top: 8px; }

/* No dark hairline around the trailer: the card ground matches the video (#f4f4f4) and the video is a hair oversized so no edge pixel is ever uncovered. */
.asite .zoom-screen video.trailer-video, .asite .zoom-screen img.trailer-poster { transform: scale(1.006); }

/* ======================= ABOUT: how the standard was reached ======================= */
.asite .stepgrid { align-items: stretch; }
.asite .step { display: flex; flex-direction: column; gap: 12px; }
.asite .step h3 { font-size: 19px; font-weight: 600; margin: 0; }
.asite .stepn { width: 30px; height: 30px; border-radius: 999px; background: var(--amber-soft); border: 1px solid rgba(192,122,40,.4); color: var(--amber); display: grid; place-items: center; font-size: 14px; font-weight: 500; font-family: var(--body); }
.asite .stdgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin: clamp(40px, 5vw, 64px) auto 0; max-width: 940px; }
@media (max-width: 700px) { .asite .stdgrid { grid-template-columns: 1fr; } }
.asite .stdfig { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.asite .stdcap1 { font-size: 14px; font-weight: 500; color: #555; text-align: center; }
.asite .stdfig.good .stdcap1 { color: var(--amber); }
.asite .stdfig figcaption { font-size: 13.5px; color: #8a8a8a; text-align: center; }
.asite .stdpage { background: #fff; border-radius: 6px; box-shadow: 0 24px 70px rgba(0,0,0,.10); padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 32px); direction: rtl; font-family: 'Noto Naskh Arabic', serif; font-size: clamp(12.5px, 1.25vw, 15px); color: #1a1a1a; min-height: 300px; border: 1px solid #ececec; }
.asite .stdfig.good .stdpage { border-color: rgba(192,122,40,.45); box-shadow: 0 24px 70px rgba(192,122,40,.16); }
.asite .stdpage .ln.sh, .asite .stdpage .ln.ch { font-weight: 700; }
.asite .stdpage.bad { line-height: 1.1; }
.asite .stdpage.bad .ln { margin-bottom: 3px; }
.asite .stdpage.bad .ln.ch { margin-inline-start: 0; }
.asite .stdpage.bad .ln.di { margin-inline-start: 22%; margin-inline-end: 0; border-inline-start: 1px dashed rgba(192,122,40,.7); padding-inline-start: 8px; }
.asite .stdpage.good { line-height: 1.75; }
.asite .stdpage.good .ln { margin-bottom: 8px; }
.asite .stdpage.good .ln.ch { margin-inline-start: 36.6%; margin-bottom: 0; }
.asite .stdpage.good .ln.di { margin-inline: 16.7%; margin-top: 0; border-inline: 1px dashed rgba(192,122,40,.7); padding-inline: 8px; }
.asite .slidercard { max-width: 940px; margin: clamp(28px, 4vw, 48px) auto 0; display: flex; flex-direction: column; gap: 16px; }
.asite .sllabel { font-size: 15px; font-weight: 500; }
.asite .slidercard input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--amber) var(--pct, 50%), #e0e0e0 var(--pct, 50%)); outline: none; cursor: pointer; }
.asite.lang-ar .slidercard input[type=range] { background: linear-gradient(270deg, var(--amber) var(--pct, 50%), #e0e0e0 var(--pct, 50%)); }
.asite .slidercard input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 2px solid var(--amber); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.asite .slidercard input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: #fff; border: 2px solid var(--amber); }
.asite .slout { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.5; color: #444; }
.asite .slout b { font-weight: 600; color: var(--ink); } .asite .slout span { color: #888; font-size: .8em; }

/* ======================= ABOUT: the name. Two letters lit, the rest fading away, crisp (no blur) ======================= */
.asite .alpha-row { display: flex; justify-content: center; direction: rtl; gap: clamp(2px, 1vw, 12px); margin-top: 26px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-weight: 500; font-size: clamp(26px, 5vw, 64px); line-height: 1.2; color: #1a1a1a; overflow: hidden; }
.asite .alpha-row span { flex: none; }
.asite .alpha-row span.hi { color: var(--amber); font-weight: 600; }
@media (max-width: 700px) { .asite .alpha-row span:nth-child(n+16) { display: none; } }

.asite .chipset { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.asite .chipset span { font-size: 13px; padding: 5px 12px; border-radius: 999px; border: 1px solid #dcdcdc; background: #fafafa; color: #555; }
.asite .stdpage .ln.pa { font-weight: 400; }
.asite .stdpage.bad .ln.pa { margin-inline-start: 0; }
.asite .stdpage.good .ln.pa { margin-inline-start: 26.7%; margin-inline-end: 34.7%; margin-top: 0; }
/* the name: always start from the first letter (right edge), the fade runs off to the left */
.asite .alpha-row { justify-content: flex-start; font-size: clamp(22px, 3.6vw, 46px); gap: clamp(2px, .8vw, 10px); max-width: 1080px; margin-inline: auto; }

/* ===== Voice (v3): screen visible from the start; a true dissolve (blur + fade both ways), no hard swap ===== */
.asite .vcard { opacity: 1 !important; transform: none !important; width: min(58%, 380px); }
.asite .vsay, .asite .vres { transition: opacity 1.2s ease, filter 1.2s ease, transform 1.2s ease; }
.asite .vsay { filter: blur(0); }
.asite .vres { filter: blur(6px); transform: scale(.985); }
.asite .vb.res .vsay { opacity: 0; filter: blur(6px); transform: scale(1.015); }
.asite .vb.res .vres { opacity: 1; filter: blur(0); transform: none; }
.asite .vb { min-height: 2.6em; }

/* ======================= ABOUT v3: chapters with real-metric sample pages ======================= */
.asite .chapter { padding-block: clamp(60px, 8vw, 110px); }
.asite .chvis { display: flex; flex-direction: column; align-items: stretch; }
.asite .rpfig { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: stretch; width: 100%; max-width: 520px; margin-inline: auto; }
.asite .stdcap1.gold { color: var(--amber); }
/* the editor's real page: 16px Noto Naskh, line-height 1, text box 576px (816 page, 144 binding, 96 outer) */
.asite .rp { --lh: 1; --gap: 16px; --dm: 16.67%; background: #fff; border-radius: 6px; padding: clamp(24px, 3vw, 38px) clamp(24px, 3.2vw, 44px); box-shadow: 0 30px 90px rgba(0,0,0,.10); direction: rtl; font-family: 'Noto Naskh Arabic', serif; font-size: clamp(13px, 1.25vw, 16px); line-height: var(--lh); color: #1a1a1a; border: 1px solid #ececec; transition: box-shadow .3s; }
.asite .rpin { position: relative; }
.asite .rp .l { position: relative; transition: margin .45s cubic-bezier(.16,1,.3,1), line-height .45s; }
.asite .rp .l.sh { font-weight: 700; }
.asite .rp .l.ac { margin-top: var(--gap); }
.asite .rp .l.sh + .l.ac { margin-top: var(--gap); }
.asite .rp .l.ch { font-weight: 700; margin-top: var(--gap); margin-inline-start: 36.63%; }
.asite .rp .l.pa { margin-inline-start: 26.74%; margin-inline-end: 34.72%; }
.asite .rp .l.di { margin-top: 4px; margin-inline: var(--dm); }
.asite .rp .l.tr { margin-top: var(--gap); font-weight: 700; text-align: end; }
.asite .rp .gd { position: absolute; top: -6px; bottom: -6px; width: 0; border-inline-start: 1px dashed rgba(192,122,40,.55); pointer-events: none; }
.asite .rp.good { border-color: rgba(192,122,40,.5); box-shadow: 0 30px 90px rgba(192,122,40,.16); }
/* a layout built for another language: English physical margins (dialogue 96/144, character from the left), tight */
.asite .rp.bad .l.ch { margin-inline-start: 0; margin-left: 36.63%; }
.asite .rp.bad .l.di { margin-inline: 0; margin-left: 16.67%; margin-right: 25%; }
.asite .rp.bad .l.pa { margin-inline: 0; margin-left: 26.74%; margin-right: 34.72%; }
.asite .rp.bad .l.ac, .asite .rp.bad .l.ch, .asite .rp.bad .l.tr { margin-top: 5px; }
.asite .rp.bad { line-height: 1; }
/* chapter 2: three versions of the same page */
.asite .rp.v1 { --lh: .95; --gap: 2px; --dm: 3%; }
.asite .rp.v2 { --lh: 1.9; --gap: 30px; --dm: 28%; }
.asite .rp.v3 { --lh: 1; --gap: 16px; --dm: 16.67%; }
.asite .rp.v1 .l.ch, .asite .rp.v1 .l.pa { margin-inline-start: 12%; margin-inline-end: 3%; }
.asite .rp.v2 .l.ch { margin-inline-start: 44%; } .asite .rp.v2 .l.pa { margin-inline-start: 34%; margin-inline-end: 38%; }
.asite .seg { display: inline-flex; align-self: center; padding: 4px; border: 1px solid #d6d6d6; border-radius: 999px; background: #fff; }
.asite .seg button { font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 18px; border-radius: 999px; border: 0; background: transparent; color: #555; cursor: pointer; transition: background .25s, color .25s; }
.asite .seg button.on { background: var(--ink); color: #fff; }
.asite .segnote { text-align: center; font-size: 14px; color: #666; margin: 0; min-height: 1.5em; }
/* numbered pins on the sample pages + their legend */
.asite .pin { position: absolute; left: -34px; top: 0; width: 20px; height: 20px; border-radius: 999px; background: var(--amber); color: #fff; font-family: var(--body); font-size: 11px; font-weight: 600; display: grid; place-items: center; line-height: 1; }
.asite .pinlist { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.asite .pinlist li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: #444; }
.asite .pinlist b { width: 22px; height: 22px; border-radius: 999px; background: var(--amber); color: #fff; font-size: 11.5px; font-weight: 600; display: grid; place-items: center; flex: none; }
/* chapter 4: every page is a minute */
.asite .pgrid { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; margin: 8px 0 6px; direction: rtl; }
.asite .pgrid i { aspect-ratio: .74; border-radius: 1.5px; background: #e6e6e6; transition: background .15s; display: block; }
.asite .pgrid i.on { background: var(--amber); }
.asite .slidercard { max-width: none; margin: 0; }
/* the name */
.asite .alpha-row.mirage { position: relative; max-width: none; width: 100%; margin: 24px 0 0; padding-inline-start: clamp(20px, 8vw, 120px); justify-content: flex-start; flex-wrap: nowrap; overflow: hidden; font-size: clamp(34px, 6.4vw, 92px); gap: clamp(4px, 1.2vw, 18px); }
.asite .alpha-row.mirage span { flex: none; color: #1a1a1a; }
.asite .alpha-row.mirage span.hi { color: var(--amber); font-weight: 600; }
.asite .whycard { max-width: 940px; margin: 0 auto; text-align: center; padding: clamp(44px, 6vw, 84px) clamp(22px, 5vw, 70px); border-radius: 26px; background: linear-gradient(150deg, #fdf3e7, #f1f1f1); border: 1px solid #e6dccd; position: relative; overflow: hidden; }
.asite .whycard > * { position: relative; z-index: 1; }
.asite .whybig { font-weight: 600; font-size: clamp(32px, 5.2vw, 64px); line-height: 1.25; letter-spacing: -0.02em; margin: 14px 0 26px; text-wrap: balance; }
.asite.lang-ar .whybig { letter-spacing: 0; line-height: 1.5; }
.asite .whyp { font-size: clamp(18px, 2vw, 23px); line-height: 1.9; color: #333; max-width: 640px; margin: 0 auto 10px; text-wrap: balance; }
.asite .whyp.dim { color: #666; }
.asite mark { background: none; color: var(--amber); font-weight: 600; box-shadow: inset 0 -0.38em 0 rgba(192,122,40,.2); padding-inline: .08em; }

.asite .pin { width: 18px; height: 18px; font-size: 10.5px; left: -32px; }

/* ======================= ABOUT v4: three real pages (816 x 1056 scaled with cqw) ======================= */
.asite .pgbox { container-type: inline-size; position: relative; width: 100%; }
.asite .pg { position: relative; aspect-ratio: 816 / 1056; overflow: hidden; background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 30px 90px rgba(0,0,0,.12); direction: rtl; font-size: 1.96cqw; line-height: 1; color: #1a1a1a; padding: 11.76cqw; }
.asite .pg .l { margin: 0; }
.asite .pg .l:first-of-type { margin-top: 0 !important; }
.asite .pg .l.ac { margin-top: 1em; }
.asite .pg .l.sh { font-weight: 700; margin-top: 2em; }
.asite .pg .l.ch { font-weight: 700; margin-top: 1em; margin-inline-start: 36.63%; }
.asite .pg .l.pa { margin-inline-start: 26.74%; margin-inline-end: 34.72%; }
.asite .pg .l.di { margin-top: .25em; margin-inline: 16.67%; }
.asite .pg .l.tr { margin-top: 1em; font-weight: 700; text-align: end; }
.asite .pn { position: absolute; top: 5.5cqw; font-size: 1.96cqw; font-family: 'Courier Prime', 'Courier New', monospace; color: #444; }
/* chapter 3: Alifba. Binding on the RIGHT (wide margin 144px = 17.65cqw), outer margin 96px on the left, page number top-left */
.asite .pg.good { font-family: 'Noto Naskh Arabic', serif; padding-right: 17.65cqw; padding-left: 11.76cqw; border-color: rgba(192,122,40,.5); box-shadow: 0 30px 90px rgba(192,122,40,.18); }
.asite .pn.pnl { left: 11.76cqw; }
/* chapter 2: the layout built for English. Binding on the LEFT, English physical margins (character from the left, dialogue 96 / 144) */
.asite .pg.fd { font-family: 'Courier Prime', 'Traditional Arabic', 'Geeza Pro', 'Courier New', monospace; padding-left: 17.65cqw; padding-right: 11.76cqw; }
.asite .pg.fd .l.ch { margin-inline: 0; margin-left: 36.63%; margin-right: 0; }
.asite .pg.fd .l.di { margin-inline: 0; margin-left: 16.67%; margin-right: 25%; }
.asite .pg.fd .l.pa { margin-inline: 0; margin-left: 26.74%; margin-right: 34.72%; }
.asite .pn.pnr { right: 11.76cqw; }
/* chapter 1: an ordinary document. One style, one placement, a plain font */
.asite .pg.word { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 2.05cqw; line-height: 1.55; padding: 11.76cqw; }
.asite .pg.word p { margin: 0 0 .7em; text-align: start; }
.asite .wordbar { display: flex; align-items: center; gap: 6px; background: #eceef2; border: 1px solid #dcdfe5; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 9px 14px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b7280; }
.asite .wordbar i { width: 9px; height: 9px; border-radius: 999px; background: #c9ced6; display: block; }
.asite .wordbar span { margin-inline-start: 10px; }
.asite .pgbox:has(.wordbar) .pg.word { border-radius: 0 0 4px 4px; border-top: 0; }
/* three-hole punch: two brass brads (top and bottom), the middle hole stays empty */
.asite .hole { position: absolute; width: 3.7cqw; height: 3.7cqw; border-radius: 999px; transform: translateY(-50%); display: block; }
.asite .hole.left { left: 4.6cqw; } .asite .hole.right { right: 4.6cqw; }
.asite .hole.empty { background: #ededed; box-shadow: inset 0 .35cqw .7cqw rgba(0,0,0,.28), 0 0 0 .25cqw #dedede; }
.asite .hole.brad { background: radial-gradient(circle at 34% 30%, #fbefc6 0, #d8b45a 42%, #9a7424 100%); box-shadow: 0 .4cqw .8cqw rgba(0,0,0,.35), 0 0 0 .3cqw rgba(138,106,34,.35); }
.asite .hole.brad::after { content: ""; position: absolute; inset: 28%; border-radius: 999px; background: radial-gradient(circle at 40% 35%, #fff6d8, #c9a24a); opacity: .9; }
.asite .tag { position: absolute; transform: translateY(-50%); font-family: var(--body); font-size: clamp(10px, 1.5cqw, 12px); color: var(--amber); background: rgba(255,255,255,.92); border: 1px solid rgba(192,122,40,.4); padding: 2px 9px; border-radius: 999px; white-space: nowrap; z-index: 2; }
.asite .tag.right { right: 10.5cqw; } .asite .tag.left { left: 10.5cqw; }
.asite .alpha-row { justify-content: center; max-width: 1100px; overflow: visible; }

.asite .pg.word { font-size: 2.5cqw; }
.asite .pg.fd { line-height: 1.22; }
.asite .bindleg { display: flex; justify-content: center; gap: 26px; margin-top: 4px; font-size: 13.5px; color: #666; }
.asite .bindleg span { display: inline-flex; align-items: center; gap: 8px; }
.asite .hsm { width: 14px; height: 14px; border-radius: 999px; display: inline-block; }
.asite .hsm.brad { background: radial-gradient(circle at 34% 30%, #fbefc6 0, #d8b45a 42%, #9a7424 100%); box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.asite .hsm.empty { background: #ededed; box-shadow: inset 0 1px 2px rgba(0,0,0,.3), 0 0 0 1px #d6d6d6; }

/* chapter 2: the font Alifba used before (Courier New, a typewriter-style face that has Arabic letters; Latin was Courier Prime) */
.asite .pg.fd { font-family: 'Courier New', 'Courier Prime', Courier, monospace; line-height: 1.2; }

/* chapter 1: an ordinary document. Text starts higher and hugs the right edge; nothing is cropped */
.asite .pg.word { font-size: 2.3cqw; line-height: 1.5; padding: 5cqw 5.5cqw 5cqw 8cqw; }
.asite .pg.word p { margin: 0 0 .55em; }

.asite .btn.soon { background: #e6e6e6; color: #888; cursor: default; pointer-events: none; }

/* ---- added by the sync ---- */
.asite { min-height: 100vh; }
/* The app's globals.css puts overflow-x:hidden on html and body. That turns body into a scroll container and silently stops
   position:sticky (the header, the zoom card). overflow-x:clip hides sideways overflow without doing that. Only while a site page is shown. */
html:has(.asite), body:has(.asite) { overflow-x: clip; }
/* The pages were designed against plain browser defaults. Inside the wrapper, undo the app's resets and Tailwind's preflight so they look
   exactly as they did offline. Specificity 0 (:where), so every rule in this stylesheet still wins. SVG is left alone: its attributes are styling. */
:where(.asite *:not(svg, svg *)) { all: revert; }