/* ==========================================================================
   Claymorphism theme — Polish landing page only
   --------------------------------------------------------------------------
   Loaded ONLY by the page that declares `bodyClass: "clay"` + this file in
   _src/data/pages.json (currently: PL home, index.html).

   EVERY rule is scoped under `body.clay` so the other 38 generated pages —
   including /de/, /en/ and the whole blog — keep the existing navy theme.
   Do not remove that prefix; styles.css is shared site-wide and loads first.

   When DE/EN are redesigned, add `clay` to their pages.json entries rather
   than copying this file.
   ========================================================================== */

/* ==========================================================================
   THEME — every repeatable value in the clay system is declared here, once.
   --------------------------------------------------------------------------
   Nothing below this block may hardcode a spacing, size, radius, border,
   shadow-offset, duration or z-index. If a raw px survives elsewhere in this
   file it is either a physical constant (hairline, pill radius) or it carries
   a comment saying why — anything else is a bug.

   Scoped to `body.clay` rather than `:root` ONLY because styles.css still
   loads first and owns --ink / --teal / --white on :root for the navy theme.
   Hoisting these to :root today would repaint the other 38 pages. When
   styles.css retires, this one selector becomes `:root` and nothing else
   changes.

   Breakpoints stay literal — there is no CSS build step (_src/build.js only
   assembles HTML), so @custom-media is not available:
     980px  layout collapse      720px  presenter shrink
     900px  price mascot drop    620px  single column / mobile dock
     520px  presenter stacks

   Raw px is allowed below ONLY in these cases, each commented at its use:
     · artwork boxes sized against an image (blobs, mascot stage, planet rail)
     · geometry where two values track each other (speech-bubble tails)
     · sub-pixel/hairline values (1px rules, blur radii, optical -1px nudges)
     · flex-basis wrap thresholds and minmax() column floors
   Anything else that still reads NNpx is a miss, not a decision.
   ========================================================================== */
body.clay {
  /* ── Palette ─────────────────────────────────────────────────────────── */
  --peach:#FFF6EC; --white:#FFFFFF; --ink:#06204A; --slate:#4A5A6B;
  --ember:#E26009; --ember-dark:#C94E06; --ember-lip:#9C3D03; --ember-pop:#e82309;
  --teal:#0A6C7E; --teal-pop:#6FCBDD; --teal-lip:#0A5C6E; --teal-lip-deep:#0A4F5C;
  --star:#F0A818; --star-lip:#C88400; --star-pop:#FFB818;
  --mint:#A8D860; --mint-lip:#7DAA3C; --mint-pop:#8EDA40;
  --blush:#FFC9A8; --blush-lip:#E0A07A;
  --lilac:#7FB2E8; --lilac-lip:#3F7DBE;
  --deep:#051B3F; --deep-2:#123A6B; --deep-3:#08264F; --mist:#C3D2E0;
  --edge:#06204A; --sand:#EBDBC4;
  /* Dark-surface UI chrome (device mock, dashboard rows, option buttons). */
  --line-dark:#123A6B; --line-dark-2:#1E4E86; --line-dark-3:#2E6FA8;
  --ok-bg:#1F5A3C; --bad-bg:#5A2320; --bad-fg:#E4806B;
  --placeholder:#9A8C7C; --danger:#A32D2D;
  --done-bg:#E9F3EC; --done-edge:#2E6B45; --done-fg:#1E4A2F;
  --footer-fg:#C9D3DE; --footer-rule:#2A3646; --strip-fg:#DCE6F0;

  /* ── Typeface ────────────────────────────────────────────────────────── */
  /* Emoji fonts trail both stacks so emoji in copy don't render as a blank
     box on browsers that won't fall through a webfont on their own. */
  --dis:"Baloo 2",system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bod:"Nunito",system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

  /* ── Spacing — 4px grid ──────────────────────────────────────────────── */
  --sp-px:  0.125rem;  /*  2px — optical nudges only, deliberately off-grid */
  --sp-1:   0.25rem;   /*  4px */
  --sp-2:   0.5rem;    /*  8px */
  --sp-3:   0.75rem;   /* 12px */
  --sp-4:   1rem;      /* 16px */
  --sp-5:   1.25rem;   /* 20px */
  --sp-6:   1.5rem;    /* 24px */
  --sp-7:   2rem;      /* 32px */
  --sp-8:   2.5rem;    /* 40px */
  --sp-9:   3rem;      /* 48px */
  --sp-10:  4rem;      /* 64px */
  --sp-11:  5.5rem;    /* 88px */

  /* ── Semantic spacing — prefer these over the raw steps ──────────────── */
  --gutter:      var(--sp-6);   /* .shell / .wrap / .content padding-inline */
  --gap-card:    var(--sp-4);   /* between cards in a list                  */
  --gap-grid:    var(--sp-6);   /* between cards in a grid                  */
  --gap-col:     var(--sp-9);   /* two-column splits                        */
  --pad-card-sm: var(--sp-6);
  --pad-card:    var(--sp-7);
  --pad-slab:    var(--sp-9);   /* .band, .cta-inner                        */
  /* One fluid value replaces the 86px/60px pair and its two media rules. */
  --section-y:   clamp(3.75rem, 8vw, 5.5rem);   /* 60 → 88px */

  /* ── Type — role-named. Values are preserved, not snapped: the contrast
        notes further down this file tie .btn-1 (19px) to the WCAG large-text
        3:1 allowance and .btn-md/.btn-sm (18/16px) to the full 4.5:1. ───── */
  --fs-2xs:  0.75rem;    /* 12px  badges, pills            */
  --fs-xs:   0.8125rem;  /* 13px                           */
  --fs-sm:   0.875rem;   /* 14px                           */
  --fs-md:   0.9375rem;  /* 15px  workhorse                */
  --fs-base: 1rem;       /* 16px  needs 4.5:1              */
  --fs-lg:   1.0625rem;  /* 17px  body copy                */
  --fs-xl:   1.125rem;   /* 18px  needs 4.5:1              */
  --fs-2xl:  1.1875rem;  /* 19px  large-text 3:1 allowance */
  --fs-3xl:  1.3125rem;  /* 21px                           */
  --fs-4xl:  1.375rem;   /* 22px                           */
  --fs-5xl:  1.5rem;     /* 24px                           */
  --fs-6xl:  1.625rem;   /* 26px                           */
  --fs-7xl:  1.75rem;    /* 28px                           */
  --fs-body: var(--fs-lg);

  /* Fluid headings — consolidates the ad-hoc clamps scattered below. */
  --fs-h1:       clamp(2rem, 5.6vw, 3.6rem);      /* 40 → 68 */
  --fs-h2:       clamp(1.875rem, 4.2vw, 3.125rem);   /* 30 → 50 */
  --fs-h3:       clamp(1.75rem, 3.6vw, 2.625rem);    /* 28 → 42 */
  --fs-h4:       clamp(1.5rem, 3vw, 2.125rem);       /* 24 → 34 */
  --fs-h5:       clamp(1.375rem, 2.6vw, 1.875rem);   /* 22 → 30 */
  --fs-hero-sub: clamp(1.3125rem, 2.5vw, 1.8125rem); /* 21 → 29 */
  --fs-stat:     clamp(1.875rem, 4vw, 2.75rem);      /* 30 → 44 */
  --fs-amount:   3.25rem;                            /* 52px price */

  --lh-none:    1;
  --lh-display: 1.08;
  --lh-heading: 1.2;
  --lh-title:   1.25;
  --lh-snug:    1.35;
  --lh-tall:    1.5;
  --lh-body:    1.55;
  --lh-lead:    1.6;
  --lh-page:    1.65;
  --lh-prose:   1.75;

  --fw-prose: 500;
  --fw-body:  600;
  --fw-bold:  700;
  --fw-black: 800;
  --tracking-eyebrow: .06em;
  --tracking-display: -.015em;
  --tracking-stars:   2px;   /* optical letter-spacing on ★★★★★ runs */
  --underline-offset: .15em;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius-xs:     0.5rem;    /*  8px */
  --radius-sm:     0.75rem;   /* 12px */
  --radius-md:     1rem;      /* 16px */
  --radius-lg:     1.25rem;   /* 20px */
  --radius-xl:     1.625rem;  /* 26px */
  --radius-2xl:    2rem;      /* 32px */
  --radius-pill:   999px;
  --radius-circle: 50%;

  --bd-thin:  2px;
  --bd:       3px;
  --bd-thick: 4px;
  --border:       var(--bd) solid var(--edge);
  --border-thin:  var(--bd-thin) solid var(--edge);
  --border-thick: var(--bd-thick) solid var(--edge);

  /* ── Clay lip — the signature shadow. The offset is tokenised; the colour
        stays per-component:  box-shadow: 0 var(--lip-sm) 0 var(--sand)  ──── */
  --lip-press: 2px;
  --lip-xs:    3px;
  --lip-sm:    4px;
  --lip-md:    5px;
  --lip-lg:    6px;
  --lip-xl:    8px;
  --lip-2xl:   10px;
  --clay:      0 var(--lip-lg) 0 var(--sand), 0 14px 26px rgba(120,80,40,.14);
  --clay-sand: 0 var(--lip-sm) 0 var(--sand);
  --clay-slab: 0 var(--lip-2xl) 0 var(--deep-2);

  /* ── Controls. --tap is the WCAG 2.5.8 target-size floor: never round it
        down, and never use it for anything that is not a hit area. ──────── */
  --tap:        44px;
  --control-sm: 48px;
  --control:    56px;
  --control-lg: 60px;
  --control-xl: 64px;
  --nav-h:      80px;   /* sticky header height — anchors scroll-margin-top */

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease:     cubic-bezier(.34,1.4,.64,1);
  /* Gentler overshoot for the hero word swap — the full --ease bounce reads as
     a glitch on running text. */
  --ease-swap: cubic-bezier(.34,1.15,.64,1);
  --dur-fast: .15s;
  --dur:      .3s;
  --dur-slow: .45s;
  --dur-swap: .55s;   /* word travel runs slower than its width change */
  --press:    transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);

  /* ── Layout & measure ────────────────────────────────────────────────── */
  --shell:         1180px;
  --measure-prose: 38rem;   /* blog article body   */
  --measure-guide: 44rem;   /* przewodnik          */
  --measure-legal: 52rem;   /* polityka, regulamin */
  --measure-form:  40rem;   /* 640px               */
  --measure-faq:   52.5rem; /* 840px               */
  --measure-plan:  35rem;   /* 560px               */
  --measure-sub:   22ch;
  --measure-note:  32ch;
  --measure-lead:  46ch;
  --measure-wide:  52ch;
  --measure-head:  56ch;
  --measure-ans:   64ch;

  /* ── Depth ───────────────────────────────────────────────────────────── */
  --z-raised: 1;
  --z-nav:    90;
  --z-dock:   95;
  --z-skip:   200;

  margin:0;
  background:var(--peach);
  color:var(--ink);
  font-family:var(--bod);
  font-size:var(--fs-body);
  line-height:var(--lh-page);
  overflow-x:hidden;
}

body.clay *{box-sizing:border-box}
body.clay h1,body.clay h2,body.clay h3,body.clay h4{
  font-family:var(--dis);font-weight:var(--fw-black);line-height:var(--lh-display);
  letter-spacing:var(--tracking-display);margin:0}
body.clay p{margin:0}
body.clay a{color:var(--teal)}
body.clay img,body.clay svg{max-width:100%}
body.clay :focus-visible{
  outline:var(--bd-thick) solid var(--ink);outline-offset:var(--bd);border-radius:var(--radius-xs)}
/* styles.css kills the outline on the featured nav link and swaps in a navy-theme
   yellow glow that is invisible on peach. Restore a real ring — these selectors
   match its specificity and win on source order. */
body.clay .nav-menu-primary a.nav-primary-featured:focus-visible,
body.clay .nav-mobile-links a.nav-primary-featured:focus-visible{
  outline:var(--bd-thick) solid var(--ink);outline-offset:var(--bd)}
/* Dark surfaces (footer, stat strip, parent band) need a light ring — a navy
   outline on navy is no indicator at all.
   `.dev` is deliberately NOT in this list any more: its screen is peach since
   the mock was reskinned to match the rebuilt Academy, and a yellow ring on
   peach is barely visible. It uses the default ink ring above. */
body.clay .footer :focus-visible,
body.clay .footer-link-btn:focus-visible,
body.clay .strip :focus-visible,
body.clay .band :focus-visible{
  outline:var(--bd-thick) solid var(--star);outline-offset:var(--bd)}
/* Clears the 80px sticky nav plus a little air. */
body.clay [id]{scroll-margin-top:calc(var(--nav-h) + var(--sp-7))}
body.clay .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Skip link — shared markup (.skip-link), clay paint */
body.clay .skip-link{
  /* -120px simply parks the link offscreen until it takes focus. */
  position:absolute;left:var(--sp-4);top:-120px;z-index:var(--z-skip);background:var(--ink);color:#fff;
  padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-md);text-decoration:none;
  font-weight:var(--fw-black);font-family:var(--dis);transition:top var(--dur-fast)}
body.clay .skip-link:focus{top:var(--sp-4)}

body.clay .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
body.clay .shell-flush{padding-inline:0}

body.clay .eye{
  display:inline-block;font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink);background:var(--star);
  border:var(--border);border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-4);
  box-shadow:0 var(--lip-sm) 0 var(--star-lip);margin-bottom:var(--sp-5)}
