/* ============================================================================
   /qr — every official Varahi9 Media account on one page.

   MOBILE FIRST, FINAL VERSION (2026-10-15). The page is reached by scanning
   the printed QR code, so it is designed as a phone screen, then allowed to
   widen gracefully:
     loading screen → header → sticky channel switcher (tap or swipe) →
     the channel's profile and platforms → QR dropdown → note → footer,
     with a floating dock (QR · Share · Copy) in thumb reach.

   CSP NOTE: served with style-src 'self' and NO 'unsafe-inline', so the
   markup carries no style="" attributes. Everything is a class here.
   ========================================================================== */

/* ---- Palette ---------------------------------------------------------------- */
:root {
  --ink:#0F1218; --ink-2:#1B2030; --brand-red:#E31B23;
  --page:#F3F1ED;
  --card-shadow:0 1px 2px rgba(20,23,31,.04), 0 24px 48px -28px rgba(20,23,31,.42);
  --chip-bg:rgba(20,23,31,.05);
  --glass:rgba(255,255,255,.8);
  --pill-bg:var(--ink); --pill-fg:#FFFFFF;
  --toast-bg:#14171F; --toast-fg:#FFFFFF;
}
/* Light is the default for every visitor, whatever the phone's own dark-mode
   setting (Founder, 2026-10-15). Dark applies only when chosen in the (i) menu. */
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0C0E13; --bg-alt:#11141A; --bg-sunken:#0A0C10; --surface:#151820;
  --hover:rgba(255,255,255,.05); --line:#232733; --line-strong:#353B49;
  --fg:#ECEAE5; --fg-soft:#AAB0BB; --fg-mute:#8F98A8; --link:#F0894A;
  --v9-saffron:#F2703A; --v9-saffron-text:#FF8A4C; --btn-bg:#F2703A; --btn-fg:#14171F;
  --page:#0B0D12;
  --card-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 26px 50px -30px rgba(0,0,0,.95);
  --chip-bg:rgba(255,255,255,.06);
  --glass:rgba(21,24,32,.8);
  --pill-bg:#F2703A; --pill-fg:#14171F;
  --toast-bg:#ECEAE5; --toast-fg:#14171F;
}

/* ---- Base -------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:84px; }
body {
  margin:0; min-height:100dvh; display:flex; flex-direction:column;
  background:var(--page); color:var(--fg);
  /* Inter first so Latin (platform names, handles) sets in Inter; Telugu
     glyphs are not in Inter and fall through to Noto Sans Telugu per glyph. */
  font-family:"Inter", var(--font-te);
  font-size:16px; line-height:var(--lh-te);
  -webkit-font-smoothing:antialiased;
  /* App feel: no double-tap zoom delay, no grey flash on tap. Scrolling is
     left exactly as the phone does it (bounce, pull-to-refresh), as asked. */
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
a { color:var(--link); }
svg { flex:none; }
img { -webkit-user-drag:none; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip { position:absolute; left:16px; top:-60px; z-index:120; padding:10px 14px; border-radius:12px;
  background:var(--btn-bg); color:var(--btn-fg); font-weight:600; text-decoration:none; }
.skip:focus { top:12px; }
:focus-visible { outline:2px solid var(--v9-saffron); outline-offset:3px; border-radius:8px; }

/* ---- Loading screen ------------------------------------------------------------
   Visible on first paint. The script lifts it (.is-done) once the page has
   loaded; if the script never runs, splash-auto lifts it at 2.4 s anyway.
   .is-busy brings it back while a platform opens. */
.splash {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:radial-gradient(120% 80% at 50% 0%, #1D2333 0%, var(--ink) 55%, #090B10 100%);
  color:#FFFFFF; opacity:1; visibility:visible;
  transition:opacity 420ms var(--ease), visibility 420ms;
  animation:splash-auto 400ms var(--ease) 2.4s forwards;
}
.splash.is-done { opacity:0; visibility:hidden; pointer-events:none; animation:none; }
.splash.is-busy { opacity:1; visibility:visible; pointer-events:auto; animation:none; }
@keyframes splash-auto { to { opacity:0; visibility:hidden; pointer-events:none; } }
.splash__in { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px; }
.splash__mark { position:relative; width:116px; height:116px; display:grid; place-items:center; }
.splash__ring { position:absolute; inset:0; width:100%; height:100%; }
.splash__track { fill:none; stroke:rgba(255,255,255,.08); stroke-width:3; }
.splash__arc { fill:none; stroke:#F2703A; stroke-width:3; stroke-linecap:round;
  stroke-dasharray:339.3; stroke-dashoffset:250; transform-box:fill-box; transform-origin:center;
  animation:spin 1.05s linear infinite; }
.splash__logo { width:78px; height:78px; border-radius:50%;
  filter:drop-shadow(0 10px 26px rgba(227,27,35,.45)); animation:breathe 1.8s ease-in-out infinite; }
.splash__msg { margin:10px 0 0; display:flex; flex-direction:column; align-items:center; gap:3px; }
.splash__te { font:500 14px/1.4 var(--font-te); color:rgba(255,255,255,.72); white-space:nowrap; }
.splash__en { font:600 10.5px/1.2 "Inter", sans-serif; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.42); }
.splash__bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.06); overflow:hidden; }
.splash__bar span { position:absolute; top:0; bottom:0; left:0; width:42%;
  background:linear-gradient(90deg, transparent, #F2703A 35%, #FFB37A 60%, transparent);
  animation:sweep 1.25s ease-in-out infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.05); } }
