(not /, which would break the sticky nav). */ main{overflow-x:clip} .wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad-x)} .wrap--900{max-width:900px} .wrap--860{max-width:860px} .wrap--800{max-width:800px} /* ===================================================================== Nav ===================================================================== */ .nav{position:sticky;top:0;z-index:60;background:rgba(251,244,233,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)} .nav__inner{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,30px);display:flex;align-items:center;gap:clamp(6px,2vw,20px);height:74px} .brand{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:800;color:var(--ink)} .brand:hover{color:var(--ink)} .brand__disc{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:grid;place-items:center;overflow:hidden} .brand__disc img{width:34px;height:34px;object-fit:contain} .nav__spacer{flex:1} .nav__links{display:flex;align-items:center;gap:clamp(3px,1.6vw,16px);font-size:14.5px;font-weight:500} .nav__link{color:var(--ink);padding:6px 8px;border-radius:12px;transition:background .15s} .nav__link:hover{color:var(--ink)} .nav__link--home:hover,.nav__link--home[aria-current="page"]{background:var(--yellow)} .nav__link--about:hover,.nav__link--about[aria-current="page"]{background:var(--sage)} .nav__link--contact:hover,.nav__link--contact[aria-current="page"]{background:var(--sky)} .nav__link--privacy:hover,.nav__link--privacy[aria-current="page"]{background:var(--lilac-soft)} .lang{border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:30px;padding:7px 15px;font-size:13px;font-weight:700; cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.15s;white-space:nowrap} .lang:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)} /* Mobile disclosure menu (production addition — see README responsive gaps) */ .nav__toggle{display:none;width:44px;height:44px;flex:0 0 44px;border:2px solid var(--ink);background:#fff;border-radius:14px; cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.15s;padding:0;place-items:center} .nav__toggle:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)} .nav__toggle-bars{display:block;width:20px;height:2px;background:var(--ink);position:relative} .nav__toggle-bars::before,.nav__toggle-bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)} .nav__toggle-bars::before{top:-6px} .nav__toggle-bars::after{top:6px} .nav__toggle[aria-expanded="true"] .nav__toggle-bars{background:transparent} .nav__toggle[aria-expanded="true"] .nav__toggle-bars::before{top:0;transform:rotate(45deg)} .nav__toggle[aria-expanded="true"] .nav__toggle-bars::after{top:0;transform:rotate(-45deg)} .nav__mobile{display:none;border-top:2px solid var(--ink);background:var(--cream)} .nav__mobile[data-open="true"]{display:block} .nav__mobile ul{list-style:none;margin:0;padding:10px clamp(16px,4vw,30px) 16px;display:flex;flex-direction:column;gap:6px} .nav__mobile a{display:block;padding:12px 14px;border-radius:16px;font-size:16px;font-weight:700;color:var(--ink);border:2px solid transparent} .nav__mobile a:hover,.nav__mobile a[aria-current="page"]{border-color:var(--ink);background:#fff;box-shadow:3px 3px 0 var(--ink)} /* ===================================================================== Shared pieces ===================================================================== */ .eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--terracotta);margin-bottom:10px} .pill{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.14em;color:var(--ink);border:2px solid var(--ink); border-radius:20px;padding:4px 14px} .pill--sky{background:var(--sky);transform:rotate(-1.5deg)} .pill--pink{background:var(--pink);transform:rotate(1.5deg)} .pill--yellow{background:var(--yellow);border-color:transparent;transform:rotate(-1.5deg);color:var(--ink-night)} .btn{display:inline-block;border:2px solid var(--ink);border-radius:40px;padding:16px 32px;font-size:16px;font-weight:700; cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:.15s;text-align:center;line-height:1.4; background:#fff;color:var(--ink)} .btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)} .btn--primary{background:var(--green);color:#fff} .btn--primary:hover{color:#fff} .btn--white{background:#fff;color:var(--ink);padding:16px 26px} .btn--white:hover{color:var(--ink)} .btn--store{background:var(--yellow);color:var(--ink);font-weight:800;padding:16px 34px} .btn--store:hover{color:var(--ink)} .btn--store-alt{background:#fff;color:var(--ink);font-weight:800;padding:16px 30px} .btn--store-alt:hover{color:var(--ink)} .chips{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 0;padding:0;list-style:none;font-size:13px;font-weight:700} .chip{border:2px solid var(--ink);border-radius:20px;padding:4px 13px} .chip--sky{background:var(--sky);transform:rotate(-2deg)} .chip--sage{background:var(--sage);transform:rotate(1.5deg)} .chip--pink{background:var(--pink);transform:rotate(-1deg)} .section{max-width:1200px;margin:0 auto;padding:0 var(--pad-x) clamp(46px,6vw,80px)} .section--first{padding-top:clamp(46px,6vw,84px)} .section--how{padding-top:clamp(20px,3vw,40px);padding-bottom:clamp(46px,6vw,80px)} .section--cta{padding-bottom:clamp(60px,8vw,100px)} .section--full{max-width:none;padding-inline:var(--pad-x)} /* ===================================================================== 1 · Hero ===================================================================== */ .hero{position:relative;overflow:hidden;padding:clamp(26px,4vw,52px) 0 clamp(24px,4vw,40px)} .hero__blob-a{position:absolute;inset-inline-start:-90px;top:40px;width:280px;height:280px;border-radius:50%;background:var(--sage);opacity:.5} .hero__blob-b{position:absolute;inset-inline-end:-60px;top:260px;width:180px;height:180px;border-radius:50%;background:var(--peach);opacity:.55} .hero__path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hero__path path{stroke-dashoffset:1800;animation:wdraw 3s linear forwards .2s} .hero__grid{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding-inline:var(--pad-x); display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(26px,4vw,50px);align-items:center} .hero__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;background:#fff;border:2px solid var(--ink); padding:7px 16px;border-radius:30px;margin-bottom:20px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg)} .hero__eyebrow-dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--green)} .hero h1{font-size:clamp(36px,6vw,68px);line-height:1.18;letter-spacing:-1px;font-weight:800;margin:0 0 18px} .mark{position:relative;display:inline-block;color:var(--ink)} .mark::before{content:"";position:absolute;inset-inline:-6px;bottom:2px;height:16px;background:var(--yellow);border-radius:8px;z-index:0} html[lang="en"] .mark::before{bottom:6px} .mark span{position:relative;z-index:1} .hero__lead{font-size:clamp(16px,2vw,19px);color:var(--body);max-width:480px;margin:0 0 12px} .hero__note{font-size:14.5px;color:var(--muted);margin:0 0 26px} .cta-row{display:flex;gap:12px;flex-wrap:wrap} .hero__visual{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:clamp(430px,48vw,580px)} .hero__shot{display:block;transform:rotate(2.5deg);width:min(288px,68vw);object-fit:contain;filter:drop-shadow(10px 12px 0 rgba(42,36,30,.9))} .hero__owl{position:absolute;height:clamp(120px,15vw,170px);inset-inline-start:-2%;bottom:-10px;object-fit:contain;z-index:2;animation:wfloat 5.5s ease-in-out infinite} .hero__bubble{position:absolute;left:50%;top:-6px;transform:translateX(-50%) rotate(-1.5deg);z-index:3;background:#fff;border:2px solid var(--ink); border-radius:18px;padding:9px 16px;font-size:13.5px;font-weight:700;box-shadow:4px 4px 0 var(--ink);white-space:nowrap} .hero__dot-lilac{position:absolute;inset-inline-end:2%;top:8%;width:54px;height:54px;border-radius:50%;background:var(--lilac); border:2px solid var(--ink);animation:wfloat2 6s ease-in-out infinite} .hero__dot-amber{position:absolute;inset-inline-end:16%;bottom:8%;width:26px;height:26px;border-radius:50%;background:var(--amber);border:2px solid var(--ink)} /* ===================================================================== 2 · Marquee ===================================================================== */ .marquee{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--yellow);overflow:hidden;padding:12px 0} .marquee__inner{display:flex;width:200%;animation:wmarq 26s linear infinite} .marquee__row{display:flex;gap:34px;width:50%;flex:0 0 50%;font-size:15px;font-weight:800;white-space:nowrap} .marquee__row > span{display:flex;gap:34px} /* ===================================================================== 3 · Companion / mood card ===================================================================== */ .mood-card{background:#fff;border:3px solid var(--ink);border-radius:40px;box-shadow:10px 10px 0 var(--ink);padding:clamp(26px,4vw,44px); display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,40px);align-items:center} .mood-card h2{font-size:clamp(24px,3.6vw,38px);font-weight:800;line-height:1.28;margin:0 0 10px} .mood-card h2 .accent{color:var(--green)} .mood-card__body{color:var(--muted-2);font-size:15.5px;margin:0 0 18px} .swatches{display:flex;gap:10px;flex-wrap:wrap;padding:0;margin:0;list-style:none} .swatch{width:62px;height:62px;padding:0;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;cursor:pointer; box-shadow:2px 2px 0 var(--ink);transition:.15s} .swatch:hover{transform:translateY(-4px) rotate(-4deg)} .swatch[aria-pressed="true"]{box-shadow:4px 4px 0 var(--ink)} .swatch img{width:44px;height:44px;object-fit:contain;pointer-events:none} .mood-stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:280px} .mood-bubble{position:relative;background:var(--cream);border:2px solid var(--ink);border-radius:24px;padding:16px 22px;font-size:16px; font-weight:700;box-shadow:5px 5px 0 var(--ink);max-width:290px;text-align:center} .mood-tail{width:16px;height:16px;background:var(--cream);border-inline-end:2px solid var(--ink);border-bottom:2px solid var(--ink); transform:rotate(45deg);margin-top:-22px} .mood-disc{width:190px;height:190px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);display:grid;place-items:center; box-shadow:8px 8px 0 var(--ink)} .mood-disc img{width:150px;height:150px;object-fit:contain} /* ===================================================================== 4 · How it works ===================================================================== */ .how__head{max-width:660px;margin:0 auto clamp(34px,5vw,56px);text-align:center} .how__head .pill{margin-bottom:16px} .how__head h2{font-size:clamp(26px,4vw,42px);font-weight:800;line-height:1.26;margin:0 0 12px} .how__head p{color:var(--muted);font-size:15.5px;margin:0} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(20px,3vw,28px);list-style:none;margin:0;padding:0} .step{border:3px solid var(--ink);border-radius:36px;box-shadow:8px 8px 0 var(--ink);padding:28px 24px 0;display:flex;flex-direction:column} .step--1{background:var(--sage)} .step--2{background:var(--sky)} .step--3{background:var(--peach)} .step__num{width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--ink);display:grid;place-items:center; font-size:19px;font-weight:800;margin-bottom:14px} .step h3{font-size:21px;font-weight:800;margin:0 0 8px} html[lang="en"] .step h3{font-size:23px;font-weight:700} .step p{color:var(--body-2);font-size:14.5px;margin:0 0 6px} .step__hint{font-size:13px;margin:0 0 18px !important} .step--1 .step__hint{color:#5d6b5f} .step--2 .step__hint{color:#4a6b78} .step--3 .step__hint{color:#7a5a36} .step__shotwrap{margin-top:auto;display:flex;justify-content:center} .step__shot{width:min(206px,58vw);object-fit:contain;margin-bottom:-18px;filter:drop-shadow(0 14px 18px rgba(42,36,30,.28))} /* ===================================================================== 5 · Feature grid ===================================================================== */ .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;list-style:none;margin:0;padding:0} .feature{background:#fff;border:2px solid var(--ink);border-radius:28px;padding:24px;box-shadow:6px 6px 0 var(--ink)} .feature:nth-child(1){transform:rotate(-1deg)} .feature:nth-child(2){transform:rotate(1deg)} .feature:nth-child(3){transform:rotate(-1.5deg)} .feature:nth-child(4){transform:rotate(1.2deg)} .feature:nth-child(5){transform:rotate(-.8deg)} .feature__icon{display:inline-block;width:34px;height:34px;border:2px solid var(--ink);margin-bottom:14px} .feature__icon--a{border-radius:12px;background:var(--sage)} .feature__icon--b{border-radius:50%;background:var(--yellow)} .feature__icon--c{border-radius:10px 22px 10px 22px;background:var(--pink)} .feature__icon--d{border-radius:50% 50% 12px 12px;background:var(--lilac)} .feature__icon--e{border-radius:12px;background:var(--muted)} .feature h3{font-size:17.5px;font-weight:800;margin:0 0 6px} html[lang="en"] .feature h3{font-size:19px;font-weight:700} .feature p{color:var(--muted);font-size:14px;margin:0} /* ===================================================================== 6 · Co-study ===================================================================== */ .costudy{position:relative;background:var(--pink);border:3px solid var(--ink);border-radius:40px;box-shadow:10px 10px 0 var(--ink); padding:clamp(26px,4vw,44px)} .costudy__tag{position:absolute;top:-14px;inset-inline-start:8%;background:#fff;border:2px solid var(--ink);border-radius:20px; padding:2px 14px;font-size:12.5px;font-weight:800;transform:rotate(-2deg)} .costudy__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(24px,4vw,40px);align-items:center} .costudy h2{font-size:clamp(24px,3.6vw,38px);font-weight:800;line-height:1.28;margin:0 0 12px} .costudy h2 .boxed{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:0 10px;display:inline-block} .costudy p{color:var(--body-2);font-size:15.5px;margin:0 0 12px} .costudy .costudy__fine{color:#5a4a4a;font-size:13.5px;margin:0} .costudy__shots{display:flex;gap:14px;justify-content:center;align-items:flex-start;flex-wrap:wrap} .costudy__shots img{width:min(196px,44vw);object-fit:contain;filter:drop-shadow(6px 8px 0 rgba(42,36,30,.85))} .costudy__shots img:first-child{transform:rotate(-2.5deg)} .costudy__shots img:last-child{transform:rotate(2.5deg)} /* ===================================================================== 7 · Night mode ===================================================================== */ .night{position:relative;overflow:hidden;max-width:1200px;margin:0 auto;background:var(--ink-night);border:3px solid var(--ink); border-radius:40px;box-shadow:10px 10px 0 var(--green);display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(30px,5vw,56px)} .night__star{position:absolute;border-radius:50%} .night__star--1{top:34px;inset-inline-end:14%;width:8px;height:8px;background:var(--yellow)} .night__star--2{top:80px;inset-inline-end:26%;width:5px;height:5px;background:#fff;opacity:.7} .night__star--3{bottom:60px;inset-inline-start:10%;width:6px;height:6px;background:var(--sky)} .night h2{font-size:clamp(24px,3.6vw,38px);font-weight:800;line-height:1.3;color:var(--cream);margin:0 0 14px} .night p{color:rgba(251,244,233,.78);font-size:15.5px;margin:0} .night__visual{display:flex;justify-content:center;position:relative} .night__shot{display:block;transform:rotate(-2.5deg);width:min(244px,58vw);object-fit:contain;filter:drop-shadow(8px 10px 0 rgba(251,244,233,.28))} .night__owl{position:absolute;height:96px;inset-inline-end:-6px;bottom:-14px;object-fit:contain;animation:wfloat2 6.5s ease-in-out infinite} /* ===================================================================== 8 · FAQ ===================================================================== */ .faq__head{text-align:center;margin-bottom:28px} .faq__head .pill{margin-bottom:14px} .faq__head h2{font-size:clamp(24px,3.6vw,36px);font-weight:800;margin:0} .faq__list{display:flex;flex-direction:column;gap:14px} .faq__item{background:#fff;border:2px solid var(--ink);border-radius:24px;box-shadow:5px 5px 0 var(--ink);overflow:hidden} .faq__q{width:100%;display:flex;align-items:center;gap:14px;background:none;border:0;padding:18px 22px;cursor:pointer;text-align:start;color:var(--ink)} .faq__h{margin:0;font-size:16.5px;font-weight:800;line-height:1.6} .faq__text{flex:1;text-align:start} .faq__sign{width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:grid; place-items:center;font-size:17px;font-weight:800;line-height:1} .faq__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease} .faq__item.is-open .faq__panel{grid-template-rows:1fr} .faq__panel > div{overflow:hidden} .faq__panel p{color:var(--muted-2);font-size:14.5px;margin:0;padding:0 22px 18px;padding-inline-end:calc(22px + 40px)} /* ===================================================================== 9 · Download CTA ===================================================================== */ .cta{position:relative;overflow:hidden;text-align:center;background:var(--green);border:3px solid var(--ink);border-radius:44px; box-shadow:12px 12px 0 var(--ink);padding:clamp(36px,5vw,64px) clamp(22px,4vw,40px)} .cta__circle{position:absolute;top:26px;inset-inline-start:8%;width:40px;height:40px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink)} .cta__square{position:absolute;bottom:34px;inset-inline-end:10%;width:26px;height:26px;border-radius:8px;background:var(--sky); border:2px solid var(--ink);transform:rotate(18deg)} .cta__owl{height:clamp(120px,15vw,160px);object-fit:contain;display:block;margin:0 auto 18px;animation:wfloat 5s ease-in-out infinite} .cta h2{font-size:clamp(28px,4.2vw,44px);font-weight:800;color:#fff;margin:0 0 12px} .cta__lead{color:rgba(255,255,255,.9);font-size:16px;max-width:430px;margin:0 auto 26px} .cta__buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:6} .cta__fine{color:rgba(255,255,255,.8);font-size:12.5px;margin:20px 0 0} /* ===================================================================== 10 · About ===================================================================== */ .page{max-width:860px;margin:0 auto;padding:clamp(34px,5vw,64px) var(--pad-x)} .page--800{max-width:800px} .page h1{font-size:clamp(30px,5vw,48px);font-weight:800;margin:0 0 10px} .page__sub{color:var(--muted);font-size:15.5px;margin:0 0 26px} .statement{background:var(--yellow);border:3px solid var(--ink);border-radius:32px;box-shadow:8px 8px 0 var(--ink);padding:26px 28px;margin-bottom:30px} .statement p{margin:0;font-size:16.5px;font-weight:700} .statement u{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px} .team{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;list-style:none;margin:0;padding:0} .team__card{background:#fff;border:3px solid var(--ink);border-radius:32px;padding:26px} .team__card--a{box-shadow:8px 8px 0 var(--green);transform:rotate(-1deg)} .team__card--b{box-shadow:8px 8px 0 var(--lilac);transform:rotate(1deg)} .team__avatar{display:block;width:112px;height:112px;border-radius:50%;border:2px solid var(--ink);overflow:hidden;margin-bottom:16px} .team__card--a .team__avatar{background:var(--sage)} .team__card--b .team__avatar{background:var(--lilac-soft)} .team__avatar img{width:100%;height:100%;object-fit:cover;display:block} .team__card--a .team__avatar img{object-position:50% 30%} .team__card--b .team__avatar img{object-position:50% 22%;transform:scale(1.06)} .team__card h3{font-size:20px;font-weight:800;margin:0 0 3px} html[lang="en"] .team__card h3{font-size:22px;font-weight:700} .team__role{font-size:13.5px;font-weight:700;margin-bottom:10px} .team__card--a .team__role{color:var(--green)} .team__card--b .team__role{color:#7a6bb0} .team__card p{color:#4f4943;font-size:14.5px;margin:0} .status{margin-top:30px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:var(--sky);border:3px solid var(--ink); border-radius:32px;box-shadow:8px 8px 0 var(--ink);padding:24px 26px} .status img{width:82px;height:82px;object-fit:contain;flex:0 0 82px;animation:wfloat2 6s ease-in-out infinite} .status__text{flex:1;min-width:220px} .status h2{font-size:21px;font-weight:800;margin:0 0 6px} html[lang="en"] .status h2{font-size:23px;font-weight:700} .status p{color:#31414a;font-size:15px;margin:0} /* ===================================================================== 11 · Contact ===================================================================== */ .contact__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-bottom:24px} .contact__card{display:block;border:3px solid var(--ink);border-radius:30px;padding:26px;color:var(--ink);box-shadow:7px 7px 0 var(--ink);transition:.15s} .contact__card:hover{color:var(--ink)} .contact__card--a{background:var(--sage);transform:rotate(-1deg)} .contact__card--a:hover{transform:rotate(-1deg) translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)} .contact__card--b{background:var(--peach);transform:rotate(1deg)} .contact__card--b:hover{transform:rotate(1deg) translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)} .contact__card img{width:60px;height:60px;object-fit:contain;margin-bottom:10px} .contact__card h3{font-size:18px;font-weight:800;margin:0 0 5px} html[lang="en"] .contact__card h3{font-size:20px;font-weight:700} .contact__card--a p{color:#41544a;font-size:13.5px;margin:0} .contact__card--b p{color:#5c452b;font-size:13.5px;margin:0} .contact__mail{font-size:14.5px;margin-top:10px;direction:ltr;text-align:start;font-weight:800} .note-card{background:#fff;border:2px solid var(--ink);border-radius:24px;padding:20px 24px;font-size:14.5px;box-shadow:5px 5px 0 var(--ink)} /* ===================================================================== 12 · Privacy ===================================================================== */ .privacy__date{color:var(--muted);font-size:14px;margin:0 0 24px} .privacy__summary{background:#fff;border:3px solid var(--ink);border-radius:28px;padding:22px 26px;margin-bottom:26px;box-shadow:7px 7px 0 var(--sage)} .privacy__summary p{margin:0;font-size:15.5px;font-weight:700} .privacy h2{font-size:20px;font-weight:800;margin:28px 0 12px} html[lang="en"] .privacy h2{font-size:22px;font-weight:700} .privacy ul{padding-inline-start:22px;margin:0;color:#4f4943;font-size:15px} .privacy li{margin-bottom:8px} .privacy p{color:#4f4943;font-size:15px;margin:0 0 12px} /* ===================================================================== Footer ===================================================================== */ .footer{border-top:2px solid var(--ink);background:#fff;padding:clamp(34px,4vw,52px) 0 30px} .footer__grid{max-width:1200px;margin:0 auto;padding-inline:var(--pad-x);display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px} .footer__brand{max-width:290px} .footer__logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;margin-bottom:10px;color:var(--ink)} .footer__logo span.disc{width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:grid;place-items:center} .footer__logo img{width:28px;height:28px;object-fit:contain} .footer__tag{color:var(--muted);font-size:13.5px;margin:0} .footer__links{display:flex;flex-direction:column;gap:8px;font-size:13.5px;font-weight:500;list-style:none;margin:0;padding:0} .footer__links a{color:var(--muted)} .footer__links a:hover{color:var(--green)} .footer__credits{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--muted)} .footer__credits .ltr{direction:ltr;text-align:start} .footer__bottom{text-align:center;color:var(--muted);font-size:12px;margin-top:30px} /* ===================================================================== Animations ===================================================================== */ @keyframes wfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-2deg)}} @keyframes wfloat2{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-10px) rotate(-3deg)}} @keyframes wpop{0%{transform:scale(.86)}60%{transform:scale(1.06)}100%{transform:scale(1)}} @keyframes wdraw{to{stroke-dashoffset:0}} @keyframes wmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes wconf{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}} html.js [data-reveal]{opacity:0} /* ===================================================================== Responsive — production additions over the prototype ===================================================================== */ @media (max-width:860px){ /* One column below tablet: the hero text gets the full measure instead of a 330px column */ .hero__grid{grid-template-columns:1fr;gap:34px} .hero__visual{min-height:0;margin-top:56px;padding-bottom:10px} .hero__shot{width:min(260px,60vw)} .hero__bubble{top:-48px;white-space:normal;max-width:min(320px,84vw);text-align:center} .hero__owl{height:clamp(96px,20vw,150px);inset-inline-start:0;bottom:-6px} .hero__lead{max-width:none} .hero__blob-b{top:auto;bottom:8%;width:140px;height:140px} /* the dashed path is drawn for a wide two-column hero; on a narrow one it reads as a scribble */ .hero__path{display:none} } /* Tablet / phone: swap the inline nav for a disclosure menu */ @media (max-width:760px){ .nav__inner{height:66px;gap:10px} .nav__links{display:none} .nav__toggle{display:grid} .brand{font-size:19px} .brand__disc{width:38px;height:38px;flex:0 0 38px} .brand__disc img{width:29px;height:29px} .lang{padding:7px 13px} .hero{padding-top:18px} .hero__shot{width:min(250px,60vw)} .hero__owl{height:clamp(96px,22vw,130px);inset-inline-start:-4px} .hero__dot-lilac{width:40px;height:40px;top:2%} .hero__dot-amber{width:20px;height:20px;inset-inline-end:6%;bottom:4%} .hero__blob-a{width:200px;height:200px;inset-inline-start:-70px} } @media (max-width:600px){ .mood-card{border-radius:32px;box-shadow:8px 8px 0 var(--ink)} .mood-stage{min-height:0} .mood-disc{width:160px;height:160px} .mood-disc img{width:126px;height:126px} .swatch{width:56px;height:56px} .swatch img{width:40px;height:40px} .costudy,.night{border-radius:32px} .costudy__shots{padding-inline:10px} .costudy__shots img{width:min(160px,40vw)} .cta{border-radius:36px;box-shadow:9px 9px 0 var(--ink)} .cta__circle{width:28px;height:28px;top:18px} .cta__square{width:20px;height:20px;bottom:24px} .btn{width:100%} .cta-row,.cta__buttons{width:100%} .faq__q{padding:16px 18px;gap:10px} .faq__h{font-size:15.5px} .faq__panel p{padding:0 18px 16px;padding-inline-end:24px} .team__card--a,.team__card--b{transform:none} .team__card--a:hover,.team__card--b:hover{transform:none} .contact__card--a,.contact__card--b{transform:none} .contact__card--a:hover,.contact__card--b:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)} .status{gap:14px;padding:20px} .marquee__row{font-size:13.5px;gap:24px} .marquee__row > span{gap:24px} } @media (max-width:400px){ .step{padding:22px 18px 0;border-radius:30px} .feature{padding:20px} .night{padding:26px 20px} .statement{padding:22px 20px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .hero__path path{stroke-dashoffset:0} .marquee__inner{animation:none} html.js [data-reveal]{opacity:1 !important} } /* Sticky-header offset for in-page anchors (replaces the prototype's -84px scroll maths) */ #how,#download{scroll-margin-top:90px}