@charset "UTF-8";:root{--ink:#14203b;--muted:#66718b;--blue:#2766e9;--purple:#8066e8;--pale:#f6f8fd;--border:#e8edf7;--shadow:0 20px 65px rgba(39,66,128,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;color:var(--ink);font-family:"DM Sans","Noto Sans JP",sans-serif;background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}p{line-height:1.95}h1,h2,h3,p{margin-top:0}.container{width:min(1160px,calc(100% - 64px));margin:auto}.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--purple));z-index:100}.header{height:80px;position:fixed;z-index:90;top:0;left:0;right:0;display:flex;align-items:center;gap:35px;padding:0 max(32px,calc((100vw - 1240px)/2));transition:background .35s,box-shadow .35s}.header.scrolled{background:rgba(255,255,255,.91);backdrop-filter:blur(18px);box-shadow:0 1px 18px rgba(20,32,59,.06)}.brand img{width:174px;max-height:48px;object-fit:contain}.nav{display:flex;align-items:center;gap:25px;margin-left:auto}.nav a{font-size:12px;font-weight:700;color:#4f5a72;transition:color .2s}.nav a:hover{color:var(--blue)}.header-cta{background:var(--ink);color:white;padding:12px 18px;border-radius:100px;font-size:12px;font-weight:800;white-space:nowrap;transition:transform .25s,background .25s}.header-cta:hover{transform:translateY(-2px);background:var(--blue)}.menu{display:none}.hero{min-height:760px;height:min(850px,100svh);position:relative;overflow:hidden;background:linear-gradient(125deg,#fff 15%,#f6f9ff 57%,#f1efff);display:flex;align-items:center}.hero-layout{display:grid;grid-template-columns:1.08fr .92fr;align-items:center;position:relative;z-index:2;padding-top:68px}.hero-copy{position:relative;z-index:3}.eyebrow,.kicker,.step-index,.plan-name{letter-spacing:.17em;font-size:11px;font-weight:800;color:var(--blue)}.eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid #e2e9fa;border-radius:100px;background:#ffffffa8;padding:10px 16px;margin-bottom:30px}.dot{width:7px;height:7px;border-radius:50%;background:#538afc;box-shadow:0 0 0 5px #e6eeff}.hero h1{font-size:clamp(44px,4.55vw,71px);letter-spacing:-.07em;line-height:1.4;font-weight:900;margin-bottom:22px}.hero h1 em{font-style:normal;background:linear-gradient(110deg,#2766e9,#9465ec);background-clip:text;-webkit-background-clip:text;color:transparent}.lead{font-size:15px;color:var(--muted);line-height:2.15}.hero-actions{display:flex;align-items:center;gap:26px;margin:34px 0}.btn{display:inline-flex;justify-content:center;align-items:center;gap:30px;padding:17px 27px;border-radius:12px;font-size:13px;font-weight:800;transition:transform .25s,box-shadow .25s,background .25s}.btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(120deg,#2466eb,#6559e7);color:white;box-shadow:0 12px 27px #366de535}.btn-primary:hover{box-shadow:0 18px 38px #366de54d}.quiet-link{font-weight:700;font-size:13px}.quiet-link span{margin-left:9px}.hero-proof{display:flex;flex-wrap:wrap;gap:18px;color:#7b8599;font-size:11px}.orb{position:absolute;border-radius:50%;filter:blur(2px);pointer-events:none}.orb-a{width:470px;height:470px;right:-150px;top:-100px;background:radial-gradient(circle,#e5ddff 0,transparent 72%)}.orb-b{width:550px;height:550px;left:-250px;bottom:-280px;background:radial-gradient(circle,#dceaff 0,transparent 70%)}.hero-visual{height:590px;position:relative}.hero-halo{position:absolute;inset:15% 0;background:radial-gradient(ellipse,#dbe5ff 0,#e9e5ff8a 36%,transparent 72%)}.phone{overflow:hidden;background:#11192c;border:7px solid #1b2440;border-radius:36px;box-shadow:0 30px 80px #182b5c37;position:relative}.phone img{width:100%;height:100%;object-fit:cover;object-position:top}.hero-phone{position:absolute;width:232px;height:502px;top:47px;left:calc(50% - 105px)}.front-phone{z-index:2;transform:rotate(8deg);animation:floatFront 6s ease-in-out infinite}.back-phone{z-index:1;left:calc(50% - 235px);top:88px;transform:rotate(-12deg) scale(.88);animation:floatBack 7s ease-in-out infinite}.float-tag{position:absolute;z-index:3;background:#fffffff0;backdrop-filter:blur(12px);box-shadow:0 18px 50px #283a7121;border:1px solid #fff;border-radius:16px;padding:14px 18px;display:flex;gap:12px;align-items:center;font-size:12px;font-weight:800;animation:floatTag 6s ease-in-out infinite}.float-tag b{color:var(--blue);font-size:24px}.float-tag small{font-size:9px;letter-spacing:.09em;color:#8d99b1}.tag-a{right:-12px;top:155px}.tag-b{left:-48px;bottom:90px;animation-delay:-3s}.scroll-cue{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:800;letter-spacing:.18em;color:#7c89a1;z-index:4}.scroll-cue span{margin-left:15px}.ticker{background:#172445;color:#fff;overflow:hidden;padding:17px 0;white-space:nowrap}.ticker-track{display:flex;width:max-content;animation:marquee 32s linear infinite}.ticker-track span{font-size:12px;font-weight:700;letter-spacing:.28em;padding-right:22px}.section{padding:130px 0}.section-head{max-width:690px;margin-bottom:55px}.section-head.center{text-align:center;margin-left:auto;margin-right:auto}.section-head h2,.pricing-intro h2,.ai-copy h2{font-size:clamp(32px,3.5vw,51px);line-height:1.5;letter-spacing:-.065em;font-weight:900;margin:18px 0}.section-head p,.pricing-intro p,.ai-copy p{color:var(--muted);font-size:14px}.gradient{background:linear-gradient(105deg,#2669e8,#8867e8);background-clip:text;-webkit-background-clip:text;color:transparent}.three-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.info-card,.scene-card{background:#fff;border:1px solid var(--border);border-radius:24px;padding:34px;transition:transform .35s,box-shadow .35s,border-color .35s}.info-card:hover,.scene-card:hover,.genre:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#d3ddf8}.icon-box{width:50px;height:50px;display:grid;place-items:center;border-radius:15px;background:#edf3ff;color:var(--blue);font-size:27px}.large-label{font-weight:900;font-size:34px;letter-spacing:-.06em;margin:24px 0 10px}.large-label span{color:var(--blue)}.info-card h3,.scene-card h3{font-size:17px}.info-card p,.scene-card p{font-size:12px;color:var(--muted);margin:0}.feature-section{background:#f7f9fe;padding-bottom:90px}.sticky-showcase{display:grid;grid-template-columns:1fr 1fr;gap:50px}.feature-steps{position:relative}.feature-step{min-height:490px;display:flex;flex-direction:column;justify-content:center;opacity:.48;transition:opacity .45s;padding:40px 30px 40px 0}.feature-step.is-active{opacity:1}.feature-step h3{font-size:clamp(29px,3vw,43px);line-height:1.55;letter-spacing:-.06em;margin:18px 0}.feature-step p{font-size:14px;color:var(--muted);max-width:380px}.pill-row{display:flex;gap:8px;margin-top:12px}.pill-row span{background:#e8eefb;border-radius:50px;padding:9px 15px;font-size:11px;color:#4264a3;font-weight:700}.sticky-visual{height:590px;position:sticky;top:calc(50vh - 260px);display:grid;place-items:center;align-self:start;overflow:hidden;border-radius:32px;background:linear-gradient(135deg,#e4ecff,#f0e8ff)}.sticky-glow{position:absolute;width:430px;height:430px;background:#ffffff70;border-radius:50%;filter:blur(30px)}.showcase-phone{width:224px;height:485px;border-width:7px;transform:rotate(3deg)}.showcase-phone .screen{position:absolute;inset:0;opacity:0;transition:opacity .6s,transform .6s;transform:scale(1.04)}.showcase-phone .screen.active{opacity:1;transform:scale(1)}.visual-label{position:absolute;bottom:23px;font-size:10px;letter-spacing:.2em;color:#7d83ae;font-weight:800}.ai-section{background:#17264c;color:white;position:relative;overflow:hidden}.ai-section:before{content:"";position:absolute;width:700px;height:700px;right:-180px;top:-260px;background:radial-gradient(circle,#5146aa7d,transparent 67%)}.ai-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;position:relative}.kicker.light{color:#aabaff}.ai-copy h2 span{color:#aabaff}.ai-copy p{color:#c2cce2}.ai-badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.ai-badges span{border:1px solid #ffffff3d;border-radius:30px;padding:10px 15px;font-size:11px}.chat-panel{background:white;color:var(--ink);border-radius:24px;padding:22px;box-shadow:0 28px 85px #030b2b55}.chat-top{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding-bottom:16px}.chat-mark{background:linear-gradient(135deg,#4a77f5,#9b67e8);color:#fff;border-radius:12px;padding:11px;font-size:18px}.chat-top strong{font-size:13px;display:block}.chat-top small{font-size:9px;color:#8c96a9;letter-spacing:.1em}.chat-status{margin-left:auto;color:#7b8aac;font-size:9px;letter-spacing:.1em}.chat-body{height:260px;padding:25px 0;display:flex;flex-direction:column;gap:15px}.chat-message{padding:13px 17px;border-radius:16px;font-size:12px;line-height:1.85;max-width:90%;min-height:20px}.chat-message:empty{display:none}.chat-message.user{align-self:flex-end;background:#e8efff}.chat-message.bot{align-self:flex-start;background:#f3f5f9}.thinking{display:none;align-self:flex-start;padding:13px 17px;border-radius:15px;background:#f3f5f9;gap:5px}.thinking.visible{display:flex}.thinking i{width:6px;height:6px;background:#9da9c5;border-radius:50%;animation:pulse 1s infinite alternate}.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}.chat-input{border:1px solid var(--border);padding:13px 15px;border-radius:11px;color:#9ba5b7;font-size:11px;display:flex;justify-content:space-between}.chat-input span{background:#3169e8;color:white;border-radius:7px;padding:3px 7px}.demo-note{font-size:10px;color:#9ca7b7;margin:10px 0 0}.genre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.genre{border:1px solid var(--border);background:#fff;border-radius:16px;padding:25px 24px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:14px;transition:transform .3s,box-shadow .3s,border-color .3s}.genre>span{font-size:24px;color:#6279df}.genre.special{background:#f4f1ff}.genre small{margin-left:auto;color:#7c6fb4;font-size:10px}.genre-note{color:#8a94a6;font-size:11px;margin-top:18px}.audience{background:#f7f9fd}.scene-symbol{font-size:42px;color:#6685e8;margin-bottom:20px}.trust{background:#fff}.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;margin:60px 0;gap:20px}.stat:not(:last-child){border-right:1px solid var(--border)}.stat strong{font-size:clamp(35px,4vw,60px);font-weight:900;letter-spacing:-.07em;color:#2967e7}.stat strong small{font-size:18px;margin-left:4px}.stat p{color:var(--muted);font-size:12px;margin:6px 0}.trust-box{background:#f5f8ff;border:1px solid #e1eafb;border-radius:20px;display:flex;gap:22px;padding:30px;max-width:830px;margin:auto}.trust-icon{flex:0 0 45px;height:45px;border-radius:50%;background:#dce9ff;color:var(--blue);display:grid;place-items:center;font-size:24px}.trust-box h3{font-size:16px;margin:2px 0 8px}.trust-box p{font-size:12px;color:var(--muted);margin:0}.pricing{background:#f7f9fe}.pricing-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:center}.pricing-intro p{max-width:360px}.price-benefits{display:grid;gap:12px;margin-top:30px;color:#49639b;font-size:13px;font-weight:700}.price-cards{display:grid;grid-template-columns:.85fr 1.15fr;align-items:stretch;gap:16px}.price-card{background:white;border:1px solid var(--border);border-radius:22px;padding:27px 22px;position:relative;display:flex;flex-direction:column;transition:transform .35s,box-shadow .35s}.price-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.price-card.premium{border:2px solid #6a7eec;box-shadow:0 20px 50px #4266e31a}.popular{position:absolute;right:18px;top:-15px;background:linear-gradient(100deg,#3768e9,#8b6bea);color:white;font-size:10px;font-weight:800;border-radius:30px;padding:8px 14px}.plan-name{font-size:10px}.price-card h3{font-size:18px;margin:10px 0 15px}.amount{font-size:43px;font-weight:900;letter-spacing:-.07em;white-space:nowrap}.amount small{font-size:11px;font-weight:700;letter-spacing:0}.old-price{font-size:12px;color:#8994a9}.price-card>p{font-size:11px;color:var(--muted);min-height:47px}.trial-banner{font-size:11px;font-weight:800;color:#4f56bf;background:#edf0ff;border-radius:8px;padding:10px;margin:10px 0}.price-card ul{list-style:none;padding:0;margin:20px 0 30px;display:grid;gap:14px;flex:1}.price-card li{font-size:11px;color:#536078;line-height:1.5}.price-card li:before{content:'✓';color:#4168e7;font-weight:900;margin-right:8px}.price-card .btn{padding:14px 10px;font-size:11px;gap:8px}.btn-outline{border:1px solid #c9d5eb;color:#35517e}.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.how-step{padding:25px 20px;position:relative}.how-step:not(:last-child):after{content:'→';position:absolute;right:-18px;top:68px;color:#c5cde0;font-size:24px}.how-step>span{font-size:12px;color:#9ba8c0;font-weight:800}.how-icon{height:74px;width:74px;border-radius:20px;background:#eef3ff;display:grid;place-items:center;color:var(--blue);font-size:32px;margin:16px 0 23px}.how-step h3{font-size:17px}.how-step p{font-size:12px;color:var(--muted)}.faq{background:#f8faff}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.faq-list details{border-bottom:1px solid #dce3f1}.faq-list summary{list-style:none;cursor:pointer;padding:23px 0;display:flex;justify-content:space-between;gap:20px;font-size:14px;font-weight:800}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:21px;font-weight:400;color:var(--blue);transition:transform .25s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list details p{font-size:12px;color:var(--muted);padding:0 28px 20px 0;margin:0}.closing{background:linear-gradient(125deg,#1b3c88,#4d3b98);color:white;padding:115px 0;text-align:center;position:relative;overflow:hidden}.closing-orb{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,#9d8cff66,transparent 65%);right:-190px;top:-330px}.closing-content{position:relative}.closing h2{font-size:clamp(34px,4.5vw,61px);line-height:1.5;letter-spacing:-.06em;margin:22px 0}.closing p{color:#d8dffa;font-size:14px}.btn-white{background:#fff;color:#284a9c;margin-top:18px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:55px 0 40px}.footer-logo img{width:175px}.footer-links{display:flex;flex-wrap:wrap;gap:20px;font-size:11px;font-weight:700;color:#596780}.footer-links a:hover{color:var(--blue)}.footer-bottom{border-top:1px solid var(--border);display:flex;justify-content:space-between;padding:22px 0 35px;font-size:10px;color:#9ca7b8;letter-spacing:.08em}.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:translateY(0)}.three-grid .reveal:nth-child(2),.genre-grid .reveal:nth-child(3n+2){transition-delay:.09s}.three-grid .reveal:nth-child(3),.genre-grid .reveal:nth-child(3n){transition-delay:.17s}@keyframes floatFront{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-12px)}}@keyframes floatBack{0%,100%{transform:rotate(-12deg) scale(.88) translateY(0)}50%{transform:rotate(-12deg) scale(.88) translateY(12px)}}@keyframes floatTag{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes marquee{to{transform:translateX(-50%)}}@keyframes pulse{to{opacity:.25;transform:translateY(-3px)}}@media(max-width:1100px){.nav{gap:14px}.nav a{font-size:11px}.hero-phone{width:207px;height:448px}.hero-visual{height:520px}.tag-a{right:-18px}.tag-b{left:-20px}.pricing-layout{gap:30px}.price-cards{gap:10px}.price-card{padding:25px 16px}}@media(max-width:850px){.container{width:min(100% - 42px,650px)}.header{height:70px;padding:0 22px}.brand img{width:160px}.nav{position:fixed;left:0;right:0;top:70px;background:#fffffffa;display:none;flex-direction:column;align-items:stretch;padding:22px;box-shadow:0 18px 30px #17264c15}.nav.open{display:flex}.nav a{font-size:14px;padding:9px 0}.header-cta{margin-left:auto;padding:11px 14px;font-size:11px}.menu{display:flex;flex-direction:column;gap:5px;background:transparent;border:0;padding:10px;cursor:pointer}.menu span{display:block;width:21px;height:2px;background:var(--ink)}.hero{height:auto;min-height:0;padding:125px 0 75px}.hero-layout{grid-template-columns:1fr;padding-top:0}.hero-copy{text-align:center}.hero h1{font-size:clamp(40px,8vw,59px)}.hero-actions,.hero-proof{justify-content:center}.hero-visual{height:490px;margin-top:5px}.hero-phone{left:calc(50% - 60px)}.back-phone{left:calc(50% - 180px)}.tag-a{right:10%}.tag-b{left:9%}.scroll-cue{bottom:15px}.section{padding:90px 0}.sticky-showcase{gap:16px}.sticky-visual{height:480px;top:calc(50vh - 220px)}.showcase-phone{width:190px;height:413px}.feature-step{min-height:410px;padding-right:0}.feature-step h3{font-size:30px}.ai-layout,.pricing-layout,.faq-layout{grid-template-columns:1fr;gap:40px}.ai-copy{max-width:600px}.price-cards{max-width:630px}.steps-grid{grid-template-columns:repeat(2,1fr)}.how-step:nth-child(2):after{display:none}}@media(max-width:570px){.container{width:calc(100% - 38px)}.header{padding:0 15px}.brand img{width:136px}.header-cta{font-size:10px;padding:10px 11px}.hero{padding-top:125px}.hero h1{font-size:clamp(36px,9.2vw,47px)}.lead{font-size:12px}.hero-actions{gap:15px;flex-wrap:wrap}.btn{padding:15px 19px;font-size:12px;gap:13px}.hero-proof{font-size:9px;gap:12px}.hero-visual{height:410px}.hero-phone{width:166px;height:359px;top:20px;left:calc(50% - 48px);border-radius:27px;border-width:5px}.back-phone{left:calc(50% - 145px);top:42px}.float-tag{font-size:9px;padding:10px;gap:6px}.float-tag b{font-size:17px}.float-tag small{font-size:7px}.tag-a{right:0;top:100px}.tag-b{left:0;bottom:40px}.section-head h2,.pricing-intro h2,.ai-copy h2{font-size:32px}.section-head p,.pricing-intro p,.ai-copy p{font-size:12px}.three-grid,.genre-grid{grid-template-columns:1fr}.info-card,.scene-card{padding:26px}.feature-section{padding-bottom:65px}.sticky-showcase{display:flex;flex-direction:column}.feature-steps{display:contents}.feature-step{min-height:0;opacity:1;padding:30px 0}.feature-step h3{font-size:29px}.sticky-visual{order:-1;position:relative;top:auto;height:425px;margin-bottom:18px}.showcase-phone{width:185px;height:400px}.feature-step:not(.is-active){display:flex;opacity:1}.feature-step.is-active{display:flex}.ai-layout{gap:30px}.chat-body{height:280px}.genre{padding:18px 22px}.genre-grid{grid-template-columns:repeat(2,1fr);gap:10px}.genre{font-size:12px;padding:16px 10px;gap:8px}.genre>span{font-size:19px}.genre.special{grid-column:span 2}.stats{gap:7px}.stat strong{font-size:30px}.stat strong small{font-size:11px}.stat p{font-size:10px}.trust-box{padding:22px}.price-cards{grid-template-columns:1fr}.price-card{padding:26px}.steps-grid{gap:5px}.how-step{padding:20px 10px}.how-step:not(:last-child):after{display:none}.how-icon{height:58px;width:58px}.faq-layout{gap:15px}.faq-list summary{font-size:12px}.closing{padding:95px 0}.footer-top{flex-direction:column;align-items:flex-start}.footer-bottom{gap:20px;flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}} /* Added partner logos, additional feature screens, and app badges */ .partner-block{margin-top:65px;padding:42px;border-radius:28px;background:#f5f7ff;border:1px solid #e6eafb}.partner-copy{text-align:center;max-width:760px;margin:auto}.partner-copy h3{font-size:clamp(23px,3vw,35px);line-height:1.45;margin:12px 0}.partner-copy p{line-height:1.9;color:#566079}.partner-footnote{font-size:12px}.partner-logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:32px}.partner-logo{height:94px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #e9ecf7;border-radius:15px;padding:16px}.partner-logo img{max-width:100%;max-height:58px;object-fit:contain}.chat-message.bot{white-space:pre-line}.store-badges{display:flex;justify-content:center;align-items:center;gap:15px;margin-top:32px;flex-wrap:wrap}.store-badges img{height:45px;width:auto;max-width:190px;object-fit:contain}.feature-step{min-height:65vh}@media(max-width:750px){.partner-block{padding:24px 14px}.partner-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.partner-logo{height:70px;padding:10px}.partner-logo img{max-height:42px}.feature-step{min-height:auto}} /* Additional sections — October 2026 */ .quality{background:#f7f9ff}.quality-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:38px}.quality-card,.voices-pending{border:1px solid #e5eafa;background:white;border-radius:24px;padding:34px;box-shadow:0 14px 40px rgba(39,56,111,.05)}.quality-num{font-size:13px;font-weight:800;color:#665bdb}.quality-card h3{font-size:21px;margin:14px 0}.quality-card p{color:#64708b;line-height:1.9}.app-section{overflow:hidden;background:linear-gradient(125deg,#fff 25%,#edf0ff)}.app-layout{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.app-layout h2{font-size:clamp(32px,4vw,58px);line-height:1.3}.app-layout p{line-height:1.9}.store-badges{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0}.store-badges img{height:48px;width:auto;max-width:190px;object-fit:contain;transition:transform .25s}.store-badges a:hover img{transform:translateY(-4px)}.app-visual{position:relative;text-align:center;min-height:440px;display:grid;place-items:center}.app-halo{position:absolute;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#b8b9ff99,transparent 70%);filter:blur(12px)}.app-splash{position:relative;max-height:540px;max-width:95%;object-fit:contain;animation:appFloat 6s ease-in-out infinite}@keyframes appFloat{50%{transform:translateY(-12px)}}.small-note{font-size:12px;color:#7c849a;line-height:1.7}.comparison-scroll{overflow-x:auto;border-radius:24px;border:1px solid #e7eaf6;box-shadow:0 20px 55px #242b5610}.comparison-table{width:100%;min-width:700px;border-collapse:collapse;background:white}.comparison-table th,.comparison-table td{padding:22px 19px;border-bottom:1px solid #edf0f8;text-align:left;line-height:1.6}.comparison-table thead th{background:#f7f8fe;font-size:14px}.comparison-table tbody th{font-weight:650}.comparison-table .featured-col{background:#eff0ff;color:#3531a1;font-weight:700}.compare-section{background:#fafbff}.discover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}.discover-tile{margin:0;padding:22px 15px;background:#f4f6ff;border:1px solid #e8ebfa;border-radius:24px;text-align:center;transition:transform .3s,box-shadow .3s}.discover-tile:hover{transform:translateY(-6px);box-shadow:0 20px 35px #273a7515}.discover-tile img{display:block;width:100%;height:330px;object-fit:contain}.discover-tile figcaption{font-size:14px;font-weight:700;margin-top:12px}.voices-section{background:#f7f9ff}.voices-pending{max-width:720px;margin:35px auto 0;text-align:center}.voices-pending>span{font-size:65px;line-height:.7;color:#8584de}.voices-pending h3{font-size:23px;margin:12px 0}.voices-pending p{color:#6b7590;line-height:1.9}@media(max-width:850px){.app-layout{grid-template-columns:1fr}.quality-grid{grid-template-columns:1fr}.discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-visual{min-height:300px}.app-splash{max-height:410px}}@media(max-width:520px){.discover-grid{gap:10px}.discover-tile{padding:14px 8px;border-radius:16px}.discover-tile img{height:220px}.discover-tile figcaption{font-size:12px}.store-badges img{height:42px}}@media(prefers-reduced-motion:reduce){.app-splash{animation:none}.discover-tile,.store-badges img{transition:none}} /* v4: repaired layout, comparison, discovery, apps and voices */ #discover,#apps,#compare,#voices{position:relative;isolation:isolate} #discover .container,#apps .container,#compare .container,#voices .container{width:min(1160px,calc(100% - 48px));margin-inline:auto} #discover .section-head,#compare .section-head,#voices .section-head{max-width:850px;margin:0 auto 44px;text-align:center} #discover .section-head h2,#compare .section-head h2,#voices .section-head h2{font-size:clamp(32px,4.5vw,60px);line-height:1.3;letter-spacing:-.045em;margin:14px 0 22px} #discover .section-head p,#compare .section-head p,#voices .section-head p{max-width:670px;margin:0 auto;color:#66718b;font-size:15px;line-height:1.9} #discover{background:linear-gradient(180deg,#fff 0%,#f6f8ff 100%)} #discover .discover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch;margin-top:48px} #discover .discover-tile{display:flex;flex-direction:column;align-items:center;justify-content:space-between;min-width:0;margin:0;padding:22px 14px 18px;border:1px solid #e5eafb;background:#fff;border-radius:22px;box-shadow:0 10px 32px rgba(27,45,94,.06);transition:transform .3s,box-shadow .3s} #discover .discover-tile:hover{transform:translateY(-7px);box-shadow:0 22px 42px rgba(27,45,94,.13)} #discover .discover-tile img{display:block;width:100%;height:290px;max-width:100%;object-fit:contain;object-position:center} #discover .discover-tile figcaption{font-size:14px;font-weight:750;color:#1a2546;margin-top:18px;text-align:center} #apps{background:linear-gradient(120deg,#f5f7ff,#fff 60%,#edf0ff)} #apps .app-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:64px} #apps .app-layout>div:first-child{min-width:0} #apps h2{font-size:clamp(35px,4.3vw,58px);line-height:1.3;margin:16px 0 22px;letter-spacing:-.045em} #apps p{font-size:15px;color:#5c6882;line-height:1.95;max-width:620px} #apps .store-badges{display:flex;justify-content:flex-start;align-items:center;gap:16px;margin:30px 0 12px;flex-wrap:wrap} #apps .store-badges a{display:inline-flex;align-items:center;justify-content:center;min-height:52px} #apps .store-badges img{display:block;height:48px;width:auto;max-width:190px;object-fit:contain} #apps .app-visual{position:relative;min-height:480px;display:flex;justify-content:center;align-items:center} #apps .app-halo{position:absolute;inset:10%;width:auto;aspect-ratio:auto;background:radial-gradient(circle,#c4c9ff 0%,transparent 70%);filter:blur(14px)} #apps .app-splash{position:relative;display:block;width:auto;max-width:100%;height:auto;max-height:520px;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(27,39,83,.17))} #compare{background:#fff} #compare .comparison-scroll{width:100%;overflow-x:auto;border:1px solid #e4e9f7;border-radius:22px;box-shadow:0 16px 50px rgba(26,39,80,.07);-webkit-overflow-scrolling:touch} #compare .comparison-table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;table-layout:fixed;background:#fff} #compare .comparison-table th,#compare .comparison-table td{padding:21px 16px;border:0;border-bottom:1px solid #e8ecf5;text-align:center;vertical-align:middle;line-height:1.65;overflow-wrap:anywhere;font-size:14px} #compare .comparison-table thead th{background:#f2f5fc;font-size:14px;font-weight:800;color:#182443} #compare .comparison-table thead th:first-child{width:23%} #compare .comparison-table tbody th{text-align:left;font-weight:700;background:#fafbff;color:#293552} #compare .comparison-table .featured-col{background:#eef2ff;color:#3159c5;font-weight:750} #compare .comparison-table thead .featured-col{background:#4b70df;color:white} #compare .comparison-table tbody tr:last-child>*{border-bottom:0} #compare .small-note{max-width:900px;margin:18px auto 0;font-size:12px;color:#7a8499;line-height:1.8;text-align:center} #voices{background:linear-gradient(180deg,#f6f8ff,#fff)} #voices .voices-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} #voices .voice-card{display:flex;flex-direction:column;position:relative;min-width:0;padding:32px 26px 25px;border-radius:20px;background:#fff;border:1px solid #e5eafa;box-shadow:0 10px 30px rgba(31,50,100,.05);transition:transform .25s,box-shadow .25s} #voices .voice-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(31,50,100,.11)} #voices .voice-quote{font-family:Georgia,serif;font-size:60px;line-height:.8;color:#b1c4ff;opacity:.8} #voices .voice-text{flex:1;font-size:15px;line-height:1.9;color:#25304d;margin:12px 0 26px} #voices .voice-foot{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding-top:15px;border-top:1px solid #edf0f8;font-size:12px;color:#65718b} #voices .voice-stars{color:#e6b42d;letter-spacing:2px;font-size:13px} @media(max-width:900px){#discover .discover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#apps .app-layout{grid-template-columns:1fr;gap:20px}#apps .app-visual{min-height:350px}#apps .app-splash{max-height:420px}#voices .voices-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:580px){#discover .container,#apps .container,#compare .container,#voices .container{width:min(100% - 32px,1160px)}#discover .discover-grid{gap:10px}#discover .discover-tile{padding:13px 8px;border-radius:14px}#discover .discover-tile img{height:195px}#discover .discover-tile figcaption{font-size:12px}#voices .voices-grid{grid-template-columns:1fr}#apps .store-badges img{height:43px}#apps .app-visual{min-height:270px}#apps .app-splash{max-height:350px}#compare .comparison-table th,#compare .comparison-table td{padding:15px 12px}} @media(prefers-reduced-motion:reduce){#voices .voice-card,#discover .discover-tile{transition:none}} /* v5: original welfare page comparison and testimonial design, scoped to new site */ #compare .so-cmp{margin-top:52px}#compare .so-cmp:first-of-type{margin-top:0} #compare .so-cmp-head{font-size:1.18rem;font-weight:750;color:#1a2340;margin:0 0 8px} #compare .so-cmp-lead{font-size:.88rem;color:#4a5568;line-height:1.85;margin:0 0 24px} #compare .so-cmp-bars{background:#fff;border:1px solid #e2e8f8;border-radius:18px;padding:28px 32px;margin-bottom:20px;box-shadow:0 4px 18px #344b8108} #compare .so-cmp-bars-title{font-size:.8rem;font-weight:750;color:#4a5568;margin-bottom:13px} #compare .so-cmp-bar-row{display:grid;grid-template-columns:155px minmax(0,1fr) 110px;align-items:center;gap:14px;padding:9px 0} #compare .so-cmp-bar-name{font-size:.83rem;font-weight:700;color:#4a5568} #compare .so-cmp-bar-track{height:14px;background:#f4f7ff;border-radius:8px;overflow:hidden} #compare .so-cmp-bar-fill{height:100%;background:#8898aa;border-radius:8px} #compare .so-cmp-bar-val{font-size:.88rem;font-weight:750;color:#4a5568;text-align:right;white-space:nowrap} #compare .so-cmp-bar-us .so-cmp-bar-name,#compare .so-cmp-bar-us .so-cmp-bar-val{color:#4b7be5} #compare .so-cmp-bar-us .so-cmp-bar-fill{background:#4b7be5} #compare .so-cmp-table-wrap{overflow-x:auto;border:1px solid #e2e8f8;border-radius:18px;background:white;-webkit-overflow-scrolling:touch} #compare .so-cmp-table{width:100%;min-width:760px;border-collapse:collapse;font-size:.8rem;table-layout:auto} #compare .so-cmp-table th,#compare .so-cmp-table td{padding:17px 14px;border-bottom:1px solid #e2e8f8;text-align:center;line-height:1.65;vertical-align:middle;overflow-wrap:normal} #compare .so-cmp-table tr:last-child th,#compare .so-cmp-table tr:last-child td{border-bottom:0} #compare .so-cmp-table thead th{font-weight:750;color:#1a2340;background:#f4f7ff} #compare .so-cmp-table tbody th{text-align:left;font-weight:750;color:#4a5568;white-space:nowrap} #compare .so-cmp-table td{color:#4a5568} #compare .so-cmp-table .so-cmp-us{background:#ebf1ff;color:#2b5bc5;font-weight:750} #compare .so-cmp-table thead .so-cmp-us{background:#4b7be5;color:#fff} #compare .so-cmp-table small{display:block;font-size:.7rem;font-weight:400;opacity:.85} #compare .so-cmp-note{font-size:.73rem;color:#8898aa;line-height:1.8;margin:15px 0 0} #voices .so-voice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} #voices .so-voice{background:white;border-radius:16px;padding:28px 24px;border:1px solid #e2e8f8;box-shadow:0 2px 12px rgba(75,123,229,.05);position:relative;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s} #voices .so-voice:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(75,123,229,.12)} #voices .so-voice:before{content:'“';position:absolute;top:6px;left:18px;font-family:Georgia,serif;font-size:3.5rem;color:#7ba5f5;opacity:.3;line-height:1} #voices .so-voice-text{font-size:.86rem;color:#1a2340;line-height:1.85;margin:0 0 18px;padding-top:16px;position:relative;flex:1} #voices .so-voice-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap} #voices .so-voice-stars{color:#e7b72e;font-size:.85rem;letter-spacing:.05em} #voices .so-voice-who{font-size:.74rem;color:#4a5568} @media(max-width:900px){#voices .so-voice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){#compare .so-cmp-bars{padding:22px 18px}#compare .so-cmp-bar-row{grid-template-columns:1fr auto;gap:6px 10px}#compare .so-cmp-bar-track{grid-column:1/-1;grid-row:2}#voices .so-voice-grid{grid-template-columns:1fr}} /* Ver.7: Ranking / recommendation screenshots in realistic CSS phone frames */ #discover .discover-tile{justify-content:flex-start;gap:17px;padding:25px 12px 20px} #discover .discover-phone{position:relative;width:min(100%,218px);aspect-ratio:9 / 19.5;margin-inline:auto;border:6px solid #20232b;border-radius:34px;background:#fff;box-shadow:0 0 0 2px #8a909b,0 18px 30px rgba(24,35,67,.2),inset 0 0 0 1px #cbd0d9;overflow:hidden;isolation:isolate} #discover .discover-phone img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:fill;border-radius:27px} #discover .discover-phone-camera{position:absolute;z-index:2;top:7px;left:50%;transform:translateX(-50%);width:32%;height:14px;border-radius:14px;background:#16191e;box-shadow:0 1px 2px #0003} #discover .discover-tile figcaption{margin-top:0} @media(max-width:580px){#discover .discover-tile{padding:15px 7px 16px;gap:12px}#discover .discover-phone{width:min(100%,190px);border-width:4px;border-radius:24px}#discover .discover-phone img{border-radius:19px}#discover .discover-phone-camera{height:10px;top:5px}} /* v8: writers and expanded FAQ */ .writers-section{background:#fff}.writer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.writer-card{background:linear-gradient(160deg,#fff,#f8faff);border:1px solid #e5eafa;border-radius:22px;padding:30px;box-shadow:0 12px 32px #263e7710;transition:transform .3s,box-shadow .3s}.writer-card:hover{transform:translateY(-5px);box-shadow:0 20px 45px #263e771d}.writer-avatar{height:62px;width:62px;display:grid;place-items:center;border-radius:19px;background:linear-gradient(135deg,#e5eeff,#eee6ff);color:#4666c8;font-size:24px;font-weight:900;margin-bottom:22px}.writer-card h3{font-size:20px;margin:0 0 10px}.writer-card p{font-size:13px;color:#5c6883;min-height:48px}.writer-genre{font-size:11px;color:#4864a1;background:#eef3ff;border-radius:10px;padding:12px 14px;line-height:1.7}.faq-layout{grid-template-columns:1fr;gap:20px}.faq-layout .section-head{margin-bottom:12px}.faq-content{width:100%;max-width:970px;margin:auto}.faq-group{margin-bottom:45px;background:white;border:1px solid #e4eaf7;border-radius:22px;padding:22px 34px 12px;box-shadow:0 10px 30px #263e7708}.faq-group h3{font-size:18px;margin:0 0 12px;color:#2d55ad}.faq-list details p{font-size:13px;line-height:1.9;padding-bottom:24px}.faq-list summary{font-size:14px}.faq-more{text-align:center;font-size:13px;color:#5f6c83}.faq-more a{color:#2766e9;font-weight:800;text-decoration:underline}@media(max-width:850px){.writer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:570px){.writer-grid{grid-template-columns:1fr}.writer-card{padding:24px}.faq-group{padding:18px 20px 10px}.faq-group h3{font-size:16px}.faq-list summary{font-size:12px}} /* v9: complete writer portraits and premium editorial card layout */ #writers .writer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch} #writers .writer-card{display:flex;flex-direction:column;min-width:0;padding:0!important;overflow:hidden;background:#fff;border:1px solid #e1e9f8;border-radius:24px;box-shadow:0 10px 35px rgba(35,63,120,.09);transition:transform .28s,box-shadow .28s} #writers .writer-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(35,63,120,.16)} #writers .writer-photo{width:100%;height:210px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(130deg,#f0f5ff,#f6f1ff);border-bottom:1px solid #e8ecf8} #writers .writer-photo img{width:100%;height:100%;object-fit:contain;display:block;padding:16px;transition:transform .35s} #writers .writer-card:hover .writer-photo img{transform:scale(1.045)} #writers .writer-body{padding:24px 26px 27px;display:flex;flex-direction:column;flex:1} #writers .writer-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.16em;color:#5478c6;font-weight:800;margin-bottom:12px} #writers .writer-label b{font-size:12px;letter-spacing:0;color:#a7b7d6} #writers .writer-body h3{font-size:23px;font-weight:800;letter-spacing:.01em;color:#172441;margin:0 0 12px} #writers .writer-body p{font-size:13px;line-height:1.9;color:#52617e;min-height:0;margin:0 0 22px;flex:1} #writers .writer-genre{font-size:12px;line-height:1.8;color:#365da9;background:#eef4ff;border-radius:12px;padding:12px 15px} #writers .writer-genre span{display:block;font-size:10px;letter-spacing:.04em;font-weight:800;margin-bottom:3px;color:#7690c0} @media(max-width:920px){#writers .writer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){#writers .writer-grid{grid-template-columns:1fr;gap:18px}#writers .writer-photo{height:200px}#writers .writer-body{padding:21px 22px 23px}} /* v10: compact three-column writer cards and service-only FAQ */ #writers .writer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1050px;margin-inline:auto} #writers .writer-card{border-radius:17px;box-shadow:0 6px 22px rgba(35,63,120,.07)} #writers .writer-photo{height:145px} #writers .writer-photo img{padding:10px} #writers .writer-body{padding:16px 18px 18px} #writers .writer-label{font-size:9px;margin-bottom:6px} #writers .writer-body h3{font-size:18px;margin-bottom:8px} #writers .writer-body p{font-size:11px;line-height:1.75;margin-bottom:12px} #writers .writer-genre{font-size:10px;line-height:1.55;padding:9px 11px;border-radius:9px} #writers .writer-genre span{font-size:9px} @media(max-width:760px){#writers .writer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}#writers .writer-photo{height:140px}} @media(max-width:490px){#writers .writer-grid{grid-template-columns:1fr;max-width:350px}#writers .writer-photo{height:155px}} /* V11: scroll-linked brand puzzle assembly */ .puzzle-story{position:relative;isolation:isolate;overflow:hidden;padding:94px 0 104px;background:linear-gradient(135deg,#f7faff 0%,#fff 52%,#f9f8ff 100%);border-block:1px solid #edf1fa} .puzzle-story-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);align-items:center;gap:clamp(32px,6vw,96px)} .puzzle-story-copy h2{font-size:clamp(29px,3.3vw,52px);line-height:1.35;letter-spacing:-.04em;margin:18px 0 24px} .puzzle-story-copy p{font-size:clamp(14px,1.1vw,17px);color:var(--muted);max-width:490px} .puzzle-scroll-hint{display:inline-flex;gap:12px;align-items:center;font-size:11px;letter-spacing:.2em;font-weight:800;color:#7b89a3;margin-top:22px} .puzzle-scroll-hint span{font-size:19px;color:#4b7be5} .puzzle-stage{--puzzle-progress:0;position:relative;width:min(100%,430px);aspect-ratio:1;margin-inline:auto;display:grid;place-items:center;contain:layout paint} .puzzle-stage-ring{position:absolute;inset:10%;border:1px solid rgba(75,123,229,.13);border-radius:50%;box-shadow:0 0 0 32px rgba(75,123,229,.025),0 0 0 75px rgba(75,123,229,.018)} .puzzle-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 14px rgba(35,58,106,.13))} .puzzle-part{transform-box:view-box;transform-origin:50% 50%;will-change:transform;opacity:calc(.68 + var(--puzzle-progress)*.32)} .part-red{transform:translate(calc((1 - var(--puzzle-progress)) * -67px),calc((1 - var(--puzzle-progress)) * -72px)) rotate(calc((1 - var(--puzzle-progress)) * -22deg))} .part-yellow{transform:translate(calc((1 - var(--puzzle-progress)) * 70px),calc((1 - var(--puzzle-progress)) * -70px)) rotate(calc((1 - var(--puzzle-progress)) * 24deg))} .part-green{transform:translate(calc((1 - var(--puzzle-progress)) * -68px),calc((1 - var(--puzzle-progress)) * 67px)) rotate(calc((1 - var(--puzzle-progress)) * 21deg))} .part-blue{transform:translate(calc((1 - var(--puzzle-progress)) * 70px),calc((1 - var(--puzzle-progress)) * 72px)) rotate(calc((1 - var(--puzzle-progress)) * -23deg))} .puzzle-complete{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;opacity:clamp(0,calc((var(--puzzle-progress) - .74) * 3.85),1);transform:translateY(calc((1 - var(--puzzle-progress)) * 12px));pointer-events:none} .puzzle-complete img{width:clamp(72px,9vw,112px);height:auto;filter:drop-shadow(0 8px 12px rgba(255,255,255,.9))} .puzzle-complete span{font-size:10px;font-weight:800;letter-spacing:.2em;color:#233e76;background:rgba(255,255,255,.92);padding:7px 12px;border-radius:100px} @media(max-width:800px){.puzzle-story{padding:70px 0 80px}.puzzle-story-layout{grid-template-columns:1fr;gap:20px}.puzzle-story-copy{text-align:center}.puzzle-story-copy p{margin-inline:auto}.puzzle-stage{max-width:340px}} @media(max-width:420px){.puzzle-stage{max-width:280px}.puzzle-story-copy h2{font-size:27px}} @media(prefers-reduced-motion:reduce){.puzzle-stage{--puzzle-progress:1!important}.puzzle-part{will-change:auto}} /* V15 — one continuous, scroll-traveling official brand mark */ .global-puzzle{position:fixed;z-index:0;pointer-events:none;top:50%;left:50%;width:min(96vw,1150px);aspect-ratio:1;opacity:.17;transform:translate3d(calc(-50% + var(--puzzle-x,0px)),calc(-50% + var(--puzzle-y,0px)),0) perspective(1400px) rotateX(12deg) rotateZ(var(--puzzle-angle,0deg)) scale(var(--puzzle-scale,.8));transform-origin:center;will-change:transform;filter:drop-shadow(0 25px 32px rgba(30,55,105,.14));transition:opacity .35s} .global-puzzle img{width:100%;height:100%;object-fit:contain} body{position:relative} .section{position:relative;isolation:auto} .section>.container{position:relative;z-index:2} /* No overflow clipping on the sticky showcase's ancestor: clipping disables sticky. */ .feature-section{overflow:visible!important;background:rgba(244,247,255,.82)!important} .feature-section .sticky-showcase{position:relative;align-items:start} .feature-section .sticky-visual{position:sticky!important;top:clamp(100px,calc(50vh - 255px),180px)!important;align-self:start!important;z-index:4} .feature-section .feature-step{position:relative;z-index:2} /* Dark AI backdrop remains opaque regardless of the animated global background. */ .ai-section{background:#142448!important;color:#fff!important;isolation:isolate} .ai-section::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,28,62,.98) 0%,rgba(19,37,76,.95) 53%,rgba(32,44,88,.90) 100%);pointer-events:none;z-index:0} .ai-section>.container{position:relative;z-index:2} .ai-section .ai-copy,.ai-section .ai-copy h2{color:#fff!important} .ai-section .ai-copy p{color:#dbe4ff!important} .ai-section .ai-copy .kicker{color:#a8c4ff!important} .ai-section .ai-copy h2 span{color:#b9c7ff!important} .ai-section .ai-badges span{color:#fff!important;background:rgba(255,255,255,.08)} /* Stable reading surfaces over the moving mark */ .section:not(.ai-section):not(.feature-section){background-color:rgba(255,255,255,.88)!important} .section:nth-of-type(even):not(.ai-section):not(.feature-section){background-color:rgba(244,247,255,.86)!important} @media(max-width:800px){.global-puzzle{width:145vw;opacity:.11}.feature-section .sticky-showcase{display:block}.feature-section .sticky-visual{position:sticky!important;top:90px!important;height:340px!important;margin-bottom:32px}.feature-section .showcase-phone{height:290px;width:138px}.feature-section .feature-step{min-height:300px}} @media(prefers-reduced-motion:reduce){.global-puzzle{transform:translate(-50%,-50%) rotate(-18deg) scale(.9)!important;will-change:auto}} /* V16: one uninterrupted foreground-to-background brand mark. */ html{background:#f7faff} body{background:transparent!important} .global-puzzle{ position:fixed!important;z-index:12!important;left:50%!important;top:50%!important; width:min(84vw,1040px)!important;aspect-ratio:1;pointer-events:none!important; opacity:var(--brand-opacity,.24)!important; transform:translate3d(calc(-50% + var(--brand-x,0px)),calc(-50% + var(--brand-y,0px)),0) perspective(1100px) rotateY(var(--brand-yaw,0deg)) rotateX(var(--brand-tilt,7deg)) rotateZ(var(--brand-spin,0deg)) scale(var(--brand-scale,.75))!important; transform-origin:center center!important;backface-visibility:visible; filter:drop-shadow(0 24px 35px rgba(36,54,101,.12)); transition:none!important;will-change:transform,opacity; } .global-puzzle img{display:block;width:100%;height:100%;object-fit:contain} /* Keep all text, controls and product imagery above the floating brand artwork. */ .section>.container,.puzzle-story>.container{position:relative;z-index:14!important} #header,.site-header,header#header{z-index:100!important} /* The animated mark stays visible through all sections without washing out their content. */ .section:not(.ai-section):not(.feature-section){background-color:rgba(255,255,255,.77)!important} .section:nth-of-type(even):not(.ai-section):not(.feature-section){background-color:rgba(245,248,255,.77)!important} .feature-section{background:rgba(245,248,255,.76)!important} .ai-section{background:rgba(15,30,65,.96)!important} .ai-section::after{background:linear-gradient(100deg,rgba(13,28,62,.92),rgba(19,37,76,.85))!important} /* The mark itself stays behind every actual foreground UI, including AI demo. */ .ai-section>.container{z-index:14!important} @media(max-width:800px){.global-puzzle{width:128vw!important;filter:none;}} @media(prefers-reduced-motion:reduce){.global-puzzle{transform:translate(-50%,-50%) scale(1)!important;opacity:.12!important;will-change:auto}} /* V17 refinement: clear pastel page, legible content and true 3D rotation. */ .global-puzzle{ width:min(76vw,880px)!important; opacity:var(--brand-opacity,.12)!important; transform:translate3d(calc(-50% + var(--brand-x,0px)),calc(-50% + var(--brand-y,0px)),0) perspective(760px) rotateY(var(--brand-yaw,18deg)) rotateX(var(--brand-tilt,12deg)) rotateZ(var(--brand-spin,0deg)) scale(var(--brand-scale,.62))!important; filter:none!important; } .section:not(.ai-section):not(.feature-section){background-color:rgba(255,255,255,.80)!important} .section:nth-of-type(even):not(.ai-section):not(.feature-section){background-color:rgba(247,249,255,.82)!important} .feature-section{background:rgba(246,249,255,.84)!important} .ai-section{background:#142448!important} .ai-section::after{background:linear-gradient(100deg,rgba(13,28,62,.96),rgba(19,37,76,.92))!important} @media(max-width:800px){.global-puzzle{width:95vw!important}} @media(prefers-reduced-motion:reduce){.global-puzzle{transform:translate(-50%,-50%) rotateY(12deg) rotateX(8deg) scale(.68)!important;opacity:.11!important}} /* V21: compact sticky phone stays visible while the descriptions scroll below. */ .mobile-feature-counter{display:none} @media(max-width:800px){ .feature-section .sticky-showcase{display:flex!important;flex-direction:column!important;gap:0!important;position:relative!important;overflow:visible!important} .feature-section .sticky-visual{display:grid!important;position:sticky!important;top:85px!important;align-self:stretch!important;width:100%!important;height:clamp(225px,34svh,305px)!important;min-height:0!important;margin:0!important;z-index:12!important;overflow:hidden!important;border-radius:22px!important;background:linear-gradient(125deg,#e8efff,#f2eaff)!important;box-shadow:0 14px 36px rgba(29,51,109,.11);transition:background .5s ease} .feature-section .sticky-glow{width:240px!important;height:240px!important} .feature-section .showcase-phone{width:auto!important;height:calc(100% - 38px)!important;aspect-ratio:224 / 485!important;border-width:5px!important;border-radius:23px!important;transform:rotate(2deg)!important;box-shadow:0 13px 30px rgba(17,31,68,.22)!important} .feature-section .showcase-phone .screen{transition:opacity .42s ease,transform .42s ease!important} .feature-section .visual-label{display:none!important} .feature-section .feature-steps{display:block!important;width:100%!important;position:relative!important;z-index:2!important} .feature-section .feature-step{min-height:clamp(350px,65svh,600px)!important;display:flex!important;flex-direction:column!important;justify-content:center!important;padding:32px 4px 48px!important;opacity:.46!important;transition:opacity .35s!important} .feature-section .feature-step.is-active{opacity:1!important} .feature-section .feature-step h3{font-size:clamp(26px,7vw,36px)!important;margin:13px 0!important} .feature-section .feature-step p{font-size:13px!important} .feature-section .feature-mobile-visual{display:none!important} .feature-section .mobile-feature-counter{display:flex;align-items:center;gap:2px;position:absolute;bottom:10px;left:16px;right:16px;color:#435b91;font-size:11px;font-weight:800;letter-spacing:.08em} .feature-section .mobile-feature-current{color:#2766e9;font-size:14px} .feature-section .mobile-feature-track{height:3px;flex:1;background:#cad5f0;border-radius:9px;margin-left:13px;overflow:hidden} .feature-section .mobile-feature-fill{height:100%;width:14.285%;background:linear-gradient(90deg,#2766e9,#8667e9);border-radius:9px;transition:width .4s ease} } @media(max-width:420px){.feature-section .sticky-visual{top:80px!important;height:clamp(205px,32svh,260px)!important}} @media(prefers-reduced-motion:reduce){.feature-section .showcase-phone .screen{transition:none!important}} /* V22 — mobile cinematic overlay: one iPhone-like device behind the copy. */ @media (max-width:800px){ .feature-section .sticky-showcase{display:block!important;isolation:isolate!important;overflow:visible!important;position:relative!important} .feature-section .sticky-visual{position:sticky!important;top:82px!important;height:calc(100svh - 90px)!important;min-height:460px!important;width:100%!important;margin:0 0 calc(-100svh + 90px)!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;z-index:1!important;pointer-events:none!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;padding:0 0 24px!important} .feature-section .sticky-glow{position:absolute!important;right:-20%!important;width:95%!important;height:72%!important;opacity:.48!important;background:radial-gradient(circle,#cddcff 0%,#e6e4ff88 40%,transparent 73%)!important;filter:blur(22px)!important} .feature-section .showcase-phone{position:relative!important;flex:none!important;width:min(54vw,230px)!important;height:auto!important;aspect-ratio:224 / 485!important;max-height:64svh!important;margin-right:-3vw!important;border:5px solid #182037!important;border-radius:clamp(28px,8vw,43px)!important;transform:perspective(900px) rotateY(-12deg) rotateZ(5deg)!important;opacity:.65!important;background:#080c16!important;box-shadow:inset 0 0 0 2px #8b98b3,0 20px 45px #15234828!important;overflow:hidden!important;transition:opacity .4s!important} .feature-section .showcase-phone::before{content:""!important;position:absolute!important;top:8px!important;left:50%!important;transform:translateX(-50%)!important;width:37%!important;height:15px!important;border-radius:20px!important;background:#080b13!important;z-index:8!important;box-shadow:0 1px 2px #ffffff28!important} .feature-section .showcase-phone::after{content:""!important;position:absolute!important;inset:3px!important;border:1px solid #ffffff48!important;border-radius:inherit!important;z-index:7!important;pointer-events:none!important} .feature-section .showcase-phone .screen{inset:0!important;border-radius:inherit!important;object-fit:cover!important;object-position:top!important;transition:opacity .48s ease,transform .48s ease!important} .feature-section .feature-steps{position:relative!important;z-index:3!important;pointer-events:none!important;width:100%!important} .feature-section .feature-step{min-height:75svh!important;padding:38px 20% 55px 0!important;justify-content:center!important;opacity:.55!important;position:relative!important;filter:none!important;transition:opacity .4s!important} .feature-section .feature-step.is-active{opacity:1!important} .feature-section .feature-step h3{font-size:clamp(27px,7.2vw,39px)!important;line-height:1.48!important;text-shadow:0 2px 18px #f7f9fe,0 0 8px #f7f9fe!important} .feature-section .feature-step p{color:#4b5874!important;font-size:13px!important;font-weight:600!important;text-shadow:0 1px 12px #f7f9fe,0 0 6px #f7f9fe!important} .feature-section .feature-step .step-index,.feature-section .feature-step .pill-row{filter:drop-shadow(0 1px 8px #f7f9fe)!important} .feature-section .feature-step .pill-row span{background:#e9effbef!important} .feature-section .mobile-feature-counter{position:absolute!important;bottom:7%!important;left:auto!important;right:0!important;width:min(52%,205px)!important;z-index:10!important;padding:9px 12px!important;border-radius:18px!important;background:#ffffffd9!important;box-shadow:0 8px 22px #213b6920!important} .feature-section .visual-label{display:none!important} .feature-section .feature-mobile-visual{display:none!important} } @media(max-width:420px){ .feature-section .sticky-visual{top:76px!important;height:calc(100svh - 84px)!important;margin-bottom:calc(-100svh + 84px)!important} .feature-section .showcase-phone{width:55vw!important;margin-right:-6vw!important} .feature-section .feature-step{padding-right:12%!important;min-height:73svh!important} } @media(prefers-reduced-motion:reduce){.feature-section .showcase-phone .screen{transition:none!important}} /* V23 — contain the mobile floating iPhone inside the feature showcase. Grid overlay replaces the negative-margin sticky hack, so the device cannot follow the reader into Summary AI or subsequent sections. */ @media (max-width:800px){ .feature-section .sticky-showcase{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-template-rows:auto!important; align-items:stretch!important; position:relative!important; isolation:isolate!important; overflow:clip!important; } .feature-section .sticky-visual{ grid-area:1 / 1!important; position:sticky!important; top:82px!important; align-self:start!important; height:calc(100svh - 100px)!important; min-height:0!important; margin:0!important; z-index:1!important; overflow:hidden!important; pointer-events:none!important; } .feature-section .feature-steps{ grid-area:1 / 1!important; position:relative!important; z-index:2!important; min-width:0!important; } .feature-section .feature-step{min-height:73svh!important} } @media(max-width:420px){ .feature-section .sticky-visual{top:76px!important;height:calc(100svh - 94px)!important;margin:0!important} } /* V24 final refinements */ #about .three-grid{grid-template-columns:repeat(4,minmax(0,1fr))}#about .info-card{min-width:0}#about .quality-card .large-label{font-size:clamp(23px,2.4vw,35px)} .challenge-section{padding-top:25px;padding-bottom:75px}.challenge-card{max-width:1000px;margin:auto;padding:clamp(30px,6vw,76px);border-radius:34px;background:linear-gradient(135deg,#152649,#253d72);color:white;text-align:center;box-shadow:0 24px 65px #14244d20}.challenge-card .kicker{color:#a9c5ff}.challenge-stat{font-size:clamp(20px,3vw,30px);margin:15px 0}.challenge-stat strong{font-size:clamp(52px,9vw,106px);color:#fff;letter-spacing:-.07em}.challenge-card h2{font-size:clamp(24px,4vw,42px);line-height:1.55;color:#fff}.challenge-card h3{font-size:clamp(23px,3.2vw,35px);line-height:1.55;color:#fff}.challenge-card p{line-height:1.95;color:#e2eafc}.challenge-card .challenge-source{font-size:12px;color:#aebfdd}.challenge-divider{height:1px;background:#ffffff33;margin:32px 0}.challenge-card .btn{margin-top:20px} .ai-flow{border:1px solid #dce4f6;background:#fff;border-radius:28px;padding:18px;box-shadow:0 25px 75px #020e2e45;max-width:410px;width:100%;margin:auto}.ai-flow-head{display:flex;align-items:center;gap:12px;color:#1b2d4f;padding:3px 4px 14px}.ai-flow-head strong,.ai-flow-head small{display:block}.ai-flow-head small{font-size:11px;color:#77849d;margin-top:3px}.ai-flow-spark{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#7267ee;color:white;font-size:24px}.ai-flow-screen{position:relative;width:min(100%,315px);aspect-ratio:9/18.8;margin:auto;overflow:hidden;border-radius:32px;border:7px solid #171c28;background:#edf2f9;box-shadow:0 8px 25px #12223b22}.ai-flow-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}.ai-flow-shot.active{opacity:1;transform:translateY(0)}.ai-flow-progress{display:flex;justify-content:center;gap:10px;margin:15px 0 8px}.ai-flow-dot{border:1px solid #d8e1f5;background:#f3f6fd;color:#62718e;border-radius:18px;padding:6px 14px;cursor:pointer;font-size:12px}.ai-flow-dot.active{background:#4769d8;color:white;border-color:#4769d8}.ai-flow-caption{text-align:center;color:#1c3158;font-weight:700;margin:7px 0}.ai-flow-note{font-size:11px;color:#66758e;text-align:center;line-height:1.6;margin:8px 0 0} .plan-comparison{margin-top:75px}.plan-table-scroll{overflow-x:auto;border-radius:24px;box-shadow:0 12px 35px #152d5215;border:1px solid #e0e7f5}.plan-table{width:100%;border-collapse:collapse;min-width:570px;background:#fff}.plan-table th,.plan-table td{padding:17px 18px;border-bottom:1px solid #e6ebf5;text-align:center;color:#263652}.plan-table th:first-child{text-align:left;width:38%}.plan-table thead th{background:#f1f5ff;font-size:16px}.plan-table .is-premium{background:#eef3ff;color:#1746ad}.plan-table thead .is-premium{background:#dce8ff}.plan-table tbody tr:last-child>*{border-bottom:0}.plan-note{font-size:12px;line-height:1.9;color:#66718a;margin-top:17px} @media(max-width:1050px){#about .three-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){#about .three-grid{grid-template-columns:1fr}.challenge-section{padding-bottom:40px}.challenge-card{border-radius:22px}.ai-flow{max-width:360px}.ai-flow-screen{width:min(100%,260px)}.plan-comparison{margin-top:45px}.plan-table th,.plan-table td{padding:13px 9px;font-size:13px}} @media(prefers-reduced-motion:reduce){.ai-flow-shot{transition:none}} /* v25: editorial challenge + quick AI preview */ .challenge-section{padding:48px 0 100px}.challenge-new{max-width:1120px;margin:auto;border-radius:34px;background:#fff;box-shadow:0 25px 85px #15244d13;border:1px solid #e6ecfa;overflow:hidden}.challenge-top{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:clamp(28px,5vw,68px);align-items:center}.challenge-copy .kicker{color:#587bce}.challenge-copy h2{font-size:clamp(30px,3.8vw,53px);letter-spacing:-.045em;line-height:1.4;color:#152445;margin:20px 0}.challenge-copy h2 span{color:#5077d6}.challenge-lead{color:#66738c;line-height:1.9}.challenge-number{display:flex;align-items:baseline;gap:8px;color:#345fca;margin:22px 0 0}.challenge-number strong{font-family:'DM Sans',sans-serif;font-size:clamp(75px,10vw,126px);line-height:1;font-weight:800;letter-spacing:-.08em}.challenge-number span{font-size:clamp(22px,3vw,33px);font-weight:800}.challenge-metric{font-size:13px;color:#66738c}.challenge-metric span{margin-left:12px;color:#94a0b7}.challenge-chart{position:relative;min-height:340px;border-radius:24px;background:linear-gradient(145deg,#f0f5ff,#f9fbff);overflow:hidden;padding:20px}.chart-grid{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 65px,#d9e4fa 66px),repeating-linear-gradient(to right,transparent 0,transparent 78px,#e4ebf9 79px);opacity:.8}.challenge-chart svg{position:absolute;inset:22px 20px 58px;width:calc(100% - 40px);height:calc(100% - 80px);overflow:visible}.rise-line{stroke-dasharray:800;stroke-dashoffset:800;transition:stroke-dashoffset 2.4s cubic-bezier(.2,.8,.2,1)}.rise-area{opacity:0;transition:opacity 1.4s ease .7s}.rise-point{opacity:0;transition:opacity .5s ease 2.1s}.challenge-new.in-view .rise-line{stroke-dashoffset:0}.challenge-new.in-view .rise-area,.challenge-new.in-view .rise-point{opacity:1}.chart-float{position:absolute;top:26px;left:26px;font-weight:800;color:#385ec0;background:#ffffffd9;border:1px solid #e5ecfc;border-radius:100px;padding:9px 15px;font-size:12px;backdrop-filter:blur(12px)}.chart-disclaimer{position:absolute;bottom:14px;left:20px;right:12px;font-size:10px;color:#8794ad}.challenge-bottom{display:grid;grid-template-columns:1fr 1fr;gap:38px;padding:38px clamp(28px,5vw,68px);background:#142647;color:#fff}.challenge-small{font-size:11px;letter-spacing:.18em;color:#9fb9f8;font-weight:800}.challenge-bottom h3{font-size:clamp(24px,3vw,37px);line-height:1.5;margin:12px 0;color:#fff}.challenge-bottom p{color:#e1e9fa;line-height:2}.challenge-bottom p strong{color:#fff;font-size:1.1em}.challenge-bottom .btn{margin-top:10px}.challenge-new>.challenge-source{margin:0;padding:14px 28px;background:#142647;color:#9fb1d0;font-size:11px;border-top:1px solid #ffffff22} .ai-flow{max-width:445px;border:1px solid #ffffff48;background:linear-gradient(155deg,#fdfdff,#eaf0ff);border-radius:34px;padding:22px;box-shadow:0 30px 100px #030c2855,0 0 0 8px #ffffff0b}.ai-flow-head{padding:4px 4px 18px}.ai-flow-spark{border-radius:16px;background:linear-gradient(145deg,#5a8ef8,#9165e8);box-shadow:0 8px 22px #736bf055}.ai-flow-screen{width:min(100%,275px);border:8px solid #171e2e;border-radius:39px;box-shadow:0 15px 35px #101c3550;position:relative}.ai-flow-screen:after{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);width:32%;height:17px;background:#151b29;border-radius:20px;z-index:3;pointer-events:none}.ai-flow-progress{gap:7px;margin-top:19px}.ai-flow-dot{position:relative;flex:1;border:0;background:#dbe4f5;color:#5b6d91;border-radius:12px;padding:12px 3px 10px;font-weight:800;transition:background .25s,color .25s}.ai-flow-dot.active{background:#426dd5;color:#fff}.ai-flow-dot:after{content:'';position:absolute;left:9px;right:9px;bottom:4px;height:2px;background:#ffffff80;transform:scaleX(0);transform-origin:left}.ai-flow-dot.active:after{animation:stageFill 1.35s linear forwards}@keyframes stageFill{to{transform:scaleX(1)}}.ai-flow-caption{margin:12px 0 4px;font-size:13px}.ai-flow-note{margin-top:7px} @media(max-width:760px){.challenge-top,.challenge-bottom{grid-template-columns:1fr}.challenge-top{gap:12px}.challenge-chart{min-height:265px}.challenge-bottom{gap:6px}.challenge-number strong{font-size:80px}.challenge-section{padding-bottom:55px}.ai-flow{max-width:380px}.ai-flow-screen{width:min(100%,250px)}} @media(prefers-reduced-motion:reduce){.rise-line{stroke-dashoffset:0;transition:none}.rise-area,.rise-point{opacity:1;transition:none}.ai-flow-dot.active:after{animation:none;transform:scaleX(1)}} /* V26 — compact original-style AI demo with an input field based on the actual UI */ #ai .chat-panel{width:100%;max-width:480px;margin:auto;background:#fff;border:1px solid #dce6f8;border-radius:28px;overflow:hidden;box-shadow:0 26px 76px #06133550;color:#1a2a47} #ai .chat-top{display:flex;align-items:center;gap:12px;padding:18px 21px;border-bottom:1px solid #e9edf6;background:linear-gradient(110deg,#fff,#f4f7ff)} #ai .chat-mark{width:43px;height:43px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#477bea,#8b64e9);color:#fff;font-size:24px} #ai .chat-top strong,#ai .chat-top small{display:block}#ai .chat-top strong{font-size:15px}#ai .chat-top small{font-size:10px;color:#8994a9;margin-top:3px} #ai .chat-status{margin-left:auto;color:#5378cd;font-size:10px;letter-spacing:.1em;font-weight:800} #ai .chat-body{padding:25px 23px 20px;min-height:335px;background:linear-gradient(180deg,#fbfcff,#fff)} #ai .chat-label{font-size:12px;font-weight:700;color:#65748e;margin-bottom:10px} #ai .chat-compose{position:relative;min-height:66px;padding:17px 54px 17px 17px;background:#f6f8fc;border:1px solid #dce4f2;border-radius:17px;color:#1e3158;font-size:14px;font-weight:600;box-shadow:0 4px 14px #162a5410} #ai .chat-caret{display:inline-block;width:2px;height:1em;background:#4e76de;vertical-align:-2px;animation:blink .8s steps(1) infinite} #ai .chat-send{position:absolute;right:12px;bottom:11px;width:32px;height:32px;border-radius:11px;background:#4676e6;color:#fff;display:grid;place-items:center;font-size:20px} #ai .chat-thinking-label{display:none;align-items:center;gap:10px;color:#5b6b8a;font-size:12px;margin-top:21px}#ai .chat-thinking-label.visible{display:flex} #ai .thinking-dots{display:inline-flex;gap:4px}#ai .thinking-dots i{height:6px;width:6px;background:#6b83dc;border-radius:50%;animation:aiDots 1s ease-in-out infinite}#ai .thinking-dots i:nth-child(2){animation-delay:.15s}#ai .thinking-dots i:nth-child(3){animation-delay:.3s} #ai .chat-answer-wrap{margin-top:23px;min-height:95px;border-top:1px solid #edf0f7;padding-top:18px}#ai .chat-answer-title{font-size:12px;color:#536bd4;font-weight:800;margin-bottom:10px} #ai .chat-message.bot{font-size:13px;line-height:1.85;white-space:pre-line;color:#253552;background:none;border:0;padding:0;max-width:none;box-shadow:none} #ai .demo-note{padding:0 22px 18px;font-size:10px;color:#8791a5;margin:0;line-height:1.7} @keyframes blink{50%{opacity:0}}@keyframes aiDots{50%{transform:translateY(-4px);opacity:.5}} @media(max-width:600px){#ai .chat-panel{max-width:390px}#ai .chat-body{padding:20px 17px;min-height:320px}#ai .chat-top{padding:15px}} @media(prefers-reduced-motion:reduce){#ai .chat-caret,#ai .thinking-dots i{animation:none}} /* v27: actual input UI reference + live, readable demo */ #ai .chat-panel{background:#f8faff;border:1px solid #dce7ff;border-radius:26px;box-shadow:0 26px 80px #04153445} #ai .chat-top{background:#fff} #ai .ai-real-ui{position:relative;background:#f6f8ff;padding:12px 18px 6px;text-align:center} #ai .ai-real-ui img{display:block;width:100%;max-height:155px;object-fit:contain;object-position:center;border-radius:13px;background:#fff} #ai .ai-real-ui span{display:block;color:#8190ac;font-size:10px;margin-top:7px} #ai .chat-body{min-height:290px;padding-top:15px;background:#fff} #ai .chat-compose{background:#f5f7fc;border:1.5px solid #d7e1f5;border-radius:20px;min-height:68px} #ai #chatQuestion{display:inline;min-height:1em} #ai .chat-answer-wrap{min-height:115px} #ai .chat-status{background:#e9efff;padding:7px 10px;border-radius:99px} .challenge-new.in-view .rise-line{stroke-dashoffset:0!important} @media(max-width:600px){#ai .ai-real-ui img{max-height:115px}#ai .chat-body{min-height:280px}} /* V28: calmer graph and compact AI answer with source-book recommendations */ .challenge-new .rise-line{transition:stroke-dashoffset 6.8s cubic-bezier(.16,.55,.22,1)} .challenge-new .rise-area{transition:opacity 3.5s ease 1.8s} .challenge-new .rise-point{transition:opacity 1s ease 6.0s} #ai .chat-panel{overflow:hidden} #ai .chat-body.ai-demo-v28{padding:24px;min-height:unset;background:#fff} #ai .ai-demo-v28 .chat-compose{min-height:56px;padding:15px 55px 15px 17px} #ai .chat-answer-wrap{margin-top:20px;padding-top:20px;min-height:0} #ai .chat-answer-wrap:not(.ready){display:none} #ai .chat-message.bot{font-size:13px;line-height:1.95;margin:0 0 23px;color:#26354f} #ai .ai-book-heading{font-size:12px;font-weight:800;color:#253d68;border-top:1px solid #e9edf5;padding:18px 0 12px;display:flex;justify-content:space-between;align-items:center;gap:10px} #ai .ai-book-heading span{font-size:9px;letter-spacing:.15em;color:#8aa2cc} #ai .ai-book-list{display:grid;gap:9px} #ai .ai-book-item{display:flex;gap:13px;padding:12px;border:1px solid #e4ebf7;background:linear-gradient(125deg,#f9fbff,#f1f6ff);border-radius:14px;align-items:flex-start} #ai .ai-book-item img{width:57px;height:82px;object-fit:cover;flex-shrink:0;border-radius:3px;box-shadow:0 4px 12px #13234622} #ai .ai-book-item div{min-width:0} #ai .ai-book-item strong{display:block;font-size:11px;line-height:1.5;color:#14223f} #ai .ai-book-item small{display:block;font-size:10px;color:#8994ab;margin:4px 0} #ai .ai-book-item p{font-size:10px;color:#52617b;line-height:1.6;margin:4px 0 6px} #ai .ai-book-link{font-size:10px;font-weight:800;color:#2b99bf} #ai .demo-note{font-size:10px} @media(max-width:600px){#ai .chat-body.ai-demo-v28{padding:18px 15px}#ai .ai-book-item{padding:10px;gap:10px}#ai .ai-book-item img{width:49px;height:72px}#ai .chat-message.bot{font-size:12px}} /* V29: AI result and recommendations must remain fully visible on every viewport. */ #ai .ai-layout{align-items:start!important} #ai .chat-panel{height:auto!important;max-height:none!important;align-self:start!important;overflow:visible!important} #ai .chat-body,#ai .chat-body.ai-demo-v28{height:auto!important;max-height:none!important;overflow:visible!important} #ai .chat-answer-wrap{height:auto!important;max-height:none!important;overflow:visible!important} #ai .chat-message.bot{display:block!important;max-height:none!important;overflow:visible!important;-webkit-line-clamp:unset!important;line-clamp:unset!important} #ai .ai-book-list{height:auto!important;max-height:none!important;overflow:visible!important} /* Uniform genre styling; novel synopsis retains only its explanatory label. */ #genres .genre.special,#genres .genre{background:#fff!important} #genres .genre.special{grid-column:auto!important} @media(max-width:570px){#genres .genre.special{grid-column:auto!important}} /* V30: two book recommendations, with full cover visible */ #ai .ai-book-item img{height:90px;width:64px;object-fit:contain;object-position:center;background:#fff} #ai .ai-book-item{align-items:center;overflow:visible} #ai .ai-book-list{overflow:visible!important} @media(max-width:600px){#ai .ai-book-item img{height:82px;width:58px;object-fit:contain}} /* v33: integrate challenge into ABOUT US while preserving chart animation */ .about .challenge-embedded{margin-top:clamp(64px,8vw,120px);padding:0;background:transparent} .about .challenge-embedded>.container{width:100%;max-width:none;padding:0;margin:0} .about .challenge-embedded .challenge-new{width:100%} /* v35: rhythm, continuous partnerships and mobile 3-column comparison */ .section{padding-top:clamp(72px,7vw,108px);padding-bottom:clamp(72px,7vw,108px)} .section-head{margin-bottom:clamp(30px,4vw,46px)} .section-head h2{margin-top:14px;margin-bottom:16px} #about .challenge-section{padding:8px 0 clamp(54px,6vw,82px)} #about .three-grid{gap:clamp(12px,1.7vw,20px)} #about .info-card{padding:clamp(22px,2.5vw,32px)} #trust .stats{margin-bottom:clamp(28px,4vw,46px)} #trust .trust-box{margin-bottom:clamp(30px,4vw,48px)} #genres .genre-grid{gap:clamp(10px,1.5vw,16px)} #pricing .plan-comparison{margin-top:clamp(44px,5vw,66px)} #voices .so-voice-grid,#writers .writer-grid{row-gap:20px} #faq .faq-group{margin-bottom:26px} .partner-strip{margin-top:clamp(32px,4vw,50px);overflow:hidden} .partner-strip-label{font-size:11px;letter-spacing:.18em;font-weight:800;color:#5776b8;text-align:center;margin:0 0 20px} .partner-marquee{overflow:hidden;position:relative;width:100%;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .partner-marquee-track{display:flex;align-items:center;gap:16px;width:max-content;animation:partnerDrift 42s linear infinite;will-change:transform} .partner-marquee:hover .partner-marquee-track{animation-play-state:paused} .partner-marquee .partner-logo{flex:0 0 168px;width:168px;height:94px;display:flex;align-items:center;justify-content:center;border:1px solid #e7ecf7;border-radius:16px;background:#fff;padding:16px 20px} .partner-marquee .partner-logo img{width:100%;height:100%;object-fit:contain} @keyframes partnerDrift{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}} @media(max-width:700px){ .section{padding-top:66px;padding-bottom:66px} .section-head{margin-bottom:28px} .section-head h2{line-height:1.4} #about .challenge-section{padding:0 0 48px} #about .info-card{padding:22px} #trust .trust-box{margin-bottom:26px} #genres .genre{padding:17px 14px} .partner-marquee .partner-logo{flex-basis:132px;width:132px;height:74px;padding:11px 14px} .partner-marquee-track{gap:12px;animation-duration:36s} .plan-comparison{width:calc(100% - 24px)!important;max-width:none!important} .plan-table-scroll{width:100%;overflow-x:hidden;border-radius:14px} .plan-table{min-width:0!important;width:100%;table-layout:fixed} .plan-table th,.plan-table td{padding:10px 5px!important;font-size:clamp(10px,2.8vw,12px)!important;line-height:1.45;overflow-wrap:anywhere;word-break:normal} .plan-table th:first-child{width:37%;text-align:left;padding-left:9px!important} .plan-table th:nth-child(2),.plan-table td:nth-child(2){width:28%} .plan-table th:nth-child(3),.plan-table td:nth-child(3){width:35%} .plan-table thead th{font-size:clamp(10px,2.75vw,12px)!important;letter-spacing:-.03em} .plan-table td strong{font-size:inherit} .plan-note{font-size:11px} } @media(max-width:375px){.plan-table th,.plan-table td{font-size:10px!important;padding:9px 3px!important}.plan-table th:first-child{padding-left:6px!important}} @media(prefers-reduced-motion:reduce){.partner-marquee-track{animation:none}} /* V37: Restored V14 section-based brand motif and color wash. */ /* V12 — brand puzzle motifs: subtle, scroll-linked, double-sided background art */ .section{position:relative;isolation:isolate} .section > .container{position:relative;z-index:1} .brand-motif{--motif-scroll:0;--motif-color:#4b7be5;--motif-next:#72d48a;position:absolute;top:12%;right:clamp(-115px,-5vw,-35px);width:clamp(190px,26vw,380px);aspect-ratio:1;z-index:0;pointer-events:none;perspective:900px;opacity:.14;filter:saturate(.85)} .section:nth-of-type(even)>.brand-motif{right:auto;left:clamp(-115px,-5vw,-35px);top:22%} .brand-motif-flipper{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:translate3d(0,calc((.5 - var(--motif-scroll))*60px),0) rotateY(calc(var(--motif-scroll)*180deg)) rotateZ(calc((var(--motif-scroll) - .5)*18deg));will-change:transform} .brand-motif-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center} .brand-motif-face svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 20px 16px rgba(35,58,106,.08))} .brand-motif-face path{fill:var(--motif-color)} .brand-motif-face.motif-back{transform:rotateY(180deg)} .brand-motif-face.motif-back path{fill:var(--motif-next)} /* motifs always remain behind text and UI; never affect document flow */ @media(max-width:760px){.brand-motif{width:clamp(145px,42vw,250px);right:-85px;top:6%;opacity:.085}.section:nth-of-type(even)>.brand-motif{left:-85px;top:12%}.brand-motif-flipper{will-change:auto}} @media(prefers-reduced-motion:reduce){.brand-motif-flipper{transform:none!important;will-change:auto}} /* V13 — immersive, scroll-driven brand color choreography */ .section:has(> .brand-motif){--wash-r:235;--wash-g:241;--wash-b:255;--wash-strength:.95;overflow:hidden;isolation:isolate;background:rgb(var(--wash-r) var(--wash-g) var(--wash-b))!important;transition:background-color .08s linear} .section:has(> .brand-motif)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 65% 65% at var(--wash-x,78%) var(--wash-y,45%),rgba(255,255,255,.78),transparent 85%);opacity:.8} .section:has(> .brand-motif)>.container{position:relative;z-index:2} .section>.brand-motif{--motif-scroll:0;opacity:.42!important;filter:none!important;width:clamp(480px,73vw,1100px)!important;top:50%!important;right:-25%!important;left:auto!important;transform:translateY(-50%);z-index:1;mix-blend-mode:multiply;perspective:1400px;transition:opacity .2s} .section:nth-of-type(even)>.brand-motif{left:-28%!important;right:auto!important} .section>.brand-motif .brand-motif-flipper{transform:translate3d(0,calc((.5 - var(--motif-scroll))*120px),0) rotateY(calc(var(--motif-scroll)*360deg)) rotateZ(calc(var(--motif-scroll)*95deg - 28deg))!important;filter:drop-shadow(0 35px 38px rgba(42,65,122,.11));will-change:transform} .section>.brand-motif .brand-motif-face svg{filter:none} .section>.brand-motif .brand-motif-face path{fill:var(--motif-color)} .section>.brand-motif .motif-back path{fill:var(--motif-next)} /* Contrast is maintained with a readable frosted content area, while color remains visible across the whole section. */ .section:has(> .brand-motif) .section-head,.section:has(> .brand-motif) .pricing-intro{position:relative} @media(max-width:760px){.section>.brand-motif{width:105vw!important;right:-52%!important;opacity:.25!important}.section:nth-of-type(even)>.brand-motif{left:-52%!important}.section:has(> .brand-motif)::before{background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,.2))}} @media(prefers-reduced-motion:reduce){.section>.brand-motif .brand-motif-flipper{transform:rotateZ(-15deg)!important;will-change:auto}.section:has(> .brand-motif){background:#f2f6ff!important}} /* V14: true brand favicon, clockwise 3D-in-plane rotation and scale-to-background. The puzzle always faces the viewer: rotateZ is the main motion; a fixed perspective tilt supplies depth, never a Y-axis flip. */ .section>.brand-motif{width:clamp(560px,92vw,1540px)!important;right:-34%!important;left:auto!important;top:50%!important;opacity:.30!important;mix-blend-mode:multiply;perspective:1800px;transform:translateY(-50%);filter:none!important} .section:nth-of-type(even)>.brand-motif{left:-38%!important;right:auto!important} .section>.brand-motif .brand-motif-flipper{transform:translate3d(0,calc((.5 - var(--motif-scroll))*100px),0) rotateX(13deg) rotateZ(calc(-35deg + var(--motif-scroll)*230deg)) scale(calc(.72 + var(--motif-scroll)*1.18))!important;transform-origin:50% 50%;transform-style:preserve-3d;filter:drop-shadow(0 35px 40px rgba(28,54,108,.16));will-change:transform} .brand-motif-logo{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none} @media(max-width:760px){.section>.brand-motif{width:145vw!important;right:-85%!important;opacity:.19!important}.section:nth-of-type(even)>.brand-motif{left:-85%!important;right:auto!important}.section>.brand-motif .brand-motif-flipper{transform:rotateX(9deg) rotateZ(calc(-35deg + var(--motif-scroll)*230deg)) scale(calc(.65 + var(--motif-scroll)*1.05))!important}} @media(prefers-reduced-motion:reduce){.section>.brand-motif .brand-motif-flipper{transform:rotateZ(24deg) scale(.9)!important;will-change:auto}.section>.brand-motif{opacity:.14!important}} /* V37: The AI panel has its FINAL height before animation starts. */ #ai .chat-answer-wrap{visibility:hidden;opacity:0;transition:opacity .45s ease;} #ai .chat-answer-wrap.ready{visibility:visible;opacity:1;} #ai .chat-thinking-label{position:absolute;z-index:3;left:20px;right:20px;margin-top:7px;pointer-events:none;} #ai .chat-body.ai-demo-v28{position:relative;} #ai .chat-panel{align-self:start;} /* Keep the original V14 pastel washes visible behind section content. */ .section:has(> .brand-motif){background:rgb(var(--wash-r) var(--wash-g) var(--wash-b))!important;} .section.ai-section:has(> .brand-motif){background:#142448!important;} .section:has(> .brand-motif) > .container{position:relative;z-index:2;} /* V39 — consistent AI height, no trailing strip below the AI demo */ #experience{padding-bottom:0!important;} #experience .experience-ai-block{margin-bottom:0!important;} #ai .chat-panel{width:100%;min-width:0;} #ai .chat-body.ai-demo-v28{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;display:flex;flex-direction:column;} #ai .chat-answer-wrap{display:block!important;visibility:visible!important;opacity:0;pointer-events:none;transition:opacity .65s ease;} #ai .chat-answer-wrap.ready{opacity:1;pointer-events:auto;} #ai .chat-thinking-label{position:absolute!important;top:110px;left:20px;right:20px;margin:0!important;} #ai .chat-compose{min-height:56px;} /* The puzzle stays behind content; stronger yet readable brand-color washes. */ main > section.section:not(.ai-section){position:relative;isolation:isolate;background:rgb(var(--v39-r,232) var(--v39-g,239) var(--v39-b,255))!important;overflow:hidden;transition:background-color .1s linear;} main > section.section > .container{position:relative;z-index:2;} main > section.section > .brand-motif{display:block!important;position:absolute!important;top:50%!important;left:auto!important;right:-26%!important;width:clamp(420px,78vw,1120px)!important;height:auto!important;aspect-ratio:1;opacity:.21!important;transform:translateY(-50%)!important;z-index:1!important;pointer-events:none;mix-blend-mode:multiply;perspective:1400px;} main > section.section:nth-of-type(even) > .brand-motif{left:-27%!important;right:auto!important;} main > section.section > .brand-motif .brand-motif-flipper{width:100%;height:100%;transform:perspective(1400px) translate3d(0,calc((.5 - var(--v39-progress,0)) * 85px),0) rotateX(calc(var(--v39-x0,10deg) + var(--v39-progress,0) * var(--v39-xrange,120deg))) rotateY(calc(var(--v39-y0,0deg) + var(--v39-progress,0) * var(--v39-yrange,240deg))) rotateZ(calc(var(--v39-z0,-12deg) + var(--v39-progress,0) * var(--v39-zrange,80deg))) scale(calc(.8 + var(--v39-progress,0) * .28))!important;transform-style:preserve-3d;will-change:transform;} main > section.section > .brand-motif .brand-motif-logo{width:100%;height:100%;object-fit:contain;backface-visibility:visible;} .experience-ai-block{position:relative;z-index:2;padding:clamp(64px,9vw,120px) 0;margin-top:clamp(48px,6vw,90px);background:#142448!important;color:#fff;isolation:isolate;} .experience-ai-block .brand-motif{display:none!important;} @media(max-width:760px){main > section.section > .brand-motif{width:145vw!important;right:-82%!important;opacity:.14!important}main > section.section:nth-of-type(even) > .brand-motif{left:-82%!important;right:auto!important}} @media(prefers-reduced-motion:reduce){main > section.section > .brand-motif .brand-motif-flipper{transform:rotateX(15deg) rotateZ(-16deg)!important;will-change:auto}} /* V40: eliminate the unwanted blue band at the AI / rankings boundary. */ #experience{padding-bottom:0!important;margin-bottom:0!important} #experience .experience-ai-block{margin-bottom:-2px!important;padding-bottom:clamp(64px,9vw,120px)!important} #rankings{margin-top:0!important;border-top:0!important;background:#f8faff!important} #rankings::before{display:none!important} /* Restore the V27-style continuous 3D turning movement on each existing puzzle. */ main > section.section > .brand-motif .brand-motif-flipper{ transform:translate3d(var(--v40-x,0px),var(--v40-y,0px),0) perspective(760px) rotateY(var(--v40-yaw,18deg)) rotateX(var(--v40-tilt,12deg)) rotateZ(var(--v40-spin,0deg)) scale(var(--v40-scale,.7))!important; } @media(prefers-reduced-motion:reduce){main > section.section > .brand-motif .brand-motif-flipper{transform:rotateY(12deg) rotateX(8deg) rotateZ(-12deg) scale(.7)!important}} /* V41: actual parent is #features (not #experience). Remove its trailing blue strip. */ #features.feature-section{padding-bottom:0!important;margin-bottom:0!important;} #features > #ai.experience-ai-block{margin-bottom:0!important;display:flow-root;} #features + #discover{margin-top:0!important;} /* V27-style single, continuous scroll-driven 3D logo, rather than resetting every section. */ main > section.section > .brand-motif{display:none!important;} .global-puzzle-v41{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;perspective:1100px;} .global-puzzle-v41 .brand-motif-flipper{position:absolute;width:min(74vw,850px);height:min(74vw,850px);right:-17vw;top:30%;opacity:.13;transform-style:preserve-3d;transform:translate3d(var(--brand-x,0px),var(--brand-y,0px),0) rotateY(var(--brand-yaw,12deg)) rotateX(var(--brand-tilt,8deg)) rotateZ(var(--brand-spin,0deg)) scale(var(--brand-scale,.68));will-change:transform;} .global-puzzle-v41 img{width:100%;height:100%;object-fit:contain;} @media(max-width:760px){.global-puzzle-v41 .brand-motif-flipper{width:110vw;height:110vw;right:-55vw;top:36%;opacity:.11;}} @media(prefers-reduced-motion:reduce){.global-puzzle-v41 .brand-motif-flipper{transform:rotateZ(-12deg) scale(.68);will-change:auto;}} /* V42 — only one scroll-animated brand mark, never a fixed motif in each section. */ .brand-motif, .section > .brand-motif, .community-group .brand-motif, .closing > .brand-motif{display:none!important;} .global-puzzle-v41{display:none!important;} .global-puzzle-v42{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;perspective:1400px;} .global-puzzle-v42 .brand-motif-flipper{position:absolute;left:50%;top:50%;width:min(91vw,1040px);height:min(91vw,1040px);opacity:var(--brand-opacity,.12);transform-origin:center;transform-style:preserve-3d;transform:translate3d(calc(-50% + var(--brand-x,0px)),calc(-50% + var(--brand-y,0px)),0) rotateY(var(--brand-yaw,12deg)) rotateX(var(--brand-tilt,8deg)) rotateZ(var(--brand-spin,0deg)) scale(var(--brand-scale,.68));will-change:transform;} .global-puzzle-v42 img{display:block;width:100%;height:100%;object-fit:contain;} @media(max-width:760px){.global-puzzle-v42 .brand-motif-flipper{width:120vw;height:120vw;}} @media(prefers-reduced-motion:reduce){.global-puzzle-v42 .brand-motif-flipper{transform:translate(-50%,-50%) rotateX(8deg) rotateY(12deg) rotateZ(-12deg) scale(.68);will-change:auto;}} /* Four more distinct but still readable color washes, behind all content. */ #about, #discover, #pricing, #voices, #faq{background:#e1ebff!important;} #trust, #features, #compare, #writers{background:#ffe3e8!important;} #genres, .audience, .community-group{background:#fff0bc!important;} #apps, .app-section{background:#ddf2df!important;} #ai, #features #ai{background:#142448!important;} /* Let the continuous motif float behind content but in front of the wash. */ main > section, .community-group, .closing{position:relative;isolation:auto;} main > section > .container, .community-group .container, .closing .container{position:relative;z-index:2;} #about.section:has(> .brand-motif),#discover.section:has(> .brand-motif),#pricing.section:has(> .brand-motif),#voices.section:has(> .brand-motif),#faq.section:has(> .brand-motif){background:#e1ebff!important;} #trust.section:has(> .brand-motif),#features.section:has(> .brand-motif),#compare.section:has(> .brand-motif),#writers.section:has(> .brand-motif){background:#ffe3e8!important;} #genres.section:has(> .brand-motif),.audience.section:has(> .brand-motif){background:#fff0bc!important;} #apps.section:has(> .brand-motif){background:#ddf2df!important;} /* v46: app block is part of the audience section, not a separate green section. */ section.audience #apps.app-section.app-embedded{background:transparent!important;background-image:none!important;} /* v47: official apps directly after feature 07, before AI demo */ #features .feature-app-inset{position:relative;isolation:isolate;background:transparent!important;background-image:none!important;margin:clamp(24px,4vw,60px) 0 0;padding:clamp(46px,6vw,90px) 0;border-top:1px solid rgba(94,122,186,.16)} #features .feature-app-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,100px);align-items:center} #features .feature-app-copy h2{font-size:clamp(1.9rem,3.5vw,3.35rem);line-height:1.4;letter-spacing:-.035em;margin:0 0 22px} #features .feature-app-copy p{font-size:clamp(.95rem,1.2vw,1.08rem);line-height:2;color:#4a5568;max-width:540px;margin:0 0 28px} #features .feature-app-badges{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap} #features .feature-app-badges a{display:inline-flex;align-items:center} #features .feature-app-badges img{display:block;height:48px;width:auto;max-width:175px;object-fit:contain} #features .feature-app-visual{display:flex;justify-content:center;align-items:center;min-width:0} #features .feature-app-visual img{display:block;width:auto;height:auto;max-width:100%;max-height:600px;object-fit:contain;filter:drop-shadow(0 22px 38px rgba(23,38,70,.12))} @media(max-width:760px){#features .feature-app-layout{grid-template-columns:1fr;gap:28px;text-align:center}#features .feature-app-copy p{margin-left:auto;margin-right:auto}#features .feature-app-badges{justify-content:center}#features .feature-app-visual img{max-height:490px}#features .feature-app-inset{padding:46px 0 56px}} @media(max-width:390px){#features .feature-app-badges{gap:10px}#features .feature-app-badges img{height:40px;max-width:145px}}