/* Story HD visual refresh. Existing routes, copy and order endpoints are unchanged. */
:root{--bg:#111711;--card:#192018;--text:#f0eadc;--muted:#b7bcae;--accent:#d5bb8e;--primary:#bc5c49;--border:#354030;--font-title:Georgia,'Times New Roman',serif;color-scheme:dark}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
a{color:var(--accent)}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #f4d59c;outline-offset:3px}
button{transition:filter .15s,transform .15s}
[hidden]{display:none!important}

/* Public homepage: a real sample and the real paid form share one workbench. */
main#main{width:min(100% - 64px,1224px);max-width:1224px;margin-inline:auto;padding:0}
.site-header.wrap,.site-footer.wrap,.final-cta.wrap{width:min(100% - 64px,1224px);max-width:1224px;margin-inline:auto}
.site-header{border-bottom:1px solid var(--border);min-height:80px}
.brand-mark{border-color:var(--accent);color:var(--accent)}
.brand,.header-nav a{color:var(--text)}
.header-nav .nav-create{border-color:var(--accent);color:var(--accent)}
.header-nav a:hover{color:#f1d6a6}
.hero{padding:34px 0 52px;min-height:0}
.hero-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:42px;align-items:end;margin:0 0 30px}
.hero .hero-copy{grid-area:auto;align-self:end;max-width:430px;width:100%;text-align:left;display:block;margin:0}
.hero .eyebrow{justify-content:flex-start;font-size:11px;letter-spacing:.18em;color:var(--accent);margin:0 0 11px}
.hero h1{font:400 clamp(46px,4.7vw,64px)/1.03 var(--font-title);letter-spacing:-.035em;max-width:650px;margin:0;color:var(--text)}
.hero h1 em{display:block;color:#e6bd7c;font-weight:400}
.hero .subtitle{text-align:left;margin:0 0 10px;color:#e1c798;font:italic 28px/1.2 var(--font-title)}
.hero-description{max-width:55ch;margin:0;text-align:left;color:var(--muted);font-size:13px;line-height:1.75}
.hero-specs{display:flex;gap:13px;flex-wrap:wrap;margin:16px 0 0;color:#e2d3b6;font-size:11px}
.hero-specs span+span{border-left:1px solid #586144;padding-left:13px}
.mobile-sample-link{display:none}
.mobile-sample-preview{display:none}
.hero-workbench{display:grid;grid-template-columns:minmax(0,1.23fr) minmax(390px,1fr);gap:0;align-items:stretch;scroll-margin-top:18px;border:1px solid #455039;border-radius:9px;overflow:hidden;background:var(--card)}
.hero-film,.hero-create{min-width:0}
.hero-film{border:0;border-right:1px solid var(--border);border-radius:0;background:#121910;overflow:hidden;padding:24px 24px 20px}
.hero-create{border:0;border-radius:0;background:var(--card);padding:24px 27px 20px}
.hero-create>.eyebrow{margin:0 0 2px}
.create-intro{font:italic 24px/1.2 var(--font-title);margin:0 0 16px;color:#f0dfbc}
.create-topline{display:flex;align-items:start;justify-content:space-between;gap:12px}
.create-topline>div{min-width:0}
.hero-create .create-topline .eyebrow{font-size:10px;letter-spacing:.16em;margin:0 0 8px;text-transform:uppercase}
.hero-create .create-topline .price{margin:0;white-space:nowrap;text-align:right;color:var(--accent)}
.hero-create .create-topline .price span{display:block;margin-top:4px;font-size:11px}
.hero-create .notice{margin:0 0 12px}
.hero-create #notice{margin:0 0 12px}
.hero-create #notice:empty{display:none}
.hero-create .story-layout,.hero-create .story-layout[data-order-state=existing]{display:block}
.hero-create .story-layout>.card{border:0;background:none;border-radius:0;padding:0;box-shadow:none}
.hero-create .story-layout>.card#order-panel{padding-top:18px;margin-top:18px;border-top:1px solid var(--border)}
.hero-create #form-title{font:400 27px/1.15 var(--font-title);letter-spacing:-.02em;margin:0 0 8px}
.hero-create .price{font:500 31px/1.1 var(--font-title);margin:4px 0}
.hero-create .price span{font:13px/1.5 Inter,system-ui,sans-serif;color:var(--muted)}
.hero-create .create-subtitle{font-size:12px;line-height:1.5;color:var(--muted);margin:7px 0 17px}
.hero-create .photos{gap:12px}
.hero-create .photo-role{font-size:12px;line-height:1.35;margin:0 0 8px;min-height:32px;color:var(--text)}
.hero-create .photo-role span{color:var(--accent);margin-right:5px}
.hero-create .photo>.photo-picker{height:146px;padding:0;background:#202a1c;border:1px dashed #6b765b;border-radius:5px}
.hero-create .photo-picker .image-box{height:100%;background:#202a1c;margin:0;border-radius:5px}
.hero-create .image-box>span:not([hidden]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:100%;height:100%}
.hero-create .upload-symbol{font-size:31px;line-height:1;margin:0 0 4px;color:var(--accent)}
.hero-create .image-box strong{font-size:12px;color:var(--text);font-weight:600}
.hero-create .image-box small{font-size:10px;color:var(--muted)}
.hero-create .photo-choose{display:none;position:absolute;left:8px;right:8px;bottom:6px;min-height:0;font-size:11px;padding:5px 8px;background:#0c140bdc;border:0;border-radius:3px}
.hero-create .photo-picker:has(img:not([hidden])) .photo-choose{display:block}
.hero-create .photo p[id$="-hint"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-create .photo p[id$="-note"]{font-size:11px;line-height:1.4;margin:5px 0 0}
.hero-create .photo p[id$="-note"]:empty{display:none}
.hero-create .photo [data-remove]{font-size:12px;min-height:38px;margin:0;padding:5px 10px}
.hero-create .photo-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0 15px}
.hero-create .photo-tools p{font-size:10px;line-height:1.4;margin:0;color:var(--muted)}
.hero-create .ratios{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 15px}
.hero-create .ratios legend{float:none;grid-column:1/-1;width:auto;margin:0 0 2px;font-size:12px;font-weight:600}
.hero-create .ratios label{display:flex;justify-content:center;align-items:center;gap:6px;min-height:43px;padding:8px;border:1px solid var(--border);border-radius:5px;background:#121a13;font-size:12px}
.hero-create .ratios label:has(input:checked){border-color:var(--accent);background:#2b2a1e}
.hero-create .ratios label small{font-size:10px;color:var(--muted)}
.hero-create .ratios input{margin:0}
.hero-create .consent{margin:0 0 13px;font-size:11px;line-height:1.55}
.hero-create .next-step{font-size:11px;line-height:1.5;margin:7px 0 0;padding:0;color:#d7cba9;border:0}
.hero-create #prepare,.hero-create #pay{position:relative;background:var(--primary);border-color:var(--primary);color:#fff8ef;font-size:14px;min-height:50px;margin-top:0}
.hero-create #prepare::after{content:"→";position:absolute;right:16px}
.hero-create #prepare:disabled{opacity:.52}
.hero-create .form-reassurance{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:10px;margin:10px 0 0}
.hero-create .purchase-sample{display:none}
.hero-create .recovery-entry{margin:16px 0 0}
.hero-create .recovery-entry #recover-panel{background:#121a13;border-color:var(--border);padding:12px}
.hero-create .recovery-entry summary{font-size:13px}
.hero-create .card p.small.muted,.hero-create .card>p.small{font-size:12px;line-height:1.6}
.hero-create .card a{color:var(--accent)}
.confidence-strip{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:18px 4px 0;color:#aab49f;font-size:11px}
.confidence-strip strong{color:#dce0d1;font-weight:500}
.confidence-strip a{color:var(--accent)}
.creation-details{border-top:1px solid var(--border);padding:10px 4px;color:var(--muted);font-size:12px}
.creation-details summary{cursor:pointer;color:var(--accent)}
.creation-details p{max-width:78ch;line-height:1.6}
.review-email{display:flex;align-items:start;gap:9px;border:1px solid var(--border);border-radius:6px;padding:10px;margin:13px 0;color:var(--text);font-size:12px;line-height:1.5}
.review-email input{margin-top:2px}

/* Existing video URLs and original output remain in the initial HTML. */
.story-hero-sample{border:0;border-radius:0;background:transparent;box-shadow:none;margin:0}
.sample-heading{padding:0;min-height:0;margin:0 0 17px;border:0}
.sample-heading h2{font:500 15px/1.3 var(--font-title);color:var(--text)}
.sample-player{background:#060907;overflow:hidden;border-radius:4px}
#sample-video{display:block;width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:contain;background:#050805}
.sample-sound-note{font-size:12px;color:var(--accent);padding:8px 16px;margin:0}
.sample-story{padding:0 0 13px}
.sample-story-steps{gap:10px;margin-top:6px}
.sample-story-steps li strong{font-size:13px}
.sample-story-steps li p{font-size:11px}
.sample-inputs{margin:10px 0}
.sample-inputs p{font-size:12px}
.sample-portraits img{width:45px;height:45px;object-fit:cover}
.sample-formats{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sample-formats button{min-height:38px;padding:7px 12px;font-size:12px}
.sample-story #sample-format-note{font-size:11px;margin:7px 0;color:var(--muted)}
.story-hero-sample figcaption{padding:11px 0 0;border-top:1px solid var(--border);font-size:12px;line-height:1.5}
.story-hero-sample figcaption span{display:block}
.story-hero-sample figcaption strong{display:block;color:var(--accent);font-size:12px}
.content-section,.home-summary,.guide-summary,.final-cta{border-color:var(--border)}
.content-section h2,.home-summary h2,.guide-summary h2,.final-cta h2{font-family:var(--font-title)}
.primary-cta{background:var(--primary);color:#fff8ef;border-color:var(--primary)}
.primary-cta:hover{color:#fff}

/* The private create/recovery page gets the same palette, without changing routes. */
body>main:not(#main){width:min(100% - 36px,1100px);max-width:1100px;padding:26px 0 40px}
body>main:not(#main) .top-nav{border-bottom:1px solid var(--border);padding-bottom:15px}
body>main:not(#main) .brand{font:600 17px/1.3 Inter,system-ui,sans-serif;color:var(--text)}
body>main:not(#main) h1{font:500 clamp(35px,4vw,52px)/1.08 var(--font-title)}
body>main:not(#main) .badge{border-color:var(--border);color:var(--accent)}
body>main:not(#main) .story-layout>.card{background:var(--card);border-color:var(--border)}
body>main:not(#main) .story-layout[data-order-state=new]{grid-template-columns:1fr}
body>main:not(#main) .story-layout[data-order-state=new]>.card{max-width:900px}
body>main:not(#main) .photo-picker .image-box{background:#121a13;border-color:var(--border)}
body>main:not(#main) .photo>.photo-picker{background:#131b13;border-color:#56634d}
body>main:not(#main) .photo-choose{border-color:#70654a}
body>main:not(#main) #prepare,body>main:not(#main) #pay{background:var(--primary);border-color:var(--primary);color:#fff8ef}
body>main:not(#main) .recovery-entry #recover-panel{background:var(--card);border-color:var(--border)}
body>main:not(#main) .card a,body>main:not(#main) summary{color:var(--accent)}

/* Native dialog keeps review separate from any save or payment request. */
.review-dialog{box-sizing:border-box;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:hidden;padding:0;background:#192018;color:var(--text);border:1px solid #657153;border-radius:16px;box-shadow:0 25px 80px #000a}
.review-dialog[open]{display:flex;flex-direction:column}
.review-dialog::backdrop{background:#050905d9}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;padding:16px 22px;border-bottom:1px solid var(--border)}
.review-head .eyebrow{font-size:11px;margin:0;color:var(--accent)}
.review-head button{width:40px;min-height:40px;margin:0;padding:4px;font-size:24px;line-height:1;border-color:var(--border)}
.review-dialog h2{font:500 32px/1.1 var(--font-title);margin:0}
.review-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:10px 22px}
.review-footer{flex:none;padding:12px 22px 18px;border-top:1px solid var(--border)}
.review-dialog p{font-size:14px;line-height:1.6;color:var(--muted)}
.review-photos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.review-photos figure{margin:0;padding:8px;background:#111811;border:1px solid var(--border);border-radius:9px;min-width:0}
.review-photos img{display:block;width:100%;height:150px;object-fit:contain;background:#0b100b;border-radius:5px}
.review-photos figcaption{font-size:12px;color:var(--accent);margin-top:7px}
.review-dialog dl{margin:16px 0;border-block:1px solid var(--border)}
.review-dialog dl>div{display:flex;justify-content:space-between;gap:15px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px}
.review-dialog dl>div:last-child{border:0}
.review-dialog dt{color:var(--muted)}
.review-dialog dd{margin:0;text-align:right;font-weight:600}
.review-dialog .review-disclosure{font-size:12px;color:#d5c7a7}
#review-confirm{display:block;width:100%;min-height:50px;background:var(--primary);border-color:var(--primary);color:#fff8ef}

@media(max-width:980px){.hero-workbench{grid-template-columns:minmax(0,1fr) minmax(350px,.92fr)}.hero-intro{gap:24px}.hero-create{padding:17px}.hero-create .photos{grid-template-columns:1fr 1fr}.hero-create .photo>.photo-picker{height:120px}}
@media(max-width:760px){
 main#main,.site-header.wrap,.site-footer.wrap,.final-cta.wrap{width:min(100% - 28px,640px)}
 .site-header{min-height:64px}.header-nav{gap:8px;flex-wrap:wrap}
 .header-nav a{font-size:11px}.header-nav a:nth-child(2){display:none}
 .hero{padding:24px 0 35px}.hero-intro{display:block;margin:0 0 20px}.hero .hero-copy{max-width:none;margin:14px 0 0}
 .hero h1{font-size:clamp(42px,10vw,58px);line-height:1}.hero h1 em{display:inline}.hero .subtitle{display:none}
 .hero-description{font-size:12px;line-height:1.6}
 .hero-specs{font-size:10px;gap:10px;margin-top:10px}.hero-specs span+span{padding-left:10px}
 .mobile-sample-link{display:none}
 .hero-workbench{display:flex;flex-direction:column;gap:0}
 .mobile-sample-preview{display:flex;align-items:center;gap:12px;order:0;padding:13px 15px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none}
 .mobile-sample-preview img{width:102px;height:70px;flex:none;object-fit:cover;border-radius:3px;filter:brightness(.85)}
 .mobile-sample-preview span{display:block;min-width:0}.mobile-sample-preview strong{display:block;font-size:12px;font-weight:500}.mobile-sample-preview small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.mobile-sample-preview em{display:block;font:normal 10px/1.4 Inter,system-ui,sans-serif;color:var(--accent);margin-top:5px}
 .hero-film{order:2;border-right:0;border-top:1px solid var(--border);padding:14px}.hero-create{order:1;padding:18px}
 #sample-video{width:100%;height:180px!important;max-height:180px;aspect-ratio:16/9!important;object-fit:contain}
 .sample-heading{min-height:0;padding:0;margin:0 0 9px}.sample-heading h2{font-size:13px}
 .sample-story{display:block;padding:4px 12px 8px}
 .sample-inputs{margin:4px 0}.sample-portraits img{width:34px;height:34px}
 .sample-story-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:4px 0}
 .sample-story-steps li{display:block;padding:3px;border:0}.sample-story-steps li span{font-size:10px}.sample-story-steps li strong{font-size:10px}.sample-story-steps li p{display:none}
 .sample-formats{margin:4px 0}.sample-formats button{min-height:34px;padding:5px 9px}
 .story-hero-sample figcaption{display:block;padding:7px 12px;font-size:10px}
 .sample-sound-note{padding:5px 12px;font-size:11px}
 .hero-create .photos{grid-template-columns:1fr 1fr}
 .hero-create .photo>.photo-picker{height:135px}
 .hero-create .photo-role{font-size:12px}
 .confidence-strip{gap:9px 14px;font-size:10px}.confidence-strip a{width:100%}
 .review-head{padding:12px 16px}.review-body{padding:8px 16px}.review-footer{padding:10px 16px 14px}.review-dialog h2{font-size:26px}.review-photos img{height:clamp(100px,18dvh,150px)}
 body>main:not(#main){width:min(100% - 32px,640px)}
}
@media(max-width:390px){.hero-create .photos{gap:8px}.hero-create .photo>.photo-picker{height:120px}.hero-create .photo-role{font-size:11px}.hero-create .photo p.small{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}