/* giftedapp.in — the look of the Gifted logo: warm paper, the wordmark's green, golden toast,
   soft watercolour shapes and the little yellow / green / blue sparks.
   Colours were picked from the logo (website/img/brand/colors.json). */
:root {
  --paper: #FCFAEB;      /* the logo's background */
  --paper-2: #F7F1DD;
  --paper-3: #EFE5CA;
  --card: #FFFEF8;
  --line: #EADFC4;
  --green: #647C4C;      /* the "Gifted" wordmark */
  --green-d: #536A3E;
  --green-dd: #435833;
  --green-l: #E6EED8;
  --green-ll: #F1F5E7;
  --leaf: #8EAE5F;       /* green spark */
  --sun: #FCC454;        /* yellow spark */
  --sun-l: #FEF2D0;
  --sky: #9BCDDE;        /* blue spark */
  --sky-l: #E8F3F6;
  --bread: #FCE4A4;      /* Toastie's face */
  --bread-l: #FDF2D5;
  --crust: #DE8E3E;      /* Toastie's crust */
  --crust-d: #A9622A;
  --blush: #F4B5A0;      /* Toastie's cheeks */
  --blush-l: #FCEBE3;
  --ink: #3F3528;
  --ink-2: #74644C;      /* the tagline */
  --ink-3: #9A8A70;
  --shadow: 0 20px 44px -30px rgba(92, 70, 30, 0.45), 0 2px 6px -2px rgba(92, 70, 30, 0.08);
  --shadow-sm: 0 10px 24px -18px rgba(92, 70, 30, 0.5);
  --r-lg: 30px; --r-md: 22px; --r-sm: 14px;
  --wrap: 1140px;
  --display: 'Fredoka', ui-rounded, system-ui, -apple-system, sans-serif;
  --body: 'Quicksand', ui-rounded, system-ui, -apple-system, sans-serif;
  --hand: 'Patrick Hand', 'Quicksand', ui-rounded, system-ui, sans-serif;
  --sparks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 20'%3E%3Cg stroke-linecap='round' stroke-width='4' fill='none'%3E%3Cpath d='M3 5l7 5' stroke='%23FCC454'/%3E%3Cpath d='M16 2l2 9' stroke='%238EAE5F'/%3E%3Cpath d='M24 13l9-3' stroke='%239BCDDE'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 17px/1.65 var(--body); overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h1, h2 { color: var(--green-dd); }
p { margin: 0; }
::selection { background: var(--bread); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 10px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--bread); padding: 8px 14px; border-radius: 12px; }
.skip:focus { left: 16px; }
.muted { color: var(--ink-2); }
.small { font-size: 0.9rem; }

