/* For parents (redesign 13.10.2026). Builds on style.css, tutorial.css (hidden Mini), home.css (section width, h2), catalog.css (page head). */

.parents-page main>section h1{font-size:clamp(48px,5vw,72px);margin:0 0 24px}
.parents-page main>section{margin-bottom:160px}
/* the making drawer sits on its own beige panel, so neighbouring sections don't run together */
.parents-page main>section.pa-drawer-wrap{background:#f0ede2;border-radius:32px;padding:clamp(40px,5vw,72px)}
/* Who does what (variant D, 13.10.2026): the mint panel ends halfway down the cards, so the cards step out onto the page */
.parents-page main>section.pa-together{position:relative;isolation:isolate;padding:clamp(40px,5vw,72px) clamp(40px,5vw,72px) 0}
.pa-together:before{content:'';position:absolute;inset:0 0 130px;z-index:-1;background:#d3faf2;border-radius:32px}

/* ---------- Hero: text + photo with the big corner ---------- */
.pa-hero{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,96px);align-items:center;padding-top:56px}
.pa-hero .intro{font-size:19px;line-height:1.6;margin:0 0 30px;max-width:460px}
.pa-hero .h-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.pa-pic{position:relative;margin:0}
.pa-pic>img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:120px 28px 28px 28px}
.pa-pic.peek-top-r .mini-hide{right:16%}
.pa-pic.peek-bottom .mini-hide{left:auto;right:22%}