body.clay .eye-t{background:var(--teal-pop);box-shadow:0 var(--lip-sm) 0 var(--teal-lip)}
body.clay .eye-m{background:var(--mint);box-shadow:0 var(--lip-sm) 0 var(--mint-lip)}

/* --- clay controls ------------------------------------------------------ */
body.clay .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);
  min-height:var(--control-lg);padding:0 var(--sp-7);
  font-family:var(--dis);font-size:var(--fs-2xl);font-weight:var(--fw-black);
  border:var(--border);border-radius:var(--radius-lg);
  text-decoration:none;cursor:pointer;letter-spacing:0;text-transform:none;
  transition:var(--press)}
body.clay .btn-1{background:var(--ember);color:#fff;box-shadow:0 var(--lip-lg) 0 var(--ember-lip)}
body.clay .btn-2{background:var(--white);color:var(--ink);box-shadow:0 var(--lip-lg) 0 var(--sand)}
body.clay .btn-3{background:var(--star);color:var(--ink);box-shadow:0 var(--lip-lg) 0 var(--star-lip)}
body.clay .btn-full{width:100%}
/* Hover sinks the button by 2px and trims the lip to match; :active bottoms it
   out — the lip must reach 0 or the press reads as a float. */
body.clay .btn:hover{transform:translateY(var(--lip-press))}
body.clay .btn-1:hover{box-shadow:0 var(--lip-sm) 0 var(--ember-lip)}
body.clay .btn-2:hover{box-shadow:0 var(--lip-sm) 0 var(--sand)}
body.clay .btn-3:hover{box-shadow:0 var(--lip-sm) 0 var(--star-lip)}
body.clay .btn:active{transform:translateY(var(--lip-lg))}
body.clay .btn-1:active{box-shadow:0 0 0 var(--ember-lip)}
body.clay .btn-2:active{box-shadow:0 0 0 var(--sand)}
body.clay .btn-3:active{box-shadow:0 0 0 var(--star-lip)}

/* --- shared header markup, clay paint ----------------------------------- */
body.clay .nav{
  position:sticky;inset:auto;top:0;z-index:var(--z-nav);
  background:rgba(255,246,236,.93);backdrop-filter:blur(10px) saturate(150%);
  border-bottom:var(--border);box-shadow:none;
  padding:0 var(--gutter);min-height:var(--nav-h);gap:var(--sp-5);
  max-width:none;margin:0;width: 100%;}
body.clay .nav.scrolled,body.clay .nav.is-open{
  background:rgba(255,246,236,.97);box-shadow:0 var(--lip-sm) 0 rgba(6,32,74,.06)}
body.clay .nav-logo img{height:var(--tap);width:auto}
body.clay .nav-menu-primary a,body.clay .nav-link-text{
  display:flex;align-items:center;justify-content:center;min-height:var(--tap);min-width:var(--tap);
  padding:0 var(--sp-4);border-radius:var(--radius-sm);font-weight:var(--fw-bold);
  font-size:var(--fs-base);font-family:var(--bod);color:var(--ink);text-decoration:none;
  transition:background var(--dur-fast)}
body.clay .nav-menu-primary a:hover,body.clay .nav-link-text:hover{background:var(--blush);color:var(--ink)}
body.clay .nav-menu-primary a[aria-current="page"]{
  background:var(--star);box-shadow:0 var(--lip-xs) 0 var(--star-lip)}
body.clay .nav .btn,body.clay .nav-cta{
  min-height:var(--control-sm);font-size:var(--fs-base);padding:0 var(--sp-5);border-radius:var(--radius-md)}
/* Nav CTA is 16px bold, so it needs the full 4.5:1 ratio rather than the 3:1
   large-text allowance the 19px in-page .btn-1 gets. --ember (#E26009) is only
   3.55:1 on white; --ember-dark (#C94E06) is 4.59:1. */
body.clay .nav .btn-orange,body.clay .nav-cta{
  background:var(--ember-dark);color:#fff;border:var(--border);
  box-shadow:0 var(--lip-md) 0 var(--ember-lip)}
body.clay .lang-btn{
  display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);
  border-radius:var(--radius-sm);font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  color:var(--ink);text-decoration:none}
body.clay .lang-btn--active{
  background:var(--star);border:var(--border);box-shadow:0 var(--lip-xs) 0 var(--star-lip)}
body.clay .lang-sep{color:var(--sand)}
body.clay .nav-toggle{
  min-width:var(--control-sm);min-height:var(--control-sm);border:var(--border);
  border-radius:var(--radius-md);background:var(--white);box-shadow:var(--clay-sand)}
body.clay .nav-toggle span{background:var(--ink)}
body.clay .nav-menu{background:var(--peach);border-bottom:var(--border)}

/* --- hero --------------------------------------------------------------- */
body.clay .hero{
  position:relative;padding:var(--sp-5) 0 var(--sp-11);overflow:hidden;background:none;min-height:0}
body.clay .blob{
  position:absolute;border-radius:var(--radius-circle);border:var(--border);z-index:0;pointer-events:none}
/* Decorative blobs — sizes and offsets are compositional, not on the spacing
   grid: they are tuned against the mascot artwork, not against layout rhythm. */
body.clay .b1{
  width:180px;height:180px;background:var(--teal-pop);top:40px;right:-60px;
  box-shadow:0 var(--lip-xl) 0 var(--teal-lip)}
body.clay .b2{
  width:96px;height:96px;background:var(--star);bottom:110px;left:-38px;
  box-shadow:0 var(--lip-lg) 0 var(--star-lip)}
body.clay .b3{
  width:60px;height:60px;background:var(--lilac);top:170px;left:47%;
  box-shadow:0 var(--lip-md) 0 var(--lilac-lip)}
body.clay .hero-grid{
  position:relative;z-index:var(--z-raised);display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--gap-col);align-items:start}
body.clay .hero-col2{display:flex;flex-direction:column;min-width:0}
body.clay .hero h1{font-size:var(--fs-h1);margin-bottom:var(--sp-5);color:var(--ink)}
/* The role noun in the H1 cycles (dzieci → nastolatków → …), so the highlight
   moved from a background gradient to a pseudo-element bar — only that way can
   its colour change per audience without repainting the text. */
/* Always break after "Sztuczna inteligencja" so "dla …." sits on its own
   line on every viewport. width:fit-content keeps the underline bar
   content-sized (plain display:block would stretch it full-column). */
body.clay .hero h1 mark{
  position:relative;display:block;width:fit-content;isolation:isolate;color:inherit;
  padding:0 var(--sp-px);background:none;
  --swap-color:var(--star)}
/* Bar geometry is em-relative so it tracks the fluid H1 instead of the spacing
   grid. The 3px cap is optical against a .32em bar — not a shape-scale radius. */
body.clay .hero h1 mark::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:.32em;
  background:var(--swap-color);border-radius:3px;z-index:-1;
  transition:background-color var(--dur-slow) ease}
/* Role tones — playful kids → cool teens → warm parents → calm teachers → inclusive all */
body.clay .hero h1 mark[data-tone="swap-1"]{--swap-color:var(--star)}
body.clay .hero h1 mark[data-tone="swap-2"]{--swap-color:var(--teal-pop)}
body.clay .hero h1 mark[data-tone="swap-3"]{--swap-color:var(--ember)}
body.clay .hero h1 mark[data-tone="swap-4"]{--swap-color:var(--lilac)}
body.clay .hero h1 mark[data-tone="swap-5"]{--swap-color:var(--mint)}

/* Vertical word swap — only the role noun flips; "dla" stays put. The viewport
   is exactly one line box tall, so it follows --lh-display rather than carrying
   its own magic number. */
body.clay .hero-swap{
  display:inline-grid;vertical-align:baseline;justify-items:start;position:relative;
  overflow:hidden;transition:width var(--dur-slow) var(--ease-swap)}
body.clay .hero-swap__sizer{
  grid-area:1/1;visibility:hidden;pointer-events:none;white-space:nowrap}
body.clay .hero-swap__viewport{
  grid-area:1/1;display:block;overflow:hidden;height:calc(1em * var(--lh-display))}
body.clay .hero-swap__track{
  display:flex;flex-direction:column;will-change:transform;
  transition:transform var(--dur-swap) var(--ease-swap)}
body.clay .hero-swap__word{
  display:block;height:calc(1em * var(--lh-display));line-height:var(--lh-display);
  white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  body.clay .hero-swap__track{transition:none}
}
body.clay .hero-sub{
  font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-hero-sub);color:var(--teal);
  line-height:var(--lh-heading);margin:calc(var(--sp-2) * -1) 0 var(--sp-5);}
body.clay .lead{
  font-size:var(--fs-2xl);color:var(--slate);font-weight:var(--fw-body);
  max-width:var(--measure-lead);margin-bottom:var(--sp-3)}
body.clay .lead-2{font-weight:var(--fw-bold); line-height: var(--lh-body); color:var(--edge);margin-bottom:var(--sp-6)}
body.clay .cta-row{display:flex;flex-wrap:wrap;gap:var(--gap-card);margin-bottom:var(--sp-4)}
/* Dla sekcji z wyśrodkowanym .sec-head — CTA pod siatką ma trzymać tę oś. */
body.clay .cta-row--center{justify-content:center;margin-top:var(--sp-8);margin-bottom:0}
/* Ikona wstawiona w biegnący tekst siada domyślnie na linii bazowej i wygląda
   przez to na podniesioną. Przyciski są flexem i centrują same — te dwa
   konteksty są zwykłym tekstem inline. */
body.clay .panel-eye svg,body.clay .form-privacy svg{vertical-align:middle}
body.clay .secondary{
  font-size:var(--fs-base);font-weight:var(--fw-body);color:var(--slate);
  margin-bottom:var(--sp-6);max-width:var(--measure-lead)}
body.clay .secondary a{font-weight:var(--fw-bold)}

/* trust bar — LP-02: six elements */
body.clay .trust{
  list-style:none;padding:0;margin:0 0 var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-2)}
body.clay .trust li{
  display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--white);border:var(--border);
  border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);
  font-weight:var(--fw-bold);box-shadow:var(--clay-sand)}
body.clay .trust li span{font-size:var(--fs-md);line-height:var(--lh-none)}

body.clay .rate{
  display:flex;align-items:center;gap:var(--sp-3);background:var(--white);border:var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-5);box-shadow:var(--clay);width:fit-content}
body.clay .rate .st{color:var(--ember);font-size:var(--fs-lg);letter-spacing:var(--tracking-stars)}
body.clay .rate b{font-family:var(--dis);font-size:var(--fs-lg);display:block}
body.clay .rate span{font-size:var(--fs-sm);color:var(--slate);font-weight:var(--fw-body)}
body.clay a.rate-link{
  border-color:var(--mint);text-decoration:none;color:inherit;transition:var(--press)}
body.clay a.rate-link:hover,body.clay a.rate-link:focus-visible{box-shadow:0 var(--lip-sm) 0 var(--mint-lip)}

/* --- Sibot presenter ---------------------------------------------------- */
body.clay .presenter{
  display:flex;align-items:flex-end;gap:0;margin-bottom:var(--sp-5);position:relative}
/* Stage dimensions track the mascot artwork's aspect, not the spacing grid. */
body.clay .pres-stage{
  position:relative;flex:none;width:230px;height:320px;margin-right:var(--sp-6);
  /* Shadow on the stage, not the <video> — filters on alpha WebM break compositing. */
  filter:drop-shadow(0 14px 18px rgba(6,32,74,.22))}
body.clay .pres-bot{
  position:absolute;left:50%;bottom:-6rem;transform:translateX(-50%);width:300px;height:auto;
  pointer-events:none;display:block;z-index:var(--z-raised)}
/* Selektor klasy wyżej ustawia display:block, co bije regułę [hidden] z
   arkusza przeglądarki — bez tego <video> z atrybutem hidden dalej się
   rysuje. Widać to na Safari/iOS, gdzie WebM się nie dekoduje albo działa
   „Ogranicz ruch": JS pokazuje statyczny obrazek i chowa wideo, a wideo
   zostaje na ekranie ze swoim posterem — tym samym plikiem. Efekt: dwa
   Siboty obok siebie. Reguła obejmuje oba elementy, bo obrazek też niesie
   klasę .pres-bot. */
body.clay .pres-bot[hidden]{display:none !important}
body.clay .pres-ground{
  position:absolute;left:50%;bottom:var(--sp-2);transform:translateX(-50%);width:200px;height:24px;
  border-radius:var(--radius-circle);background:rgba(6,32,74,.14);filter:blur(1px);z-index:0}
body.clay .pres-bubble{
  position:relative;flex:1;background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--clay);margin-bottom:var(--sp-9)}
/* Bubble tail — the two triangles are sized by border-width, so these are
   geometry, not spacing: ::after must sit 3px inside ::before to read as a
   1-step outline matching --bd. */
body.clay .pres-bubble::before{
  content:"";position:absolute;left:-26px;top:34px;width:0;height:0;
  border:12px solid transparent;border-right-color:var(--edge)}
body.clay .pres-bubble::after{
  content:"";position:absolute;left:-18px;top:36px;width:0;height:0;
  border:9px solid transparent;border-right-color:var(--white)}
body.clay .pres-bubble p{
  font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-lg);line-height:var(--lh-snug);
  margin:var(--sp-3) 0 var(--sp-3);color:var(--edge)}
