/* «Мама, я расту!» — the whole landing in one stylesheet.
   The visual language comes from the approved first screen: milk ground, Manrope caps headings,
   one Bergamasco accent line per block, light blue only for buttons and single highlights. */

@font-face{font-family:'Bergamasco';src:url('assets/fonts/Bergamasco-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* Manrope (SIL OFL 1.1, see assets/fonts/Manrope-OFL.txt): Google Fonts variable files, served from the site itself. */
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-cyrillic-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-cyrillic.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';src:url('assets/fonts/manrope-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#fcf9f6;--ink:#343d48;--muted:#606873;
  --blue:#6d8fae;--blue-deep:#425f79;--blue-light:#bdc9d7;--blue-tint:#e6eaee;--button-ink:#303e4c;
  --rule:#e2e2dd;--rule-blue:#d4dde3;
  --font:'Manrope',sans-serif;--font-accent:'Bergamasco',serif;
  /* Type scale of the approved screen: caps title, Bergamasco accent, mid statements, text, notes. */
  --size-title:clamp(23px,7.3vw,43px);--size-accent:clamp(20px,6.6vw,50px);
  --size-mid:18px;--size-step:20px;--size-text:16px;--size-note:13px;
  --gutter:22px;--section-top:32px;--section-bottom:48px;--title-gap:32px
}
@media(min-width:521px){:root{--gutter:30px;--size-mid:20px}}
@media(min-width:900px){:root{--size-step:22px;--section-top:56px;--section-bottom:72px;--title-gap:48px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--size-text)/1.6 var(--font);font-synthesis:none;-webkit-text-size-adjust:100%}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:fixed;left:12px;top:-80px;z-index:5;padding:12px 16px;background:var(--bg);border:1px solid var(--rule)}
.skip:focus{top:12px}
.wrap{width:min(1120px,calc(100% - var(--gutter) * 2));margin:0 auto}

/* Header and first screen: sizes follow the approved prototype; headline sizes use the 736px column as the container. */
.header,.hero{line-height:normal}
.header-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;width:min(676px,calc(100% - 60px));margin:0 auto;padding:24px 0 20px;border-bottom:1px solid var(--rule)}
.brand{font:700 16px/1.1 var(--font);letter-spacing:-.6px;color:var(--blue)}
.header nav{display:flex;gap:24px;font:500 13px/1.4 var(--font)}
.header nav a:hover,.footer-links a[href]:hover{color:var(--blue)}
/* Tap targets of at least 44px without changing the approved header geometry. */
.header .brand,.header nav a{position:relative}
.header .brand::after,.header nav a::after{content:'';position:absolute;inset:-5px -4px}
.header nav a::after{inset:-13px -8px}