@keyframes sweep { from { transform:translateX(-110%); } to { transform:translateX(250%); } }

/* ---- Header ------------------------------------------------------------------------ */
.hero { position:relative; isolation:isolate; overflow:hidden; background:var(--ink); color:#FFFFFF;
  /* Top padding clears the header icons (40 px row at 10 px) so the logo never
     sits under them, even on a 320 px phone. */
  padding:calc(56px + env(safe-area-inset-top)) 20px 72px; }
.hero__glow { position:absolute; inset:-35% -25% -10%; z-index:-2;
  background:
    radial-gradient(42% 38% at 82% 18%, rgba(242,112,58,.40), transparent 70%),
    radial-gradient(38% 34% at 14% 28%, rgba(227,27,35,.32), transparent 70%),
    radial-gradient(60% 46% at 50% 105%, rgba(232,163,61,.14), transparent 70%);
  animation:drift 16s ease-in-out infinite alternate; }
.hero__dots { position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.075) 1px, transparent 1.3px); background-size:18px 18px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 30%, #000 0%, transparent 80%); mask-image:radial-gradient(75% 65% at 50% 30%, #000 0%, transparent 80%); }
@keyframes drift { to { transform:translate3d(0, 4%, 0) scale(1.07); } }
.hero__in { max-width:520px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.hero__ring { position:relative; display:grid; padding:4px; border-radius:50%;
  background:conic-gradient(from var(--ring), #F2703A, #E31B23, #F5B24E, #F2703A);
  box-shadow:0 0 0 7px rgba(255,255,255,.045), 0 26px 50px -20px rgba(227,27,35,.7); }
.hero__ring::before { content:""; position:absolute; inset:-26px; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(242,112,58,.42), transparent); pointer-events:none; }
@media (prefers-reduced-motion: no-preference) {
  .hero__ring { animation:ring 7s linear infinite; }
  .hero__ring::before { animation:halo 3.6s ease-in-out infinite; }
}
@keyframes halo { 0%, 100% { transform:scale(.92); opacity:.65; } 50% { transform:scale(1.06); opacity:1; } }
/* The coin: one channel's logo on each face. An ink disc sits behind it so the
   ring's colours never show through while it is edge-on. */
.hero__disc { display:grid; border-radius:50%; background:var(--ink); perspective:700px; }
.hero__coin { display:grid; transform-style:preserve-3d; }
.hero.is-ready .hero__coin { transition:transform 820ms cubic-bezier(.34,1.32,.46,1); }
.hero[data-channel="podcasts"] .hero__coin { transform:rotateY(180deg); }
.hero__logo { grid-area:1 / 1; width:112px; height:112px; display:block; border-radius:50%; border:4px solid var(--ink); background:var(--ink);
  -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.hero__logo--news { transform:rotateY(0deg); }
.hero__logo--podcasts { transform:rotateY(180deg); }
.hero__name { margin:8px 0 0; display:inline-flex; align-items:center;
  font:800 clamp(27px, 7.6vw, 34px)/1.15 "Inter", sans-serif; letter-spacing:-.025em; color:#FFFFFF; white-space:nowrap; }
/* The word that changes with the channel. Its width is animated between the
   two words, so "Varahi9" glides to its new centre instead of jumping. */
.hero__brand { display:inline-block; }
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .hero__brand { color:transparent; -webkit-background-clip:text; background-clip:text; background-size:260% 100%; background-position:100% 0;
    background-image:linear-gradient(100deg, #FFFFFF 0 42%, #FFE3D1 48%, #FFFFFF 54%, #FFFFFF 100%); }
  @media (prefers-reduced-motion: no-preference) { .hero__brand { animation:name-sheen 6.5s ease-in-out 1.2s infinite; } }
}
@keyframes name-sheen { 0% { background-position:100% 0; } 28%, 100% { background-position:0 0; } }
.hero__word { display:inline-block; margin-left:.26em; perspective:420px; overflow-x:clip; overflow-y:visible; color:#FFAE80; }
.hero__ch { display:inline-block; transform-origin:50% 60% -.2em; }
.hero__tick { width:24px; height:24px; flex:none; margin-left:8px; }
.hero__tick path:first-child { fill:#F2703A; }
.hero__tick path + path { fill:none; stroke:#FFFFFF; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.badge { display:inline-flex; align-items:center; gap:8px; margin:0; padding:6px 14px; border-radius:999px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:600 13px/1.5 var(--font-te); color:#FFFFFF; }
.badge__en { padding-left:8px; border-left:1px solid rgba(255,255,255,.18); font:500 12px/1.5 "Inter", sans-serif; color:rgba(255,255,255,.66); }

/* ---- Main column -------------------------------------------------------------------- */
.wrap { position:relative; z-index:1; width:100%; max-width:560px; margin:-44px auto 0; padding:0 14px 28px;
  display:flex; flex-direction:column; gap:16px; flex:1; }

/* ---- Channel switcher ----------------------------------------------------------------
   Pinned under the status bar while the list scrolls. The dark pill slides
   between the two tabs; with the script off, both lists show and the tabs
   are plain links to them. */
.tabs { position:sticky; top:calc(10px + env(safe-area-inset-top)); z-index:40;
  display:grid; grid-template-columns:1fr 1fr; padding:5px; border-radius:20px;
  background:var(--glass); -webkit-backdrop-filter:saturate(170%) blur(18px); backdrop-filter:saturate(170%) blur(18px);
  border:1px solid var(--line); box-shadow:0 1px 2px rgba(20,23,31,.05), 0 16px 32px -20px rgba(20,23,31,.5); }
.tabs__pill { position:absolute; top:5px; bottom:5px; left:5px; width:calc(50% - 5px); border-radius:15px;
  background:var(--pill-bg); box-shadow:0 8px 18px -10px rgba(15,18,24,.7);
  transition:transform 380ms cubic-bezier(.2,.9,.25,1.1); }
.tabs[data-active="podcasts"] .tabs__pill { transform:translateX(100%); }
.tabs__tab { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:9px;
  min-height:52px; padding:6px 10px; border-radius:15px; color:var(--fg-soft); text-decoration:none;
  transition:color 260ms var(--ease); }
.tabs__tab[aria-selected="true"], .tabs:not([data-active]) .tabs__tab:first-of-type { color:var(--pill-fg); }
.tabs__avatar { width:30px; height:30px; border-radius:50%; flex:none; box-shadow:0 0 0 2px rgba(255,255,255,.85); }
.tabs__label { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.tabs__te { font:700 14px/1.3 var(--font-te); white-space:nowrap; }
.tabs__en { font:600 10px/1.2 "Inter", sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.7; white-space:nowrap; }

/* ---- Panels --------------------------------------------------------------------------- */
.panels { display:flex; flex-direction:column; gap:16px; touch-action:pan-y; }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:24px; box-shadow:var(--card-shadow); overflow:hidden; scroll-margin-top:84px; }
.panel[hidden] { display:none; }
@media (prefers-reduced-motion: no-preference) {
  .panel.from-right { animation:in-right 340ms var(--ease) both; }
  .panel.from-left { animation:in-left 340ms var(--ease) both; }
}
@keyframes in-right { from { transform:translateX(28px); opacity:.2; } to { transform:none; opacity:1; } }
@keyframes in-left  { from { transform:translateX(-28px); opacity:.2; } to { transform:none; opacity:1; } }

/* Channel profile, like the top of a channel page in an app. */
/* Once the tabs work, the header above carries the channel's logo and name,
   so each card's own logo-and-title strip would only repeat it. Without the
   script (both lists showing) the strips stay, to tell the two lists apart. */
.tabs[role="tablist"] ~ .panels .profile { display:none; }
.profile { display:flex; align-items:center; gap:14px; padding:18px 16px 16px;
  background:linear-gradient(180deg, rgba(217,79,4,.07), transparent 85%); border-bottom:1px solid var(--line); }
/* A slowly turning saffron-to-red ring round each channel's logo. */
@property --ring { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.profile__ring { flex:none; display:grid; padding:3px; border-radius:50%;
  background:conic-gradient(from var(--ring), #F2703A, #E31B23, #F5B24E, #F2703A);
  box-shadow:0 12px 26px -12px rgba(227,27,35,.6); }
@media (prefers-reduced-motion: no-preference) { .profile__ring { animation:ring 7s linear infinite; } }
@keyframes ring { to { --ring:360deg; } }
.profile__avatar { width:60px; height:60px; border-radius:50%; border:3px solid var(--surface); background:var(--surface); }
.profile__meta { min-width:0; flex:1; }
.profile__seal { margin:0; display:inline-flex; align-items:center; gap:5px; font:700 12px/1.4 var(--font-te); color:var(--v9-saffron-text); }
.profile__seal svg { width:15px; height:15px; fill:rgba(217,79,4,.14); stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; }
.profile__seal-en { font:600 10px/1.4 "Inter", sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
.profile__title { margin:2px 0 0; font:800 18.5px/1.25 "Inter", sans-serif; letter-spacing:-.01em; color:var(--fg); }
.profile__te { display:block; font:700 18px/1.35 var(--font-te); letter-spacing:0; white-space:nowrap; }
.profile__en { display:block; font:600 12.5px/1.3 "Inter", sans-serif; letter-spacing:0; color:var(--fg-mute); white-space:nowrap; }

/* ---- Rows --------------------------------------------------------------------------------- */
.links { list-style:none; margin:0; padding:6px 0; }
.link { position:relative; }
.link + .link::before { content:""; position:absolute; top:0; left:78px; right:16px; height:1px; background:var(--line); }
.link__a { display:flex; align-items:center; gap:14px; min-height:80px; padding:14px 14px 14px 16px;
  color:var(--fg); text-decoration:none;
  transition:background-color var(--dur) var(--ease), transform 160ms var(--ease); }
.link__a:hover { background:var(--hover); }
.link__a:active { background:var(--bg-sunken); transform:scale(.99); }
.link__a:focus-visible { outline-offset:-3px; }
.link__ico { flex:none; width:48px; height:48px; border-radius:15px; display:grid; place-items:center;
  background:var(--brand); color:#FFFFFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 20px -10px var(--brand); }
.link__ico svg { width:24px; height:24px; fill:currentColor; }
.link--youtube   { --brand:#FF0000; }
.link--instagram { --brand:#E4405F; }
.link--instagram .link__ico { background:radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.link--facebook  { --brand:#0866FF; }
.link--x         { --brand:#000000; }
.link--whatsapp  { --brand:#25D366; }
.link--telegram  { --brand:#26A5E4; }
.link--threads   { --brand:#000000; }
.link--linkedin  { --brand:#0A66C2; }
.link--googlenews{ --brand:#174EA6; }
.link--x .link__ico, .link--threads .link__ico { box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 8px 18px -10px #000; }
.link__txt { min-width:0; flex:1; display:flex; flex-direction:column; }
.link__name { font:700 16.5px/1.3 "Inter", sans-serif; letter-spacing:-.005em; }
.link__handle { font:500 12.5px/1.4 "Inter", sans-serif; color:var(--fg-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link__handle:empty { display:none; }
.link__what { margin-top:1px; font-family:var(--font-te); font-size:13px; color:var(--fg-soft); line-height:1.55; }
.link__go { flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:var(--chip-bg); color:var(--fg-mute);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 220ms var(--ease); }
.link__go svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.link__a:hover .link__go, .link__a:focus-visible .link__go, .link__a:active .link__go { background:var(--brand); color:#FFFFFF; }
.link--instagram .link__a:hover .link__go, .link--instagram .link__a:active .link__go { background:linear-gradient(135deg, #FD5949, #D6249F 55%, #285AEB); }
.links__empty { margin:0; padding:var(--s-8) var(--s-4); text-align:center; color:var(--fg-mute); font-family:var(--font-te); }
.links:has(> .link:not([hidden])) + .links__empty { display:none; }

/* "Also on": smaller accounts as round buttons along the foot of a card. */
.also { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 16px 16px; border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, var(--chip-bg)); }
.also__label { display:flex; flex-direction:column; align-items:flex-end; text-align:right; }
.also__te { font:600 13px/1.35 var(--font-te); color:var(--fg-soft); }
.also__en { font:600 10px/1.3 "Inter", sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); }
.also__btn { position:relative; width:44px; height:44px; flex:none; border-radius:50%; display:grid; place-items:center; color:#FFFFFF; text-decoration:none;
  transition:transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.also__btn svg { width:19px; height:19px; fill:currentColor; }
.also__btn--x { background:radial-gradient(120% 120% at 30% 20%, #3A3F4B 0%, #0B0D12 60%);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px rgba(20,23,31,.18), 0 12px 22px -10px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.18); }
:root[data-theme="dark"] .also__btn--x { box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px rgba(255,255,255,.22), 0 12px 22px -10px #000, inset 0 1px 0 rgba(255,255,255,.18); }
.also__btn:hover { transform:translateY(-2px); }
.also__btn:active { transform:scale(.9); }
.also__btn:focus-visible { outline-offset:4px; border-radius:50%; }
:root[data-lang="en"] .also__te { display:none; }
:root[data-lang="en"] .also__en { font:600 13px/1.35 "Inter", sans-serif; letter-spacing:0; text-transform:none; color:var(--fg-soft); }

/* Directly under the switcher. Telugu above English, like every label here. */
.swipehint { margin:-6px auto -2px; display:grid; grid-template-columns:auto auto; column-gap:7px; align-items:center;
  font:500 12px/1.35 var(--font-te); color:var(--fg-mute); }
.swipehint[hidden] { display:none; }
.swipehint svg { grid-row:1 / span 2; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.swipehint__en { font:500 10.5px/1.3 "Inter", sans-serif; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }

/* Scanner corner brackets around the code. The code stays black on white in
   BOTH themes: an inverted code is the commonest reason one fails to scan. */
.qr__frame { position:relative; display:block; padding:12px; border-radius:20px; background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(20,23,31,.08), 0 24px 44px -26px rgba(15,18,24,.55); }
.qr__frame::before { content:""; position:absolute; inset:-9px; pointer-events:none; --c:var(--v9-saffron);
  background:
    linear-gradient(var(--c), var(--c)) top left / 28px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 3px 28px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 28px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 3px 28px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 28px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 3px 28px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 28px 3px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 3px 28px no-repeat; }
.qr__frame::after { content:""; position:absolute; left:10px; right:10px; top:12px; height:3px; border-radius:3px; pointer-events:none;
  background:linear-gradient(90deg, transparent, #F2703A 18%, #FFB27F 50%, #F2703A 82%, transparent);
  box-shadow:0 0 14px 2px rgba(242,112,58,.7); opacity:0; }
@media (prefers-reduced-motion: no-preference) {
  .qrsheet[open] .qr__frame::after { animation:laser-once 1.3s ease-in-out .45s 1 both; }
}
@keyframes laser-once { 0% { top:12px; opacity:0; } 12% { opacity:1; } 80% { opacity:1; } 100% { top:calc(100% - 15px); opacity:0; } }
.qr__img { display:block; width:min(232px, 62vw); height:auto; aspect-ratio:1; border-radius:6px; }
/* The address as a pill, with a copy button that ticks when it has copied. */
.qr__url { margin:0; display:inline-flex; align-items:center; gap:8px; padding:5px 5px 5px 12px; border-radius:999px;
  background:var(--chip-bg); border:1px solid var(--line);
  font:700 15px/1.4 "Inter", sans-serif; letter-spacing:.01em; color:var(--fg); }
.qr__url-ico { display:grid; color:var(--v9-saffron-text); }
.qr__url-ico svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.qr__copy { position:relative; width:34px; height:34px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--pill-bg); color:var(--pill-fg); transition:transform 140ms var(--ease), background-color var(--dur) var(--ease); }
.qr__copy[hidden] { display:none; }
.qr__copy:active { transform:scale(.9); }
.qr__copy-i { grid-area:1 / 1; display:grid; transition:opacity 200ms var(--ease), transform 260ms var(--ease); }
.qr__copy-i svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.qr__copy-i--done { opacity:0; transform:scale(.5); }
.qr__copy.is-copied { background:#16A34A; color:#FFFFFF; }
.qr__copy.is-copied .qr__copy-i--copy { opacity:0; transform:scale(.5); }
.qr__copy.is-copied .qr__copy-i--done { opacity:1; transform:none; }

/* Per-row copy button (added by the script). It takes the place of the open
   arrow on the right; a small arrow beside the platform name keeps the "this
   opens the app" cue without costing the handle any width. */
.link__a.has-copy { padding-right:64px; }
.link__a.has-copy .link__go { display:none; }
.link__a.has-copy .link__name::after { content:"\2197"; margin-left:5px; font-weight:600; font-size:.82em; color:var(--fg-mute);
  transition:color var(--dur) var(--ease); }
.link__a.has-copy:hover .link__name::after, .link__a.has-copy:active .link__name::after { color:var(--brand); }
.link__copy { position:absolute; top:50%; right:14px; z-index:1; width:38px; height:38px; margin-top:-19px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; background:var(--chip-bg); color:var(--fg-soft);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 160ms var(--ease); }
.link__copy:hover { background:var(--brand); color:#FFFFFF; }
.link--instagram .link__copy:hover { background:linear-gradient(135deg, #FD5949, #D6249F 55%, #285AEB); }
.link__copy:active { transform:scale(.88); }
.link__copy:focus-visible { outline-offset:2px; border-radius:50%; }
.link__copy.is-copied, .link--instagram .link__copy.is-copied { background:#16A34A; color:#FFFFFF; }
.link__copy.is-copied .qr__copy-i--copy { opacity:0; transform:scale(.5); }
.link__copy.is-copied .qr__copy-i--done { opacity:1; transform:none; }

/* ---- Tiles in the QR card ----------------------------------------------------------
   Telugu label on ONE line, English label on the line UNDER it, never side
   by side (the Founder's rule). auto-fit collapses a hidden tile's track. */
.actions { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; }
.actions:not(:has(.btn:not([hidden]))) { display:none; }
.btn { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  min-height:112px; padding:16px 12px 15px; border-radius:18px; border:1px solid var(--line);
  background:var(--surface); color:var(--fg); font:inherit; text-decoration:none; text-align:center; cursor:pointer;
  box-shadow:0 1px 2px rgba(20,23,31,.05), 0 10px 24px -18px rgba(20,23,31,.5);
  transition:transform 160ms var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn:hover { border-color:var(--line-strong); }
.btn:active { transform:scale(.97); }
.btn[hidden] { display:none; }
.btn__ico { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:none;
  background:rgba(217,79,4,.10); color:var(--v9-saffron-text); box-shadow:inset 0 0 0 1px rgba(217,79,4,.12); }
.btn__ico svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn__label { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; max-width:100%; }
.btn__te { font-family:var(--font-te); font-size:15px; font-weight:600; line-height:1.4; white-space:nowrap; }
.btn__en { font:500 12px/1.35 "Inter", sans-serif; letter-spacing:.03em; color:var(--fg-mute); white-space:nowrap; }
.btn--primary { border-color:transparent; color:var(--btn-fg);
  background:var(--btn-bg);
  background:linear-gradient(180deg, color-mix(in srgb, var(--btn-bg) 80%, #FFFFFF) 0%, var(--btn-bg) 100%);
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--btn-bg) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.22); }
.btn--primary .btn__ico { background:rgba(255,255,255,.2); color:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.btn--primary .btn__en { color:inherit; opacity:.82; }

/* ---- Official accounts note ---------------------------------------------------------------- */
.official { display:flex; gap:12px; margin:0; padding:14px 16px; border-radius:18px;
  background:var(--chip-bg); border:1px dashed var(--line-strong);
  font-family:var(--font-te); font-size:var(--fs-sm); line-height:1.7; color:var(--fg-soft); }
.official svg { flex:none; width:20px; height:20px; margin-top:2px; fill:none; stroke:var(--v9-saffron-text); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.official a { color:var(--link); font-family:"Inter", sans-serif; font-weight:500; overflow-wrap:anywhere; }
.official__en { display:block; margin-top:2px; font-family:"Inter", sans-serif; color:var(--fg-mute); line-height:1.55; }

/* ---- Footer -------------------------------------------------------- */
.foot { display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 16px calc(30px + env(safe-area-inset-bottom)); text-align:center; }
.foot__site { margin:0; font-weight:700; color:var(--fg); letter-spacing:.01em; text-decoration:none; }
.foot__tag { border:0; background:none; padding:3px 8px; border-radius:999px; font:inherit; font-size:var(--fs-sm);
  font-weight:600; color:var(--v9-saffron-text); cursor:pointer; }
.foot__tag:active { background:var(--chip-bg); }
.foot__legal { margin:0; font-size:var(--fs-xs); color:var(--fg-mute); }

/* ---- Toast -------------------------------------------------------------- */
.toast { position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom)); z-index:90; margin:0;
  transform:translate(-50%, 14px); opacity:0; pointer-events:none;
  padding:11px 18px; border-radius:999px; background:var(--toast-bg); color:var(--toast-fg);
  font-family:var(--font-te); font-size:var(--fs-sm); font-weight:600; box-shadow:0 18px 40px -16px rgba(0,0,0,.55);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); max-width:calc(100vw - 32px); text-align:center; }
.toast[data-show="true"] { opacity:1; transform:translate(-50%, 0); }

/* ---- Load-in ---------------------------------------------------------------------------------- */
/* The content rises as the loading screen fades. Never parked invisible: the
   animation starts from a visible state and only moves it. */
@media (prefers-reduced-motion: no-preference) {
  .tabs, .panels, .qrteaser, .official { animation:rise 600ms var(--ease) both; }
  .tabs { animation-delay:380ms; }
  .panels { animation-delay:460ms; }
  .qrteaser { animation-delay:540ms; }
  .official { animation-delay:600ms; }
}
@keyframes rise { from { opacity:.35; } to { opacity:1; } }

/* ---- Wider screens ---------------------------------------------------------------------------- */
@media (min-width:640px) {
  .hero { padding-top:calc(60px + env(safe-area-inset-top)); padding-bottom:84px; }
  .hero__logo { width:128px; height:128px; }
  .wrap { gap:18px; }
  .qr__img { width:236px; }
}

/* ---- Reduced motion ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .splash__arc, .splash__logo, .splash__bar span, .hero__glow { animation:none; }
  .splash__arc { stroke-dashoffset:120; }
  .tabs__pill { transition:none; }
  .btn:active, .link__a:active, .hbtn:active { transform:none; }
}

/* ---- If a browser translates anyway ----------------------------------------------
   The page is marked translate="no", but a reader can still force Google
   Translate. Its tooltip and banner are injected UNSTYLED here (the CSP blocks
   their inline styles), so they would print "Original text · Rate this
   translation" at the bottom of the page. Keep them out of sight. */
#goog-gt-tt, .goog-te-banner-frame, .goog-te-balloon-frame, .goog-te-menu-frame, .goog-te-spinner-pos,
.skiptranslate:not(body), iframe.skiptranslate, .VIpgJd-ZVi9od-ORHb, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-yAWNEb-L7lbkb, [id^="goog-gt-"] { display:none !important; }
font[style] { background:none !important; box-shadow:none !important; }

/* ---- Settings: the (i) button and its drop-down ----------------------------------------
   Top right of the header. Icons only: theme (sun / moon) and language
   (అ / A). The menu stays dark in both themes, like the header it opens from. */
/* Header actions: QR · Share · (i). BARE white icons, no circle behind them
   (the Founder asked for the padding round the (i) to go). Each still has a
   finger-sized 40 px tap area, just an invisible one. */
.hero__actions { position:absolute; top:calc(10px + env(safe-area-inset-top)); right:8px; z-index:5; display:flex; align-items:center; gap:2px; }
.hbtn { width:40px; height:40px; padding:0; border:0; background:none; display:grid; place-items:center; cursor:pointer;
  color:#FFFFFF; text-decoration:none; border-radius:12px;
  transition:opacity 140ms var(--ease), transform 140ms var(--ease), color var(--dur) var(--ease); }
.hbtn[hidden] { display:none; }
.hero__home { position:absolute; top:calc(10px + env(safe-area-inset-top)); left:8px; z-index:5; }
.hbtn svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.hbtn:hover { opacity:.85; }
.hbtn:active { transform:scale(.9); opacity:.7; }
.prefs { position:relative; }
.prefs[hidden] { display:none; }
.prefs__btn[aria-expanded="true"] { color:#FFB37A; }
.prefs__menu { position:absolute; top:calc(100% + 6px); right:-2px; display:flex; flex-direction:column; gap:8px; padding:10px;
  border-radius:20px; background:rgba(22,26,36,.94); border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:saturate(170%) blur(20px); backdrop-filter:saturate(170%) blur(20px);
  box-shadow:0 26px 50px -20px rgba(0,0,0,.75); transform-origin:top right; }
.prefs__menu[hidden] { display:none; }
@media (prefers-reduced-motion: no-preference) { .prefs__menu { animation:menu-in 200ms var(--ease); } }
@keyframes menu-in { from { opacity:0; transform:translateY(-6px) scale(.96); } }
/* The little notch pointing at the (i). */
.prefs__menu::before { content:""; position:absolute; top:-6px; right:16px; width:12px; height:12px; transform:rotate(45deg);
  background:rgba(22,26,36,.94); border-left:1px solid rgba(255,255,255,.12); border-top:1px solid rgba(255,255,255,.12); }
.prefs__row { display:flex; align-items:center; gap:8px; }
.prefs__lead { width:32px; height:32px; display:grid; place-items:center; color:rgba(255,255,255,.5); }
.prefs__lead svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.prefs__lead svg .fill { fill:currentColor; stroke:none; }
.seg { display:flex; gap:4px; padding:4px; border-radius:14px; background:rgba(255,255,255,.07); }
.seg__opt { width:46px; height:40px; border:0; border-radius:10px; display:grid; place-items:center; cursor:pointer;
  background:transparent; color:rgba(255,255,255,.72);
  transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 120ms var(--ease); }
.seg__opt:active { transform:scale(.94); }
.seg__opt svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.seg__opt[aria-checked="true"] { color:#FFFFFF; background:linear-gradient(180deg, #F78A55, #D94F04);
  box-shadow:0 8px 16px -10px rgba(242,112,58,.95), inset 0 1px 0 rgba(255,255,255,.25); }
.glyph { fill:currentColor; stroke:none; font:700 18px/1 "Inter", sans-serif; }
.glyph--te { font:700 21px/1 "Noto Sans Telugu", sans-serif; }
.seg__opt svg text { fill:currentColor; stroke:none; }

/* ---- Language ----------------------------------------------------------------------------
   Telugu (default): Telugu on top, English under it, as everywhere above.
   English: English only, promoted to the main line, and the page marked lang="en". */
.link__what-en { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.en-only { display:none; }
:root[data-lang="en"] .profile__te,
:root[data-lang="en"] .qt__te,
:root[data-lang="en"] .badge > span:not(.badge__en),
:root[data-lang="en"] .tabs__te,
:root[data-lang="en"] .profile__seal > span:not(.profile__seal-en),
:root[data-lang="en"] .link__what-te,
:root[data-lang="en"] .btn__te,
:root[data-lang="en"] .swipehint > span:not(.swipehint__en),
:root[data-lang="en"] .official__te,
:root[data-lang="en"] .splash__te { display:none; }
:root[data-lang="en"] .en-only { display:inline; }
:root[data-lang="en"] .profile__en { font:800 18.5px/1.25 "Inter", sans-serif; letter-spacing:-.01em; color:var(--fg); }
:root[data-lang="en"] .qt__en { display:inline; }
:root[data-lang="en"] .badge__en { padding-left:0; border-left:0; font:600 13px/1.5 "Inter", sans-serif; color:#FFFFFF; }
:root[data-lang="en"] .tabs__en { font:700 14.5px/1.3 "Inter", sans-serif; letter-spacing:0; text-transform:none; opacity:1; }
:root[data-lang="en"] .profile__seal-en { font:700 11px/1.4 "Inter", sans-serif; letter-spacing:.1em; }
:root[data-lang="en"] .link__what-en { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal;
  font:400 13px/1.55 "Inter", sans-serif; }
:root[data-lang="en"] .btn__en { font:600 15px/1.4 "Inter", sans-serif; letter-spacing:0; color:inherit; opacity:1; }
:root[data-lang="en"] .swipehint__en { font-size:12px; letter-spacing:0; text-transform:none; }
:root[data-lang="en"] .official__en { margin-top:0; color:var(--fg-soft); }
:root[data-lang="en"] .splash__en { font:500 14px/1.4 "Inter", sans-serif; letter-spacing:.02em; text-transform:none; color:rgba(255,255,255,.72); }

/* ---- Touch ripple ---------------------------------------------------------------------
   A soft circle that spreads from where the finger lands, as in a native app. */
.link__a, .btn, .tabs__tab, .qrteaser { position:relative; overflow:hidden; }
.rpl { position:absolute; border-radius:50%; pointer-events:none; background:currentColor; opacity:.14;
  transform:translate(-50%, -50%) scale(0); animation:rpl 560ms var(--ease) forwards; }
@keyframes rpl { to { transform:translate(-50%, -50%) scale(1); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .rpl { display:none; } }

/* ---- QR teaser (in the page) ------------------------------------------------------------
   A dark card with the code in miniature; opens the QR pop-up. A soft light
   sweeps across it now and then, the one place on the page that moves on its own. */
.qrteaser { display:flex; align-items:center; gap:14px; padding:14px 14px 14px 14px; border-radius:24px;
  background:radial-gradient(120% 140% at 100% 0%, rgba(242,112,58,.32), transparent 55%), linear-gradient(140deg, #1E2433, var(--ink));
  color:#FFFFFF; text-decoration:none; scroll-margin-top:84px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 24px 44px -24px rgba(15,18,24,.75);
  transition:transform 160ms var(--ease); }
.qrteaser:active { transform:scale(.985); }
.qrteaser::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform:translateX(-120%); }
@media (prefers-reduced-motion: no-preference) { .qrteaser::after { animation:sheen 5.5s ease-in-out 1.6s infinite; } }
@keyframes sheen { 0% { transform:translateX(-120%); } 22%, 100% { transform:translateX(120%); } }
.qrteaser__code { flex:none; width:62px; height:62px; padding:5px; border-radius:14px; background:#FFFFFF;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.8); }
.qrteaser__code img { display:block; width:100%; height:100%; border-radius:4px; }
.qrteaser__code { position:relative; overflow:hidden; }
.qrteaser__code::after { content:""; position:absolute; left:3px; right:3px; top:8%; height:2px; border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent, #F2703A 20%, #FFB27F 50%, #F2703A 80%, transparent);
  box-shadow:0 0 8px 1px rgba(242,112,58,.75); opacity:0; }
@media (prefers-reduced-motion: no-preference) { .qrteaser__code::after { animation:laser 2.6s ease-in-out .8s infinite; } }
@keyframes laser { 0% { top:8%; opacity:0; } 10% { opacity:1; } 50% { top:88%; opacity:1; } 60% { opacity:0; } 100% { top:88%; opacity:0; } }
.qrteaser .btn__label { flex:1; align-items:flex-start; text-align:left; }
.qrteaser .btn__te { font-size:17px; font-weight:700; }
.qrteaser .btn__en { color:rgba(255,255,255,.62); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.qrteaser__go { flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(180deg, #F78A55, #D94F04); box-shadow:0 8px 18px -10px rgba(242,112,58,.95); }
.qrteaser__go svg { width:18px; height:18px; fill:none; stroke:#FFFFFF; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }

/* ---- QR pop-up card ----------------------------------------------------------------------
   A native <dialog>: focus stays inside, Escape and Back close it. The card
   drops down from the top with a little spring; closing plays it in reverse. */
.qrsheet { width:min(calc(100% - 24px), 420px); max-width:none; max-height:calc(100dvh - 24px); margin:auto;
  padding:0; border:0; background:transparent; color:var(--fg); overflow:visible; }
.qrsheet::backdrop { background:rgba(8,10,14,.55); -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%); }
@media (prefers-reduced-motion: no-preference) {
  .qrsheet[open] .qrsheet__card { animation:drop-in 520ms cubic-bezier(.2,.9,.25,1.15) both; }
  .qrsheet[open]::backdrop { animation:fade-in 300ms ease both; }
  .qrsheet.is-closing .qrsheet__card { animation:drop-out 240ms ease-in both; }
  .qrsheet.is-closing::backdrop { animation:fade-out 240ms ease-in both; }
}
@keyframes drop-in { from { transform:translateY(-70px) scale(.94); opacity:0; } to { transform:none; opacity:1; } }
@keyframes drop-out { to { transform:translateY(-40px) scale(.96); opacity:0; } }
@keyframes fade-in { from { opacity:0; } }
@keyframes fade-out { to { opacity:0; } }
.qrsheet__card { position:relative; display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:10px 18px 18px; border-radius:30px; background:var(--surface); border:1px solid var(--line);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.65); overflow:auto; max-height:calc(100dvh - 24px); touch-action:pan-y; }
.qrsheet__grab { width:40px; height:5px; border-radius:999px; background:var(--line-strong); }
.qrsheet__head { align-self:stretch; display:flex; align-items:center; gap:12px; }
.qrsheet__logo { width:46px; height:46px; border-radius:50%; flex:none;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px rgba(217,79,4,.4); }
.qrsheet__meta { flex:1; min-width:0; }
.qrsheet__title { margin:0; font:800 17px/1.25 "Inter", sans-serif; color:var(--fg); }
.qt__te { font:700 17px/1.3 var(--font-te); }
.qt__en { display:none; }
.qrsheet__sub { margin:2px 0 0; display:flex; flex-direction:column; }
.sub__te { font:500 13px/1.45 var(--font-te); color:var(--fg-soft); }
.sub__en { font:600 10.5px/1.3 "Inter", sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); }
.qrsheet__close { width:38px; height:38px; flex:none; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--chip-bg); color:var(--fg-soft); transition:transform 140ms var(--ease); }
.qrsheet__close:active { transform:scale(.9); }
.qrsheet__close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; }
.qrsheet__stage { position:relative; padding:12px; margin:4px 0 2px; border:0; background:none; cursor:zoom-in; border-radius:24px; }
.qrsheet__expand { position:absolute; right:2px; bottom:2px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--pill-bg); color:var(--pill-fg); box-shadow:0 8px 16px -8px rgba(0,0,0,.6); }
.qrsheet__expand svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.actions--3 { align-self:stretch; grid-template-columns:repeat(3, 1fr); gap:10px; }
.actions--3 .btn { min-height:96px; padding:12px 6px 11px; gap:8px; border-radius:18px; }
.actions--3 .btn__ico { width:40px; height:40px; border-radius:13px; }
.actions--3 .btn__te { font-size:14px; }
.actions--3 .btn__en { font-size:11px; }
/* Toasts raised inside the pop-up (the page's own toast sits under a modal). */
.qrsheet__toast { position:absolute; left:50%; bottom:14px; margin:0; transform:translate(-50%, 10px); opacity:0; pointer-events:none;
  padding:10px 16px; border-radius:999px; background:var(--toast-bg); color:var(--toast-fg); white-space:nowrap;
  font:600 13px/1.4 var(--font-te); box-shadow:0 14px 30px -12px rgba(0,0,0,.6);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.qrsheet__toast[data-show="true"] { opacity:1; transform:translate(-50%, 0); }

/* ---- Show-to-scan: the code alone, full screen, on white ----------------------------------- */
.present { position:fixed; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:24px; background:#FFFFFF; color:#14171F; cursor:zoom-out; }
.present[hidden] { display:none; }
@media (prefers-reduced-motion: no-preference) { .present:not([hidden]) { animation:fade-in 220ms ease both; } }
.present__img { width:min(86vw, 70dvh, 520px); height:auto; aspect-ratio:1; }
.present__url { margin:0; font:800 20px/1.3 "Inter", sans-serif; letter-spacing:.01em; }
.present__hint { margin:0; display:flex; flex-direction:column; align-items:center; }
.present__hint .sub__te { color:#4B5261; } .present__hint .sub__en { color:#8A92A0; }
/* English mode, for the parts added with the pop-up. */
:root[data-lang="en"] .sub__te { display:none; }
:root[data-lang="en"] .sub__en { font:500 13px/1.45 "Inter", sans-serif; letter-spacing:0; text-transform:none; color:var(--fg-soft); }
:root[data-lang="en"] .present__hint .sub__en { color:#4B5261; }
:root[data-lang="en"] .qrteaser .btn__en { font:700 17px/1.4 "Inter", sans-serif; letter-spacing:0; text-transform:none; color:#FFFFFF; }
:root[data-lang="en"] .actions--3 .btn__en { font-size:14px; }