/* Self-hosted fonts (SIL OFL, see assets/fonts/OFL-*.txt). */
@font-face { font-family: "Khand"; src: url("../fonts/Khand-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Khand"; src: url("../fonts/Khand-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mukta"; src: url("../fonts/Mukta-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mukta"; src: url("../fonts/Mukta-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mukta"; src: url("../fonts/Mukta-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mukta"; src: url("../fonts/Mukta-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

/* =========================================================================
   SUN IT UP – site styles
   Brand: brand/brand-guidelines.md (Sunrise palette, Khand + Mukta).
   Theme: light page with Ink bands, as approved on 11 Oct 2026 (theme lock).
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  --ink: #2A2118;
  --saffron: #B34E12;        /* text, links, buttons: passes WCAG AA on page, sand, white and with Cream text (20 Oct 2026) */
  --saffron-logo: #C85A17;   /* logo rays and sun graphics only */
  --saffron-dark: #A84A12;
  --marigold: #E9A13B;
  --rust: #832F09;
  --terracotta: #B4552D;
  --blush: #FBEAE0;
  --page: #FAF7F2;
  --sand: #F5EFE6;
  --cream: #FFFDF9;
  --on-photo: #F3EAD9;
  --white: #FFFFFF;
  --line: #E6DED2;
  --field-border: #C2B4A3;
  --text-muted: #6E5E4E;
  --text-on-blush: #4A3A2C;
  --ink-soft: #4A3A2C;

  --font-head: 'Khand', 'Mukta', system-ui, sans-serif;
  --font-body: 'Mukta', system-ui, sans-serif;

  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-panel: 16px;
  --radius-field: 12px;
  --tap: 48px;

  --container: 1280px;
  --gutter: 24px;
  --section: clamp(64px, 8vw, 104px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow: 0 1px 0 var(--line), 0 18px 40px -28px rgba(42, 33, 24, .35);
  --header-h: 76px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--saffron); text-underline-offset: 3px; }
a:hover { color: var(--rust); }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 700; line-height: 1; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .card--dark :focus-visible, .card--rust :focus-visible { outline-color: var(--marigold); }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--cream); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-field);
  font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* Hindi: headings are not uppercased (brand §6) */
html[lang="hi"] .h1, html[lang="hi"] .h2, html[lang="hi"] .h3, html[lang="hi"] .eyebrow,
html[lang="hi"] .upper { text-transform: none; letter-spacing: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }
.container--mid { max-width: 1080px; }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(48px, 6vw, 72px); }
.section--sand { background: var(--sand); }
.section--white { background: var(--white); border-block: 1px solid var(--line); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--saffron { background: var(--saffron); color: var(--cream); }
.stack > * + * { margin-top: var(--stack, 16px); }
/* Links placed straight in a stack are inline by default, which ignores the stack's top margin. */
.stack > a:not(.btn) { display: block; width: fit-content; }
/* A row of tags needs more air before whatever follows it. */
.stack > .chips + * { margin-top: 28px; }
.split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }

@media (max-width: 960px) {
  .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 17px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Type ---------- */
.h1 { font-size: clamp(52px, 7vw, 96px); line-height: .94; text-transform: uppercase; letter-spacing: -.005em; }
.h1--xl { font-size: clamp(56px, 8vw, 112px); line-height: .92; }
.h2 { font-size: clamp(34px, 4.5vw, 52px); text-transform: uppercase; }
.h3 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.05; text-transform: uppercase; }
.h4 { font-size: 24px; line-height: 1.1; }
.eyebrow {
  display: inline-block; margin-bottom: 14px;
  font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--saffron);
}
.on-dark .eyebrow, .section--ink .eyebrow { color: var(--marigold); }
.lead { font-size: 19px; color: var(--text-muted); max-width: 62ch; }
.on-dark .lead, .section--ink .lead { color: var(--on-photo); }
.muted { color: var(--text-muted); }
.small { font-size: 15px; }
.accent { color: var(--marigold); }
.accent-saffron { color: var(--saffron); }
.num { font-family: var(--font-head); font-weight: 700; color: var(--saffron); line-height: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 26px; border-radius: var(--radius-pill);
  border: 2px solid transparent; font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), background-color .2s, color .2s, border-color .2s;
}
.btn:active { transform: scale(.98); }
.btn .ph { font-size: 20px; }
.btn--primary { background: var(--saffron); color: var(--cream); }
.btn--primary:hover { background: var(--saffron-dark); color: var(--cream); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: #3d3124; color: var(--cream); }
.btn--marigold { background: var(--marigold); color: var(--ink); }
.btn--marigold:hover { background: #f0b155; color: var(--ink); }
.btn--cream { background: var(--cream); color: var(--ink); }
.btn--cream:hover { background: var(--white); color: var(--ink); }
.btn--rust { background: var(--rust); color: var(--cream); }
.btn--rust:hover { background: #6A2607; color: var(--cream); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--ghost-light { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--ghost-light:hover { background: var(--cream); color: var(--ink); }
.btn--sm { min-height: 44px; padding: 8px 18px; font-size: 15px; }
.btn--block { width: 100%; }
.link-strong { font-weight: 700; }
.link-strong .ph { margin-left: 6px; vertical-align: -2px; transition: transform .25s var(--ease); }
.link-strong:hover .ph { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .link-strong:hover .ph { transform: none; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--ink); color: var(--cream); }
.site-header__bar { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; margin-right: auto; }
.brand__word { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1; padding-top: 4px; color: var(--cream); white-space: nowrap; }
.brand__up { color: var(--marigold); }
/* Trademark sign after the SUN IT UP wordmark (18 Oct 2026). Same colour as "SUN IT". */
.tm { font-family: var(--font-body); font-weight: 600; font-size: .38em; vertical-align: super; line-height: 0; margin-left: .06em; letter-spacing: 0; }
.sun-mark__rays { stroke: var(--saffron-logo); }
.sun-mark__disc { fill: var(--marigold); }
/* Logo: the full sun with 12 uneven rays (20 Oct 2026). */
.logo-mark { display: block; flex: none; }
.logo-mark__rays { stroke: var(--saffron-logo); }
.logo-mark__disc { fill: var(--marigold); }
.brand { color: var(--cream); }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav__list { display: flex; list-style: none; gap: 2px; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px;
  color: var(--cream); text-decoration: none; font-weight: 500; font-size: 16px; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.site-nav__link:hover { color: var(--marigold); }
.site-nav__link[aria-current="page"] { border-bottom-color: var(--marigold); font-weight: 700; }
.site-nav__cta { margin-left: 10px; min-height: 44px; padding: 8px 22px; font-size: 16px; }
.site-header__tools { display: flex; align-items: center; gap: 8px; }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 2px solid var(--field-border); border-radius: var(--radius-pill); }
.lang-switch a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: var(--radius-pill); color: var(--cream); text-decoration: none; font-size: 14px; font-weight: 600; }
.lang-switch a[aria-current="true"] { background: var(--cream); color: var(--ink); }
.menu-toggle { display: none; width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid var(--field-border); background: transparent; color: var(--cream); align-items: center; justify-content: center; font-size: 22px; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }

@media (max-width: 1080px) {
  .site-header__bar { flex-wrap: wrap; }
  .menu-toggle { display: inline-flex; }
  .site-nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: stretch; padding: 4px 0 20px; border-top: 1px solid var(--ink-soft); }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav__list { flex-direction: column; }
  .site-nav__link { font-family: var(--font-head); font-weight: 700; font-size: 26px; text-transform: uppercase; padding: 12px 4px; border-bottom: 1px solid var(--ink-soft); width: 100%; }
  html[lang="hi"] .site-nav__link { text-transform: none; }
  .site-nav__link[aria-current="page"] { color: var(--marigold); border-bottom-color: var(--ink-soft); }
  .site-nav__cta { margin: 16px 0 0; width: 100%; }
}
@media (max-width: 400px) { .brand__word { font-size: 24px; } }
@media (max-width: 359px) {
  .site-header__bar { gap: 10px; }
  .brand { gap: 6px; }
  .brand .logo-mark { width: 36px; height: auto; }
  .brand__word { font-size: 21px; }
  .lang-switch a { padding: 0 8px; }
  .site-header__tools { gap: 6px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--cream); padding: 72px 0 40px; }
.site-footer__inner { display: grid; gap: 40px; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.site-footer__sign { font-family: var(--font-head); font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: .95; text-transform: uppercase; }
.site-footer__sign span { color: var(--marigold); }
.site-footer__tag { margin-top: 10px; color: var(--field-border); font-size: 16px; }
.social { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.site-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding-top: 28px; border-top: 1px solid var(--ink-soft); }
.site-footer__head { font-size: 18px; letter-spacing: .08em; text-transform: uppercase; color: var(--marigold); margin-bottom: 12px; }
.site-footer__nav ul { list-style: none; display: grid; gap: 4px; }
.site-footer__nav a { color: var(--cream); display: inline-flex; min-height: 36px; align-items: center; font-size: 16px; }
.site-footer__nav a:hover { color: var(--marigold); }
.site-footer__small { font-size: 14px; color: var(--field-border); }
.site-footer__small a { color: var(--cream); }
@media (max-width: 760px) { .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Home hero (moving) ---------- */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); min-height: min(88dvh, 820px); display: flex; align-items: flex-end; isolation: isolate; }
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; z-index: -2; }
.hero__slide.is-active { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,33,24,.55) 0%, rgba(42,33,24,.2) 40%, rgba(42,33,24,.92) 100%); }
.hero__sun { position: absolute; right: -140px; top: -110px; width: 540px; opacity: .2; z-index: -1; pointer-events: none; }
.hero__sun .sun-mark__rays { stroke: var(--marigold); stroke-width: 5; }
.hero__sun .sun-mark__disc { fill: none; }
.hero__inner { width: 100%; padding-block: clamp(96px, 12vh, 140px) 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.hero__title { margin-top: 0; }
.hero__title span { color: var(--marigold); display: block; }
.hero__sub { margin-top: 20px; max-width: 34ch; font-size: 20px; color: var(--on-photo); }
.hero__ctas { margin-top: 28px; }
.hero__aside { display: grid; gap: 12px; justify-items: start; max-width: 300px; }
.hero__caption { font-size: 15px; font-weight: 600; color: var(--on-photo); min-height: 24px; }
.hero__controls { display: flex; align-items: center; gap: 4px; }
.hero__dot { width: 44px; height: 44px; padding: 0; background: none; border: 0; display: inline-flex; align-items: center; justify-content: center; }
.hero__dot span { display: block; width: 10px; height: 10px; border-radius: var(--radius-pill); background: rgba(255,253,249,.55); transition: width .4s var(--ease), background-color .4s; }
.hero__dot[aria-current="true"] span { width: 32px; background: var(--marigold); }
.hero__pause { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cream); background: transparent; color: var(--cream); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; margin-left: 6px; }
.hero__pause .ph-play { display: none; }
.hero__pause[aria-pressed="true"] .ph-pause { display: none; }
.hero__pause[aria-pressed="true"] .ph-play { display: inline; }
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__sun { width: 360px; right: -120px; top: -80px; }
}

