/* BixLearn website foundations.
   Brand Book v1.0, chapters 04–09, with the app's contrast adjustments from
   Lumio/lib/core/theme/bix_colors.dart. Presentation lives in playful.css.
   Mango has two jobs: a bright button FILL and a darker, accessible text INK. */

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --surface: #fbf6ed;
  --surface-bright: #ffffff;
  --surface-dim: #f0e7d8;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #fdfaf4;
  --surface-container: #ffffff;
  --surface-container-high: #fffaf2;
  --surface-container-highest: #f0e7d8;
  --surface-variant: #f0e7d8;
  --background: #fbf6ed;

  /* Ink */
  --on-surface: #33241a;
  --on-surface-variant: #6b5647;
  --on-background: #33241a;
  --heading: #1c2440;
  --inverse-surface: #1c2440;
  --inverse-on-surface: #f5eee1;

  /* Lines */
  --outline: #d5c3a6;
  --outline-variant: #ede3d2;

  /* Mango: accessible ink / interactive fill / baked edge. */
  --primary: #a85200;
  --primary-interactive: #ff8e1f;
  --primary-bright: #ffa84a;
  --primary-pressed: #e98314;
  --button-edge: #e07000;
  --on-primary-interactive: #33241a;
  --primary-container: #ffe9cf;
  --on-primary: #ffffff;
  --on-primary-container: #8a4a00;
  --surface-tint: #a85200;
  --primary-fixed: #ffe9cf;
  --primary-fixed-dim: #d5c3a6;
  --on-primary-fixed: #33241a;
  --on-primary-fixed-variant: #8a4a00;

  /* Tinta structure; Ube owns premium; Matcha owns correct answers. */
  --secondary: #2b3558;
  --secondary-container: #e0e4ef;
  --secondary-fixed-dim: #b6bfda;
  --on-secondary-container: #232c4c;
  --on-secondary-fixed: #232c4c;
  --premium: #5b3fd1;
  --premium-container: #eee8ff;
  --premium-outline: #cfc3f3;
  --success: #1d7a4d;
  --success-container: #ddf2e7;
  --on-success-container: #1d6343;
  --error: #c6353b;
  --error-container: #fbe4e5;
  --on-error-container: #63080d;
  --info: #1b6fac;
  --card-edge: #ede3d2;

  --tint-primary: #ffe9cf;
  --tint-primary-soft: #fffaf2;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Baloo 2', 'Nunito', sans-serif;
  --motion-quick: 120ms;
  --motion-standard: 240ms;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  color-scheme: light;

  /* Spacing rhythm */
  --unit: 4px;
  --stack-sm: 8px;
  --stack-md: 16px;
  --gutter: 16px;
  --container-margin: 24px;
  --section-gap: 48px;

  /* Shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Layout */
  --content-max: 1200px;
  --measure: 800px;
}

/* Bix Tinta is the app's designed dark palette, not an inverted light theme. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #10162a;
    --surface: #10162a;
    --surface-bright: #232c4e;
    --surface-dim: #151c33;
    --surface-container-lowest: #1b2340;
    --surface-container-low: #151c33;
    --surface-container: #1b2340;
    --surface-container-high: #232c4e;
    --surface-container-highest: #2c3659;
    --surface-variant: #2c3659;
    --on-surface: #f5eee1;
    --on-background: #f5eee1;
    --on-surface-variant: #b9ac9c;
    --heading: #f5eee1;
    --outline: #3d4874;
    --outline-variant: #2c3557;
    --primary: #ff8e1f;
    --primary-bright: #ffb268;
    --primary-pressed: #e07000;
    --button-edge: #b85a00;
    --primary-container: #3a2e17;
    --on-primary: #33241a;
    --on-primary-container: #ffc172;
    --surface-tint: #ff8e1f;
    --primary-fixed: #3a2e17;
    --primary-fixed-dim: #3d4874;
    --on-primary-fixed: #f5eee1;
    --on-primary-fixed-variant: #ffc172;
    --secondary: #b6bfda;
    --secondary-container: #2f3a61;
    --on-secondary-container: #d9deee;
    --on-secondary-fixed: #d9deee;
    --premium: #a48bff;
    --premium-container: #2f2458;
    --premium-outline: #625087;
    --success: #4cbe85;
    --success-container: #153c2c;
    --on-success-container: #95e3b9;
    --error: #f0666b;
    --error-container: #7a1b20;
    --on-error-container: #ffd9da;
    --info: #57a9e8;
    --card-edge: #2c3557;
    --tint-primary: #3a2e17;
    --tint-primary-soft: #1b2340;
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--on-background);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
}

ul, ol {
  padding: 0;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
}

::selection {
  background: var(--primary-fixed);
  color: var(--on-primary-fixed);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

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

/* ---------- Type scale ---------- */
.headline-lg {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .headline-lg {
    font-size: 40px;
    line-height: 48px;
    letter-spacing: -0.02em;
  }
}