/* ---------- Who does what ---------- */
.pa-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:56px}
.pa-head .eyebrow{margin-bottom:16px}
.pa-head>p{font-size:17px;line-height:1.6;margin:0;max-width:420px;color:#45484b}
.pa-jobs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pa-job{border-radius:28px;padding:40px 44px 44px}
.pa-job.you{background:var(--cream);box-shadow:0 20px 44px #2024281f,0 2px 6px #20242810;border-radius:28px}
.pa-job.them{background:var(--cream);box-shadow:0 20px 44px #2024281f,0 2px 6px #20242810;border-radius:28px 120px 28px 28px}
.pa-job h3{font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.pa-job>p{margin:0 0 22px;color:#45484b}
.pa-job ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.pa-job li{position:relative;padding-left:26px;font-size:16px;line-height:1.5}
.pa-job li:before{content:'';position:absolute;left:0;top:.45em;width:11px;height:11px;border-radius:3px;background:var(--ink)}
.pa-job.them li:before{background:var(--mint);box-shadow:inset 0 0 0 1.5px var(--ink)}
.pa-job-note{margin:24px 0 0!important;padding-top:20px;border-top:1px solid #2024281f;font-size:15px}

/* ---------- Making drawer ---------- */
.pa-drawer{display:grid;grid-template-columns:1fr 340px;gap:clamp(32px,4vw,64px);align-items:start}
.pa-kit{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none;padding:0;margin:0}
.pa-kit li{background:#fff;border-radius:22px;padding:18px 20px 24px}
.pa-kit img{display:block;width:58%;aspect-ratio:1;object-fit:contain;margin:6px auto 14px;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pa-kit li:hover img{transform:rotate(-4deg) scale(1.04)}
.pa-kit h3{font-size:19px;letter-spacing:-.01em;margin:0 0 4px}
.pa-kit p{margin:0;font-size:14px;line-height:1.5;color:#626466}
.pa-more{background:#fff0bf;border-radius:28px;padding:32px 32px 34px;position:sticky;top:110px}
.pa-more h3{font-size:22px;margin:0 0 6px}
.pa-more>p{margin:0 0 20px;font-size:15px;color:#45484b}
.pa-more ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.pa-more li{position:relative;padding-left:24px;font-size:15px;line-height:1.45}
.pa-more li:before{content:'';position:absolute;left:0;top:.42em;width:10px;height:10px;border-radius:3px;background:var(--ink)}
.pa-more li b{display:block;font-weight:600}
.pa-more li span{color:#626466}

/* ---------- Questions ---------- */
.pa-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:start}
.pa-faq .eyebrow{margin-bottom:16px}
.pa-faq details{border-top:1px solid #20242826}
.pa-faq details:last-child{border-bottom:1px solid #20242826}
.pa-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 2px;font:600 20px/1.3 Rubik,sans-serif;letter-spacing:-.01em}
.pa-faq summary::-webkit-details-marker{display:none}
.pa-faq summary:after{content:'';flex:none;width:34px;height:34px;border-radius:50%;background:#f0ede2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%23202428' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:rotate .3s cubic-bezier(.25,.8,.3,1),background-color .2s}
.pa-faq details[open] summary:after{rotate:45deg;background-color:var(--mint)}
.pa-faq summary:hover:after{background-color:var(--mint)}
.pa-faq summary:focus-visible{outline:3px solid #7254c4;outline-offset:2px}
.pa-faq details p{margin:-6px 2px 26px;font-size:16px;line-height:1.6;color:#45484b;max-width:620px}
.pa-faq details a{background:var(--marker-mint) no-repeat 0 92%/100% .45em;font-weight:600}

/* ---------- Closing ---------- */
.pa-end{display:flex;justify-content:space-between;align-items:center;gap:32px;background:#dbd3f4;border-radius:28px 28px 120px 28px;padding:44px 56px}
.pa-end h2{margin:0 0 8px!important}
.pa-end p{margin:0;font-size:17px;color:#45484b}
.pa-end .h-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;flex:none}
.pa-end img{width:110px;flex:none;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pa-end:hover img{transform:rotate(-4deg) translateY(-4px)}

@media(max-width:1000px){
  .pa-hero,.pa-faq{grid-template-columns:1fr}
  .pa-hero{gap:40px}
  .pa-drawer{grid-template-columns:1fr}
  .pa-more{position:static}
  .pa-end{flex-wrap:wrap;padding:36px 36px 40px}
  .pa-end .h-actions{flex:1 1 100%;min-width:0}/* longer languages: the button and the link wrap instead of pushing the page wider */
}
@media(max-width:760px){
  .parents-page main>section{margin-bottom:104px}
  .parents-page main>section.pa-drawer-wrap{border-radius:24px;padding:36px 20px}
  .parents-page main>section.pa-together{padding:36px 20px 0}
  .pa-together:before{border-radius:24px;bottom:110px}
  .pa-hero{padding-top:32px}
  .pa-pic>img{border-radius:72px 22px 22px 22px}
  .pa-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:40px}
  .pa-jobs{grid-template-columns:1fr;gap:16px}
  .pa-job{padding:30px 26px 32px}
  .pa-job.you{border-radius:22px}.pa-job.them{border-radius:22px 72px 22px 22px}
  .pa-kit{grid-template-columns:1fr 1fr;gap:12px}
  .pa-kit li{padding:14px 14px 18px}
  .pa-kit img{width:66%;margin:2px auto 10px}
  .pa-kit h3{font-size:16px}.pa-kit p{font-size:13px}
  .pa-faq summary{font-size:17px;padding:20px 2px}
  .pa-end{border-radius:22px 22px 72px 22px;padding:30px 26px 34px}
  .pa-end img{width:80px}
}

/* FAQ groups (markup from _build/build_faq.py) */
.pa-faq-intro{position:sticky;top:110px}
.pa-faq-intro>p:last-child{margin:20px 0 0;font-size:16px;line-height:1.6;color:#45484b;max-width:340px}
/* the questions start a little lower than the headline, not level with it */
.pa-faq-intro+div{padding-top:96px}
.pa-faq-group+.pa-faq-group{margin-top:56px}
.pa-faq-group h3{display:inline-block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-family:'DM Sans',sans-serif;font-weight:600;color:var(--ink);background:#d3faf2;border-radius:20px;padding:7px 12px;margin:0 0 18px}
/* each group gets its own soft brand tint */
.pa-faq-group:nth-child(2) h3{background:#fff0bf}
.pa-faq-group:nth-child(3) h3{background:#e6e0fa}
@media(max-width:1000px){.pa-faq-intro{position:static}.pa-faq-intro+div{padding-top:0}}