/* New design (23 Oct): the page shell only. Every colour, size, gap and font
   inside a screen is the design's own, written inline in the templates as in
   ../design-new-2026-10-23/source/. Bengali and Hindi fall back to Noto, as
   the design's fonts have no Devanagari (Hind Siliguri has Bengali). */
html { background: #eeeff1; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
.screen { width: 100%; max-width: 390px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; }
.strip::-webkit-scrollbar { display: none; }
input:focus, textarea:focus { outline: none; border-color: #5B1B80 !important; }
:lang(hi) .screen, :lang(hi) .screen input, :lang(hi) .screen textarea { font-family: 'Hind Siliguri', 'Noto Sans Devanagari', sans-serif !important; }
@keyframes sweep { 0% { top: 8%; } 50% { top: 90%; } 100% { top: 8%; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .sweep, .pulse { animation: none !important; } }

/* Landing banner in বাংলা/हिन्दी (the user, 23 Oct, option A): the bot's wide
   banner shown whole at its own shape; no logo chip or tag over its headline
   (the banner already shows Britannia Marie Gold); a smaller menu button. */
.hero-wide { height: auto !important; }
.hero-wide [data-hero] { height: auto !important; object-fit: contain !important; }
.hero-wide .hero-chip, .hero-wide .hero-tag { display: none !important; }
.hero-wide .hero-menu { width: 36px !important; height: 36px !important; top: 8px !important; right: 8px !important; }
.hero-wide .hero-menu svg { width: 20px; height: 20px; }

/* PC phone preview (the user, 23 Oct): on a PC or laptop the design's
   390 x 844 screen is zoomed out to fit the window height, like a phone
   preview; grey sides stay. fit.js sets --fit = window height / 844 (max 1).
   Only for a mouse or trackpad (a touch laptop with a trackpad counts too)
   on a wide window: phones and tablets stay exactly as they are.
   zoom keeps text sharp and the layout real. Inside a zoomed column 100dvh is
   zoomed too, so min-height is divided by --fit to still fill the window.
   Taller screens (scan page, long My Moments) simply scroll as before.
   Overlays: a position: fixed sheet or dim must sit INSIDE .screen; then it
   is zoomed with the column, still covers the whole window height, and
   "max-width: 390px; margin: 0 auto" (or left/right 0) lines it up with the
   column. Anything fixed outside .screen is not zoomed. */
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .screen { zoom: var(--fit, 1); min-height: calc(100vh / var(--fit, 1)); min-height: calc(100dvh / var(--fit, 1)); }
  /* The Terms sheet sits after .screen, so it is zoomed the same way here. */
  #tc-sheet { zoom: var(--fit, 1); height: calc(85vh / var(--fit, 1)); height: calc(85dvh / var(--fit, 1)); }
}

/* Phones (the user, 23 Oct): the column fills the whole screen width, no thin
   grey strips at the sides on phones wider than 390 px. PCs keep the centred,
   zoomed column above. */
@media (pointer: coarse), (max-width: 699px) {
  html { background: transparent; }
  .screen, #tc-sheet { max-width: none; }
}