/* Parent background is a naturally readable pastel landscape: no bleaching overlays. */
/* Parent and child public heroes use ONLY the clean transparent assets in GitHub.
   Never crop, clip or mask a reference JPG to extract a device or character.
   Shared public header/footer, body content, and authenticated pages are unchanged. */
.mockup-parent #main .parent-hero,
.mockup-child #main .child-hero {
  isolation:isolate;
  overflow:hidden;
}
.mockup-parent #main .parent-hero {
  background: #edf6e7 url('/assets/design/imagini/mainpage-hero/Pastel%20Storybook%20Meadow%20Panorama.png') center 62% / cover no-repeat;
}
.mockup-parent #main .parent-hero::before {
  background:none;
}
.mockup-parent #main .parent-hero .hero-copy {
  position:relative;
  z-index:3;
  max-width:620px;
}
.mockup-parent #main .parent-hero .parent-hero-stage {
  position:absolute;
  top:2px;
  right:calc(var(--hero-content-side) + 16px);
  bottom:0;
  width:min(46%, 620px);
  z-index:2;
  pointer-events:none;
}
.mockup-parent #main .parent-hero-stage img {
  position:absolute;
  display:block;
  height:auto;
  max-width:none;
  object-fit:contain;
  clip-path:none;
  mask-image:none;
  -webkit-mask-image:none;
}
.mockup-parent #main .parent-hero-stage .parent-hero-tablet-clean {
  top:1%;
  right:11%;
  height:96%;
  width:auto;
  transform:rotate(-4deg);
  transform-origin:center center;
  filter:drop-shadow(0 8px 7px rgba(40,40,40,.16));
}

/* Owner's red outline: move the tablet into the empty middle area
   between the parent copy and lion. Preserve its size, angle and asset.
   Desktop only: keep the existing tablet/mobile composition unchanged. */
@media (min-width:1200px) {
  .mockup-parent #main .parent-hero-stage .parent-hero-tablet-clean {
    left:-7.5%;
    right:auto;
  }
}
@media (min-width:901px) and (max-width:1199px) {
  .mockup-parent #main .parent-hero-stage .parent-hero-tablet-clean {
    left:1%;
    right:auto;
  }
}
.mockup-parent #main .parent-hero-stage .parent-hero-mascot-clean {
  right:0;
  bottom:-1%;
  height:50%;
  width:auto;
  filter:drop-shadow(0 4px 5px rgba(49,53,24,.12));
}
.mockup-child #main .child-hero {
  background:#e2f3ff url('/assets/mockups/countryside.webp') center 58% / cover no-repeat;
}
.mockup-child #main .child-hero::before {
  background:linear-gradient(90deg,rgba(225,242,254,.93) 0%,rgba(218,239,252,.77) 31%,rgba(226,245,255,.1) 70%);
}
.mockup-child #main .child-hero .hero-copy {position:relative;z-index:4;}
.mockup-child #main .child-hero-stage {
  position:absolute;
  z-index:2;
  top:0;
  right:calc(var(--hero-content-side) + 16px);
  bottom:0;
  width:min(49%, 620px);
  overflow:visible;
  pointer-events:none;
}
.mockup-child #main .child-hero-stage img {
  display:block;
  position:absolute;
  height:auto;
  max-width:none;
  object-fit:contain;
  clip-path:none;
  mask-image:none;
  -webkit-mask-image:none;
}
.mockup-child #main .child-hero-stage .child-scene-phone-clean {
  z-index:3;
  height:94%;
  width:auto;
  top:3%;
  right:16%;
  transform:none;
  filter:drop-shadow(0 9px 10px rgba(35,49,58,.2));
}
.mockup-child #main .child-hero-stage .child-scene-lion-clean {
  z-index:4;
  height:51%;
  width:auto;
  left:0;
  bottom:-1%;
}
.mockup-child #main .child-hero-stage .child-scene-rabbit-clean {
  z-index:5;
  height:29%;
  width:auto;
  left:27%;
  bottom:-1%;
}
.mockup-child #main .child-hero-stage .child-scene-owl-clean {
  z-index:5;
  height:27%;
  width:auto;
  right:0;
  top:10%;
}
.mockup-child #main .child-hero-sparkle{
  position:absolute;
  z-index:3;
  width:34px;
  height:auto;
  pointer-events:none;
  object-fit:contain;
}
.mockup-child #main .sparkle-one{left:calc(var(--hero-content-side) + 32px);top:7%;}
.mockup-child #main .sparkle-two{left:calc(var(--hero-content-side) + 12px);top:24%;width:21px;}
@media (min-width:641px) and (max-width:900px) {
  .mockup-parent #main .parent-hero .parent-hero-stage{width:46%;}
  .mockup-parent #main .parent-hero-stage .parent-hero-tablet-clean{right:10%;height:89%;}
  .mockup-parent #main .parent-hero-stage .parent-hero-mascot-clean{height:41%;}
  .mockup-child #main .child-hero-stage{width:49%;}
  .mockup-child #main .child-hero-stage .child-scene-phone-clean{right:9%;height:91%;top:5%;}
  .mockup-child #main .child-hero-stage .child-scene-lion-clean{height:48%;left:0;}
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean{height:27%;left:25%;}
  .mockup-child #main .child-hero-stage .child-scene-owl-clean{height:25%;right:0;top:9%;}
}
@media (max-width:640px) {
  .mockup-parent #main .parent-hero {
    padding:22px 19px 10px;
    background-position:center bottom;
  }
  .mockup-parent #main .parent-hero::before {
    background:none;
  }
  .mockup-parent #main .parent-hero .parent-hero-stage {
    position:relative;
    align-self:center;
    flex:none;
    top:auto;right:auto;bottom:auto;
    width:min(100%,420px);
    height:clamp(214px,65vw,300px);
    margin:6px auto 0;
  }
  .mockup-parent #main .parent-hero-stage .parent-hero-tablet-clean {height:94%;right:30%;top:0}
  .mockup-parent #main .parent-hero-stage .parent-hero-mascot-clean {height:59%;right:7%;bottom:0}
  .mockup-parent #main .parent-hero .hero-actions {margin-top:13px}
  .mockup-child #main .child-hero {
    padding:24px 19px 10px;
    background-position:center bottom;
  }
  .mockup-child #main .child-hero::before {
    background:linear-gradient(180deg,rgba(223,242,255,.96),rgba(223,242,255,.68) 53%,rgba(223,242,255,.1));
  }
  .mockup-child #main .child-hero .hero-copy{width:100%}
  .mockup-child #main .child-hero .hero-copy > p{margin-top:15px}
  .mockup-child #main .child-hero .hero-actions{margin-top:14px}
  .mockup-child #main .child-hero-stage{
    position:relative;
    align-self:center;
    flex:none;
    top:auto;right:auto;bottom:auto;
    width:min(100%,450px);
    height:clamp(218px,66vw,300px);
    margin:9px auto 0;
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean{height:96%;right:12%;top:2%}
  .mockup-child #main .child-hero-stage .child-scene-lion-clean{height:52%;left:1%}
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean{height:28%;left:29%}
  .mockup-child #main .child-hero-stage .child-scene-owl-clean{height:26%;top:7%;right:0}
  .mockup-child #main .sparkle-one{left:auto;right:15%;top:28px;width:24px}
  .mockup-child #main .sparkle-two{left:auto;right:5%;top:78px;width:17px}
}

/* Distinct parent-family CTA illustration (hero keeps the original lion). */
.mockup-parent #main .final-cta .parent-final-family {
  width:170px;
  height:190px;
  object-fit:contain;
  flex:0 0 auto;
  object-position:center bottom;
}
@media(max-width:640px) {
  .mockup-parent #main .final-cta .parent-final-family {
    width:105px;
    height:140px;
    max-width:30%;
  }
}

/* Layout parity with Mainpage (mainpage-home.css).
   Like the homepage, the hero escapes the 1440px content canvas, while
   the content, shared header and footer retain their own constrained widths.
   Do not swap or crop the already approved transparent hero art. */
:is(.mockup-parent,.mockup-child) .mockup-page {
  overflow:visible;
}
:is(.mockup-parent,.mockup-child) #main > .hero {
  --hero-content-side:max(48px, calc(50vw - 640px));
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding-left:max(4.5vw, calc(50vw - 656px));
  background-size:cover;
  background-repeat:no-repeat;
}

/* Apply Mainpage's final-CTA dimensions and illustration sizing on desktop.
   Parent/child keep their distinct copy, colors and clean assets. */
:is(.mockup-parent,.mockup-child) #main > .final-cta {
  height:254px;
  min-height:254px;
  overflow:hidden;
}
:is(.mockup-parent,.mockup-child) #main > .final-cta .final-mascot {
  width:auto;
  height:218px;
  max-width:min(44%, 28vw);
  object-fit:contain;
  object-position:center bottom;
  flex-shrink:1;
  transform:translateY(15px);
  animation:none;
}
@media (min-width:641px) and (max-width:900px) {
  :is(.mockup-parent,.mockup-child) #main > .final-cta .final-mascot {
    max-width:31%;
  }
}
@media (max-width:640px) {
  /* Exact Mainpage two-column rules: no image stacked above or over text. */
  :is(.mockup-parent,.mockup-child) #main > .final-cta {
    display:grid;
    grid-template-columns:minmax(0,67%) minmax(0,33%);
    align-items:stretch;
    column-gap:0;
    width:calc(100% - 20px);
    max-width:calc(100vw - 20px);
    height:auto;
    min-height:0;
    margin:28px auto 12px;
    padding:16px 18px 18px;
    border-radius:27px;
    box-sizing:border-box;
    overflow:hidden;
  }
  :is(.mockup-parent,.mockup-child) #main > .final-cta > div {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    grid-column:1;
    min-width:0;
    max-width:100%;
    position:relative;
    z-index:2;
  }
  :is(.mockup-parent,.mockup-child) #main > .final-cta h2 {
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    font-size:clamp(21px,5.5vw,25px);
    line-height:1.14;
    letter-spacing:-.35px;
    white-space:normal;
    overflow-wrap:break-word;
    text-wrap:balance;
  }
  :is(.mockup-parent,.mockup-child) #main > .final-cta p {
    box-sizing:border-box;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:10px 0 0;
    font-size:clamp(13px,3.4vw,15px);
    line-height:1.38;
    white-space:normal;
    overflow-wrap:break-word;
  }
  :is(.mockup-parent,.mockup-child) #main > .final-cta .action {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:46px;
    margin:13px 0 0;
    padding:8px 6px;
    gap:6px;
    font-size:clamp(14px,3.65vw,16px);
    line-height:1.15;
    white-space:normal;
    overflow-wrap:break-word;
    text-align:center;
  }
  :is(.mockup-parent,.mockup-child) #main > .final-cta .action .ui-icon {
    width:18px;
    height:18px;
    flex:none;
  }
  :is(.mockup-parent,.mockup-child) #main > .final-cta .final-mascot {
    grid-column:2;
    grid-row:1;
    position:relative;
    inset:auto;
    z-index:1;
    display:block;
    justify-self:stretch;
    align-self:stretch;
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-width:0;
    max-width:100%;
    max-height:none;
    object-fit:contain;
    object-position:right bottom;
    transform:none;
    animation:none;
    pointer-events:none;
  }
}
@media (max-width:380px) {
  :is(.mockup-parent,.mockup-child) #main > .final-cta {
    grid-template-columns:minmax(0,66%) minmax(0,34%);
    padding:15px 14px 16px;
  }
  :is(.mockup-parent,.mockup-child) #main > .final-cta h2 {
    font-size:21px;
  }
  :is(.mockup-parent,.mockup-child) #main > .final-cta .action {
    font-size:13px;
  }
}

/* Align all transparent hero artwork with the SAME centered content canvas
   used by .content-width: 1280px max, 24px tablet, 16px phone.
   The photographic hero backgrounds remain full-bleed. */
@media (min-width:641px) and (max-width:900px) {
  :is(.mockup-parent,.mockup-child) #main > .hero {
    --hero-content-side:24px;
  }
}
@media (max-width:640px) {
  :is(.mockup-parent,.mockup-child) #main > .hero {
    --hero-content-side:16px;
  }
}

/* Child hero typography and CTA align with the approved 2026-11-02 mockup.
   Only the left-hand copy is touched; artwork and shared header/footer stay intact. */
@media (min-width:1200px) {
  .mockup-child #main .child-hero .hero-copy {
    margin-left:clamp(56px,4.55vw,72px);
    width:46%;
  }
  .mockup-child #main .child-hero .hero-copy h1 {
    font-size:120px;
    line-height:.74;
    letter-spacing:-1.5px;
    margin-top:6px;
    font-weight:800;
  }
  .mockup-child #main .child-hero .child-first-line {margin-left:34px;}
  .mockup-child #main .child-hero .hero-copy > p {
    font-size:20.5px;
    line-height:1.32;
    margin-top:18px;
  }
  .mockup-child #main .child-hero .hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:16px;
    margin-top:15px;
  }
  .mockup-child #main .child-hero .hero-actions .action {
    min-height:47px;
    padding:8px 20px;
    font-family:'Baloo 2','Roboto',sans-serif;
    font-size:19px;
    font-weight:700;
    line-height:1.15;
    border-radius:999px;
  }
  .mockup-child #main .child-hero .hero-actions .action:not(.white) {
    background:linear-gradient(135deg,#ff9c08,#ff7909);
    box-shadow:0 5px 10px rgba(212,109,25,.18);
  }
  .mockup-child #main .child-hero .hero-actions .action:not(.white) .ui-icon {
    width:25px;
    height:25px;
  }
  .mockup-child #main .child-hero .hero-actions .action.white {
    background:#fffdf8;
    border:1px solid #efc994;
    color:#272529;
    padding-inline:18px;
    font-family:'Baloo 2','Roboto',sans-serif;
    font-size:16px;
    font-weight:700;
  }
  .mockup-child #main .child-hero .hero-actions .action.white .ui-icon {
    width:22px;
    height:22px;
    color:#b98b2d;
  }
}
@media (min-width:901px) and (max-width:1199px) {
  .mockup-child #main .child-hero .hero-copy {margin-left:clamp(12px,2vw,24px);}
  .mockup-child #main .child-hero .hero-actions .action {min-height:43px;}
}

/* Owner's child-hero mockup: genuine letter-by-letter circular baselines,
   not a rotation of a rectangular text block. Scope: child hero only. */
.mockup-child #main .child-hero .child-arc-line {
  display:block;
  width:max-content;
  max-width:none;
  white-space:nowrap;
  line-height:.84;
}
.mockup-child #main .child-hero .child-arc-char {
  display:inline-block;
  white-space:pre;
  transform:translateY(var(--arc-y,0em)) rotate(var(--arc-r,0deg));
  transform-origin:50% 84%;
  backface-visibility:hidden;
}
.mockup-child #main .child-hero .child-arc-subtitle-line {
  display:block;
  width:max-content;
  max-width:none;
  white-space:nowrap;
}
.mockup-child #main .child-hero .child-arc-subtitle-line strong {
  color:var(--purple-700);
  font-weight:800;
}
.mockup-child #main .child-hero .hero-actions .action:first-child .ui-icon {
  fill:#fff;
  stroke:#fff;
}
.mockup-child #main .child-hero .hero-actions .action.white {
  border:2px solid #ecc493;
  box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #f6dcb1,0 3px 8px rgba(80,57,29,.13);
}
.mockup-child #main .child-hero-stage .child-scene-phone-clean {
  transform:rotate(10deg);
  transform-origin:50% 90%;
}
@media(min-width:1200px) {
  .mockup-child #main .child-hero .child-arc-line {line-height:.84;}
  .mockup-child #main .child-hero .hero-copy > .child-arc-subtitle {margin-top:18px;}
}
@media(max-width:640px) {
  .mockup-child #main .child-hero .hero-copy h1 {
    font-size:clamp(53px,13vw,75px);
    line-height:.88;
  }
  .mockup-child #main .child-hero .child-arc-line {line-height:.96;}
  .mockup-child #main .child-hero .child-first-line {margin-left:14px;}
  .mockup-child #main .child-hero .child-arc-subtitle {
    font-size:clamp(13px,3.5vw,17px);
  }
  .mockup-child #main .child-hero .child-arc-subtitle-line {
    max-width:100%;
    white-space:normal;
  }
  .mockup-child #main .child-hero .child-arc-subtitle-line .child-arc-char {
    transform:none;
  }
}

/* Child hero responsive composition — 2026-11-02.
   431–640px: use the upper-right void for the phone and owl; ground the
   mascots below the CTA. <=430px: keep art in normal flow with a safe
   bottom inset. Neither layout crops the approved transparent PNGs. */
@media (min-width:431px) and (max-width:640px) {
  .mockup-child #main > .child-hero {
    position:relative;
    display:block;
    box-sizing:border-box;
    height:auto;
    min-height:clamp(410px,90vw,485px);
    padding:23px 18px 28px;
    background-position:center bottom;
  }
  .mockup-child #main .child-hero .hero-copy {
    position:relative;
    z-index:4;
    width:60%;
    max-width:none;
    margin:0;
  }
  .mockup-child #main .child-hero .hero-copy h1 {
    font-size:clamp(48px,10.5vw,66px);
    line-height:.92;
    margin:5px 0 0;
  }
  .mockup-child #main .child-hero .child-arc-line {line-height:.98;}
  .mockup-child #main .child-hero .child-first-line {margin-left:12px;}
  .mockup-child #main .child-hero .hero-copy > .child-arc-subtitle {
    width:max-content;
    max-width:100%;
    margin-top:17px;
    font-size:clamp(13px,3.3vw,17px);
    line-height:1.37;
  }
  .mockup-child #main .child-hero .hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    width:max-content;
    max-width:100%;
    gap:7px;
    margin-top:16px;
  }
  .mockup-child #main .child-hero .hero-actions .action {
    min-height:38px;
    padding:7px 11px;
    gap:5px;
    font-size:clamp(12px,2.65vw,15px);
  }
  .mockup-child #main .child-hero .hero-actions .action.white {
    padding-inline:10px;
    font-size:clamp(11px,2.45vw,14px);
  }
  .mockup-child #main .child-hero .hero-actions .ui-icon {
    width:18px;
    height:18px;
  }
  .mockup-child #main .child-hero-stage {
    position:absolute;
    z-index:3;
    top:clamp(58px,13vw,70px);
    right:clamp(26px,5vw,38px);
    bottom:auto;
    left:auto;
    flex:none;
    align-self:auto;
    width:clamp(208px,45vw,288px);
    height:clamp(268px,66vw,360px);
    margin:0;
    overflow:visible;
    pointer-events:none;
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean {
    height:85%;
    width:auto;
    top:9%;
    right:12%;
    left:auto;
    transform:rotate(10deg);
    transform-origin:50% 90%;
  }
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {
    height:47%;
    width:auto;
    left:-88%;
    right:auto;
    bottom:-6%;
  }
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {
    height:27%;
    width:auto;
    left:-20%;
    right:auto;
    bottom:-6%;
  }
  .mockup-child #main .child-hero-stage .child-scene-owl-clean {
    height:22%;
    width:auto;
    top:-6%;
    right:42%;
  }
  .mockup-child #main .sparkle-one {left:auto;right:18%;top:17px;width:22px;}
  .mockup-child #main .sparkle-two {left:auto;right:4%;top:62px;width:16px;}
}
@media (max-width:430px) {
  .mockup-child #main > .child-hero {
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:0;
    padding:22px 17px 25px;
    background-position:center bottom;
  }
  .mockup-child #main .child-hero .hero-copy {
    width:100%;
    margin:0;
    padding:0;
  }
  .mockup-child #main .child-hero .hero-copy h1 {
    font-size:clamp(46px,12vw,56px);
    line-height:.92;
    margin-top:5px;
  }
  .mockup-child #main .child-hero .child-arc-line {line-height:.99;}
  .mockup-child #main .child-hero .child-first-line {margin-left:12px;}
  .mockup-child #main .child-hero .hero-copy > .child-arc-subtitle {
    max-width:100%;
    margin-top:15px;
    font-size:clamp(12px,3.65vw,15px);
    line-height:1.45;
  }
  .mockup-child #main .child-hero .hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
  }
  .mockup-child #main .child-hero .hero-actions .action {
    min-height:39px;
    padding:7px 11px;
    gap:6px;
    font-size:clamp(12px,3.55vw,15px);
  }
  .mockup-child #main .child-hero .hero-actions .action.white {
    font-size:clamp(11px,3.2vw,13px);
    padding-inline:10px;
  }
  .mockup-child #main .child-hero .hero-actions .ui-icon {
    width:18px;
    height:18px;
  }
  .mockup-child #main .child-hero-stage {
    position:relative;
    z-index:3;
    align-self:center;
    flex:none;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:min(100%,400px);
    height:clamp(235px,68vw,293px);
    margin:10px auto 0;
    overflow:visible;
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean {
    height:80%;
    width:auto;
    top:9%;
    right:12%;
    left:auto;
    transform:rotate(10deg);
    transform-origin:50% 90%;
  }
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {
    height:45%;
    width:auto;
    left:-2%;
    bottom:4%;
  }
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {
    height:25%;
    width:auto;
    left:30%;
    bottom:4%;
  }
  .mockup-child #main .child-hero-stage .child-scene-owl-clean {
    height:21%;
    width:auto;
    top:-2%;
    right:25%;
  }
  .mockup-child #main .sparkle-one {left:auto;right:16%;top:21px;width:19px;}
  .mockup-child #main .sparkle-two {left:auto;right:5%;top:65px;width:15px;}
}
/* At all small widths the next section must never cover the feet or the
   rotated bottom corner of the phone. Keep the meadow visually continuous. */
@media (max-width:640px) {
  .mockup-child #main > .worlds {
    margin-top:0;
  }
}
/* At intermediate tablet widths make room for the clockwise phone tilt
   and the characters without disturbing the desktop two-column layout. */
@media (min-width:641px) and (max-width:900px) {
  .mockup-child #main > .child-hero {
    height:clamp(370px,49vw,425px);
    padding-bottom:26px;
  }
  .mockup-child #main .child-hero-stage {
    top:14px;
    bottom:30px;
    height:auto;
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean {
    top:1%;
    height:84%;
    right:6%;
  }
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {
    height:37%;
    bottom:0;
    left:-4%;
  }
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {
    height:23%;
    bottom:0;
    left:23%;
  }
}

/* Child page lower sections — readable vertical rhythm with uncropped art.
   Scope intentionally excludes parent, homepage, shared shell and footer. */
.mockup-child #main {
  --child-section-gap:clamp(24px,2.6vw,38px);
}
.mockup-child #main > .worlds {
  margin-top:0;
  padding-top:clamp(18px,2vw,26px);
  padding-bottom:0;
}
.mockup-child #main > .worlds .section-heading {
  margin-bottom:clamp(12px,1.3vw,18px);
  row-gap:7px;
}
.mockup-child #main > .worlds .world-grid {
  gap:clamp(12px,1.2vw,18px);
  align-items:stretch;
}
.mockup-child #main > .worlds .world-card {
  height:auto;
  min-height:clamp(158px,12.7vw,185px);
}
.mockup-child #main > .worlds .world-content {
  height:100%;
  min-height:inherit;
  padding:clamp(11px,1.15vw,16px);
  gap:4px;
}
.mockup-child #main > .worlds .world-content p {
  line-height:1.35;
}
.mockup-child #main > .worlds .world-meta {
  margin-top:auto;
  padding-top:12px;
  gap:7px;
}
.mockup-child #main > .journey {
  margin-top:var(--child-section-gap);
  padding-top:0;
}
.mockup-child #main > .journey .section-heading {
  margin-bottom:16px;
  row-gap:8px;
}
.mockup-child #main > .journey .journey-grid {
  display:grid;
  grid-template-columns:minmax(145px,190px) minmax(0,1fr) minmax(185px,215px);
  align-items:center;
  column-gap:clamp(16px,2vw,28px);
  row-gap:20px;
  min-height:240px;
}
.mockup-child #main > .journey .journey-phone-image {
  display:block;
  box-sizing:border-box;
  width:clamp(130px,12vw,170px);
  max-width:100%;
  height:auto;
  max-height:235px;
  object-fit:contain;
  object-position:center;
  justify-self:center;
  align-self:center;
  filter:drop-shadow(0 7px 9px rgba(31,39,51,.13));
}
.mockup-child #main > .journey .journey-grid ol {
  min-width:0;
  align-items:start;
  gap:clamp(10px,1.4vw,20px);
}
.mockup-child #main > .journey .journey-grid li {
  min-width:0;
}
.mockup-child #main > .journey .journey-note {
  min-width:0;
  min-height:110px;
  padding:14px;
}
.mockup-child #main > .activities {
  position:relative;
  box-sizing:border-box;
  margin-top:var(--child-section-gap);
  margin-bottom:clamp(24px,3vw,40px);
  padding:clamp(16px,1.7vw,24px);
  border-radius:24px;
  background:#fffdf8;
}
.mockup-child #main > .activities::before {
  inset:0;
  z-index:0;
  background:#fffdf8;
  border:1px solid #e2e8d9;
  border-radius:24px;
}
.mockup-child #main > .activities > .section-heading,
.mockup-child #main > .activities > .activity-grid {
  position:relative;
  z-index:1;
}
.mockup-child #main > .activities .section-heading {
  margin-bottom:clamp(12px,1.35vw,18px);
  row-gap:6px;
}
.mockup-child #main > .activities .activity-grid {
  display:grid;
  gap:clamp(12px,1.2vw,18px);
  align-items:stretch;
}
.mockup-child #main > .activities .activity-card {
  box-sizing:border-box;
  display:flex;
  align-items:center;
  flex-direction:row;
  gap:clamp(8px,1vw,13px);
  min-width:0;
  min-height:clamp(135px,11.6vw,165px);
  height:auto;
  padding:clamp(10px,1.1vw,15px);
}
.mockup-child #main > .activities .activity-card .activity-art {
  width:clamp(48px,5.4vw,70px);
  flex:none;
}
.mockup-child #main > .activities .activity-card > div {
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:5px;
}
.mockup-child #main > .activities .activity-card h3 {
  margin:0;
  line-height:1.16;
}
.mockup-child #main > .activities .activity-card p {
  line-height:1.35;
}
.mockup-child #main > .activities .activity-card a {
  margin-top:8px;
  min-height:30px;
  max-width:100%;
  white-space:normal;
  line-height:1.2;
}
@media (min-width:641px) and (max-width:1000px) {
  .mockup-child #main > .worlds .world-grid,
  .mockup-child #main > .activities .activity-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .mockup-child #main > .journey .journey-grid {
    grid-template-columns:minmax(130px,170px) minmax(0,1fr);
    min-height:0;
  }
  .mockup-child #main > .journey .journey-note {
    grid-column:1/-1;
    justify-self:center;
    max-width:560px;
  }
  .mockup-child #main > .activities .activity-card {
    min-height:132px;
  }
}
@media (max-width:640px) {
  .mockup-child #main {--child-section-gap:24px;}
  .mockup-child #main > .worlds {margin-top:0;padding-top:18px;}
  .mockup-child #main > .worlds .world-card {min-height:196px;}
  .mockup-child #main > .worlds .world-content {padding:12px 10px;}
  .mockup-child #main > .journey .journey-grid {
    grid-template-columns:minmax(0,1fr);
    gap:18px;
    min-height:0;
  }
  .mockup-child #main > .journey .journey-phone-image {
    width:clamp(125px,37vw,172px);
    height:auto;
    max-height:245px;
    justify-self:center;
  }
  .mockup-child #main > .journey .journey-grid ol {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 16px;
    padding:5px 7px 0;
  }
  .mockup-child #main > .journey .journey-note {
    grid-column:auto;
    justify-self:stretch;
    min-height:0;
    max-width:none;
    margin:0;
  }
  .mockup-child #main > .activities {
    padding:18px 13px 20px;
    margin-top:24px;
    margin-bottom:28px;
    border-radius:22px;
  }
  .mockup-child #main > .activities::before {border-radius:22px;}
  .mockup-child #main > .activities .activity-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .mockup-child #main > .activities .activity-card {
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    min-height:205px;
    padding:13px;
  }
  .mockup-child #main > .activities .activity-card .activity-art {
    width:55px;
  }
}
@media (max-width:480px) {
  .mockup-child #main > .activities .activity-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .mockup-child #main > .activities .activity-card {
    flex-direction:row;
    align-items:center;
    min-height:132px;
    gap:13px;
  }
  .mockup-child #main > .activities .activity-card .activity-art {width:62px;}
}

/* Child page fidelity pass v13: vivid scene, organic meadow seam and
   child-readable controls. Restricted to the public child page. */