body.clay .pres-note{
  font-weight:var(--fw-body);font-size:var(--fs-xs);color:var(--slate);
  margin:var(--sp-3) 0 0;font-family:var(--bod)}
body.clay .voice-btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--tap);padding:0 var(--sp-5);
  border-radius:var(--radius-pill);background:var(--teal-pop);border:var(--border);color:var(--edge);
  font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-md);cursor:pointer;
  box-shadow:0 var(--lip-sm) 0 var(--teal-lip);transition:transform var(--dur-fast) var(--ease)}
body.clay .voice-btn:hover{transform:translateY(1px);box-shadow:0 var(--lip-xs) 0 var(--teal-lip)}
body.clay .voice-btn:active{transform:translateY(var(--lip-sm));box-shadow:0 0 0 var(--teal-lip)}
body.clay .voice-btn[aria-pressed="true"]{
  background:var(--star);box-shadow:0 var(--lip-sm) 0 var(--star-lip)}
body.clay .voice-btn svg{flex:none}
body.clay .voice-btn.pulse svg{animation:clay-pulse 1s ease-in-out infinite}
@keyframes clay-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* Stage/mascot dimensions are artwork-driven, so they shrink on their own
   ramp rather than snapping to the spacing scale. */
@media (max-width:720px){
  body.clay .pres-stage{width:170px;height:250px;margin-right:var(--sp-4)}
  body.clay .pres-bot{width:160px;bottom:var(--sp-4)}
  body.clay .pres-ground{width:96px;height:20px}
  body.clay .pres-bubble{margin-bottom:var(--sp-7)}
}

@media (max-width:520px){
  body.clay .presenter{align-items:flex-start;}
  body.clay .pres-stage{width:100px;height:220px;margin-right:0;margin-bottom:var(--sp-2)}
  body.clay .pres-bot{width:140px;bottom:var(--sp-4)}
  body.clay .pres-ground{width:84px;height:18px}
  body.clay .pres-bubble{margin-bottom:0;flex:1 1 100%}
  body.clay .pres-bubble::before,body.clay .pres-bubble::after{display:none}
  body.clay .pres-bubble p{font-size:var(--fs-base)}
}

/* --- the child's device: a phone showing the real Academy -----------------
   The bezel stays dark so it still reads as a device, but the screen now wears
   the claymorphism the rebuilt Academy actually uses: peach ground, white cards
   with a heavy ink border, chunky controls. It used to be a navy screen, which
   advertised the theme this redesign replaces.

   Contrast note: the screen is a LIGHT surface now. Two rules elsewhere in this
   file grouped .dev with the dark slabs — a --star focus ring and a --star
   inline accent. Both are corrected at their definitions; do not re-add .dev
   to those lists. */
body.clay .dev{
  position:relative;background:var(--deep);border:var(--border-thick);border-radius:var(--radius-2xl);
  padding:var(--sp-4);box-shadow:var(--clay-slab), 0 26px 44px rgba(6,21,39,.3)}
body.clay .dev-top{
  display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-px) var(--sp-2) var(--sp-4)}
body.clay .dev-top i{
  width:10px;height:10px;border-radius:var(--radius-circle);background:var(--deep-2);display:block}
body.clay .dev-tag{
  margin-left:auto;font-family:var(--dis);font-size:var(--fs-lg);letter-spacing:.1em;font-weight:var(--fw-bold);color:var(--mist)}
/* Play / pause for the hero quiz narrator — sits in the device chrome so it
   is always one tap away when a child wants to hear the question again. */
body.clay .dev-voice{
  display:grid;place-items:center;width:var(--tap);height:var(--tap);
  margin-left:var(--sp-2);padding:0;border-radius:var(--radius-circle);
  background:var(--teal-pop);border:var(--border);color:var(--edge);cursor:pointer;
  box-shadow:0 var(--lip-xs) 0 var(--teal-lip);transition:var(--press)}
body.clay .dev-voice:hover{transform:translateY(1px);box-shadow:0 0 0 var(--teal-lip)}
body.clay .dev-voice:active{transform:translateY(2px)}
body.clay .dev-voice-ico{grid-area:1/1}
body.clay .dev-voice .dev-voice-ico--pause{display:none}
body.clay .dev-voice[data-state="playing"] .dev-voice-ico--play{display:none}
body.clay .dev-voice[data-state="playing"] .dev-voice-ico--pause{display:block}
body.clay .dev-voice[data-state="playing"]{background:var(--star);box-shadow:0 var(--lip-xs) 0 var(--star-lip)}

/* --- journey cue ---------------------------------------------------------
   Sibot's greeting ends by sending the visitor to the quiz, so when it stops
   script-clay.js sets data-cue="on" here: the tag flashes yellow and an arrow
   points at the play button. The flash is capped at six beats (nagging is
   worse than silence); the arrow and the yellow stay until the visitor
   presses something inside the device, which clears the cue. */
body.clay .dev-tag{transition:color var(--dur-fast) var(--ease)}
body.clay .dev-cue-arrow{
  display:none;color:var(--star);flex:none}
body.clay .dev-top[data-cue="on"] .dev-cue-arrow{
  display:inline-flex;animation:dev-cue-nudge 1.1s ease-in-out 6}
body.clay .dev-top[data-cue="on"] .dev-tag{
  color:var(--star);animation:dev-cue-flash 1.1s ease-in-out 6}
body.clay .dev-top[data-cue="on"] .dev-voice{
  animation:dev-cue-ring 1.6s ease-out 6}
@keyframes dev-cue-flash{
  0%,100%{color:var(--star)}
  50%{color:var(--mist)}}
@keyframes dev-cue-nudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(5px)}}
@keyframes dev-cue-ring{
  0%{box-shadow:0 var(--lip-xs) 0 var(--teal-lip),0 0 0 0 rgba(240,168,24,.75)}
  100%{box-shadow:0 var(--lip-xs) 0 var(--teal-lip),0 0 0 16px rgba(240,168,24,0)}}
/* Reduced motion keeps the wayfinding (yellow tag + arrow), drops the beat. */
@media (prefers-reduced-motion:reduce){
  body.clay .dev-top[data-cue="on"] .dev-tag,
  body.clay .dev-top[data-cue="on"] .dev-cue-arrow,
  body.clay .dev-top[data-cue="on"] .dev-voice{animation:none}
}
body.clay .scr{
  background:var(--peach);border-radius:var(--radius-xl);padding:var(--sp-5)}
body.clay .say{display:flex;gap:var(--sp-3);align-items:flex-start;margin-bottom:var(--sp-4)}
/* Sibot's line — the Academy shows it in a white clay card, same as here. */
body.clay .bub{
  width:100%;background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-4);font-family:var(--dis);font-weight:var(--fw-bold);
  font-size:var(--fs-lg);color:var(--ink);box-shadow:var(--clay-sand)}
body.clay .q-lab{
  font-size:var(--fs-sm);color:var(--slate);font-weight:var(--fw-bold);margin-bottom:var(--sp-3)}
body.clay .opt{
  display:flex;align-items:center;gap:var(--sp-3);min-height:var(--control-sm);padding:0 var(--sp-4);
  margin-bottom:var(--sp-3);border-radius:var(--radius-md);background:var(--white);
  border:var(--border);color:var(--ink);font-weight:var(--fw-bold);font-size:var(--fs-base);
  box-shadow:var(--clay-sand)}
body.clay .key{
  width:var(--sp-7);height:var(--sp-7);border-radius:var(--radius-sm);background:var(--star);
  display:grid;place-items:center;font-family:var(--dis);font-size:var(--fs-sm);
  color:var(--edge);flex:none;box-shadow:0 var(--lip-press) 0 var(--star-lip)}
body.clay .prog{
  display:flex;align-items:center;gap:var(--gap-card);margin-top:var(--sp-5);padding-top:var(--sp-5);
  border-top:var(--bd) solid var(--sand)}
body.clay .track{
  flex:1;height:var(--sp-4);border-radius:var(--radius-pill);background:var(--white);
  border:var(--bd-thin) solid var(--edge);overflow:hidden}
body.clay .fill{height:100%;background:var(--teal-pop);transition:width var(--dur) var(--ease)}
body.clay .prog span{
  font-family:var(--dis);font-size:var(--fs-sm);color:var(--ink);white-space:nowrap}
body.clay .devhint{
  text-align:center;font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--slate);
  margin-top:var(--sp-4)}
body.clay button.opt{
  width:100%;text-align:left;cursor:pointer;font-family:var(--bod);transition:var(--press)}
body.clay button.opt:hover{
  transform:translateY(var(--lip-press));box-shadow:0 var(--lip-press) 0 var(--sand)}
/* Right/wrong read as clay tints rather than dark fills — ink on mint is
   9.4:1 and ink on blush 11.2:1, so the state never costs legibility. */
body.clay button.opt[data-state="right"]{
  background:var(--mint);box-shadow:0 var(--lip-sm) 0 var(--mint-lip)}
body.clay button.opt[data-state="right"] .key{background:var(--white);color:var(--edge)}
body.clay button.opt[data-state="wrong"]{
  background:var(--blush);box-shadow:0 var(--lip-sm) 0 var(--blush-lip)}
body.clay button.opt[data-state="wrong"] .key{background:var(--white);color:var(--edge)}
body.clay button.opt[disabled]{cursor:default;transform:none}
body.clay .dend{text-align:center;padding:var(--sp-2) 0 var(--sp-1)}
body.clay .dend p{color:var(--slate);font-weight:var(--fw-body);margin-bottom:var(--sp-4)}
body.clay .dend .btn{width:100%}

/* --- age router --------------------------------------------------------- */
body.clay .router{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
body.clay .age{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);padding:var(--pad-card-sm);
  box-shadow:var(--clay);text-align:left;cursor:pointer;font-family:var(--bod);min-height:var(--tap);
  transition:var(--press)}
body.clay .age:hover{transform:translateY(calc(var(--lip-xs) * -1))}
body.clay .age[aria-pressed="true"]{background:var(--star);box-shadow:0 var(--lip-lg) 0 var(--star-lip)}
body.clay .age b{
  display:block;font-family:var(--dis);font-size:var(--fs-6xl);margin-bottom:var(--sp-1)}
body.clay .age span{font-size:var(--fs-md);font-weight:var(--fw-body);color:var(--slate)}
body.clay .age[aria-pressed="true"] span{color:var(--edge)}
body.clay .agebox{
  margin-top:var(--sp-6);background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card);box-shadow:var(--clay)}
body.clay .agebox h3{font-size:var(--fs-5xl);margin-bottom:var(--sp-3)}
body.clay .agebox p{color:var(--slate);font-weight:var(--fw-body);margin-bottom:var(--sp-5)}

/* --- stat strip --------------------------------------------------------- */
body.clay .strip{background:var(--ink);border-block:var(--border-thick);padding:var(--sp-7) 0}
body.clay .stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid);text-align:center}
body.clay .stats b{
  display:block;font-family:var(--dis);font-size:var(--fs-stat);color:var(--star);
  line-height:var(--lh-none)}
body.clay .stats span{font-size:var(--fs-md);color:var(--strip-fg);font-weight:var(--fw-body)}

/* --- sections ----------------------------------------------------------- */
/* --section-y is fluid, so there is no mobile override for this padding. */
body.clay .sec{padding:var(--section-y) 0;background:none}
body.clay .sec-alt{background:var(--white);border-block:var(--border-thick)}
body.clay .head{margin-bottom:var(--sp-9);display:block}
body.clay .head h2{font-size:var(--fs-h2);margin-bottom:var(--sp-4)}
body.clay .head p{font-size:var(--fs-xl);color:var(--slate);font-weight:var(--fw-body)}

/* Screenshot rail removed with the "Zajrzyj do środka" section — the hero's
   playable quiz already shows the product, and static shots duplicated it with
   a weaker device. The .rail, .shot, .pill and .planet classes went with it;
   the screenshots and their generator stay in the repo. */

/* --- card carousel -------------------------------------------------------
   Six cards in the vertical space of three. Built on native scroll-snap rather
   than a JS slide engine: without scripting the track is still a scrollable
   region reachable by touch, wheel and keyboard, and every card is readable.
   The arrows are an enhancement — script-clay.js unhides .carou-nav, so they
   never appear as dead controls when JS is off. */
body.clay .carou{position:relative}
body.clay .carou-track{
  display:flex;gap:var(--gap-grid);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:thin;
  /* Vertical room for the active card's scale(1.1). Horizontal padding would
     push the first snap position off zero, leaving "previous" enabled at start. */
  padding:var(--sp-5) 0 var(--sp-6)}
body.clay .carou-track > *{
  flex:0 0 calc((100% - var(--gap-grid) * 2) / 3);scroll-snap-align:center;
  transition:transform .35s var(--ease), background-color .35s ease}
/* Active centre card — matches cards.png (scale + peach fill).
   .on comes from the shared scroll-reveal observer on .rev. */
body.clay .carou-track > .clay.active,
body.clay .active.clay.on.rev{
  scale:1.1;
  background:#fff6ec;
  z-index:1;
  position:relative}
@media (prefers-reduced-motion:reduce){
  body.clay .carou-track > *{transition:none}
  body.clay .carou-track > .clay.active,
  body.clay .active.clay.on.rev{scale:1}
}
body.clay .carou-nav{display:flex;gap:var(--sp-3);justify-content:flex-end;margin-top:var(--sp-1)}
/* Play/pause sits apart from the two arrows: it governs the whole track rather
   than stepping it, and WCAG 2.2.2 requires it to be reachable at all times. */