/* ---------- Buttons & chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font: 600 1.05rem/1 var(--display); text-decoration: none; color: var(--green-dd);
  padding: 16px 26px; border: 2px solid var(--line); border-radius: 999px; background: var(--card);
  box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, background .15s, border-color .15s;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); border-color: var(--green-l); box-shadow: 0 14px 26px -16px rgba(92, 70, 30, 0.55); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 12px 24px -12px rgba(67, 88, 51, 0.7); }
.btn-primary:hover { background: var(--green-d); border-color: var(--green-d); box-shadow: 0 16px 28px -14px rgba(67, 88, 51, 0.8); }
.btn-sm { padding: 11px 18px; font-size: 0.95rem; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border-radius: 999px; background: var(--green-ll); color: var(--green-dd); border: 1.5px solid var(--green-l);
  font: 600 0.9rem/1.2 var(--display); white-space: nowrap;
}
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 400 1.3rem/1.2 var(--hand); color: var(--ink-2); margin-bottom: 12px; }
.eyebrow::before { content: ''; width: 36px; height: 20px; flex: none; background: var(--sparks) center / contain no-repeat; }
.section-head.center .eyebrow { justify-content: center; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(252, 250, 235, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1.5px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; height: 74px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand .mark { width: auto; height: 48px; margin-top: -4px; }
.brand .word { width: auto; height: 30px; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { text-decoration: none; font: 600 0.98rem/1 var(--display); padding: 10px 12px; border-radius: 999px; color: var(--ink-2); }
.nav a:hover { background: var(--green-ll); color: var(--green-dd); }
.menu { display: none; margin-left: auto; position: relative; }
/* English | हिन्दी: the same page in the other language (tools/site_hindi.js makes the Hindi pages) */
.lang-switch { display: inline-flex; flex: none; border: 2px solid var(--line); border-radius: 999px; background: var(--card); padding: 3px; gap: 2px; }
.lang-switch a { text-decoration: none; font: 600 0.9rem/1 var(--display); padding: 8px 12px; border-radius: 999px; color: var(--ink-2); white-space: nowrap; }
.lang-switch a[lang="hi"] { font-family: 'Baloo 2', var(--display); font-size: 0.98rem; padding-block: 9px 5px; }
.lang-switch a:hover { color: var(--green-dd); background: var(--green-ll); }
.lang-switch a[aria-current="page"] { background: var(--green); color: #fff; }
/* About us: the two founders side by side (one column on phones) */
.about .team { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0 8px; }
.about .person p { margin: 10px 0 0; }
.about .who { display: flex; align-items: center; gap: 14px; }
.about .who h2 { margin: 0 0 4px; }
.about .avatar { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; font: 700 1.6rem/1 var(--display); }
@media (max-width: 760px) { .about .team { grid-template-columns: 1fr; } }
.menu summary { list-style: none; cursor: pointer; width: 46px; height: 46px; border: 2px solid var(--line); border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--green-dd); font-size: 1.2rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--green-ll); }
.menu nav { position: absolute; right: 0; top: 56px; width: min(280px, calc(100vw - 32px)); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 8px; display: grid; }
.menu nav a { text-decoration: none; font: 600 1.05rem/1 var(--display); padding: 14px; border-radius: 14px; color: var(--ink); }
.menu nav a:hover { background: var(--green-ll); }
.menu nav a.btn { color: #fff; }
@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; margin-left: 0; }
  .lang-switch { margin-left: auto; }
  .site-header .btn { display: none; }
}
@media (max-width: 380px) { .brand .mark { height: 42px; } .brand .word { height: 26px; } }
/* Small phones: only the other language shows (one tap to switch) */
@media (max-width: 430px) { .site-header .wrap { gap: 12px; } .lang-switch a[aria-current="page"] { display: none; } }