.mockup-child #main > .child-hero::before {
  background:none !important; /* previous fog layer washed out the landscape */
}
.mockup-child #main > .worlds {
  position:relative;
  isolation:isolate;
  background:#f4fae6;
}
.mockup-child #main > .worlds::before {
  content:"";
  position:absolute;
  inset:auto;
  left:calc(50% - 50vw);
  right:auto;
  top:-33px;
  bottom:auto;
  width:100vw;
  height:51px;
  z-index:0;
  pointer-events:none;
  border:0;
  border-radius:0;
  clip-path:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2037%20C94%2031%20152%205%20270%2020%20C379%2035%20437%207%20553%2020%20C667%2034%20737%208%20871%2021%20C1011%2035%201087%205%201225%2019%20C1320%2030%201385%2010%201440%2022%20L1440%2064%20L0%2064Z%22%20fill%3D%22%23f4fae6%22%2F%3E%3C%2Fsvg%3E") center top / 100% 100% no-repeat;
}
.mockup-child #main > .worlds > .section-heading,
.mockup-child #main > .worlds > .world-grid {
  position:relative;
  z-index:1;
}
.mockup-child #main > .worlds .section-heading h2,
.mockup-child #main > .journey .section-heading h2,
.mockup-child #main > .activities .section-heading h2 {
  font-size:clamp(26px,2.2vw,34px);
  line-height:1.15;
}
.mockup-child #main > .worlds .section-heading p,
.mockup-child #main > .activities .section-heading p {
  font-size:clamp(14px,1.04vw,16px);
  line-height:1.4;
}
.mockup-child #main > .worlds .section-heading > a,
.mockup-child #main > .journey .section-heading > a {
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.35;
}
.mockup-child #main > .worlds .world-card {
  min-height:clamp(185px,14.4vw,218px);
}
.mockup-child #main > .worlds .world-content {
  padding:clamp(12px,1.15vw,16px);
  gap:7px;
}
.mockup-child #main > .worlds .world-content h3 {
  font-size:clamp(18px,1.46vw,23px);
  line-height:1.14;
  margin:0;
  max-width:none;
}
.mockup-child #main > .worlds .world-content p {
  font-size:clamp(13px,1.04vw,15px);
  line-height:1.38;
  max-width:min(97%,250px);
}
.mockup-child #main > .worlds .world-meta {
  padding-top:10px;
  flex-wrap:wrap;
  gap:8px;
}
.mockup-child #main > .worlds .world-meta > span {
  font:700 clamp(12px,.96vw,14px)/1.25 'Baloo 2',sans-serif;
  padding:5px 10px;
  white-space:nowrap;
}
.mockup-child #main > .worlds .world-meta > button {
  font:700 clamp(13px,1.02vw,15px)/1.2 'Baloo 2',sans-serif;
  min-height:34px;
  padding:7px 12px;
  white-space:nowrap;
}
.mockup-child #main > .worlds .world-meta .ui-icon {
  width:17px;
  height:17px;
}
/* Second hero uses a unique landscape TABLET scene. No reused portrait phone. */
.mockup-child #main > .journey .journey-grid {
  grid-template-columns:minmax(210px,255px) minmax(0,1fr) minmax(190px,220px);
  column-gap:clamp(14px,2vw,26px);
  min-height:240px;
}
.mockup-child #main > .journey .journey-tablet {
  position:relative;
  box-sizing:border-box;
  display:block;
  width:min(100%,235px);
  aspect-ratio:1.52;
  margin:10px auto;
  padding:10px;
  border:5px solid #262b34;
  border-radius:22px;
  background:#232932;
  box-shadow:inset 0 0 0 1px #707988,0 13px 18px rgba(36,39,46,.24);
  transform:rotate(-8deg);
  transform-origin:center;
}
.mockup-child #main > .journey .journey-tablet-screen {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:11px;
  background:#98d9fa;
}
.mockup-child #main > .journey .journey-tablet-toolbar {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:4px;
  min-height:24px;
  padding:4px 7px;
  background:#fbfefff2;
  font:800 10px/1 'Baloo 2',sans-serif;
  color:#263447;
  white-space:nowrap;
}
.mockup-child #main > .journey .journey-tablet-toolbar span:last-child {color:#e49a13;}
.mockup-child #main > .journey .journey-tablet-land {
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  background-image:linear-gradient(180deg,#d8fbff23,#8ad87021),url('/assets/mockups/worlds-atlas.webp');
  background-size:100% 100%,200% 200%;
  background-position:center,100% 0%;
}
.mockup-child #main > .journey .journey-tablet-route {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  filter:drop-shadow(0 1px 1px #0007);
}
.mockup-child #main > .journey .journey-tablet-pin {
  position:absolute;
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border:2px solid white;
  border-radius:50%;
  color:white;
  font:800 12px/1 'Baloo 2',sans-serif;
  box-shadow:0 2px 4px #0008;
}
.mockup-child #main > .journey .journey-tablet-pin.p1{left:6%;bottom:9%;background:#43a443}
.mockup-child #main > .journey .journey-tablet-pin.p2{left:37%;top:20%;background:#913cdd}
.mockup-child #main > .journey .journey-tablet-pin.p3{left:61%;bottom:23%;background:#fa8c1c}
.mockup-child #main > .journey .journey-tablet-pin.p4{right:4%;top:8%;background:#7b45bc}
.mockup-child #main > .journey .journey-tablet-camera {
  position:absolute;
  top:50%;
  right:2px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#657184;
}
/* Larger readable journey labels and clear, high contrast arrows. */
.mockup-child #main > .journey .journey-grid ol {
  gap:clamp(12px,1.35vw,20px);
}
.mockup-child #main > .journey .journey-grid .step-art {
  width:clamp(60px,5.2vw,75px);
  margin-bottom:8px;
}
.mockup-child #main > .journey .journey-grid li h3 {
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.3;
  min-height:0;
  white-space:normal;
}
.mockup-child #main > .journey .journey-grid li p {
  font-size:clamp(13px,1vw,15px);
  line-height:1.38;
  margin-top:7px;
}
.mockup-child #main > .journey .journey-grid li:not(:last-child)::after {
  content:"➜";
  top:15px;
  right:-26px;
  font:900 30px/1 system-ui,sans-serif;
  color:#7a7790;
  text-shadow:0 1px 1px #fff;
}
.mockup-child #main > .journey .journey-note p {
  font-size:clamp(13px,1.05vw,16px);
  line-height:1.42;
}
.mockup-child #main > .activities .activity-card h3 {
  font-size:clamp(17px,1.36vw,21px);
  line-height:1.17;
}
.mockup-child #main > .activities .activity-card p {
  font-size:clamp(13px,1vw,15px);
  line-height:1.38;
}
.mockup-child #main > .activities .activity-card a {
  font-size:clamp(13px,1vw,15px);
  min-height:34px;
  padding:6px 11px;
}
@media (min-width:641px) and (max-width:1150px) {
  .mockup-child #main > .journey .journey-grid {
    grid-template-columns:minmax(165px,210px) minmax(0,1fr);
  }
  .mockup-child #main > .journey .journey-note {
    grid-column:1/-1;
    justify-self:center;
    max-width:550px;
  }
  .mockup-child #main > .worlds .world-card {min-height:205px;}
}
@media (max-width:640px) {
  .mockup-child #main > .worlds::before {top:-26px;height:44px;}
  .mockup-child #main > .worlds .world-card {min-height:235px;}
  .mockup-child #main > .worlds .world-content p {
    font-size:13px;
    max-width:100%;
  }
  .mockup-child #main > .worlds .world-content h3 {font-size:clamp(18px,4.6vw,21px);}
  .mockup-child #main > .worlds .world-meta > button {min-height:34px;font-size:13px;}
  .mockup-child #main > .journey .journey-grid {grid-template-columns:minmax(0,1fr);min-height:0;}
  .mockup-child #main > .journey .journey-tablet {
    width:min(66vw,235px);
    margin:15px auto;
  }
  .mockup-child #main > .journey .journey-grid li:not(:last-child)::after {display:none;}
  .mockup-child #main > .journey .journey-grid li h3{font-size:15px;}
  .mockup-child #main > .journey .journey-grid li p{font-size:13px;}
  .mockup-child #main > .activities .activity-card h3 {font-size:18px;}
  .mockup-child #main > .activities .activity-card p {font-size:14px;}
  .mockup-child #main > .activities .activity-card a {font-size:14px;}
}
@media (max-width:375px) {
  .mockup-child #main > .worlds .world-card {min-height:258px;}
}

/* 2026-11-02 v14 — Child hero safe-area geometry and focused world copy.
   All illustration heights are relative to a stage fully contained in the
   hero. Desktop height grows on the historically clipped 901–1150px range. */
@media (min-width:901px) {
  .mockup-child #main > .child-hero {
    box-sizing:border-box;
    height:clamp(390px,36vw,525px);
    padding-top:clamp(39px,3.45vw,53px);
    padding-bottom:32px;
  }
  .mockup-child #main .child-hero .hero-copy {
    margin-left:clamp(70px,5.75vw,88px);
  }
  .mockup-child #main .child-hero .hero-copy h1 {
    margin-top:10px;
  }
  .mockup-child #main .child-hero-stage {
    top:0;
    bottom:0;
    height:auto;
    width:min(49%,620px);
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean {
    top:9%;
    right:11%;
    bottom:auto;
    height:76%;
    width:auto;
    transform:rotate(10deg);
    transform-origin:50% 86%;
  }
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {
    height:39%;
    bottom:9%;
    left:0;
    width:auto;
  }
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {
    height:24%;
    bottom:9%;
    left:29%;
    width:auto;
  }
  .mockup-child #main .child-hero-stage .child-scene-owl-clean {
    height:20%;
    top:8%;
    right:6%;
    width:auto;
  }
}
@media (min-width:901px) and (max-width:1199px) {
  /* The old 324px hero cut off the large device and mascot feet. */
  .mockup-child #main > .child-hero {
    height:clamp(390px,36vw,430px);
  }
  .mockup-child #main .child-hero .hero-copy {
    margin-left:clamp(24px,3vw,35px);
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean {height:74%;}
}
@media (min-width:641px) and (max-width:900px) {
  .mockup-child #main > .child-hero {
    height:clamp(390px,49vw,445px);
    padding-top:clamp(27px,3.4vw,39px);
    padding-bottom:30px;
  }
  .mockup-child #main .child-hero .hero-copy {
    margin-left:clamp(12px,2vw,22px);
  }
  .mockup-child #main .child-hero-stage {
    top:0;
    bottom:0;
    height:auto;
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean {
    top:10%;
    height:73%;
    right:11%;
    transform:rotate(10deg);
    transform-origin:50% 86%;
  }
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {
    height:37%;
    bottom:9%;
    left:-4%;
  }
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {
    height:22%;
    bottom:9%;
    left:25%;
  }
  .mockup-child #main .child-hero-stage .child-scene-owl-clean {
    top:7%;
    height:19%;
    right:4%;
  }
}
@media (min-width:431px) and (max-width:640px) {
  .mockup-child #main > .child-hero {
    padding:30px 24px 29px;
    min-height:clamp(425px,91vw,505px);
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean {
    top:9%;
    height:81%;
    right:12%;
  }
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {
    height:43%;
    bottom:-1%;
  }
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {
    height:24%;
    bottom:0;
  }
}
@media (max-width:430px) {
  .mockup-child #main > .child-hero {
    padding:30px 22px 29px;
  }
  .mockup-child #main .child-hero-stage {
    height:clamp(245px,70vw,300px);
    margin-top:15px;
  }
  .mockup-child #main .child-hero-stage .child-scene-phone-clean {
    height:77%;
    top:9%;
  }
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {
    height:42%;
    bottom:7%;
  }
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {
    height:24%;
    bottom:7%;
  }
}

