/* RudiKids – strona informacyjna. Wygląd z aplikacji (scene.css / app.css): Baloo 2 + Nunito, paleta nocy i świtu,
   zaokrąglone karty. Jasny i ciemny motyw (prefers-color-scheme). Bez zewnętrznych CDN, bez ciasteczek. */

@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/baloo2-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/baloo2-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --night: #1E2156;
  --night-2: #2C3182;
  --dawn: #FF9F7A;
  --peach: #FFD9C2;
  --sun: #FFC83D;
  --sun-deep: #D79A00;
  --mint: #2FC99A;
  --lilac: #A98BFF;
  --fox: #EE7A36;
  --paper: #FFF4E6;
  --paper-2: #FFFBF5;

  --bg: var(--paper);
  --card: var(--paper-2);
  --card-2: #F6EEFF;
  --ink: #23264F;
  --ink-soft: #52567F;
  --heading: var(--night);
  --line: rgba(35, 38, 79, .12);
  --link: #3A3E9E;
  --link-hover: #1E2156;
  --focus: #6A4DFF;
  --chip: #F1ECF8;
  --note-bg: #FFF0D1;
  --note-line: #E3A21A;
  --shadow-card: 0 18px 40px -24px rgba(30, 33, 86, .45), 0 1px 0 rgba(255, 255, 255, .7) inset;
  --r-lg: 32px;
  --r-md: 22px;
  --r-sm: 14px;
  --display: "Baloo 2", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 32px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14163A;
    --card: #1E2156;
    --card-2: #262A6B;
    --ink: #EEEDFF;
    --ink-soft: #C4C6EC;
    --heading: #FFFFFF;
    --line: rgba(255, 255, 255, .14);
    --link: #FFD36B;
    --link-hover: #FFE7A6;
    --focus: #FFD36B;
    --chip: #2C3182;
    --note-bg: #2A2250;
    --note-line: #FFC83D;
    --shadow-card: 0 18px 40px -24px rgba(0, 0, 0, .8);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--heading); line-height: 1.12; margin: 0 0 .45em; font-weight: 800; letter-spacing: -.005em; }