/* ---- हिन्दी pages: Baloo 2 for headings and Hind for reading (Fredoka and Quicksand have no Devanagari letters) ---- */
html[lang="hi"] { --display: 'Baloo 2', 'Fredoka', ui-rounded, system-ui, sans-serif; --body: 'Hind', 'Quicksand', system-ui, sans-serif; --hand: 'Baloo 2', 'Patrick Hand', system-ui, sans-serif; }
html[lang="hi"] body { font-weight: 400; line-height: 1.75; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4 { line-height: 1.3; letter-spacing: 0; }
html[lang="hi"] .tile .kind { text-transform: none; letter-spacing: 0; }
html[lang="hi"] b, html[lang="hi"] strong { font-weight: 600; }
.hi-note { font-size: 0.92rem; color: var(--ink-2); background: var(--butter, #FDF2D5); border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 14px; margin: 12px 0 4px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 64px 0 120px; overflow: hidden;
  background:
    radial-gradient(520px 380px at 88% 18%, var(--bread-l), transparent 70%),
    radial-gradient(460px 360px at 4% 92%, var(--green-ll), transparent 70%),
    var(--paper); }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; background: var(--paper-2); clip-path: ellipse(75% 100% at 50% 100%); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; position: relative; z-index: 1; }
.hero .eyebrow { font-size: 1.45rem; }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); font-weight: 700; margin: 6px 0 22px; }
.hero h1 .hl { position: relative; white-space: nowrap; color: var(--green); }
.hero h1 .hl::after { content: ''; position: absolute; left: 2%; right: 2%; bottom: -0.02em; height: 0.2em; border-radius: 99px; background: var(--sun); opacity: 0.75; z-index: -1; transform: rotate(-1.2deg); }
.hero .lede { font-size: 1.2rem; max-width: 34em; color: var(--ink); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 20px; }
.hero .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hero .fine { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.95rem; color: var(--ink-2); font-weight: 600; }
.hero .fine span::before { content: '✓ '; color: var(--leaf); font-weight: 700; }
.hero-art { position: relative; display: flex; justify-content: center; min-height: 580px; }
.hero-art .phone { width: 285px; position: relative; z-index: 2; transform: rotate(2.5deg); margin-left: 70px; }
.hero-art .phone.back { position: absolute; width: 245px; right: 0; top: 58px; transform: rotate(9deg); z-index: 1; margin: 0; }
.hero-art .mascot { position: absolute; left: -24px; bottom: -6px; width: 300px; z-index: 3; filter: drop-shadow(0 18px 18px rgba(120, 80, 30, 0.18)); }
.bubble {
  position: absolute; z-index: 4; background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; padding: 10px 16px;
  font: 400 1.25rem/1.15 var(--hand); color: var(--green-dd); box-shadow: var(--shadow-sm); white-space: nowrap;
}
.bubble::after { content: ''; position: absolute; width: 16px; height: 16px; background: var(--card); border-right: 1.5px solid var(--line); border-bottom: 1.5px solid var(--line); bottom: -9px; left: 40px; transform: rotate(45deg); }
.hero-art .bubble { left: 20px; bottom: 236px; }
@media (max-width: 900px) {
  .hero { padding: 36px 0 96px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 24px; }
  .hero-art { min-height: 0; padding: 10px 0 10px; }
  .hero-art .phone { width: min(240px, 58vw); margin-left: 22vw; }
  .hero-art .phone.back { width: min(200px, 46vw); top: 34px; right: -4vw; }
  .hero-art .mascot { width: min(230px, 54vw); left: -10px; }
  .hero-art .bubble { left: 6px; bottom: calc(min(230px, 54vw) * 0.76 + 8px); font-size: 1.1rem; }
}

