/* Palaka Balapam website (CW-1386). The app-site page system in
   the Palaka Balapam skin, "Storybook Soft" on the Slate mark:
   cream, board green, mango, sky and coral. Fonts are self-hosted (Fredoka
   for English, Baloo Tammudu 2 for Telugu); no scripts, no requests to anyone
   else.

   Floors the browser tests hold: no text under 13px (0.8125rem), every link
   at least 24 by 24 px, no sideways scroll at 320px or at 200% and 235% text
   size. Type is in rem so it follows the reader's text size; spacing is
   capped with vw so large text does not push the layout off the screen. */

@font-face {
  font-family: "Fredoka";
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/fredoka-medium.woff2") format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/fredoka-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Fredoka";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/fredoka-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo Tammudu 2";
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/balootammudu2-semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo Tammudu 2";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/assets/fonts/balootammudu2-bold.woff2") format("woff2");
}

/* The site has one light look in both colour schemes, from the brand tokens
   in design-system/palaka-balapam/tokens.json. The tokens are restated for a
   forced dark scheme so it keeps the same contrast. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  color-scheme: light;
  --font-body: "Fredoka", "Baloo Tammudu 2", system-ui, sans-serif;
  --font-te: "Baloo Tammudu 2", "Fredoka", sans-serif;
  --m: clamp(16px, 5vw, 7.5rem);
  --g: 1.5rem;
  --radius: 1.75rem;
  --bg: #fff6e6;
  --ink: #3a2e27;
  --muted: #6b5646;
  --line: #f0dcbd;
  --card: #ffffff;
  --accent: #a8452f;
  --on-accent: #ffffff;
  --b-bg: #2f4a3f; --b-ink: #fff6e6; --b-muted: #cfe0d2; --b-line: #46695a; --b-card: #3e5f52; --b-accent: #ffb627; --b-on-accent: #3a2e27;
  --c-bg: #ffb627; --c-ink: #3a2e27; --c-muted: #5c4210; --c-line: #e0961a; --c-card: #ffe3a8; --c-accent: #842f1c; --c-on-accent: #ffffff;
  --d-bg: #e4f4fd; --d-ink: #3a2e27; --d-muted: #4f5f6b; --d-line: #bfe0f3; --d-card: #ffffff; --d-accent: #1f6fa3; --d-on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: light; --bg: #fff6e6; --ink: #3a2e27; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  /* The page is the query container for the large-text layout rules below. */
  container: page / inline-size;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
/* Long words (Telugu compounds, the brand name, email) wrap at large text sizes instead of pushing the page sideways. */
h1, h2, h3, h4, p, li, dt, dd, figcaption, td, th { overflow-wrap: anywhere; }
ul, ol { list-style: none; }
main { display: block; }
main:focus { outline: none; }