/* ---------- Inner page heroes ---------- */
.page-hero { padding-block: clamp(64px, 8vw, 96px) clamp(40px, 5vw, 56px); }
.page-hero .lead { margin-top: 18px; }
.page-hero--photo { position: relative; overflow: hidden; color: var(--cream); background: var(--ink); min-height: 520px; display: flex; align-items: flex-end; isolation: isolate; }
.page-hero--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,33,24,.35) 0%, rgba(42,33,24,.92) 100%); }
.page-hero--photo .lead { color: var(--on-photo); }
.page-hero--ink { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); isolation: isolate; }
.page-hero--ink img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; z-index: -1; }
.page-hero--ink .lead { color: var(--on-photo); }

/* ---------- Bands ---------- */
.band { padding-block: 44px; }
.question { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.question__title { font-size: clamp(34px, 4.4vw, 52px); text-transform: uppercase; }
.question__hi { margin-top: 6px; font-family: var(--font-head); font-weight: 600; font-size: 24px; color: var(--blush); }
.question__answers .btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.question__reply { margin-top: 12px; font-size: 17px; }
.question__reply a { color: var(--cream); font-weight: 700; }
.choice-cream { background: var(--cream); color: var(--ink); }
@media (max-width: 860px) { .question { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Surfaces ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); padding: clamp(24px, 3vw, 32px); }
.card--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.card--rust { --marigold: #F0B460; background: var(--rust); color: var(--cream); border-color: var(--rust); }
.card--blush { background: var(--blush); border-color: var(--blush); color: var(--ink); }
.card--saffron { background: var(--saffron); border-color: var(--saffron); color: var(--cream); }
.card--sand { background: var(--sand); border-color: var(--sand); }
.card--flush { padding: 0; overflow: hidden; }
.card__num { font-family: var(--font-head); font-weight: 700; font-size: 44px; line-height: 1; color: var(--saffron); }
.card--dark .card__num, .card--rust .card__num { color: var(--marigold); }
.card--dark p, .card--rust p { color: var(--on-photo); }
.card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; transition: transform .3s var(--ease), box-shadow .3s; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: inherit; }
.card-link__go { margin-top: auto; color: var(--saffron); font-weight: 700; font-size: 16px; display: inline-flex; gap: 6px; align-items: center; }
.card--dark .card-link__go, .card--rust .card-link__go { color: var(--marigold); }
.icon-lg { font-size: 36px; color: var(--saffron); }
.card--dark .icon-lg, .card--rust .icon-lg { color: var(--marigold); }
.card--dark a:not(.btn), .card--rust a:not(.btn) { color: var(--marigold); }
.card--dark a:not(.btn):hover, .card--rust a:not(.btn):hover { color: var(--cream); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.chip { background: var(--blush); color: var(--rust); border-radius: var(--radius-pill); padding: 6px 16px; font-size: 15px; font-weight: 600; }
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .ph { color: var(--saffron); font-size: 22px; flex: none; margin-top: 2px; }
.on-dark .ticks .ph, .card--dark .ticks .ph, .card--rust .ticks .ph { color: var(--marigold); }

.media { border-radius: var(--radius-card); overflow: hidden; background: var(--ink); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--portrait { aspect-ratio: 4 / 5; max-height: 640px; }
.media--wide { aspect-ratio: 16 / 9; }
.placeholder { display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; background: #EDE5D8; color: var(--text-muted); font-size: 15px; border-radius: inherit; }

/* ---------- Segmented + tabs ---------- */
.segmented { display: inline-flex; gap: 2px; padding: 4px; background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.segmented button { min-height: 44px; padding: 8px 18px; border: 0; border-radius: var(--radius-pill); background: transparent; font-weight: 700; font-size: 15px; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { min-height: var(--tap); padding: 10px 22px; border-radius: var(--radius-pill); border: 2px solid var(--field-border); background: transparent; font-weight: 700; font-size: 16px; }
.pill[aria-selected="true"], .pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ---------- Sun-path step player ---------- */
.arc-scroll { --dot: 56px; }
.arc { position: relative; height: 290px; }
.arc__path { position: absolute; inset: 0; width: 100%; height: 100%; }
.arc__list { list-style: none; margin: 0; padding: 0; }
.arc__dot {
  position: absolute; left: calc(var(--x) - var(--dot) / 2); top: calc(var(--y) - var(--dot) / 2);
  width: var(--dot); height: var(--dot); border-radius: 50%; border: 2px solid var(--line); background: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--ink); padding: 0;
  transition: transform .35s var(--ease), background-color .35s, border-color .35s, box-shadow .35s;
}
.arc__dot:hover { border-color: var(--saffron); }
.arc__dot.is-done { background: var(--marigold); border-color: var(--marigold); }
.arc__dot[aria-current="step"] { background: var(--saffron); color: var(--cream); border: 3px solid var(--ink); box-shadow: 0 0 0 8px var(--blush); transform: scale(1.12); }
.player { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; margin-top: 28px; }
.step-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.breath {
  width: 180px; height: 180px; border-radius: 50%; background: var(--blush); display: grid; place-items: center;
}
.breath__core {
  width: 132px; height: 132px; border-radius: 50%; background: var(--marigold); color: var(--ink);
  display: grid; place-content: center; text-align: center;
}
.breath__label { font-family: var(--font-head); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; }
.breath__of { font-size: 13px; font-weight: 600; }
.is-playing .breath__core { animation: breathe 3.5s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.92); } 50% { transform: scale(1.06); } }
.step-card__num { font-size: 56px; }
.step-card__name { font-size: 32px; line-height: 1.05; }
.step-card__en { font-size: 15px; font-weight: 600; color: var(--text-muted); }
@media (max-width: 960px) { .player { grid-template-columns: minmax(0, 1fr); } .arc-scroll { --dot: 44px; } .arc { height: 230px; } .arc__dot { font-size: 18px; } }
@media (max-width: 560px) { .arc-scroll { --dot: 34px; } .arc { height: 170px; } .arc__dot { font-size: 15px; } .arc__dot[aria-current="step"] { box-shadow: 0 0 0 5px var(--blush); } }
/* Small step photo under the breathing circle (homepage player). */
.step-card__visual { display: grid; gap: 16px; justify-items: center; }
.step-card__photo { margin: 0; width: 180px; aspect-ratio: 4 / 3; border-radius: var(--radius-field); overflow: hidden; background: var(--sand); }
.step-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) {
  .step-card { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .breath { width: 150px; height: 150px; } .breath__core { width: 112px; height: 112px; }
  .step-card__visual { grid-template-columns: auto minmax(0, 1fr); align-items: center; width: 100%; }
  .step-card__photo { width: 100%; max-width: 200px; }
}

/* ---------- Tabs (who it's for) ---------- */
.tabpanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; padding: 0; }
.tabpanel__media { min-height: 360px; position: relative; background: var(--ink); }
.tabpanel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tabpanel__body { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.tabpanel__body .btn { align-self: flex-start; margin-top: auto; }
@media (max-width: 860px) { .tabpanel { grid-template-columns: minmax(0, 1fr); } .tabpanel__media { min-height: 240px; } }

/* ---------- Impact ---------- */
.impact { position: relative; overflow: hidden; background: var(--ink); color: var(--cream); isolation: isolate; }
.impact > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; z-index: -1; }
.impact__title span { color: var(--marigold); }
.stat { border-top: 2px solid var(--marigold); padding-top: 16px; }
.stat__n { font-family: var(--font-head); font-weight: 700; font-size: 64px; line-height: 1; color: var(--marigold); }
.stat__l { font-weight: 700; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 20px; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 20px; }
.field { display: grid; gap: 6px; align-content: start; }
.field label, .legend { font-weight: 600; font-size: 16px; }
.field .hint { font-size: 14px; color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; min-height: var(--tap); padding: 0 14px; border: 1.5px solid var(--field-border); border-radius: var(--radius-field);
  background: var(--white); color: var(--ink); font-size: 17px;
}
.textarea { padding: 12px 14px; min-height: 140px; line-height: 1.5; resize: vertical; }
.input[type="file"] { padding: 10px 14px; border-style: dashed; background: var(--page); font-size: 15px; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--saffron); outline-offset: 1px; border-color: var(--saffron); }
.input::placeholder, .textarea::placeholder { color: #8A7966; }
.is-invalid .input, .is-invalid .select, .is-invalid .textarea { border: 2px solid var(--terracotta); }
.error { display: none; gap: 6px; align-items: center; color: var(--terracotta); font-size: 15px; font-weight: 600; }
.error .ph { font-size: 18px; }
.is-invalid > .error, .is-invalid .error--own { display: flex; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--text-on-blush); }
.check input { width: 24px; height: 24px; margin-top: 3px; accent-color: var(--saffron); flex: none; }
/* Month and year of birth (age check) */
.field--birth { border: 0; padding: 0; margin: 0; min-width: 0; }
.field--birth .legend { padding: 0; margin-bottom: 0; }
.birth { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.field--birth.is-invalid > .error--adult { display: none; }
.field--birth[data-err="adult"] > .error--birth { display: none; }
.field--birth[data-err="adult"] > .error--adult { display: flex; align-items: flex-start; }
.field--birth[data-err="adult"] .select { border: 2px solid var(--terracotta); }
.notice { background: var(--blush); border-radius: var(--radius-field); padding: 16px; display: grid; gap: 8px; }
.form__summary { display: none; background: var(--blush); color: var(--rust); border-radius: var(--radius-field); padding: 12px 16px; font-weight: 600; font-size: 16px; }
.form.has-errors .form__summary { display: flex; gap: 8px; align-items: center; }
.targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border: 0; padding: 0; margin: 0; }
.targets legend { margin-bottom: 10px; padding: 0; }
.target { position: relative; }
.target input { position: absolute; opacity: 0; inset: 0; }
.target label { display: grid; gap: 2px; min-height: 80px; padding: 14px 16px; border-radius: var(--radius-panel); border: 1.5px solid var(--field-border); background: var(--white); cursor: pointer; font-weight: 400; }
.target label b { font-family: var(--font-head); font-size: 28px; line-height: 1; }
.target label span { font-size: 14px; }
.target input:checked + label { background: var(--blush); border: 2px solid var(--saffron); }
.target input:focus-visible + label { outline: 3px solid var(--saffron); outline-offset: 2px; }
.success { display: grid; gap: 12px; justify-items: start; }
.success__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.02; text-transform: uppercase; }
html[lang="hi"] .success__title { text-transform: none; }
.counter { justify-self: end; font-size: 14px; font-weight: 600; color: var(--text-muted); }
.counter.is-over { color: var(--terracotta); }
@media (max-width: 480px) { .targets { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Accordion ---------- */
.accordion { display: grid; gap: 12px; }
.acc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.acc__btn { width: 100%; min-height: 64px; padding: 18px 24px; border: 0; background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; font-size: 18px; text-align: left; }
.acc__icon { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blush); color: var(--rust); display: grid; place-items: center; transition: transform .3s var(--ease); }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.acc__panel { padding: 0 24px 22px; color: var(--text-on-blush); }

/* ---------- Timeline (heritage) ---------- */
.timeline { list-style: none; display: grid; }
.timeline li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 20px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--marigold); margin-top: 6px; flex: none; }
.timeline li:last-child .timeline__dot { background: var(--saffron); }
.timeline__line { width: 2px; flex: 1; background: var(--line); }
.timeline__body { padding-bottom: 32px; }
.timeline__body p { margin-top: 6px; color: var(--text-on-blush); }