body.clay .carou-play{margin-right:auto}
body.clay .carou-ico{grid-area:1/1}
body.clay .carou-play .carou-ico--play{display:none}
body.clay .carou-play[data-state="paused"] .carou-ico--pause{display:none}
body.clay .carou-play[data-state="paused"] .carou-ico--play{display:block}
body.clay .carou-nav[hidden]{display:none}
body.clay .carou-btn{
  display:grid;place-items:center;width:var(--tap);height:var(--tap);
  background:var(--white);border:var(--border);border-radius:var(--radius-circle);
  box-shadow:var(--clay-sand);color:var(--ink);cursor:pointer;transition:var(--press)}
body.clay .carou-btn:hover:not(:disabled){
  transform:translateY(var(--lip-press));box-shadow:0 var(--lip-press) 0 var(--sand)}
body.clay .carou-btn:disabled{opacity:.38;cursor:default;box-shadow:none}
@media (prefers-reduced-motion:reduce){
  body.clay .carou-track{scroll-behavior:auto}
}
@media (max-width:980px){
  body.clay .carou-track > *{flex-basis:calc((100% - var(--gap-grid)) / 2)}
}
@media (max-width:620px){
  /* Leave the next card peeking so the track reads as scrollable. */
  body.clay .carou-track > *{flex-basis:86%}
}

@media (max-width:620px){
  body.clay .carou-track > .clay.active, body.clay .active.clay.on.rev {
    scale: 1;
  }
}

/* --- programme slider: three stage cards, worlds stacked in a list -------
   Replaces sixteen numbered circles, which said only "there are sixteen" — the
   question a parent actually has is what the child will learn. Three stage
   cards visible side by side (one per screen on mobile), each a vertical list
   of its worlds — icon, title, description in a row. */
body.clay .carou--prog .carou-track > *{flex:0 0 calc((100% - var(--gap-grid) * 2) / 3)}
body.clay .prog-slide{
  display:flex;flex-direction:column;
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card);box-shadow:var(--clay)}
body.clay .prog-head{
  display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--pad-card-sm)}
body.clay .prog-title{font-family:var(--dis);font-size:var(--fs-2xl);color:var(--ink);margin:0}
body.clay .prog-badge{
  font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-2xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink);
  background:var(--mint);border:var(--border);border-radius:var(--radius-pill);
  padding:var(--sp-1) var(--sp-3);box-shadow:0 var(--lip-xs) 0 var(--mint-lip)}
body.clay .prog-worlds{
  list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--gap-card)}
body.clay .prog-w{display:flex;gap:var(--sp-3);align-items:flex-start}
body.clay .prog-planet{flex:none;width:40px;height:40px}
body.clay .prog-w b{
  display:block;font-family:var(--dis);font-size:var(--fs-base);color:var(--ink);
  margin-bottom:var(--sp-1)}
body.clay .prog-w span span{
  display:block;font-size:var(--fs-md);font-weight:var(--fw-body);color:var(--slate);
  line-height:var(--lh-tall)}
@media (max-width:980px){
  body.clay .carou--prog .carou-track > *{flex-basis:calc((100% - var(--gap-grid)) / 2)}
}
@media (max-width:620px){
  body.clay .carou--prog .carou-track > *{flex-basis:86%}
  body.clay .prog-slide{padding:var(--pad-card-sm)}
}

/* clay cards */
body.clay .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
body.clay .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid)}
body.clay .clay{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card);box-shadow:var(--clay)}
body.clay .clay h3{font-size:var(--fs-4xl);margin:var(--sp-5) 0 var(--sp-3)}
body.clay .clay p{color:var(--slate);font-weight:var(--fw-body);font-size:var(--fs-base)}
/* Chipy pod CTA w hero — trzy filary produktu. Osobna klasa, a nie zmiana
   .skill-badge: ta opisuje etykietę stojącą obok ikony .ic w kartach #co-daje,
   więc jej przemalowanie ruszyłoby też produkcyjny index.html. Kolory i lip
   idą za wzorcem .eye, żeby chipy nie były czwartym rodzajem pigułki. */
body.clay .hero-chips{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);list-style:none;margin:var(--sp-6) 0 0;padding:0}
body.clay .hero-chip{
  font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-sm);color:var(--ink);
  border:var(--border);border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-2)}
body.clay .hero-chip--a{background:var(--teal-pop);box-shadow:0 var(--lip-sm) 0 var(--teal-lip)}
body.clay .hero-chip--b{background:var(--mint);box-shadow:0 var(--lip-sm) 0 var(--mint-lip)}
body.clay .hero-chip--c{background:var(--blush);box-shadow:0 var(--lip-sm) 0 var(--blush-lip)}

body.clay .skill-row{display:flex;align-items:center;gap:var(--sp-4)}
body.clay .skill-badge{font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-2xl);color:var(--ink)}
body.clay .ic{
  width:var(--control-xl);height:var(--control-xl);border-radius:var(--radius-lg);border:var(--border);
  display:grid;place-items:center;color:var(--ink)}
body.clay .ic-a{background:var(--blush);box-shadow:0 var(--lip-md) 0 var(--blush-lip)}
body.clay .ic-b{background:var(--teal-pop);box-shadow:0 var(--lip-md) 0 var(--teal-lip)}
body.clay .ic-c{background:var(--mint);box-shadow:0 var(--lip-md) 0 var(--mint-lip)}
body.clay .ic-d{background:var(--star);box-shadow:0 var(--lip-md) 0 var(--star-lip)}

/* Audience cards — a .clay card that is itself the link, with a photo on top.
   Padding moves to the body so the image can bleed to the card's edges. */
body.clay .clay.aud{
  display:flex;flex-direction:column;padding:0;overflow:hidden;text-decoration:none;color:inherit;
  transition:var(--press)}
body.clay .clay.aud:hover{transform:translateY(calc(var(--lip-xs) * -1))}
body.clay .aud-img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-bottom:var(--border)}
body.clay .clay.aud h3{margin:var(--pad-card-sm) var(--pad-card-sm) var(--sp-3)}
body.clay .clay.aud p{margin:0 var(--pad-card-sm) var(--pad-card-sm)}

/* Karta ze zrzutem z aplikacji. Osobno od .aud, bo tamta kadruje 4:3 pod
   fotografie — zrzut interfejsu jest szerszy, a to, co istotne, ma przy
   górnej krawędzi, stąd 16:10 i object-position:top. Tło pod obrazem trzyma
   wysokość kadru, zanim zrzut się doczyta. */
body.clay .clay.shot{display:flex;flex-direction:column;padding:0;overflow:hidden;margin:0}
body.clay .shot-img{
  display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  object-position:top center;border-bottom:var(--border);background:var(--peach)}
body.clay .clay.shot h3{margin:var(--pad-card-sm) var(--pad-card-sm) var(--sp-3)}
body.clay .clay.shot p{margin:0 var(--pad-card-sm) var(--pad-card-sm)}

/* worlds map */
body.clay .worlds{
  display:grid;grid-template-columns:repeat(8,1fr);gap:var(--gap-card);list-style:none;
  padding:0;margin:0}
body.clay .w{
  aspect-ratio:1;border-radius:var(--radius-circle);border:var(--border);display:grid;
  place-items:center;font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-2xl);
  color:var(--ink);position:relative}
body.clay .w-s1{background:var(--teal-pop);box-shadow:0 var(--lip-md) 0 var(--teal-lip-deep)}
body.clay .w-s2{background:var(--star);box-shadow:0 var(--lip-md) 0 var(--star-lip)}
body.clay .w-s3{background:var(--mint);box-shadow:0 var(--lip-md) 0 var(--mint-lip)}
body.clay .w-s4{background:var(--lilac);box-shadow:0 var(--lip-md) 0 var(--lilac-lip)}
body.clay .stage-key{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
body.clay .kchip{
  display:flex;align-items:center;gap:var(--sp-2);background:var(--white);border:var(--border);
  border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-4);font-weight:var(--fw-bold);
  font-size:var(--fs-md);box-shadow:var(--clay-sand)}
/* Legend swatches, not planet artwork. The chips used planet images that did
   not match the coloured circles in the map directly above them, so the legend
   explained nothing. These reuse the .w-s1..4 stage colours, so colour finally
   maps to stage. (Planets stay in the app, where they carry world identity —
   at 26px here the detail was lost anyway.) */
body.clay .kdot{
  width:var(--sp-5);height:var(--sp-5);border:var(--bd) solid var(--edge);
  border-radius:var(--radius-circle);flex:none;display:block}
body.clay .kdot-s1{background:var(--teal-pop);box-shadow:0 var(--lip-press) 0 var(--teal-lip-deep)}
body.clay .kdot-s2{background:var(--star);box-shadow:0 var(--lip-press) 0 var(--star-lip)}
body.clay .kdot-s3{background:var(--mint);box-shadow:0 var(--lip-press) 0 var(--mint-lip)}
body.clay .kdot-s4{background:var(--lilac);box-shadow:0 var(--lip-press) 0 var(--lilac-lip)}

/* dark band */
body.clay .band{
  background:var(--deep);border:var(--border-thick);border-radius:var(--radius-2xl);
  padding:var(--pad-slab);color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);
  align-items:center;box-shadow:var(--clay-slab)}
body.clay .band h2{color:#fff;font-size:var(--fs-h3);margin-bottom:var(--sp-4)}
body.clay .band p{color:var(--mist);font-weight:var(--fw-body);margin-bottom:var(--sp-6)}
/* Karta .clay zagnieżdżona w ciemnym .band. Bez tego jest biały tekst na białym
   tle: .band ustawia color:#fff, które dziedziczy .clay h3, a `.band p` bije
   `.clay p` kolejnością w pliku przy równej specyficzności. Karta bierze więc tę
   samą ciemną powierzchnię co sąsiedni .dash, zamiast wycinać białą dziurę
   w płycie. */
body.clay .band .clay{
  background:var(--deep-3);border:var(--bd) solid var(--line-dark);box-shadow:none}
body.clay .band .clay h3{color:#fff}
body.clay .band .clay p{color:var(--mist);margin-bottom:0}
body.clay .dash{
  background:var(--deep-3);border:var(--bd) solid var(--line-dark);border-radius:var(--radius-xl);
  padding:var(--sp-6)}
body.clay .drow{
  display:flex;align-items:center;gap:var(--gap-card);padding:var(--sp-4) 0;
  border-bottom:var(--bd-thin) solid var(--line-dark)}
body.clay .drow:last-child{border-bottom:0}
body.clay .tick{
  width:var(--sp-8);height:var(--sp-8);border-radius:var(--radius-sm);background:var(--mint);
  border:var(--border);display:grid;place-items:center;color:var(--ink);flex:none}
body.clay .tick.wait{background:var(--line-dark);color:var(--mist);border-color:var(--line-dark-2)}
body.clay .dt{font-family:var(--dis);font-size:var(--fs-base);color:#fff}
body.clay .ds{font-size:var(--fs-sm);color:var(--mist);font-weight:var(--fw-body)}

/* speech-bubble reviews */
body.clay .grid3 figure{margin:0}
body.clay .quo{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card-sm);box-shadow:var(--clay);position:relative}
/* Rotated square forming the quote tail — its offset is half its own size, so
   these track each other rather than the spacing scale. */
body.clay .quo::after{
  content:"";position:absolute;left:36px;bottom:-16px;width:26px;height:26px;background:var(--white);
  border-right:var(--border);border-bottom:var(--border);transform:rotate(45deg)}
body.clay .quo .st{
  color:var(--ember);letter-spacing:var(--tracking-stars);margin-bottom:var(--sp-3)}
body.clay .quo blockquote{
  margin:0 0 var(--sp-4);font-size:var(--fs-lg);font-weight:var(--fw-body);line-height:var(--lh-body)}
body.clay .who{
  display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-7);padding-left:var(--sp-2)}
body.clay .face{
  width:var(--tap);height:var(--tap);border-radius:var(--radius-circle);border:var(--border);
  display:grid;place-items:center;font-family:var(--dis);font-weight:var(--fw-black);
  font-size:var(--fs-md);color:var(--ink)}
body.clay .face-a{background:var(--blush)}
body.clay .face-b{background:var(--teal-pop)}
body.clay .face-c{background:var(--mint)}
body.clay .who span:last-child{
  font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--slate)}

/* price */
body.clay .plans{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);align-items:start}
body.clay .plan{
  border:var(--border-thick);border-radius:var(--radius-2xl);padding:var(--sp-7) var(--sp-7);
  display:flex;flex-direction:column;height:100%;position:relative}
body.clay .plan-free{background:var(--star);box-shadow:0 var(--lip-xl) 0 var(--star-lip)}
body.clay .plan-mo{background:var(--teal-pop);box-shadow:0 var(--lip-xl) 0 var(--teal-lip)}
body.clay .plan-yr{background:var(--mint);box-shadow:0 var(--lip-xl) 0 var(--mint-lip)}
/* Badge straddles the card's top edge: the offset must clear the 4px border. */
body.clay .plan-badge{
  position:absolute;top:-15px;left:var(--sp-7);font-family:var(--dis);font-weight:var(--fw-black);
  font-size:var(--fs-xs);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--ink);background:var(--white);border:var(--border);border-radius:var(--radius-pill);
  padding:var(--sp-1) var(--sp-4);box-shadow:var(--clay-sand)}
