/* Shared look for the Learn Urdu guides: the same sticker style as the home page. */
:root {
  --green900: #0E4D2A; --green700: #146B3A; --green500: #1F9D55; --green300: #7FD39B; --green100: #E3F5E8;
  --marigold: #F4B63F; --marigold100: #FFF3D6; --marigoldInk: #8A5A00; --ruby: #E2483D; --ruby100: #FDE7E5;
  --teal: #12A3A0; --teal100: #DDF5F4; --plum: #7B5CD6; --plum100: #EEE8FF;
  --cream: #FFF9EF; --ink: #1C2A24; --muted: #6B7A72; --line: #E8E1D3;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
* { box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 700 18px/1.6 Nunito, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--green700); }
button { font-family: inherit; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
h1, h2 { font-weight: 900; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
h1 { font-size: clamp(34px, 5.6vw, 56px); margin: 16px 0 22px; color: var(--green900); }
h2 { font-size: clamp(26px, 3.4vw, 34px); margin-bottom: 10px; }
.ur { font-family: 'Noto Nastaliq Urdu', serif; direction: rtl; font-weight: 400; }
.lead { color: #3E4C45; margin: 0 0 18px; max-width: 64ch; }
.small { font-size: 14px; color: var(--muted); }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 900 15px Nunito, sans-serif; letter-spacing: .03em; padding: 14px 20px; border-radius: 18px; text-decoration: none; border: 0; cursor: pointer; text-transform: uppercase; transition: transform .1s; }
.btn:active { transform: translateY(3px); }
.btn-green { background: var(--green500); color: #fff; box-shadow: 0 5px 0 var(--green700); }
.btn-white { background: #fff; color: var(--green700); box-shadow: 0 5px 0 var(--line); border: 2px solid var(--line); }
.btn-sm { padding: 10px 16px; font-size: 14px; border-radius: 999px; }
.sticker { display: inline-flex; gap: 8px; font-weight: 900; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 14px; border-radius: 999px; background: var(--marigold); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg); }

/* Nav pill */
nav.top { position: sticky; top: 12px; z-index: 50; padding: 0 16px; margin-top: 12px; }
nav.top .pill { max-width: 1128px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; padding: 0 10px 0 14px; background: rgba(255, 255, 255, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 900; font-size: 24px; letter-spacing: -.03em; }
.logo img { width: 38px; height: 38px; border-radius: 11px; }
.navlinks { display: flex; gap: 4px; }
.navlinks a { text-decoration: none; color: var(--ink); font-weight: 900; font-size: 16px; padding: 9px 14px; border-radius: 999px; display: inline-flex; gap: 7px; }
.navlinks a:hover, .navlinks a.on { background: var(--green100); }
.navright { display: flex; align-items: center; gap: 8px; }
.voicepick { display: inline-flex; align-items: center; gap: 3px; background: var(--green100); border: 2px solid var(--ink); border-radius: 999px; padding: 3px; }
.voicepick span { padding: 0 2px 0 8px; }
.voicepick button { border: 0; background: transparent; border-radius: 999px; padding: 6px 12px; font-weight: 900; font-size: 14px; cursor: pointer; color: var(--green900); }
.voicepick button.on { background: var(--green500); color: #fff; box-shadow: 0 2px 0 var(--green700); }
@media (max-width: 860px) { .navlinks { display: none; } }
@media (max-width: 520px) { .navright .btn { display: none; } }
@media (max-width: 370px) { .voicepick span { display: none; } }

/* Hero */
.hero { background: linear-gradient(#D9F1FF, var(--cream)); padding: 110px 0 40px; margin-top: -88px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.answer { display: flex; gap: 14px; align-items: flex-end; max-width: 760px; }
.answer img { width: 64px; flex: 0 0 64px; }
.answer p { margin: 0; background: #fff; border: 2.5px solid var(--ink); border-radius: 22px 22px 22px 6px; padding: 16px 20px; box-shadow: 4px 4px 0 var(--ink); font-size: 19px; }

main { padding-bottom: 40px; }
.block { margin: 56px 0; }

/* Phrase cards */
.phs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ph { position: relative; text-align: left; background: #fff; border: 2.5px solid var(--ink); border-radius: 20px; padding: 14px 16px 12px; box-shadow: 0 5px 0 var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: transform .15s var(--spring); color: var(--ink); }
.ph:hover { transform: translateY(-3px) rotate(-.6deg); }
.ph:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--ink); }
.ph .r { font-weight: 900; font-size: 21px; line-height: 1.25; padding-right: 36px; color: var(--green900); }
.ph .u { font-size: 22px; line-height: 2.3; text-align: left; }
.ph .d { font-size: 18px; color: var(--plum); font-weight: 700; }
.ph .e { color: var(--muted); font-size: 16px; }
.ph .pl { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 10px; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 13px; }
.ph.playing { background: var(--teal100); }
.ph.playing .pl { background: var(--green500); }

/* Letters */
.lts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.lt { background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); cursor: pointer; padding: 0 6px 10px; display: flex; flex-direction: column; align-items: center; color: var(--ink); transition: transform .15s var(--spring); }
.lt:hover { transform: translateY(-3px); }
.lt .u { font-size: 40px; line-height: 2.2; margin-bottom: 6px; }
.lt .r { font-weight: 900; font-size: 15px; }
.lt .p { font-size: 12px; color: var(--muted); line-height: 1.3; text-align: center; }
.lt.playing { background: var(--teal100); }

/* Tips, steps, table */
.tips { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tip { border: 2.5px solid var(--ink); border-radius: 20px; padding: 16px; }
.tip b { display: block; font-size: 18px; line-height: 1.3; margin-bottom: 4px; }
.tip span { color: #3E4C45; font-size: 16px; display: block; }
.t0 { background: var(--green100); } .t1 { background: var(--marigold100); } .t2 { background: var(--teal100); } .t3 { background: var(--plum100); }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px 1fr; gap: 2px 14px; background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; padding: 14px 16px; }
.steps li::before { content: counter(s); grid-row: span 2; width: 44px; height: 44px; border-radius: 14px; background: var(--marigold); border: 2.5px solid var(--ink); display: grid; place-items: center; font-weight: 900; font-size: 20px; }
.steps span { color: #3E4C45; font-size: 16px; }
.tbl { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.tbl div { background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; }
.tbl b { color: var(--green700); }
.tbl span { color: #3E4C45; font-size: 16px; text-align: right; }

/* Quiz */
.qbox { background: #fff; border: 3px solid var(--ink); border-radius: 26px; box-shadow: 6px 6px 0 var(--ink); padding: 20px; max-width: 560px; }
.qbar { height: 12px; background: #EFEAE0; border-radius: 99px; overflow: hidden; margin-bottom: 16px; }
.qbar i { display: block; height: 100%; background: var(--green500); transition: width .4s var(--spring); }
.qplay { width: 64px; height: 64px; border-radius: 20px; border: 0; background: var(--teal); color: #fff; font-size: 26px; cursor: pointer; box-shadow: 0 5px 0 #0B7A78; display: block; margin: 0 auto 14px; }
.qopts { display: grid; gap: 10px; }
.qopt { background: #fff; border: 2px solid var(--line); border-bottom-width: 5px; border-radius: 16px; padding: 12px; font: 800 17px Nunito; cursor: pointer; color: var(--ink); }
.qopt.ok { background: var(--green100); border-color: var(--green500); }
.qopt.no { background: var(--ruby100); border-color: var(--ruby); animation: shake .4s; }
.qmsg { min-height: 30px; margin-top: 12px; font-weight: 900; text-align: center; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* FAQ */
details { background: #fff; border: 2.5px solid var(--ink); border-radius: 18px; margin-bottom: 10px; box-shadow: 0 4px 0 var(--ink); }
summary { cursor: pointer; font-weight: 900; list-style: none; display: flex; justify-content: space-between; gap: 14px; padding: 16px 18px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; flex: 0 0 30px; height: 30px; border-radius: 10px; background: var(--green100); display: grid; place-items: center; transition: transform .3s var(--spring); }
details[open] summary::after { transform: rotate(45deg); background: var(--marigold); }
details p { margin: 0; padding: 0 18px 16px; color: #3E4C45; }

/* Related guides */
.rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rel a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 20px; padding: 16px; box-shadow: 4px 4px 0 var(--ink); transition: transform .2s var(--spring); }
.rel a:hover { transform: rotate(-1deg) translateY(-3px); }
.rel .em { font-size: 30px; }
.rel b { font-size: 19px; }
.rel span:last-child { color: var(--muted); font-size: 15px; line-height: 1.4; }

/* App call to action */
.cta { background: var(--green500); color: #fff; padding: 60px 16px; }
.cta-in { max-width: 980px; margin: 0 auto; display: flex; gap: 28px; align-items: center; }
.cta img { width: 140px; flex: 0 0 140px; }
.cta h2 { font-size: clamp(28px, 4vw, 40px); }
.cta p { color: #E8FFF0; margin: 10px 0 18px; }
.cta .small { color: #CFF5DC; margin: 12px 0 0; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .cta-in { flex-direction: column; text-align: center; } .ctas { justify-content: center; } }

footer { background: var(--ink); color: rgba(255, 255, 255, .75); padding: 36px 0; font-size: 15px; }
footer .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; }
footer nav a { color: #fff; text-decoration: none; font-weight: 800; margin-right: 18px; }
footer .logo img { width: 30px; height: 30px; border-radius: 9px; }
@media (max-width: 520px) { .answer img { display: none; } .answer p { font-size: 17px; } }
/* Free-text sections and comparison tables */
.prose p, .prose li { color: #3E4C45; max-width: 68ch; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin: 6px 0; }
.cmp-wrap { overflow-x: auto; border: 2.5px solid var(--ink); border-radius: 20px; box-shadow: 4px 4px 0 var(--ink); background: #fff; }
.cmp { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 15px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { background: var(--cream); font-weight: 900; }
.cmp tbody th { font-weight: 900; width: 26%; }
.cmp .us { background: var(--green100); font-weight: 900; color: var(--green900); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }