/* Folio landing page. Notebook-paper look. Toy files (toys-page.css, toys-study.css) rely on the :root tokens below. */ @property --ang{syntax:"";inherits:false;initial-value:0deg} :root{ --paper:#FBF7EE; --surface:#F3EDE0; --sheet:#FFFDF8; --line:#E4DCCB; --ink:#1D1B2E; --ink-2:#5E5B70; --ink-3:#8C889C; --hl:#FFD84D; --margin:#C2352B; --rule:#B9C4F0; --accent:#4A55C9; --accent-2:#8F9BFF; --night:#1D1B2E; --night-2:#26243A; --night-3:#2C2A40; --night-line:#3A3852; --on-night:#FBF7EE; --on-night-2:#A9A6BD; --m-pink:#FEB4C2; --m-mint:#9BFBE1; --m-lime:#BFFA37; --m-mocha:#C3938B; --m-coral:#E79388; --f-display:"Instrument Serif",Georgia,serif; --f-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif; --f-hand:"Kalam",cursive; --r-card:24px; --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.22,1,.36,1); --gut:24px; --shadow-card:0 1px 0 rgba(29,27,46,.04),0 18px 40px -24px rgba(29,27,46,.25); } *,*::before,*::after{box-sizing:border-box} *{margin:0} html{background:var(--paper);overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%} body{ font:400 18px/1.55 var(--f-sans);color:var(--ink-2);background-color:var(--paper); background-image:linear-gradient(to bottom,transparent 31px,color-mix(in srgb,var(--rule) 22%,transparent) 31px);background-size:100% 32px; -webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh; } @media (min-width:900px){ body::before{content:"";position:fixed;top:0;bottom:0;left:72px;width:1px;background:color-mix(in srgb,var(--margin) 45%,transparent);pointer-events:none;z-index:0} } main,footer{position:relative;z-index:1} img,svg,video{display:block;max-width:100%} a{color:inherit} button{font:inherit;color:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px} .ink :focus-visible{outline-color:var(--accent-2)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:fixed;left:12px;top:-64px;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;z-index:100;font-weight:600;text-decoration:none} .skip:focus{top:12px} .ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none} .ic-fill{fill:currentColor;stroke:none} /* ---------- type ---------- */ h1,h2,h3{color:var(--ink);font-weight:400} h1,h2{font-family:var(--f-display);letter-spacing:-.02em;text-wrap:balance} h1{font-size:clamp(52px,7.4vw,104px);line-height:.95} h2{font-size:clamp(40px,5vw,68px);line-height:1} h1 em,h2 em{font-style:italic} h3{font:600 19px/1.3 var(--f-sans);letter-spacing:-.005em} p{text-wrap:pretty} .lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2);max-width:60ch} .kicker{font:600 13px/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px} .ink .kicker{color:var(--accent-2)} .center{text-align:center} .center .lead{margin-inline:auto} /* highlighter swipe */ mark.swipe{ color:inherit;padding:0 .06em;margin:0 -.06em; background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 88%/100% 58%; border-radius:.12em .35em .15em .4em; -webkit-box-decoration-break:clone;box-decoration-break:clone; } .js mark.swipe{background-size:0% 58%;transition:background-size .7s var(--ease-out) .15s} .js mark.swipe.in{background-size:100% 58%} .ink mark.swipe{color:var(--on-night);background-position:0 50%} .js .ink mark.swipe{background-size:0% 100%} .js .ink mark.swipe.in{background-size:100% 100%} html:not(.js) .ink mark.swipe{background-size:100% 100%} .js .ink mark.swipe.in{color:var(--ink);transition:background-size .7s var(--ease-out) .15s,color .3s ease .45s} .ink mark.swipe:not(.in){color:var(--on-night)} html:not(.js) .ink mark.swipe{color:var(--ink)} /* margin notes */ .scribble{ display:inline-flex;align-items:center;gap:8px;font:400 22px/1.1 var(--f-hand);color:var(--margin); transform:rotate(-4deg);transform-origin:left center;user-select:none;pointer-events:none; } .scribble svg{width:64px;height:40px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .ink .scribble{color:#FF8A80} /* reveal */ .js .rv{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .8s var(--ease-out) var(--d,0s),transform .8s var(--ease-out) var(--d,0s),filter .8s var(--ease-out) var(--d,0s)} .js .rv.in{opacity:1;transform:none;filter:none} /* ---------- layout ---------- */ .wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--gut)} @media (min-width:900px){.wrap{padding-left:max(24px,calc(104px - max(0px,(100vw - 1180px)/2)))}} section{padding:clamp(80px,10vw,128px) 0;position:relative} section.tight{padding-block:clamp(64px,8vw,104px)} .sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,64px)} .sec-head.center{margin-inline:auto} .sec-head .lead{margin-top:22px} .sec-head h2+.lead{margin-top:22px} .stack-sm>*+*{margin-top:14px} /* progress + nav */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none} .progress i{display:block;height:100%;background:var(--hl);transform:scaleX(0);transform-origin:left;will-change:transform} .nav-wrap{position:fixed;top:14px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding-inline:12px;pointer-events:none} .nav{ pointer-events:auto;display:flex;align-items:center;gap:6px;width:100%;max-width:880px; padding:8px 10px 8px 16px;border-radius:999px;border:1px solid transparent; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease; } .nav.scrolled{ background:rgba(251,247,238,.9);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6); border-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 10px 30px -18px rgba(29,27,46,.35); } .brand{display:inline-flex;align-items:center;gap:10px;font:600 18px/1 var(--f-sans);color:var(--ink);text-decoration:none;margin-right:auto} .brand img{width:28px;height:28px} .nav-links{display:none;list-style:none;padding:0;gap:2px;margin:0 8px 0 0} .nav-links a{display:block;padding:8px 12px;border-radius:999px;font:500 15px/1 var(--f-sans);color:var(--ink-2);text-decoration:none;transition:color .2s,background .2s} .nav-links a:hover{color:var(--ink);background:rgba(29,27,46,.06)} .nav-try{font:500 15px/1 var(--f-sans);color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:999px;white-space:nowrap} .nav-try:hover{text-decoration:underline;text-underline-offset:4px} .nav .btn{padding:10px 18px;font-size:15px} .nav-menu{position:relative} .nav-menu summary{list-style:none;cursor:pointer;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink)} .nav-menu summary::-webkit-details-marker{display:none} .nav-menu summary:hover{background:rgba(29,27,46,.06)} .nav-menu .panel{position:absolute;right:0;top:calc(100% + 12px);min-width:200px;background:var(--sheet);border:1px solid var(--line);border-radius:20px;padding:8px;box-shadow:var(--shadow-card)} .nav-menu .panel a{display:block;padding:12px 14px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:500} .nav-menu .panel a:hover{background:var(--surface)} .nav-menu .x{display:none} .nav-menu[open] .x{display:block}.nav-menu[open] .bars{display:none} @media (max-width:479px){.nav-try{display:none}} @media (min-width:720px){.nav-links{display:flex}.nav-menu{display:none}.nav{padding-left:20px}} /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:999px;border:1px solid transparent; font:600 16px/1 var(--f-sans);text-decoration:none;white-space:nowrap;min-height:48px; transition:transform .4s var(--ease-spring),box-shadow .3s ease,background .2s ease; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)} .btn-p{background:var(--ink);color:var(--paper);box-shadow:0 10px 24px -12px rgba(29,27,46,.6)} .btn-p:hover{box-shadow:0 16px 30px -14px rgba(29,27,46,.7)} .btn-s{background:var(--sheet);color:var(--ink);border-color:var(--line)} .btn-hl{background:var(--hl);color:var(--ink);box-shadow:0 10px 24px -14px rgba(160,120,0,.7)} .btn-hl:hover{box-shadow:0 16px 30px -14px rgba(160,120,0,.8)} .btn .ic{width:20px;height:20px} .btn-lg{padding:19px 34px;font-size:18px} .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .center .cta-row{justify-content:center} /* ---------- hero ---------- */ .hero{padding-top:clamp(120px,15vw,170px);padding-bottom:clamp(64px,8vw,110px)} .hero-copy{max-width:900px;margin-inline:auto;text-align:center} .badge{ display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 14px;border-radius:999px;background:var(--sheet);border:1px solid var(--line); font:500 14px/1.2 var(--f-sans);color:var(--ink-2);margin-bottom:28px;box-shadow:var(--shadow-card);flex-wrap:wrap;justify-content:center; } .badge .dot{position:relative;width:8px;height:8px;border-radius:50%;background:#1F9D6B;flex:none} .badge .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#1F9D6B;animation:ping 2s ease-out infinite} @keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}} .hero h1{margin-bottom:28px} .hero .lead{margin-inline:auto;margin-bottom:34px} .hero .cta-row{justify-content:center} .chips{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center} .chips li{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(255,253,248,.7);border:1px solid var(--line);font:500 14px/1.2 var(--f-sans);color:var(--ink-2)} .chips .ic{width:16px;height:16px;stroke-width:2.2;color:#1F9D6B} .hero-stage{margin-top:clamp(64px,8vw,96px);display:grid;gap:18px;grid-template-columns:minmax(0,1fr)} .hero-toy{position:relative;min-width:0} .hero-toy [data-demo]{width:100%} #lio-hero{position:absolute;top:-112px;right:-30px;z-index:3;padding:4px} .hero-toy{margin-top:44px} .hero-note{display:flex;justify-content:center} .hero-note .scribble{transform:rotate(-3deg);transform-origin:center} @media (min-width:1040px){ .hero-stage{grid-template-columns:minmax(0,1fr) 210px;gap:28px;align-items:start} .hero-toy{margin-top:0} .hero-note{order:2;padding-top:170px;justify-content:flex-start} .hero-note .scribble{flex-direction:row-reverse;transform:rotate(-4deg);transform-origin:left center} .hero-note .scribble svg{transform:scaleX(-1)} #lio-hero{right:-64px;top:-118px} } /* ---------- shelf ---------- */ .shelf-wrap{position:relative} .shelf-wrap [data-demo]{width:100%} .shelf-note{position:absolute;right:4%;top:-44px} /* ---------- cards / bento ---------- */ .card{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:26px;position:relative;overflow:hidden} .card h3{margin-bottom:6px} .card p{font-size:16px;line-height:1.5} .bento{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)} .bento>*{min-width:0} .card.big{display:flex;flex-direction:column;gap:20px} .card.big [data-demo]{flex:1;width:100%} .ill{height:84px;border-radius:14px;background:var(--paper);border:1px dashed var(--line);margin-bottom:18px;display:grid;place-items:center;overflow:hidden;position:relative} @media (min-width:720px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} .bento .big{grid-column:1/-1} } @media (min-width:1000px){ .bento{grid-template-columns:repeat(3,minmax(0,1fr))} .bento .big{grid-column:1/3;grid-row:1/3} } /* illustrations */ .ill-mark{font:400 28px/1.2 var(--f-display);color:var(--ink);display:flex;gap:10px;flex-wrap:wrap;justify-content:center} .ill-mark span{padding:0 4px;background:linear-gradient(var(--c),var(--c)) no-repeat 0 90%/100% 45%;transition:background-size .5s var(--ease-out)} .card:hover .ill-mark span{background-size:100% 85%} .keycap{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--sheet);border:1px solid var(--line);border-bottom-width:3px;font:600 22px/1 var(--f-sans);color:var(--ink);transition:transform .4s var(--ease-spring)} .card:hover .keycap{transform:translateY(2px)} .ill-slash{gap:12px;display:flex;align-items:center} .ill-slash .menu{display:grid;gap:5px} .ill-slash .menu i{display:block;height:8px;border-radius:4px;background:var(--line);width:70px} .ill-slash .menu i:nth-child(1){background:var(--hl);width:84px} .ill-slash .menu i:nth-child(3){width:56px} .sticker{position:relative;width:76px;height:54px;border:1.5px dashed var(--accent);display:grid;place-items:center} .sticker::before,.sticker::after{content:"";position:absolute;width:8px;height:8px;background:var(--sheet);border:1.5px solid var(--accent);border-radius:2px} .sticker::before{left:-5px;top:-5px}.sticker::after{right:-5px;bottom:-5px} .sticker b{width:38px;height:38px;border-radius:50% 50% 50% 8px;background:linear-gradient(135deg,var(--m-pink),var(--m-coral));transition:transform .5s var(--ease-spring)} .card:hover .sticker b{transform:rotate(-12deg) scale(1.12)} .grad-word{font:italic 400 44px/1 var(--f-display);background:linear-gradient(90deg,#4A55C9,#C2352B 60%,#E79388);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:4px} .ill-tasks{display:flex;gap:18px;align-items:center} .ill-tasks ul{list-style:none;padding:0;display:grid;gap:6px} .ill-tasks li{display:flex;align-items:center;gap:8px;font:500 13px/1 var(--f-sans);color:var(--ink-2)} .ill-tasks li::before{content:"";width:13px;height:13px;border-radius:4px;border:1.5px solid var(--ink-3)} .ill-tasks li.done::before{background:var(--accent) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");border-color:var(--accent)} .ill-tasks li.done{text-decoration:line-through;color:var(--ink-3)} .pdf-tag{font:700 12px/1 var(--f-sans);padding:7px 9px;border-radius:8px;background:var(--margin);color:#fff;letter-spacing:.04em} /* ---------- PDF ---------- */ .split{display:grid;gap:clamp(36px,5vw,72px);align-items:center;grid-template-columns:minmax(0,1fr)} .split>*{min-width:0} @media (min-width:900px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}} .ticks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px} .ticks li{display:flex;align-items:center;gap:12px;font-weight:500;color:var(--ink)} .ticks .ic{width:22px;height:22px;padding:3px;border-radius:50%;background:var(--hl);stroke:var(--ink);stroke-width:2.4} .split [data-demo]{width:100%} /* ---------- ink sections ---------- */ section.ink{ background-color:var(--night);color:var(--on-night-2);overflow:hidden;isolation:isolate; background-image:radial-gradient(rgba(251,247,238,.08) 1px,transparent 1.6px);background-size:28px 28px; } section.ink h2,section.ink h3{color:var(--on-night)} section.ink .lead{color:var(--on-night-2)} section.ink::before,section.ink::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.8} section.ink::before{ background-image: radial-gradient(1.6px 1.6px at 40px 60px,#fff,transparent), radial-gradient(1.2px 1.2px at 210px 140px,#FFE9A0,transparent), radial-gradient(1.6px 1.6px at 330px 30px,#fff,transparent), radial-gradient(1.2px 1.2px at 130px 250px,#C9D0FF,transparent); background-size:410px 330px;animation:twinkle 5s ease-in-out infinite alternate; } section.ink::after{ background-image: radial-gradient(1.4px 1.4px at 90px 110px,#fff,transparent), radial-gradient(1.8px 1.8px at 260px 220px,#FFE9A0,transparent), radial-gradient(1.2px 1.2px at 380px 300px,#C9D0FF,transparent); background-size:530px 410px;background-position:120px 80px;animation:twinkle 7s ease-in-out -2.5s infinite alternate; } @keyframes twinkle{0%{opacity:.25}100%{opacity:1}} .ink-sub{margin-top:clamp(56px,7vw,88px)} .ink-sub h3{font-size:22px;margin-bottom:6px} .ink-sub>div>p,.ink-sub .sub-p{font-size:16px;color:var(--on-night-2);margin-bottom:20px} .demo-wide{width:100%} .study-grid{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:minmax(0,1fr);align-items:start} .study-grid>*{min-width:0} @media (min-width:900px){.study-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}} .tiles{display:grid;gap:14px} .tile{background:var(--night-2);border:1px solid var(--night-line);border-radius:20px;padding:22px 24px;transition:transform .4s var(--ease-spring),border-color .3s} .tile:hover{transform:translateY(-3px);border-color:var(--accent-2)} .tile h3{font-size:20px;margin-bottom:4px} .tile p{font-size:15px;line-height:1.5;color:var(--on-night-2)} .tile .ic{color:var(--hl);margin-bottom:12px} /* Lio */ .lio-hero{text-align:center;max-width:760px;margin:0 auto clamp(48px,6vw,72px)} #lio-big{display:inline-block;padding:6px;margin-bottom:8px} .lio-hero .lead{margin:22px auto 0} .lio-grid{display:grid;gap:clamp(28px,4vw,48px);grid-template-columns:minmax(0,1fr)} .lio-grid>*{min-width:0} @media (min-width:900px){.lio-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .lio-grid h3{font-size:22px;margin-bottom:6px} .lio-grid .sub-p{font-size:16px;margin-bottom:20px} /* ---------- tour ---------- */ .tour .sec-head{margin-bottom:44px} .mac-win{max-width:1000px;margin-inline:auto;border-radius:var(--r-card);overflow:hidden;background:var(--sheet);border:1px solid var(--line);box-shadow:0 2px 0 rgba(29,27,46,.04),0 40px 80px -40px rgba(29,27,46,.45)} .mac-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--line)} .mac-bar i{width:12px;height:12px;border-radius:50%;background:#FF5F57} .mac-bar i:nth-child(2){background:#FEBC2E}.mac-bar i:nth-child(3){background:#28C840} .mac-bar span{margin-left:auto;margin-right:auto;font:500 13px/1 var(--f-sans);color:var(--ink-3);transform:translateX(-26px)} .mac-win video{width:100%;height:auto;aspect-ratio:16/9;background:var(--surface)} /* ---------- little things ---------- */ .little{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)} .little li{list-style:none;display:flex;gap:14px;align-items:flex-start;padding:18px 18px 18px 16px;border-radius:18px;background:rgba(255,253,248,.6);border:1px solid var(--line);transition:transform .4s var(--ease-spring),background .3s,box-shadow .3s} .little li:hover{transform:translateY(-3px);background:var(--sheet);box-shadow:var(--shadow-card)} .little .ic{color:var(--ink);margin-top:2px} .little b{display:block;color:var(--ink);font:600 16px/1.3 var(--f-sans)} .little span{display:block;font-size:14.5px;line-height:1.45;margin-top:3px} .little{padding:0} @media (min-width:560px){.little{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:900px){.little{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1100px){.little{grid-template-columns:repeat(4,minmax(0,1fr))}} /* ---------- private ---------- */ section.band{background:var(--surface);border-block:1px solid var(--line);padding-block:clamp(72px,9vw,120px)} .trio{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);margin-top:clamp(36px,5vw,56px)} @media (min-width:800px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}} .trio .card .ic{width:30px;height:30px;margin-bottom:16px;color:var(--accent)} /* ---------- pricing ---------- */ .price-card{ position:relative;max-width:640px;margin:0 auto;border-radius:36px;background:var(--sheet);padding:clamp(36px,5vw,56px) clamp(24px,4vw,48px);text-align:center; box-shadow:0 2px 0 rgba(29,27,46,.04),0 40px 80px -40px rgba(29,27,46,.4);isolation:isolate; } .price-card::before{ content:"";position:absolute;inset:-2px;border-radius:38px;padding:2px;z-index:-1; background:conic-gradient(from var(--ang),var(--line) 0deg,var(--hl) 50deg,var(--m-pink) 100deg,var(--accent-2) 150deg,var(--line) 210deg,var(--line) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; animation:sheen 6s linear infinite; } @keyframes sheen{to{--ang:360deg}} .price{font:400 clamp(96px,16vw,148px)/.9 var(--f-display);color:var(--ink);letter-spacing:-.03em} .price small{font:italic 400 clamp(28px,4vw,40px)/1 var(--f-display);letter-spacing:0;color:var(--ink-2);margin-left:6px} .price-sub{margin-top:14px;font:600 18px/1.3 var(--f-sans);color:var(--ink)} .price-card .cta-row{justify-content:center;margin-top:30px} .fine{margin:30px auto 0;max-width:46ch;font-size:15px;line-height:1.55;text-align:left;display:grid;gap:12px} .fine strong{color:var(--ink)} .pay-note{margin-top:22px;font-size:14px;color:var(--ink-2);text-align:center} .objections{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin-top:clamp(40px,5vw,64px)} @media (min-width:640px){.objections{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.objections{grid-template-columns:repeat(3,minmax(0,1fr))}} .obj{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:20px;background:var(--sheet);border:1px solid var(--line);box-shadow:var(--shadow-card)} .obj .ic{width:26px;height:26px;color:var(--accent);margin-top:1px} .obj h3{font-size:17px;margin-bottom:3px} .obj p{font-size:15px;line-height:1.45} .sec-note{margin-top:36px} /* ---------- FAQ ---------- */ .faq{max-width:820px;margin:0 auto} .faq details{border-bottom:1px solid var(--line);overflow:hidden} .faq details:first-child{border-top:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;font:600 18px/1.35 var(--f-sans);color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--sheet) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3.5l4 4 4-4' fill='none' stroke='%231D1B2E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");border:1px solid var(--line);transition:transform .35s var(--ease-spring),background-color .2s} .faq details[open]:not(.closing) summary::after{transform:rotate(180deg);background-color:var(--hl)} .faq summary:hover{color:var(--accent)} .faq details p{padding:0 44px 24px 4px;font-size:17px} /* ---------- final CTA ---------- */ .final{text-align:center;padding-top:clamp(72px,9vw,120px)} .final lio-star{display:inline-block;padding:4px;margin-bottom:8px} .final h2{font-size:clamp(44px,6.4vw,92px)} .final .lead{margin:22px auto 34px} .final .cta-row{justify-content:center} .final .small{margin-top:26px;font-size:14.5px;color:var(--ink-2)} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:44px 0 56px;background:var(--paper)} .foot{display:grid;gap:26px} .foot-top{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;justify-content:space-between} .foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:15px} .foot ul a{color:var(--ink-2);text-decoration:none;padding:6px 0;display:inline-block} .foot ul a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px} .foot-meta{display:flex;flex-wrap:wrap;gap:8px 24px;color:var(--ink-2);font-size:14.5px;align-items:center;justify-content:space-between} .foot-badge img{width:200px;height:67px} /* demo placeholders: keep the layout still while the toy scripts mount */ [data-demo]{display:block;position:relative;min-width:0} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important} .js .rv{opacity:1;transform:none;filter:none;transition:none} .js mark.swipe{background-size:100% 58%;transition:none} .js .ink mark.swipe{color:var(--ink);background-size:100% 100%} .btn,.tile,.little li,.faq summary::after{transition:none} .btn:hover,.tile:hover,.little li:hover{transform:none} section.ink::before,section.ink::after{opacity:.6} .price-card::before{--ang:200deg} } /* ---------- footer: guides + language switcher (SEO, 2026-10-20) ---------- Markup:
holding two