/* ---------- Mantra dial ---------- */
.dial { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin-inline: auto; }
.dial__ring { position: absolute; inset: 9%; border-radius: 50%; border: 2px dashed var(--marigold); }
.dial__core { position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--marigold); color: var(--ink); display: grid; place-content: center; text-align: center; padding: 8%; }
.dial__core-step { font-family: var(--font-head); font-weight: 700; font-size: 16px; letter-spacing: .12em; }
.dial__core-deva { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 3vw, 28px); line-height: 1.15; }
.dial__core-latin { font-size: 14px; font-weight: 600; }
.dial__btn { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); font-family: var(--font-head); font-weight: 700; font-size: 20px; padding: 0; transition: background-color .3s, box-shadow .3s; }
.dial__btn[aria-pressed="true"] { background: var(--saffron); color: var(--cream); border: 3px solid var(--ink); box-shadow: 0 0 0 6px var(--blush); }
.mantra-card__deva { font-family: var(--font-head); font-weight: 700; font-size: 36px; line-height: 1.15; }
.mantra-card__meaning { font-size: 22px; line-height: 1.4; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; }
.table th { text-align: left; padding: 10px 8px; border-bottom: 2px solid var(--line); }
.table td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
details.disclosure { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 4px 24px; }
details.disclosure summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; font-weight: 700; }
details.disclosure[open] { padding-bottom: 16px; }