h1 { font-size: clamp(34px, 6vw, 58px); }
h2 { font-size: clamp(26px, 3.6vw, 38px); }
h3 { font-size: clamp(21px, 2.4vw, 25px); }
h4 { font-size: 19px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin: .25em 0; }
small, .small { font-size: .88em; }
.muted { color: var(--ink-soft); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--sun); color: var(--night); padding: 10px 16px; border-radius: 12px; font-weight: 800; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Nagłówek ─────────────────────────────────────────── */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--night); color: #fff; box-shadow: 0 6px 20px -12px rgba(0, 0, 0, .6); }
.head-row { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; }
.brand img { width: 40px; height: 40px; border-radius: 12px; }
.brand b { font-family: var(--display); font-size: 25px; font-weight: 800; line-height: 1; }
.brand:hover { color: #fff; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav a { color: #E6E7FF; text-decoration: none; font-weight: 800; font-size: 15px; padding: 8px 7px; border-radius: 999px; white-space: nowrap; }
.nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav a[aria-current] { background: rgba(255, 200, 61, .18); color: #FFE08A; }
.head-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.lang { color: #fff; font-weight: 900; font-size: 14px; text-decoration: none; border: 2px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 5px 11px; }
.lang:hover { border-color: var(--sun); color: #fff; }
.menu-btn { display: none; }

@media (max-width: 1180px) {
  .js .menu-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); color: #fff; border: 0; border-radius: 999px; padding: 9px 14px; font: 800 15px var(--body); cursor: pointer; }
  .head-row { flex-wrap: wrap; }
  .head-tools { margin-left: auto; }
  .nav { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px 0 12px; }
  .nav a { font-size: 17px; padding: 11px 12px; border-radius: 12px; }
  .js .nav { display: none; }
  .js .site-head.open .nav { display: flex; }
}
@media (max-width: 420px) {
  .brand b { font-size: 21px; }
  .brand img { width: 34px; height: 34px; }
  .head-row { gap: 8px; }
  .head-tools { gap: 6px; }
  .js .menu-btn { padding: 9px 12px; }
  .menu-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .head-tools .btn-sun { padding: 8px 12px; font-size: 14px; }
  .lang { padding: 4px 9px; }
}

/* ── Przyciski ───────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 24px; min-height: 48px;
  font: 900 17px/1.15 var(--body); text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.btn-sun { background: var(--sun); color: var(--night); box-shadow: 0 6px 0 var(--sun-deep); }
.btn-sun:hover { color: var(--night); transform: translateY(1px); box-shadow: 0 5px 0 var(--sun-deep); }
.btn-sun:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sun-deep); }
.head-tools .btn-sun { min-height: 40px; padding: 8px 16px; font-size: 15px; box-shadow: 0 4px 0 var(--sun-deep); }
.btn-ghost { background: rgba(30, 33, 86, .5); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.btn-ghost:hover { color: #fff; background: rgba(30, 33, 86, .7); }
.btn-soft { background: var(--chip); color: var(--heading); }
.btn-soft:hover { color: var(--heading); filter: brightness(.97); }

/* ── Hero ────────────────────────────────────────────── */
/* The artwork leaves its left half clear for the download message. */
.hero { position: relative; overflow: hidden; background: #FFF1DC; color: var(--night); }
.hero-inner { position: relative; min-height: 660px; padding-top: 52px; padding-bottom: 48px; }
.hero-copy { position: relative; z-index: 1; width: 49%; max-width: 540px; }
.hero h1 { color: var(--night); margin-bottom: .25em; text-wrap: balance; font-size: clamp(34px, 4.2vw, 54px); }
.hero .lead { font-size: clamp(17px, 1.55vw, 19px); color: #34385F; max-width: 32em; }
.hero .tagline { font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2vw, 24px); color: #37355C; margin: 0 0 .6em; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 24px 0 18px; }
.hero .btn-ghost { background: #F1ECF8; color: var(--night); }
.hero-art { position: absolute; z-index: 0; inset: 0; margin: 0; pointer-events: none; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.facts li { background: rgba(255, 251, 245, .88); color: var(--night); border-radius: 999px; padding: 6px 13px; font-weight: 800; font-size: 15px; margin: 0; }
.hero .trial-summary { color: #34385F; font-weight: 700; max-width: 30em; }
@media (min-width: 821px) { .hero-art { left: calc((min(100vw, var(--wrap)) - 100vw) / 2); right: calc((min(100vw, var(--wrap)) - 100vw) / 2); } }
@media (max-width: 820px) {
  .hero-inner { min-height: auto; padding-top: 28px; padding-bottom: 0; }
  .hero-copy { width: 100%; max-width: 620px; }
  .hero-art { position: relative; height: clamp(240px, 55vw, 390px); width: calc(100% + 2 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); }
  .hero-art img { object-position: right center; }
}

/* ── Sekcje i karty ──────────────────────────────────── */
main { display: block; }
.section { padding: clamp(36px, 6vw, 72px) 0; }
.section + .section { padding-top: 0; }
.section-intro { max-width: 46em; margin-bottom: 26px; }
.section-intro p { color: var(--ink-soft); font-size: 18px; }
.card { background: var(--card); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line); min-width: 0; }
.grid { display: grid; gap: clamp(14px, 2.4vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card h3 { margin-bottom: .35em; }
.card p:last-child, .card ul:last-child, .card ol:last-child { margin-bottom: 0; }
.icon-dot { width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; background: var(--chip); margin-bottom: 10px; }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
.split.rev > :first-child { order: 2; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } }

/* zrzuty ekranu i ilustracje */
figure { margin: 0; }
.shot { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--card-2); }
.shot img { width: 100%; }
.phone { max-width: 270px; margin-inline: auto; border-radius: 30px; border: 8px solid #1B1D48; box-shadow: 0 24px 50px -28px rgba(20, 16, 60, .9); overflow: hidden; background: #1B1D48; }
.phone img { width: 100%; }
.phones { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.phones .phone { flex: 1 1 200px; max-width: 250px; margin: 0; }
figcaption { font-size: 14.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.45; }
.phone + figcaption { text-align: center; }
.ill { border-radius: var(--r-md); overflow: hidden; }
.ill img { width: 100%; aspect-ratio: 1100 / 614; object-fit: cover; }
.fox-deco { width: clamp(120px, 20vw, 190px); }

/* spis treści na stronie */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; }
.toc a { display: inline-block; background: var(--chip); color: var(--heading); text-decoration: none; font-weight: 800; font-size: 15px; padding: 8px 14px; border-radius: 999px; }
.toc a:hover { background: var(--sun); color: var(--night); }
.toc-card { margin-top: -22px; position: relative; z-index: 2; }

/* mechanizmy */
.mech { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; scroll-margin-top: 90px; }
.mech + .mech { margin-top: clamp(18px, 3vw, 28px); }
.mech-body { min-width: 0; }
.mech-num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 12px; background: var(--sun); color: var(--night); font: 800 19px var(--display); }
.mech h2 { font-size: clamp(23px, 3vw, 30px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.part { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.part > h3 { font-size: 16px; font-family: var(--body); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin-bottom: 6px; }
.part p:last-child, .part ul:last-child { margin-bottom: 0; }
.refs { font-size: 15px; color: var(--ink-soft); margin: 0; padding: 0; list-style: none; }
.refs li { display: inline; margin: 0; }
.refs li:not(:last-child)::after { content: " · "; }
/* WCAG 2.5.8: każde źródło to cel co najmniej 24 px wysokości (audyt axe 30.10.2026) */
.refs a { display: inline-block; padding-block: 2px; }
.mech-fig { min-width: 0; }
.mech-fig .phone { max-width: 230px; }
@media (max-width: 820px) { .mech { grid-template-columns: 1fr; } }

/* ramka uczciwości / uwagi */
.note { background: var(--note-bg); border-left: 6px solid var(--note-line); border-radius: var(--r-sm); padding: 16px 20px; }
.note h2, .note h3 { font-size: 21px; margin-bottom: .3em; }
.note p:last-child { margin-bottom: 0; }

/* poradniki */
.guide { scroll-margin-top: 90px; }
.guide + .guide { margin-top: clamp(18px, 3vw, 26px); }
.guide h2 { font-size: clamp(24px, 3.2vw, 32px); }
.guide ol.steps { counter-reset: s; list-style: none; padding: 0; }
.guide ol.steps > li { counter-increment: s; position: relative; padding-left: 46px; margin: 12px 0; }
.guide ol.steps > li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 10px; background: var(--chip); color: var(--heading); font: 800 17px/32px var(--display); text-align: center; }
.tip { background: var(--card-2); border-radius: var(--r-sm); padding: 12px 16px; margin: 14px 0 0; }
.tip b:first-child { color: var(--heading); }
.guide-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.guide-cols .phone { width: 220px; }
@media (max-width: 760px) { .guide-cols { grid-template-columns: 1fr; } .guide-cols .phone { width: auto; max-width: 240px; } }

/* źródła */
.src-group { scroll-margin-top: 90px; }
.src-group + .src-group { margin-top: 28px; }
.src-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.src-list > li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; margin: 0; scroll-margin-top: 90px; overflow-wrap: anywhere; }
.src-list > li:target { outline: 3px solid var(--sun); }
.src-cite { font-size: 15.5px; }
.src-cite a { word-break: break-all; }
.src-take { margin: 6px 0 0; font-size: 16px; }
.src-take b { color: var(--heading); }
.badge { display: inline-block; font-size: 12.5px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; margin-right: 6px; background: var(--chip); color: var(--heading); vertical-align: 1px; }
.badge.book { background: #FFE3C7; color: #6B3300; }
.badge.guide { background: #D9F5EA; color: #0B5A41; }
@media (prefers-color-scheme: dark) { .badge.book { background: #5A3514; color: #FFE3C7; } .badge.guide { background: #0E4A37; color: #D9F5EA; } }

/* pytania */
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 18px; margin: 0 0 10px; }
.faq summary { cursor: pointer; font-weight: 900; font-size: 18px; padding: 15px 28px 15px 0; list-style: none; position: relative; color: var(--heading); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 11px; font: 800 26px/1 var(--display); color: var(--ink-soft); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 14px; }

/* filmy */
.films { display: grid; gap: clamp(18px, 3vw, 28px); }
.film { min-width: 0; }
.film-player { border-radius: var(--r-md); overflow: hidden; background: #0F1136; box-shadow: var(--shadow-card); }
.film-player video, .film-player iframe { width: 100%; aspect-ratio: 16 / 9; display: block; border: 0; background: #0F1136; }
.film-player.portrait { max-width: 320px; margin-inline: auto; }
.film-player.portrait video, .film-player.portrait iframe { aspect-ratio: 9 / 16; }
.film h3 { margin-top: 14px; }
.film details { margin-top: 12px; }
.film details summary { cursor: pointer; font-weight: 900; color: var(--link); }
.film details[open] summary { margin-bottom: 12px; }
.yt-facade { position: relative; display: block; width: 100%; border: 0; padding: 0; cursor: pointer; background: #0F1136; color: #fff; }
.yt-facade img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .85; }
.portrait .yt-facade img { aspect-ratio: 9 / 16; }
.yt-facade span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--sun); color: var(--night); font: 900 17px var(--body); padding: 12px 20px; border-radius: 999px; box-shadow: 0 6px 0 var(--sun-deep); white-space: nowrap; }
.yt-facade small { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: 13px; text-align: center; color: #fff; text-shadow: 0 1px 2px #000; }

/* stopka */
.site-foot { background: var(--night); color: #D9DAF7; margin-top: clamp(40px, 6vw, 72px); padding: 36px 0 44px; font-size: 15.5px; }
.site-foot a { color: #FFE08A; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px; }
.foot-grid h2 { color: #fff; font-size: 19px; margin-bottom: 8px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin: 4px 0; }
.foot-note { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 24px; padding-top: 16px; color: #BFC1EC; font-size: 14px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }

/* strona wyboru języka */
.chooser { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: linear-gradient(180deg, #1E2156 0%, #3B3486 45%, #6B4B8E 80%, #8E5A86 100%); color: #fff; text-align: center; }
.chooser h1 { color: #fff; }
.chooser img.logo { width: 96px; height: 96px; border-radius: 26px; margin: 0 auto 14px; }
.chooser .hero-cta { justify-content: center; }

/* drobne pomocnicze (CSP nie pozwala na atrybut style) */
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 18px; }
.card.split .fox-deco { justify-self: center; }
.page-head a { color: var(--link); }
.page-head a:hover { color: var(--link-hover); }
.hero a:not(.btn) { color: #FFE08A; }
.hero a:not(.btn):hover { color: #fff; }
.transcript { margin: 10px 0 0; padding-left: 1.4em; font-size: 16px; color: var(--ink-soft); }
.transcript li { margin: 4px 0; }
.grid > .card > h2, .grid > .note > h2 { font-size: clamp(22px, 2.6vw, 28px); }

/* Pakiety: próba bez karty, potem świadoma decyzja rodzica. */
.play-badge { display: inline-flex; flex: 0 0 auto; width: 220px; max-width: 100%; margin: 0; }
.play-badge img { width: 100%; height: auto; }
.trial-summary { color: #FFE7B0; font-weight: 800; }
.trial-band { display: flex; gap: 24px; align-items: center; justify-content: space-between; background: var(--note-bg); border-left: 5px solid var(--note-line); border-radius: var(--r-md); padding: clamp(22px, 4vw, 40px); }
.trial-band > div { max-width: 44em; }
.trial-band h2 { margin-bottom: .4em; }
.trial-band p { margin-bottom: 0; }
.trial-band > a { flex-shrink: 0; }
.package-price { font-family: var(--display); font-size: clamp(26px, 3vw, 35px); font-weight: 800; line-height: 1.3; color: var(--heading); }
.package-price small { font-family: var(--body); font-size: 16px; font-weight: 600; }
.package ul { padding-left: 1.2em; }
.package-grid { align-items: stretch; }
@media (max-width: 820px) { .trial-band { align-items: flex-start; flex-direction: column; } }

.chooser .muted, .chooser .muted a { color: #F4F0FF; font-size: 14px; }

/* Sales page: one real demonstration, space for the parent's decision. */
.demo-portrait { display: none; }
.benefit-intro h2 { max-width: 24ch; }
.benefit-intro p { max-width: 58ch; font-size: 20px; color: var(--ink-soft); }
.story-body { max-width: 760px; padding: clamp(24px, 5vw, 48px); border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left: 6px solid var(--sun); background: var(--card-2); }
.story-body h2 { max-width: 24ch; }
.story-body p { max-width: 62ch; }
.billing-label { margin-bottom: .35em; font-weight: 800; color: var(--ink-soft); }
.price-comparison { font-size: 15px; color: var(--ink-soft); margin-bottom: .35em; }
.price-saving { font-weight: 900; color: var(--heading); }
.monthly-option { border-top: 1px solid var(--line); padding-top: 12px; font-size: 16px; }
.package-price { margin-bottom: .4em; }
.package-grid .package:last-child { border: 2px solid var(--note-line); }
@media (max-width: 640px) {
  .demo-landscape { display: none; }
  .demo-portrait { display: block; }
  .hero-cta { column-gap: 20px; row-gap: 16px; }
  .hero-cta .btn { min-height: 48px; }
  .story-body { padding: 24px 20px; }
}

/* Pierwszy start: rzeczywisty pionowy ekran, bez kadrowania napisów. */
.parent-setup { background: var(--card-2); }
.parent-setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: clamp(24px, 5vw, 64px); align-items: center; }
.parent-setup-grid > * { min-width: 0; }
.parent-film { margin: 0; text-align: center; }
.parent-film video { width: min(100%, 320px); height: auto; max-width: 100%; object-fit: contain; margin-inline: auto; border-radius: var(--r-sm); background: var(--night); box-shadow: var(--shadow-card); }
.parent-film figcaption { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.parent-film-downloads { margin: 12px 0 0; font-size: 14px; }
.parent-film-meta { color: var(--heading); }
@media (max-width: 760px) {
  .parent-setup-grid { grid-template-columns: minmax(0, 1fr); }
  .parent-film video { width: min(100%, 320px); height: auto; }
  .parent-film figcaption, .parent-film-downloads { max-width: 36ch; margin-inline: auto; }
}

/* Parent articles and app instructions have separate reading paths. */
.section-switch { margin: 0 0 28px; max-width: 65ch; color: var(--ink-soft); }
.instructions-toc { margin-top: 0; }
.wrap > .section-switch { margin-top: 28px; }
.blog-intro-heading { margin-bottom: 24px; }
.blog-section { padding-top: 36px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.blog-card { min-width: 0; display: flex; flex-direction: column; }
.blog-card h2 { font-size: clamp(24px, 3vw, 30px); }
.blog-card h2 a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.blog-card p { max-width: 60ch; }
.article-date { font-size: 15px; color: var(--ink-soft); }
.page-head .article-date { color: inherit; }
@media (max-width: 760px) { .blog-grid { grid-template-columns: minmax(0, 1fr); } }

/* Parenting editorial: the existing fox, night blue, dawn peach and sun yellow.
   Small illustrations make topics easy to scan; quieter type leaves room to read. */
.page-head { padding: clamp(30px, 4vw, 48px) 0 28px; border-bottom: 1px solid var(--line); }
.page-head .crumbs { font-size: 14px; margin-bottom: 16px; color: var(--ink-soft); }
.page-head h1 { font-size: clamp(32px, 4.1vw, 48px); max-width: 24ch; text-wrap: balance; }
.page-head p:not(.crumbs):not(.article-date) { max-width: 68ch; font-size: 18px; line-height: 1.65; margin-bottom: 0; }
.page-head + .section { padding-top: 32px; }
.guide h2 { font-family: var(--body); font-weight: 900; font-size: clamp(22px, 2.5vw, 28px); line-height: 1.28; margin-top: 1.45em; }
.guide h2:first-child { margin-top: 0; }
.page-article .page-head .wrap, .page-article .section .wrap { max-width: 860px; }
.page-article .guide { box-shadow: none; padding: clamp(22px, 4vw, 40px); }
.page-article .guide p, .page-article .guide li { line-height: 1.8; max-width: 68ch; }
.page-article .page-head .article-date { margin: 8px 0; font-size: 14px; }
.page-article .page-head h1 { max-width: 28ch; }
.page-science .card, .page-how .card, .page-guides .guide, .page-videos .card { box-shadow: 0 6px 20px -18px var(--night); }
.blog-head { background: var(--note-bg); border-bottom: 0; padding: 34px 0; }
.blog-head-inner { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 32px; align-items: center; }
.blog-head h1 { font-size: clamp(35px, 4.6vw, 52px); margin-bottom: 12px; }
.blog-head p:not(.crumbs) { max-width: 55ch; }
.blog-browse { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 900; }
.blog-fox { width: 210px; height: 210px; object-fit: contain; align-self: center; }
.blog-section { padding: 36px 0 56px; }
.blog-section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.blog-intro-heading { font-family: var(--body); font-size: clamp(23px, 2.7vw, 30px); line-height: 1.25; margin: 0 0 8px; }
.blog-section-head p { font-size: 15px; color: var(--ink-soft); margin: 0; max-width: 60ch; }
.instruction-link { font-size: 14px; flex: none; padding-bottom: 3px; }
.blog-grid { gap: 22px; }
.blog-card { padding: 22px; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: start; border-radius: 20px; box-shadow: none; }
.blog-visual { background: var(--chip); border-radius: 28px 28px 20px 28px; display: grid; place-items: center; width: 96px; height: 112px; }
.blog-card:nth-child(4n+2) .blog-visual { background: var(--note-bg); }
.blog-card:nth-child(4n+3) .blog-visual { background: var(--card-2); }
.blog-visual img { width: 76px; height: 88px; object-fit: contain; }
.blog-card-copy { min-width: 0; display: flex; flex-direction: column; height: 100%; }
.blog-topic { font-size: 13px; font-weight: 900; color: var(--ink-soft); margin: 0 0 8px; }
.blog-card h2 { font-family: var(--body); font-size: clamp(19px, 1.8vw, 22px); font-weight: 900; line-height: 1.3; margin-bottom: 12px; }
.blog-card h2 a { text-decoration: none; color: var(--heading); }
.blog-card h2 a:hover { text-decoration: underline; }
.blog-card-copy > p:not(.blog-topic) { font-size: 15px; line-height: 1.65; margin-bottom: 18px; }
.blog-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: auto; }
.read-guide { font-size: 14px; font-weight: 900; }
.blog-card .article-date { font-size: 12px; margin: 0; }
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: minmax(0, 1fr); }
  .blog-card { grid-template-columns: 100px minmax(0, 1fr); }
  .blog-section-head { align-items: start; flex-direction: column; gap: 12px; }
}
@media (max-width: 560px) {
  .blog-head { padding: 24px 0; }
  .blog-head-inner { display: block; position: relative; }
  .blog-head .crumbs { margin-bottom: 10px; }
  .blog-head h1 { font-size: 34px; padding-right: 80px; }
  .blog-head p:not(.crumbs) { font-size: 16px; }
  .blog-fox { width: 76px; height: 98px; position: absolute; right: var(--gutter); top: 26px; }
  .blog-card { grid-template-columns: 64px minmax(0, 1fr); padding: 18px 16px; gap: 14px; }
  .blog-visual { width: 64px; height: 82px; border-radius: 20px; }
  .blog-visual img { width: 50px; height: 64px; }
  .blog-card h2 { font-size: 19px; }
  .blog-card-foot { flex-direction: column; align-items: start; gap: 10px; }
}
@media (max-width: 420px) {
  .brand { gap: 8px; }
  .brand b { font-size: 18px; }
  .brand img { width: 32px; height: 32px; }
  .head-tools .btn-sun { padding-inline: 10px; }
}