:root { --canvas:#fbf8f2; --surface:#fff; --ink:#211c2f; --muted:#625d6c; --primary:#5b3b78; --primary-hover:#462c5e; --tint:#f1ebf6; --gold:#ba9152; --border:#ded8e4; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--canvas); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; } a { color:inherit; }
.site-header,.hero,.benefits,.how-it-works,footer { max-width:1120px; margin:0 auto; padding-left:24px; padding-right:24px; }.site-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; }.brand { color:var(--ink); display:inline-flex; align-items:baseline; gap:8px; text-decoration:none; }.brand-age { color:var(--primary); font:600 29px/1 "Fraunces",Georgia,serif; letter-spacing:-1.3px; }.brand-name { font-size:14px; font-weight:700; letter-spacing:-.35px; }.site-nav { display:flex; align-items:center; gap:28px; font-size:15px; font-weight:600; }.site-nav a { text-decoration:none; }.site-nav a:not(.nav-cta):hover { text-decoration:underline; text-underline-offset:4px; }.nav-cta { background:var(--primary); border-radius:9px; color:white; padding:11px 16px; }
.hero { min-height:650px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding-top:54px; padding-bottom:72px; }.eyebrow { color:var(--primary); font-size:12px; font-weight:700; letter-spacing:1.5px; margin:0 0 18px; }h1,h2,h3,p { margin-top:0; }h1,h2 { font-family:"Fraunces",Georgia,serif; font-weight:600; letter-spacing:-1.7px; }h1 { font-size:clamp(48px,5.2vw,64px); line-height:1.04; margin-bottom:22px; }.hero-lede { color:var(--primary); font:600 clamp(21px,2vw,25px)/1.34 "Fraunces",Georgia,serif; margin-bottom:15px; }.hero-description { color:var(--muted); font-size:18px; line-height:1.55; max-width:510px; margin-bottom:21px; }.hero-facts { display:flex; flex-wrap:wrap; list-style:none; margin:0 0 29px; padding:0; color:var(--ink); font-size:15px; font-weight:700; }.hero-facts li { padding:0 13px; border-left:1px solid var(--gold); }.hero-facts li:first-child { padding-left:0; border-left:none; }.button { background:var(--primary); border-radius:10px; color:#fff; display:inline-block; font-size:17px; font-weight:700; padding:16px 21px; text-decoration:none; box-shadow:0 8px 20px rgba(91,59,120,.18); transition:background .16s ease,transform .16s ease; }.button:hover { background:var(--primary-hover); transform:translateY(-1px); }.purchase-note { color:var(--muted); font-size:13px; margin:13px 0 0; }
.product-preview { min-height:494px; position:relative; display:grid; place-items:center; }.sunburst { position:absolute; width:390px; height:390px; border-radius:50%; background:repeating-conic-gradient(from 8deg,#eee2cf 0 8deg,transparent 8deg 18deg); opacity:.78; }.bingo-card { background:var(--surface); width:min(100%,425px); padding:25px 22px 17px; position:relative; transform:rotate(3deg); box-shadow:0 20px 40px rgba(33,28,47,.16); border:1px solid #e8e1d7; }.card-overline { color:var(--gold); font-size:9px; font-weight:700; letter-spacing:1.1px; margin-bottom:7px; text-align:center; }.bingo-card h2 { color:var(--primary); font-size:32px; letter-spacing:-.9px; line-height:1; margin-bottom:18px; text-align:center; }.bingo-grid { display:grid; grid-template-columns:repeat(5,1fr); border-left:1px solid #a699aa; border-top:1px solid #a699aa; }.bingo-grid span,.bingo-grid strong { border-bottom:1px solid #a699aa; border-right:1px solid #a699aa; display:grid; min-height:53px; place-items:center; overflow-wrap:anywhere; padding:4px; text-align:center; font-size:7.5px; font-weight:600; line-height:1.08; }.bingo-grid strong { background:var(--tint); color:var(--primary); font-size:12px; letter-spacing:.4px; }.bingo-grid small { font-size:6px; }.card-player { font-size:10px; margin:14px 0 0; text-align:center; }.spark { color:var(--gold); font-size:34px; position:absolute; z-index:1; }.spark-one { left:5%; top:7%; }.spark-two { bottom:5%; right:3%; font-size:46px; }.preview-caption { color:var(--muted); font-size:13px; left:10px; position:absolute; bottom:10px; }
.benefits { padding-top:100px; padding-bottom:106px; }.benefits>h2,.how-it-works h2 { font-size:clamp(34px,4vw,48px); line-height:1.1; margin-bottom:50px; }.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.benefit-grid article { background:var(--surface); border-radius:18px; min-height:228px; padding:28px; box-shadow:0 12px 40px rgba(33,28,47,.06); }.benefit-number { color:var(--gold); font-weight:700; font-size:14px; }.benefit-grid h3,.how-it-works h3 { font-size:20px; margin:35px 0 8px; }.benefit-grid p,.how-it-works p { color:var(--muted); line-height:1.5; margin-bottom:0; }
.how-it-works { background:var(--tint); border-radius:28px; display:grid; grid-template-columns:.9fr 1.1fr; gap:68px; margin-bottom:110px; padding-top:67px; padding-bottom:67px; }.how-it-works h2 { font-size:40px; margin-bottom:0; }.how-it-works ol { list-style:none; margin:0; padding:0; }.how-it-works li { border-top:1px solid #d7cbdf; display:flex; gap:18px; padding:19px 0; }.how-it-works li:last-child { border-bottom:1px solid #d7cbdf; }.how-it-works li>span { color:var(--primary); font:600 25px/1 "Fraunces",Georgia,serif; padding-top:1px; }.how-it-works h3 { margin:0 0 5px; }footer { border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; min-height:115px; }footer p { color:var(--muted); font-size:14px; margin:0; }
.builder-shell { max-width:1120px; margin:0 auto 120px; padding:0 24px; }.builder-heading { max-width:640px; margin:0 auto 30px; text-align:center; }.builder-heading h2 { font-size:46px; line-height:1.05; margin-bottom:12px; }.builder-heading>p:last-child { color:var(--muted); line-height:1.5; }.builder-card { background:var(--surface); border:1px solid #e7e1e9; border-radius:22px; box-shadow:0 18px 55px rgba(33,28,47,.09); margin:0 auto; max-width:640px; padding:32px; }.builder-progress { color:var(--muted); font-size:13px; font-weight:700; margin-bottom:34px; }.progress-track { background:#ece7ee; border-radius:4px; height:5px; margin-top:10px; overflow:hidden; }.progress-track span { background:var(--primary); display:block; height:100%; transition:width .2s ease; width:25%; }.step-kicker { color:var(--gold); font-size:11px; font-weight:700; letter-spacing:1.3px; margin-bottom:10px; }.builder-step h3 { font:600 32px/1.15 "Fraunces",Georgia,serif; letter-spacing:-.7px; margin-bottom:27px; }.builder-step label,.player-fieldset legend { display:block; font-size:15px; font-weight:700; margin-bottom:8px; }.builder-step input[type="text"],.builder-step input[type="email"],#honoree-name { border:1px solid #8a8194; border-radius:10px; color:var(--ink); font:500 17px/1.2 "DM Sans",Arial,sans-serif; min-height:52px; outline:none; padding:13px 14px; width:100%; }.builder-step input:focus { border-color:#2165d6; box-shadow:0 0 0 3px rgba(33,101,214,.17); }.field-help { color:var(--muted); font-size:13px; line-height:1.45; margin:7px 0 28px; }.player-fieldset { border:0; margin:0; padding:0; }.number-control { align-items:center; display:flex; gap:21px; margin:13px 0 6px; }.number-control button { background:var(--tint); border:0; border-radius:50%; color:var(--primary); cursor:pointer; font-size:25px; height:48px; width:48px; }.number-control output { font-size:23px; font-weight:700; min-width:30px; text-align:center; }.step-intro { color:var(--muted); line-height:1.55; margin:-15px 0 24px; }.text-button { background:transparent; border:0; color:var(--primary); cursor:pointer; font:700 15px "DM Sans",Arial,sans-serif; padding:4px 0; text-decoration:underline; text-underline-offset:4px; }.guest-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:24px; max-height:390px; overflow:auto; padding:3px; }.guest-fields label { color:var(--muted); font-size:12px; }.guest-fields input { margin-top:5px; }.song-list { border:1px solid var(--border); border-radius:12px; margin-top:20px; max-height:375px; overflow:auto; }.song-list>div { align-items:center; border-bottom:1px solid #ebe6ed; display:flex; gap:14px; padding:11px 14px; }.song-list>div:last-child { border-bottom:0; }.song-list>div>span { color:var(--gold); font-size:11px; font-weight:700; }.song-list p { margin:0; }.song-list strong,.song-list small { display:block; }.song-list strong { font-size:14px; }.song-list small { color:var(--muted); margin-top:2px; }.music-note,.checkout-note { background:var(--tint); border-radius:10px; color:var(--muted); font-size:13px; line-height:1.45; margin:24px 0 0; padding:13px 15px; }.review-preview { background:var(--tint); border:1px solid #d9cde1; border-radius:13px; display:flex; flex-direction:column; margin-bottom:22px; padding:23px; text-align:center; }.review-preview span,.review-preview small { color:var(--gold); font-size:10px; font-weight:700; letter-spacing:1.2px; }.review-preview strong { color:var(--primary); font:600 31px/1.15 "Fraunces",Georgia,serif; margin:6px 0; }.review-list { border-bottom:1px solid var(--border); border-top:1px solid var(--border); margin:0 0 26px; padding:10px 0; }.review-list div { display:flex; justify-content:space-between; padding:7px 0; }.review-list dt { color:var(--muted); }.review-list dd { font-weight:700; margin:0; }.check-row { align-items:flex-start; display:flex!important; gap:11px; margin:20px 0!important; }.check-row input { accent-color:var(--primary); height:19px; margin-top:2px; width:19px; }.check-row span { font-weight:400; }.check-row strong,.check-row small { display:block; }.check-row small { color:var(--muted); font-weight:400; line-height:1.4; margin-top:4px; }.price-summary { background:#fbfafc; border-radius:11px; display:grid; grid-template-columns:1fr auto; gap:10px; padding:17px; }.price-summary strong { text-align:right; }.price-total { border-top:1px solid var(--border); font-size:17px; margin-top:3px; padding-top:12px; }.builder-actions { align-items:center; border-top:1px solid var(--border); display:flex; justify-content:space-between; margin-top:32px; padding-top:22px; }.continue-button,.back-button { border:0; border-radius:10px; cursor:pointer; font:700 16px "DM Sans",Arial,sans-serif; min-height:50px; padding:0 20px; }.continue-button { background:var(--primary); color:#fff; margin-left:auto; }.continue-button:hover { background:var(--primary-hover); }.continue-button:disabled { background:#aaa2af; cursor:not-allowed; }.back-button { background:transparent; color:var(--primary); padding-left:0; text-decoration:underline; }.form-error { background:#fff1f0; border-left:4px solid #b42318; border-radius:6px; color:#8f1d14; font-size:14px; font-weight:600; margin-bottom:22px; padding:12px 14px; }
.music-toolbar { align-items:center; display:flex; justify-content:space-between; gap:16px; }.restore-button { background:transparent; border:0; color:var(--muted); cursor:pointer; font:600 13px "DM Sans",Arial,sans-serif; text-decoration:underline; text-underline-offset:3px; }.song-row p { flex:1; }.song-row button { background:var(--tint); border:0; border-radius:7px; color:var(--primary); cursor:pointer; font:700 12px "DM Sans",Arial,sans-serif; padding:8px 11px; }.catalog-status { color:var(--muted); padding:18px; text-align:center; }.catalog-error { color:#b42318; }.swap-dialog { background:transparent; border:0; max-height:90vh; max-width:590px; padding:0; width:calc(100% - 32px); }.swap-dialog::backdrop { background:rgba(33,28,47,.48); }.swap-card { background:var(--surface); border-radius:20px; box-shadow:0 24px 70px rgba(33,28,47,.24); padding:30px; position:relative; }.swap-card h2 { font-size:31px; line-height:1.15; margin-bottom:24px; padding-right:35px; }.swap-card>label { display:block; font-size:14px; font-weight:700; margin-bottom:8px; }.swap-card>input { border:1px solid #8a8194; border-radius:10px; color:var(--ink); font:500 16px "DM Sans",Arial,sans-serif; min-height:50px; padding:12px 14px; width:100%; }.dialog-close { background:var(--tint); border:0; border-radius:50%; color:var(--primary); cursor:pointer; font-size:24px; height:40px; position:absolute; right:20px; top:20px; width:40px; }.replacement-list { border-bottom:1px solid var(--border); border-top:1px solid var(--border); margin-top:20px; max-height:330px; overflow:auto; }.replacement-row { align-items:center; border-bottom:1px solid #eeeaf0; cursor:pointer; display:flex; gap:12px; margin:0!important; padding:12px 4px; }.replacement-row:last-child { border-bottom:0; }.replacement-row input { accent-color:var(--primary); height:18px; width:18px; }.replacement-row span { flex:1; }.replacement-row strong,.replacement-row small { display:block; }.replacement-row small { color:var(--muted); font-size:12px; margin-top:3px; }.empty-results { color:var(--muted); padding:24px 8px; text-align:center; }.dialog-actions { align-items:center; display:flex; margin-top:22px; }.dialog-actions .back-button { margin-right:auto; }
.draft-status { float:right; font-weight:500; }.draft-status.is-error { color:#b42318; }.progress-track { clear:both; }
.square-payment { border-top:1px solid var(--border); margin-top:24px; padding-top:23px; }.payment-label { font-size:15px; font-weight:700; margin-bottom:12px; }.sandbox-note { color:#76531d; font-size:12px; line-height:1.45; margin:9px 0 0; }.sandbox-note::before { content:"TEST"; background:#f4dfb9; border-radius:4px; font-size:9px; font-weight:800; letter-spacing:.8px; margin-right:7px; padding:3px 5px; }.square-payment.is-error { border:1px solid #dfaaa6; border-radius:10px; padding:15px; }
.order-page { min-height:calc(100vh - 76px); display:grid; place-items:center; padding:55px 24px 90px; }.order-success { background:#fff; border:1px solid var(--border); border-radius:22px; box-shadow:0 18px 55px rgba(33,28,47,.09); max-width:680px; padding:48px; text-align:center; width:100%; }.success-mark { align-items:center; background:var(--tint); border-radius:50%; color:var(--primary); display:flex; font-size:31px; font-weight:800; height:68px; justify-content:center; margin:0 auto 24px; width:68px; }.order-success h1 { font-size:clamp(38px,6vw,54px); line-height:1.05; margin-bottom:16px; }.order-lede { color:var(--muted); font-size:17px; line-height:1.55; margin:0 auto 28px; max-width:510px; }.order-downloads { align-items:center; display:flex; flex-direction:column; gap:16px; margin-bottom:34px; }.secondary-download { color:var(--primary); font-weight:700; text-underline-offset:4px; }.order-facts { border-bottom:1px solid var(--border); border-top:1px solid var(--border); margin:0; padding:13px 0; text-align:left; }.order-facts div { display:flex; justify-content:space-between; padding:8px 0; }.order-facts dt { color:var(--muted); }.order-facts dd { font-weight:700; margin:0; }.private-note { color:var(--muted); font-size:12px; line-height:1.5; margin:20px 0 0; }
.admin-page { margin:0 auto; max-width:1180px; padding:55px 24px 100px; }.admin-login { background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:0 16px 45px rgba(33,28,47,.08); margin:45px auto; max-width:470px; padding:38px; }.admin-login h1,.admin-heading h1 { font-size:42px; }.admin-login label { display:block; font-weight:700; margin:20px 0 8px; }.admin-login input { border:1px solid #8a8194; border-radius:9px; font-size:16px; margin-bottom:18px; min-height:49px; padding:10px 12px; width:100%; }.admin-login .button { border:0; cursor:pointer; }.admin-heading { align-items:end; display:flex; justify-content:space-between; }.admin-heading p { color:var(--muted); }.admin-table-wrap { background:#fff; border:1px solid var(--border); border-radius:15px; overflow:auto; }.admin-table { border-collapse:collapse; min-width:930px; width:100%; }.admin-table th,.admin-table td { border-bottom:1px solid var(--border); padding:14px 15px; text-align:left; }.admin-table th { background:#f7f3f8; color:var(--muted); font-size:12px; letter-spacing:.4px; }.admin-table td { font-size:14px; }.admin-table small { color:var(--muted); display:block; margin-top:4px; }.status-pill { background:var(--tint); border-radius:20px; color:var(--primary); font-size:11px; font-weight:800; padding:5px 8px; }.admin-notice { background:#edf8ef; border-radius:8px; color:#246b34; padding:12px 14px; }.admin-logs { margin-top:35px; }.admin-logs h2 { font-size:25px; }.admin-logs p { background:#fff; border-bottom:1px solid var(--border); margin:0; padding:11px 14px; }.admin-logs small { color:var(--muted); float:right; }
.review-preview { display:block; min-height:420px; overflow:hidden; padding:25px; position:relative; }.preview-loading,.preview-error { color:var(--muted); display:grid; min-height:365px; place-items:center; text-align:center; }.preview-error { color:#b42318; }.generated-card { background:#fff; border:1px solid #d9d0dc; box-shadow:0 12px 30px rgba(33,28,47,.12); margin:0 auto; max-width:420px; padding:22px 18px 14px; position:relative; transform:rotate(-1deg); }.generated-card>small { color:var(--gold); display:block; font-size:8px; font-weight:700; letter-spacing:1.1px; }.generated-name { color:var(--primary); display:block; font:600 28px/1.1 "Fraunces",Georgia,serif; margin:5px 0 1px; }.generated-title { color:var(--ink); display:block; font-size:11px; font-weight:800; letter-spacing:1.4px; margin-bottom:15px; }.generated-grid { border-left:1px solid #9b919f; border-top:1px solid #9b919f; display:grid; grid-template-columns:repeat(5,1fr); }.generated-grid>span,.generated-grid>.preview-free { border-bottom:1px solid #9b919f; border-right:1px solid #9b919f; display:grid; font-size:7px; font-weight:650; line-height:1.05; min-height:49px; overflow-wrap:anywhere; padding:3px; place-items:center; text-align:center; }.generated-grid>.preview-free { background:var(--tint); color:var(--primary); font-size:11px; }.preview-free small { display:block; font-size:5px; }.generated-card>p { font-size:9px; margin:11px 0 0; }.preview-watermark { color:rgba(91,59,120,.1); font-size:74px; font-weight:800; left:50%; letter-spacing:6px; pointer-events:none; position:absolute; top:50%; transform:translate(-50%,-50%) rotate(-24deg); z-index:2; }
.keepsake-mini-preview { background:#fbfafc; border:1px solid var(--border); border-radius:11px; display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:-7px 0 20px; padding:17px; }.keepsake-mini-preview[hidden] { display:none; }.keepsake-mini-preview>div { aspect-ratio:8.5/11; background:#fff; border:1px solid #d9d0dc; box-shadow:0 6px 15px rgba(33,28,47,.08); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; text-align:center; }.keepsake-mini-preview small { color:var(--gold); font-size:7px; font-weight:700; }.keepsake-mini-preview strong { color:var(--primary); font:600 42px "Fraunces",Georgia,serif; }.keepsake-mini-preview span { color:var(--muted); font-size:9px; margin-top:7px; }.keepsake-mini-preview i { border-bottom:1px solid #b9b1bd; display:block; height:19px; width:85%; }
@media (max-width:720px) { .site-header,.hero,.benefits,.how-it-works,footer { padding-left:20px; padding-right:20px; }.site-nav a:not(.nav-cta) { display:none; }.site-header { min-height:64px; }.hero { display:flex; flex-direction:column; align-items:stretch; gap:28px; min-height:0; padding-top:38px; padding-bottom:58px; }h1 { font-size:47px; }.hero-description { font-size:17px; }.product-preview { min-height:415px; }.sunburst { height:315px; width:315px; }.bingo-card { width:335px; padding:20px 16px 15px; }.bingo-grid span,.bingo-grid strong { min-height:43px; font-size:6px; }.bingo-grid strong { font-size:10px; }.benefits { padding-top:68px; padding-bottom:72px; }.benefit-grid { grid-template-columns:1fr; }.benefit-grid article { min-height:auto; }.benefit-grid h3 { margin-top:24px; }.how-it-works { border-radius:0; display:block; margin-bottom:65px; padding-top:55px; padding-bottom:55px; }.how-it-works h2 { font-size:35px; margin-bottom:37px; }.builder-shell { margin-bottom:75px; padding:0; }.builder-heading { padding:0 20px; }.builder-heading h2 { font-size:39px; }.builder-card { border-left:0; border-radius:0; border-right:0; padding:27px 20px; }.guest-fields { grid-template-columns:1fr; }footer { align-items:flex-start; flex-direction:column; gap:15px; padding-top:25px; padding-bottom:25px; } }
.music-header { align-items:center; display:flex; margin:0 auto; max-width:860px; min-height:76px; padding:0 24px; }.music-main { margin:0 auto; max-width:860px; padding:65px 24px 100px; }.music-main h1 { font-size:clamp(42px,7vw,64px); line-height:1.05; margin-bottom:18px; }.music-intro { color:var(--muted); font-size:18px; line-height:1.55; max-width:680px; }.music-set-notice { align-items:flex-start; background:var(--tint); border-radius:13px; display:flex; flex-direction:column; gap:4px; margin:32px 0; padding:17px 19px; }.music-set-notice strong { color:var(--primary); }.music-set-notice span { color:var(--muted); font-size:14px; }.public-song-list { background:var(--surface); border-radius:18px; box-shadow:0 12px 40px rgba(33,28,47,.06); list-style-position:inside; margin:0; padding:12px 28px; }.public-song-list li { border-bottom:1px solid var(--border); color:var(--gold); font-weight:700; padding:13px 2px; }.public-song-list li:last-child { border-bottom:0; }.public-song-list li span { display:inline-block; margin-left:12px; vertical-align:top; }.public-song-list strong,.public-song-list small { display:block; }.public-song-list strong { color:var(--ink); }.public-song-list small { color:var(--muted); font-weight:400; margin-top:3px; }