/* ---------- Learn grid ---------- */
.step-tile { display: flex; flex-direction: column; }
.step-tile__media { position: relative; aspect-ratio: 4 / 3; background: var(--sand); }
.step-tile__media .placeholder { position: absolute; inset: 0; background: var(--sand); border-radius: 0; }
.step-tile__num { position: absolute; top: 14px; left: 16px; font-size: 40px; }
.breath-tag { position: absolute; top: 16px; right: 16px; border-radius: var(--radius-pill); padding: 2px 12px; font-size: 13px; font-weight: 700; background: var(--ink); color: var(--cream); }
.breath-tag--in { background: var(--marigold); color: var(--ink); }
.step-tile__body { padding: 20px 24px 24px; display: grid; gap: 4px; }
.step-tile__name { font-size: 24px; line-height: 1.1; }

/* ---------- Video cards ---------- */
.vcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.vcard__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.vcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: transform .6s var(--ease); }
.vcard:hover .vcard__thumb img { transform: scale(1.05); }
.play { position: relative; width: 60px; height: 60px; border-radius: 50%; background: var(--saffron); color: var(--cream); display: grid; place-items: center; font-size: 24px; }
.play--lg { width: 88px; height: 88px; font-size: 34px; }
.vcard__len { position: absolute; right: 12px; bottom: 10px; background: var(--ink); color: var(--cream); border-radius: 6px; padding: 0 8px; font-size: 13px; font-weight: 600; }
.vcard__body { padding: 18px 22px 22px; display: grid; gap: 6px; justify-items: start; }
.vcard__cat { background: var(--blush); color: var(--rust); border-radius: var(--radius-pill); padding: 0 12px; font-size: 13px; font-weight: 700; }
.empty { border: 1.5px dashed var(--field-border); background: var(--white); border-radius: var(--radius-card); padding: 64px 24px; text-align: center; display: grid; justify-items: center; gap: 12px; }