body.clay .plan-tier{font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-2xl)}
body.clay .plan .amt{
  font-family:var(--dis);font-size:var(--fs-amount);line-height:var(--lh-none);
  margin:var(--sp-2) 0 var(--sp-1)}
body.clay .plan .amt .per{
  font-size:var(--fs-3xl);font-weight:var(--fw-bold);margin-left:var(--sp-1)}
body.clay .plan-note{font-weight:var(--fw-bold)}
body.clay .plan ul{list-style:none;padding:0;margin:var(--sp-6) 0}
body.clay .plan li{
  display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-2) 0;
  font-weight:var(--fw-bold);font-size:var(--fs-base)}
body.clay .plan li svg{flex:none;margin-top:var(--sp-px)}
body.clay .plan .btn,body.clay .plan-soon{margin-top:auto}
/* placeholder CTA — plan nie jest jeszcze podpięty do płatności */
body.clay .plan-soon{
  width:100%;min-height:var(--control-lg);padding:0 var(--sp-6);font-family:var(--dis);
  font-size:var(--fs-2xl);font-weight:var(--fw-black);color:var(--slate);background:var(--white);
  border:var(--bd) dashed var(--edge);border-radius:var(--radius-lg);opacity:.72;cursor:not-allowed}
body.clay .plans-foot{
  display:flex;align-items:flex-end;gap:var(--sp-5);margin-top:var(--sp-7);flex-wrap:wrap}
/* 360px basis is the wrap threshold that drops the mascot to its own row. */
body.clay .plans-foot p{
  flex:1 1 360px;max-width:var(--measure-form);font-weight:var(--fw-body);font-size:var(--fs-base);
  color:var(--slate);padding-bottom:var(--sp-4)}
body.clay .price-bot{
  flex:none;width:150px;height:auto;filter:drop-shadow(0 14px 20px rgba(6,32,74,.2))}
@media (max-width:980px){
  body.clay .plans{grid-template-columns:1fr}
  body.clay .plan{max-width:var(--measure-plan)}
}
@media (max-width:900px){body.clay .price-bot{display:none}}

/* Teal on slate is only 1.16:1 against the surrounding text, so colour alone
   cannot mark these links (WCAG 1.4.1). Underline them permanently. */
body.clay .secondary a{
  text-decoration:underline;text-underline-offset:var(--underline-offset);font-weight:var(--fw-bold)}

/* --- faq ---------------------------------------------------------------- */
body.clay .faq{max-width:var(--measure-faq)}
body.clay .faq details{
  background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  margin-bottom:var(--sp-4);box-shadow:0 var(--lip-md) 0 var(--sand)}
body.clay .faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-5);min-height:var(--control-xl);padding:var(--sp-4) var(--sp-6);
  font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-2xl)}
body.clay .faq summary::-webkit-details-marker{display:none}
body.clay .faq summary::after{
  content:"+";font-size:var(--fs-7xl);color:var(--ember);line-height:var(--lh-none);flex:none}
body.clay .faq details[open] summary::after{content:"–"}
body.clay .faq .ans{
  padding:0 var(--sp-6) var(--sp-6);color:var(--slate);font-weight:var(--fw-body);
  max-width:var(--measure-ans)}

/* --- sticky mobile CTA -------------------------------------------------- */
body.clay .dock{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);background:var(--white);
  border-top:var(--border-thick);
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom))}
body.clay .dock .btn{width:100%}

/* --- shared footer markup, clay paint ----------------------------------- */
body.clay .footer{
  background:var(--ink);color:var(--footer-fg);padding:var(--control) var(--gutter) var(--sp-7);
  border-top:var(--border-thick)}
body.clay .footer-inner{
  max-width:var(--shell);margin:0 auto var(--sp-8);gap:var(--sp-7);justify-content:space-between}
/* Logo width is set by the asset's aspect, not the spacing grid. */
body.clay .footer-brand img{
  width:120px;height:auto;background:var(--peach);border-radius:var(--radius-md);
  padding:var(--sp-2) var(--sp-3)}
body.clay .footer p{font-size:var(--fs-md);max-width:var(--measure-note);font-weight:var(--fw-body)}
body.clay .footer-col h3{
  font-family:var(--dis);font-size:var(--fs-base);color:#fff;margin-bottom:var(--sp-4)}
body.clay .footer a{
  display:inline-flex;align-items:center;min-height:var(--tap);min-width:var(--tap);
  color:var(--footer-fg);font-size:var(--fs-md);font-weight:var(--fw-body);text-decoration:none}
body.clay .footer a:hover{color:#fff;text-decoration:underline}
body.clay .footer-social{min-width:var(--tap);justify-content:center}
body.clay .footer-link-btn{
  min-height:var(--tap);font-size:var(--fs-md);font-weight:var(--fw-body)}
body.clay .footer-bottom{
  max-width:var(--shell);border-top:var(--bd-thin) solid var(--footer-rule);padding-top:var(--sp-6);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;font-size:var(--fs-sm)}

/* --- cookie banner ------------------------------------------------------ */
body.clay .cookie-banner{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--clay);color:var(--ink)}
body.clay .cookie-banner p{color:var(--slate);font-weight:var(--fw-body)}
body.clay .cookie-banner a{
  display:inline-flex;align-items:center;min-height:var(--tap);color:var(--teal);
  font-weight:var(--fw-bold);text-decoration:underline;text-underline-offset:var(--underline-offset)}
body.clay .cookie-banner .btn{min-height:var(--control-sm);font-size:var(--fs-lg)}
body.clay .cookie-banner .btn-teal{
  background:var(--teal-pop);color:var(--edge);border:var(--border);
  box-shadow:0 var(--lip-md) 0 var(--teal-lip)}

/* --- scroll reveal ------------------------------------------------------
   Reuses the site-wide `.rev` → `.rev.on` convention that shared script.js
   already drives (see script.js: IntersectionObserver adding `on`). Only the
   easing/offset is re-skinned here — do not add a second observer.

   Shared styles.css sets `.rev{opacity:0}` unconditionally, which hides the
   copy outright when JS is unavailable. On this page that is overridden back
   to visible, and the hidden start state is re-applied only where scripting
   can actually undo it. The reveal is decoration; it must never gate copy.  */
body.clay .rev{opacity:1;transform:none}

@media (scripting: enabled){
  body.clay .rev{
    opacity:0;transform:translateY(var(--sp-6)) scale(.97);
    transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
  body.clay .rev.on{opacity:1;transform:none}
}

/* --- responsive ---------------------------------------------------------
   Prefer re-declaring a TOKEN here over overriding a property on a selector:
   one line then re-flows every rule that consumes it. Section padding needs
   no entry at all — --section-y is fluid. */
@media (max-width:980px){
  body.clay{--pad-slab:var(--sp-7); --gap-col:var(--sp-8)}
  body.clay .hero-grid,body.clay .band{grid-template-columns:1fr}
  body.clay .grid3,body.clay .grid4,body.clay .stats{grid-template-columns:1fr 1fr}
  body.clay .worlds{grid-template-columns:repeat(4,1fr)}
  body.clay .blob{display:none}
  body.clay .presenter{margin-bottom:var(--sp-5)}
}
@media (max-width:620px){
  body.clay{--fs-body:var(--fs-base)}
  body.clay .grid3,body.clay .grid4,body.clay .stats{grid-template-columns:1fr}
  /* body.clay .dock{display:block} */
  /* Clears the fixed dock: button + its padding + safe area. */
  body.clay main{padding-bottom:calc(var(--control-lg) + var(--sp-8))}
  /* Strony bez sticky CTA nie rezerwują pod niego miejsca — bez tego zostaje
     martwy odstęp nad stopką. */
  body.clay.no-dock main{padding-bottom:0}
  body.clay .btn{width:100%}
  body.clay .router{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  body.clay *{transition:none !important;animation:none !important}
  body.clay .rev{opacity:1;transform:none}
}

/* ==========================================================================
   SHARED PAGE COMPONENTS
   --------------------------------------------------------------------------
   Everything above this line is the home page. Everything below is the layer
   the *inner* Polish pages are built on — 30 classes that recur on 3+ pages
   (kontakt, omnie, dla-szkol, dlarodzica, polityka, regulamin).

   These are the ORIGINAL class names from the navy theme, restyled in clay
   rather than renamed. Two of them are load-bearing beyond styling:
   `.form-submit` and `[data-form-note]` are queried by script.js (~line 461)
   to drive `/api/waitlist` submissions. Renaming them silently breaks every
   form on the site. Do not "tidy" them away.
   ========================================================================== */

/* --- layout ------------------------------------------------------------- */
body.clay .wrap{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}
body.clay .two-col{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:start}

/* --- section chrome ------------------------------------------------------ */
/* Plain `.sec` (peach) and `.sec-alt` (white) are defined with the home page.
   `.sec-cream` is the inner-page name for the same white band. */
body.clay .sec-cream{background:var(--white);border-block:var(--border-thick)}

/* `.sec-dark` is the compact page-title band on inner pages. It stays a genuinely
   dark surface: its markup pairs with `.sec-title-light` / `.sec-sub-light`, so
   flipping it to peach would invert the text colour on six pages at once. Clay
   already owns dark surfaces (.strip, .band, .dev) — this is the same family. */
body.clay .sec-dark{
  background:var(--deep);border-block:var(--border-thick);
  box-shadow:inset 0 calc(var(--lip-2xl) * -1) 0 var(--deep-2)}

/* `.sec-mist` was another dark variant in the navy theme. In clay it becomes a
   light tinted band, so the default (dark) heading colours stay readable. */
body.clay .sec-mist{background:var(--blush);border-block:var(--border-thick)}

body.clay .sec-head{
  max-width:var(--measure-head);margin-inline:auto;text-align:center;display:block}
body.clay .sec-title{
  font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-h2);
  line-height:var(--lh-display);letter-spacing:var(--tracking-display);
  margin:0 0 var(--sp-4);color:var(--ink)}
body.clay .sec-sub{font-size:var(--fs-xl);color:var(--slate);font-weight:var(--fw-body);margin:0 auto}
body.clay .sec-title-light{color:#fff}
body.clay .sec-sub-light{color:var(--mist)}
body.clay .text-dark{color:var(--ink)}
body.clay .sec-sub-wide{max-width:var(--measure-wide);margin-inline:auto}

/* Safety net: not every page pairs `.sec-dark` with the `-light` modifiers
   (omnie.html's #manifest uses a bare `.sec-title`). Without this the heading
   would be navy ink on a navy band — invisible. Anything inside a dark band
   defaults to light text; the `-light` classes above are then just explicit. */
body.clay .sec-dark .sec-title,body.clay .sec-dark h1,body.clay .sec-dark h2,
body.clay .sec-dark h3{color:#fff}
body.clay .sec-dark .sec-sub,body.clay .sec-dark p{color:var(--mist)}
body.clay .sec-dark .panel-eye{color:var(--teal-pop)}

/* --- eyebrows (inner-page names for .eye) -------------------------------- */
body.clay .eyebrow{
  display:inline-block;font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink);
  background:var(--star);border:var(--border);border-radius:var(--radius-pill);
  padding:var(--sp-1) var(--sp-4);box-shadow:0 var(--lip-sm) 0 var(--star-lip);
  margin-bottom:var(--sp-5)}
body.clay .ey-teal{background:var(--teal-pop);box-shadow:0 var(--lip-sm) 0 var(--teal-lip)}
body.clay .ey-yellow{background:var(--star);box-shadow:0 var(--lip-sm) 0 var(--star-lip)}

/* --- buttons (inner-page names) ------------------------------------------ */
/* --ember (#E26009) is 3.55:1 with white — fine for the home page's 19px .btn-1
   under the large-text allowance, but .btn-md is 18px and .btn-sm is 16px, which
   both need the full 4.5:1. --ember-dark (#C94E06) is 4.59:1, so this variant is
   safe at every size rather than depending on hitting a font-size threshold. */
body.clay .btn-orange{
  background:var(--ember-dark);color:#fff;box-shadow:0 var(--lip-lg) 0 var(--ember-lip)}
body.clay .btn-teal{
  background:var(--teal-pop);color:var(--edge);box-shadow:0 var(--lip-lg) 0 var(--teal-lip)}
body.clay .btn-ghost-dark{
  background:var(--white);color:var(--ink);box-shadow:0 var(--lip-lg) 0 var(--sand)}
body.clay .btn-sm{
  min-height:var(--control-sm);font-size:var(--fs-base);padding:0 var(--sp-6);
  border-radius:var(--radius-md)}
body.clay .btn-md{min-height:var(--control);font-size:var(--fs-xl);padding:0 var(--sp-6)}
/* Inline brand emphasis, often at 13px bold. --ember-dark (#C94E06) clears 4.5:1
   on white but only reaches 4.29:1 on the peach page background; --ember-lip
   (#9C3D03) is 6.38:1 there. */
/* Inline brand emphasis has to flip with the surface it sits on: #9C3D03 is
   6.38:1 on peach but 2.49:1 on the navy slabs, and --star is the reverse.
   Enumerating every nesting combination gets unmanageable (a white .step-card
   inside a dark .sec-dark inside a light page), so surfaces declare the accent
   and it cascades — the nearest ancestor always wins. */
body.clay{--accent-inline:var(--ember-lip)}
/* `.dev` dropped from this list — its screen is peach since the mock was
   reskinned, so --star inline emphasis would sit yellow-on-peach. It inherits
   the page default (--ember-lip) instead. */
body.clay .sec-dark,body.clay .cta-inner,body.clay .band,body.clay .strip{
  --accent-inline:var(--star)}
body.clay .form-glass,body.clay .step-card,body.clay .t-card,body.clay .out-card,
body.clay .clay,body.clay .lead-form-card,body.clay .quote-box,body.clay .school-box,
body.clay .agebox,body.clay .price{--accent-inline:var(--ember-lip)}
body.clay .c-orange{color:var(--accent-inline)}

/* --- panels -------------------------------------------------------------- */
body.clay .panel-eye{
  display:inline-block;font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--teal);
  margin:0 0 var(--sp-3)}
/* `.panel-eye` is plain coloured text, but some markup pairs it with the pill
   modifiers meant for `.eyebrow` (`panel-eye ey-yellow`). That gave the pill its
   background while keeping the text colour — teal on yellow, 1.09:1. When the
   modifiers are present, render a real pill with ink text instead. */
body.clay .panel-eye.ey-teal,body.clay .panel-eye.ey-yellow,body.clay .panel-eye.ey-m{
  color:var(--ink);border:var(--border);border-radius:var(--radius-pill);
  padding:var(--sp-1) var(--sp-4);font-size:var(--fs-xs);letter-spacing:var(--tracking-eyebrow)}
body.clay .panel-eye.ey-teal{background:var(--teal-pop);box-shadow:0 var(--lip-sm) 0 var(--teal-lip)}
body.clay .panel-eye.ey-yellow{background:var(--star);box-shadow:0 var(--lip-sm) 0 var(--star-lip)}
body.clay .sec-dark .panel-eye.ey-teal,body.clay .sec-dark .panel-eye.ey-yellow{color:var(--ink)}

body.clay .panel-h2{font-size:var(--fs-h4);margin:0 0 var(--sp-4);color:var(--ink)}
body.clay .panel-p{
  color:var(--slate);font-weight:var(--fw-body);margin:0 0 var(--sp-4);font-size:var(--fs-base)}

/* --- CTA band ------------------------------------------------------------ */
/* Peach section wrapping a deep clay slab — same shape as the home page's .band. */
body.clay .cta-sec{padding:var(--section-y) 0;background:none;position:relative}
body.clay .cta-stars{display:none}   /* navy-theme starfield; clay uses .blob instead */
body.clay .cta-inner{
  width:100%;max-width:var(--shell);margin-inline:auto;
  background:var(--deep);border:var(--border-thick);border-radius:var(--radius-2xl);
  padding:var(--pad-slab);color:#fff;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:center;
  box-shadow:var(--clay-slab)}
body.clay .cta-ey{
  display:inline-block;font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--edge);
  background:var(--teal-pop);border:var(--border);border-radius:var(--radius-pill);
  padding:var(--sp-1) var(--sp-4);box-shadow:0 var(--lip-sm) 0 var(--teal-lip);
  margin-bottom:var(--sp-5)}
body.clay .cta-h2{color:#fff;font-size:var(--fs-h3);margin:0 0 var(--sp-4)}
body.clay .cta-p{color:var(--mist);font-weight:var(--fw-body);margin:0 0 var(--sp-6)}

/* --- waitlist / contact form --------------------------------------------- */
/* White clay card on the deep slab. `.form-submit` + `[data-form-note]` are the
   script.js contract — style them, never rename them. */
body.clay .form-glass{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card);box-shadow:0 var(--lip-xl) 0 var(--sand)}
body.clay .waitlist-form{display:flex;flex-direction:column;gap:var(--gap-card)}
body.clay .fg{display:flex;flex-direction:column;gap:var(--sp-2)}
body.clay .fl{
  font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-base);color:var(--ink)}
body.clay .fi,body.clay .form-glass select,body.clay .form-glass textarea{
  width:100%;min-height:var(--control);padding:var(--sp-4) var(--sp-5);font-family:var(--bod);
  font-size:var(--fs-lg);font-weight:var(--fw-body);border:var(--border);
  border-radius:var(--radius-md);background:var(--white);color:var(--ink)}
body.clay .fi::placeholder,body.clay .form-glass textarea::placeholder{color:var(--placeholder)}
/* ~4 rows of comfortable typing before the textarea has to scroll. */
body.clay .form-glass textarea{
  min-height:120px;resize:vertical;line-height:var(--lh-tall)}
body.clay .fcheck{
  display:flex;gap:var(--sp-3);align-items:flex-start;min-height:var(--tap)}
body.clay .fcheck input{
  flex:none;width:var(--sp-7);height:var(--sp-7);margin-top:var(--sp-px);
  accent-color:var(--ember);cursor:pointer}
body.clay .fcheck label{
  font-size:var(--fs-md);font-weight:var(--fw-body);color:var(--slate);cursor:pointer;
  line-height:var(--lh-tall)}
body.clay .form-submit{width:100%}
body.clay .form-note{
  margin:0;font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--ink);border:var(--border);border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4)}
