.picture-wrap { width: min(1120px, 90%); margin-inline: auto; }
.picture-header { gap: 12px; }
.picture-header .outline { font-size: 13px; padding: 9px 12px; }
.picture-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: clamp(24px, 6vw, 85px); padding-block: 52px; }
.picture-hero h1 { font: 900 clamp(3.6rem, 9vw, 7.2rem)/.87 'Barlow Condensed', Impact, sans-serif; text-transform: uppercase; margin: 12px 0 22px; }
.picture-hero em, .picture-result em { color: #ffdf28; font-style: normal; }
.picture-lead { max-width: 34ch; margin-bottom: 24px; }
.hero-sample { max-width: 370px; margin: 0; background: #ffdf28; color: #121212; padding: 7px; border-radius: 12px; transform: rotate(2deg); box-shadow: 10px 10px #65241d; }
.hero-sample img, .picture-result img { width: 100%; height: auto; display: block; border-radius: 7px; }
.hero-sample figcaption, .picture-result figcaption { padding: 8px 5px 3px; font-size: 11px; font-weight: 800; letter-spacing: .09em; }
.hero-sample b { color: #a71d24; float: right; }
.picture-workspace { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; gap: 24px; padding-bottom: 60px; }
.picture-workspace form, .picture-result { min-width: 0; background: #1b1b1b; border: 1px solid #393939; border-radius: 14px; padding: clamp(16px, 3vw, 30px); }
.picture-workspace fieldset { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.picture-workspace legend { font: 800 30px/1.1 'Barlow Condensed', Impact, sans-serif; margin-bottom: 9px; }
.picture-workspace legend span { color: #ffdf28; margin-right: 5px; }
.picture-workspace fieldset > p { margin: 0 0 12px; }
.upload-area { display: grid; gap: 8px; padding: 16px; border: 2px dashed #80703d; border-radius: 9px; background: #252116; cursor: pointer; }
.upload-area input { width: 100%; font: inherit; color: inherit; scroll-margin: 18px; }
.upload-area input::file-selector-button { background: #ffdf28; color: #121212; border: 0; padding: 8px; border-radius: 5px; margin-right: 8px; cursor: pointer; }
#photo-preview { display: block; width: 110px; height: 110px; object-fit: cover; border-radius: 8px; margin-block: 12px; }
#photo-status:empty { display: none; }
.style-options, .tone-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.style-options label, .tone-options label { background: #222; border: 1px solid #555; border-radius: 9px; cursor: pointer; overflow: hidden; }
.style-options label:has(input:checked), .tone-options label:has(input:checked) { border-color: #ffdf28; background: #332b17; }
.style-options img { width: 100%; height: auto; aspect-ratio: 1.45; object-fit: cover; object-position: center 42%; display: block; }
.style-options label > span, .tone-options label { display: block; padding: 10px; }
.style-options input, .tone-options input { accent-color: #ffdf28; margin-right: 6px; }
.style-options small, .tone-options small { display: block; margin-top: 4px; color: #ccc; }
.brief-label { display: block; margin: 16px 0 7px; font-weight: 700; }
.picture-workspace select { max-width: 100%; margin-bottom: 10px; padding: 9px; color: #fff; background: #121212; border: 1px solid #666; border-radius: 7px; font: inherit; }
.picture-workspace textarea { width: 100%; padding: 10px; color: #fff; background: #121212; border: 1px solid #666; border-radius: 7px; font: inherit; resize: vertical; }
.picture-workspace :focus-visible { outline: 2px solid #ffdf28; outline-offset: 3px; }
.picture-result { position: sticky; top: 16px; }
.picture-result h2 { font: 800 42px/1 'Barlow Condensed', Impact, sans-serif; margin: 8px 0 15px; scroll-margin: 20px; }
.picture-result figure { margin: 0; }
.picture-result dl { margin: 16px 0; }
.picture-result dt { color: #ffdf28; font-weight: 700; }
.picture-result dd { margin: 2px 0 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 740px) {
  .picture-hero, .picture-workspace { grid-template-columns: minmax(0, 1fr); }
  .picture-hero { padding-block: 34px; }
  .hero-sample { width: min(75%, 320px); margin-inline: auto; }
  .picture-result { position: static; }
}


.group-example { margin: 8px 0 16px; }
.group-example img { display: block; width: 100%; height: auto; border-radius: 8px; }
.group-example figcaption { margin-top: 6px; color: #ccc; font-size: 13px; }
#picture-options-review{border-top:1px solid #555;padding-top:24px;margin:24px 0}.review-options-actions{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}.personal-picture-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.personal-picture-option{border:2px solid #666;border-radius:10px;padding:10px;background:#151515;min-width:0}.personal-picture-option.is-selected{border-color:#ffdf28}.personal-picture-option h4{margin:0 0 10px;color:#ffdf28}.personal-picture-option img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain;background:#fff}.personal-picture-option button{width:100%;padding:10px 5px;font-size:12px;margin-top:8px}.picture-result button:disabled,.picture-checkout-entry button:disabled{opacity:.45;cursor:not-allowed}#picture-option-viewer{width:min(900px,94vw);max-height:94vh;overflow:auto;background:#191919;color:#fff;border:2px solid #ffdf28;border-radius:12px;padding:20px}#picture-option-viewer::backdrop{background:rgba(0,0,0,.85)}#picture-option-viewer img{display:block;max-width:100%;height:auto;margin:auto}#picture-option-viewer .picture-viewer-close{position:sticky;top:0;background:#ffdf28;color:#111;z-index:2;float:right}#picture-option-viewer h2{font-size:26px;margin:15px 0}#picture-options-review .check{display:flex;align-items:start;gap:10px}#picture-options-review .check input{flex:none;margin-top:5px}.picture-result:has(#personal-picture-options:not(:empty)){position:static}@media(max-width:420px){.personal-picture-options{grid-template-columns:1fr}}