/* ---------- About: the vision (Initiative Lead's note) ---------- */
.vision { max-width: 68ch; margin-inline: auto; }
.vision__body { display: grid; gap: 18px; font-size: 18px; line-height: 1.7; }
.vision__first { font-size: 20px; }
.vision__quote { margin: 40px 0 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--marigold); }
.vision__quote p { font-family: var(--font-head); font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; color: var(--saffron); }
.vision__close { margin-top: 28px; font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.2; text-transform: uppercase; }
.vision__tagline { margin-top: 10px; color: var(--text-muted); }
.vision__sign { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px; }
.vision__dedication { margin-top: 20px; font-size: 16px; font-style: italic; color: var(--text-muted); }
.vision__photo { width: 72px; height: 72px; flex: none; border-radius: 50%; padding: 0; font-size: 13px; }
html[lang="hi"] .vision__close { text-transform: none; }

/* ---------- Stories ---------- */
.quote-mark { color: var(--marigold); font-size: 34px; }
.story__quote { font-family: var(--font-head); font-weight: 600; font-size: 24px; line-height: 1.2; }

/* ---------- Thank-you / badge ---------- */
.badge-preview { aspect-ratio: 1; width: 100%; max-width: 400px; margin-inline: auto; border-radius: 24px; padding: 32px; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; border: 1px solid var(--line); background: var(--ink); color: var(--cream); transition: background-color .3s, color .3s; }
.badge-preview__sub { font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; color: var(--marigold); }
.badge-preview__word { font-family: var(--font-head); font-weight: 700; font-size: 64px; line-height: .9; }
.badge-preview__word span { color: var(--marigold); }
.badge-preview__word .tm, .badge-preview[data-theme] .badge-preview__word .tm { color: inherit; }
.badge-preview__who { margin-top: 6px; font-weight: 600; }
.badge-preview__tag { font-size: 15px; opacity: .85; }
.badge-preview[data-theme="saffron"] { background: var(--saffron); }
.badge-preview[data-theme="saffron"] .badge-preview__sub, .badge-preview[data-theme="saffron"] .badge-preview__word span { color: var(--blush); }
.badge-preview[data-theme="saffron"] .logo-mark__rays { stroke: var(--cream); }
.badge-preview[data-theme="saffron"] .logo-mark__disc { fill: var(--cream); }
.badge-preview[data-theme="cream"] { background: var(--cream); color: var(--ink); }
.badge-preview[data-theme="cream"] .badge-preview__sub, .badge-preview[data-theme="cream"] .badge-preview__word span { color: var(--saffron); }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--field-border); padding: 0; }
.swatch[aria-pressed="true"] { border: 3px solid var(--saffron); box-shadow: 0 0 0 3px var(--blush); }
.swatch--ink { background: var(--ink); } .swatch--saffron { background: var(--saffron); } .swatch--cream { background: var(--cream); }
.spin { animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tracker ---------- */
.ring { position: relative; width: 168px; height: 168px; flex: none; }
.ring svg { width: 168px; height: 168px; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--ink-soft); stroke-width: 14; }
.ring__value { fill: none; stroke: var(--marigold); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.ring__label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring__n { font-family: var(--font-head); font-weight: 700; font-size: 52px; line-height: .9; color: var(--marigold); }
.stepper { display: flex; align-items: center; gap: 12px; }
.stepper button { width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid var(--field-border); background: transparent; color: var(--cream); font-size: 22px; display: grid; place-items: center; }
.stepper output { min-width: 110px; text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 32px; }
.statline { display: flex; align-items: baseline; gap: 12px; }
.statline__n { font-family: var(--font-head); font-weight: 700; font-size: 48px; line-height: 1; color: var(--saffron); }
.week { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.week li { display: grid; justify-items: center; gap: 8px; }
.week__day { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.week__dot { width: 100%; max-width: 72px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--sand); color: var(--text-muted); font-size: 13px; font-weight: 700; }
.week__dot.is-today { background: transparent; border: 2px dashed var(--saffron); color: var(--saffron); }
.week__dot.is-done { background: var(--marigold); color: var(--ink); font-family: var(--font-head); font-size: 24px; border: 0; }

/* ---------- Community Kit ---------- */
.privacy-strip { background: var(--blush); color: var(--text-on-blush); font-size: 15px; }
.privacy-strip .container { display: flex; gap: 10px; align-items: center; padding-block: 10px; }
.privacy-strip .ph { color: var(--rust); font-size: 18px; }
.statbox { background: var(--ink); color: var(--cream); border-radius: var(--radius-panel); padding: 18px 24px; min-width: 160px; }
.statbox__n { font-family: var(--font-head); font-weight: 700; font-size: 48px; line-height: 1; color: var(--marigold); }
.statbox__l { font-size: 15px; font-weight: 600; }
.kit-player__screen { aspect-ratio: 16 / 9; position: relative; display: grid; place-items: center; background: var(--ink-soft); }
.kit-player__ph { position: absolute; left: 20px; bottom: 16px; font-size: 14px; color: var(--on-photo); }
.kit-list { list-style: none; display: grid; gap: 10px; }
.kit-list button { width: 100%; display: flex; gap: 14px; align-items: center; padding: 14px 16px; min-height: 64px; border-radius: var(--radius-panel); border: 1px solid var(--line); background: var(--white); text-align: left; }
.kit-list button[aria-pressed="true"] { background: var(--blush); border: 2px solid var(--saffron); }
.kit-list__n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 20px; background: var(--sand); color: var(--saffron); }
.kit-list button[aria-pressed="true"] .kit-list__n { background: var(--saffron); color: var(--cream); }
.kit-list__t { display: grid; }
.kit-list__t small { font-size: 14px; color: var(--text-muted); }
.toggle-chip { min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--field-border); background: var(--white); font-weight: 600; font-size: 15px; }
.toggle-chip[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.poster-mini { width: 150px; aspect-ratio: 3 / 4; flex: none; border-radius: 10px; background: var(--ink); color: var(--cream); display: grid; place-content: center; justify-items: center; gap: 6px; padding: 12px; text-align: center; }
.poster-mini b { font-family: var(--font-head); font-size: 20px; line-height: 1; text-transform: uppercase; }
.poster-mini small { font-size: 11px; color: var(--on-photo); }
.reward { border-radius: var(--radius-panel); padding: 24px; min-height: 190px; display: flex; flex-direction: column; gap: 8px; background: var(--ink-soft); border: 1px solid var(--marigold); }
.reward .ph { font-size: 30px; color: var(--marigold); }
.reward p { color: var(--on-photo); font-size: 16px; }
.reward__action { margin-top: auto; font-weight: 700; color: var(--marigold); font-size: 16px; }
.is-locked .reward { background: #3A2E22; border-style: dashed; border-color: var(--text-muted); }
.is-locked .reward__action { color: var(--field-border); }
.reward__open { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
a.reward__open:hover, .reward__btn:hover { text-decoration: underline; }
.reward__btn { background: none; border: 0; padding: 0; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--marigold); cursor: pointer; text-align: left; }
.reward__locked { display: none; }
.is-locked .reward__locked { display: inline-flex; align-items: center; gap: 6px; }
.is-locked .reward__open { display: none; }

/* ---------- Legal ---------- */
.legal { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 48px; align-items: start; }
.legal__nav { display: grid; gap: 8px; position: sticky; top: calc(var(--header-h) + 24px); }
.legal__nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; border-radius: var(--radius-field); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 700; }
.legal__nav a[aria-current="page"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.legal__body { line-height: 1.7; }
.legal__body dl { display: grid; gap: 20px; margin: 0; }
.legal__body dt { font-family: var(--font-head); font-weight: 700; font-size: 24px; text-transform: uppercase; }
.legal__body dd { margin: 4px 0 0; }
.legal__body ol { padding-left: 22px; display: grid; gap: 14px; }
/* Detailed Privacy policy / Terms of use (20 Oct 2026) */
.legal__body > .stack > p, .legal__sec p { max-width: 68ch; }
.legal__toc { background: var(--sand); border-radius: var(--radius-panel); padding: 20px 24px; }
.legal__toc .eyebrow { margin-bottom: 8px; }
.legal__toc ol { columns: 2; column-gap: 32px; padding-left: 22px; display: block; margin: 0; }
.legal__toc li { break-inside: avoid; padding: 3px 0; }
.legal__toc a { color: var(--ink); text-decoration-color: var(--field-border); }
.legal__toc a:hover { color: var(--saffron); }
.legal__sec { display: grid; gap: 12px; scroll-margin-top: calc(var(--header-h) + 24px); padding-top: 12px; border-top: 1px solid var(--line); }
.legal__h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; text-transform: uppercase; margin: 0; }
.legal__h2 span { color: var(--saffron); }
html[lang="hi"] .legal__h2 { text-transform: none; }
.legal__list { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.legal__list li::marker { color: var(--saffron); }
.legal__table-wrap { border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; background: var(--white); }
.legal__table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal__table thead th { background: var(--sand); font-size: 14px; font-weight: 700; }
.legal__table tbody th { font-weight: 700; width: 22%; }
.legal__table tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 640px) {
  .legal__toc ol { columns: 1; }
  .legal__table thead { display: none; }
  .legal__table, .legal__table tbody, .legal__table tr, .legal__table th, .legal__table td { display: block; width: auto; }
  .legal__table tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  .legal__table tbody tr:last-child { border-bottom: 0; }
  .legal__table tbody th, .legal__table td { border: 0; padding: 6px 14px; width: auto; }
  .legal__table tbody th { font-size: 16px; padding-top: 10px; }
  .legal__table td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); }
}
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal__nav { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); } .legal__nav a { justify-content: center; text-align: center; font-size: 15px; padding: 8px; } }

