/* Marketing landing page. Reuses tokens.css and components.css. */
.page-shell { position:relative; overflow:hidden; }
.page-shell::before { content:""; position:absolute; top:-240px; left:-240px; width:800px; height:800px; border-radius:50%; background:radial-gradient(circle,var(--glow-one),transparent 67%); pointer-events:none; z-index:0; }
.page-shell::after { content:""; position:absolute; top:40px; right:-390px; width:900px; height:850px; border-radius:50%; background:radial-gradient(circle,var(--glow-two),transparent 68%); pointer-events:none; z-index:0; }
main { isolation:isolate; }
.hero { padding:76px 0 80px; }
.hero-grid { display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); align-items:center; gap:52px; }
.hero-copy { max-width:550px; }
.hero-copy h1 { font-size:clamp(45px,4.8vw,69px); line-height:1.055; letter-spacing:-.064em; font-weight:820; margin:18px 0 20px; }
.hero-copy h1 em { font-style:normal; color:var(--accent); }
.hero-description { font-size:16px; line-height:1.75; max-width:485px; color:var(--ink-secondary); margin:0 0 29px; }
.hero-upload { max-width:465px; }
.hero-upload .upload-zone { min-height:212px; background:var(--surface); box-shadow:var(--shadow-sm); }
.hero-upload .upload-zone__title { font-size:15px; }
.hero-upload .upload-zone__caption { margin-bottom:13px; }
.hero-upload .upload-zone__foot { margin-top:12px; }
.hero-upload__action { display:flex; gap:12px; align-items:center; margin-top:12px; }
.hero-upload__action .btn { flex:1; }
.hero-upload__action .btn .icon { width:17px;height:17px; }
.hero-trust { display:flex; gap:18px; flex-wrap:wrap; margin-top:18px; color:var(--ink-tertiary); font-size:11px; }
.hero-trust span { display:flex; align-items:center; gap:6px; }
.hero-trust .icon { width:15px;height:15px;color:var(--positive); }
.preview-wrap { position:relative; }
.preview-wrap::before { position:absolute; content:""; width:350px; height:350px; right:-55px; top:-60px; background:radial-gradient(circle,rgba(var(--accent-rgb),.13),transparent 70%); z-index:-1; }
.preview-float { position:absolute; top:-20px; right:24px; display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--surface); border:1px solid var(--stroke); border-radius:100px; font-size:11px; font-weight:740; color:var(--ink-secondary); box-shadow:var(--shadow-md); z-index:2; }
.preview-float .dot { width:6px;height:6px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 4px var(--positive-soft);margin-right:5px; }
.preview-app { border:1px solid var(--stroke-strong); border-radius:22px; background:var(--surface); overflow:hidden; box-shadow:var(--shadow-lg); }
.preview-titlebar { padding:18px 21px 15px; border-bottom:1px solid var(--stroke); display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--surface); }
.track-head { display:flex; gap:12px; align-items:center; min-width:0; }
.album-art { width:52px;height:52px;border-radius:11px;background:linear-gradient(145deg,#223f78 5%,#6b67bd 40%,#f3a18f 80%,#122450 100%);display:grid;place-items:center;position:relative;overflow:hidden;flex-shrink:0; }
.album-art::before { content:"";position:absolute;left:0;right:0;bottom:0;height:41%;background:#14223f;clip-path:polygon(0 55%,20% 20%,44% 65%,72% 10%,100% 51%,100% 100%,0 100%); }
.album-art::after { content:"";position:absolute;right:12px;top:9px;width:19px;height:19px;border-radius:50%;background:#fff4cb;box-shadow:0 0 20px #ffcfbe; }
.track-name { color:var(--ink);font-weight:770;letter-spacing:-.02em;font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.track-meta { color:var(--ink-tertiary);font-size:10px;white-space:nowrap; }
.track-badge { display:flex;align-items:center;gap:6px;color:var(--positive);background:var(--positive-soft);border-radius:8px;padding:5px 8px;font-size:10px;font-weight:740;flex-shrink:0; }
.preview-player { padding:19px 21px 16px; }
.player-controls { display:flex;align-items:center;gap:13px; }
.play-button { width:37px;height:37px;min-width:37px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-on);display:grid;place-items:center;box-shadow:0 3px 12px rgba(var(--accent-rgb),.22); }
.play-button .icon { width:17px;height:17px; }
.player-timeline { flex:1;min-width:0; }
.player-waveform { position:relative; width:100%; }
.player-waveform .waveform { height:53px; }
.player-waveform::after { content:"";position:absolute;top:4px;bottom:3px;left:28%;width:1px;background:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.09);pointer-events:none; }
.time-axis { display:flex;align-items:center;justify-content:space-between;font:9px var(--font-mono);color:var(--ink-tertiary);margin:2px 0 12px; }
.preview-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:15px; }
.preview-stats .stat { background:var(--surface-2);padding:10px 12px; }
.preview-stats .stat__value { font-size:14px; }
.preview-sheets { padding:0 21px 19px; }
.preview-sheets .tabs { padding-left:0; }
.preview-sheets .tab { padding:10px 15px; }
.preview-sheet-content { min-height:152px; }
.preview-sheets .sheet-line { margin-top:13px; }
.preview-sheets .sheet-beat span { font-size:10px; }
.preview-lock { background:var(--accent-soft);border:1px solid rgba(var(--accent-rgb),.12);border-radius:11px;margin-top:15px;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px; }
.preview-lock strong { font-size:10px;display:flex;align-items:center;gap:5px; }
.preview-lock p { margin:0;font-size:10px;color:var(--ink-secondary); }
.preview-lock .icon { width:13px;height:13px;color:var(--accent); }
.preview-lock .btn { padding:5px 10px;min-height:32px;font-size:10px; }
.preview-foot { display:flex;justify-content:space-between;color:var(--ink-tertiary);font-size:10px;padding:9px 21px 13px;border-top:1px solid var(--stroke);background:var(--surface-2); }
.preview-foot span { display:flex;align-items:center;gap:5px; }
.preview-foot .icon { width:13px;height:13px; }
.features-section { border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke);background:var(--surface); }
.features-grid { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:37px; }
.feature { padding:18px 20px 16px;border-right:1px solid var(--stroke); }
.feature:first-child { padding-left:0; }
.feature:last-child { border-right:0;padding-right:0; }
.feature .icon-circle { margin-bottom:17px;width:47px;height:47px; }
.feature h3 { font-size:14px;margin:0 0 6px;font-weight:760;line-height:1.35; }
.feature p { font-size:12px;color:var(--ink-secondary);line-height:1.65;margin:0; }
.section-head { max-width:700px;margin:auto;text-align:center; }
.steps-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:42px; }
.step { padding:26px;display:flex;flex-direction:column;gap:16px;min-height:196px; }
.step-count { width:35px;height:35px;display:grid;place-items:center;background:var(--accent-soft);border-radius:50%;font-weight:820;color:var(--accent);font-size:14px; }
.step h3 { margin:0;font-size:16px;letter-spacing:-.025em; }
.step p { color:var(--ink-secondary);font-size:13px;margin:4px 0 0;line-height:1.65; }
.demo-band { margin-top:48px;border-radius:20px;border:1px solid var(--stroke);padding:24px 26px;display:flex;justify-content:space-between;align-items:center;gap:22px;background:var(--surface);box-shadow:var(--shadow-sm); }
.demo-band__body { display:flex;align-items:center;gap:18px; }
.demo-band h3 { font-size:16px;margin:0 0 3px; }
.demo-band p { margin:0;font-size:12px;color:var(--ink-secondary); }
.pricing-section { background:var(--canvas-secondary);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke); }
.pricing-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:42px; }
.price-card { padding:23px;display:flex;flex-direction:column;min-height:322px; }
.price-card.is-featured { border-color:rgba(var(--accent-rgb),.4);box-shadow:0 16px 36px rgba(var(--accent-rgb),.12);position:relative; }
.price-card__top { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.price-card__name { font-size:15px;font-weight:780; }
.price-card__description { color:var(--ink-secondary);font-size:11px;min-height:29px;margin:6px 0 0; }
.price-card__price { font-size:31px;letter-spacing:-.045em;font-weight:820;line-height:1.2;margin-top:17px; }
.price-card__price small { font-size:12px;color:var(--ink-secondary);letter-spacing:0;font-weight:550; }
.price-card ul { list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:11px;flex:1; }
.price-card li { display:flex;gap:8px;align-items:flex-start;color:var(--ink-secondary);font-size:12px; }
.price-card li .icon { width:14px;height:14px;color:var(--positive);margin-top:2px; }
.price-card li.is-planned { color:var(--ink-tertiary); }
.price-card li.is-planned .icon { color:var(--ink-tertiary); }
.price-card .btn { width:100%; }
.pricing-note { text-align:center;margin:19px 0 0;color:var(--ink-tertiary);font-size:12px; }
.faq-grid { max-width:800px;margin:38px auto 0; }
.faq-grid details { border-bottom:1px solid var(--stroke);padding:19px 4px; }
.faq-grid summary { list-style:none;font-weight:730;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px; }
.faq-grid summary::-webkit-details-marker { display:none; }
.faq-grid details[open] summary { color:var(--accent); }
.faq-grid summary .icon { transition:transform var(--motion-fast); }
.faq-grid details[open] summary .icon { transform:rotate(180deg); }
.faq-grid p { color:var(--ink-secondary);line-height:1.7;font-size:13px;max-width:690px;margin:12px 0 0; }
.site-footer { border-top:1px solid var(--stroke);background:var(--surface);padding:34px 0; }
.footer-grid { display:flex;align-items:center;justify-content:space-between;gap:20px; }
.footer-grid .brand { font-size:15px; }
.footer-grid p { color:var(--ink-tertiary);font-size:12px;max-width:410px;margin:6px 0 0; }
.footer-links { display:flex;gap:23px;align-items:center; }
.footer-links a { font-size:12px;color:var(--ink-secondary); }
.toast { position:fixed;bottom:25px;right:25px;z-index:200;width:min(410px,calc(100vw - 40px));border:1px solid var(--stroke);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-lg);padding:14px 16px;display:flex;align-items:flex-start;gap:12px;color:var(--ink); }
.toast[hidden] { display:none; }
.toast .icon { color:var(--accent); }
.toast strong { display:block;font-size:13px; }
.toast span { font-size:12px;color:var(--ink-secondary); }
.toast button { background:transparent;border:0;color:var(--ink-tertiary);padding:0;margin-left:auto; }
@media(max-width:1120px) { .hero-grid { gap:27px; } .hero-copy h1 { font-size:clamp(43px,5vw,60px); } .feature { padding:14px 13px; } .price-card { padding:18px; } }
@media(max-width:920px) { .hero-grid { grid-template-columns:1fr;gap:50px; } .hero-copy { max-width:none;text-align:center; } .hero-description { margin-left:auto;margin-right:auto; } .hero-upload { margin:auto; } .hero-trust { justify-content:center; } .preview-wrap { width:min(100%,680px);margin:auto; } .features-grid { grid-template-columns:repeat(3,minmax(0,1fr));row-gap:20px; } .feature:nth-child(3) { border-right:0; } .feature:nth-child(4) { padding-left:0; } .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) { .hero { padding:58px 0 65px; } .hero-copy h1 { font-size:clamp(39px,10.7vw,54px);margin:15px 0; } .hero-description { font-size:14px; } .preview-float { right:10px;top:-14px; } .preview-titlebar { padding:13px; } .preview-player { padding:13px; } .preview-sheets { padding:0 13px 15px; } .preview-sheets .sheet-line { grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px; } .preview-sheet-content { min-height:188px; } .preview-foot { padding:9px 13px 12px; } .features-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:20px; } .feature { border:0;padding:0; } .feature:first-child,.feature:nth-child(4) { padding:0; } .step { min-height:0; } .steps-grid { grid-template-columns:1fr;gap:12px; } .demo-band { flex-direction:column;align-items:stretch;text-align:center; } .demo-band__body { flex-direction:column; } .pricing-grid { grid-template-columns:1fr;gap:12px; } .price-card { min-height:0; } .footer-grid { align-items:flex-start;flex-direction:column; } .preview-lock .btn { font-size:9px; } }