:root {
  --plum:#432b45; --coral:#e77f73; --gold:#d9af70; --pink:#e8c8c1;
  --ink:#382f3b; --muted:#736c79; --line:#e8e4e8; --bg:#fafaf9;
  font-family:'DM Sans',sans-serif; color:var(--ink); background:var(--bg);
}
* {box-sizing:border-box}
body {margin:0; min-width:320px}
button,input,textarea {font:inherit}
button,a,input,textarea {-webkit-tap-highlight-color:transparent}
button,a {touch-action:manipulation}
button {cursor:pointer}
[hidden] {display:none!important}
a {color:inherit}
:focus-visible {outline:3px solid #a87f9e; outline-offset:3px}
.app-shell {min-height:100dvh; display:flex; flex-direction:column}
.view {width:min(100%,620px); margin:0 auto; padding:26px 18px 40px; flex:1}
.view:not([hidden]) {display:flex; flex-direction:column}
.section-heading {text-align:center; margin-bottom:26px}
h1,h2,p {margin-top:0}
.section-heading h1,.loading-view h1 {font:600 30px/1.22 'Playfair Display',Georgia,serif; color:var(--plum); letter-spacing:-.025em; margin:0 0 12px}
.section-heading p,.loading-view>p {font-size:15px; color:var(--muted); line-height:1.6; margin:0}
h1:focus {outline:none}
.back-link {align-self:flex-start; color:var(--muted); font-size:13px; text-decoration:none; padding:8px 0; margin-bottom:15px}
.button {width:100%; min-height:50px; border:0; border-radius:13px; padding:14px 20px; display:flex; align-items:center; justify-content:center; gap:15px; font-weight:600; font-size:15px; text-decoration:none; transition:filter .15s}
.button:hover {filter:brightness(1.07)}
.button-primary {background:linear-gradient(115deg,#432b45,#694360); color:white; box-shadow:0 5px 13px #432b4514}
.button-ghost {background:#f5f3f5; color:var(--muted)}
.text-button {background:none; border:0; color:#9b5c59; font-size:14px; padding:8px 0; text-align:left; min-height:40px}
.form-card,.lyric-card,.player-card {background:white; border:1px solid var(--line); border-radius:20px; padding:22px 18px; box-shadow:0 3px 12px #432b4506; width:100%}
.field,fieldset,.people-section {margin:0 0 24px}
label,legend {display:block; font-size:14px; font-weight:600; margin-bottom:9px; color:var(--plum)}
label>span {color:#a96761}
fieldset {border:0; padding:0; min-width:0}
legend {padding:0; width:100%}
input:not([type=hidden]):not([type=range]),textarea {display:block; width:100%; background:#f8f7f8; border:1px solid var(--line); border-radius:11px; padding:14px; color:var(--ink); font-size:16px; min-width:0}
input::placeholder,textarea::placeholder {color:#92909b; opacity:1}
textarea {resize:vertical; line-height:1.6}
input:focus,textarea:focus {outline:2px solid #c5afc1; outline-offset:0; border-color:#c5afc1}
.field-hint,.form-note {color:var(--muted); font-size:12px; line-height:1.55; margin:6px 0 0}
.choice-grid {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
.relation-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
.choice {border:1px solid var(--line); border-radius:11px; background:white; color:var(--ink); min-height:46px; padding:11px 7px; font-size:13px}
.choice.selected {border-color:#ae839f; background:linear-gradient(120deg,#f5edf4,#fdf3ed); color:var(--plum); box-shadow:inset 0 0 0 1px #ae839f40}
.people-section .field-hint {margin-top:0}
.extra-person {display:flex; gap:8px; align-items:flex-end; margin-top:12px}
.extra-person .person-field {flex:1; min-width:0}
.extra-person label {font-size:12px}
.remove-person {border:1px solid var(--line); background:white; color:var(--muted); border-radius:10px; min-width:46px; height:48px; font-size:22px}
.story-box {border:1px solid var(--line); border-radius:15px; overflow:hidden; box-shadow:0 3px 7px #432b4507}
.story-toolbar {padding:14px 14px 4px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.story-toolbar p {font-size:13px; line-height:1.5; color:var(--muted); margin-bottom:0}
.mic-button {border:0; background:#fbefeb; border-radius:50%; width:44px; height:44px; flex:0 0 44px; color:#a9635e; display:grid; place-items:center}
.mic-button svg {width:21px; height:24px}
.mic-button[aria-pressed=true] {color:white; background:#a9635e; animation:breathe 1.8s infinite}
.story-box textarea {border:0; border-radius:12px; padding:14px; min-height:170px; background:#f5f3f4; resize:vertical}
.story-counter {display:flex; justify-content:space-between; gap:6px; padding:11px 14px; font-size:11px; color:var(--muted)}
#storyCount {color:#a9635e}
#storyCount.valid {color:#477454}
.inspiration {margin:0 14px 12px; padding:12px; border-radius:10px; background:#fcf6ee; font-size:12px; line-height:1.6; color:var(--muted)}
.inspiration ul {padding-left:18px; margin:7px 0 0}
.language-picker {position:relative}
.language-trigger {width:100%; border:1px solid var(--line); border-radius:12px; background:white; display:flex; align-items:center; justify-content:space-between; padding:13px 14px; min-height:52px; color:var(--ink); text-align:left; font-size:16px}
.language-trigger[aria-expanded=true] {border-color:#b987a3; box-shadow:0 0 0 2px #e8c8c133}
.chevron {color:var(--muted); transition:transform .2s}
.language-trigger[aria-expanded=true] .chevron {transform:rotate(180deg)}
.language-options {position:absolute; top:calc(100% + 6px); left:0; right:0; border:1px solid var(--line); border-radius:14px; background:white; z-index:5; box-shadow:0 10px 28px #432b4520; max-height:310px; overflow-y:auto}
.language-options button {display:flex; align-items:center; gap:12px; width:100%; min-height:49px; background:white; border:0; color:var(--ink); padding:12px 16px; text-align:left; font-size:15px}
.language-options button[aria-pressed=true],.language-options button:hover {background:#fbf0eb; color:#9b5c59}
.language-options button>span:first-child {font-size:23px}
.language-check {margin-left:auto; color:#9b5c59}
.flag {width:28px; height:20px; border-radius:4px; display:block; flex-shrink:0; box-shadow:0 0 0 1px #00000008}
#languageLabel {display:flex; align-items:center; gap:12px}
.style-choice {text-align:left; display:flex; align-items:center; gap:10px; padding:12px 10px; min-height:66px}
.style-icon {width:29px; height:32px; display:grid; place-items:center; border-radius:9px; background:linear-gradient(135deg,#f5ecf3,#fbeee5); color:#8e6784; font-size:19px; flex-shrink:0}
.style-choice strong {font-size:13px; font-weight:500; display:block}
.style-choice small {font-size:10px; color:var(--muted); display:block; margin-top:3px; font-weight:400}
.more-styles {display:block; margin:4px auto 0; text-align:center}
.form-note {text-align:center; margin-top:13px}
.form-error {font-size:13px; line-height:1.5; color:#ac4545; padding:10px; background:#fff0ef; border-radius:8px}
.loading-view {align-items:center; justify-content:center; text-align:center; min-height:calc(100dvh - 85px); padding:40px 24px}
.loading-view>* {flex:0 0 auto}
.loading-art {display:grid; place-items:center; width:86px; height:86px; border-radius:50%; margin-bottom:28px; background:linear-gradient(135deg,#e8c8c155,#d9af7033); color:var(--plum); font-size:40px; animation:breathe 2s ease-in-out infinite}
.progress-wrap {width:100%; max-width:390px; margin-top:34px}
.progress-meta {display:flex; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); text-align:left; margin-bottom:11px}
.progress-meta strong {color:var(--plum)}
.progress {height:8px; border-radius:8px; background:#eae5e9; overflow:hidden}
.progress i {display:block; height:100%; width:0; border-radius:8px; background:linear-gradient(90deg,var(--plum),#ac768e); transition:width .15s}
.loading-view .loading-tip {font-size:12px; margin-top:20px}
.success-icon {display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#4e795b; background:#e9f2eb; font-size:20px; margin:0 auto 18px}
.lyric-label {font-size:13px; margin-bottom:15px; line-height:1.6; overflow-wrap:anywhere}
.lyric-card textarea {font-size:16px; line-height:1.9; min-height:340px}
.lyric-actions {display:flex; flex-direction:column-reverse; gap:9px; margin-top:18px}
.vinyl {width:88px; height:88px; border-radius:50%; background:repeating-radial-gradient(circle,#432b45 0 2px,#654863 3px 5px); display:grid; place-items:center; margin-bottom:30px; animation:spin 6s linear infinite}
.vinyl div {width:27px; height:27px; border-radius:50%; background:var(--coral); border:5px solid #fff7ec}
.player-card {margin-bottom:20px}
.album-art {height:230px; border-radius:13px; padding:22px; display:flex; align-items:flex-end; background:linear-gradient(135deg,#432b45,#996477 65%,#d89988); color:#fff7ec; position:relative; overflow:hidden}
.album-art p {margin:0; font:22px/1.5 'Playfair Display',serif; position:relative; overflow-wrap:anywhere}
.album-note {position:absolute; top:10px; right:28px; font-size:100px; opacity:.3}
.player-head {display:flex; align-items:center; justify-content:space-between; margin:20px 0 15px; font-size:15px}
.player-head small {display:block; font-size:11px; color:var(--muted); margin-top:5px}
.player-head>span {color:#a9635e; font-size:26px}
.audio-player {display:flex; align-items:center; gap:13px}
.audio-player button {width:44px; height:44px; border:0; border-radius:50%; color:white; background:var(--plum); flex-shrink:0}
.audio-player input {width:100%; min-width:0; accent-color:var(--plum); height:28px}
.audio-player>span {font-size:12px; font-variant-numeric:tabular-nums}
.preview-view>.text-button {align-self:center; margin-top:10px}
.preview-duration {display:flex; justify-content:space-between; margin-top:9px; padding-left:57px; font-size:11px; color:var(--muted)}
.preview-ended {font-size:13px; color:var(--plum); line-height:1.6; background:#f8f1f5; padding:12px; border-radius:10px; margin:15px 0 0}
.checkout-card {width:100%; background:linear-gradient(125deg,#faf3f7,#fff7ed); border:1px solid #eadde5; border-radius:18px; padding:22px 18px; text-align:center}
.checkout-label {font-size:14px; color:var(--plum); margin-bottom:13px}
.checkout-price {display:flex; flex-direction:column; gap:5px; margin-bottom:19px}
.checkout-price strong {font-size:29px; color:var(--plum); font-weight:600; letter-spacing:-.025em}
.checkout-price span {font-size:11px; color:var(--muted)}
.checkout-status {font-size:12px; color:var(--muted); line-height:1.6; margin:13px 0 0}
.preview-restart {text-decoration:none; text-align:center; display:block; color:var(--muted); font-size:12px; align-self:center; margin-top:0!important}
footer {border-top:1px solid var(--line); padding:20px 12px; background:white}
.footer-trust {display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; max-width:520px; margin:auto}
.footer-trust div {display:flex; flex-direction:column; gap:6px; align-items:center}
.footer-trust strong {font-size:22px; color:#9b6c67; line-height:1}
.footer-trust b {font-size:9px; letter-spacing:.06em; color:var(--muted); font-weight:500}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
@keyframes breathe {50% {box-shadow:0 0 0 9px #e8c8c122}}
@keyframes spin {to {transform:rotate(360deg)}}
@media(min-width:700px) {.view {padding-top:42px}.form-card,.lyric-card,.player-card {padding:28px}.section-heading h1,.loading-view h1 {font-size:36px}.lyric-actions {flex-direction:row}.lyric-actions>* {flex:1}.home-view {padding-top:25px}.home-hero {padding-top:42px}.preview-view {max-width:490px}}
@media(max-width:360px) {.view {padding-left:12px; padding-right:12px}.form-card {padding:18px 13px}.story-counter {font-size:10px}.song-postcard {padding:16px; gap:12px}.wave {gap:2px}.wave i {width:2px}}
@media(prefers-reduced-motion:reduce) {* {animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* Página inicial: seções flat, cor e fotografia. */
.view.landing-page {width:100%;max-width:none;padding:0;background:#fff}
.landing-container {width:min(100% - 36px,1100px);margin-inline:auto}
.landing-header {display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100% - 36px,1100px);margin:auto;min-height:74px}
.landing-brand {display:flex;align-items:center;gap:8px;text-decoration:none;font:600 17px 'Playfair Display',serif;color:var(--plum)}
.landing-brand img {width:35px;height:35px;border-radius:10px}
.landing-brand b {font-weight:600;color:#a9635e}
.landing-header nav {display:flex;gap:22px;align-items:center}
.header-create {padding:11px 13px;border-radius:24px;background:#f5eff4;text-decoration:none;color:var(--plum);font-size:12px;font-weight:600;white-space:nowrap}
.header-listen {display:none;background:none;border:0;color:var(--muted);font-size:13px}
.landing-hero {background:radial-gradient(ellipse at 85% 65%,#e8c8c180,transparent 70%),radial-gradient(ellipse at 10% 15%,#fff2d9aa,transparent 65%),#fffaf7;overflow:hidden}
.hero-layout {display:grid;grid-template-columns:1fr;gap:27px;padding-block:35px 40px}
.hero-content {text-align:center}
.landing-kicker {font-size:11px;color:#96616f;line-height:1.6;margin-bottom:17px}
.pill-kicker {display:inline-block;padding:5px 12px;border-radius:30px;background:#f6e7e7;font-weight:500}
.hero-content h1 {font:700 clamp(36px,8vw,59px)/1.13 'DM Sans',sans-serif;color:var(--plum);letter-spacing:-.045em;margin:0 0 20px}
.hero-content h1 em,.landing-section-heading h2 em {font-style:normal;color:#b96f78;background:linear-gradient(110deg,#8d5878,#d28577);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.landing-description {color:var(--muted);font-size:15px;line-height:1.75;max-width:470px;margin:0 auto 24px}
.landing-page .button-primary {background:linear-gradient(105deg,#bb777a,#744664 70%,#432b45);box-shadow:none;min-height:52px;border-radius:28px}
.hero-content>.button {max-width:370px;margin:auto}
.hero-listen {background:none;border:0;color:#82576f;min-height:44px;font-size:13px;padding:12px 6px;display:flex;gap:9px;align-items:center;justify-content:center;margin:3px auto}
.hero-listen span {width:21px;height:21px;display:grid;place-items:center;background:#f1dfe8;border-radius:50%;font-size:9px}
.hero-mini-trust {display:flex;justify-content:center;gap:18px;color:#99818f;font-size:10px;margin-top:5px}
.hero-photo-wrap {position:relative;max-width:500px;width:100%;margin:auto;padding:0 5px 22px}
.hero-photo-frame {position:relative;overflow:hidden;border-radius:26px 26px 75px 26px;background:#f1e7e2;isolation:isolate}
.hero-photo-frame>img {display:block;width:100%;height:auto;aspect-ratio:1.4;object-fit:cover;object-position:center;position:relative;z-index:-1}
.photo-caption {position:absolute;left:11px;right:11px;bottom:15px;background:#fffffff2;border-radius:16px;padding:11px;display:flex;align-items:center;gap:9px}
.photo-caption>span:first-child {font-size:23px}
.photo-caption strong {font-size:12px;color:var(--plum);font-weight:600}
.photo-caption small {display:block;font-size:10px;color:var(--muted);margin-top:3px}
.photo-wave {margin-left:auto;color:#b87b8e;white-space:nowrap;font-size:15px;letter-spacing:0}
.photo-sticker {position:absolute;left:18px;bottom:0;background:#432b45;color:#fff7ec;border-radius:20px;padding:8px 14px;font-size:10px}
.photo-note {position:absolute;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:23px}
.photo-note-one {background:#f2dfe8;color:#9d658b;right:-4px;top:-12px;transform:rotate(15deg)}
.photo-note-two {background:#fff1d9;color:#c89863;left:-4px;top:45px;transform:rotate(-15deg)}
.landing-highlights {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;padding-block:24px;border-bottom:1px solid #f0e9ee}
.landing-highlights span {font-size:24px;display:block;margin-bottom:7px}
.landing-highlights p {font-size:11px;color:var(--muted);margin:0}
.section-band {padding-block:46px}
.landing-section-heading {text-align:center;max-width:560px;margin:0 auto 27px}
.landing-section-heading h2 {font:700 29px/1.2 'DM Sans',sans-serif;letter-spacing:-.035em;color:var(--plum);margin-bottom:14px}
.landing-section-heading>p:last-child {font-size:14px;line-height:1.65;color:var(--muted);margin-bottom:0}
.landing-section-heading h2:focus {outline:none}
.home-examples {background:#fff}
.home-examples .pill-kicker {background:#f1eaf5;color:#886694}
.example-song {max-width:440px;margin:auto;border:1px solid #eadfe6;border-radius:22px;overflow:hidden;background:white}
.example-cover {height:235px;position:relative;isolation:isolate;color:#fff}
.example-cover>img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.example-cover:after {content:'';position:absolute;inset:0;background:linear-gradient(transparent 10%,#432b45e8);z-index:0}
.example-cover>div {position:absolute;inset:auto 23px 19px;z-index:1}
.example-cover>div>span:first-child {font-size:9px;letter-spacing:.12em;color:#ffebd8}
.example-cover h3 {font:600 29px/1.1 'Playfair Display',serif;margin:10px 0 12px}
.example-cover-tag {font-size:10px;background:#ffffff24;border-radius:20px;padding:5px 9px}
.example-song-body {padding:21px 20px}
.example-tag {font-size:10px;background:#fff2e4;color:#aa7654;padding:5px 9px;border-radius:15px}
.example-song-body>p:first-of-type {color:#857482;font-size:14px;line-height:1.6;margin:13px 0 20px}
.home-audio-controls {display:flex;align-items:center;gap:8px}
.home-audio-controls button {border:0;border-radius:50%;width:44px;height:44px;flex-shrink:0;background:var(--plum);color:#fff;font-size:16px}
.home-audio-controls button:disabled {opacity:.65;cursor:wait}
.home-audio-controls input {accent-color:#92617d;width:100%;min-width:0;height:30px}
.home-audio-controls>span {font-size:10px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.home-audio-total {color:#a398a3!important}
.example-duration {font-size:11px;color:#958695;text-align:center;line-height:1.5;margin:9px 0 18px}
#homeAudioStatus {color:#936779;font-size:12px;line-height:1.6;margin-bottom:15px}
.example-create {display:block;text-align:center;text-decoration:none;color:#85536e;font-size:13px;font-weight:500;border-top:1px solid #f0e9ee;padding-top:17px}
.landing-occasions {padding-block:48px}
.landing-occasions .pill-kicker {background:#fdf0e4;color:#a47753}
.occasion-spotlight {display:block;text-align:center;border-radius:22px;background:linear-gradient(130deg,#fff5e8,#faf0f5);padding:30px 23px;text-decoration:none;margin-bottom:15px}
.spotlight-emoji {font-size:42px;display:grid;place-items:center;width:82px;height:82px;border-radius:50%;background:#fffaf2;margin:0 auto 16px}
.occasion-eyebrow {color:#ab815a;font-size:10px}
.occasion-spotlight h3 {font:700 24px 'DM Sans';color:var(--plum);letter-spacing:-.035em;margin:9px 0 13px}
.occasion-spotlight p {font-size:14px;color:var(--muted);line-height:1.7;max-width:400px;margin:0 auto 20px}
.occasion-grid {display:grid;gap:12px}
.occasion-card {border:1px solid #eee5eb;border-radius:17px;background:#fdf7fa;padding:23px;text-decoration:none}
.occasion-family {background:#fffbf3}
.occasion-moment {background:#f8f5fc}
.occasion-icon {font-size:28px;margin-bottom:12px;display:block}
.occasion-card h3 {font:700 18px 'DM Sans';color:var(--plum);margin:0 0 9px}
.occasion-card p {font-size:13px;line-height:1.65;color:var(--muted);margin-bottom:18px}
.occasion-link {font-size:12px;color:#966378;display:flex;justify-content:space-between;gap:8px;align-items:center}
.occasion-spotlight .occasion-link {justify-content:center}
.occasion-link b {font-size:18px;font-weight:400}
.home-benefits {background:#fcf9fc}
.home-benefits .pill-kicker {background:#ece4f1;color:#886694}
.benefit-grid {display:grid;gap:12px}
.benefit-grid article {background:#fff;border-radius:16px;padding:22px;text-align:center;border:1px solid #efe8f0}
.benefit-grid article:nth-child(2) {background:#fff8f3}
.benefit-grid article:nth-child(3) {background:#faf5ff}
.benefit-grid article:nth-child(4) {background:#fff9eF}
.benefit-grid article>span {display:block;font-size:28px;margin-bottom:12px}
.benefit-grid h3 {font:600 15px 'DM Sans';color:var(--plum);margin:0 0 9px}
.benefit-grid p {font-size:13px;color:var(--muted);line-height:1.65;margin:0}
.home-comments {padding-block:49px}
.comment-grid {display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 13px;scrollbar-width:thin;scrollbar-color:#d8c0cf #faf7fa}
.comment-card {flex:0 0 86%;margin:0;background:#fff;border:1px solid #eadfe6;border-radius:18px;padding:24px 20px;scroll-snap-align:start;display:flex;flex-direction:column}
.comment-quote {color:#c38a99;font:50px/.8 'Playfair Display';height:33px}
.comment-card blockquote {font-size:14px;line-height:1.8;color:#746774;margin:13px 0 22px}
.comment-card figcaption {display:flex;gap:10px;align-items:center;margin-top:auto}
.comment-avatar {display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#f8edf1;font-size:20px;flex-shrink:0}
.comment-card strong {font-size:11px;font-weight:500;color:var(--plum)}
.comment-card small {display:block;font-size:10px;color:#948696;margin-top:4px}
.home-offer {background:radial-gradient(ellipse at 90% 25%,#fff0da,transparent 70%),radial-gradient(ellipse at 0 90%,#ecd9e688,transparent 75%),#fff9f6}
.home-offer .pill-kicker {background:#ffeedb;color:#ac7c51}
.home-offer-card {max-width:480px;margin:auto;background:#fff;border:1px solid #eddce4;border-radius:24px;padding:29px 21px;text-align:center}
.offer-heart {font-size:36px;display:block;margin-bottom:14px}
.home-offer-card h3 {font:700 23px/1.3 'DM Sans';color:var(--plum);letter-spacing:-.025em;margin:0 0 10px}
.home-offer-card>p:first-of-type {font-size:14px;line-height:1.7;color:var(--muted);max-width:290px;margin:0 auto 24px}
.offer-price-label {display:block;color:#a17f90;font-size:11px;margin-bottom:7px}
.home-offer-price {font:700 clamp(34px,8.5vw,44px)/1.2 'DM Sans';letter-spacing:-.04em;display:block;color:#a56478}
.offer-payment {display:block;font-size:11px;color:var(--muted);margin-top:9px}
.home-offer-card ul {list-style:none;padding:0;text-align:left;margin:26px auto;max-width:315px}
.home-offer-card li {font-size:13px;color:#746374;line-height:1.55;display:flex;gap:9px;margin-bottom:12px}
.home-offer-card li span {color:#759077}
.offer-languages {font-size:11px!important;color:var(--muted);line-height:1.7;margin:19px 0}
.offer-seals {border-top:1px solid #f0e5ed;padding-top:17px;display:flex;justify-content:center;gap:15px;font-size:10px;color:#998193}
.home-site-footer {padding-block:30px;display:grid;gap:22px;text-align:center}
.footer-wordmark {font:600 20px 'Playfair Display';color:var(--plum)}
.home-site-footer p {font-size:12px;color:var(--muted);margin:7px 0 0}
.home-site-footer nav {display:flex;gap:25px;justify-content:center;align-items:center}
.home-site-footer nav button {padding:8px 0;border:0;background:none;color:#947084;font-size:12px}
.home-site-footer nav a {color:#947084;font-size:12px;text-decoration:none}
.home-site-footer small {font-size:10px;color:#a08f9d}
.home-mobile-cta {position:fixed;inset:auto 0 0;z-index:10;background:#fffffff8;backdrop-filter:blur(10px);border-top:1px solid #eadee7;padding:10px max(14px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px;transform:translateY(110%);transition:transform .2s}
.home-mobile-cta.is-visible {transform:translateY(0)}
.home-mobile-cta small {display:block;color:var(--muted);font-size:9px;margin-bottom:3px}
.home-mobile-cta strong {font-size:17px;color:var(--plum)}
.home-mobile-cta a {text-decoration:none;background:linear-gradient(110deg,#b77579,#432b45);color:white;border-radius:25px;padding:14px 16px;font-size:12px;font-weight:600;text-align:center}
body[data-view=home]>main>footer {padding-bottom:100px}
@media(min-width:800px) {
 .landing-header {min-height:90px}.landing-brand {font-size:22px}.landing-brand img {width:42px;height:42px}.header-create {padding:13px 21px;font-size:14px}.header-listen {display:block}
 .hero-layout {grid-template-columns:1.05fr 1fr;align-items:center;gap:55px;padding-block:65px}.hero-content {text-align:left}.hero-content>.button {margin:0;max-width:325px}.hero-listen {margin:5px 0 0}.hero-mini-trust {justify-content:flex-start}.landing-description {margin-inline:0}.hero-photo-wrap {margin:0}.hero-photo-frame>img {aspect-ratio:1.13}.photo-caption {left:18px;right:18px;bottom:24px;padding:17px}.photo-caption strong {font-size:14px}.photo-caption small {font-size:11px}.photo-sticker {left:25px;bottom:4px;font-size:12px}
 .landing-highlights {max-width:800px;padding-block:28px}.landing-highlights p {font-size:13px}.section-band,.landing-occasions,.home-comments {padding-block:65px}.landing-section-heading h2 {font-size:38px}
 .example-song {max-width:780px;display:grid;grid-template-columns:1fr 1fr}.example-cover {height:310px}.example-song-body {padding:32px;display:flex;flex-direction:column;justify-content:center}.example-create {margin-top:auto}
 .occasion-spotlight {display:flex;gap:30px;align-items:center;text-align:left;padding:35px;max-width:800px;margin:0 auto 20px}.spotlight-emoji {margin:0;flex-shrink:0;width:95px;height:95px;font-size:46px}.occasion-spotlight p {max-width:none;margin:0 0 18px}.occasion-spotlight .occasion-link {justify-content:flex-start}
 .occasion-grid {grid-template-columns:repeat(3,1fr);gap:18px}.occasion-card {padding:28px;display:flex;flex-direction:column}.occasion-link {margin-top:auto}
 .benefit-grid {grid-template-columns:repeat(4,1fr);gap:16px}.benefit-grid article {padding:27px 20px}
 .comment-grid {display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}.comment-card {padding:28px}
 .home-offer-card {padding:35px 32px}.home-mobile-cta {display:none}.home-site-footer {grid-template-columns:1fr 1fr;text-align:left;align-items:center;gap:16px;padding-block:38px}.home-site-footer nav {justify-content:flex-end}.home-site-footer small {grid-column:1/-1}
 body[data-view=home]>main>footer {padding-bottom:20px}
}
@media(max-width:360px) {.landing-brand {font-size:15px;gap:6px}.landing-brand img {width:30px;height:30px}.header-create {font-size:11px;padding:10px}.hero-content h1 {font-size:32px}.landing-description {font-size:14px}.hero-photo-frame>img {aspect-ratio:1.2}.photo-wave {display:none}.home-audio-controls {gap:6px}.home-mobile-cta a {padding:13px;font-size:11px}.home-mobile-cta strong {font-size:16px}.home-mobile-cta small {font-size:8px}.pill-kicker {font-size:10px;padding-inline:10px}}