/* Child v15: text remains on the left, no extra panels; never break words. */
.mockup-child #main > .worlds .world-content {
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.mockup-child #main > .worlds .world-copy-zone {
  position:relative;
  flex:0 0 auto;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:52%;
  max-width:205px;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  gap:7px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
.mockup-child #main > .worlds .world-copy-zone :is(h3,p) {
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  white-space:normal;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  -webkit-hyphens:none;
  text-wrap:wrap;
}
.mockup-child #main > .worlds .world-copy-zone h3 {
  font-size:clamp(16px,1.22vw,20px);
  line-height:1.17;
}
.mockup-child #main > .worlds .world-copy-zone p {
  font-size:clamp(12px,.92vw,14px);
  line-height:1.39;
}
.mockup-child #main > .worlds .world-meta {
  width:100%;
  min-width:0;
}
.mockup-child #main > .worlds .world-card {
  min-height:clamp(218px,18.5vw,258px);
}
@media (min-width:641px) and (max-width:1150px) {
  .mockup-child #main > .worlds .world-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .mockup-child #main > .worlds .world-copy-zone {
    width:52%;
    max-width:none;
  }
  .mockup-child #main > .worlds .world-copy-zone h3 {font-size:18px;}
  .mockup-child #main > .worlds .world-copy-zone p {font-size:13px;}
  .mockup-child #main > .worlds .world-card {min-height:218px;}
}
@media (max-width:640px) {
  .mockup-child #main > .worlds .world-copy-zone {
    width:54%;
    max-width:none;
  }
  .mockup-child #main > .worlds .world-copy-zone h3 {font-size:18px;}
  .mockup-child #main > .worlds .world-copy-zone p {font-size:13px;}
  .mockup-child #main > .worlds .world-card {min-height:230px;}
}
@media (max-width:520px) {
  .mockup-child #main > .worlds .world-grid {
    grid-template-columns:minmax(0,1fr);
  }
  .mockup-child #main > .worlds .world-card {min-height:190px;}
  .mockup-child #main > .worlds .world-copy-zone {
    width:54%;
    max-width:225px;
  }
}
/* Source mascots contain transparent padding; ground their visible paws. */
@media (min-width:431px) and (max-width:640px) {
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {bottom:-10%;}
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {bottom:-9%;}
}
@media (max-width:430px) {
  .mockup-child #main .child-hero-stage .child-scene-lion-clean {bottom:-2%;}
  .mockup-child #main .child-hero-stage .child-scene-rabbit-clean {bottom:-2%;}
}


/* Parent hero + dashboard UX, 2026-11-02 v6.
   Only the Parent public page is affected: shared header, footer, Child and
   Homepage are untouched. Markup keeps the same login CTA and demo handlers. */
@media (min-width:901px) {
  .mockup-parent #main > .parent-hero {
    padding-top:clamp(16px,1.8vw,25px);
  }
  .mockup-parent #main > .parent-hero .hero-copy {
    margin-left:clamp(75px,8vw,114px);
    width:min(48%,560px);
    max-width:560px;
  }
  .mockup-parent #main > .parent-hero .hero-copy h1 {
    margin-top:0;
  }
  .mockup-parent #main > .parent-hero .hero-copy > p:not(.trustline) {
    max-width:100%;
    text-wrap:pretty;
  }
}
/* Single compact parent assurance: white-milk surface only around the words
   and existing shield; never a full-width translucent band. */
.mockup-parent #main > .parent-hero .hero-copy > .hero-badge {
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  justify-content:flex-start;
  box-sizing:border-box;
  width:max-content;
  max-width:100%;
  min-height:30px;
  padding:6px 10px;
  margin:11px 0 0;
  border:1px solid rgba(255,255,255,.82);
  border-radius:11px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  box-shadow:0 2px 9px rgba(45,40,53,.07);
  color:#351568;
  gap:6px;
  white-space:nowrap;
  font:700 13px/1.25 'Roboto Condensed',sans-serif;
  letter-spacing:0;
}
.mockup-parent #main > .parent-hero .hero-copy > .hero-badge .ui-icon {
  flex:0 0 17px;
  width:17px;
  height:17px;
}
@media (min-width:641px) and (max-width:900px) {
  .mockup-parent #main > .parent-hero {
    padding-top:19px;
    min-height:330px;
    height:auto;
    padding-bottom:30px;
  }
  .mockup-parent #main > .parent-hero .hero-copy {
    margin-left:clamp(25px,4vw,40px);
    width:51%;
  }
  .mockup-parent #main > .parent-hero .hero-copy h1 {
    margin-top:0;
    font-size:clamp(41px,5.7vw,49px);
  }
  .mockup-parent #main > .parent-hero .hero-copy > .hero-badge {
    font-size:12px;
  }
}
@media (max-width:640px) {
  .mockup-parent #main > .parent-hero {
    padding-top:22px;
  }
  .mockup-parent #main > .parent-hero .hero-copy {
    margin-left:clamp(5px,2vw,10px);
    width:calc(100% - 10px);
    max-width:none;
  }
  .mockup-parent #main > .parent-hero .hero-copy > .hero-badge {
    font-size:clamp(11px,2.9vw,12px);
    margin-top:10px;
    padding:6px 8px;
    gap:5px;
  }
}
/* Give the interactive preview the full width already used by feature cards
   directly beneath it; no empty lateral strips or artificial columns. */
.mockup-parent #main > .parent-dashboard-section {
  box-sizing:border-box;
}
.mockup-parent #main > .parent-dashboard-section > .dashboard-demo {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  min-width:0;
  margin-left:0;
  margin-right:0;
  grid-template-columns:clamp(145px,14vw,186px) minmax(0,1fr);
}
.mockup-parent #main > .parent-dashboard-section .dashboard-body {
  min-width:0;
}
@media (min-width:901px) {
  .mockup-parent #main > .parent-dashboard-section > .dashboard-demo {
    font-size:12px;
  }
  .mockup-parent #main > .parent-dashboard-section .dashboard-demo aside button {
    font-size:12px;
    min-height:29px;
  }
  .mockup-parent #main > .parent-dashboard-section .dashboard-heading p,
  .mockup-parent #main > .parent-dashboard-section .child-overview,
  .mockup-parent #main > .parent-dashboard-section .demo-bottom p,
  .mockup-parent #main > .parent-dashboard-section .demo-message {
    font-size:11px;
    line-height:1.36;
  }
  .mockup-parent #main > .parent-dashboard-section .demo-bottom h4 {
    font-size:13px;
  }
  .mockup-parent #main > .parent-dashboard-section .demo-disclaimer {
    left:clamp(155px,14vw,196px);
    font-size:11px;
  }
}
@media (min-width:641px) and (max-width:900px) {
  .mockup-parent #main > .parent-dashboard-section > .dashboard-demo {
    grid-template-columns:130px minmax(0,1fr);
  }
  .mockup-parent #main > .parent-dashboard-section .demo-disclaimer {
    left:140px;
  }
}
@media (max-width:640px) {
  .mockup-parent #main > .parent-dashboard-section > .dashboard-demo {
    grid-template-columns:minmax(0,1fr);
  }
  .mockup-parent #main > .parent-dashboard-section .demo-disclaimer {
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    font-size:11px;
  }
}
/* The actual transparent family illustration—not merely its container—
   is attached to the orange CTA's bottom edge at every breakpoint. */
.mockup-parent #main > .final-cta {
  position:relative;
  overflow:hidden;
}
.mockup-parent #main > .final-cta > .parent-final-family.final-mascot {
  position:absolute;
  inset:auto;
  bottom:0;
  right:clamp(24px,14%,184px);
  display:block;
  width:auto;
  height:min(100%,250px);
  max-width:36%;
  max-height:100%;
  margin:0;
  padding:0;
  object-fit:contain;
  object-position:center bottom;
  align-self:end;
  transform:none;
  animation:none;
  pointer-events:none;
}
@media (min-width:641px) and (max-width:900px) {
  .mockup-parent #main > .final-cta > .parent-final-family.final-mascot {
    right:clamp(24px,7%,65px);
    height:100%;
    max-width:39%;
  }
}
@media (max-width:640px) {
  .mockup-parent #main > .final-cta {
    padding-bottom:0;
  }
  .mockup-parent #main > .final-cta > .parent-final-family.final-mascot {
    bottom:0;
    right:0;
    width:auto;
    height:100%;
    max-width:34%;
    grid-column:2;
    grid-row:1;
    object-position:center bottom;
  }
}