body.clay .form-note[hidden]{display:none}

/* --- safety / info list -------------------------------------------------- */
body.clay .safety-items{display:grid;gap:var(--gap-card)}
body.clay .safety-it{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  background:rgba(255,255,255,.07);border:var(--bd-thin) solid rgba(255,255,255,.18);
  border-radius:var(--radius-lg);padding:var(--sp-4) var(--sp-5)}
body.clay .safety-txt{display:flex;flex-direction:column;gap:var(--sp-1)}
body.clay .safety-txt strong{font-family:var(--dis);font-size:var(--fs-base);color:#fff}
body.clay .safety-txt span{
  font-size:var(--fs-md);color:var(--mist);font-weight:var(--fw-body)}
/* Body-copy links inherit --teal (#0A6C7E), which is near-invisible on the deep
   navy surfaces. Anything inside a dark slab gets the light teal instead. */
/* `:not(.btn)` matters — buttons carry their own background/foreground pair, and
   without the exclusion this rule repainted .btn-3's label teal on yellow (1.09:1)
   on the home page. */
body.clay .sec-dark a:not(.btn),body.clay .cta-inner a:not(.btn),
body.clay .band a:not(.btn),body.clay .strip a:not(.btn){
  color:var(--teal-pop);text-decoration:underline;
  text-underline-offset:var(--underline-offset);font-weight:var(--fw-bold)}
body.clay .cta-inner .form-glass a:not(.btn){color:var(--teal)}
/* Same component on a light section: invert the surface. */
body.clay .sec .safety-it,body.clay .sec-cream .safety-it{
  background:var(--white);border:var(--border);box-shadow:var(--clay-sand)}
body.clay .sec .safety-txt strong,body.clay .sec-cream .safety-txt strong{color:var(--ink)}
body.clay .sec .safety-txt span,body.clay .sec-cream .safety-txt span{color:var(--slate)}

/* --- omnie.html: value cards + manifesto steps ---------------------------- */
body.clay .out-grid{display:grid;gap:var(--gap-card);margin-top:var(--sp-1)}
body.clay .out-card{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--clay-sand)}
body.clay .out-card p{
  color:var(--slate);font-weight:var(--fw-body);font-size:var(--fs-md);margin:0;
  line-height:var(--lh-tall)}
body.clay .out-card strong{color:var(--ink);font-family:var(--dis)}
/* styles.css floats every icon out of flow (`position:absolute; top:-3rem;
   left:0; right:0; width:4rem`) so it hovers above the card. Clay puts icons
   back in normal flow as clay tiles — the absolute props must be reset
   explicitly, or the icons escape their cards and collide with headings. */
body.clay .out-ico,body.clay .step-ico,body.clay .safety-ico,body.clay .school-feat-i{
  position:static;inset:auto;margin-inline:0;width:auto;line-height:var(--lh-none)}
body.clay .out-ico{
  flex:none;width:var(--tap);height:var(--tap);display:grid;place-items:center;
  font-size:var(--fs-4xl);background:var(--blush);border:var(--border);
  border-radius:var(--radius-md);box-shadow:0 var(--lip-xs) 0 var(--blush-lip)}

body.clay .steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid);margin-top:var(--sp-2)}
/* styles.css centres this card's text. The badge is a fixed-width block, so it
   stays left while the copy floats to the middle — and on the home page these
   sit beside .clay cards, which are left-aligned. Pull the text back into line. */
body.clay .step-card{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card);box-shadow:var(--clay);text-align:left}
body.clay .step-card h3{font-size:var(--fs-3xl);margin:var(--sp-4) 0 var(--sp-3);color:var(--ink)}
body.clay .step-card p{
  color:var(--slate);font-weight:var(--fw-body);font-size:var(--fs-md);margin:0;
  line-height:var(--lh-body)}
body.clay .step-ico{
  display:grid;place-items:center;width:var(--control-lg);height:var(--control-lg);
  font-size:var(--fs-7xl);background:var(--star);border:var(--border);
  border-radius:var(--radius-lg);box-shadow:0 var(--lip-sm) 0 var(--star-lip)}

/* --- kontakt.html: inline note panels ------------------------------------ */
body.clay .note-panel{
  background:rgba(255,255,255,.07);border:var(--bd-thin) solid rgba(255,255,255,.2);
  border-radius:var(--radius-lg);padding:var(--sp-5) var(--sp-5);margin-top:var(--sp-5)}
body.clay .note-panel p{
  color:var(--mist);font-size:var(--fs-md);line-height:var(--lh-body);
  font-weight:var(--fw-body);margin:0}
body.clay .note-panel strong{color:#fff}
body.clay .note-panel-title{
  font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-md);color:#fff;
  margin:0 0 var(--sp-2)}

/* --- utilities carried over from the navy theme --------------------------- */
body.clay .flex{display:flex}
body.clay .justify-center{justify-content:center}
body.clay .gap-2{gap:var(--gap-card)}
body.clay .panel-p-fine{font-size:var(--fs-md);color:var(--slate)}

/* --- dla-szkol.html: benefits panel -------------------------------------- */
body.clay .school-box{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card);box-shadow:var(--clay)}
body.clay .school-feats{display:grid;gap:var(--gap-card);margin-top:var(--sp-1)}
body.clay .school-feat{
  display:flex;gap:var(--sp-3);align-items:flex-start;color:var(--slate);
  font-weight:var(--fw-body);font-size:var(--fs-base);margin:0}
body.clay .feat-dot{
  flex:none;width:var(--sp-5);height:var(--sp-5);margin-top:var(--sp-1);
  border-radius:var(--radius-circle);background:var(--mint);border:var(--border);
  box-shadow:0 var(--lip-xs) 0 var(--mint-lip)}

/* --- dlarodzica.html ----------------------------------------------------- */
body.clay .panel-h2--sm{font-size:var(--fs-h5)}
body.clay .panel-eye--gap{margin-bottom:var(--sp-5)}
body.clay .cta-row-label{
  display:inline-flex;align-items:center;font-size:var(--fs-md);
  font-weight:var(--fw-bold);color:var(--ink)}
body.clay .sec-dark .cta-row-label{color:#fff}
body.clay .form-help{
  font-size:var(--fs-md);font-weight:var(--fw-body);color:var(--slate);margin:var(--sp-3) 0 0}

/* feature list — dot + label + description */
body.clay .feat-list{display:grid;gap:var(--gap-card)}
body.clay .feat-list--mt{margin-top:var(--sp-5)}
body.clay .feat-it{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--clay-sand)}
/* `--plain` drops the card so the list reads as prose on a dark band. */
body.clay .sec-dark .feat-it--plain{
  background:rgba(255,255,255,.07);border:var(--bd-thin) solid rgba(255,255,255,.18);
  box-shadow:none}
body.clay .feat-it strong{
  display:block;font-family:var(--dis);font-size:var(--fs-base);color:var(--ink);
  margin-bottom:var(--sp-1)}
body.clay .sec-dark .feat-it strong{color:#fff}
body.clay .feat-desc{
  display:block;font-size:var(--fs-md);font-weight:var(--fw-body);color:var(--slate);
  line-height:var(--lh-tall)}
body.clay .sec-dark .feat-desc{color:var(--mist)}
body.clay .feat-dot--orange{background:var(--ember);box-shadow:0 var(--lip-xs) 0 var(--ember-lip)}

/* testimonials */
body.clay .quote-box{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card-sm);box-shadow:var(--clay)}
body.clay .quote-box--bare{background:none;border:0;padding:0;box-shadow:none}
body.clay .t-card{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card-sm);box-shadow:0 var(--lip-md) 0 var(--sand);margin-bottom:var(--sp-4)}
body.clay .t-card blockquote{
  margin:var(--sp-3) 0 var(--sp-4);font-size:var(--fs-base);font-weight:var(--fw-body);
  color:var(--ink);line-height:var(--lh-body)}
/* Gwiazdki to teraz inline'owe SVG, a nie glify — letter-spacing ich nie
   rozsuwa, więc odstęp niesie flex-gap. Kolor zostaje na kontenerze i wchodzi
   do środka przez fill="currentColor". */
body.clay .t-stars{
  display:inline-flex;align-items:center;gap:var(--sp-px);
  color:var(--ember);font-size:var(--fs-md)}
body.clay .t-cite{
  display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-md);
  font-weight:var(--fw-bold);color:var(--slate)}
body.clay .t-avatar{
  flex:none;width:var(--tap);height:var(--tap);border-radius:var(--radius-circle);
  border:var(--border);display:grid;place-items:center;font-family:var(--dis);
  font-weight:var(--fw-black);font-size:var(--fs-md);color:var(--ink)}