.headline-md {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  text-wrap: balance;
}

.body-lg {
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}

.body-md {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.label-md {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.label-sm {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.eyebrow {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.muted {
  color: var(--on-surface-variant);
}

/* ---------- Layout ---------- */
.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-margin);
}

.section {
  padding-block: 80px;
}

@media (max-width: 767px) {
  .section { padding-block: 56px; }
}

.section-tinted {
  background: var(--tint-primary-soft);
}

.skip-link {
  position: absolute;
  inset-inline-start: 0;
  transform: translateY(-160%);
  top: 0;
  background: var(--primary);
  color: var(--on-primary);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 100;
  font-size: 14px;
  font-weight: 600;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--outline-variant);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gutter);
  min-height: 80px;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-margin);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--primary);
  font-size: 24px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Legacy navigation layout, retained for any standalone supporting content.
   Public links now live in the footer of every page. */
.nav {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--on-surface-variant);
  text-decoration: none;
  white-space: nowrap;
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav a:hover {
  color: var(--primary);
}

.nav a[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
  border-bottom-color: var(--primary);
}

@media (max-width: 899px) {
  .site-header__inner {
    padding-block: 12px;
    min-height: 0;
  }

  /* Wraps rather than scrolls. This used to be a horizontal scroll strip with
     the scrollbar hidden, which fitted four items on a 390px screen and left
     the rest reachable only by a swipe nothing advertised — with six items
     that silently hid Privacy Policy and Terms of Use, the two a reviewer or
     a regulator goes looking for. Two visible rows beat one row with a secret. */
  .nav {
    order: 3;
    width: 100%;
    gap: 12px 24px;
    flex-wrap: wrap;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--gutter);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-full);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 24px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn-primary:hover {
  background: var(--surface-tint);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline:hover {
  background: var(--tint-primary);
}



.btn-lg {
  padding: 16px 32px;
}

.btn-sm {
  padding: 9px 18px;
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  gap: 64px;
  align-items: center;
  padding-block: 96px;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 899px) {
  .hero { padding-block: 56px; }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* The h1 is the app name alone — it is the most prominent element an
   automated name-matcher reads, and Google's OAuth branding check compares
   it against the consent screen's App name field. Keep them identical. */
.hero h1 {
  margin-block: 16px 8px;
  color: var(--on-surface);
}

/* Carries the line that used to be the h1, so the headline hierarchy still
   reads the same to a human. */
.hero__tagline {
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-surface);
  margin-bottom: 24px;
  text-wrap: balance;
}

@media (max-width: 767px) {
  .hero__tagline {
    font-size: 20px;
    line-height: 28px;
  }
}

.hero__lede {
  color: var(--on-surface-variant);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* The homepage now opens the learning experience on this same domain. */
.entry-hero { padding-block: 48px; min-height: min(620px, calc(100svh - 80px)); }
.entry-hero .hero__copy { gap: 28px; }
.entry-hero .hero__tagline { margin-bottom: 16px; }
.entry-hero .hero__lede { max-width: 38ch; }
.entry-actions { flex-direction: column; align-items: stretch; max-width: 360px; }
.entry-actions .btn { min-height: 52px; padding-block: 14px; }
.btn:active { transform: translateY(1px); }
@media (max-width: 899px) {
  .entry-hero { min-height: 0; gap: 24px; padding-block: 24px 40px; }
  .entry-hero .hero__art { order: -1; max-width: 280px; justify-self: center; }
  .entry-hero .hero__copy { gap: 20px; }
  .entry-hero h1 { margin-top: 0; }
  .entry-hero .hero__tagline { margin-bottom: 12px; }
  .entry-actions { max-width: none; gap: 12px; }
}
@media (max-width: 480px) {
  .entry-hero .hero__art { max-width: 220px; }
  .entry-hero h1 { font-size: 36px; line-height: 1.15; }
  .entry-hero .hero__lede { font-size: 16px; line-height: 1.5; }
}

/* Legacy hero artwork layout, retained for direct supporting content. */
.hero__art {
  display: block;
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-md);
  overflow: hidden;
  line-height: 0;
}

.hero__art img {
  display: block;
  width: 100%;
  height: auto;
}


/* ---------- Section heads ---------- */
.section-head {
  margin-bottom: 64px;
}

.section-head--center {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.section-head h2 {
  margin-top: 16px;
  color: var(--on-surface);
}

/* Unambiguous "what is this app" statement, incl. the Google Sign-In purpose
   line — this is what Google's OAuth branding verification checks for on
   the homepage. Keep it in plain, factual prose if this section is edited. */
.about-app .section-head {
  max-width: var(--measure);
}

.about-app__body {
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Gives the Google-services explanation its own visible heading, so an
   automated or human reviewer can find it without reading the whole page. */
.about-app__subhead {
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  color: var(--on-surface);
  margin-top: 16px;
}

.about-app__list {
  list-style: disc;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-app__list li {
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface-variant);
}

.about-app__list strong {
  color: var(--on-surface);
}

.section-head p {
  margin-top: 12px;
  color: var(--on-surface-variant);
}

/* ---------- Cards ---------- */
/* Six cards, so cap at three columns: auto-fit alone yields a 4 + 2 orphan row. */
.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--tint-primary);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.card h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--on-surface);
}