/* Parent demo & small-screen CTA readability, 2026-11-02 v7.
   Companion art stays in its own grid column, never over stats or prose. */
@media (min-width:641px) {
 .mockup-parent #main .dashboard-demo .demo-child{
   display:grid;
   grid-template-columns:clamp(36px,3.8vw,48px) minmax(0,1fr) clamp(65px,8vw,96px);
   align-items:start;
   gap:clamp(7px,.8vw,12px);
   min-height:130px;
   padding:12px;
 }
 .mockup-parent #main .dashboard-demo .demo-child>.demo-avatar{
   grid-column:1;grid-row:1;width:100%;margin:0;
 }
 .mockup-parent #main .dashboard-demo .demo-child>.child-overview{
   grid-column:2;grid-row:1;align-self:stretch;min-width:0;
 }
 .mockup-parent #main .dashboard-demo .demo-child>.companion{
   grid-column:3;grid-row:1;position:relative;width:100%;min-width:0;
   min-height:110px;display:flex;align-self:stretch;
   flex-direction:column;align-items:center;justify-content:flex-end;
   padding:0;margin:0;gap:4px;
 }
 .mockup-parent #main .dashboard-demo .demo-child .companion>.reference-art,
 .mockup-parent #main .dashboard-demo .demo-child.demo-luca .companion>.reference-art{
   position:relative;inset:auto;width:min(90%,87px);max-width:100%;
   height:auto;min-width:0;margin:0;flex:none;
 }
 .mockup-parent #main .dashboard-demo .demo-child .companion>small{
   padding:0;margin:0;font-size:10px;line-height:1.15;text-align:center;
 }
 .mockup-parent #main .dashboard-demo .demo-child .companion>b{
   font-size:11px;line-height:1.15;font-weight:700;text-align:center;
 }
 .mockup-parent #main .dashboard-demo .demo-child .child-overview>strong{
   font-size:15px;line-height:1.23;
 }
 .mockup-parent #main .dashboard-demo .demo-child .child-overview>span:nth-child(2){
   font-size:12px;line-height:1.3;
 }
 .mockup-parent #main .dashboard-demo .demo-child .child-stat{
   display:flex;flex-wrap:wrap;gap:8px;font-size:11px;line-height:1.25;
   max-width:100%;padding-top:8px;
 }
 .mockup-parent #main .dashboard-demo .demo-child .child-stat b{
   font-size:12px;white-space:normal;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom{
   gap:10px;margin-top:12px;align-items:stretch;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom>section{
   min-width:0;padding:11px 12px;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom h4{
   font-size:14px;line-height:1.25;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom>section>p{
   display:flex;flex-wrap:wrap;white-space:normal;gap:5px;
   font-size:12px;line-height:1.4;overflow-wrap:normal;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom p>small{
   font-size:10px;display:inline;white-space:nowrap;
 }
 .mockup-parent #main .dashboard-demo .demo-message{font-size:12px;line-height:1.35;min-width:0;}
 .mockup-parent #main .dashboard-demo .demo-message small{font-size:11px;}
 .mockup-parent #main .dashboard-demo .demo-rhythm{min-width:0;}
 .mockup-parent #main .dashboard-demo .demo-rhythm strong{font-size:12px;line-height:1.4;}
 .mockup-parent #main .dashboard-demo .demo-rhythm small{font-size:11px;line-height:1.38;}
}
@media (min-width:641px) and (max-width:900px){
 .mockup-parent #main .dashboard-demo .demo-children{gap:9px;}
 .mockup-parent #main .dashboard-demo .demo-child{
   grid-template-columns:37px minmax(0,1fr) 65px;gap:6px;padding:9px;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom{grid-template-columns:repeat(2,minmax(0,1fr));}
 .mockup-parent #main .dashboard-demo .demo-bottom>section:last-child{grid-column:1/-1;}
}
@media (max-width:640px){
 .mockup-parent #main .dashboard-demo .demo-children{
   grid-template-columns:minmax(0,1fr);gap:12px;
 }
 .mockup-parent #main .dashboard-demo .demo-child{
   display:grid;grid-template-columns:38px minmax(0,1fr) 76px;
   gap:8px;align-items:start;min-height:124px;padding:10px;
 }
 .mockup-parent #main .dashboard-demo .demo-child>.demo-avatar{
   grid-column:1;grid-row:1;width:38px;align-self:start;
 }
 .mockup-parent #main .dashboard-demo .demo-child>.child-overview{
   grid-column:2;grid-row:1;min-height:0;
 }
 .mockup-parent #main .dashboard-demo .demo-child>.companion{
   grid-column:3;grid-row:1;position:relative;display:flex;
   flex-direction:column;align-items:center;justify-content:flex-end;
   width:100%;min-width:0;min-height:105px;gap:3px;
 }
 .mockup-parent #main .dashboard-demo .demo-child .companion>.reference-art,
 .mockup-parent #main .dashboard-demo .demo-child.demo-luca .companion>.reference-art{
   position:relative;inset:auto;width:min(100%,69px);height:auto;
   margin:0;
 }
 .mockup-parent #main .dashboard-demo .demo-child .companion>small{
   font-size:10px;line-height:1.15;padding:0;margin:0;text-align:center;
 }
 .mockup-parent #main .dashboard-demo .demo-child .companion>b{
   font-size:11px;text-align:center;
 }
 .mockup-parent #main .dashboard-demo .demo-child .child-overview>strong{
   font-size:15px;
 }
 .mockup-parent #main .dashboard-demo .demo-child .child-overview>span:nth-child(2){
   font-size:12px;
 }
 .mockup-parent #main .dashboard-demo .demo-child .child-stat{
   font-size:11px;line-height:1.3;margin-top:8px;
 }
 .mockup-parent #main .dashboard-demo .demo-child .child-stat b{
   font-size:11px;white-space:normal;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom{
   grid-template-columns:1fr;gap:9px;margin-top:12px;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom>section{padding:12px;}
 .mockup-parent #main .dashboard-demo .demo-bottom h4{font-size:14px;}
 .mockup-parent #main .dashboard-demo .demo-bottom>section>p{
   font-size:12px;line-height:1.45;white-space:normal;flex-wrap:wrap;
 }
 .mockup-parent #main .dashboard-demo .demo-bottom p>small{font-size:10px;}
 .mockup-parent #main .dashboard-demo .demo-message{font-size:12px;}
 .mockup-parent #main .dashboard-demo .demo-message small{font-size:11px;}
 .mockup-parent #main .dashboard-demo .demo-rhythm strong{font-size:12px;}
 .mockup-parent #main .dashboard-demo .demo-rhythm small{font-size:11px;}
 /* Use all horizontal space until the image's reserved area, not a narrow
    artificially split column. Art stays grounded with clear right inset. */
 .mockup-parent #main > .final-cta{
   display:block;position:relative;box-sizing:border-box;
   min-height:clamp(215px,53vw,278px);
   padding:clamp(18px,5vw,25px) 16px 0;
   overflow:hidden;
 }
 .mockup-parent #main > .final-cta > div {
   display:flex;position:relative;z-index:2;box-sizing:border-box;
   flex-direction:column;align-items:flex-start;justify-content:flex-start;
   width:calc(100% - clamp(119px,37vw,185px));
   max-width:none;min-width:0;min-height:0;
 }
 .mockup-parent #main > .final-cta h2{
   font-size:clamp(20px,5.2vw,26px);line-height:1.12;
   text-align:left;text-wrap:pretty;max-width:100%;
 }
 .mockup-parent #main > .final-cta p{
   margin:9px 0 0;font-size:clamp(12px,3.4vw,15px);line-height:1.35;
 }
 .mockup-parent #main > .final-cta .action{
   align-self:flex-start;justify-content:center;
   width:max-content;max-width:100%;min-height:41px;
   margin:12px 0 0;padding:8px 10px;gap:6px;
   font-size:clamp(12px,3.25vw,15px);
   white-space:normal;
 }
 .mockup-parent #main > .final-cta > .parent-final-family.final-mascot{
   position:absolute;bottom:0;right:clamp(11px,3.5vw,25px);
   width:auto;height:clamp(185px,55vw,280px);
   max-width:clamp(118px,37%,200px);max-height:100%;
   margin:0;padding:0;object-fit:contain;object-position:center bottom;
   transform:none;align-self:auto;
 }
}
@media (max-width:355px) {
 .mockup-parent #main > .final-cta {min-height:245px;padding-inline:12px;}
 .mockup-parent #main > .final-cta > div{width:calc(100% - 113px);}
 .mockup-parent #main > .final-cta h2{font-size:19px;}
 .mockup-parent #main > .final-cta > .parent-final-family.final-mascot{
  max-width:115px;right:8px;
 }
}