body.clay .t-avatar--teal{background:var(--teal-pop)}
body.clay .t-avatar--orange{background:var(--blush)}
body.clay .t-avatar--green{background:var(--mint)}
body.clay .t-card--teal{box-shadow:0 var(--lip-md) 0 var(--teal-lip)}
body.clay .t-card--orange{box-shadow:0 var(--lip-md) 0 var(--blush-lip)}
body.clay .t-card--green{box-shadow:0 var(--lip-md) 0 var(--mint-lip)}

/* outcomes + lead-magnet lists */
body.clay .outcomes-box{
  background:var(--star);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card-sm);box-shadow:0 var(--lip-md) 0 var(--star-lip);margin-top:var(--sp-5)}
body.clay .outcomes-box > strong{
  display:block;font-family:var(--dis);font-size:var(--fs-lg);color:var(--ink);
  margin-bottom:var(--sp-3)}
body.clay .outcomes-list,body.clay .magnet-list-light{
  list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-2)}
body.clay .outcomes-list li,body.clay .magnet-list-light li{
  position:relative;padding-left:var(--sp-7);font-weight:var(--fw-bold);font-size:var(--fs-md);
  color:var(--ink);line-height:var(--lh-tall)}
body.clay .outcomes-list li::before,body.clay .magnet-list-light li::before{
  /* -1px optically centres the glyph against the first line of text. */
  content:"✓";position:absolute;left:0;top:-1px;
  font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-lg);color:var(--ember-dark)}
body.clay .magnet-list-light li{color:var(--slate)}
body.clay .out-grid--sm{margin-top:var(--sp-5)}

/* lead-magnet form card */
body.clay .lead-form-card{
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);
  padding:var(--pad-card);box-shadow:var(--clay)}
body.clay .lead-form-card form{display:flex;flex-direction:column;gap:var(--gap-card)}
body.clay .form-privacy{
  font-size:var(--fs-sm);font-weight:var(--fw-body);color:var(--slate);
  margin:var(--sp-4) 0 0;line-height:var(--lh-tall)}

/* CTA companion chips — replaces the orbiting labels the navy theme animated
   around the mascot. Same copy, but static and inside normal flow, so it works
   with the tested .presenter block instead of absolute positioning. */
body.clay .orbit-chips{
  list-style:none;padding:0;margin:var(--sp-5) 0 0;display:flex;flex-wrap:wrap;gap:var(--sp-2)}
body.clay .orbit-chips li{
  display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--white);border:var(--border);
  border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-4);font-size:var(--fs-sm);
  font-weight:var(--fw-bold);color:var(--ink);box-shadow:var(--clay-sand)}
body.clay .cta-inner .presenter{margin:var(--sp-6) 0 0}
body.clay .cta-inner .pres-bubble p{margin:0}

/* ==========================================================================
   PRZEWODNIK — long-form parent guide
   --------------------------------------------------------------------------
   Previously a standalone page with its own site-header/site-footer and no link
   from anywhere on the site (sitemap only). Now built like every other page, so
   it inherits the shared nav/footer and stops being an orphan. Its own layout
   pieces — table of contents, numbered sections, comparison columns — survive.
   ========================================================================== */
body.clay .content{
  max-width:var(--measure-guide);margin-inline:auto;padding-inline:var(--gutter)}
body.clay .toc{
  max-width:var(--measure-guide);margin:0 auto var(--sp-3);padding:var(--sp-6) var(--pad-card-sm);
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);box-shadow:var(--clay)}
body.clay .toc ol,body.clay .toc ul{
  margin:0;padding-left:var(--sp-6);display:grid;gap:var(--sp-2)}
body.clay .toc a{color:var(--teal);font-weight:var(--fw-bold);text-decoration:none}
body.clay .toc a:hover{text-decoration:underline;text-underline-offset:var(--underline-offset)}

body.clay .section{margin:var(--sp-9) 0}
body.clay .section-header{
  display:flex;gap:var(--gap-card);align-items:flex-start;margin-bottom:var(--sp-4)}
body.clay .section-number{
  flex:none;width:var(--control-sm);height:var(--control-sm);display:grid;place-items:center;
  border-radius:var(--radius-md);border:var(--border);font-family:var(--dis);
  font-weight:var(--fw-black);font-size:var(--fs-3xl);color:var(--ink)}
body.clay .section-number--teal{background:var(--teal-pop);box-shadow:0 var(--lip-sm) 0 var(--teal-lip)}
body.clay .section-number--star{background:var(--star);box-shadow:0 var(--lip-sm) 0 var(--star-lip)}
body.clay .section-number--mint{background:var(--mint);box-shadow:0 var(--lip-sm) 0 var(--mint-lip)}
body.clay .section-number--ember{background:var(--blush);box-shadow:0 var(--lip-sm) 0 var(--blush-lip)}

body.clay .highlight-box,body.clay .key-thought,body.clay .gdpr-note{
  background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-5) var(--sp-6);margin:var(--sp-6) 0;box-shadow:0 var(--lip-md) 0 var(--sand);
  color:var(--slate);font-weight:var(--fw-body)}
body.clay .key-thought{
  background:var(--star);box-shadow:0 var(--lip-md) 0 var(--star-lip);color:var(--ink)}
body.clay .gdpr-note{
  background:var(--teal-pop);box-shadow:0 var(--lip-md) 0 var(--teal-lip);color:var(--ink)}
body.clay .badge{
  display:inline-block;background:var(--star);border:var(--border-thin);
  border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-3);font-family:var(--dis);
  font-weight:var(--fw-black);font-size:var(--fs-2xs);color:var(--ink)}

body.clay .qa-list,body.clay .rules-list,body.clay .fact-list{
  display:grid;gap:var(--gap-card);margin:var(--sp-5) 0;padding:0;list-style:none}
body.clay .qa-list li,body.clay .rules-list li,body.clay .fact-list li{
  background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-4) var(--sp-5);box-shadow:var(--clay-sand);color:var(--slate);
  font-weight:var(--fw-body)}
body.clay .fact-num{
  font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-4xl);
  color:var(--ember-dark);display:block}
body.clay .check{color:var(--mint-lip);font-weight:var(--fw-black)}

/* good/bad comparison columns */
body.clay .col{
  display:grid;gap:var(--sp-3);padding:var(--sp-5);border:var(--border);
  border-radius:var(--radius-lg)}
body.clay .col-good{background:var(--mint);box-shadow:0 var(--lip-md) 0 var(--mint-lip)}
body.clay .col-bad{background:var(--blush);box-shadow:0 var(--lip-md) 0 var(--blush-lip)}
body.clay .col-good *,body.clay .col-bad *{color:var(--ink)}

body.clay .cta-band{
  max-width:var(--measure-guide);margin:var(--sp-9) auto 0;padding:var(--pad-card);
  background:var(--deep);color:#fff;border:var(--border-thick);border-radius:var(--radius-2xl);
  box-shadow:0 var(--lip-xl) 0 var(--deep-2);text-align:center}
body.clay .cta-band h2,body.clay .cta-band h3{color:#fff}
body.clay .cta-band p{color:var(--mist);font-weight:var(--fw-body);margin:0 0 var(--sp-5)}
body.clay .cta-buttons{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center}
body.clay .btn-cta-primary{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--control);
  padding:0 var(--sp-6);font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-xl);
  text-decoration:none;cursor:pointer;background:var(--ember-dark);color:#fff;border:var(--border);
  border-radius:var(--radius-lg);box-shadow:0 var(--lip-lg) 0 var(--ember-lip)}
body.clay .btn-cta-secondary{
  display:inline-flex;align-items:center;justify-content:center;min-height:var(--control);
  padding:0 var(--sp-6);font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-xl);
  text-decoration:none;cursor:pointer;background:var(--white);color:var(--ink);border:var(--border);
  border-radius:var(--radius-lg);box-shadow:0 var(--lip-lg) 0 var(--sand)}

/* --- cennik -------------------------------------------------------------- */
body.clay .ta-center{text-align:center}
body.clay .btn-lg{min-height:var(--control-xl);font-size:var(--fs-2xl);padding:0 var(--sp-7)}
body.clay .btn-ghost{
  background:var(--white);color:var(--ink);box-shadow:0 var(--lip-lg) 0 var(--sand)}

/* ==========================================================================
   LEGAL PROSE — polityka, regulamin, polityka-cookies
   --------------------------------------------------------------------------
   These pages previously carried their entire design in inline style="" (166
   attributes across two files, bound to the navy theme's --navy / --ink-soft /
   --r-lg / --font-d tokens). Those are gone; typography now comes from element
   selectors inside .legal-body, so the markup is plain semantic HTML and the
   legal text is untouched.

   Reading comfort beats brand personality here: 17px/1.75 over a 52rem column,
   headings in Baloo 2 for continuity, no bouncy shadows on running text.
   ========================================================================== */
body.clay .legal-body{
  max-width:var(--measure-legal);margin-inline:auto;color:var(--slate);font-size:var(--fs-lg);
  line-height:var(--lh-prose);font-weight:var(--fw-prose)}
body.clay .legal-body h2{
  font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-6xl);
  line-height:var(--lh-heading);color:var(--ink);margin:var(--sp-9) 0 var(--sp-4)}
body.clay .legal-body h2:first-child{margin-top:0}
body.clay .legal-body h3{
  font-family:var(--dis);font-weight:var(--fw-black);font-size:var(--fs-3xl);
  line-height:var(--lh-title);color:var(--ink);margin:var(--sp-7) 0 var(--sp-3)}
body.clay .legal-body p{margin:0 0 var(--sp-4)}
body.clay .legal-body ul,body.clay .legal-body ol{
  margin:0 0 var(--sp-6);padding-left:var(--pad-card-sm)}
body.clay .legal-body li{margin-bottom:var(--sp-2)}
body.clay .legal-body strong{color:var(--ink);font-weight:var(--fw-black)}
body.clay .legal-body a{
  color:var(--teal);font-weight:var(--fw-bold);text-decoration:underline;
  text-underline-offset:var(--underline-offset)}

/* Callouts — three tints carried over from the original: info, warning, ok. */
body.clay .legal-note{
  background:var(--teal-pop);border:var(--border);border-radius:var(--radius-lg);
  padding:var(--sp-5) var(--sp-6);margin:var(--sp-5) 0 var(--sp-6);
  box-shadow:0 var(--lip-md) 0 var(--teal-lip);color:var(--ink)}
body.clay .legal-note p{color:var(--ink);font-weight:var(--fw-body)}
body.clay .legal-note p:last-child{margin-bottom:0}
body.clay .legal-note strong{color:var(--ink)}
/* --teal on the teal-pop callout is only 3.25:1; ink keeps the link legible on
   all three tints without needing a per-tint link colour. */
/* Ink matches the surrounding note text, so the underline is what distinguishes
   the link (WCAG 1.4.1 — colour alone is not enough). Callouts can sit outside
   .legal-body, so it cannot be inherited from there. */
body.clay .legal-note a{
  color:var(--ink);font-weight:var(--fw-black);text-decoration:underline;
  text-underline-offset:var(--underline-offset)}
body.clay .legal-note--warn{background:var(--star);box-shadow:0 var(--lip-md) 0 var(--star-lip)}
body.clay .legal-note--ok{background:var(--mint);box-shadow:0 var(--lip-md) 0 var(--mint-lip)}
body.clay .legal-note--plain{background:var(--white);box-shadow:0 var(--lip-md) 0 var(--sand)}

/* Data table (cookie/retention schedules). */
body.clay .legal-table-wrap{
  overflow-x:auto;margin:0 0 var(--pad-card-sm);border:var(--border);
  border-radius:var(--radius-lg);box-shadow:0 var(--lip-md) 0 var(--sand);background:var(--white)}
body.clay .legal-table{
  width:100%;border-collapse:collapse;font-size:var(--fs-md);line-height:var(--lh-tall)}
body.clay .legal-table th,body.clay .legal-table td{
  padding:var(--sp-3) var(--sp-4);text-align:left;border-bottom:var(--bd-thin) solid var(--sand)}
body.clay .legal-table th{
  background:var(--star);font-family:var(--dis);font-weight:var(--fw-black);color:var(--ink);
  border-bottom:var(--border)}
body.clay .legal-table td{color:var(--slate);font-weight:var(--fw-body)}
body.clay .legal-table tr:last-child td{border-bottom:0}

/* ==========================================================================
   BLOG — list + post
   --------------------------------------------------------------------------
   Strict BEM, no inline styles, one template in build.js, so all 17 PL blog
   pages are styled from here alone. Article typography is deliberately calmer
   than the rest of the clay system: this is long-form prose read by parents,
   not child-facing UI. Bigger measure, softer weights, no bouncy shadows on
   body text.
   ========================================================================== */

/* --- list hero ----------------------------------------------------------- */
body.clay .blog-list-hero{padding:var(--sp-10) 0 var(--sp-9);text-align:center}
body.clay .blog-hero-eyebrow{
  display:inline-block;font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink);
  background:var(--teal-pop);border:var(--border);border-radius:var(--radius-pill);
  padding:var(--sp-1) var(--sp-4);box-shadow:0 var(--lip-sm) 0 var(--teal-lip);
  margin-bottom:var(--sp-5)}
body.clay .blog-hero-title{font-size:var(--fs-h2);margin:0 0 var(--sp-4);color:var(--ink)}
body.clay .blog-hero-desc{
  font-size:var(--fs-xl);color:var(--slate);font-weight:var(--fw-body);
  max-width:var(--measure-head);margin:0 auto}

