.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid rgba(231,200,117,.32);border-radius:12px;background:rgba(255,255,255,.025);color:var(--gold);font-size:0;cursor:pointer;position:relative;flex:0 0 42px;-webkit-tap-highlight-color:transparent}.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;left:11px;right:11px;height:2px;border-radius:999px;background:var(--gold);transition:transform .2s ease,top .2s ease,opacity .2s ease,box-shadow .2s ease}.nav-toggle::before{top:13px;box-shadow:0 7px 0 var(--gold),0 14px 0 var(--gold)}.nav-toggle::after{top:20px;opacity:0}.site-header.nav-open .nav-toggle::before{top:20px;transform:rotate(45deg);box-shadow:none}.site-header.nav-open .nav-toggle::after{top:20px;transform:rotate(-45deg);opacity:1}.nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.nav-links a[aria-current="page"]{color:var(--gold)}.core-page-visual{margin:28px 0 4px;border:1px solid rgba(231,200,117,.22);border-radius:24px;overflow:hidden;background:#0b211d;box-shadow:0 24px 64px rgba(0,0,0,.25)}.core-page-visual img{display:block;width:100%;height:clamp(280px,34vw,460px);object-fit:cover}.core-page-visual.core-app img{object-position:center}.core-feature-grid .card-thumb{height:150px}.support-page .page-hero{padding-bottom:18px}.support-page .content{max-width:900px}.support-page details{margin:14px 0;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.support-page summary{cursor:pointer;color:var(--text);font-weight:700}.support-page details p,.support-page details li{color:var(--muted)}.support-page .support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.support-page .support-card{padding:20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.support-page .support-card h3{margin:0 0 8px;color:var(--gold)}.support-page .support-card p{margin:0;color:var(--muted)}@media(max-width:900px){.site-header .nav{min-height:64px;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap;padding:10px 0!important;gap:12px!important}.site-header .brand{flex:1;min-width:0}.nav-toggle{display:inline-flex}.site-header .nav-links{display:none;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible!important;padding:10px 0 4px!important;margin:0!important}.site-header.nav-open .nav-links{display:grid}.site-header .nav-links a{display:block;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025);white-space:normal!important;min-height:44px}.site-header .nav-links .lang-link{text-align:center}.core-page-visual img{height:clamp(240px,52vw,390px)}.support-page .support-grid{grid-template-columns:1fr 1fr}}@media(max-width:580px){.site-header .nav-links{grid-template-columns:1fr}.site-header .nav-links a{padding:12px 14px}.core-page-visual{border-radius:18px}.core-page-visual img{height:240px}.support-page .support-grid{grid-template-columns:1fr}}
.site-theme-picker{display:inline-flex;align-items:center;gap:7px;padding:4px 5px 4px 9px;border:1px solid var(--line);border-radius:999px;background:var(--site-surface,rgba(255,255,255,.025));color:var(--site-nav,var(--text));font-size:12px;white-space:nowrap}
.site-theme-picker span{color:var(--site-soft,var(--muted))}
.site-theme-picker select{appearance:none;border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;padding:4px 22px 4px 4px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 10px) 50%,calc(100% - 6px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.site-theme-picker select:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.site-theme-picker option{background:var(--panel);color:var(--text)}
html[data-site-theme="light"] .site-theme-picker option{background:#fffdf7;color:#17312a}
@media(max-width:900px){.site-header .nav-links .site-theme-picker{grid-column:1/-1;justify-content:space-between;min-height:44px;border-radius:12px;padding:9px 12px;background:var(--site-surface,rgba(255,255,255,.025))}}

html[data-site-theme="light"] .site-theme-picker{
  background:#fffdf8;
  border-color:rgba(23,49,42,.20);
  color:#17312a;
}
html[data-site-theme="light"] .site-theme-picker span{color:#4f625b}
html[data-site-theme="light"] .site-theme-picker select{color:#17312a}

/* Reserve the theme-control slot before site-shell.js inserts the real control.
   This prevents the desktop header from shifting sideways after first paint. */
@media(min-width:901px){
  .site-header .nav-links>a:not(.lang-link){order:0}
  .site-header .nav-links .site-theme-picker{order:1;min-width:112px;justify-content:space-between}
  .site-header .nav-links .lang-link{order:2}
  .site-header .nav-links:not(:has([data-site-theme-picker]))::after{
    content:"";display:inline-block;flex:0 0 112px;width:112px;height:34px;order:1
  }
}

.site-language-picker{display:inline-flex;align-items:center;gap:7px;padding:4px 5px 4px 9px;border:1px solid var(--line);border-radius:999px;background:var(--site-surface,rgba(255,255,255,.025));color:var(--site-nav,var(--text));font-size:12px;white-space:nowrap}
.site-language-picker span{color:var(--site-soft,var(--muted))}
.site-language-picker select{appearance:none;border:0;background:transparent;color:var(--text);font:inherit;font-weight:700;padding:4px 22px 4px 4px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 10px) 50%,calc(100% - 6px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.site-language-picker option{background:var(--panel);color:var(--text)}
html[data-site-theme="light"] .site-language-picker{background:#fffdf8;border-color:rgba(23,49,42,.20);color:#17312a}
html[data-site-theme="light"] .site-language-picker span{color:#4f625b}
html[data-site-theme="light"] .site-language-picker select{color:#17312a}
html[data-site-theme="light"] .site-language-picker option{background:#fffdf7;color:#17312a}
html[dir="rtl"] .site-language-picker select{padding:4px 4px 4px 22px;background-position:10px 50%,6px 50%}
@media(max-width:900px){.site-header .nav-links .site-language-picker{grid-column:1/-1;justify-content:space-between;min-height:44px;border-radius:12px;padding:9px 12px}}

/* RTL header: keep the complete navigation inside the viewport on desktop. */
@media(min-width:901px){
  html[dir="rtl"] .site-header .nav{direction:rtl;display:flex;align-items:center;justify-content:space-between;gap:18px}
  html[dir="rtl"] .site-header .brand{flex:0 0 auto}
  html[dir="rtl"] .site-header .nav-links{direction:rtl;display:flex;align-items:center;justify-content:flex-start;gap:16px;min-width:0;flex:1;flex-wrap:nowrap}
  html[dir="rtl"] .site-header .nav-links>a{white-space:nowrap}
  html[dir="rtl"] .site-header .site-language-picker,
  html[dir="rtl"] .site-header .site-theme-picker{flex:0 0 auto}
}

/* Urdu needs the compact header earlier because RTL labels + two pickers are wider. */
@media(min-width:901px) and (max-width:1240px){
  html[dir="rtl"] .site-header .nav{min-height:64px;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap;padding:10px 0!important;gap:12px!important}
  html[dir="rtl"] .site-header .brand{flex:1;min-width:0}
  html[dir="rtl"] .site-header .nav-toggle{display:inline-flex}
  html[dir="rtl"] .site-header .nav-links{display:none;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible!important;padding:10px 0 4px!important;margin:0!important}
  html[dir="rtl"] .site-header.nav-open .nav-links{display:grid}
  html[dir="rtl"] .site-header .nav-links a{display:block;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025);white-space:normal!important;min-height:44px}
  html[dir="rtl"] .site-header .nav-links .site-language-picker,
  html[dir="rtl"] .site-header .nav-links .site-theme-picker{grid-column:1/-1;justify-content:space-between;min-height:44px;border-radius:12px;padding:9px 12px}
}

/* Tamil labels are long too: use the compact header until the full nav fits on one row. */
@media(min-width:901px) and (max-width:1120px){
  html[lang="ta"] .site-header .nav{min-height:64px;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;flex-wrap:wrap;padding:10px 0!important;gap:12px!important}
  html[lang="ta"] .site-header .brand{flex:1;min-width:0}
  html[lang="ta"] .site-header .nav-toggle{display:inline-flex}
  html[lang="ta"] .site-header .nav-links{display:none;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible!important;padding:10px 0 4px!important;margin:0!important}
  html[lang="ta"] .site-header.nav-open .nav-links{display:grid}
  html[lang="ta"] .site-header .nav-links a{display:block;padding:11px 12px;border:1px solid rgba(255,255,255,.07);border-radius:12px;background:rgba(255,255,255,.025);white-space:normal!important;min-height:44px}
  html[lang="ta"] .site-header .nav-links .site-language-picker,
  html[lang="ta"] .site-header .nav-links .site-theme-picker{grid-column:1/-1;justify-content:space-between;min-height:44px;border-radius:12px;padding:9px 12px}
  html[lang="ta"] .site-header .nav-links::after{display:none}
}

/* App product pages (EN /app, Tamil /ta/செயலி, Urdu /ur/ایپ).
   These pages do not load article-enhancements.css, so the feature-card thumbnails
   must be fully defined here; minmax(0,1fr) stops the 720px images from widening tracks. */
body.app-page{overflow-x:clip}
/* Short page: skip the 900px content-visibility placeholder, which showed as an empty gap. */
.app-page main>section{content-visibility:visible;contain-intrinsic-size:none}
.app-page .content{max-width:1040px}
.app-page .page-hero{padding:56px 0 24px}
.app-page .page-hero h1{margin:10px 0 14px}
.app-page .page-hero p{margin:0}
.app-page .core-page-visual{margin:26px 0 0}
.app-page .core-page-visual img{height:auto;aspect-ratio:16/9;max-height:460px}
.app-page main>section:nth-of-type(2){padding-top:34px}
.app-page .content h2:first-child{margin-top:0}
.app-page .content p{max-width:74ch}
.core-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:28px 0 8px}
.core-feature-grid>.card{min-width:0;display:flex;flex-direction:column;padding:0;overflow:hidden;position:relative}
.core-feature-grid .card-thumb{position:relative;height:auto;aspect-ratio:16/9;margin:0;overflow:hidden;border-bottom:1px solid var(--line);background:#0b211d}
.core-feature-grid .card-thumb img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .38s ease}
.core-feature-grid .card:hover .card-thumb img{transform:scale(1.035)}
.core-feature-grid .card-badge{position:absolute;inset-block-start:12px;inset-inline-start:12px;max-width:calc(100% - 24px);display:inline-flex;align-items:center;min-height:26px;padding:3px 10px;border-radius:999px;border:1px solid rgba(244,223,155,.32);background:rgba(6,18,16,.8);backdrop-filter:blur(8px);color:var(--gold2);font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.6px;text-transform:uppercase;overflow-wrap:anywhere}
.core-feature-grid .card h3{margin:16px 18px 6px;overflow-wrap:anywhere}
.core-feature-grid .card p{margin:0 18px 20px;font-size:15px;line-height:1.6}
.play-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:22px}
.btn-play{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:11px 22px;font-weight:800;line-height:1.3;text-align:start}
.btn-play svg{flex:0 0 auto;width:18px;height:18px}
.btn-play:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.play-cta-note{color:var(--muted);font-size:14px}
.app-page .cta{margin:44px 0 8px;padding:28px 22px}
.app-page .cta .play-cta{justify-content:center}
.app-page .cta p{margin-inline:auto}
/* Urdu/Tamil: no uppercase or tracking on badges; Urdu needs taller line boxes. */
.ur .core-feature-grid .card-badge,.ta .core-feature-grid .card-badge{text-transform:none;letter-spacing:0;font-size:12px}
.ur.app-page .page-hero h1{line-height:1.3;letter-spacing:0}
.ur.app-page .content p,.ur.app-page .core-feature-grid .card p{line-height:1.9}
html[data-site-theme="light"] .core-feature-grid .card-badge{background:rgba(255,253,247,.9);color:#7a5918;border-color:rgba(122,89,24,.3)}
@media(max-width:900px){.core-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-page .page-hero{padding-top:40px}}
@media(max-width:580px){.core-feature-grid{grid-template-columns:minmax(0,1fr);gap:14px}.app-page .page-hero{padding:28px 0 18px}.app-page .page-hero h1{font-size:clamp(32px,10vw,40px)}.app-page .core-page-visual img{height:auto}.btn-play{width:100%;justify-content:center}.app-page .cta{padding:22px 16px}}