/* Shared by every page on cubiekids.tech: fonts, colours, header, menu,
   buttons, section headings and the footer. Page-only styles stay in each
   page. One light look, like the app: no dark mode, and "only light" stops
   phones from darkening it by force.
   Contrast: white text sits only on --orange-deep or darker (4.5:1 and up);
   --orange is for big bold headline words only (3:1 on cream). */

@font-face { font-family: "Baloo Da 2"; src: url("/fonts/balooda2_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito_bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Noto Sans Bengali"; src: url("/fonts/notosansbengali_regular.ttf") format("truetype"); font-weight: 400 700; font-display: swap; unicode-range: U+0980-09FF, U+200C-200D, U+25CC; }

:root {
  --ground: #FFF8EF;          /* warm cream */
  --ground-deep: #FFF1E4;     /* the soft peach bands */
  --card: #FFFFFF;
  --ink: #26222B;             /* KidInk */
  --ink-soft: #4A4453;        /* KidInkSoft */
  --muted: #6D6577;           /* KidMuted: 4.7:1 or more on every tint below */
  --line: #F1E2D0;
  --orange: #EA5F12;          /* headline words only */
  --orange-deep: #C2410C;     /* small orange text; white on it is 5.2:1 */
  --orange-dark: #A8360A;
  --orange-tint: #FFEBDD;
  --btn: linear-gradient(135deg, #CF4A0E 0%, #B83A0A 100%);
  --hl: #FFC300;              /* PlayYellow: the "Kids" box */
  --hl-ink: #3A2A00;
  --blue: #2E49B0; --blue-tint: #EAF1FF; --blue-solid: #3B5BDB;
  --pink: #97365F; --pink-tint: #FFEAF2; --pink-solid: #D6336C;
  --green: #17612A; --green-tint: #E6F6EE; --green-solid: #2F9E44;
  --purple: #4A2CA8; --purple-tint: #F0EAFF; --purple-solid: #7048E8;
  --yellow: #8A5B00; --yellow-tint: #FFF3D6; --yellow-solid: #F59F00;
  --teal: #0A5766; --teal-tint: #E0F3F4; --teal-solid: #0C8599;
  --peach: #A83D05; --peach-tint: #FFEBDD;
  /* older names the policy, terms and 404 pages still use */
  --brand: #B93F0A; --brand-bright: #A8360A; --brand-tint: var(--orange-tint); --on-brand: #FFFFFF;
  --bangla: var(--green); --bangla-tint: var(--green-tint);
  --english-solid: var(--blue-solid); --stories-solid: #A61E4D;
  --shadow: 0 1px 3px rgba(120, 60, 10, .06), 0 14px 32px -14px rgba(150, 70, 10, .22);
  --shadow-lg: 0 30px 60px -24px rgba(130, 55, 5, .38);
  --radius: 24px;
  --display: "Baloo Da 2", "Noto Sans Bengali", system-ui, sans-serif;
  --body: "Nunito", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: only light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
[lang="bn"] { font-family: "Noto Sans Bengali", var(--body); line-height: 1.75; }
a { color: var(--orange-deep); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
/* The pictures stay on the site (Mr Mehedi, 2026-09-27): a picture takes no
   clicks, so a right click or a long press finds no picture to save or open,
   and none can be dragged off the page. A tap still reaches the link around
   it. On a reading page, what the press finds instead is the picture's
   download copy (library.css img.dl), with "CubieKids" all over it. */
img { pointer-events: none; -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
:focus-visible { outline: 3px solid var(--orange-deep); outline-offset: 3px; border-radius: 8px; }
[id] { scroll-margin-top: 88px; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; color: var(--ink); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: #FFFFFF; padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- brand lockup: the Cubie family style, "Kids" in the app's yellow */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; min-height: 44px; }
.brand img { width: 44px; height: 44px; border-radius: 50%; box-shadow: 0 6px 14px -6px rgba(168, 70, 15, .55); }
.brand span { font: 700 25px/1 var(--display); letter-spacing: -.3px; display: inline-flex; align-items: center; gap: 7px; padding-top: 4px; }
.brand b { background: var(--hl); color: var(--hl-ink); padding: 4px 8px 1px; border-radius: 7px; line-height: 1; }

/* ---- header and phone menu */
.site-head { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ground) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); }
.site-head .wrap { display: flex; align-items: center; height: 74px; gap: 16px; }
.site-head .brand { margin-right: auto; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-soft); text-decoration: none; font-weight: 700; font-size: 15.5px; padding: 0 14px; border-radius: 999px; white-space: nowrap; }
.nav a:hover { background: var(--orange-tint); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--orange-tint); color: var(--ink); }
.btn-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--btn); color: #FFFFFF; font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(184, 58, 10, .8); }
.btn-cta:hover { background: linear-gradient(135deg, #BC420B, #A33208); }
.site-head .btn-cta { margin-left: 8px; }
/* The account button (sign in on the website, /account): a round face beside Download. */
.head-account { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); flex: none; }
.head-account svg { width: 22px; height: 22px; }
.head-account:hover, .head-account[aria-current="page"] { background: var(--orange-tint); border-color: #F3C9AE; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; }
.menu .icon-close { display: none; }
.menu[open] .icon-open { display: none; }
.menu[open] .icon-close { display: block; }
.menu .panel { position: absolute; right: 0; top: 58px; width: min(300px, calc(100vw - 32px)); background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lg); padding: 10px; display: grid; gap: 2px; }
.menu .panel a { color: var(--ink); text-decoration: none; font-weight: 700; min-height: 48px; padding: 0 14px; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.menu .panel a span { color: var(--muted); font-weight: 400; font-size: 15px; }
.menu .panel a:hover, .menu .panel a[aria-current="page"] { background: var(--orange-tint); }
.menu .panel a.btn-cta { margin-top: 6px; justify-content: center; color: #FFFFFF; }
.menu .panel a.btn-cta:hover { background: linear-gradient(135deg, #BC420B, #A33208); }
@media (max-width: 980px) {
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 560px) {
  .site-head .wrap { height: 66px; }
  .site-head .btn-cta { display: none; }
}

/* ---- buttons */
.btn-play { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 20px 8px 16px; border-radius: 18px; background: var(--btn); color: #FFFFFF; text-decoration: none; box-shadow: 0 16px 28px -14px rgba(184, 58, 10, .85); }
.btn-play:hover { background: linear-gradient(135deg, #BC420B, #A33208); }
.btn-play .gp { width: 30px; height: 30px; flex: none; }
.btn-play small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .2px; opacity: .95; }
.btn-play strong { display: block; font: 700 20px/1.05 var(--display); padding-top: 3px; }
.btn-play .arrow { width: 20px; height: 20px; margin-left: 6px; flex: none; }
.btn-soft { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 22px 0 14px; border-radius: 18px; background: var(--card); color: var(--ink); font-weight: 700; text-decoration: none; border: 1px solid var(--line); box-shadow: var(--shadow); }
.btn-soft:hover { border-color: var(--orange-deep); }
.btn-soft .dot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--orange-tint); color: var(--orange-deep); flex: none; }
.btn-soft .dot svg { width: 18px; height: 18px; }
.btn-line { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 700; text-decoration: none; border: 1.5px solid #F3C9AE; box-shadow: var(--shadow); }
.btn-line:hover { border-color: var(--orange-deep); color: var(--orange-deep); }
.btn-line svg { width: 18px; height: 18px; color: var(--orange-deep); }

/* ---- section headings: eyebrow, an English line and a Bangla line */
.eyebrow { display: block; margin: 0 0 8px; font-weight: 700; font-size: 14px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--orange-deep); }
.sec-head h2 { font-size: clamp(34px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -.6px; }
.sec-head h2 em, .hl-word { font-style: normal; color: #D9480F; background: linear-gradient(90deg, #EA5F12, #D24A0E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bn-sub { display: block; margin: 8px 0 0; font: 700 clamp(22px, 2.6vw, 28px)/1.5 var(--display); color: var(--ink-soft); }

/* ---- footer: the family footer (A product by CubieTec / Powered by Mr Mehedi) */
.site-foot { margin-top: 0; background: #FFF3E6; border-top: 1px solid var(--line); color: var(--ink-soft); }
.site-foot .foot-main { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; align-items: start; padding: 48px 0 34px; }
.site-foot .tagline { margin: 10px 0 0; color: var(--muted); font-size: 15px; font-weight: 700; line-height: 1.5; }
.site-foot .tagline span { display: block; font-weight: 400; }
.site-foot .mail { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; color: var(--ink); font-weight: 700; text-decoration: none; }
.site-foot .mail svg { width: 18px; height: 18px; color: var(--orange-deep); }
.site-foot .mail:hover { color: var(--orange-deep); text-decoration: underline; }
.site-foot .foot-brand .made-by { display: flex; width: fit-content; margin-top: 12px; }
.site-foot .foot-links { display: grid; gap: 2px; margin: 0; padding: 0; justify-items: start; }
.site-foot .foot-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-soft); font-weight: 700; font-size: 15.5px; text-decoration: none; }
.site-foot .foot-links a:hover { color: var(--orange-deep); text-decoration: underline; }
.site-foot .foot-label { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.site-foot .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 20px 0 32px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.made-by { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 18px 4px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); text-decoration: none; font-size: 15px; box-shadow: var(--shadow); }
.made-by i { width: 32px; height: 32px; border-radius: 50%; background: var(--hl); display: grid; place-items: center; }
.made-by i svg { width: 15px; height: 15px; }
.made-by strong { color: var(--ink); font-weight: 700; }
.made-by:hover { border-color: var(--orange-deep); }
.powered a { display: inline-block; padding: 11px 1px; color: var(--ink); font-weight: 700; text-decoration: none; background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 88%, transparent 88%) content-box; }
.powered a:hover { background: var(--hl) content-box; color: var(--hl-ink); }
@media (max-width: 980px) {
  .site-foot .foot-main { grid-template-columns: 1fr 1fr 1fr; gap: 28px 32px; }
  .site-foot .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .site-foot .foot-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand span { font-size: 23px; }
  .site-foot .foot-main { gap: 26px 20px; padding-top: 40px; }
  .site-foot .foot-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print { .site-head, .site-foot { display: none; } }