/* --- category filter ----------------------------------------------------- */
body.clay .blog-filter{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-bottom:var(--sp-8)}
body.clay .blog-filter__btn{
  min-height:var(--tap);padding:0 var(--sp-5);border-radius:var(--radius-pill);cursor:pointer;
  font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--ink);
  background:var(--white);border:var(--border);box-shadow:var(--clay-sand);
  transition:var(--press)}
body.clay .blog-filter__btn:hover{
  transform:translateY(var(--lip-press));box-shadow:0 var(--lip-press) 0 var(--sand)}
body.clay .blog-filter__btn--active{background:var(--star);box-shadow:0 var(--lip-sm) 0 var(--star-lip)}
body.clay .blog-filter__empty{
  text-align:center;color:var(--slate);font-weight:var(--fw-body);padding:var(--sp-8) 0}

/* --- card grid ----------------------------------------------------------- */
body.clay .blog-list-section{padding:0 0 var(--sp-11)}
body.clay .blog-grid{
  /* 300px is the narrowest a card can be before the 1200x630 cover blurs. */
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--pad-card-sm);
  align-items:start}
body.clay .blog-card__link{
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  background:var(--white);border:var(--border);border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--clay);transition:var(--press)}
body.clay .blog-card__link:hover{transform:translateY(calc(var(--lip-xs) * -1))}
body.clay .blog-card__img{
  width:100%;aspect-ratio:1200/630;object-fit:cover;display:block;
  border-bottom:var(--border)}
body.clay .blog-card__body{
  display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--pad-card-sm);flex:1}
body.clay .blog-card__cats{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
body.clay .blog-card__cats span,body.clay .blog-card__cats a{
  display:inline-block;background:var(--blush);border:var(--border-thin);
  border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-2xs);
  font-weight:var(--fw-black);font-family:var(--dis);color:var(--ink)}
body.clay .blog-card__title{
  font-size:var(--fs-3xl);line-height:var(--lh-heading);margin:0;color:var(--ink)}
body.clay .blog-card__desc{
  font-size:var(--fs-md);color:var(--slate);font-weight:var(--fw-body);
  line-height:var(--lh-body);margin:0}
body.clay .blog-card__footer{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;margin-top:auto;
  padding-top:var(--sp-3);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--slate)}
/* styles.css colours these #777 (4.47:1 on white — just under AA at 12.8px). */
body.clay .blog-card__date,body.clay .blog-card__readtime{
  display:inline-flex;align-items:center;color:var(--slate)}

/* --- post ---------------------------------------------------------------- */
body.clay .blog-post{padding-bottom:var(--sp-10)}
/* The post header carries `.sec-mist`, which clay paints blush. Teal metadata
   and the back link only reach ~4.1:1 on that, so the header keeps the plain
   peach page background instead — calmer for long-form anyway. */
body.clay .blog-post__header{padding:var(--sp-9) 0 var(--pad-card);background:none}
body.clay .blog-post__header-content{margin-inline:auto}
body.clay .blog-post__back{
  display:inline-flex;align-items:center;min-height:var(--tap);font-family:var(--dis);
  font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--teal);text-decoration:none;
  margin-bottom:var(--sp-5)}
body.clay .blog-post__back:hover{
  text-decoration:underline;text-underline-offset:var(--underline-offset)}
body.clay .blog-post__title{font-size:var(--fs-h2);margin:0 0 var(--sp-4);color:var(--ink)}
body.clay .blog-post__meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--slate)}
body.clay .blog-post__author{display:inline-flex;align-items:center;gap:var(--sp-2)}
body.clay .blog-post__tags{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);}
body.clay .blog-post__tag{
  display:inline-block;background:var(--white);border:var(--border-thin);
  border-radius:var(--radius-pill);padding:var(--sp-1) var(--sp-3);font-size:var(--fs-xs);
  font-weight:var(--fw-bold);color:var(--ink);box-shadow:0 var(--lip-xs) 0 var(--sand);
  text-decoration:none}

/* Article body: 17px/1.75 over a 38rem measure ≈ 70 characters — the readable
   range for sustained prose. Headings keep Baloo 2 for brand continuity. */
body.clay .blog-post__lead,body.clay .blog-post__body{
  max-width:var(--measure-prose);margin-inline:auto}
body.clay .blog-post__lead{
  font-size:var(--fs-5xl);line-height:var(--lh-lead);font-weight:var(--fw-bold);
  color:var(--ink);margin-bottom:var(--pad-card-sm)}
body.clay .blog-post__body{
  font-size:var(--fs-lg);line-height:var(--lh-prose);color:var(--slate);font-weight:var(--fw-prose)}
body.clay .blog-post__body h2{
  font-size:var(--fs-7xl);margin:var(--sp-9) 0 var(--sp-4);color:var(--ink);
  line-height:var(--lh-heading)}
body.clay .blog-post__body h3{
  font-size:var(--fs-3xl);margin:var(--sp-7) 0 var(--sp-3);color:var(--ink);
  line-height:var(--lh-title)}
body.clay .blog-post__body p{margin:0 0 var(--sp-5)}
body.clay .blog-post__body ul,body.clay .blog-post__body ol{
  margin:0 0 var(--sp-5);padding-left:var(--sp-6)}
body.clay .blog-post__body li{margin-bottom:var(--sp-2)}
/* `:not(.btn)` again — posts embed the CTA button inside the article body, and
   a bare descendant rule repainted its label teal-on-orange (1.32:1) on all 14. */
body.clay .blog-post__body a:not(.btn){
  color:var(--teal);font-weight:var(--fw-bold);text-decoration:underline;
  text-underline-offset:var(--underline-offset)}
body.clay .blog-post__body strong{color:var(--ink);font-weight:var(--fw-black)}
body.clay .blog-post__body blockquote{
  margin:var(--pad-card-sm) 0;padding:var(--sp-5) var(--sp-6);background:var(--white);
  border:var(--border);border-radius:var(--radius-lg);box-shadow:0 var(--lip-md) 0 var(--sand);
  font-weight:var(--fw-body);color:var(--ink)}
body.clay .blog-post__body img{
  width:100%;height:auto;border:var(--border);border-radius:var(--radius-lg);
  margin:var(--pad-card-sm) 0}
body.clay .blog-post__body table{
  width:100%;border-collapse:collapse;margin:var(--pad-card-sm) 0;font-size:var(--fs-md)}
body.clay .blog-post__body th,body.clay .blog-post__body td{
  border:var(--border-thin);padding:var(--sp-3) var(--sp-3);text-align:left}
body.clay .blog-post__body th{background:var(--star);font-family:var(--dis);color:var(--ink)}

body.clay .blog-post__sources{
  max-width:var(--measure-prose);margin:var(--pad-card) auto 0;padding:var(--sp-5) var(--sp-6);
  background:var(--white);border:var(--border);border-radius:var(--radius-lg);
  box-shadow:0 var(--lip-md) 0 var(--sand);font-size:var(--fs-md);color:var(--slate);
  font-weight:var(--fw-body)}
body.clay .blog-post__sources a{color:var(--teal);font-weight:var(--fw-bold)}

body.clay .blog-post__cta-box{
  max-width:var(--measure-prose);margin:var(--sp-8) auto 0;padding:var(--pad-card);
  background:var(--deep);border:var(--border-thick);border-radius:var(--radius-2xl);
  box-shadow:0 var(--lip-xl) 0 var(--deep-2);text-align:center;color:#fff}
body.clay .blog-post__cta-eyebrow{
  display:inline-block;font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-xs);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--edge);
  background:var(--star);border:var(--border);border-radius:var(--radius-pill);
  padding:var(--sp-1) var(--sp-4);box-shadow:0 var(--lip-sm) 0 var(--star-lip);
  margin-bottom:var(--sp-4)}
/* Some posts nest this box inside .blog-post__body, where `.blog-post__body h3`
   (0,2,1) outranks a bare `.blog-post__cta-title` (0,2,0) and repainted the
   title ink-on-navy at 1.06:1. Scoping through the box wins in both placements. */
body.clay .blog-post__cta-box .blog-post__cta-title,
body.clay .blog-post__cta-box h2,body.clay .blog-post__cta-box h3{
  color:#fff;font-size:var(--fs-6xl);margin:0 0 var(--sp-5)}
/* The eyebrow is a <p> in some posts and a <span> in others; excluding it keeps
   the yellow pill's ink text instead of repainting it mist-on-yellow (1.31:1). */
body.clay .blog-post__cta-box p:not(.blog-post__cta-eyebrow){
  color:var(--mist);font-weight:var(--fw-body);margin:0 0 var(--sp-5)}
body.clay .blog-post__cta-box a:not(.btn){color:var(--teal-pop)}
body.clay .blog-post__cta-box strong{color:#fff}

/* --- share buttons ------------------------------------------------------- */
body.clay .blog-post__share{
  max-width:var(--measure-prose);margin:var(--pad-card) auto 0;display:flex;flex-wrap:wrap;
  gap:var(--sp-3);align-items:center}
body.clay .blog-post__share-label{
  font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-md);color:var(--ink)}
body.clay .share-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-width:var(--tap);min-height:var(--tap);padding:0 var(--sp-4);
  border-radius:var(--radius-md);cursor:pointer;background:var(--white);border:var(--border);
  box-shadow:var(--clay-sand);color:var(--ink);font-family:var(--dis);font-weight:var(--fw-bold);
  font-size:var(--fs-sm);text-decoration:none;transition:var(--press)}
body.clay .share-btn:hover{
  transform:translateY(var(--lip-press));box-shadow:0 var(--lip-press) 0 var(--sand)}
body.clay .share-btn svg{width:var(--sp-5);height:var(--sp-5);flex:none}

/* Fixed vertical rail (wide viewports — see the plain-theme rule in styles.css
   for why 1180px and why each slot is a fixed size). Clay keeps its own paint:
   white clay-pressed circles by default, brand colour fill only on hover. */
@media (min-width:1180px){
  body.clay .blog-post__share{
    position:fixed;top:50%;right:var(--sp-6);transform:translateY(-50%);
    flex-direction:column;flex-wrap:nowrap;align-items:flex-end;gap:var(--sp-3);
    max-width:none;margin:0}
  body.clay .blog-post__share-label{display:none}
  body.clay .share-btn{
    position:relative;width:3rem;height:3rem;min-width:0;min-height:0;padding:0;
    border-radius:50%;background:var(--white);color:var(--ink)}
  body.clay .share-btn:hover,body.clay .share-btn:focus-visible{
    transform:translateX(-2px);box-shadow:var(--clay-sand)}
  body.clay .share-btn--facebook:hover,body.clay .share-btn--facebook:focus-visible{
    background:#1877F2;border-color:#1877F2;color:#fff}
  body.clay .share-btn--messenger:hover,body.clay .share-btn--messenger:focus-visible{
    background:#0084FF;border-color:#0084FF;color:#fff}
  body.clay .share-btn--whatsapp:hover,body.clay .share-btn--whatsapp:focus-visible{
    background:#25D366;border-color:#25D366;color:#fff}
  body.clay .share-btn--twitter:hover,body.clay .share-btn--twitter:focus-visible{
    background:#000;border-color:#000;color:#fff}
  body.clay .share-btn--linkedin:hover,body.clay .share-btn--linkedin:focus-visible{
    background:#0A66C2;border-color:#0A66C2;color:#fff}
  body.clay .share-btn--email:hover,body.clay .share-btn--email:focus-visible{
    background:var(--teal);border-color:var(--teal);color:#fff}
  body.clay .share-btn--copy:hover,body.clay .share-btn--copy:focus-visible{
    background:var(--star);border-color:var(--star);color:var(--ink)}
  body.clay .share-btn__label{
    position:absolute;top:50%;right:calc(100% + var(--sp-3));
    transform:translateY(-50%) translateX(6px);display:inline-flex;align-items:center;
    height:2.25rem;padding:0 var(--sp-4);border-radius:var(--radius-pill);
    background:var(--white);border:var(--border);color:var(--ink);
    font-family:var(--dis);font-weight:var(--fw-bold);font-size:var(--fs-sm);
    white-space:nowrap;box-shadow:var(--clay-sand);opacity:0;visibility:hidden;
    pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility .15s}
  body.clay .share-btn:hover .share-btn__label,
  body.clay .share-btn:focus-visible .share-btn__label{
    opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
}

@media (max-width:620px){
  body.clay .blog-list-hero{padding:var(--control-sm) 0 var(--sp-7)}
  body.clay .blog-post__header{padding:var(--pad-card) 0 var(--sp-6)}
  body.clay .blog-post__cta-box{padding:var(--sp-6)}
  body.clay .blog-grid{grid-template-columns:1fr}
}

/* --- responsive ----------------------------------------------------------
   The gap and slab-padding overrides these rules used to carry now come from
   the --gap-col / --pad-slab re-declarations in the home-page responsive
   block above, and .cta-sec needs no padding override at all (--section-y). */
@media (max-width:980px){
  body.clay .two-col,body.clay .cta-inner{grid-template-columns:1fr}
  body.clay .steps{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  body.clay{--pad-slab:var(--sp-6)}
  body.clay .cta-inner{border-radius:var(--radius-xl)}
  body.clay .form-glass{padding:var(--pad-card-sm)}
  body.clay .steps{grid-template-columns:1fr}
}