/* Parent PNG has its own angle and soft shadow. Do not rasterize it
   again using CSS rotation / shadow; enlarge the actual screen and make
   the lion overlap the lower-right bezel slightly, at every viewport. */
.mockup-parent #main .parent-hero-stage .parent-hero-tablet-picture {
 position:absolute;display:block;box-sizing:border-box;
 z-index:1;
 top:0;left:clamp(-4px,.6vw,8px);right:auto;bottom:auto;
 width:min(97%,680px);height:99%;max-width:100%;
 transform:none;
 filter:none;
 pointer-events:none;
}
.mockup-parent #main .parent-hero-stage .parent-hero-tablet-picture .parent-hero-tablet-clean {
 position:relative;inset:auto;display:block;
 width:100%;height:100%;max-width:100%;max-height:100%;
 object-fit:contain;object-position:center center;
 transform:none;
 filter:contrast(1.12) saturate(1.06);
 clip-path:none;
}
.mockup-parent #main .parent-hero-stage > .parent-hero-mascot-clean {
 z-index:2;
 right:clamp(10px,1.2vw,18px);
 bottom:0;
 height:50%;
}
@media (min-width:901px) and (max-width:1199px) {
 .mockup-parent #main .parent-hero-stage .parent-hero-tablet-picture {
  left:0;width:97%;height:99%;
 }
 .mockup-parent #main .parent-hero-stage > .parent-hero-mascot-clean {
  right:clamp(9px,1vw,14px);
 }
}
@media (min-width:641px) and (max-width:900px) {
 .mockup-parent #main .parent-hero-stage .parent-hero-tablet-picture {
  left:0;width:97%;height:97%;top:1%;
 }
 .mockup-parent #main .parent-hero-stage > .parent-hero-mascot-clean {
  right:10px;height:42%;
 }
}
@media (max-width:640px) {
 .mockup-parent #main .parent-hero-stage .parent-hero-tablet-picture {
  left:-1%;right:auto;top:0;
  height:98%;width:89%;
  transform:none;
 }
 .mockup-parent #main .parent-hero-stage > .parent-hero-mascot-clean {
  right:clamp(25px,7.5%,36px);
  bottom:0;
  height:59%;
 }
}


/* Parent demo v9 — legible at reading distance, genuine Mia and Bibi assets.
   The card grid reserves illustration space instead of absolutely overlaying
   progress text. These rules are scoped to the public parent demo only. */
.mockup-parent #main .parent-dashboard-section .dashboard-demo {
  font-size:14px;
  line-height:1.4;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .dashboard-body {
  box-sizing:border-box;
  padding:clamp(12px,1.35vw,20px);
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .dashboard-heading {
  align-items:flex-start;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:14px;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .dashboard-heading h3 {
  font-size:clamp(20px,1.55vw,25px);
  line-height:1.2;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .dashboard-heading p {
  font-size:14px;
  line-height:1.4;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .period-select select {
  font-size:13px;
  min-height:36px;
  max-width:100%;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo aside button {
  font-size:13px;
  line-height:1.35;
  min-height:34px;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-children {
  gap:clamp(12px,1.35vw,20px);
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:clamp(35px,3.5vw,50px) minmax(0,1fr) clamp(79px,8vw,112px);
  gap:clamp(8px,1vw,14px);
  align-items:start;
  min-width:0;
  min-height:160px;
  padding:clamp(12px,1.2vw,18px);
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child > .demo-avatar {
  grid-column:1;
  grid-row:1;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child > .child-overview {
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  min-width:0;
  min-height:0;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-overview > strong {
  font-size:16px;
  line-height:1.25;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-overview > span:nth-child(2) {
  font-size:14px;
  line-height:1.35;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .progress-track {
  width:100%;
  max-width:200px;
  height:7px;
  margin-top:8px;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-stat {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:12px;
  margin-top:12px;
  padding-top:0;
  font-size:13px;
  line-height:1.4;
  max-width:none;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-stat > span:nth-child(2) {
  padding-left:12px;
  border-left:1px solid #dddde1;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-stat b {
  font-size:13px;
  font-weight:700;
  white-space:normal;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child > .companion {
  position:relative;
  inset:auto;
  grid-column:3;
  grid-row:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  align-self:stretch;
  width:100%;
  min-width:0;
  min-height:125px;
  margin:0;
  padding:0;
  gap:4px;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .demo-companion-image {
  position:static;
  inset:auto;
  display:block;
  flex:none;
  width:clamp(68px,7vw,103px);
  height:auto;
  max-width:100%;
  margin:0;
  padding:0;
  object-fit:contain;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .companion > small {
  margin:0;
  padding:0;
  font-size:12px;
  line-height:1.25;
  text-align:center;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .companion > b {
  font-size:13px;
  line-height:1.25;
  font-weight:700;
  text-align:center;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom {
  gap:clamp(10px,1.15vw,16px);
  margin-top:14px;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom > section {
  box-sizing:border-box;
  padding:clamp(12px,1.2vw,18px);
  min-width:0;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom h4 {
  font-size:15px;
  line-height:1.3;
  margin-bottom:10px;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom > section > p {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  white-space:normal;
  gap:5px 8px;
  font-size:13px;
  line-height:1.45;
  overflow-wrap:normal;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom p > small {
  display:inline;
  font-size:11px;
  line-height:1.3;
  white-space:normal;
  margin-left:auto;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-message {
  font-size:13px;
  line-height:1.4;
  min-height:54px;
  gap:9px;
  padding:9px;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-message small {
  font-size:12px;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-rhythm strong {
  font-size:13px;
  line-height:1.4;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-rhythm small {
  font-size:12px;
  line-height:1.4;
}
.mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-disclaimer {
  position:static;
  inset:auto;
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
  margin-top:10px;
  font-size:12px;
  line-height:1.4;
  background:transparent;
}
@media (min-width:641px) and (max-width:1050px) {
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-children {
   grid-template-columns:minmax(0,1fr);
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child {
   grid-template-columns:45px minmax(0,1fr) 100px;
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom {
   grid-template-columns:repeat(2,minmax(0,1fr));
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom > section:last-child {
   grid-column:1/-1;
 }
}
@media (max-width:640px) {
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .dashboard-body {padding:12px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .dashboard-heading {
   align-items:flex-start;
   gap:10px;
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .dashboard-heading h3 {font-size:21px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .dashboard-heading p {font-size:14px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-children {
   grid-template-columns:minmax(0,1fr);
   gap:12px;
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child {
   grid-template-columns:clamp(35px,9vw,44px) minmax(0,1fr) clamp(68px,19vw,82px);
   gap:8px;
   min-height:158px;
   padding:11px;
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child > .demo-avatar {width:100%;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-overview > strong {font-size:16px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-overview > span:nth-child(2) {font-size:13px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-stat {
   flex-direction:column;
   gap:7px;
   margin-top:10px;
   font-size:12px;
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-stat > span:nth-child(2) {
   border-left:0;
   padding-left:0;
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .child-stat b {font-size:12px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child > .companion {min-height:116px;gap:3px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .demo-companion-image {width:100%;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .companion > small {font-size:11px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-child .companion > b {font-size:12px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom {
   grid-template-columns:minmax(0,1fr);
   gap:11px;
 }
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom > section {padding:13px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom h4 {font-size:15px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom > section > p {font-size:13px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-bottom p > small {font-size:11px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-message {font-size:13px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-message small {font-size:12px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-rhythm strong {font-size:13px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-rhythm small {font-size:12px;}
 .mockup-parent #main .parent-dashboard-section .dashboard-demo .demo-disclaimer {font-size:12px;}
}