/* DynApp welcome experience: warm neutrals, brand burgundy and original UI illustrations. */
.marketing-shell,.auth-shell { --bg:#fffdfb; --surface-1:#fff; --surface-2:#f5f1ee; --text:#292321; --text-2:#514946; --muted:#756c68; --line:#eae3df; --brand-soft:#f7e9e5; background:var(--bg); }
:root[data-theme='dark'] .marketing-shell,:root[data-theme='dark'] .auth-shell { --bg:#181617; --surface-1:#211e20; --surface-2:#2b2528; --text:#fff4f0; --text-2:#d9c7c0; --muted:#bfaea8; --line:#3b3034; --brand-soft:#3d2329; }
.marketing-shell .site-header,.auth-shell .site-header { background:var(--bg); border-bottom:1px solid transparent; position:relative; height:86px; }
.marketing-shell .site-header .container,.auth-shell .site-header .container { max-width:1420px; padding-inline:48px; }
.marketing-shell .brand-link img,.auth-shell .brand-link img { height:32px; }
.marketing-shell .primary-nav,.auth-shell .primary-nav { position:absolute; left:50%; transform:translateX(-50%); gap:15px; }
.marketing-shell .primary-nav a,.auth-shell .primary-nav a { font-size:12px; font-weight:600; padding:9px 11px; }
.marketing-shell .search-trigger,.auth-shell .search-trigger { display:none; }
.header-signup { padding:10px 17px; font-size:12px; font-weight:650; }
.marketing-shell .login-btn,.auth-shell .login-btn { height:38px; padding-inline:20px; border-radius:9px; font-size:12px; }
.landing-container { max-width:1220px; width:calc(100% - 96px); margin-inline:auto; }
.landing-hero { position:relative; min-height:680px; overflow:hidden; background:radial-gradient(ellipse at 50% 62%,#f5dcd2a6 0, #f9eee56b 34%,transparent 69%); }
:root[data-theme='dark'] .landing-hero { background:radial-gradient(ellipse at 50% 62%,#61333a66,transparent 70%); }
.hero-copy { position:relative; z-index:2; text-align:center; max-width:850px; margin:0 auto; padding:58px 24px 0; pointer-events:none; }
.hero-copy a { pointer-events:auto; }
.hero-badge { display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:600; color:var(--text-2); border:1px solid var(--line); background:var(--surface-1); padding:8px 13px; border-radius:30px; }
.hero-badge > span { width:6px; height:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 0 4px var(--brand-soft); margin-right:3px; }
.hero-copy h1 { font-size:clamp(50px,6.2vw,84px); font-weight:600; line-height:1.18; letter-spacing:-.065em; margin:23px 0 20px; }
.hero-copy h1 > span { color:var(--brand-text); }
.hero-copy p { font-size:16px; line-height:1.9; color:var(--muted); }
.hero-copy p strong { font-weight:650; color:var(--text-2); }
.hero-actions { display:flex; justify-content:center; align-items:center; gap:25px; margin-top:27px; }
.hero-cta { height:47px; padding:0 25px; border-radius:10px; box-shadow:0 8px 22px -9px #85000177; font-size:13px; gap:20px; }
.hero-explore { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; }
.hero-small { margin-top:17px; display:flex; justify-content:center; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
.hero-small small { margin:0 6px; }
.floating-universe { position:absolute; max-width:1320px; width:100%; height:100%; inset:0; margin:auto; pointer-events:none; }
.floating-tool { --tilt:0deg; position:absolute; width:88px; height:88px; border-radius:23px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px solid #fff9; box-shadow:inset 0 2px 3px #fffc,0 15px 30px -18px #76473870; transform:rotate(var(--tilt)); pointer-events:auto; transition:box-shadow .2s; animation:float-tile 7s ease-in-out infinite; }
.floating-tool:hover,.floating-tool:focus-visible { box-shadow:0 18px 35px -12px #76473877; animation-play-state:paused; outline-offset:7px; }
.floating-tool .icon { filter:drop-shadow(0 2px 0 #fff8); stroke-width:1.7; }
.floating-tool span { font-size:9px; font-weight:650; }
.tone-rose { background:#f6dcd8; color:#8b363b; }
.tone-peach { background:#f6e4d4; color:#9a593d; }
.tone-lavender { background:#e9e1f1; color:#7e6495; }
.tone-butter { background:#f3ebc9; color:#938044; }
.tone-mint { background:#e0eae2; color:#527d66; }
.tone-blue { background:#dee6ee; color:#53738e; }
.float-1 { left:7%; top:14%; --tilt:-13deg; }
.float-2 { left:3%; top:43%; --tilt:12deg; width:80px; height:80px; animation-delay:-2s; }
.float-3 { left:18%; top:63%; --tilt:-11deg; animation-delay:-4s; }
.float-4 { right:6%; top:14%; --tilt:12deg; animation-delay:-1s; }
.float-5 { right:3%; top:46%; --tilt:-13deg; animation-delay:-3s; }
.float-6 { right:18%; top:64%; --tilt:9deg; animation-delay:-5s; }
.float-7 { left:34%; top:70%; --tilt:10deg; width:70px; height:70px; animation-delay:-2s; }
.float-8 { right:34%; top:69%; --tilt:-10deg; width:70px; height:70px; animation-delay:-4s; }
.float-9 { left:16%; top:37%; --tilt:-7deg; width:58px; height:58px; animation-delay:-3s; }
.float-10 { right:16%; top:37%; --tilt:9deg; width:58px; height:58px; animation-delay:-1s; }
.float-11 { left:4%; top:72%; --tilt:7deg; width:52px; height:52px; animation-delay:-5s; }
.float-12 { right:5%; top:75%; --tilt:-7deg; width:52px; height:52px; animation-delay:-2s; }
.float-9 .icon,.float-10 .icon,.float-11 .icon,.float-12 .icon { width:25px; height:25px; }
.float-9 span,.float-10 span,.float-11 span,.float-12 span { display:none; }
.universe-caption { position:absolute; top:84%; width:100%; display:flex; justify-content:center; align-items:center; gap:17px; font-size:11px; color:var(--muted); }
.universe-line { width:50px; height:1px; background:var(--line); }
.scroll-cue { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:grid; justify-items:center; gap:10px; color:var(--muted); }
.scroll-cue span { font-size:8px; font-weight:700; letter-spacing:.2em; white-space:nowrap; }
@keyframes float-tile { 0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-10px) rotate(calc(var(--tilt) + 3deg))} }
.landing-eyebrow { display:block; font-size:9px; letter-spacing:.17em; font-weight:750; color:var(--brand-text); }
.landing-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:30px; }
.landing-section-head h2,.center-section-head h2,.landing-faq h2 { font-size:clamp(28px,3.2vw,40px); letter-spacing:-.045em; line-height:1.2; margin-top:12px; font-weight:600; }
.landing-section-head p { font-size:12px; color:var(--muted); line-height:1.8; }
.landing-features { padding-top:64px; padding-bottom:35px; }
.feature-picker { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.feature-pick { border:1px solid var(--line); border-radius:16px; padding:20px 16px 16px; position:relative; background:var(--surface-1); transition:transform .2s,border-color .2s,box-shadow .2s; }
.feature-pick:hover { border-color:#bf8d82; transform:translateY(-5px); box-shadow:0 12px 25px -18px #76473870; }
.pick-icon { height:50px; width:50px; border-radius:14px; display:grid; place-items:center; margin-bottom:20px; }
.feature-pick h3 { font-size:12px; font-weight:700; margin-bottom:8px; min-height:32px; }
.pick-status { font-size:9px; color:var(--muted); }
.pick-status.ready { color:#42815d; }
.feature-pick > .icon { position:absolute; top:20px; right:14px; color:#b1a39d; width:13px; }
.feature-stories { padding:50px 0 30px; }
.feature-story { display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,7vw,100px); align-items:center; padding:54px 0; }
.feature-story.reverse .story-visual { order:2; }
.story-copy h2 { font-size:clamp(30px,3.4vw,46px); font-weight:600; letter-spacing:-.045em; line-height:1.2; margin:16px 0 20px; }
.story-copy > p { font-size:13px; color:var(--muted); line-height:1.95; max-width:430px; }
.story-copy ul { margin:22px 0; list-style:none; display:grid; gap:11px; }
.story-copy li { display:flex; align-items:flex-start; gap:9px; font-size:11px; color:var(--text-2); }
.story-copy li .icon { color:var(--brand-text); flex-shrink:0; }
.story-link { display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:700; color:var(--brand-text); padding:9px 0; }
.story-link:hover { gap:18px; }
.visual-caption { display:block; text-align:center; color:var(--muted); font-size:9px; margin-top:12px; }
.feature-art { min-height:340px; border-radius:24px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:32px; }
.feature-art > div { position:relative; }
.convert-art { display:flex; gap:20px; align-items:center; padding-bottom:35px; }
.file-sheet { width:122px; height:154px; background:#fffc; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; box-shadow:0 12px 28px -14px #75373240; transform:rotate(-8deg); }
.file-sheet b { font-size:24px; letter-spacing:-1px; }
.file-sheet small { font-size:9px; color:#9c7270; }
.result-sheet { transform:rotate(8deg); color:#51775e; background:#fffef9; }
.convert-arrow { display:grid; place-items:center; width:37px; height:37px; background:#ffffff80; border-radius:50%; }
.art-pill { position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:7px; padding:9px 15px; background:#fffc; color:#685a55; border-radius:30px; font-size:10px; white-space:nowrap; box-shadow:0 5px 15px -10px #75483850; }
.bio-art { width:214px; background:#fffdf8; border:6px solid #fff; box-shadow:0 14px 30px -15px #775b4055; border-radius:23px; padding:20px 15px 14px; display:flex; flex-direction:column; align-items:center; gap:8px; transform:rotate(-5deg); color:#604d40; }
.bio-art-avatar { width:42px; height:42px; border-radius:50%; background:#9a6554; color:white; display:grid; place-items:center; font-size:20px; }
.bio-art > b { font-size:14px; }
.bio-art > small { font-size:7px; margin-bottom:9px; }
.bio-art > span { width:100%; font-size:9px; padding:9px 12px; border:1px solid #e7ded0; border-radius:6px; display:flex; justify-content:space-between; }
.bio-art-social { display:flex; gap:13px; padding-top:6px; }
.analytics-art { width:320px; border-radius:12px; background:#fffdfd; color:#605374; padding:0 20px 18px; box-shadow:0 15px 30px -15px #60508044; transform:rotate(-3deg); }
.art-window { display:flex; align-items:center; gap:4px; border-bottom:1px solid #ece6f1; margin-bottom:15px; padding:12px 0; }
.art-window i { width:5px; height:5px; border-radius:50%; background:#dfd2e8; }
.art-window small { font-size:8px; margin:auto; }
.art-caption { font-size:8px; color:#94859e; }
.art-metrics { display:flex; gap:35px; margin:14px 0 22px; }
.art-metrics span { font-size:9px; }
.art-metrics b { display:block; font-size:25px; font-weight:600; }
.art-bars { height:80px; display:flex; gap:10px; align-items:flex-end; border-bottom:1px solid #eee9f0; }
.art-bars i { background:#b4a0c7; border-radius:3px 3px 0 0; flex:1; }
.art-bars i:nth-child(3n) { background:#e0d5e9; }
.art-chart-label { display:flex; justify-content:space-between; font-size:7px; color:#9c8da9; margin-top:7px; }
.wheel-art { margin-bottom:25px; }
.preview-wheel { height:230px; width:230px; border:8px solid #fffef3; border-radius:50%; background:conic-gradient(#b47766 0deg 45deg,#f2d5a7 45deg 90deg,#a6b5a1 90deg 135deg,#f6e9ca 135deg 180deg,#b47766 180deg 225deg,#f2d5a7 225deg 270deg,#a6b5a1 270deg 315deg,#f6e9ca 315deg); box-shadow:0 15px 30px -15px #8a70445e; display:grid; place-items:center; transform:rotate(16deg); }
.preview-wheel > span { width:73px; height:73px; background:#fffdf3; border-radius:50%; display:grid; align-content:center; text-align:center; font-size:11px; font-weight:700; line-height:1.4; color:#756142; transform:rotate(-16deg); box-shadow:0 1px 6px #59412733; }
.wheel-pointer { position:absolute; top:-6px; left:calc(50% - 10px); width:20px; height:27px; background:#8e5547; clip-path:polygon(0 0,100% 0,50% 100%); z-index:1; }
.qr-art { background:#fffdfa; width:220px; border-radius:17px; text-align:center; padding:23px 18px 16px; box-shadow:0 15px 25px -15px #44624755; transform:rotate(5deg); display:grid; justify-items:center; gap:13px; color:#426953; }
.qr-art-label { font-size:9px; font-weight:600; }
.qr-art-code { border:1px solid #dce7db; border-radius:12px; padding:12px; }
.qr-art > span:not(.qr-art-label) { font-size:8px; }
.qr-art > small { font-size:7px; color:#839682; }
.tools-art { width:310px; height:245px; }
.mini-code { background:#fff; border-radius:12px; width:240px; padding:18px; box-shadow:0 13px 25px -15px #344b6155; transform:rotate(-4deg); color:#536880; }
.mini-code > span { font-size:9px; display:flex; align-items:center; gap:8px; }
.mini-code i { width:6px; height:6px; background:#d6a9a6; border-radius:50%; }
.mini-code pre { font-size:14px; margin-top:18px; line-height:1.9; }
.mini-colors { position:absolute; bottom:6px; left:-12px; display:flex; background:white; padding:12px; border-radius:12px; flex-wrap:wrap; width:130px; box-shadow:0 10px 20px -10px #344b6140; transform:rotate(6deg); }
.mini-colors i { width:35px; height:39px; background:#850001; }
.mini-colors i:nth-child(2) { background:#c58c7d; }.mini-colors i:nth-child(3) { background:#f0ddcf; }
.mini-colors span { font-size:8px; margin-top:7px; }
.mini-type { position:absolute; right:0; bottom:10px; height:115px; width:125px; background:#fff9ee; border-radius:13px; display:grid; place-content:center; text-align:center; font-size:45px; line-height:1.2; transform:rotate(8deg); box-shadow:0 10px 20px -10px #344b6140; color:#856352; }
.mini-type span { font-size:7px; margin-top:7px; }
.how-section { margin:60px 0 90px; background:var(--surface-2); padding:70px 0; }
.center-section-head { text-align:center; }
.how-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:70px; padding-top:50px; }
.how-steps article > span { display:block; font-size:11px; color:var(--brand-text); padding-bottom:17px; border-bottom:1px solid var(--line); margin-bottom:22px; font-weight:750; }
.how-steps h3 { font-size:17px; font-weight:650; }
.how-steps p { font-size:12px; color:var(--muted); line-height:1.9; margin-top:10px; }
.landing-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; padding-bottom:80px; }
.landing-faq header > p { font-size:12px; color:var(--muted); margin-top:18px; }
.landing-faq details { border-bottom:1px solid var(--line); }
.landing-faq summary { list-style:none; font-size:13px; font-weight:650; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 0; cursor:pointer; }
.landing-faq summary::-webkit-details-marker { display:none; }
.landing-faq summary .icon { flex-shrink:0; color:var(--muted); }
.landing-faq details[open] summary .icon { transform:rotate(45deg); }
.landing-faq details > p { font-size:12px; line-height:1.85; color:var(--muted); padding:0 24px 20px 0; }
.landing-bottom-cta { padding:55px 20px; text-align:center; background:var(--brand-soft); border-radius:22px; margin-bottom:80px; }
.landing-bottom-cta h2 { font-size:clamp(28px,3.6vw,43px); font-weight:600; letter-spacing:-.04em; margin:14px 0 12px; }
.landing-bottom-cta p { font-size:12px; color:var(--muted); margin-bottom:23px; }
.landing-bottom-cta .btn { height:43px; gap:25px; padding:0 22px; font-size:12px; }
.marketing-shell .site-footer,.auth-shell .site-footer { background:var(--bg); }
.marketing-shell .footer-main { padding-top:42px; padding-bottom:40px; }
.feature-dialog { border:1px solid var(--line); border-radius:24px; padding:0; width:min(980px,calc(100% - 40px)); max-width:none; max-height:calc(100dvh - 48px); background:var(--surface-1); color:var(--text); overflow:auto; box-shadow:0 40px 100px #251b2040; }
.feature-dialog::backdrop { background:#20191f70; backdrop-filter:blur(7px); }
body.feature-open { overflow:hidden; }
.feature-dialog-close { position:absolute; right:15px; top:15px; z-index:2; background:var(--surface-1); border:1px solid var(--line); border-radius:50%; }
.feature-dialog-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }
.feature-dialog-grid > section { min-width:0; }
.feature-dialog-grid .provider-btn { white-space:normal; text-align:left; }
.feature-dialog-grid .provider-btn > span { min-width:0; }
.feature-dialog-preview { background:var(--bg); padding:35px; }
.feature-status { display:inline-flex; font-size:10px; font-weight:600; background:var(--surface-1); border:1px solid var(--line); border-radius:20px; padding:5px 10px; margin-bottom:18px; }
.feature-dialog-preview .feature-art { min-height:280px; padding:24px; border-radius:16px; }
.feature-dialog-preview .file-sheet { width:95px; height:130px; }
.feature-dialog-preview .convert-art { gap:10px; }
.feature-dialog-preview h2,.feature-dialog-preview h1 { margin:22px 0 10px; font-size:25px; letter-spacing:-.035em; font-weight:650; }
.feature-dialog-preview > p { font-size:12px; color:var(--muted); line-height:1.85; margin-bottom:15px; }
.feature-dialog-auth { padding:55px 36px 30px; }
.feature-dialog-auth h2 { font-size:25px; letter-spacing:-.04em; margin:12px 0 17px; font-weight:650; }
.feature-dialog-auth .auth-sub { font-size:12px; margin-bottom:24px; }
.login-methods { display:grid; gap:16px; }
.email-code-option { border-top:1px solid var(--line); padding-top:12px; }
.email-code-option summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }
.email-code-option summary::-webkit-details-marker { display:none; }
.email-code-option[open] summary { margin-bottom:14px; }
.email-code-option .demo-login-note { margin-bottom:12px; }
.login-methods .provider-list { gap:9px; }
.login-methods .provider-btn { font-size:12px; height:43px; padding-inline:14px; border-radius:9px; width:100%; }
.login-methods .provider-btn svg { width:18px; height:18px; }
.login-methods .provider-btn small { font-size:8px; margin-left:auto; white-space:nowrap; }
.login-methods .provider-btn.is-disabled { opacity:.62; cursor:not-allowed; }
.login-methods .auth-divider { font-size:10px; }
.login-methods label { font-size:11px; }
.login-methods .input { height:43px; font-size:12px; }
.login-methods .btn { font-size:12px; height:43px; }
.login-methods .auth-legal { font-size:9px; line-height:1.8; }
.demo-login-note { display:flex; align-items:flex-start; gap:7px; background:var(--surface-2); border-radius:8px; padding:10px; color:var(--muted); font-size:10px; line-height:1.7; }
.demo-login-note .icon { flex-shrink:0; margin-top:2px; }
.signed-in-note { display:flex; align-items:center; gap:10px; overflow-wrap:anywhere; font-size:12px; margin-bottom:25px; }
.standalone-feature { padding-top:35px; padding-bottom:65px; }
.standalone-feature > .feature-dialog-grid { margin-top:20px; border:1px solid var(--line); border-radius:24px; overflow:hidden; }
.welcome-auth { padding:35px 0 60px; background:radial-gradient(ellipse at 40% 35%,#e6b5a31c,transparent 70%); }
.auth-welcome { text-align:center; padding:15px 24px 40px; }
.auth-welcome h1 { font-size:clamp(32px,4vw,52px); letter-spacing:-.05em; font-weight:600; margin:15px 0 12px; }
.auth-welcome p { color:var(--muted); font-size:13px; }
.welcome-auth .auth-inner { max-width:970px; grid-template-columns:1fr 1fr; gap:55px; padding-top:0; padding-bottom:0; align-items:center; }
.welcome-auth .auth-card { padding:28px; border:1px solid var(--line); border-radius:20px; background:var(--surface-1); gap:16px; }
.welcome-auth .auth-card h2 { font-size:25px; font-weight:600; letter-spacing:-.03em; }
.welcome-auth .auth-sub { font-size:12px; }
.welcome-auth .auth-skip { font-size:10px; }
.welcome-auth .auth-aside { background:transparent; border:0; min-height:430px; padding:0; align-items:flex-end; }
.welcome-auth .auth-mark { width:150px; right:5%; top:0; opacity:.15; }
.welcome-auth .auth-aside h2 { font-size:35px; }
.welcome-auth .auth-benefits li { font-size:12px; }
.login-feature .feature-art { min-height:300px; }
.login-feature h2 { font-size:23px; margin:20px 0 10px; }
.login-feature > p { font-size:12px; color:var(--muted); line-height:1.9; }
@media(min-width:1500px) { .landing-hero { min-height:730px; } .hero-copy { padding-top:75px; } }
@media(max-width:1050px) {
  .marketing-shell .primary-nav,.auth-shell .primary-nav { gap:0; }
  .marketing-shell .primary-nav a,.auth-shell .primary-nav a { padding-inline:8px; font-size:11px; }
  .float-1,.float-4 { top:9%; width:65px; height:65px; }.float-9,.float-10 { display:none; }
  .feature-picker { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .feature-pick h3 { min-height:0; }.feature-pick { padding:18px; }.pick-icon { margin-bottom:14px; }
  .feature-story { gap:40px; }.feature-art { min-height:300px; padding:25px; }
  .file-sheet { width:95px; height:130px; }.convert-art { gap:12px; }
  .landing-container { width:calc(100% - 64px); }.how-steps { gap:35px; }.landing-faq { gap:35px; }
}
@media(max-width:760px) {
  .marketing-shell .site-header,.auth-shell .site-header { height:70px; }
  .marketing-shell .site-header .container,.auth-shell .site-header .container { padding-inline:22px; gap:12px; }
  .marketing-shell .primary-nav,.auth-shell .primary-nav { display:none; }
  .marketing-shell .menu-toggle,.auth-shell .menu-toggle { display:inline-flex; }
  .marketing-shell .brand-link img,.auth-shell .brand-link img { height:27px; }
  .header-signup { display:none; }.marketing-shell .login-btn,.auth-shell .login-btn { height:34px; padding-inline:13px; font-size:11px; }
  .landing-container { width:calc(100% - 40px); }
  .landing-hero { min-height:680px; }.hero-copy { padding-top:35px; }.hero-copy h1 { font-size:55px; margin:22px 0 16px; }
  .hero-copy p { font-size:13px; max-width:390px; margin:auto; }.desktop-break { display:none; }
  .hero-actions { gap:18px; margin-top:23px; }.hero-cta { height:43px; font-size:12px; padding-inline:18px; }.hero-explore { font-size:11px; }
  .hero-small { font-size:9px; }.hero-badge { font-size:9px; }
  .floating-universe { top:335px; height:290px; bottom:auto; max-width:600px; }
  .floating-tool { width:68px; height:68px; border-radius:18px; }.floating-tool .icon { width:29px; height:29px; }.floating-tool span { font-size:7px; }
  .float-1 { left:7%; top:8%; width:65px; height:65px; }.float-2 { left:30%; top:6%; }.float-3 { left:18%; top:47%; }
  .float-4 { right:7%; top:8%; width:65px; height:65px; }.float-5 { right:30%; top:6%; }.float-6 { right:18%; top:47%; }
  .float-7 { left:42%; top:52%; width:55px; height:55px; }.float-8 { display:none; }.float-11 { left:1%; top:61%; width:39px; height:39px; }.float-12 { right:1%; top:61%; width:39px; height:39px; }
  .float-11 .icon,.float-12 .icon { width:21px; height:21px; }.universe-caption { top:87%; font-size:9px; }.scroll-cue { bottom:15px; }
  .landing-features { padding-top:45px; }.landing-section-head { display:block; }.landing-section-head > p { margin-top:15px; font-size:12px; }.landing-section-head > p br { display:none; }
  .feature-picker { gap:9px; }.feature-pick { padding:14px 11px; border-radius:12px; }.pick-icon { height:42px; width:42px; border-radius:12px; }.feature-pick h3 { font-size:10px; min-height:30px; }.pick-status { font-size:8px; }.feature-pick > .icon { right:9px; top:13px; width:12px; }
  .feature-story { grid-template-columns:1fr; gap:25px; padding:25px 0 40px; }.feature-story.reverse .story-visual { order:0; }.feature-stories { padding-top:20px; }
  .feature-art { min-height:300px; }.story-copy h2 { font-size:34px; }.story-copy p { max-width:none; }.story-copy ul { margin:18px 0 13px; }
  .how-section { margin:20px 0 55px; padding:45px 0; }.how-steps { grid-template-columns:1fr; gap:30px; padding-top:32px; }.how-steps article { position:relative; padding-left:45px; }.how-steps article > span { position:absolute; top:3px; left:0; border:0; }.how-steps p { margin-top:6px; }
  .landing-faq { grid-template-columns:1fr; gap:22px; padding-bottom:45px; }.landing-faq h2 br { display:none; }.landing-faq summary { font-size:12px; }
  .landing-bottom-cta { margin-bottom:45px; padding:35px 20px; }.landing-bottom-cta p { font-size:11px; }
  .feature-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 24px); border-radius:18px; }.feature-dialog-grid { grid-template-columns:minmax(0,1fr); }.feature-dialog-preview { padding:25px 20px 20px; }.feature-dialog-preview .feature-art { min-height:230px; }.feature-dialog-auth { padding:27px 22px; border-top:1px solid var(--line); }.feature-dialog-preview .bio-art { transform:scale(.85) rotate(-5deg); margin-block:-12px; }.feature-dialog-preview .preview-wheel { width:180px; height:180px; }.feature-dialog-preview .tools-art { transform:scale(.85); margin-block:-22px; }.feature-dialog-preview .analytics-art { max-width:100%; }
  .feature-dialog-preview h2 { font-size:22px; }.standalone-feature { padding-top:18px; }.welcome-auth { padding-top:15px; }.auth-welcome { padding-bottom:25px; }.welcome-auth .auth-inner { grid-template-columns:1fr; max-width:500px; gap:30px; padding-inline:20px; }.welcome-auth .auth-aside { display:none; }.welcome-auth .auth-card { padding:23px; }.login-feature .feature-art { min-height:260px; }
}
@media(max-width:360px) { .hero-copy h1 { font-size:47px; }.hero-copy { padding-inline:16px; }.hero-actions { gap:12px; }.hero-explore { font-size:10px; }.feature-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }.feature-pick h3 { min-height:0; }.floating-tool { width:60px; height:60px; }.universe-caption { font-size:8px; }.feature-art { padding:20px; }.tools-art { transform:scale(.85); }.feature-dialog-preview .convert-art { gap:8px; }.feature-dialog-preview .file-sheet { width:78px; }.feature-dialog-preview .convert-arrow { width:25px; } }
@media(prefers-reduced-motion:reduce) { .floating-tool { animation:none; }.feature-pick { transition:none; } }