.hero-inner{max-width:736px;margin:0 auto;container-type:inline-size}
.hero h1{margin:30px 30px 28px;font:500 clamp(25px,5.8cqw,43px)/1.16 var(--font);letter-spacing:-.045em}
.hero-accent{display:block;margin-top:12px;font:400 clamp(20px,6.8cqw,50px)/1.2 var(--font-accent);letter-spacing:-.015em;color:var(--blue);white-space:nowrap}
.hero-layout{display:flex;flex-direction:column;align-items:center;padding:0 30px 30px}
.hero-intro{align-self:stretch;margin-bottom:22px}
.hero-intro p{margin:0 0 18px;font-size:16px;line-height:1.6}
.hero-intro .hero-result{font-weight:700;line-height:1.55}
.hero-picker{width:100%;max-width:480px;min-width:0;margin:0 auto 25px}
.hero-example-heading{display:flex;justify-content:space-between;gap:8px;margin:18px 0 6px;font:500 var(--size-note)/1.4 var(--font);color:#677580}
.hero-outfits{display:grid;gap:18px}
.hero-outfits.is-both{grid-template-columns:1fr 1fr;gap:10px}
.hero-outfit{min-width:0}
.hero-outfit img{display:block;width:100%;height:auto;aspect-ratio:1.12;object-fit:contain}
/* The son illustration has a white ground; multiply lets the milk background show through. */
.hero-outfit[data-outfit=son] img{mix-blend-mode:multiply}
.hero-outfit figcaption{display:none;margin-top:7px;font:500 12px/1.4 var(--font);color:#52677b}
.hero-outfits.is-both figcaption{display:block}
.hero-example-note{margin:12px 0 0;font-size:var(--size-note);line-height:1.5;color:#677580;text-wrap:balance}
.hero-examples-link{display:inline-block;margin-top:12px;border-bottom:1px solid currentColor;font:500 12px/1.5 var(--font);color:#52677b}
.hero-purchase{width:100%;max-width:390px;margin:0 auto;text-align:center}
.hero-purchase .cta{margin-bottom:12px}
.hero-timing{margin:0;font-size:13px;line-height:1.6}
.hero-number{font-weight:600;line-height:1}
.hero-notes{width:100%;margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);text-align:center}
.hero-notes p{max-width:36em;margin:0 auto;font-size:12px;line-height:1.5;color:var(--muted)}

/* Shared controls: underlined tabs and the order button with its price. */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--rule-blue)}
.tabs button{flex:1;min-width:0;padding:13px 2px;border:0;border-bottom:2px solid transparent;background:transparent;color:#626e78;font:500 12px/1.4 var(--font);white-space:nowrap}
.tabs button:hover{color:var(--blue-deep)}
.tabs button[aria-pressed=true]{color:var(--blue-deep);border-bottom-color:var(--blue);font-weight:700}
/* The order button is a pill: two lines of text on the left, a dark circle with an arrow on the right. */
.cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin:0;padding:10px 10px 10px 26px;border:0;border-radius:40px;background:var(--blue-light);color:var(--button-ink);text-align:left;font:600 18px/1.3 var(--font);transition:background-color .2s}
.cta:hover{background:#b0bfcf}
.cta:active{background:#a5b6c8}
.cta-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.cta-label{font-size:17px}
.cta-price{font-weight:500;white-space:nowrap}
.cta-sum{font-size:29px;font-weight:600;line-height:1.1}
.cta-arrow{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--bg)}
.cta-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cta:hover .cta-arrow svg{transform:translateX(3px)}
/* Narrow buttons (phones, the price card) give the label more room so it stays on one line. */
.hero-purchase,.cta-block{container-type:inline-size}
@container (max-width:330px){
  .cta{gap:10px;padding:10px 8px 10px 20px}
  .cta-label{font-size:16px}
  .cta-arrow{width:44px;height:44px}
}
.cta-block{width:100%;max-width:390px}
.cta-block .cta{margin-bottom:12px}
.cta-note{font-size:var(--size-note);line-height:1.6;text-align:center}
/* Second way in for people without Telegram; the link gets a 44px tap area without taking more room. */
.max-note{margin-top:6px;font-size:var(--size-note);line-height:1.6;text-align:center;color:var(--muted)}
.max-note a{position:relative;color:var(--blue-deep);text-decoration:underline;text-decoration-color:var(--rule-blue);text-underline-offset:.25em}
.max-note a::after{content:'';position:absolute;inset:-14px -6px}

/* Section frame: caps title, optional Bergamasco line, content below. */
.section{padding:var(--section-top) 0 var(--section-bottom)}
.section-title{margin-bottom:var(--title-gap);font:500 var(--size-title)/1.16 var(--font);letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.accent-line{display:block;margin-top:12px;font:400 var(--size-accent)/1.2 var(--font-accent);letter-spacing:-.015em;color:var(--blue);text-transform:none}
/* Pause between two blocks on the same ground: a rule with a small snowflake in the middle. */
.section-divider{display:flex;align-items:center;gap:16px;color:var(--blue)}
.section-divider::before,.section-divider::after{content:'';flex:1;border-top:1px solid var(--rule)}
.section-divider svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

/* Block 2: four pains as ruled rows, icon beside the text, the last one set as the punchline. */
.familiar-list{display:grid;border-top:1px solid var(--rule)}
/* Icons are small soft-3D pictures, half the size of the step pictures so the steps keep the accent. */
.familiar-list li{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center;padding:10px 0 14px;border-bottom:1px solid var(--rule)}
.familiar-icon{display:block;width:48px;height:48px}
.familiar-list p{font:500 var(--size-mid)/1.35 var(--font);letter-spacing:-.01em}
.familiar-list .familiar-quest{align-items:center;margin-top:-1px;padding:20px 18px 24px;border-bottom:0;background:var(--blue-tint)}
.familiar-quest p{color:var(--blue-deep)}
/* The punchline itself in the accent font on its own line, like the accent line of the first screen.
   On phones the size follows the space left beside the icon, so «отдельный квест» stays on one line. */
.familiar-quest-accent{display:block;margin-top:4px;font:400 clamp(20px,calc((100vw - 142px) / 8.6),42px)/1.15 var(--font-accent);letter-spacing:-.015em}

/* Block 3: three numbered steps joined by one rule. */
.step{display:grid;grid-template-columns:56px 1fr;align-content:start;column-gap:12px;padding:24px 0 32px;border-top:1px solid var(--rule)}
.step-no{grid-row:1 / span 3;font:400 var(--size-title)/1 var(--font);letter-spacing:-.04em;color:var(--blue)}
.step h3{margin-bottom:10px;font:700 var(--size-step)/1.25 var(--font);letter-spacing:-.02em}
/* Step pictures bring their own blue circle on a milk ground that matches the page, so they are not cropped. */
.step-picture{display:block;width:96px;height:96px;margin:-8px 0 8px -8px}

/* Who selects: a 4:5 photo beside the greeting on phones, a column of its own on desktop. */
.about-layout{display:grid;grid-template-columns:112px 1fr;grid-template-areas:'title title' 'photo hello' 'copy copy';column-gap:20px;align-items:center}
.about-title{grid-area:title}
.about-photo{grid-area:photo;display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:16px;object-fit:cover}
.about-hello{grid-area:hello;font:400 var(--size-accent)/1.2 var(--font-accent);letter-spacing:-.015em;color:var(--blue)}
.about-copy{grid-area:copy;display:grid;gap:12px;max-width:34em;margin-top:24px;font:400 var(--size-mid)/1.45 var(--font)}

/* Block 4: appears only when all three approved capsules are connected in config.js. */
.examples-lead{max-width:560px}
.approved-examples .tabs{max-width:480px;margin:28px 0}
#capsule-pages{display:grid;gap:16px}
#capsule-pages a{display:block}
#capsule-pages img{display:block;width:100%;height:auto;border:1px solid var(--rule)}
.examples-features{margin-top:24px;font-weight:500}
.examples-note{margin-top:8px;font-size:var(--size-note);color:var(--muted)}

/* Block 5: the one raised card on the page; the price is the dominant figure. */
.price-card{max-width:960px;margin:0 auto;padding:28px 18px 36px;background:#fff;border-radius:16px;box-shadow:0 1px 2px #343d480d,0 28px 56px -28px #343d4840}
.price-card .section-title{margin-bottom:24px}
.price-tabs{max-width:320px}
.price-figure{margin-top:28px}
.price{font:500 clamp(80px,26vw,136px)/1 var(--font);letter-spacing:-.06em;white-space:nowrap}
.per-child{margin-top:8px;color:var(--muted)}
.price-side{margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.price-side .cta-block{margin:24px auto 0}
.price-note{margin-top:20px;font-size:var(--size-note);color:var(--muted)}

/* Questions in block 6. */
summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:56px;padding:14px 0;font:500 var(--size-mid)/1.35 var(--font);letter-spacing:-.01em;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--blue-deep)}
.toggle-sign{flex-shrink:0;width:28px;font:400 28px/1 var(--font);color:var(--blue);text-align:center}
.toggle-sign::before{content:'+'}
details[open]>summary .toggle-sign::before{content:'−'}
.faq-list{border-top:1px solid var(--rule)}
.faq-list details{border-bottom:1px solid var(--rule)}
.faq-list details p{max-width:36em;padding:0 44px 24px 0}

/* Block 7: a short closing column, centred like the first screen. */
.final-cta{text-align:center}
.final-cta .wrap{max-width:736px}
.final-cta .section-title{margin-bottom:24px}
.final-cta .cta-block{margin:32px auto 0}

/* Footer: quiet milk ground, brand and slogan on the left, documents in one line on the right. */
.site-footer{padding:28px 0 36px;border-top:1px solid var(--rule)}
.footer-main{display:grid;gap:16px}
.footer-slogan{margin-top:10px;font:400 clamp(24px,6.2vw,30px)/1.2 var(--font-accent);color:var(--blue);text-wrap:balance}
.footer-links{display:flex;flex-wrap:wrap;column-gap:24px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-links a[href]{text-decoration:underline;text-decoration-color:var(--rule-blue);text-underline-offset:.25em}
.footer-links [aria-disabled=true]{color:var(--muted);cursor:default}
.business-details{display:grid;gap:4px;font-size:var(--size-note);color:var(--muted)}
/* The e-mail line keeps the small type of the details; an invisible hit area makes it easy to tap. */
.business-details a{position:relative;text-decoration:underline;text-decoration-color:var(--rule-blue);text-underline-offset:.2em}
.business-details a::after{content:'';position:absolute;inset:-14px -4px}
.business-details a:hover{color:var(--blue-deep)}
.footer-bottom{margin-top:8px;font-size:var(--size-note);color:var(--muted)}

/* Phones: a thin order button pinned to the bottom while no other order button is on screen. */
.sticky-order{display:none}
@media(max-width:640px){
  .sticky-order{display:block;position:fixed;left:0;right:0;bottom:0;z-index:4;container-type:inline-size;padding:14px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 60%,#fcf9f600);transition:transform .25s,opacity .25s,visibility 0s}
  .sticky-order.is-hidden{transform:translateY(110%);opacity:0;visibility:hidden;transition:transform .25s,opacity .25s,visibility 0s .25s}
  .sticky-order .cta{gap:6px;padding:4px 4px 4px 16px;font:600 15px/1.25 var(--font)}
  .sticky-text{text-wrap:balance}
  .sticky-price{font-weight:500;white-space:nowrap}
  .sticky-sum{font-weight:700}
  .sticky-order .cta-arrow{width:36px;height:36px}
  .sticky-order .cta-arrow svg{width:20px;height:20px}
}
@media(max-width:370px){.sticky-order{padding-left:8px;padding-right:8px}}
/* The narrowest phones: «Для двух детей» is longer than the other tabs, so tabs share the width by their text. */
@media(max-width:359px){.hero .tabs button{flex:1 1 auto}}
@container (max-width:365px){.sticky-order .cta{font-size:14px;letter-spacing:-.01em}}

/* Legal documents (offer, privacy policy, consent): one readable column under the site header. */
.doc{padding:var(--section-top) 0 var(--section-bottom)}
.doc .wrap{max-width:760px}
.doc h1{margin-bottom:12px;font:500 var(--size-title)/1.2 var(--font);letter-spacing:-.04em;text-transform:uppercase;text-wrap:balance}
.doc-edition{margin-bottom:var(--title-gap);font-size:var(--size-note);color:var(--muted)}
.doc h2{margin:40px 0 12px;font:700 var(--size-step)/1.3 var(--font);letter-spacing:-.02em}
.doc p,.doc li{max-width:40em}
.doc p a{text-decoration:underline;text-decoration-color:var(--rule-blue);text-underline-offset:.25em}
.doc p a:hover{color:var(--blue-deep)}
.doc p+p,.doc ul{margin-top:10px}
.doc ul{padding-left:1.2em;list-style:disc}
.doc li+li{margin-top:6px}
.doc-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:48px;padding-top:20px;border-top:1px solid var(--rule)}
.doc-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-decoration-color:var(--rule-blue);text-underline-offset:.25em}
/* Drafts only: places still waiting for real data, and the banner that must go before publishing. */
.todo{padding:0 3px;border-radius:3px;background:#fbefc6;color:inherit}
.draft-banner{margin-bottom:24px;padding:12px 16px 14px;border-radius:8px;background:#fbefc6;font-size:var(--size-note)}

/* Order notice while the Telegram flow is not connected. */
dialog{width:min(560px,calc(100% - 32px));max-height:90dvh;overflow:auto;padding:48px 22px 28px;border:0;border-radius:16px;background:var(--bg);color:var(--ink);box-shadow:0 30px 80px -30px #343d4866}
dialog::backdrop{background:#343d4866}
dialog h2{padding-right:36px;font:500 clamp(22px,6vw,30px)/1.2 var(--font);letter-spacing:-.03em;text-transform:uppercase}
dialog p{margin-top:16px;color:var(--muted)}
.dialog-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:28px;line-height:1}
.dialog-close:hover{background:var(--blue-tint)}
.button-secondary{min-height:48px;margin-top:28px;padding:0 28px;border:0;border-radius:999px;background:var(--blue-light);color:var(--button-ink);font:600 16px/1.2 var(--font);transition:background-color .2s}
.button-secondary:hover{background:#b0bfcf}
.button-secondary:active{background:#a5b6c8}

@media(max-width:520px){
  .header-inner{width:calc(100% - 44px);padding:18px 0 16px}
  .hero h1{margin:23px 22px 22px;font-size:7.3cqw;line-height:1.2}
  .hero-accent{font-size:6.6cqw}
  .hero-layout{padding:0 22px 24px}
  .hero-intro{margin-bottom:18px}
  .hero-intro p{margin-bottom:14px;font-size:15px;line-height:1.55}
  .hero-picker{margin-bottom:23px}
  .hero-outfits.is-both{grid-template-columns:1fr;gap:16px}
  .hero-outfits.is-both img{aspect-ratio:1.3}
  .hero-timing{line-height:1.55}
  .hero-notes{margin-top:24px}
  .tabs button{min-height:46px;font-size:13px}
  .section-title{line-height:1.2}
  .faq-list details p{padding-right:0}
}
@media(min-width:640px){
  .familiar-list .familiar-quest{padding:22px 28px 28px}
  .price-card{padding:36px 40px 44px}
  dialog{padding:52px 40px 36px}
}
@media(min-width:900px){
  /* First screen in two columns, so the order button is visible without scrolling:
     headline, text and button on the left, the example with its tabs on the right. */
  .header-inner{width:min(1120px,calc(100% - 60px))}
  .hero-inner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:'title picker' 'intro picker' 'buy picker' 'notes picker';column-gap:64px;width:min(1120px,calc(100% - 60px));max-width:none;padding:44px 0 64px}
  .hero-layout{display:contents}
  .hero h1{grid-area:title;margin:0 0 24px;font-size:clamp(30px,4.3cqw,43px)}
  .hero-intro{grid-area:intro;margin-bottom:28px}
  .hero-picker{grid-area:picker;align-self:start;max-width:none;margin:0}
  .hero-purchase{grid-area:buy;margin:0}
  .hero-notes{grid-area:notes;align-self:start;text-align:left}
  .hero-notes p{margin:0}
  /* Three short pains in one row, the punchline as a full-width band below them. */
  .familiar-list{grid-template-columns:repeat(3,1fr)}
  .familiar-list li{padding:18px 24px 22px 0}
  .familiar-list li+li{padding-left:24px;border-left:1px solid var(--rule)}
  .familiar-list .familiar-quest{grid-column:1 / -1;margin-top:0;padding:24px 36px 30px;border-left:0}
  .faq .wrap{display:grid;grid-template-columns:4fr 8fr;gap:48px;align-items:start}
  .steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule)}
  .step{grid-template-columns:1fr;padding:28px 40px 0 0;border-top:0}
  .step-no{grid-row:auto;margin-bottom:32px;font-size:56px}
  /* Step pictures sit beside the numerals, so the three step headings stay on one line. */
  .step{position:relative}
  .step-picture{position:absolute;top:8px;left:84px;margin:0}
  .about-layout{grid-template-columns:320px 1fr;grid-template-rows:auto auto 1fr;grid-template-areas:'photo title' 'photo hello' 'photo copy';column-gap:64px;align-items:start}
  .about-title{margin-bottom:24px}
  .about-photo{align-self:start}
  .price-card{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;padding:48px 56px 60px}
  .price-side{margin-top:0;padding-top:0;border-top:0;align-self:end}
  #capsule-pages{grid-template-columns:repeat(3,1fr);gap:20px}
  .footer-main{grid-template-columns:minmax(280px,1fr) auto;align-items:end;gap:48px}
  .footer-links,.footer-bottom,.business-details{justify-content:flex-end;justify-items:end;text-align:right}
}
@media(max-width:1000px){.header nav{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.cta:hover .cta-arrow svg{transform:none}}