.card p {
  color: var(--on-surface-variant);
  font-size: 16px;
  line-height: 24px;
}

/* Ube is reserved for premium features. */
.tier-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--premium-container);
  border: 1px solid var(--premium-outline);
  color: var(--secondary);
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  gap: 48px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.step__num {
  font-size: 40px;
  line-height: 48px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary-fixed-dim);
  display: block;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 8px;
}

.step p {
  color: var(--on-surface-variant);
}






/* ---------- About ---------- */
.about-grid {
  display: grid;
  gap: 64px;
}

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 1fr; }
}

.about-grid p {
  color: var(--on-surface-variant);
}

.pull-quote {
  font-size: 18px;
  line-height: 28px;
  font-style: italic;
  color: var(--on-surface);
  border-left: 2px solid var(--primary);
  padding-left: 24px;
}

/* ---------- Legal pages ---------- */
.legal-intro {
  max-width: var(--measure);
  padding-block: var(--section-gap);
}

.legal-intro h1 {
  margin-block: 8px 16px;
  color: var(--on-surface);
}

.legal-intro .byline {
  color: var(--on-surface-variant);
}

.legal-layout {
  display: grid;
  gap: var(--section-gap);
  align-items: start;
  padding-bottom: 80px;
}

@media (min-width: 1000px) {
  .legal-layout {
    grid-template-columns: 280px 1fr;
  }
}

.toc {
  display: none;
}

@media (min-width: 1000px) {
  .toc {
    display: block;
    position: sticky;
    top: 112px;
    align-self: start;
  }
}

.toc__label {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 16px;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--surface-variant);
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

.toc li a {
  display: flex;
  gap: 10px;
  padding: 6px 0 6px 16px;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color 0.15s ease;
}

.toc li a:hover {
  color: var(--primary);
}

.toc li a.is-active {
  color: var(--primary);
  font-weight: 700;
}

.toc li a .n {
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: right;
  flex: none;
}

.legal-body {
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.legal-body section {
  scroll-margin-top: 112px;
}

.legal-body h2 {
  display: flex;
  gap: 12px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 16px;
}

.legal-body h2 .n {
  color: var(--on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.legal-body h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--on-surface);
  margin-block: 20px 8px;
}

.legal-body p {
  color: var(--on-surface-variant);
  margin-bottom: 16px;
}

.legal-body p:last-child {
  margin-bottom: 0;
}

.legal-body ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-body li {
  color: var(--on-surface-variant);
}

.legal-body strong {
  color: var(--on-surface);
  font-weight: 700;
}

.legal-body a:not(.btn) {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.callout {
  background: var(--tint-primary);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 8px;
}

.callout svg {
  color: var(--primary);
  flex: none;
  margin-top: 2px;
}

.callout p {
  color: var(--on-surface);
  margin: 0;
  font-size: 16px;
  line-height: 24px;
}

.contact-block {
  color: var(--on-surface-variant);
  line-height: 28px;
}

.contact-block strong {
  color: var(--on-surface);
}

/* ---------- App screenshot showcase ----------
   Supplied English store-listing images retain their original colors and
   proportions. The surrounding card follows the selected website theme. */
.screens-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72vw, 300px);
  gap: 20px;
  overflow-x: auto;
  padding-block: 8px 16px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.screens-strip::-webkit-scrollbar {
  height: 8px;
}

.screens-strip::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: var(--radius-full);
}

