/* taski.kids marketing site — ONE stylesheet for every page (W-D3).
   Source: website-handoff/design/site.css (tokens.json values). Arabic display sizes,
   weights and line-heights are derived at build time by site/lib/css.mjs — do not
   hand-write [dir="rtl"] size overrides here. */
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: #F7F6FC; }
  .site {
    min-height: 100vh;
    --ground: #F7F6FC; --haze: #E9E4FF; --surface: #FFFFFF; --ink: #23213A; --muted: #6F6C86; --faint: #B7B4C8;
    --line: #ECE9F5; --track: #EEECF6; --primary: #6E63F2; --primary-ink: #5146D9; --primary-tint: #ECE9FF;
    --star: #FFB020; --star-tint: #FFF3D9; --star-ink: #A86A00; --streak: #FF6B3D; --streak-tint: #FFEAE1;
    --done: #20B486; --done-tint: #DDF5EC; --done-ink: #17805F; --pink: #E0457B; --pink-tint: #FDE2EE;
    --blue: #3D7BEA; --blue-tint: #E3EEFF; --shadow: 0 1px 2px rgba(35,33,58,.04), 0 12px 32px -18px rgba(35,33,58,.18);
    --display: "Mouse Memoirs", "Nunito", system-ui, sans-serif;
    container: site / inline-size;
    background: var(--ground); color: var(--ink); font-family: "Nunito", ui-rounded, system-ui, sans-serif; font-size: 17px; line-height: 1.6;
  }
  .site * { box-sizing: border-box; }
  .site img { max-width: 100%; height: auto; }
  .site a { color: inherit; }
  .site h1, .site h2, .site h3 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-wrap: balance; margin: 0; line-height: .95; }
  .site[dir="rtl"] h1, .site[dir="rtl"] h2, .site[dir="rtl"] h3 { line-height: 1.25; font-weight: 700; }
  .site p { margin: 0; }
  .site .ic { display: inline-block; flex: none; vertical-align: middle; }
  .wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: 20px; }
  @container site (min-width: 760px) { .wrap { padding-inline: 40px; } }

  /* Header */
  .hdr { position: sticky; top: 0; z-index: 20; background: rgba(247,246,252,.86); -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%); border-bottom: 1px solid var(--line); }
  .hdr .wrap { display: flex; align-items: center; gap: 10px; height: 64px; }
  .logo { display: flex; align-items: center; } .logo img { height: 26px; width: auto; display: block; }
  .nav { display: flex; gap: 2px; margin-inline-start: 18px; }
  .nav a { text-decoration: none; font-weight: 800; font-size: 15px; padding: 8px 12px; border-radius: 999px; color: var(--muted); }
  .nav a[aria-current="page"], .nav a:hover { color: var(--ink); background: var(--track); }
  .nav .cmp { display: none; }
  @container site (min-width: 600px) { .nav .cmp { display: inline-block; } }
  .hdr .grow { flex: 1; }
  .lang { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14px; text-decoration: none; }
  .lang .ic { color: var(--muted); }
  .cta { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--primary); color: #fff !important; font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
  .cta .w { display: none; } @container site (min-width: 420px) { .cta .w { display: inline; } }
  .hdr .lang .t { display: none; } @container site (min-width: 520px) { .hdr .lang .t { display: inline; } }
  .nav-blog { display: none; } @container site (min-width: 380px) { .nav-blog { display: inline-block; } }

  /* Buttons + badges */
  .badges { display: flex; flex-wrap: wrap; gap: 10px; }
  .store { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 14px; border-radius: 14px; background: #15131F; color: #fff !important; text-decoration: none; }
  .store .ic { color: #fff; }
  .store span { display: grid; line-height: 1.05; }
  .store small { font-size: 11px; font-weight: 600; opacity: .8; }
  .site[dir="rtl"] .store small { font-weight: 400; }
  .store b { font-size: 17px; font-weight: 800; }
  .fine { font-size: 13px; font-weight: 700; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .fine .ic { color: var(--done); }
  .link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--primary-ink) !important; text-decoration: none; }
  .eyebrow { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--primary-tint); color: var(--primary-ink); font-size: 13px; font-weight: 800; }

  /* Sections */
  .sec { padding-block: 64px; }
  @container site (min-width: 760px) { .sec { padding-block: 96px; } }
  .sec-head { display: grid; gap: 12px; justify-items: center; text-align: center; margin-bottom: 36px; }
  .sec-head h2 { font-size: 46px; }
  .site[dir="rtl"] .sec-head h2 { font-size: 35px; line-height: 1.25; font-weight: 700; }
  .sec-head p { color: var(--muted); font-weight: 600; max-width: 56ch; font-size: 18px; }
  .site[dir="rtl"] .sec-head p { font-weight: 400; }
  @container site (min-width: 760px) { .sec-head h2 { font-size: 64px; } .site[dir="rtl"] .sec-head h2 { font-size: 48px; line-height: 1.25; font-weight: 700; } .sec-head { margin-bottom: 52px; } }
  .sec.white { background: var(--surface); }
  .card { background: var(--surface); border-radius: 28px; box-shadow: var(--shadow); }
  .tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; }

  /* Hero */
  .hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--haze) 0%, var(--ground) 78%); }
  .hero .wrap { display: grid; gap: 40px; padding-block: 36px 56px; }
  @container site (min-width: 900px) { .hero .wrap { grid-template-columns: 1.05fr .95fr; align-items: center; padding-block: 56px 80px; } }
  .hero-copy { display: grid; gap: 22px; justify-items: start; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .hero .hero-title { font-family: var(--display); font-weight: 400; letter-spacing: .01em; text-wrap: balance; margin: 0; font-size: 64px; line-height: .9; }
  .site[dir="rtl"] .hero .hero-title { font-size: 48px; line-height: 1.25; font-weight: 700; }
  @container site (min-width: 600px) { .hero .hero-title { font-size: 88px; } .site[dir="rtl"] .hero .hero-title { font-size: 66px; line-height: 1.25; font-weight: 700; } }
  @container site (min-width: 1100px) { .hero .hero-title { font-size: 104px; } .site[dir="rtl"] .hero .hero-title { font-size: 78px; line-height: 1.25; font-weight: 700; } }
  .hero .hero-title em { font-style: normal; color: var(--primary); }
  .hero .lead { font-size: 19px; color: var(--muted); font-weight: 600; max-width: 42ch; }
  .site[dir="rtl"] .hero .lead { font-weight: 400; }
  .stats { display: flex; gap: 0; margin-top: 6px; }
  .stats div { padding-inline: 18px; display: grid; }
  .stats div:first-child { padding-inline-start: 0; }
  .stats div + div { border-inline-start: 1px solid var(--line); }
  .stats b { font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1; }
  .site[dir="rtl"] .stats b { font-size: 29px; line-height: 1.25; font-weight: 700; }
  .stats span { font-size: 13px; font-weight: 700; color: var(--muted); }
  .hero-art { position: relative; height: 470px; }
  @container site (min-width: 600px) { .hero-art { height: 600px; } }
  .ph { position: absolute; width: 230px; aspect-ratio: 390/844; border-radius: 34px; border: 7px solid #fff; background: #fff; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(60,45,140,.55); }
  .ph img { width: 100%; display: block; }
  @container site (min-width: 600px) { .ph { width: 270px; border-radius: 40px; } }
  .ph.front { left: 50%; top: 10px; transform: translateX(-62%) rotate(-4deg); z-index: 2; }
  .ph.back { left: 50%; top: 40px; transform: translateX(-2%) rotate(6deg); z-index: 1; }
  .float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 16px 30px -18px rgba(60,45,140,.55); font-weight: 800; font-size: 16px; }
  .float.a { left: 0; top: 120px; } .float.a .ic { color: var(--star); }
  .float.b { right: 0; top: 260px; } .float.b .ic { color: var(--streak); }
  .float.c { left: 6%; bottom: 40px; } .float.c .ic { color: var(--done); }
  .kid3d { position: absolute; right: 4%; bottom: -6px; width: 120px; z-index: 3; filter: drop-shadow(0 14px 18px rgba(60,45,140,.3)); }
  @container site (min-width: 600px) { .kid3d { width: 150px; } }
  .bob { animation: bob 3.4s ease-in-out infinite; } .bob.d { animation-delay: .8s; }
  @keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

  /* Why */
  .why { display: grid; gap: 14px; }
  @container site (min-width: 640px) { .why { grid-template-columns: 1fr 1fr; } }
  @container site (min-width: 1000px) { .why { grid-template-columns: repeat(4, 1fr); } }
  .why .card { padding: 26px; display: grid; gap: 14px; align-content: start; }
  .why h3 { font-size: 32px; }
  .site[dir="rtl"] .why h3 { font-size: 24px; line-height: 1.25; font-weight: 700; }
  .why p { color: var(--muted); font-weight: 600; font-size: 16px; }
  .site[dir="rtl"] .why p { font-weight: 400; }

  /* Steps */
  .steps { display: grid; gap: 18px; counter-reset: s; }
  @container site (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
  .step { position: relative; padding: 28px 26px; display: grid; gap: 12px; align-content: start; }
  .step .n { font-family: var(--display); font-size: 72px; line-height: .8; color: var(--primary); }
  .site[dir="rtl"] .step .n { font-size: 54px; line-height: 1.25; font-weight: 700; }
  .step h3 { font-size: 34px; }
  .site[dir="rtl"] .step h3 { font-size: 26px; line-height: 1.25; font-weight: 700; }
  .step p { color: var(--muted); font-weight: 600; font-size: 16px; }
  .site[dir="rtl"] .step p { font-weight: 400; }
  .step .tile { position: absolute; top: 24px; inset-inline-end: 24px; }

  /* Bento */
  .bento { display: grid; gap: 14px; }
  @container site (min-width: 600px) { .bento { grid-template-columns: 1fr 1fr; } .bento .wide { grid-column: 1 / -1; } .bento > .card:nth-child(3) { grid-column: 1 / -1; } }
  @container site (min-width: 900px) { .bento { grid-template-columns: repeat(3, 1fr); } .bento > .card:nth-child(3) { grid-column: auto; } }
  .bento .card { padding: 26px; display: grid; gap: 14px; align-content: start; }
  .bento h3 { font-size: 34px; }
  .site[dir="rtl"] .bento h3 { font-size: 26px; line-height: 1.25; font-weight: 700; }
  .bento p { color: var(--muted); font-weight: 600; font-size: 16px; }
  .site[dir="rtl"] .bento p { font-weight: 400; }
  .mini { border-radius: 20px; background: var(--ground); padding: 16px; display: grid; gap: 10px; }
  .week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .week span { display: grid; justify-items: center; gap: 4px; font-size: 11px; font-weight: 800; color: var(--faint); }
  .week i { width: 30px; height: 30px; border-radius: 50%; background: var(--track); display: grid; place-items: center; color: #fff; }
  .week i.on { background: var(--streak); }
  .mini .cap { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
  .badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .badge-grid span { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; width: 100%; max-width: 56px; justify-self: center; }
  .badge-grid span.off { background: var(--track) !important; color: var(--faint) !important; }
  .lvl { display: flex; align-items: center; gap: 14px; }
  .lvl .disc { width: 56px; height: 56px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: grid; place-items: center; font-family: var(--display); font-size: 32px; flex: none; }
  .site[dir="rtl"] .lvl .disc { font-size: 24px; line-height: 1.25; font-weight: 700; }
  .lvl b { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; display: block; }
  .site[dir="rtl"] .lvl b { font-size: 21px; line-height: 1.25; font-weight: 700; }
  .lvl small { font-size: 13px; font-weight: 700; color: var(--muted); }
  .xp-bar { height: 10px; border-radius: 99px; background: var(--track); overflow: hidden; }
  .xp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
  .arcade { display: grid; gap: 22px; }
  @container site (min-width: 900px) { .arcade { grid-template-columns: .8fr 1.2fr; align-items: center; } }
  .new { display: inline-flex; height: 24px; align-items: center; padding: 0 10px; border-radius: 99px; background: var(--star); color: #3E2A00; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; justify-self: start; }
  .games { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @container site (min-width: 600px) { .games { grid-template-columns: repeat(6, 1fr); } }
  .games img { width: 100%; aspect-ratio: 1; border-radius: 16px; display: block; object-fit: cover; box-shadow: 0 10px 20px -14px rgba(35,33,58,.5); }
  .smalls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
  @container site (min-width: 900px) { .smalls { grid-template-columns: repeat(4, 1fr); } }
  .smalls div { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
  .smalls .tile { width: 42px; height: 42px; border-radius: 13px; }
  .smalls b { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
  .smalls small { font-size: 13px; font-weight: 600; color: var(--muted); }
  .site[dir="rtl"] .smalls small { font-weight: 400; }

  /* Parents */
  .parents { display: grid; gap: 40px; align-items: center; }
  @container site (min-width: 900px) { .parents { grid-template-columns: 1fr 1fr; } }
  .parents h2 { font-size: 46px; margin-bottom: 18px; }
  .site[dir="rtl"] .parents h2 { font-size: 35px; line-height: 1.25; font-weight: 700; }
  @container site (min-width: 760px) { .parents h2 { font-size: 64px; } .site[dir="rtl"] .parents h2 { font-size: 48px; line-height: 1.25; font-weight: 700; } }
  .checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
  .checks li { display: flex; gap: 14px; align-items: flex-start; }
  .checks .ic { color: var(--done); margin-top: 2px; }
  .checks b { display: block; font-size: 18px; font-weight: 800; }
  .checks span { color: var(--muted); font-weight: 600; font-size: 16px; }
  .site[dir="rtl"] .checks span { font-weight: 400; }
  .parents .art { position: relative; height: 520px; }
  .parents .ph { left: 50%; top: 0; transform: translateX(-50%) rotate(3deg); }
  .parent3d { position: absolute; left: 8%; bottom: 0; width: 130px; z-index: 3; filter: drop-shadow(0 14px 18px rgba(60,45,140,.3)); }

  /* Post cards */
  .posts { display: grid; gap: 16px; }
  @container site (min-width: 760px) { .posts { grid-template-columns: repeat(3, 1fr); } }
  .post { text-decoration: none; display: grid; align-content: start; overflow: hidden; }
  .post img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
  .post .b { padding: 18px 20px 22px; display: grid; gap: 8px; }
  .meta { font-size: 13px; font-weight: 700; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .post h3 { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 20px; line-height: 1.25; letter-spacing: 0; }
  .post p { color: var(--muted); font-weight: 600; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .site[dir="rtl"] .post p { font-weight: 400; }
  .more-row { display: flex; justify-content: center; margin-top: 28px; }

  /* Compare list */
  .cmp-list { display: grid; gap: 12px; }
  @container site (min-width: 760px) { .cmp-list.two { grid-template-columns: 1fr 1fr; } }
  .cmp { display: flex; gap: 16px; align-items: center; padding: 18px 20px; text-decoration: none; }
  .mono { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-family: var(--display); font-size: 30px; flex: none; }
  .site[dir="rtl"] .mono { font-size: 23px; line-height: 1.25; font-weight: 700; }
  .cmp .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
  .cmp .t small { font-size: 12px; font-weight: 800; color: var(--primary-ink); letter-spacing: .06em; text-transform: uppercase; }
  .cmp .t b { font-size: 17px; font-weight: 800; line-height: 1.3; }
  .cmp .t span { font-size: 14px; font-weight: 600; color: var(--muted); }
  .site[dir="rtl"] .cmp .t span { font-weight: 400; }
  .cmp > .ic { color: var(--faint); }

  /* Get the app card */
  .getapp { position: relative; overflow: hidden; border-radius: 36px; background: linear-gradient(135deg, #E6E0FF 0%, #F4E6FF 100%); padding: 44px 24px; display: grid; gap: 18px; justify-items: center; text-align: center; }
  @container site (min-width: 760px) { .getapp { padding: 64px 180px; } }
  .getapp h2 { font-size: 52px; }
  .site[dir="rtl"] .getapp h2 { font-size: 39px; line-height: 1.25; font-weight: 700; }
  @container site (min-width: 760px) { .getapp h2 { font-size: 72px; } .site[dir="rtl"] .getapp h2 { font-size: 54px; line-height: 1.25; font-weight: 700; } }
  .getapp p { color: var(--muted); font-weight: 600; font-size: 18px; max-width: 46ch; }
  .site[dir="rtl"] .getapp p { font-weight: 400; }
  .getapp .badges { justify-content: center; }
  .getapp .chr { position: absolute; width: 150px; bottom: -8px; display: none; filter: drop-shadow(0 14px 18px rgba(60,45,140,.3)); }
  @container site (min-width: 760px) { .getapp .chr { display: block; } }
  .getapp .chr.l { left: 24px; } .getapp .chr.r { right: 24px; }

  /* Footer */
  .ftr { background: #EFECF9; border-top: 1px solid var(--line); padding-block: 48px 28px; margin-top: 0; }
  .ftr .cols { display: grid; gap: 30px; }
  @container site (min-width: 760px) { .ftr .cols { grid-template-columns: 2fr 1fr; } }
  .ftr .brand { display: grid; gap: 14px; justify-items: start; }
  .ftr .brand p { color: var(--muted); font-weight: 600; font-size: 15px; max-width: 40ch; }
  .site[dir="rtl"] .ftr .brand p { font-weight: 400; }
  .ftr h4 { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ftr ul a { text-decoration: none; font-weight: 700; font-size: 15px; }
  .ftr ul a:hover { color: var(--primary-ink); }
  .ftr .safe { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; font-weight: 700; }
  .ftr .safe .ic { color: var(--done); }
  .ftr .store { height: 46px; } .ftr .store b { font-size: 15px; }
  .ftr .bottom { margin-top: 36px; padding-top: 18px; border-top: 1px solid #DCD7EE; display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); }
  .ftr .bottom .ic { color: var(--pink); }

  /* Masthead (blog / compare) */
  .mast { background: linear-gradient(180deg, var(--haze) 0%, var(--ground) 100%); }
  .mast .wrap { padding-block: 44px 36px; display: grid; gap: 14px; justify-items: start; }
  @container site (min-width: 760px) { .mast .wrap { padding-block: 72px 48px; } }
  .mast h1 { font-size: 60px; }
  .site[dir="rtl"] .mast h1 { font-size: 45px; line-height: 1.25; font-weight: 700; }
  @container site (min-width: 760px) { .mast h1 { font-size: 92px; } .site[dir="rtl"] .mast h1 { font-size: 69px; line-height: 1.25; font-weight: 700; } }
  .mast p { color: var(--muted); font-weight: 600; font-size: 19px; max-width: 52ch; }
  .site[dir="rtl"] .mast p { font-weight: 400; }
  .feature { display: grid; overflow: hidden; text-decoration: none; margin-bottom: 18px; }
  @container site (min-width: 860px) { .feature { grid-template-columns: 1.15fr 1fr; } }
  .feature img { width: 100%; height: 100%; min-height: 240px; aspect-ratio: 16/10; object-fit: cover; display: block; }
  .feature .b { padding: 26px; display: grid; gap: 14px; align-content: center; }
  @container site (min-width: 860px) { .feature .b { padding: 44px; } }
  .feature h2 { font-size: 44px; }
  .site[dir="rtl"] .feature h2 { font-size: 33px; line-height: 1.25; font-weight: 700; }
  @container site (min-width: 860px) { .feature h2 { font-size: 56px; } .site[dir="rtl"] .feature h2 { font-size: 42px; line-height: 1.25; font-weight: 700; } }
  .feature p { color: var(--muted); font-weight: 600; }
  .site[dir="rtl"] .feature p { font-weight: 400; }
  .latest { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-ink); }

  /* Article */
  .art-grid { display: grid; gap: 40px; padding-block: 28px 64px; }
  @container site (min-width: 1040px) { .art-grid { grid-template-columns: minmax(0, 700px) 280px; justify-content: space-between; padding-block: 48px 96px; } }
  .crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--muted) !important; text-decoration: none; }
  .article { display: grid; gap: 22px; min-width: 0; }
  .article > h1 { font-size: 54px; line-height: .92; }
  .site[dir="rtl"] .article > h1 { font-size: 41px; line-height: 1.25; font-weight: 700; }
  @container site (min-width: 760px) { .article > h1 { font-size: 76px; } .site[dir="rtl"] .article > h1 { font-size: 57px; line-height: 1.25; font-weight: 700; } }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; font-weight: 800; color: var(--muted); }
  .chip .ic { color: var(--primary); }
  .lead-p { font-size: 21px; line-height: 1.55; font-weight: 600; color: #3A3852; }
  .site[dir="rtl"] .lead-p { font-weight: 400; }
  figure.photo { margin: 6px 0; display: grid; gap: 8px; }
  figure.photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 26px; display: block; }
  figure.photo figcaption { font-size: 12px; font-weight: 700; color: var(--faint); }
  .article h2 { font-size: 42px; margin-top: 22px; }
  .site[dir="rtl"] .article h2 { font-size: 32px; line-height: 1.25; font-weight: 700; }
  @container site (min-width: 760px) { .article h2 { font-size: 52px; } .site[dir="rtl"] .article h2 { font-size: 39px; line-height: 1.25; font-weight: 700; } }
  .article p { font-size: 18px; line-height: 1.75; color: #33314A; max-width: 68ch; }
  .article strong { color: var(--ink); }
  .article p a { color: var(--primary-ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: #C9C4F8; }
  .buckets { display: grid; gap: 14px; }
  @container site (min-width: 640px) { .buckets { grid-template-columns: 1fr 1fr; } }
  .bucket { padding: 22px; display: grid; gap: 14px; align-content: start; }
  .bucket .hd { display: flex; gap: 12px; align-items: center; }
  .bucket h4 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; }
  .bucket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .bucket li { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; font-weight: 600; color: #3A3852; line-height: 1.4; }
  .site[dir="rtl"] .bucket li { font-weight: 400; }
  .bucket li .ic { margin-top: 2px; }
  .ledger { padding: 6px 20px; }
  .ledger .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; padding-block: 8px; font-size: 16px; font-weight: 700; }
  .ledger .row + .row { border-top: 1px solid var(--line); }
  .pts { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 99px; background: var(--star-tint); color: var(--star-ink); font-size: 13px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pts .ic { color: var(--star); }
  .ledger-h { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: -10px; }
  .figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .figures div { padding: 20px; border-radius: 24px; display: grid; gap: 2px; }
  .figures b { font-family: var(--display); font-weight: 400; font-size: 64px; line-height: .9; font-variant-numeric: tabular-nums; }
  .site[dir="rtl"] .figures b { font-size: 48px; line-height: 1.25; font-weight: 700; }
  .figures span { font-size: 14px; font-weight: 700; color: var(--muted); }
  .flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
  .flow li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; position: relative; padding-bottom: 22px; }
  .flow li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 23px; top: 48px; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, #D3CFE6 0 6px, transparent 6px 12px); }
  .flow .n { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-family: var(--display); font-size: 28px; }
  .site[dir="rtl"] .flow .n { font-size: 21px; line-height: 1.25; font-weight: 700; }
  .flow h4 { margin: 8px 0 6px; font-size: 19px; font-weight: 800; line-height: 1.3; }
  .flow p { font-size: 16px !important; line-height: 1.6 !important; }
  .faq { display: grid; gap: 10px; }
  .faq details { background: var(--surface); border-radius: 22px; box-shadow: var(--shadow); padding: 0 22px; }
  .faq summary { list-style: none; cursor: pointer; display: flex; gap: 12px; align-items: center; justify-content: space-between; min-height: 64px; font-size: 18px; font-weight: 800; line-height: 1.3; padding-block: 12px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary h3 { font: inherit; letter-spacing: 0; margin: 0; line-height: 1.3; text-wrap: pretty; }
  .site[dir="rtl"] .faq summary h3 { line-height: 1.25; }
  .faq summary .ic { color: var(--primary); transition: transform .2s; }
  .faq details[open] summary .ic { transform: rotate(45deg); }
  .faq details p { padding-bottom: 20px; font-size: 16px !important; }
  .faq summary:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; border-radius: 12px; }
  .rail { display: none; }
  @container site (min-width: 1040px) { .rail { display: grid; gap: 16px; align-content: start; position: sticky; top: 96px; } }
  .toc { padding: 20px; display: grid; gap: 4px; }
  .toc h4 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .toc a { text-decoration: none; font-size: 14px; font-weight: 700; color: var(--muted); padding: 7px 10px; border-radius: 10px; line-height: 1.3; }
  .toc a.on { background: var(--primary-tint); color: var(--primary-ink); }
  .mini-app { padding: 20px; display: grid; gap: 12px; background: linear-gradient(135deg, #E6E0FF 0%, #F4E6FF 100%); box-shadow: none; }
  .mini-app img.k { width: 70px; }
  .mini-app > b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; }
  .site[dir="rtl"] .mini-app > b { font-size: 23px; line-height: 1.25; font-weight: 700; }
  .mini-app p { font-size: 14px; font-weight: 600; color: var(--muted); }
  .site[dir="rtl"] .mini-app p { font-weight: 400; }
  .mini-app .store { height: 44px; border-radius: 12px; } .mini-app .store b { font-size: 14px; font-family: "Nunito", sans-serif; font-weight: 800; }
  .related { display: grid; gap: 12px; }
  @container site (min-width: 640px) { .related { grid-template-columns: 1fr 1fr; } }
  .related .post img { aspect-ratio: 16/9; }
  .ctacard { padding: 28px; display: grid; gap: 14px; justify-items: start; background: linear-gradient(135deg, #E6E0FF 0%, #F4E6FF 100%); box-shadow: none; position: relative; overflow: hidden; }
  @container site (min-width: 760px) { .ctacard { padding: 40px; padding-inline-end: 200px; } }
  .ctacard h2 { font-size: 44px !important; margin: 0 !important; }
  .site[dir="rtl"] .ctacard h2 { font-size: 33px !important; line-height: 1.25; font-weight: 700; }
  .ctacard p { color: var(--muted) !important; font-weight: 600; font-size: 17px !important; }
  .site[dir="rtl"] .ctacard p { font-weight: 400; }
  .ctacard .chr { position: absolute; inset-inline-end: 20px; bottom: -6px; width: 150px; display: none; }
  @container site (min-width: 760px) { .ctacard .chr { display: block; } }

  /* Compare page */
  .checked { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 800; color: var(--done-ink); background: var(--done-tint); height: 30px; padding: 0 12px; border-radius: 99px; }
  .verdict { padding: 24px; display: grid; gap: 10px; border: 2px solid var(--primary); box-shadow: none; }
  .verdict h3 { font-size: 34px; display: flex; gap: 10px; align-items: center; }
  .site[dir="rtl"] .verdict h3 { font-size: 26px; line-height: 1.25; font-weight: 700; }
  .verdict h3 .ic { color: var(--primary); }
  .verdict p { font-size: 17px !important; }
  .table-scroll { overflow-x: auto; border-radius: 24px; box-shadow: var(--shadow); background: var(--surface); }
  table.spec { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; font-size: 15px; }
  table.spec th, table.spec td { padding: 14px 16px; text-align: start; vertical-align: top; line-height: 1.45; }
  table.spec thead th { font-size: 14px; font-weight: 800; padding-block: 16px; }
  table.spec thead th.ours { background: var(--primary); color: #fff; }
  table.spec tbody th { font-weight: 800; color: var(--muted); font-size: 13px; width: 30%; position: sticky; inset-inline-start: 0; background: var(--surface); }
  table.spec td.ours { background: #F5F3FF; font-weight: 700; color: var(--ink); }
  table.spec td { color: #4A4862; font-weight: 600; }
  .site[dir="rtl"] table.spec td { font-weight: 400; }
  table.spec tbody tr + tr > * { border-top: 1px solid var(--line); }
  .source { font-size: 13px !important; color: var(--muted) !important; font-weight: 600; display: flex; gap: 8px; }
  .site[dir="rtl"] .source { font-weight: 400; }
  .source .ic { color: var(--faint); margin-top: 3px; }
  .plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .plain-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 17px; font-weight: 600; color: #33314A; line-height: 1.5; }
  .site[dir="rtl"] .plain-list li { font-weight: 400; }
  .plain-list .ic { margin-top: 3px; color: var(--muted); }
  .choose { display: grid; gap: 14px; }
  @container site (min-width: 640px) { .choose { grid-template-columns: 1fr 1fr; } }
  .choose .card { padding: 22px; display: grid; gap: 14px; align-content: start; }
  .choose .card.ours { border: 2px solid var(--primary); box-shadow: none; }
  .choose h4 { margin: 0; font-size: 19px; font-weight: 800; display: flex; gap: 10px; align-items: center; }
  .inline-cta { padding: 26px; display: grid; gap: 14px; justify-items: start; background: var(--surface); }
  .inline-cta h2 { margin: 0 !important; font-size: 40px !important; }
  .site[dir="rtl"] .inline-cta h2 { font-size: 30px !important; line-height: 1.25; font-weight: 700; }
  .see { display: flex; flex-wrap: wrap; gap: 8px; }
  .see a { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 99px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; font-weight: 800; font-size: 14px; }
  .see a .ic { color: var(--primary); }
  .back { display: inline-flex; gap: 6px; align-items: center; font-weight: 800; color: var(--primary-ink) !important; text-decoration: none; }

  /* Support / Privacy */
  .support { padding-block: 56px 96px; display: grid; justify-items: center; }
  .support > .card { width: 100%; max-width: 560px; padding: 36px 26px; display: grid; gap: 14px; justify-items: center; text-align: center; }
  .support h1 { font-size: 56px; }
  .site[dir="rtl"] .support h1 { font-size: 42px; line-height: 1.25; font-weight: 700; }
  .support p { color: var(--muted); font-weight: 600; }
  .site[dir="rtl"] .support p { font-weight: 400; }
  .support .btn { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 999px; background: var(--primary); color: #fff !important; text-decoration: none; font-weight: 800; }
  .support .links { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; font-weight: 800; font-size: 14px; }
  .support .links a { color: var(--primary-ink); text-decoration: none; }
  .disc-lg { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-tint); color: var(--primary); }
  .legal h3 { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0; margin-top: 6px; line-height: 1.3; }
  .legal ul { margin: 0; padding-inline-start: 22px; display: grid; gap: 6px; font-size: 17px; color: #33314A; font-weight: 600; line-height: 1.55; }
  .site[dir="rtl"] .legal ul { font-weight: 400; }
  .legal li::marker { color: var(--primary); }
  .commit { padding: 22px; display: flex; gap: 14px; align-items: flex-start; background: var(--done-tint); box-shadow: none; }
  .commit .ic { color: var(--done-ink); }
  .commit p { font-size: 16px !important; color: #1F4B3E !important; line-height: 1.6 !important; }

  /* ---------- Arabic / RTL ---------- */
  .site[dir="rtl"] { font-family: "Baloo Bhaijaan 2", "Nunito", system-ui, sans-serif; line-height: 1.8; }
  .site[dir="rtl"] * { letter-spacing: 0 !important; text-transform: none !important; }
  .site[dir="rtl"] .ph.front { transform: translateX(-38%) rotate(4deg); }
  .site[dir="rtl"] .ph.back { transform: translateX(-90%) rotate(-6deg); }
  .site[dir="rtl"] .float.a { left: auto; right: 0; }
  .site[dir="rtl"] .float.b { right: auto; left: 0; }
  .site[dir="rtl"] .float.c { left: auto; right: 6%; }
  .site[dir="rtl"] .kid3d { right: auto; left: 4%; }
  .site[dir="rtl"] .parents .ph { transform: translateX(-50%) rotate(-3deg); }
  .site[dir="rtl"] .parent3d { left: auto; right: 8%; }
  .site[dir="rtl"] .getapp .chr.l { left: auto; right: 24px; }
  .site[dir="rtl"] .getapp .chr.r { right: auto; left: 24px; }
  .site[dir="rtl"] .flip { transform: scaleX(-1); }
  /* Arabic labels are wider: the header drops "المدونة" below 440px so the full CTA label always fits (never hide "التطبيق"). */
  .site[dir="rtl"] .nav-blog { display: none; }
  @container site (min-width: 440px) { .site[dir="rtl"] .nav-blog { display: inline-block; } }
  .site[dir="rtl"] .cta { padding: 0 14px; }
  .site[dir="rtl"] .num { direction: ltr; unicode-bidi: isolate; }
  @media (prefers-reduced-motion: reduce) { .bob { animation: none; } .faq summary .ic { transition: none; } }

  /* ---------- generator additions (not in the design file) ---------- */
  .site[dir="rtl"] { --display: "Baloo Bhaijaan 2", "Nunito", system-ui, sans-serif; }
  .site[dir="rtl"] .ctacard .chr { transform: scaleX(-1); }
  .site :focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
  main { display: block; }
  /* Plain Markdown lists and sub-heads inside an article. */
  .article ul:not([class]), .article ol:not([class]) { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-size: 18px; line-height: 1.7; color: #33314A; max-width: 68ch; }
  .article ul:not([class]) li::marker, .article ol:not([class]) li::marker { color: var(--primary); }
  .article li a, .article figcaption a { color: inherit; }
  .article li a { color: var(--primary-ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: #C9C4F8; }
  .article > h3 { font-size: 32px; margin-top: 8px; }
  .site[dir="rtl"] .article > h3 { font-size: 24px; line-height: 1.25; font-weight: 700; }
  .article > h4 { margin: 4px 0 0; font-size: 19px; font-weight: 800; line-height: 1.3; }
  .article hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; width: 100%; }
  figure.photo figcaption a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); }
  .quote { margin: 4px 0; padding: 26px; display: grid; gap: 10px; background: var(--primary-tint); border-radius: 28px; }
  .quote .ic { color: var(--primary); }
  .article .quote p { font-family: var(--display); font-size: 34px; line-height: 1.05; color: var(--ink); max-width: none; }
  .site[dir="rtl"] .article .quote p { font-size: 26px; line-height: 1.25; font-weight: 700; }
  .ledger .row > span:first-child { min-width: 0; }
  .post h2 { font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: 20px; line-height: 1.25; letter-spacing: 0; }
  .feature h2 { font-family: var(--display); font-weight: 400; }
  .site[dir="rtl"] .feature h2 { line-height: 1.25; font-weight: 700; }
  .post .ttl { display: block; font-weight: 800; font-size: 18px; line-height: 1.25; }
  .back-row { display: flex; flex-wrap: wrap; gap: 8px; }
  .art-grid { min-width: 0; }
  .art-grid > * { min-width: 0; }
  .article { overflow-wrap: break-word; grid-template-columns: minmax(0, 1fr); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  .glance .g { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; font-size: 14px; font-weight: 700; }
  .glance .g > span:first-child { color: var(--muted); }
  .glance .g .pts { background: var(--primary-tint); color: var(--primary-ink); }
  .glance .g > span:last-child { color: var(--muted); font-size: 13px; }
  .cmp .t h2 { font-family: "Nunito", system-ui, sans-serif; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
  .cmp .t p { font-size: 14px; font-weight: 600; color: var(--muted); }
  .site[dir="rtl"] .cmp .t p { font-weight: 400; }
  .site[dir="rtl"] .cmp .t small { letter-spacing: 0; text-transform: none; }
  .plain-list li > span { min-width: 0; }
  .choose .card ul { margin: 0; }
  .article .inline-cta p { max-width: none; }
  .mono[data-letter]::before { content: attr(data-letter); }
  .see p { margin: 0; display: contents; }
  .checked { height: auto; min-height: 30px; padding-block: 5px; line-height: 1.35; }
  .notice { padding: 18px 20px; display: flex; gap: 12px; align-items: flex-start; background: var(--star-tint); box-shadow: none; text-align: start; }
  .notice .ic { color: var(--star-ink); margin-top: 3px; }
  .support .notice p { color: #5B4300; font-size: 15px; }
  .support .card > p { max-width: 42ch; }
  .legal p, .legal li { overflow-wrap: anywhere; }
  .support .notice { text-align: start; width: 100%; }
  .cmp .t h3 { font-family: "Nunito", system-ui, sans-serif; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
  .post h3 { font-family: "Nunito", system-ui, sans-serif; }
  .hero-art .ph img, .parents .ph img { height: auto; }

  /* ---------- accessibility (WCAG AA 4.5:1 for small text) ----------
     Nearest passing shades of the design tokens; visually indistinguishable. */
  .cta, .support .btn, table.spec thead th.ours { background: #6B60EB; }
  .ftr .brand p, .ftr .ftr-h, .ftr .bottom { color: #69677F; }
  .ftr .ftr-h { margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  .pts { color: #9B6200; }
  .checked { color: #167A5A; }
  figure.photo figcaption { color: var(--muted); }