/* Telugu: its own face, never tracked or upper-cased, with taller lines. */
:lang(te) { font-family: var(--font-te); letter-spacing: 0 !important; text-transform: none !important; font-style: normal !important; line-height: 1.7; }
h1:lang(te), h2:lang(te), h3:lang(te) { line-height: 1.45; }
:lang(en) { font-family: var(--font-body); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  z-index: 20;
  padding: 0.5rem 0.9rem;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: 0.75rem;
}
.skip-link:focus { top: 1rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(75rem + 2 * var(--m)); margin: 0 auto; padding: 0 var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g); }
.grid > * { min-width: 0; }
.c-3 { grid-column-end: span 3; } .c-4 { grid-column-end: span 4; } .c-5 { grid-column-end: span 5; }
.c-6 { grid-column-end: span 6; } .c-7 { grid-column-end: span 7; } .c-8 { grid-column-end: span 8; }
.c-2 { grid-column-end: span 2; }
.c-12 { grid-column: 1 / -1; }
.s-5 { grid-column-start: 5; } .s-6 { grid-column-start: 6; } .s-7 { grid-column-start: 7; }
.s-8 { grid-column-start: 8; } .s-9 { grid-column-start: 9; }
.center { align-items: center; }
@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid > * { grid-column: 1 / -1; }
  .grid > .t-4 { grid-column: span 4; }
}
@media (max-width: 700px) {
  :root { --g: 1rem; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid > *, .grid > .t-4 { grid-column: 1 / -1; }
  .grid > .m-2 { grid-column: span 2; }
}

/* Colour bands. A band re-points the working tokens. */
.band { background: var(--bg); color: var(--ink); padding: clamp(4rem, 8vw, 6.25rem) 0; position: relative; }
.band-b { --bg: var(--b-bg); --ink: var(--b-ink); --muted: var(--b-muted); --line: var(--b-line); --card: var(--b-card); --accent: var(--b-accent); --on-accent: var(--b-on-accent); }
.band-c { --bg: var(--c-bg); --ink: var(--c-ink); --muted: var(--c-muted); --line: var(--c-line); --card: var(--c-card); --accent: var(--c-accent); --on-accent: var(--c-on-accent); }
.band-d { --bg: var(--d-bg); --ink: var(--d-ink); --muted: var(--d-muted); --line: var(--d-line); --card: var(--d-card); --accent: var(--d-accent); --on-accent: var(--d-on-accent); }
.band-coral { --bg: #ff7a6b; --ink: #3a2e27; --muted: #5a231a; --line: #e0584a; --card: #ffe4df; --accent: #3a2e27; --on-accent: #fff6e6; }
.band-mint { --bg: #e3f4d9; --line: #bfe0b0; --muted: #4c5f45; --accent: #8f3521; }
.band-blush { --bg: #ffe4df; --line: #f5c4bc; --muted: #6b4640; --accent: #8f3521; }

/* Type roles */
.eyebrow { font-size: 0.8125rem; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.display { font-weight: 600; font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); line-height: 1.06; letter-spacing: -0.01em; }
.display:lang(te) { font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem); line-height: 1.45; }
.h2 { font-weight: 600; font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3.375rem); line-height: 1.1; letter-spacing: -0.01em; }
.h2:lang(te) { font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.45; }
.h3 { font-weight: 600; font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.25; }
.lede { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem); line-height: 1.55; color: var(--muted); }
.small { font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.muted { color: var(--muted); }
.mt-s { margin-top: 0.875rem; } .mt-m { margin-top: 1.25rem; } .mt-l { margin-top: 2rem; } .mt-xl { margin-top: 3rem; }
.te-big { font-family: var(--font-te); font-weight: 700; line-height: 1.5; }
.chalk { color: #ffb627; }

/* Header */
.site-header { position: relative; z-index: 5; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; min-height: 4.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem;
  font-weight: 600; font-size: 1.3125rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem; flex: none; }
.brand span, .foot-brand span { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.brand { max-width: 100%; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
/* Inline links inside sentences reach the 24 px target height without changing the line. */
main :is(p, li, dd, td) > a:not([class]) { padding-block: 0.1875rem; }
.site-nav ul { display: flex; gap: 0.375rem; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.5rem 0.875rem; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500; color: var(--muted); text-decoration: none;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.nav-end { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.875rem; max-width: 100%; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.875rem; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 500; border: 1px solid var(--line); white-space: nowrap;
}
.pill::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--accent); flex: none; }
.lang { display: inline-flex; align-items: center; padding: 0.1875rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.lang a, .lang .on {
  display: inline-flex; align-items: center; min-height: 2rem; padding: 0.25rem 0.8125rem; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; line-height: 1.4; text-decoration: none;
}
.lang a { color: var(--muted); }
.lang a:hover { color: var(--ink); }
.lang .on { background: var(--accent); color: var(--on-accent); }

/* The phone menu: a disclosure, no script. */
.menu { display: none; position: relative; }
.menu summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.875rem;
  border-radius: 999px; border: 1px solid var(--line); font-size: 0.875rem; font-weight: 500; cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary i { display: block; width: 1rem; height: 0.625rem; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu ul {
  position: absolute; right: 0; top: calc(100% + 0.5rem); width: max-content; min-width: min(12rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); padding: 0.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: 0 1.5rem 3rem -1rem rgba(58, 46, 39, 0.35);
}
.menu a { display: flex; align-items: center; min-height: 2.75rem; padding: 0.5rem min(0.875rem, 14px); border-radius: 0.875rem; text-decoration: none; }
.menu a[aria-current="page"] { background: var(--bg); color: var(--accent); }
@media (max-width: 860px) {
  .nav-in { min-height: 4rem; gap: 0.5rem 0.75rem; flex-wrap: wrap; padding-block: 0.5rem; }
  .site-nav, .site-header .pill, .lang .on { display: none; }
  .lang a { color: var(--ink); }
  .menu { display: block; }
  .nav-end { gap: 0.5rem; }
  .brand { font-size: 1.125rem; }
  .brand img { width: 1.875rem; height: 1.875rem; border-radius: 0.5rem; }
}
@media (max-width: 480px) {
  /* Icon-only menu button on phones, as on the board; the label stays for screen readers. */
  .menu summary { justify-content: center; min-width: 2.75rem; padding-inline: 0.75rem; }
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 359px) {
  .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Store chip: the app is being built, so its one slot only says it is not
   yet available. No store badge artwork, no store link, no Android slot. */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.store {
  display: flex; flex-direction: column; justify-content: center; min-width: min(11rem, 100%); min-height: 3.75rem;
  padding: 0.5rem min(1.25rem, 20px); border-radius: 1.25rem; border: 1.5px dashed var(--muted); color: var(--ink); text-align: left;
}
.store-k { font-size: 0.8125rem; line-height: 1.2; color: var(--muted); letter-spacing: 0.04em; }
.store-v { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; }
.store-v:lang(te) { line-height: 1.7; margin-top: 0.125rem; }
.stores-note { margin-top: 0.875rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); max-width: 44ch; }
.stores-note + .stores-note { margin-top: 0.375rem; }
@media (max-width: 480px) { .store { min-width: 0; flex: 1 1 9rem; padding-inline: min(1rem, 16px); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 3.25rem; padding: 0.5rem min(1.625rem, 26px); text-align: center;
  border-radius: 999px; font-weight: 600; font-size: 1rem; background: var(--accent); color: var(--on-accent); text-decoration: none;
  box-shadow: 0 5px 0 rgba(58, 46, 39, 0.28);
}
.text-link { display: inline-flex; align-items: center; min-height: 1.5rem; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Shared Palaka pieces: the slate and the left-out list */
.board {
  background: #2f4a3f; color: #fff6e6; position: relative;
  border: 0.875rem solid #e3a874; border-radius: 2.25rem;
  box-shadow: 0 0 0 4px #c98a55 inset, 0 10px 0 #c98a55, 0 34px 60px -24px rgba(58, 46, 39, 0.5);
}
.leftout li {
  display: flex; gap: 1rem; align-items: center; padding: 1.125rem 0; border-top: 2px dashed var(--line);
  font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.375rem); font-weight: 600; line-height: 1.35;
}
.leftout li::before { content: ""; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--accent); box-shadow: inset 0 0 0 0.5625rem var(--bg); }
.close { text-align: center; }
.close .stores { justify-content: center; margin-top: 1.75rem; }
.close .lede { margin: 1rem auto 0; max-width: 50ch; }
.close .lede a { color: var(--ink); }

/* Home: the slate. The chalk letter is a fixed-size (px), aria-hidden
   drawing of the first letter a child writes on a slate, so larger text
   sizes reflow the page around it. */
.hero { padding: clamp(5rem, 9vw, 7rem) 0 clamp(4rem, 8vw, 6.875rem); }
.slate { padding: min(4.5rem, 72px) min(4.5rem, 72px) min(5rem, 80px); min-height: 35rem; }
.slate::before, .slate::after { content: ""; position: absolute; left: min(3.5rem, 56px); right: min(3.5rem, 56px); height: 4px; border-radius: 2px; background: #3e5f52; }
.slate::before { top: min(2.75rem, 44px); }
.slate::after { bottom: min(2.75rem, 44px); }
.slate .text { position: relative; max-width: calc(100% - 352px); }
.slate .wm { font-size: clamp(3.25rem, 7.2vw, 6.5rem); line-height: 1.35; }
.slate h1 { font-size: clamp(1.625rem, 3vw, 2.75rem); line-height: 1.15; font-weight: 600; max-width: 20ch; text-wrap: balance; margin-top: 0.25rem; }
.slate .lede { color: #cfe0d2; max-width: 40ch; margin-top: 1.25rem; }
.slate .stores { margin-top: 1.875rem; }
.slate .store { border-color: #cfe0d2; color: #fff6e6; }
.slate .store-k, .slate .stores-note { color: #cfe0d2; }
.chalk-letter { position: absolute; right: 84px; top: 50%; width: 280px; transform: translateY(-50%) rotate(-4deg); text-align: center; }
.chalk-letter b {
  display: block; font-family: var(--font-te); font-weight: 700; font-size: 240px; line-height: 1; padding-top: 70px;
  color: transparent; -webkit-text-stroke: 4px #fff6e6; opacity: 0.9;
}
.slate .chitti { position: absolute; right: 392px; top: -112px; width: 150px; }
@media (max-width: 1000px) {
  .slate .text { max-width: none; }
  .chalk-letter { position: relative; right: auto; top: auto; transform: rotate(-4deg); margin: 1.5rem auto 0; width: 200px; }
  .chalk-letter b { font-size: 160px; padding-top: 46px; -webkit-text-stroke-width: 3px; }
  .slate .chitti { right: 1.5rem; top: -6rem; width: 7.5rem; }
}
@media (max-width: 700px) {
  .hero { padding: 4.75rem 0 4rem; }
  .slate { padding: 2.75rem 22px 3.25rem; border-width: 10px; border-radius: 1.75rem; min-height: 0; }
  .slate::before, .slate::after { left: 22px; right: 22px; }
  .slate::before { top: 1.375rem; }
  .slate::after { bottom: 1.5rem; }
  .slate .chitti { width: 6rem; top: -5rem; right: 0.625rem; }
}

/* Home: the name band, Chitti beside the text */
.par { align-items: center; }
.par img { width: 13.75rem; margin: 0 auto; }
.par .lede { max-width: 48ch; }
@media (max-width: 700px) { .par img { width: 9.375rem; margin-bottom: 1.25rem; } }

/* Legal pages: privacy */
.legal-head { padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.legal-head .display { margin-top: 0.875rem; max-width: 16ch; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 1.75rem; font-size: 0.875rem; color: var(--muted); }
.legal-meta b { color: var(--ink); font-weight: 600; }
.legal-meta a { color: var(--ink); display: inline-flex; align-items: center; min-height: 1.5rem; }
.legal-body { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(4.5rem, 8vw, 7rem); align-items: start; }
/* Sticky beside the policy, but never taller than the screen: at large text
   sizes the list scrolls on its own, so a focused link is always in view. */
.toc { position: sticky; top: 1.5rem; font-size: 0.9375rem; max-height: calc(100vh - 3rem); overflow-y: auto; overscroll-behavior: contain; }
.toc h2 { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.75rem; }
.toc li { border-left: 2px solid var(--line); }
.toc a { display: flex; align-items: center; min-height: 2.25rem; padding: 0.375rem 0 0.375rem 1rem; color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); }
/* Drawn inside the link, so the scrolling list never clips the focus ring. */
.toc a:focus-visible { outline-offset: -3px; }
@media (max-width: 1000px) { .toc { position: static; max-height: none; overflow: visible; } .toc ul { columns: 2; column-gap: 1.5rem; } .toc li { break-inside: avoid; } }
@media (max-width: 700px) { .toc ul { columns: 1; } }
.prose { max-width: 42.5rem; }
.prose section { padding-top: 2.75rem; scroll-margin-top: 1rem; }
.prose h2 { font-weight: 600; font-size: clamp(1.5625rem, 1.3rem + 0.8vw, 1.875rem); line-height: 1.25; display: flex; gap: 1rem; align-items: baseline; }
.prose h2:lang(te) { line-height: 1.5; }
.prose h2 .num { font-size: 0.875rem; color: var(--accent); letter-spacing: 0.06em; min-width: 1.5rem; flex: none; }
.prose p, .prose li { margin-top: 0.875rem; }
.prose ul li { padding-left: 1.375rem; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0.125rem; top: 0.8em; width: 0.5rem; height: 2px; background: var(--accent); }
.prose a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose a:not(.btn) { display: inline-block; min-height: 1.5rem; }
.summary { padding: 1.75rem 1.875rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.summary h2 { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; display: block; }
.summary li { margin-top: 0.75rem; }
.callout { margin-top: 1.75rem; padding: 1.375rem 1.5rem; border-left: 4px solid var(--accent); background: var(--card); border-radius: 0 var(--radius) var(--radius) 0; }
@media (max-width: 700px) { .summary { padding: 1.375rem 1.25rem; } .prose h2 { gap: 0.75rem; } }

/* Support */
.sh { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.sh .display { margin-top: 0.875rem; max-width: 15ch; }
.sh .lede { margin-top: 1.25rem; max-width: 54ch; }
.sb { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(4rem, 8vw, 6.25rem); align-items: start; }
.contact { padding: min(2rem, 32px); border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: 0 6px 0 rgba(58, 46, 39, 0.1); }
.contact h2 { font-weight: 600; font-size: 1.875rem; line-height: 1.25; }
.contact h2:lang(te) { font-size: 1.625rem; line-height: 1.5; }
.contact p { margin-top: 0.75rem; color: var(--muted); }
.contact .btn { margin-top: 1.375rem; width: 100%; }
.contact .addr { margin-top: 0.75rem; color: var(--ink); }
.contact .warn { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink); }
@media (max-width: 1000px) { .contact { margin-bottom: 2.25rem; } }
.faq-item { border-top: 2px dashed var(--line); padding: 1.375rem 0; scroll-margin-top: 1rem; }
.faq-item:last-child { border-bottom: 2px dashed var(--line); }
.faq-item h3 { font-weight: 600; font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.35; }
.faq-item h3:lang(te) { line-height: 1.6; }
.faq-item p { margin-top: 0.75rem; color: var(--muted); max-width: 60ch; }
.faq-item a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; display: inline-block; min-height: 1.5rem; }
.faq-group > h2 { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.75rem; }

/* Not found */
.nf { padding: clamp(4rem, 8vw, 6rem) 0; }
.nf .grid { align-items: center; }
.nf img { width: 11.25rem; margin: 0 auto; }
.nf ul { margin-top: 1.5rem; }
.nf li + li { margin-top: 0.5rem; }
.nf a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

/* Footer */
.site-footer { background: var(--bg); color: var(--ink); padding: clamp(3rem, 6vw, 4.5rem) 0 2.25rem; border-top: 1px solid var(--line); }
.site-footer .grid { row-gap: 1.75rem; }
.site-footer h2 { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 0.5rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: 0.9375rem; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.site-footer li a[aria-current="page"] { color: var(--accent); }
.foot-brand { font-weight: 600; font-size: 1.3125rem; display: flex; align-items: center; gap: 0.75rem; }
.foot-brand img { width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem; }
.foot-blurb { margin-top: 1rem; max-width: 36ch; font-size: 0.9375rem; color: var(--muted); }
.site-footer .stores { margin-top: 1.375rem; }
.foot-note { margin-top: 3rem; padding: 1.125rem 1.375rem; border: 1px solid var(--line); border-radius: 1.25rem; font-size: 0.875rem; color: var(--muted); }
.foot-base { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: center; font-size: 0.875rem; color: var(--muted); }
.cw { display: inline-flex; align-items: center; gap: 0.625rem; color: var(--ink); flex-wrap: wrap; }
.cw img { height: 0.9375rem; width: auto; }
.foot-base .sp { margin-left: auto; }
@media (max-width: 700px) { .foot-base .sp { margin-left: 0; width: 100%; } }

/* Large text. Spacing above is capped in px so it does not grow with the text,
   and when the page is narrow for its text size the columns stack, so button,
   chip and card labels keep whole words on a line or two. */
@container page (max-width: 40em) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .grid > *, .grid > .t-4, .grid > .m-2 { grid-column: 1 / -1; }
  .toc { position: static; max-height: none; overflow: visible; }
  .slate .text { max-width: none; }
  .chalk-letter { position: relative; right: auto; top: auto; transform: rotate(-4deg); margin: 1.5rem auto 0; width: 200px; }
  .chalk-letter b { font-size: 160px; padding-top: 46px; -webkit-text-stroke-width: 3px; }
}
@container page (max-width: 17em) {
  .leftout li { font-size: 1.0625rem; gap: 10px; }
  .leftout li::before { width: 14px; height: 14px; box-shadow: inset 0 0 0 4px var(--bg); }
  .contact { padding: 16px; }
  .contact h2, .contact h2:lang(te) { font-size: 1.25rem; }
  .faq-item h3:lang(te) { font-size: 1rem; }
  .slate { padding-inline: 6px; border-width: 6px; }
  .slate::before, .slate::after { left: 6px; right: 6px; }
  .store { padding-inline: 6px; }
  .store-v { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}