/* Creative-direction pass 2: editorial chapters, product detail and tactile variety. */
:root{--lavender:#eee9ff;--paper:#fffdf8;--navy:#11152f;--rose:#ffdfd6;--mint:#dcefe5;--butter:#ffe9a8}
body{background:var(--paper)}
.wrap{max-width:1400px}
header.site{mix-blend-mode:normal}.navbar{max-width:1400px}.logo{letter-spacing:-1.4px}.logo svg{filter:saturate(.7)}

/* Hero: one designed stage, not a loose collection of floating cards. */
.hero{min-height:850px;padding:126px 0 74px;background:var(--lavender)}
.hero::before{width:310px;height:500px;left:-150px;top:300px;background:var(--rose);border-radius:52% 48% 65% 35% / 38% 60% 40% 62%;transform:rotate(-8deg)}
.hero::after{width:420px;height:420px;right:-210px;top:70px;background:#dcefe5;border-radius:44% 56% 41% 59% / 61% 37% 63% 39%}
.hero-grid{grid-template-columns:minmax(440px,.92fr) minmax(560px,1.08fr);gap:34px;min-height:680px}
.hero-copy{padding-bottom:10px}.eyebrow{font-family:'Playfair Display',serif;font-size:15px;font-style:italic;text-transform:none;letter-spacing:.03em;color:var(--violet);margin-bottom:24px}
h1{font-size:clamp(4rem,6.25vw,6.7rem);line-height:.9;letter-spacing:-.065em;margin-bottom:30px}.hero-line{display:block;white-space:nowrap}.hero-line.accent{font-size:1.03em;margin:5px 0 8px}.hero-line.accent::after{bottom:-2px;left:0;right:5%;height:14px;border-bottom-width:4px}
.hero .lede{font-size:18px;max-width:525px;line-height:1.65}.hero .wl-form{max-width:540px;border:0;box-shadow:0 14px 45px rgba(55,41,116,.12)}.badge-note{font-size:12px;letter-spacing:.025em}.flags-cap{background:rgba(255,255,255,.42);display:inline-block;padding:8px 12px;border-radius:8px;color:#4c4d65}
.hero-phone{min-height:680px}.hero-photo{right:70px;top:20px;width:72%;height:620px;border-radius:48% 52% 49% 51% / 34% 47% 53% 66%;object-position:57% 42%;box-shadow:none;outline:1px solid rgba(116,87,237,.1)}
.hero-photo-dot{right:15px;top:20px;width:145px;height:145px;background:var(--sun);opacity:.9}
.hero-phone .phone{left:auto;right:-10px;bottom:-12px;width:258px!important;transform:rotate(5deg);box-shadow:0 35px 65px rgba(17,21,47,.32)}
.audio-float{right:auto;left:18px;bottom:22px;width:270px;transform:rotate(-3deg);background:rgba(116,87,237,.92);color:#fff;border:1px solid rgba(255,255,255,.3)}.audio-float small{color:rgba(255,255,255,.7)}.audio-float .wave i{background:#fff}.milestone-float{right:6px;top:95px;transform:rotate(4deg);border-radius:4px 20px 20px 20px}.hello-bubble{left:30px;top:92px;background:var(--coral);font-size:26px;box-shadow:0 12px 30px rgba(255,122,97,.25)}

/* A continuous colored product ribbon like the selected concept. */
.value-strip{padding:0;background:var(--violet);color:#fff}.value-strip .wrap{padding-inline:clamp(20px,4vw,64px)}.value-shell{border:0;border-radius:0;background:transparent;box-shadow:none}.value{min-height:100px;justify-content:center;text-align:left;color:#fff;font-size:13px;letter-spacing:.01em}.value+.value{border-color:rgba(255,255,255,.22)}.value svg{stroke:#fff;width:25px;height:25px}.value:nth-child(2) svg{stroke:var(--sun)}.value:nth-child(3) svg{stroke:#ffb09f}.value:nth-child(4) svg{stroke:#b9ead1}.value:nth-child(5) svg{stroke:#bcd8ff}

/* Chapter 01 — memory editorial spread. */
.story{background:#fff8ef;padding:145px 0;overflow:hidden}.story::before{content:"01";position:absolute;left:max(18px,calc((100vw - 1320px)/2));top:64px;font:900 96px/1 'Lato',sans-serif;color:rgba(255,122,97,.11)}
.story-grid{grid-template-columns:.78fr 1.22fr;gap:0}.story-copy{position:relative;z-index:3;background:var(--paper);padding:54px 56px 58px;border-radius:6px 0 0 42px;box-shadow:0 24px 70px rgba(79,53,37,.1);transform:translateX(28px)}.story-copy h2{font-family:'Playfair Display',serif;font-weight:750;letter-spacing:-.045em}.story-copy p{max-width:37ch}.story-image{height:610px}.story-image>img{border-radius:70px 12px 70px 12px;object-position:center;filter:none}.story-note{left:-30px;bottom:42px;color:var(--coral);font-size:24px}.story-date{position:absolute;right:-24px;top:42px;background:var(--butter);padding:17px 19px;border-radius:50%;width:120px;height:120px;display:flex;flex-direction:column;justify-content:center;text-align:center;transform:rotate(8deg);box-shadow:0 16px 30px rgba(104,78,16,.12)}.story-date strong{font-size:16px}.story-date span{font-size:11px;line-height:1.25;margin-top:4px}

/* Chapter 02 — product scrapbook / asymmetric feature mosaic. */
.features#features{position:relative;background:#f8f5ff;padding:140px 0}.features#features::after{content:"✦";position:absolute;right:5vw;top:70px;color:var(--violet);font-size:46px;transform:rotate(15deg)}
#features .section-head{text-align:left;margin-left:0;max-width:820px}#features .section-head h2{max-width:780px}#features .grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:22px}
#features .card{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;column-gap:18px;padding:30px;border:0;overflow:hidden;min-height:430px;box-shadow:0 20px 50px rgba(42,32,91,.08);transition:transform .25s,box-shadow .25s}
#features .card:hover{transform:translateY(-6px) rotate(.3deg);box-shadow:0 30px 70px rgba(42,32,91,.14)}#features .card:nth-child(1){grid-column:span 7;background:#fff}#features .card:nth-child(2){grid-column:span 5;background:#dfeee7}#features .card:nth-child(3){grid-column:span 4;background:#ffdfd6}#features .card:nth-child(4){grid-column:span 8;background:#fff0be}#features .card:nth-child(5){grid-column:span 7;background:#dfe9ff}#features .card:nth-child(6){grid-column:span 5;background:#ebe4ff}
#features .card .feature-art{grid-column:1/-1;height:205px;margin:-8px -8px 26px;border-radius:20px;position:relative;overflow:hidden}#features .card .ic{grid-column:1;grid-row:2/4;width:42px;height:42px;margin:0;background:rgba(255,255,255,.65)}#features .card h3{grid-column:2;font-size:21px;margin:0 0 9px}#features .card p{grid-column:2;font-size:14px;line-height:1.65}
.capture-art{background:#5e48d6;color:#fff;padding:28px 32px}.capture-art span{display:block}.capture-art .mini-label{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.7}.capture-art strong{display:block;font:italic 38px/1.1 'Playfair Display',serif;margin:21px 0 3px}.capture-art .mini-language{font-size:13px;opacity:.78}.capture-art b{position:absolute;right:24px;bottom:20px;border-radius:30px;background:#ff8069;padding:14px 18px;font-size:12px}.capture-art::after{content:"";position:absolute;width:110px;height:110px;border:18px solid rgba(255,255,255,.1);border-radius:50%;right:-22px;top:-22px}
.language-art{background:#f6fff9}.language-orbit{position:absolute;inset:0}.language-orbit::before,.language-orbit::after{content:"";position:absolute;border:1px dashed rgba(17,21,47,.2);border-radius:50%;inset:25px 70px}.language-orbit::after{inset:46px 95px}.language-orbit span{position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 8px 18px rgba(17,21,47,.1);font-size:11px;font-weight:900}.language-orbit span:nth-child(1){left:18%;top:18%;color:#c84e39}.language-orbit span:nth-child(2){right:17%;top:16%;color:#326bab}.language-orbit span:nth-child(3){left:14%;bottom:12%;color:#7457ed}.language-orbit span:nth-child(4){right:18%;bottom:12%;color:#367a5f}.language-orbit b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:48px;color:var(--leaf)}
.milestone-art{background:linear-gradient(145deg,#ff8b72,#ff6d59);color:#fff;text-align:center;padding:25px}.milestone-art span{font-size:27px}.milestone-art strong{display:block;font:900 72px/.85 'Lato',sans-serif;margin-top:4px}.milestone-art b{font:italic 24px 'Playfair Display',serif}.milestone-art i{position:absolute;width:8px;height:8px;border:2px solid #fff;transform:rotate(35deg)}.milestone-art i:nth-of-type(1){left:28px;top:33px}.milestone-art i:nth-of-type(2){right:36px;top:62px}.milestone-art i:nth-of-type(3){left:65px;bottom:28px}
.growth-art{background:#fffaf0;padding:28px 34px}.growth-art span{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-muted)}.growth-art strong{display:block;font-size:24px;margin-top:5px}.growth-art svg{position:absolute;left:30px;right:30px;bottom:16px;width:calc(100% - 60px);height:105px;fill:none;stroke:var(--coral);stroke-width:4;stroke-linecap:round}.growth-art svg path:last-child{stroke:rgba(17,21,47,.1);stroke-width:1}
.book-art{background:#4f79b7;display:flex;justify-content:center;gap:3px;padding-top:18px}.book-art>div{width:42%;height:178px;background:#fffdf6;padding:22px;box-shadow:0 12px 25px rgba(17,21,47,.2)}.book-art>div:first-child{border-radius:8px 2px 2px 8px;transform:rotate(-2deg)}.book-art>div:last-child{border-radius:2px 8px 8px 2px;transform:rotate(2deg)}.book-art span{font-size:11px;color:var(--coral)}.book-art strong{display:block;font:italic 25px/1.05 'Playfair Display',serif;margin-top:25px}.book-art b{display:block;border-bottom:1px solid #e4dfd3;padding:8px 2px;font:italic 16px 'Playfair Display',serif}
.family-art{background:#fff;display:flex;align-items:center;justify-content:center}.family-art span{width:62px;height:62px;border:5px solid #fff;border-radius:50%;display:grid;place-items:center;margin-left:-12px;background:var(--c,#7457ed);color:#fff;font-weight:900;box-shadow:0 8px 18px rgba(17,21,47,.12)}.family-art span:nth-child(2){--c:#ff7a61}.family-art span:nth-child(3){--c:#5fa889}.family-art span:nth-child(4){--c:#4d84ce}.family-art b{position:absolute;bottom:19px;font-size:12px;color:var(--leaf)}

/* Chapter 03 — a stepped, physical process. */
#how{background:#fffaf4;padding:150px 0}#how .section-head{text-align:left;margin:0 0 75px;max-width:850px}#how .steps{grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}#how .step{border:0;border-radius:8px 40px 8px 8px;padding:0 24px 32px;box-shadow:0 20px 45px rgba(54,39,25,.08);min-height:440px}#how .step::before{height:210px;filter:saturate(.78)}#how .step:nth-child(1){background:#ffe4dc;transform:translateY(42px) rotate(-1.5deg)}#how .step:nth-child(2){background:#e7e0ff;transform:translateY(0) rotate(1deg)}#how .step:nth-child(3){background:#fff0bd;transform:translateY(66px) rotate(-.5deg)}#how .step:nth-child(4){background:#dcefe5;transform:translateY(20px) rotate(1.5deg)}#how .step .num{border-radius:8px;background:var(--ink);font-family:'Lato',sans-serif;font-size:12px}#how .step h3{font-size:24px}#how .step p{font-size:14px;line-height:1.65}

/* Chapter 04 — real screens as a loose contact sheet. */
#peek{background:#f2edff;padding:150px 0;overflow:hidden}#peek .section-head{margin-left:auto;margin-right:0;text-align:right}#peek .peek-grid{max-width:1240px;align-items:start;gap:38px}#peek .peek:nth-child(odd){margin-top:55px}#peek .peek:nth-child(1){transform:rotate(-2deg)}#peek .peek:nth-child(2){transform:rotate(1.5deg)}#peek .peek:nth-child(3){transform:rotate(-1deg)}#peek .peek:nth-child(4){transform:rotate(2deg)}#peek .peek .phone-sm{border-radius:48px;padding:9px;box-shadow:0 30px 60px rgba(49,38,92,.22)}#peek .peek figcaption{background:var(--paper);padding:15px 16px;border-radius:4px 14px 14px 14px;box-shadow:0 10px 25px rgba(49,38,92,.08);font-size:13px}

/* Chapter 05 — multilingual family ledger. */
.language-studio{position:relative;background:#dcefe5;padding:150px 0;overflow:hidden}.language-studio::before{content:"bonjour · hola · bună · hello · ciao";position:absolute;left:-2%;right:-2%;top:28px;white-space:nowrap;font:italic 42px/1 'Playfair Display',serif;color:rgba(44,101,77,.12);word-spacing:45px;transform:rotate(-1deg)}.language-grid{grid-template-columns:.72fr 1.28fr}.language-copy h2{font-family:'Playfair Display',serif}.language-copy h2::after{content:"One place.";display:block;color:var(--leaf);font-style:italic}.language-board{border:0;border-radius:8px 38px 8px 38px;padding:34px 40px;transform:rotate(1.4deg);box-shadow:18px 22px 0 rgba(95,168,137,.18),var(--shadow)}.word-row{padding:18px 0}.word-row strong{font-size:19px}.play{background:var(--violet);color:#fff}
.band{background:var(--coral);padding:92px 0}.band::before{content:"";position:absolute;width:380px;height:140px;background:var(--sun);border-radius:50%;left:-130px;bottom:-90px;transform:rotate(10deg)}.band h2{font-family:'Playfair Display',serif;font-size:clamp(2.5rem,4.4vw,4.8rem);max-width:1000px}.band .lede2{max-width:790px}.band .btn-primary{background:var(--ink);color:#fff}

/* Chapter 06 — immersive audio. */
.voice{padding:150px 0;background:#171833}.voice-grid{grid-template-columns:.72fr 1.28fr}.voice h2{font-family:'Playfair Display',serif;font-style:italic}.player{border-radius:8px 42px 42px 42px;padding:38px 42px;box-shadow:18px 18px 0 rgba(116,87,237,.28)}.player-word strong{font-size:48px}.big-play{width:72px;height:72px}.big-wave i:nth-child(3n){background:var(--coral)}.big-wave i:nth-child(4n){background:var(--sun)}

/* Chapter 07 — pinboard celebrations. */
.milestone-section{padding:150px 0;background:#ffefb9}.milestone-copy h2{font-family:'Playfair Display',serif}.celebrations{gap:24px}.celebrate{border:0;border-radius:4px 22px 22px 22px;min-height:190px;padding:30px;box-shadow:8px 10px 0 rgba(115,86,17,.09)}.celebrate:nth-child(1){background:#fff}.celebrate:nth-child(2){background:#ffe0d8}.celebrate:nth-child(3){background:#e4dcff}.celebrate:nth-child(4){background:#dcefe5}.celebrate::before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--coral);top:12px;left:50%;box-shadow:0 2px 5px rgba(0,0,0,.25)}

/* Chapter 08 — family network, deliberately not enterprise permissions UI. */
.family-circle{background:#eee9ff;padding:155px 0;overflow:hidden}.family-circle-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:100px;align-items:center}.family-visual{position:relative;height:620px}.orbit{position:absolute;border:2px dashed rgba(116,87,237,.25);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-one{width:520px;height:520px}.orbit-two{width:350px;height:350px;border-style:solid;border-color:rgba(116,87,237,.12)}.child-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:235px;height:275px;background:#fff;border-radius:48% 52% 45% 55%;padding:9px;box-shadow:var(--shadow);text-align:center}.child-core img{width:100%;height:225px;object-fit:cover;object-position:center 25%;border-radius:46% 54% 40% 60%}.child-core span{display:block;font:italic 18px 'Playfair Display',serif;color:var(--violet);margin-top:8px}.relative{position:absolute;background:#fff;padding:12px 18px 12px 12px;border-radius:40px;display:grid;grid-template-columns:48px auto;column-gap:10px;align-items:center;box-shadow:0 15px 35px rgba(49,38,92,.12)}.relative>span{grid-row:1/3;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font-weight:900}.relative strong{font-size:13px}.relative small{font-size:10px;color:var(--ink-muted)}.relative-one{--c:#ff7a61;left:2%;top:17%;transform:rotate(-4deg)}.relative-two{--c:#4d84ce;right:1%;top:25%;transform:rotate(3deg)}.relative-three{--c:#5fa889;left:3%;bottom:13%;transform:rotate(2deg)}.private-seal{position:absolute;right:3%;bottom:8%;width:125px;height:125px;border-radius:50%;background:var(--sun);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-8deg);box-shadow:0 15px 30px rgba(105,77,12,.12)}.private-seal>span{font-size:24px}.private-seal strong{font:italic 19px 'Playfair Display',serif}.private-seal small{font-size:10px}.family-copy h2{font-family:'Lato',sans-serif}.family-copy h2 em{font-family:'Playfair Display',serif;color:var(--violet);font-weight:600}.family-copy p{font-size:18px;line-height:1.75;color:var(--ink-muted);max-width:46ch;margin:24px 0}.family-copy ul{list-style:none;margin:0 0 28px;padding:0}.family-copy li{padding:10px 0;border-bottom:1px solid rgba(17,21,47,.1);font-weight:800}.family-copy li::before{content:"✓";color:var(--leaf);margin-right:12px}.text-link{font-weight:900;color:var(--ink);text-decoration:none}.text-link span{display:inline-block;margin-left:8px;color:var(--coral)}

/* Chapter 09 — physical keepsake on a blue table. */
.keepsake{background:#dfe9ff;padding:155px 0}.keepsake-grid{grid-template-columns:1.15fr .85fr}.book-scene{min-height:560px}.book-shadow{width:360px;height:460px;background:#ffdb6b}.book{width:340px;height:460px;background:#ff9079;padding:42px}.book strong{font-size:49px;margin-top:105px}.keepsake-copy h2{font-family:'Playfair Display',serif}.keepsake-copy::after{content:"Made to outlast the phone it was captured on.";display:block;margin-top:30px;font:italic 22px 'Playfair Display',serif;color:#3f66a2}

/* Editorial reading room rather than a generic blog card grid. */
#blog{background:#fffaf4;padding:150px 0}#blog .section-head{text-align:left;margin-left:0}#blog .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--ink)}#blog .post-card{border:0;border-bottom:1px solid rgba(17,21,47,.18);border-radius:0;background:transparent;padding:34px 30px 36px 0;min-height:220px}#blog .post-card:nth-child(odd){border-right:1px solid rgba(17,21,47,.18)}#blog .post-card:nth-child(even){padding-left:30px}#blog .post-card:hover{transform:none;background:#fff4e8;box-shadow:none;padding-left:22px}#blog .post-card:nth-child(even):hover{padding-left:52px}#blog .post-card h3{font-family:'Playfair Display',serif;font-size:27px}
#faq{padding:140px 0;background:#f8f5ff}.faq details{border:0;border-bottom:1px solid rgba(17,21,47,.16);border-radius:0;background:transparent;margin:0;padding:4px 8px}.faq details summary{font-size:20px}.cta-final{padding:130px 0;background:var(--coral)}.cta-final::before,.cta-final::after{content:"✦";position:absolute;font-size:80px;color:rgba(255,255,255,.35);left:6%;top:20%}.cta-final::after{left:auto;right:7%;top:auto;bottom:15%;font-size:44px}.cta-final h2{font-family:'Playfair Display',serif;font-style:italic}

@media(max-width:1100px){
  .hero-grid{grid-template-columns:.9fr 1.1fr}.hero-line{white-space:normal}.hero-photo{right:40px;width:75%}.hero-phone .phone{width:220px!important}.audio-float{width:230px}.milestone-float{display:none}
  #features .card:nth-child(n){grid-column:span 6}.story-copy{padding:42px}.family-circle-grid{gap:40px}.orbit-one{width:460px;height:460px}.family-visual{height:560px}
}
@media(max-width:760px){
  .hero{padding-top:108px;background:var(--lavender)}.hero-grid{display:flex}.hero h1{font-size:clamp(3.25rem,16vw,4.55rem);line-height:.89}.hero-line{white-space:normal}.hero-line.accent{margin:7px 0 10px}.hero-phone{min-height:600px}.hero-photo{right:-4%;width:94%;height:540px}.hero-phone .phone{right:-5px;left:auto;bottom:-32px;width:180px!important}.audio-float{left:-6px;bottom:0;width:204px}.hello-bubble{left:-2px;top:74px}.hero-photo-dot{right:-50px}
  .value-shell{grid-template-columns:1fr 1fr}.value{min-height:82px;justify-content:flex-start;padding:16px 14px}.value:nth-child(n){border-color:rgba(255,255,255,.18)!important}.value:last-child{grid-column:1/-1;justify-content:center}
  .story{padding:100px 0}.story-grid{grid-template-columns:1fr}.story-copy{transform:none;border-radius:20px 20px 0 0;padding:36px 28px}.story-image{height:430px}.story-image>img{border-radius:0 0 42px 10px;object-position:58% center}.story-date{right:6px}.story-note{left:10px}
  #features .section-head{text-align:left}#features .grid{display:block}#features .card:nth-child(n){margin-bottom:18px;min-height:430px}#features .card .feature-art{height:190px}
  #how .steps{display:block}#how .step:nth-child(n){transform:none;margin-bottom:20px;min-height:0}#how .step::before{height:180px}
  #peek .section-head{text-align:left;margin-left:0}#peek .peek-grid{grid-template-columns:1fr 1fr;gap:16px}#peek .peek:nth-child(n){margin-top:0;transform:none}#peek .peek figcaption{padding:12px 10px}
  .language-grid,.voice-grid,.milestone-grid,.keepsake-grid{grid-template-columns:1fr}.language-studio{padding:110px 0}.language-board{padding:20px;transform:none}.language-studio::before{font-size:28px}.voice{padding:110px 0}.player{padding:24px;box-shadow:10px 10px 0 rgba(116,87,237,.25)}.player-word strong{font-size:38px}.milestone-section{padding:110px 0}
  .family-circle{padding:110px 0}.family-circle-grid{grid-template-columns:1fr;gap:30px}.family-visual{height:520px;order:2}.family-copy{order:1}.orbit-one{width:420px;height:420px}.orbit-two{width:290px;height:290px}.child-core{width:200px;height:242px}.child-core img{height:194px}.relative{padding:9px 12px 9px 9px}.relative>span{width:40px;height:40px}.relative-one{left:0}.relative-two{right:0}.relative-three{left:0}.private-seal{width:105px;height:105px;right:0}
  .keepsake{padding:110px 0}.book-scene{min-height:450px}.book,.book-shadow{height:370px;width:260px}.book{padding:30px}.book strong{font-size:36px;margin-top:70px}
  #blog .grid{grid-template-columns:1fr}#blog .post-card:nth-child(n){border-right:0;padding:28px 12px}#blog .post-card:nth-child(n):hover{padding-left:22px}.cta-final::before,.cta-final::after{display:none}
}
@media(max-width:390px){.hero-phone{min-height:535px}.hero-photo{height:480px}.hero-phone .phone{width:158px!important}.audio-float{width:180px}.family-visual{height:480px}.orbit-one{width:360px;height:360px}.orbit-two{width:260px;height:260px}.relative small{display:none}.private-seal{bottom:4%}}

/* Visual-variety correction: dedicated sharing and physical-book photography. */
.family-visual{height:620px}.sharing-photo{position:absolute;left:-4%;top:50%;transform:translateY(-50%) rotate(-2deg);width:76%;height:520px;object-fit:cover;object-position:38% center;border-radius:58px 10px 58px 10px;box-shadow:0 28px 60px rgba(49,38,92,.16)}
.family-visual .orbit{left:78%;top:50%}.family-visual .orbit-one{width:330px;height:330px}.family-visual .orbit-two{width:220px;height:220px}.family-visual .child-core{left:78%;top:50%;width:155px;height:190px;padding:7px}.family-visual .child-core img{height:150px}.family-visual .child-core span{font-size:14px;margin-top:5px}.family-visual .relative{padding:10px 14px 10px 10px;grid-template-columns:42px auto}.family-visual .relative>span{width:42px;height:42px}.family-visual .relative strong{font-size:12px}.family-visual .relative small{font-size:9px}.family-visual .relative-one{left:60%;top:10%}.family-visual .relative-two{right:-5%;top:27%}.family-visual .relative-three{left:58%;bottom:9%}.family-visual .private-seal{right:-1%;bottom:10%;width:105px;height:105px}.family-visual .private-seal strong{font-size:17px}
.book-scene{min-height:560px;position:relative}.keepsake-photo{position:absolute;inset:0;width:100%;height:560px;object-fit:cover;border-radius:58px 10px 58px 10px;box-shadow:0 28px 65px rgba(54,78,122,.18)}.book-caption{position:absolute;left:-22px;bottom:30px;background:#fff;padding:18px 22px;border-radius:5px 18px 18px 18px;box-shadow:var(--shadow);transform:rotate(-2deg)}.book-caption strong,.book-caption span{display:block}.book-caption strong{font:italic 19px 'Playfair Display',serif;color:var(--coral)}.book-caption span{font-size:11px;color:var(--ink-muted);margin-top:4px}.book-sticker{position:absolute;right:-20px;top:24px;width:112px;height:112px;border-radius:50%;background:var(--sun);display:grid;place-items:center;text-align:center;font:italic 18px/1.15 'Playfair Display',serif;transform:rotate(9deg);box-shadow:0 14px 30px rgba(96,69,15,.13)}
@media(max-width:760px){.family-visual{height:650px}.sharing-photo{left:0;top:0;transform:none;width:100%;height:360px;border-radius:38px 8px}.family-visual .orbit-one{width:300px;height:300px;left:52%;top:78%}.family-visual .orbit-two{width:210px;height:210px;left:52%;top:78%}.family-visual .child-core{left:52%;top:78%;width:150px;height:185px}.family-visual .child-core img{height:145px}.family-visual .relative-one{left:0;top:61%}.family-visual .relative-two{right:0;top:69%}.family-visual .relative-three{left:0;bottom:0}.family-visual .private-seal{width:95px;height:95px;right:0;bottom:0}.book-scene{min-height:440px}.keepsake-photo{height:440px}.book-caption{left:8px;bottom:18px}.book-sticker{right:-5px;top:12px;width:94px;height:94px;font-size:15px}}
@media(max-width:390px){.family-visual{height:620px}.sharing-photo{height:335px}.family-visual .orbit-one{width:280px;height:280px}.family-visual .orbit-two{width:195px;height:195px}.family-visual .private-seal{bottom:1%}}

/* Production polish: deliberate safe areas, predictable crops, restrained overlap. */
@media(min-width:761px){
  .hero-photo{right:170px;width:66%;border-radius:46px 120px 46px 120px}
  .hero-phone .phone{right:0;transform:rotate(2deg)}
  .milestone-float{right:auto;left:64px;top:170px;transform:none;border-radius:18px}
  .hello-bubble{left:56px;top:88px;transform:rotate(-3deg)}
  .audio-float{left:26px;bottom:30px;transform:none}
  .story-grid{gap:28px}.story-copy{transform:none;border-radius:40px;padding:52px}.story-image>img{border-radius:40px}
  .story-note{left:24px;bottom:24px;transform:none}.story-date{right:18px;top:22px;transform:none}
  #how .steps{align-items:stretch}#how .step:nth-child(n){transform:none;min-height:460px}
  #peek .peek:nth-child(n){margin-top:0;transform:none}#peek .peek .phone-sm{border-radius:42px}
  .language-board{transform:none;border-radius:32px}
  .celebrate:nth-child(n){position:relative;transform:none;border-radius:18px}
  .sharing-photo{transform:translateY(-50%);border-radius:42px}.family-visual .relative:nth-of-type(n){transform:none}.family-visual .private-seal{transform:none}
  .book-caption{left:18px;bottom:22px;transform:none}.book-sticker{right:18px;top:20px;transform:none}
}
@media(max-width:1100px) and (min-width:761px){
  .hero-photo{right:120px;width:70%}.hero-phone .phone{right:-22px}.milestone-float{display:none}.audio-float{left:8px;width:220px}
  .story-grid{grid-template-columns:.9fr 1.1fr}.story-copy{padding:36px}.story-date{display:none}
  #how .steps{grid-template-columns:1fr 1fr}#how .step:nth-child(n){min-height:420px;margin-bottom:18px}
  #peek .peek-grid{grid-template-columns:repeat(2,1fr);max-width:760px}
}
@media(max-width:760px){
  .hero-photo{border-radius:34px 80px 34px 80px}.milestone-float{display:none}.hello-bubble{transform:none}.audio-float{transform:none}
  .story-note{left:16px;bottom:18px;transform:none}.story-date{right:12px;top:12px;transform:none}
  #features .card:hover{transform:none}#how .step:nth-child(n){transform:none}
  .language-board{transform:none;border-radius:24px}.celebrate:nth-child(n){position:relative;transform:none;border-radius:16px}
  .sharing-photo{transform:none}.family-visual .relative:nth-of-type(n){transform:none}.family-visual .private-seal{transform:none}
  .book-caption{transform:none}.book-sticker{transform:none}
}

/* Final spacing system: editorial, but controlled enough for production. */
@media(min-width:761px){
  .story{padding:120px 0}
  .features#features,#how,#peek,.language-studio,.voice,.milestone-section,#blog{padding:124px 0}
  .family-circle,.keepsake{padding:126px 0}
  #how .section-head{margin-bottom:58px}
  #peek .section-head,#blog .section-head{margin-bottom:54px}
}

/* Hero rebuild: text and product visual have separate, non-overlapping regions. */
h1,h2,h3,
.eyebrow,
.hero-line.accent,
.voice h2,
.cta-final h2,
.family-copy h2 em,
.language-copy h2::after{font-style:normal}

@media(min-width:1101px){
  .hero{min-height:820px;padding:122px 0 70px}
  .hero-grid{
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    gap:64px;
    min-height:628px;
  }
  .hero-copy{min-width:0;max-width:620px}
  .hero h1{
    max-width:100%;
    font-size:clamp(3.65rem,4vw,4.5rem);
    line-height:.96;
    letter-spacing:-.052em;
  }
  .hero-line{white-space:normal}
  .hero-line.accent{font-size:1em;margin:4px 0 7px}
  .hero-phone{min-width:0;min-height:628px}
  .hero-photo{left:0;right:auto;top:12px;width:calc(100% - 108px);height:604px;object-position:56% 42%;border-radius:42px 104px 42px 104px}
  .hero-phone .phone{right:0;bottom:-2px;width:238px!important;transform:none}
  .milestone-float{left:24px;top:152px;max-width:190px}
  .hello-bubble{left:26px;top:72px;transform:none;font-style:normal}
  .audio-float{left:24px;bottom:22px;width:236px}
}

/* Switch to a composed stack before the two columns become cramped. */
@media(max-width:1100px) and (min-width:761px){
  .hero{min-height:auto;padding:116px 0 70px}
  .hero-grid{display:flex;flex-direction:column;gap:54px;min-height:0}
  .hero-copy{order:1;max-width:720px}
  .hero h1{font-size:clamp(3.6rem,7.5vw,5rem);line-height:.98;letter-spacing:-.05em}
  .hero-line{white-space:normal}
  .hero-phone{order:2;width:100%;min-height:610px}
  .hero-photo{left:0;right:auto;top:0;width:calc(100% - 118px);height:590px;object-position:55% 40%}
  .hero-phone .phone{right:0;bottom:-8px;width:224px!important;transform:none}
  .hello-bubble{left:24px;top:62px;transform:none;font-style:normal}
  .audio-float{left:24px;bottom:18px}
  .milestone-float{display:none}
}

@media(max-width:760px){
  .hero h1{font-size:clamp(3rem,13vw,4.2rem);line-height:.98;letter-spacing:-.05em}
  .hero-line.accent{font-size:1em}
  .hello-bubble{font-style:normal}
}

/* ============================================================
   Contrast pass — WCAG AA.
   The palette is unchanged: every fill (coral, leaf, blue, violet)
   keeps its exact hue. Only the TEXT sitting on those fills moves to
   navy, because navy-on-coral is 7.0:1 where white-on-coral was 2.6:1.
   ============================================================ */
:root{
  /* violet darkened just enough to clear 4.5:1 on lavender, rose, mint,
     butter and paper — visually indistinguishable from --violet */
  --violet-text:#6848eb;
  /* coral for display text on light surfaces (>=24px, needs 3:1) */
  --coral-text-lg:#ff6042;
  /* coral for body-size text: clears 4.5:1 on every light surface it sits on
     (lavender, paper, white, rose, mint, butter) */
  --coral-text:#ca2000;
}

/* Small caps kickers / eyebrow sat at 4.1:1 on tinted panels */
.kicker{color:var(--violet-text)}
.eyebrow{color:var(--violet-text)}

/* The coral band: gold kicker was 1.66:1 and white text 2.56:1 */
.band .kicker{color:var(--ink)!important}
.band h2{color:var(--ink)}
.band .lede2{color:rgba(17,21,47,.82)}

/* White text on coral fills */
.hello-bubble{color:var(--ink)}
.big-play{color:var(--ink)}

/* Family initials: all four letters navy, so the row reads as one decision.
   Navy clears AA on coral (7.0), leaf (6.4) and blue (4.7). The violet circle
   is nudged one step lighter (#7457ed -> #846aef) so navy clears 4.5 there too;
   this is the avatar fill only and leaves --violet untouched everywhere else. */
.family-art span,
.relative>span{color:var(--ink)}
.family-art span:nth-child(1){--c:#846aef;background:#846aef}

/* Coral display text on light surfaces */
.story-note{color:var(--coral-text-lg)}

/* Touch target: the inline play button was 42px */
.play{min-width:44px;min-height:44px}

/* Only hover/press transitions exist, but honour the preference anyway */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* Remaining coral-on-light text at body size */
.text-link span{color:var(--coral-text)}
.book-art span{color:var(--coral-text)}
/* nudge display coral past 3:1 rather than sitting exactly on it */
.story-note{color:#ff5c3d}

/* ============================================================
   Waitlist form.
   The pill now wraps ONLY the input + button (.wl-row). The status
   message and consent notice live outside it, so an empty status
   message can no longer inflate the pill with dead space.
   ============================================================ */
.hero .wl-form{
  background:transparent;border:0;box-shadow:none;padding:0;
  display:block;max-width:540px;margin:0;
}
.hero .wl-row{
  display:flex;align-items:center;gap:8px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:7px;
  box-shadow:0 14px 45px rgba(55,41,116,.12);
}
.hero .wl-row input[type=email]{flex:1 1 auto;min-width:0}
.hero .wl-row button{flex:0 0 auto}

/* Status message: no reserved space until it actually says something.
   It only appears after a submit, so the reflow is user-initiated and
   is not counted against CLS. */
.hero .wl-msg{padding-inline:4px;margin-top:10px;min-height:0}
.hero .wl-msg:empty{display:none;margin:0}

/* Consent notice: restored. This is the disclosure for collecting the
   address, so it belongs at the point of collection, not hidden. */
.hero .wl-consent{
  display:block;margin-top:12px;padding-inline:4px;
  font-size:12px;line-height:1.55;max-width:48ch;
  color:var(--ink-muted);
}
.hero .wl-consent a{color:var(--ink-muted);text-decoration:underline}

@media(max-width:760px){
  .hero .wl-row{display:grid;grid-template-columns:1fr;gap:8px}
  .hero .wl-row input[type=email],.hero .wl-row button{width:100%}
}

/* Play buttons are disabled until real recordings exist. Dimmed + not-allowed
   so the affordance reads as "not yet" rather than "broken": a visitor who
   presses one and hears nothing is worse than one who never presses. */
.play:disabled,
.big-play:disabled{
  opacity:.42;
  cursor:not-allowed;
  box-shadow:none;
}
.play:disabled:hover,
.big-play:disabled:hover{transform:none}

/* Coral caption text on white was 2.56:1 */
.book-caption strong{color:var(--coral-text)}

/* The accent line needs room below it: at the original 8px there was nowhere to
   put the swash that didn't either cross the descenders or hit "they speak." */
.hero-line.accent{margin-bottom:.48em}

/* Hero accent swash — real crayon scan.
   The PNG is a MASK, not an image: its alpha carries the grain, the colour
   comes from --coral underneath, so the brand hex stays exact and the stroke
   can be recoloured for free. Height is tuned to sit near the scan's natural
   aspect (~64:1) — stretching it thicker would smear the grain vertically. */
.hero-line.accent::after{
  content:"";
  position:absolute;
  left:-6%;
  right:-7%;
  bottom:-.40em;
  height:.17em;
  border:0;
  border-radius:0;
  transform:rotate(-.5deg);
  background:var(--coral);
  -webkit-mask:url("/crayon-stroke.png") no-repeat center/100% 100%;
  mask:url("/crayon-stroke.png") no-repeat center/100% 100%;
}

/* Button icons. The "See how it works ↓" arrow was a raw text glyph: it rendered
   in Lato at the label's weight, sat on the text baseline rather than optically
   centred, and got no reliable spacing. As an SVG child of the inline-flex .btn
   it inherits the 8px gap, centres itself, and tracks currentColor.
   The nudge on hover echoes the scroll it triggers (the global
   prefers-reduced-motion block above already neutralises it). */
.btn .btn-i{
  flex:0 0 auto;
  transition:transform .2s ease;
}
.btn:hover .btn-i{transform:translateY(2px)}

/* Card icons were Unicode dingbats (✦ ☀ ♡ ❋) sized with font-size — four glyphs
   from four Unicode blocks, so they fell back to different fonts per platform
   (♡ could even render as a colour emoji) and shared no stroke weight or optical
   size. Replaced with one SVG family: 24px box, 1.6 stroke, currentColor. */
.celebrate .ic-c,
.milestone-art .ic-c{
  display:block;
  color:var(--ink);
}
/* inline heart in the handwritten story note: sits with the text, not on it */
.story-note .ic-inline{display:inline-block;vertical-align:-2px;margin-left:2px}
.private-seal .ic-c{display:block;margin-inline:auto}

/* Display tracking.
   h1 shipped at letter-spacing:-.06em (-3px at 58px), which jammed the letters
   together — "Every first word" read as fused. Note this ALSO silently disabled
   Lato's fi/fl ligatures: browsers drop optional ligatures whenever
   letter-spacing is non-zero, so the fusing was never a ligature, it was tracking.
   -.02em keeps display type tight without gluing. */
h1{letter-spacing:-.02em}
/* .hero h1 (0,1,1) is set three times in this file and outranks a bare h1,
   including inside the breakpoint overrides — match it to actually win. */
.hero h1{letter-spacing:-.02em}