/* ---------- Phone frame around the app screenshots ---------- */
.phone { background: #3B3127; border-radius: 44px; padding: 9px; box-shadow: 0 30px 50px -28px rgba(70, 50, 20, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.phone img { border-radius: 36px; width: 100%; height: auto; background: var(--paper-2); }

/* ---------- Sections ---------- */
section { padding: 92px 0; }
.section-head { max-width: 760px; margin-bottom: 46px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
.section-head p { font-size: 1.15rem; color: var(--ink-2); margin-top: 16px; }
.band-cream { background: var(--paper-2); }
.band-sage { background: var(--green-ll); }
.band-sky { background: var(--sky-l); }
.band-lav { background: var(--bread-l); }
@media (max-width: 700px) { section { padding: 64px 0; } .section-head { margin-bottom: 32px; } }

/* ---------- Cards ---------- */
.card { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 28px; overflow: hidden; }
.card.soft { isolation: isolate; }
.card.soft::after { content: ''; position: absolute; z-index: -1; width: 190px; height: 190px; right: -70px; bottom: -80px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); pointer-events: none; }
.card h3 { font-size: 1.4rem; margin-bottom: 8px; color: var(--ink); }
.card .icon { font-size: 2.3rem; line-height: 1; margin-bottom: 14px; display: block; }
.c-butter { background: var(--bread-l); border-color: #F3E2B6; }
.c-sage { background: var(--green-ll); border-color: var(--green-l); }
.c-sky { background: var(--sky-l); border-color: #D3E8EF; }
.c-blush { background: var(--blush-l); border-color: #F5D9CC; }
.c-lav { background: var(--sun-l); border-color: #F6E3AE; }
.c-cream { background: var(--paper-2); border-color: var(--line); }
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .g3 { grid-template-columns: 1fr; } }
/* A row of 3 whose last row is shorter: the leftover cards sit in the middle */
.g3.even { display: flex; flex-wrap: wrap; justify-content: center; }
.g3.even > * { flex: 0 1 calc((100% - 44px) / 3); }
@media (max-width: 900px) { .g3.even > * { flex-basis: 100%; } }
@media (max-width: 640px) { .g2, .g4 { grid-template-columns: 1fr; } }

/* ---------- Strip of promises under the hero ---------- */
.promises { margin-top: -50px; position: relative; z-index: 2; padding: 0; background: linear-gradient(transparent 50px, var(--paper-2) 50px); }
.promises .grid { gap: 16px; padding-bottom: 8px; }
.promise { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow); padding: 20px; }
.promise .em { font-size: 1.7rem; line-height: 1; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 16px; background: var(--green-ll); }
.promise:nth-child(2) .em { background: var(--sky-l); }
.promise:nth-child(3) .em { background: var(--sun-l); }
.promise:nth-child(4) .em { background: var(--blush-l); }
.promise b { display: block; font: 600 1.08rem/1.25 var(--display); }
.promise span { font-size: 0.93rem; color: var(--ink-2); line-height: 1.45; display: block; margin-top: 4px; }
#how { background: var(--paper-2); }

/* ---------- How a day works ---------- */
.step { padding-top: 30px; }
.step .num { position: absolute; top: 14px; right: 24px; font: 400 3.6rem/1 var(--hand); color: var(--crust); opacity: 0.55; }
.step p { color: var(--ink); }
.quote { margin-top: 36px; display: flex; gap: 22px; align-items: center; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 24px 30px; box-shadow: var(--shadow); }
.quote .toastie { width: 96px; flex: none; }
.quote blockquote { margin: 0; font: 400 clamp(1.35rem, 2.6vw, 1.75rem)/1.3 var(--hand); color: var(--green-dd); }
.quote cite { display: block; font: 600 0.92rem/1.4 var(--body); font-style: normal; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 640px) { .quote { flex-direction: column; text-align: center; } }

/* ---------- Ages ---------- */
.age .badge { display: inline-flex; margin-bottom: 12px; background: rgba(255, 255, 255, 0.7); }
.age p { color: var(--ink); }

/* ---------- Feature rows with a phone ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature + .feature { margin-top: 100px; }
.feature.flip .feature-art { order: -1; }
.feature-art { display: flex; justify-content: center; align-items: flex-start; gap: 22px; position: relative; }
.feature-art .phone { width: 270px; }
.feature-art .phone:nth-child(2) { margin-top: 56px; }
.feature h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); font-weight: 700; }
.feature .lede { font-size: 1.12rem; color: var(--ink-2); margin: 16px 0 26px; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 36px; }
  .feature.flip .feature-art { order: 0; }
  .feature-art .phone { width: min(230px, 44vw); }
  .feature-art .phone:nth-child(2) { margin-top: 36px; }
}

/* Activity tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tile { border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--card); padding: 15px 16px; box-shadow: var(--shadow-sm); }
.tile .top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.tile .top .ic { font-size: 1.5rem; line-height: 1; }
.tile b { font: 600 1.04rem/1.2 var(--display); }
.tile p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.tile .kind { margin-left: auto; font: 600 0.7rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 9px; border-radius: 999px; background: var(--green-ll); color: var(--green-d); }
.tile.premium { background: var(--sun-l); border-color: #F6E3AE; }
.tile.premium .kind { background: rgba(255, 255, 255, 0.75); color: var(--crust-d); }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; } }

/* Ticks */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 34px; }
.ticks li::before { content: '✓'; position: absolute; left: 0; top: 2px; width: 23px; height: 23px; border-radius: 50%; background: var(--leaf); color: #fff; font: 700 0.78rem/23px var(--display); text-align: center; }
.ticks b { font-family: var(--display); font-weight: 600; }

/* ---------- Story shelf ---------- */
.shelf-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.shelf-tabs label { cursor: pointer; }
.shelf-tabs label.chip { padding: 10px 18px; font-size: 1rem; background: var(--card); border-color: var(--line); color: var(--ink-2); }
.shelf { display: none; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#age13:checked ~ .shelves .s13, #age46:checked ~ .shelves .s46, #age68:checked ~ .shelves .s68 { display: grid; }
#age13:checked ~ .shelf-tabs label[for=age13], #age46:checked ~ .shelf-tabs label[for=age46], #age68:checked ~ .shelf-tabs label[for=age68] { background: var(--green); border-color: var(--green); color: #fff; }
#age13:focus-visible ~ .shelf-tabs label[for=age13], #age46:focus-visible ~ .shelf-tabs label[for=age46], #age68:focus-visible ~ .shelf-tabs label[for=age68] { outline: 3px solid var(--sky); outline-offset: 3px; }
.book { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow-sm); }
.book .cover { width: 56px; height: 66px; flex: none; display: grid; place-items: center; font-size: 1.9rem; border-radius: 6px 14px 14px 6px; background: var(--bread); box-shadow: inset 7px 0 0 rgba(222, 142, 62, 0.35); }
.s46 .book .cover { background: var(--green-l); box-shadow: inset 7px 0 0 rgba(100, 124, 76, 0.3); }
.s68 .book .cover { background: #D6EAF1; box-shadow: inset 7px 0 0 rgba(103, 155, 180, 0.35); }
.book b { font: 600 1rem/1.25 var(--display); }
.book span { display: block; font-size: 0.82rem; color: var(--ink-2); font-weight: 600; margin-top: 2px; }
.age-radios { position: absolute; opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .shelf { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .shelf { grid-template-columns: 1fr; } }

/* ---------- Buddies parade ---------- */
.parade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 6px; margin: 8px 0 48px; }
.parade figure { margin: 0; text-align: center; min-width: 0; }
.parade .art { width: min(82px, 100%); aspect-ratio: 1; margin: 0 auto; }
.parade figcaption { font: 600 0.78rem/1.2 var(--display); color: var(--ink-2); margin-top: 2px; }
.coins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.coin { text-align: center; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 18px 10px; box-shadow: var(--shadow-sm); }
.coin b { display: flex; align-items: center; justify-content: center; gap: 7px; font: 700 1.9rem/1 var(--display); color: var(--green-dd); }
.coin b::before { content: ''; width: 0.85em; height: 0.85em; background: url(img/brand/coin.svg) center / contain no-repeat; } /* the app's gold coin */
.coin-img { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; }
.coin span { display: block; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); margin-top: 7px; line-height: 1.35; }
@media (max-width: 700px) { .coins { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1000px) { .parade { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 560px) { .parade { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Grown-ups gallery ---------- */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 250px; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 26px; margin: 0 -4px; scrollbar-width: thin; }
.gallery figure { margin: 0; scroll-snap-align: start; }
@media (min-width: 1100px) { .gallery { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; gap: 24px; } }
.gallery figcaption { margin-top: 16px; }
.gallery figcaption b { display: block; font: 600 1.12rem/1.25 var(--display); }
.gallery figcaption span { display: block; font-size: 0.93rem; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
.mini { display: flex; gap: 14px; align-items: flex-start; }
.mini .em { font-size: 1.6rem; line-height: 1; flex: none; width: 50px; height: 50px; display: grid; place-items: center; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-sm); }
.mini b { display: block; font: 600 1.08rem/1.25 var(--display); }
.mini p { font-size: 0.94rem; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }

/* ---------- Pricing ---------- */
.plans { align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan .price { font: 700 3rem/1 var(--display); color: var(--green-dd); margin: 14px 0 4px; }
.plan .price small { font: 600 1rem/1 var(--body); color: var(--ink-2); margin-left: 6px; }
.plan .per { color: var(--ink-2); font-weight: 600; font-size: 0.95rem; margin-bottom: 20px; }
.plan .ticks { margin-bottom: 26px; font-size: 0.98rem; }
.plan .btn { margin-top: auto; }
.plan.best { background: var(--card); border: 2.5px solid var(--green); transform: translateY(-10px); }
.plan .flag { position: absolute; top: 18px; right: 18px; background: var(--sun); border-color: var(--sun); color: var(--ink); }
.extras { margin-top: 44px; }
.extras h3 { font-size: 1.35rem; margin-bottom: 16px; }
.extra-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1.5px dashed var(--line); }
.extra-row:first-of-type { border-top: 0; }
.extra-row .em { font-size: 1.6rem; min-width: 40px; text-align: center; flex: none; white-space: nowrap; }
.extra-row .t { flex: 1; min-width: 0; }
.extra-row b { font: 600 1.05rem/1.25 var(--display); }
.extra-row p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.extra-row .amt { font: 700 1.25rem/1 var(--display); color: var(--green-dd); text-align: right; white-space: nowrap; }
.extra-row .amt s { display: block; font: 600 0.85rem/1.4 var(--body); color: var(--ink-3); }
@media (max-width: 900px) { .plan.best { transform: none; } }
@media (max-width: 560px) {
  .extra-row { display: grid; grid-template-columns: 40px 1fr; align-items: start; column-gap: 12px; row-gap: 6px; }
  .extra-row .amt { grid-column: 2; text-align: left; }
  .extra-row .amt s { display: inline; margin-left: 8px; }
}

/* ---------- Install ---------- */
.install .card { padding: 26px; }
.install ol { margin: 10px 0 0; padding-left: 1.3em; color: var(--ink); }
.install li { margin: 6px 0; }
/* Google Play: the badge button and the download card with its QR code */
.play-badge { display: inline-flex; align-items: center; gap: 12px; background: #1F1A14; color: #fff; border-radius: 14px; padding: 10px 22px 10px 16px;
  text-decoration: none; box-shadow: var(--shadow-sm); border: 1.5px solid #1F1A14; transition: transform .15s ease; }
.play-badge:hover { transform: translateY(-2px); }
.play-badge svg { width: 30px; height: 30px; flex: none; }
.play-badge span { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.play-badge small { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.play-badge b { font: 600 1.35rem/1.1 var(--display); }
.final .play-badge { margin: 0 auto; }
/* App Store: a grey "coming soon" badge until WEBSITE.APP_STORE_URL is filled in; then a second badge and QR code */
.play-badge.soon { background: var(--card); color: var(--ink-2); border: 1.5px dashed var(--ink-3); box-shadow: none; cursor: default; }
.play-badge.soon:hover { transform: none; }
.play-badge.soon small { opacity: 1; }
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.final .store-badges { justify-content: center; }
.download { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; padding: 40px; background: var(--card); }
.download h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 700; margin: 6px 0 10px; }
.download .dl-text > p { color: var(--ink-2); margin-bottom: 22px; max-width: 34em; }
.download .dl-steps { margin-top: 22px; }
.dl-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; font: 600 1rem var(--display); color: var(--ink-2); }
.dl-qr .qr { position: relative; width: 220px; max-width: 100%; aspect-ratio: 1; padding: 16px; background: #fff; border: 1.5px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); }
.dl-qr .qr svg, .dl-qr .qr > img { display: block; width: 100%; height: 100%; }
/* The Gifted icon in the middle of the code (the code is made to still scan with it there) */
.dl-qr .qr .qr-logo { position: absolute; left: 50%; top: 50%; width: 20%; height: auto; transform: translate(-50%, -50%); border: 3px solid #fff; border-radius: 22%; background: #fff; }
.qr-pair { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.qr-pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-pair .qr { width: 180px; }
.dl-link { max-width: 300px; text-align: center; font: 600 0.82rem/1.4 var(--body, inherit); color: var(--green-d); overflow-wrap: anywhere; }
@media (max-width: 800px) { .download { grid-template-columns: 1fr; padding: 28px 22px; text-align: left; } }
kbd { font: 600 0.88em/1 var(--display); background: var(--card); border: 1.5px solid var(--ink-3); border-radius: 7px; padding: 2px 6px; white-space: nowrap; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; font: 600 1.1rem/1.35 var(--display); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 1.3rem/1 var(--display); background: var(--green-ll); color: var(--green-dd); }
.faq details[open] summary::after { content: '–'; background: var(--green); color: #fff; }
.faq .a { padding: 0 24px 22px; color: var(--ink); }
.faq .a a { color: var(--green-d); font-weight: 600; }

/* ---------- Final call ---------- */
.final { text-align: center; }
.final .card { background: var(--bread-l); border-color: #F3E2B6; padding: 48px 24px 56px;
  background-image: radial-gradient(380px 220px at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%); }
.final .mascot { width: 300px; margin: 0 auto 6px; }
.final h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 700; }
.final p { font-size: 1.15rem; color: var(--ink); margin: 14px auto 28px; max-width: 32em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper-2); color: var(--ink); padding: 56px 0 36px; margin-top: 40px; border-top: 1.5px solid var(--line); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: start; }
.site-footer .logo { width: 170px; height: auto; }
.site-footer h4 { font: 400 1.35rem/1 var(--hand); color: var(--ink-2); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--green-d); text-decoration: underline; }
.site-footer .legal { border-top: 1.5px solid var(--line); margin-top: 36px; padding-top: 20px; font-size: 0.88rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 760px) { .site-footer .cols { grid-template-columns: 1fr 1fr; } .site-footer .cols > :first-child { grid-column: 1 / -1; } .site-footer .logo { width: 140px; } }

/* ---------- Plain pages (terms, refunds, contact, privacy) ---------- */
.page { max-width: 780px; padding: 56px 0 40px; }
.page h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); font-weight: 700; margin-bottom: 8px; }
.page h2 { font-size: 1.35rem; margin: 2em 0 0.5em; }
.page p, .page li { color: var(--ink); }
.page p + p { margin-top: 0.9em; }
.page ul { padding-left: 1.25em; }
.page li { margin: 0.35em 0; }
.page .card { margin-top: 26px; }
.page a:not(.btn) { color: var(--green-d); font-weight: 600; }
.page h3 { font-size: 1.08rem; margin: 1.4em 0 0.4em; }
.page ol { padding-left: 1.4em; }
.page ol li { margin: 0.35em 0; }
.page .toc { margin-top: 22px; padding: 16px 20px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); }
.page .toc ol { columns: 2; column-gap: 28px; margin: 6px 0 0; font-size: 0.95rem; }
@media (max-width: 640px) { .page .toc ol { columns: 1; } }
.page .facts { margin-top: 18px; padding: 16px 20px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--card); }
.page .facts p { margin: 0.25em 0; }
.page .table-wrap { overflow-x: auto; margin: 14px 0; }
.page table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; }
.page th, .page td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1.5px solid var(--line); }
.page th { background: var(--card); font-family: var(--display); font-weight: 600; }
.site-footer .legal-address { margin-top: 10px; font-size: 0.85rem; color: var(--ink-2); }

/* Toastie floats gently */
.bob { animation: bob 3.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bob { animation: none; }
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

/* ---------- Social links (footer and Contact Us) ---------- */
.social { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social-label { font: 400 1.25rem/1 var(--hand); color: var(--ink-2); margin-right: 2px; }
.social .soc { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--card); border: 1.5px solid var(--line); color: var(--green-d); text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .15s; }
.social .soc svg { width: 20px; height: 20px; flex: none; }
.social .soc:hover, .social .soc:focus-visible { background: var(--green); border-color: var(--green); color: #fff; text-decoration: none; transform: translateY(-2px); }
.social.labelled { margin-top: 8px; }
.social.labelled .soc { width: auto; padding: 0 18px 0 14px; border-radius: 999px; font: 600 0.98rem/1 var(--display); }
@media (prefers-reduced-motion: reduce) { .social .soc { transition: none; } .social .soc:hover { transform: none; } }

/* "No Crumbs in class mode" chip on the home page (Class mode card) */
.chip.nocrumbs { background: #FFF1E0; color: #6B3A22; border: 2px solid #B5482F; font-size: 1rem; white-space: normal; }
/* ---------- Coming soon (until Gifted is on Google Play) ---------- */
.play-badge.upcoming { cursor: default; }
.play-badge.upcoming:hover { transform: none; }
.dl-follow .mascot { width: 230px; max-width: 100%; }
.dl-follow .social, .final .social { margin-top: 0; justify-content: center; }
.final .social { margin-top: 22px; }