/* ---------- Cookie banner ---------- */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 760px; margin-inline: auto; background: var(--ink); color: var(--cream); border-radius: var(--radius-panel); padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; box-shadow: 0 20px 50px -20px rgba(42,33,24,.6); }
.cookie p { font-size: 15px; color: var(--on-photo); flex: 1 1 320px; }
.cookie a { color: var(--marigold); }
.cookie__actions { display: flex; gap: 10px; }

/* ---------- 404 ---------- */
.notfound { text-align: center; display: grid; justify-items: center; gap: 12px; }
.notfound .logo-mark { width: 150px; height: auto; margin-bottom: 12px; }

/* ---------- Motion: reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
.rise { animation: rise 1s var(--ease) both; }
.rise-2 { animation: rise 1s .15s var(--ease) both; }
.rise-3 { animation: rise 1s .3s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
.kb { animation: kb 14s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.hero.is-paused .kb { animation-play-state: paused; }
.turn { animation: spin 90s linear infinite; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Print ---------- */
@media print { .site-header, .site-footer, .cookie, .hero__controls { display: none !important; } body { background: #fff; } }

/* Phones: the hero copy sits over the photo subject, so deepen the lower scrim. */
@media (max-width: 700px) {
  .hero__scrim { background: linear-gradient(180deg, rgba(42,33,24,.6) 0%, rgba(42,33,24,.5) 35%, rgba(42,33,24,.94) 100%); }
}

/* Spam trap field: off-screen for people and screen readers, still present for bots. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
button[aria-busy="true"] { opacity: .7; cursor: progress; }

/* Step photos on the Learn page fill the media box. */
.step-tile__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Why the sun + three ways to salute it (homepage, Surya Namaskar page) ---------- */
.why__title { font-size: clamp(40px, 5.4vw, 72px); line-height: .95; text-transform: uppercase; }
.why__title span { display: block; color: var(--saffron); }
.why__body { padding-top: 8px; }
.why__body .lead { color: var(--ink); }
.ways-wrap { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.ways__head { max-width: 780px; }
.ways__head .lead { margin-top: 12px; }
.ways__list { list-style: none; }
.ways__list > li { display: flex; }
.ways__card { width: 100%; gap: 12px; }
.ways__top { display: flex; justify-content: space-between; align-items: flex-start; }
.ways__name { display: block; font-family: var(--font-head); font-weight: 700; line-height: 1; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 32px); color: var(--ink); }
.card--rust .ways__name { color: var(--cream); }
.card-link.card--rust, .card-link.card--rust .h3, .card-link.card--dark, .card-link.card--dark .h3 { color: var(--cream); }
.card-link.card--rust span, .card-link.card--dark span { color: var(--on-photo); }
.ways__text { color: var(--text-muted); }
.card--rust .ways__text { color: var(--on-photo); }

/* ---------- Daily question: today's live count ---------- */
.question__count { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 17px; color: var(--cream); }
.question__count .ph { font-size: 22px; flex: none; }
.question__count b { font-family: var(--font-head); font-size: 28px; line-height: 1; display: inline-block; }
.question__count.is-bump b { animation: bump .7s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Learn page: jump links ---------- */
.jump { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jump__link {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 18px; border: 1px solid var(--line);
  background: var(--white); border-radius: var(--radius-panel); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 17px;
  transition: border-color .25s, transform .25s var(--ease);
}
.jump__link:hover { border-color: var(--saffron); color: var(--ink); transform: translateY(-2px); }
.jump__link .num { font-size: 28px; }
.jump__link .ph { font-size: 22px; color: var(--saffron); }
.jump__name { flex: 1; }
/* every jump box the same size: equal rows, and the link fills its cell */
.jump { grid-auto-rows: 1fr; }
.jump > li { display: flex; }
.jump__link { flex: 1; width: 100%; }
@media (max-width: 760px) { .jump { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Learn page: breathe with the sun ---------- */
.howto { list-style: none; display: grid; gap: 20px; }
.howto li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.howto__n { width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 2px solid var(--marigold); display: grid; place-items: center; font-size: 22px; }
.howto__title { font-family: var(--font-body); font-weight: 700; font-size: 19px; line-height: 1.3; text-transform: none; }
.howto p { color: var(--text-muted); margin-top: 2px; }
.sunbreath-card { display: grid; justify-items: center; text-align: center; align-self: start; position: sticky; top: calc(var(--header-h) + 24px); }
.sunbreath { position: relative; width: min(260px, 100%); aspect-ratio: 170 / 166; margin: 20px auto 4px; }
.sunbreath .sun-mark { position: absolute; inset: 0; width: 100%; height: 100%; }
.sunbreath__rays { transform: scale(.8); transform-origin: 50% 57.9%; opacity: .4; transition: transform 4s ease-in-out, opacity 4s ease-in-out; }
.sunbreath__rays .sun-mark__disc { fill: none; }
.sunbreath__core {
  position: absolute; left: 50%; top: 57.9%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--marigold);
  display: grid; place-items: center; transform: translate(-50%, -50%) scale(.85);
  transition: transform 4s ease-in-out, box-shadow 4s ease-in-out; box-shadow: 0 0 0 0 rgba(233, 161, 59, 0);
}
.sunbreath__label { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1; text-transform: uppercase; color: var(--ink); padding: 6px; }
.sunbreath.is-in .sunbreath__rays { transform: scale(1.04); opacity: 1; }
.sunbreath.is-in .sunbreath__core { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 14px rgba(233, 161, 59, .22), 0 0 56px 18px rgba(233, 161, 59, .4); }
.sunbreath.is-out .sunbreath__rays, .sunbreath.is-out .sunbreath__core { transition-duration: 6s; }
.sunbreath__cue { min-height: 2.6em; font-family: var(--font-head); font-weight: 600; font-size: 24px; line-height: 1.1; margin-top: 8px; }
.sunbreath__count { min-height: 1.5em; margin-bottom: 12px; }
@media (max-width: 960px) { .sunbreath-card { position: static; } }

/* ---------- Learn page: thank the sun ---------- */
.mantra__deva { font-size: clamp(21px, 2.3vw, 26px); line-height: 1.6; font-weight: 600; color: var(--ink); }
.mantra__latin { font-weight: 600; color: var(--rust); margin-top: 4px; }
.thanks-maker .icon-lg { color: var(--rust); }
.thanks-maker__pick { border: 0; padding: 0; min-width: 0; }
.thanks-maker__pick legend { margin-bottom: 10px; padding: 0; color: var(--text-on-blush); }
.pill--sm { min-height: 44px; padding: 8px 16px; font-size: 15px; background: var(--white); border-color: var(--field-border); }
.thanks-maker__text {
  width: 100%; border: 1.5px solid var(--field-border); border-radius: var(--radius-field); padding: 12px 14px;
  font: inherit; font-size: 18px; line-height: 1.5; background: var(--white); color: var(--ink); resize: vertical;
}
@media (max-width: 960px) and (min-width: 721px) { .ways__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ways__card { padding: 22px; } }
@media (max-width: 720px) { .ways__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sound toggle for the guided practices (off by default) ---------- */
.sound-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-pill);
  border: 2px solid var(--field-border); background: transparent; color: var(--ink); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.sound-toggle:hover { border-color: var(--saffron); }
.sound-toggle .ph { font-size: 20px; }
.sound-toggle .ph-speaker-high { display: none; }
.sound-toggle[aria-pressed="true"] { background: var(--blush); border-color: var(--saffron); color: var(--rust); }
.sound-toggle[aria-pressed="true"] .ph-speaker-high { display: inline-block; }
.sound-toggle[aria-pressed="true"] .ph-speaker-slash { display: none; }
.question__note { margin-top: 4px; font-size: 13px; color: var(--cream); }
.media--photo { aspect-ratio: 3 / 2; margin-inline: 0; margin-bottom: 0; }
.media--photo > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Learn page: Chair Surya Namaskar ---------- */
.jump { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .jump { grid-template-columns: minmax(0, 1fr); } }
.eyebrow .ph { font-size: 1.2em; vertical-align: -2px; }
.chair-steps { list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1080px) { .chair-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .chair-steps { grid-template-columns: minmax(0, 1fr); } }
.chair-step { display: grid; align-content: start; gap: 4px; padding: 20px; }
.chair-step__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.chair-step__num { font-size: 40px; }
.chair-step__breath { position: static; }
.chair-step__name { font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.05; }
.chair-step__how { font-size: 16px; line-height: 1.5; margin-top: 4px; }
.chair-step { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.chair-step__photo { margin: 0; aspect-ratio: 3 / 2; background: var(--sand); }
.chair-step__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chair-step__body { padding: 16px 20px 20px; display: grid; gap: 4px; align-content: start; }
.chair-step__num--word { font-size: 28px; text-transform: uppercase; }

/* Videos page: two slots ("Coming soon" until a YouTube link is added) */
.vcard__thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcard--soon .vcard__thumb img { opacity: .45; }
.vcard__soon { position: relative; display: inline-flex; align-items: center; gap: 8px; background: var(--marigold); color: var(--ink); border-radius: var(--radius-pill); padding: 8px 20px; font-family: var(--font-head); font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
.vcard--soon:hover .vcard__thumb img { transform: none; }

/* Homepage health card: heart button that fills when pressed (remembered on the device) */
.heart-btn { position: relative; width: 56px; height: 56px; margin-left: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--cream); font-size: 40px; display: grid; place-items: center; cursor: pointer; transition: background .2s var(--ease); }
.heart-btn:hover { background: rgba(250, 246, 240, .1); }
.heart-btn:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.heart-btn .ph { grid-area: 1 / 1; line-height: 1; }
.heart-btn__fill { color: var(--marigold); transform: scale(0); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.heart-btn[aria-pressed="true"] .heart-btn__fill { transform: scale(1); }
.heart-btn[aria-pressed="true"] .heart-btn__line { color: var(--marigold); }
.heart-btn.is-pop { animation: heart-pop .45s var(--ease); }
@keyframes heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .heart-btn__fill { transition: none; } .heart-btn.is-pop { animation: none; } }

/* Very small phones: long buttons wrap instead of making the page scroll sideways (QA 20 Oct 2026) */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

/* Kit downloads not ready yet: a quiet, non-clickable "Coming soon" button (QA 20 Oct 2026) */
.btn--soon, .btn--soon:hover { background: transparent; color: var(--text-muted); border: 1.5px dashed var(--field-border); cursor: default; box-shadow: none; transform: none; }
.btn--soon small { font-size: 13px; font-weight: 600; margin-left: 6px; opacity: .9; }