.screen-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.screen-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-container-high);
  background: var(--surface-container-low);
}

.screen-card figcaption {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--on-surface-variant);
  padding-inline: 2px;
}

.screens-more {
  margin-top: 20px;
}

/* Product page hero */
.product-hero {
  display: grid;
  gap: 48px;
  align-items: center;
  padding-block: 72px 56px;
}

@media (min-width: 900px) {
  .product-hero {
    grid-template-columns: 1.1fr 0.9fr;
  }

  /* Pages with no hero art — pricing, contact. Without this the two-column
     rule above still applies and the copy sits in the left half against a
     dead right half, which reads as a missing image rather than a choice. */
  .product-hero--solo {
    grid-template-columns: 1fr;
  }
}

.product-hero--solo .product-hero__copy {
  max-width: var(--measure);
}

.product-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-hero__copy h1 {
  color: var(--on-surface);
}

.product-hero__copy .lede {
  color: var(--on-surface-variant);
  max-width: 52ch;
}

.platform-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.platform-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  color: var(--on-surface-variant);
  background: var(--surface-container-lowest);
}

/* Closing invitation; the primary button carries the Mango accent. */
.cta-band {
  background: var(--tint-primary);
  border: 1px solid var(--primary-fixed-dim);
  border-radius: var(--radius-md);
  padding: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-band h2 {
  color: var(--on-primary-fixed);
  margin-bottom: 8px;
}

.cta-band p {
  color: var(--on-surface-variant);
  max-width: 52ch;
}


/* Official store badges — Apple/Google artwork, self-hosted. Equal visual
   height; the Play badge is naturally wider. Focus ring via global rule. */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.store-badge {
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
}

.store-badge img {
  height: 48px;
  width: auto;
  display: block;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-container-low);
  border-top: 1px solid var(--outline-variant);
  margin-top: var(--section-gap);
}

.site-footer__grid {
  display: grid;
  gap: 32px;
  padding-block: var(--section-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}

.site-footer h3 {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 16px;
}

.site-footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer a {
  font-size: 16px;
  line-height: 24px;
  color: var(--on-surface-variant);
  text-decoration: none;
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: var(--primary);
}

.site-footer__tagline {
  color: var(--on-surface-variant);
  margin-top: 16px;
  max-width: 30ch;
}

.site-footer__bottom {
  border-top: 1px solid var(--outline-variant);
  padding-block: 24px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
  color: var(--on-surface-variant);
}

/* ---------- Utilities ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pricing foundations; brand treatments are shared in playful.css. */

.price-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .price-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  /* Ultra has two plans, not three — without this they stretch to thirds and
     sit oddly against Super's row directly above. */
  .price-grid--two { grid-template-columns: repeat(2, 1fr); }
}

.price-card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The free plan is a single full-width card rather than one of a row, so it
   is capped to the reading measure instead of running the container's width. */
.price-card--free {
  max-width: var(--measure);
}

.price-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--surface-container-high);
}

.price-card__head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.price-card__amount {
  margin: 8px 0 0;
  font-size: 2rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--primary);
  /* Tabular figures so ₹499 and ₹1,999 align across the row rather than
     drifting by the width of a 1. */
  font-variant-numeric: tabular-nums;
}

.price-card__period {
  margin: 0;
  font-size: 0.875rem;
  color: var(--on-surface-variant);
}

/* Wide content must scroll inside its own box; the page body never scrolls
   sideways. Five columns of comparison do not fit a phone. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
}

.price-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  text-align: left;
}

.price-table th,
.price-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-container-high);
  vertical-align: top;
}

.price-table thead th {
  background: var(--tint-primary);
  color: var(--on-surface);
  font-weight: 700;
  white-space: nowrap;
}

.price-table tbody th {
  font-weight: 600;
  color: var(--on-surface);
}

.price-table tbody td {
  color: var(--on-surface-variant);
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: 0;
}

/* The single contact address, given its own block rather than repeated once
   per topic card. One mailbox serves support, billing, privacy and grievances,
   and printing the same string four times read like a template nobody had
   filled in. */
.email-panel {
  background: var(--surface-container-lowest);
  border: 1px solid var(--surface-container-high);
  border-radius: var(--radius-md);
  padding: 32px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.email-panel__address {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  /* Long addresses must not push the panel wider than the page on a phone. */
  overflow-wrap: anywhere;
}

.email-panel__address:hover,
.email-panel__address:focus-visible {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .email-panel { padding: 24px; }
  .email-panel__address { font-size: 1.25rem; }
}