:root {
    font-family: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #122b59;
    background: #fff9f3;
    --navy: #122b59;
    --navy-2: #0d234b;
    --pink: #e85898;
    --yellow: #f8b838;
    --turquoise: #40b0b0;
    --sky: #54b6ef;
    --paper: #ffffff;
    --cream: #fff9f3;
    --ink: #122b59;
    --body: #42516e;
    --muted: #71809a;
    --line: #e4e9f1;
    --soft: #f5f7fb;
    --shadow: 0 18px 55px rgba(18,43,89,.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(circle at 6% 4%, rgba(232,88,152,.07), transparent 24rem), radial-gradient(circle at 92% 10%, rgba(64,176,176,.08), transparent 27rem), var(--cream); color: var(--ink); }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.hidden { display: none !important; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .88em; }

.site-header { background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(18,43,89,.08); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(14px); }
.site-header-inner { width: min(1180px, calc(100% - 36px)); min-height: 78px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { display: block; width: 206px; height: auto; }
.header-promise { display: inline-flex; align-items: center; gap: 9px; font-size: .86rem; font-weight: 800; color: var(--body); background: #f7fafc; border: 1px solid var(--line); border-radius: 999px; padding: 9px 13px; }
.promise-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--turquoise); box-shadow: 0 0 0 4px rgba(64,176,176,.14); }

.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 52px 0 100px; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: clamp(28px, 7vw, 86px); align-items: center; min-height: 450px; padding: 28px 0 54px; }
.hero-copy { max-width: 720px; }
.kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--body); font-size: .82rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.kicker span { width: 36px; height: 7px; border-radius: 999px; background: linear-gradient(90deg, var(--pink) 0 33%, var(--yellow) 33% 66%, var(--turquoise) 66%); }
h1 { font-size: clamp(3.3rem, 7.4vw, 6.5rem); line-height: .9; letter-spacing: -.065em; margin: 0 0 25px; color: var(--navy); }
.pink-word { color: var(--pink); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.02; letter-spacing: -.04em; margin: 6px 0 13px; color: var(--navy); }
h3 { font-size: 1.45rem; line-height: 1.15; letter-spacing: -.025em; margin: 6px 0 0; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.23rem); line-height: 1.65; color: var(--body); max-width: 760px; }
.lead.small { font-size: 1rem; margin-top: 8px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-points span { display: inline-flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px 8px 8px; color: var(--body); font-size: .82rem; font-weight: 750; box-shadow: 0 8px 26px rgba(18,43,89,.05); }
.hero-points b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: white; font-size: .72rem; }
.hero-points span:nth-child(2) b { background: var(--pink); }
.hero-points span:nth-child(3) b { background: var(--turquoise); }
.hero-visual { position: relative; min-height: 390px; display: grid; place-items: center; }
.hero-visual img { position: relative; z-index: 3; width: min(390px, 90%); border-radius: 34px; filter: drop-shadow(0 28px 45px rgba(18,43,89,.12)); transform: rotate(1.5deg); }
.hero-blob { position: absolute; border-radius: 999px; filter: blur(.2px); opacity: .82; }
.hero-blob-pink { width: 190px; height: 190px; background: rgba(232,88,152,.23); left: 3%; top: 8%; transform: rotate(25deg); }
.hero-blob-yellow { width: 180px; height: 180px; background: rgba(248,184,56,.26); right: 0; top: 10%; }
.hero-blob-turquoise { width: 230px; height: 145px; background: rgba(64,176,176,.22); right: 8%; bottom: 3%; transform: rotate(-16deg); }

.eyebrow, .mini-label { font-size: .71rem; letter-spacing: .16em; font-weight: 950; text-transform: uppercase; margin: 0; color: var(--navy); }
.eyebrow.pink { color: var(--pink); }
.eyebrow.yellow { color: #d58a00; }
.eyebrow.turquoise { color: #228f90; }
.hint { color: var(--muted); font-size: .91rem; line-height: 1.55; }

.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin: 0 0 20px; position: relative; }
.step { --step-accent: var(--navy); display: flex; align-items: center; gap: 10px; min-height: 57px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.67); color: #8792a6; transition: .2s ease; }
.step:nth-child(2) { --step-accent: var(--pink); }
.step:nth-child(3) { --step-accent: var(--yellow); }
.step:nth-child(4) { --step-accent: var(--turquoise); }
.step:nth-child(5) { --step-accent: var(--sky); }
.step:nth-child(6) { --step-accent: var(--pink); }
.step span { width: 31px; height: 31px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #edf1f6; color: #8290a7; font-size: .78rem; font-weight: 950; }
.step strong { font-size: .82rem; line-height: 1.1; }
.step.is-active { background: var(--paper); color: var(--ink); border-color: color-mix(in srgb, var(--step-accent) 40%, white); box-shadow: 0 11px 30px rgba(18,43,89,.07); transform: translateY(-1px); }
.step.is-active span, .step.is-complete span { background: var(--step-accent); color: white; }
.step.is-complete { color: var(--body); }

.card { background: var(--paper); border: 1px solid rgba(18,43,89,.09); border-radius: 28px; padding: clamp(22px, 3.6vw, 38px); margin-top: 16px; box-shadow: var(--shadow); }
.section-copy { max-width: 780px; margin-bottom: 25px; }
.setup-card { overflow: hidden; position: relative; }
.setup-card::after { content: ""; position: absolute; width: 250px; height: 250px; border-radius: 50%; background: rgba(248,184,56,.09); right: -100px; top: -120px; pointer-events: none; }
.setup-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(370px, 1.1fr); gap: clamp(28px, 6vw, 76px); align-items: center; position: relative; z-index: 1; }
.simple-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; color: var(--body); font-size: .92rem; }
.simple-list li { display: flex; align-items: center; gap: 10px; }
.simple-list li::before { content: "✓"; width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(64,176,176,.14); color: #19898a; border-radius: 50%; font-size: .72rem; font-weight: 950; }

.upload-form { display: grid; gap: 14px; background: #f8fafc; border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.field-label { display: grid; gap: 8px; font-weight: 850; font-size: .86rem; color: var(--navy); }
input[type="text"], input[type="email"], input[type="number"] { width: 100%; border: 1.5px solid #dce3ed; background: white; color: var(--navy); border-radius: 14px; min-height: 53px; padding: 11px 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(64,176,176,.12); }
.upload-drop { min-height: 142px; border: 2px dashed #cbd5e3; border-radius: 18px; background: white; padding: 15px; display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.upload-drop:hover, .upload-drop.is-dragover { border-color: var(--pink); background: #fffafd; transform: translateY(-1px); }
.upload-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-icon { width: 63px; height: 63px; border-radius: 17px; background: linear-gradient(135deg, rgba(232,88,152,.15), rgba(248,184,56,.18)); color: var(--pink); display: grid; place-items: center; font-size: 2rem; font-weight: 500; }
.upload-preview { width: 63px; height: 63px; border-radius: 17px; overflow: hidden; border: 2px solid white; box-shadow: 0 5px 18px rgba(18,43,89,.12); }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-copy { display: grid; gap: 4px; min-width: 0; }
.upload-copy strong { font-size: .98rem; color: var(--navy); }
.upload-copy small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-action { background: #eef3f8; color: var(--navy); border-radius: 999px; padding: 8px 12px; font-size: .78rem; font-weight: 900; }
.privacy-note { margin: -2px 0 0; text-align: center; color: var(--muted); font-size: .75rem; }

.primary-button, .secondary-button, .button { border: 0; border-radius: 14px; min-height: 53px; padding: 14px 20px; font-weight: 900; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, opacity .14s; }
.primary-button, .button { background: var(--navy); color: white; box-shadow: 0 9px 20px rgba(18,43,89,.18); }
.primary-button:hover:not(:disabled), .button:hover { transform: translateY(-2px); box-shadow: 0 13px 26px rgba(18,43,89,.23); }
.secondary-button { background: white; color: var(--navy); border: 1px solid #d9e1ec; }
button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }

.progress-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.percent { font-size: 2.25rem; font-weight: 950; letter-spacing: -.05em; color: var(--pink); }
.bar { width: 100%; height: 11px; background: #edf1f5; border-radius: 999px; overflow: hidden; margin: 19px 0 10px; }
#bar-fill, #candidate-bar-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--turquoise)); border-radius: inherit; transition: width .32s ease; }

.candidate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.candidate-progress-grid { margin-top: 24px; }
.candidate-card { border: 1px solid var(--line); background: white; border-radius: 20px; overflow: hidden; min-width: 0; box-shadow: 0 8px 22px rgba(18,43,89,.045); }
.candidate-image-wrap { position: relative; aspect-ratio: 1; background: #f5f7fb; overflow: hidden; }
.candidate-image-wrap img, .candidate-option-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.candidate-letter { position: absolute; left: 10px; bottom: 10px; background: rgba(255,255,255,.94); color: var(--navy); border: 1px solid rgba(18,43,89,.1); border-radius: 999px; padding: 6px 10px; font-size: .72rem; font-weight: 950; }
.ready-check, .choice-check, .genre-check { position: absolute; display: grid; place-items: center; background: var(--turquoise); color: white; font-weight: 950; }
.ready-check { top: 10px; right: 10px; width: 29px; height: 29px; border-radius: 50%; }
.candidate-meta { padding: 11px 13px 13px; color: var(--muted); font-size: .8rem; }
.skeleton { width: 100%; height: 100%; background: linear-gradient(100deg, #edf1f6 20%, #fbfcfd 40%, #edf1f6 60%); background-size: 220% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.selection-layout, .genre-layout { display: grid; grid-template-columns: 220px 1fr; gap: 25px; align-items: start; }
.source-panel, .chosen-person-panel { position: sticky; top: 104px; padding: 13px; background: linear-gradient(145deg, #f7f9fc, #fff); border: 1px solid var(--line); border-radius: 19px; }
.source-panel img, .chosen-person-panel img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border-radius: 14px; margin: 9px 0 11px; background: white; }
.chosen-person-panel strong { display: block; font-size: .95rem; margin-bottom: 2px; }
.candidate-option { display: block; width: 100%; min-height: 0; padding: 0; background: white; color: var(--ink); border: 2px solid transparent; border-radius: 20px; overflow: hidden; text-align: left; box-shadow: inset 0 0 0 1px var(--line), 0 7px 18px rgba(18,43,89,.04); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; cursor: pointer; }
.candidate-option:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #cfd8e6, 0 14px 28px rgba(18,43,89,.09); }
.candidate-option.is-selected { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(232,88,152,.11), 0 15px 30px rgba(18,43,89,.08); }
.candidate-option-image { display: block; position: relative; aspect-ratio: 1; background: #f4f6fa; }
.choice-check { opacity: 0; top: 11px; right: 11px; width: 34px; height: 34px; border-radius: 50%; transition: opacity .14s ease; background: var(--pink); }
.candidate-option.is-selected .choice-check { opacity: 1; }
.candidate-option-label { display: block; padding: 13px 14px 15px; font-size: .88rem; font-weight: 900; }
.choice-footer, .checkout-bar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.choice-summary { color: var(--body); line-height: 1.5; }
.choice-summary strong { color: var(--navy); }

.genre-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.genre-option { min-height: 0; padding: 0; background: white; color: var(--ink); border: 2px solid transparent; border-radius: 22px; text-align: left; box-shadow: inset 0 0 0 1px var(--line), 0 8px 22px rgba(18,43,89,.045); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; overflow: hidden; cursor: pointer; }
.genre-option:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #ccd7e4, 0 15px 32px rgba(18,43,89,.09); }
.genre-option.is-selected { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(64,176,176,.12), 0 15px 32px rgba(18,43,89,.09); }
.genre-option.is-featured { box-shadow: inset 0 0 0 1px rgba(255,64,120,.24), 0 11px 26px rgba(18,43,89,.07); }
.genre-featured-badge { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; background: var(--pink); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 5px 14px rgba(18,43,89,.12); }
.book-type-option.is-unavailable { opacity: .52; cursor: not-allowed; filter: grayscale(.25); }
.genre-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #fbfbfb; position: relative; border-bottom: 1px solid #eef1f5; }
.genre-media img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 7px 18px; transition: transform .2s ease; }
.genre-option:hover .genre-media img { transform: scale(1.035); }
.genre-check { opacity: 0; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; transition: opacity .14s ease; }
.genre-option.is-selected .genre-check { opacity: 1; }
.genre-content { display: block; padding: 15px 16px 17px; }
.genre-title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.genre-title-row strong { font-size: 1.14rem; letter-spacing: -.02em; }
.genre-title-row > span { color: var(--pink); font-size: 1.2rem; }
.genre-tagline { display: block; margin-top: 4px; color: var(--body); font-size: .86rem; line-height: 1.45; }
.genre-examples { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.genre-examples span { display: inline-flex; border-radius: 999px; padding: 5px 8px; background: #f3f6fa; color: #687994; font-size: .71rem; line-height: 1.2; }

.build-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 19px; }
.summary-pill { border: 1px solid #dce4ee; background: #f7f9fc; border-radius: 999px; padding: 8px 13px; display: flex; gap: 7px; align-items: center; font-size: .8rem; }
.summary-pill span { color: var(--muted); }
.summary-pill strong { color: var(--navy); }
.approved-character { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: center; max-width: 700px; margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: #f8fafc; }
.approved-character > div:not(.arrow) { min-width: 0; }
.approved-character img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: white; margin-top: 8px; }
.arrow { font-size: 2rem; font-weight: 950; color: var(--pink); }
.world-header { margin: 32px 0 10px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(100deg, #fff, #f8fbfd); display: flex; align-items: center; justify-content: space-between; gap: 22px; overflow: hidden; }
.world-header-copy { min-width: 0; }
.world-header-image { width: 110px; height: 82px; object-fit: contain; flex: 0 0 auto; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 18px; }
figure { margin: 0; border: 1px solid var(--line); background: white; border-radius: 18px; overflow: hidden; box-shadow: 0 7px 20px rgba(18,43,89,.04); }
figure img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
figcaption { padding: 10px 12px 12px; font-size: .8rem; color: var(--body); font-weight: 700; }

.product-card-section { position: relative; overflow: hidden; }
.product-card-section::before { content: ""; position: absolute; width: 280px; height: 280px; right: -130px; top: -140px; border-radius: 50%; background: rgba(232,88,152,.08); }
.product-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; position: relative; }
.product-intro > div:first-child { max-width: 780px; }
.preview-complete-badge { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; border-radius: 999px; padding: 9px 13px; background: rgba(64,176,176,.11); color: #207c7d; font-weight: 900; font-size: .78rem; }
.preview-complete-badge span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--turquoise); color: white; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 25px; }
.product-option { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 360px; text-align: left; padding: 25px; background: white; color: var(--navy); border: 2px solid #e1e7ef; border-radius: 23px; cursor: pointer; transition: transform .16s, border-color .16s, box-shadow .16s; }
.product-option:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(18,43,89,.09); }
.product-option.is-recommended { background: linear-gradient(145deg, #fff, #fffaf3); border-color: rgba(248,184,56,.55); }
.product-option.is-selected { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(232,88,152,.11), 0 16px 34px rgba(18,43,89,.08); }
.product-radio { position: absolute; top: 22px; right: 22px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #ced7e4; padding: 4px; }
.product-radio span { width: 100%; height: 100%; display: block; border-radius: 50%; background: transparent; }
.product-option.is-selected .product-radio { border-color: var(--pink); }
.product-option.is-selected .product-radio span { background: var(--pink); }
.recommended-label { position: absolute; left: 22px; top: -12px; background: var(--yellow); color: var(--navy); border-radius: 999px; padding: 6px 11px; font-size: .69rem; font-weight: 950; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 6px 15px rgba(248,184,56,.25); }
.product-eyebrow { font-size: .71rem; text-transform: uppercase; letter-spacing: .11em; color: var(--muted); font-weight: 900; padding-right: 42px; }
.product-option > strong { font-size: 1.65rem; letter-spacing: -.035em; margin-top: 6px; }
.product-description { color: var(--body); line-height: 1.5; font-size: .91rem; margin-top: 8px; max-width: 500px; }
.product-price { display: grid; margin: 19px 0 16px; font-size: 1.8rem; letter-spacing: -.04em; font-weight: 950; color: var(--navy); }
.product-price small { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 850; }
.product-features { display: grid; gap: 8px; margin-top: auto; border-top: 1px solid var(--line); padding-top: 15px; }
.product-features span { display: flex; align-items: flex-start; gap: 8px; color: var(--body); font-size: .82rem; line-height: 1.4; }
.product-features b { color: var(--turquoise); }

.handoff-panel { display: grid; grid-template-columns: auto 1fr; gap: 18px; margin-top: 24px; padding: 22px; border-radius: 21px; background: linear-gradient(135deg, rgba(64,176,176,.09), rgba(84,182,239,.08)); border: 1px solid rgba(64,176,176,.25); }
.handoff-check { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--turquoise); color: white; font-size: 1.3rem; font-weight: 950; }
.handoff-copy h3 { margin-bottom: 6px; }
.handoff-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.dev-note { margin: 13px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.error { border-color: rgba(199,65,65,.4); background: #fffafa; color: #7d2929; }

.site-footer { text-align: center; padding: 4px 20px 45px; color: var(--muted); }
.site-footer img { width: 185px; display: block; margin: 0 auto 4px; opacity: .8; }
.site-footer p { font-size: .73rem; margin: 0; letter-spacing: .05em; }


.pricing-showcase { margin: 4px 0 34px; padding: clamp(26px, 5vw, 54px); border: 1px solid rgba(18,43,89,.09); border-radius: 32px; background: rgba(255,255,255,.78); box-shadow: 0 16px 48px rgba(18,43,89,.06); }
.pricing-heading { text-align: center; max-width: 780px; margin: 0 auto 29px; }
.pricing-heading .lead { margin-left: auto; margin-right: auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 930px; margin: 0 auto; }
.pricing-plan { position: relative; display: flex; flex-direction: column; padding: 28px; border: 2px solid #e2e7ee; border-radius: 24px; background: #fff; min-height: 430px; }
.pricing-plan.is-recommended { border-color: var(--pink); box-shadow: 0 14px 34px rgba(232,88,152,.12); background: linear-gradient(145deg, #fff, #fffafb); }
.pricing-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--pink); color: #fff; border-radius: 999px; padding: 7px 13px; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 950; box-shadow: 0 7px 17px rgba(232,88,152,.25); }
.pricing-eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: .72rem; font-weight: 900; }
.pricing-plan h3 { margin-top: 5px; font-size: 1.55rem; }
.pricing-price { display: flex; align-items: baseline; gap: 10px; margin-top: 15px; font-size: 2.35rem; font-weight: 950; letter-spacing: -.055em; color: var(--navy); }
.pricing-price small { font-size: .72rem; color: var(--muted); letter-spacing: 0; font-weight: 750; }
.pricing-plan > p { color: var(--body); line-height: 1.55; font-size: .9rem; margin: 9px 0 18px; }
.pricing-features { display: grid; gap: 9px; margin: 0 0 24px; }
.pricing-features span { display: flex; gap: 9px; align-items: flex-start; color: var(--body); font-size: .84rem; line-height: 1.45; }
.pricing-features b { color: var(--pink); }
.pricing-cta { margin-top: auto; width: 100%; }
.pricing-trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px 22px; margin-top: 22px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.pricing-trust span::first-letter { color: var(--turquoise); }

.cover-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); gap: 30px; align-items: center; margin: 25px 0 6px; padding: 24px; border-radius: 23px; background: linear-gradient(135deg, rgba(232,88,152,.07), rgba(248,184,56,.08), rgba(64,176,176,.07)); border: 1px solid rgba(18,43,89,.08); }
.cover-preview-copy { max-width: 580px; }
.book-cover-mockup { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 20px; border: 1px solid rgba(18,43,89,.14); background: #fff; box-shadow: 0 18px 38px rgba(18,43,89,.14); transform: rotate(1deg); }
.book-cover-mockup::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 7px rgba(255,255,255,.62); border-radius: inherit; }
.book-cover-mockup > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.book-cover-title { position: absolute; z-index: 2; top: 14px; left: 16px; right: 16px; text-align: center; display: grid; gap: 2px; color: var(--navy); }
.book-cover-title small { font-weight: 950; letter-spacing: .12em; text-transform: uppercase; font-size: .58rem; color: var(--pink); }
.book-cover-title strong { font-size: clamp(1rem, 2.1vw, 1.42rem); line-height: 1.04; letter-spacing: -.035em; }
.book-cover-title > span { font-size: .62rem; color: var(--body); font-weight: 750; }

.lead-card { overflow: hidden; position: relative; }
.lead-card::after { content: ""; position: absolute; right: -110px; bottom: -130px; width: 300px; height: 300px; border-radius: 50%; background: rgba(64,176,176,.08); pointer-events: none; }
.lead-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: center; gap: clamp(28px, 6vw, 72px); }
.lead-copy { max-width: 680px; }
.lead-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-top: 23px; align-items: end; }
.lead-form .field-label { min-width: 0; }
.lead-form .primary-button { white-space: nowrap; }
.lead-cover-mini { width: 100%; max-width: 270px; justify-self: end; transform: rotate(2.2deg); }

@media (max-width: 940px) {
    .hero { grid-template-columns: 1fr 340px; gap: 25px; }
    .setup-layout { grid-template-columns: 1fr; gap: 24px; }
    .setup-layout .section-copy { margin-bottom: 0; }
}

@media (max-width: 820px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 570px; }
    .pricing-plan { min-height: 0; }
    .cover-preview, .lead-layout { grid-template-columns: 1fr; }
    .book-cover-mockup, .lead-cover-mini { width: min(330px, 100%); justify-self: center; }
    .lead-cover-mini { order: -1; }
    .shell { padding-top: 30px; }
    .site-header-inner { min-height: 68px; }
    .wordmark img { width: 175px; }
    .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 18px; }
    .hero-visual { min-height: 300px; order: -1; }
    .hero-visual img { width: min(310px, 80%); }
    .steps { grid-template-columns: repeat(6, minmax(125px, 1fr)); overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
    .steps::-webkit-scrollbar { display: none; }
    .selection-layout, .genre-layout { grid-template-columns: 1fr; }
    .source-panel, .chosen-person-panel { position: static; display: grid; grid-template-columns: 125px 1fr; gap: 12px; align-items: center; }
    .source-panel img, .chosen-person-panel img { grid-row: 1 / 3; margin: 0; }
    .candidate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-intro { flex-direction: column; }
}

@media (max-width: 620px) {
    .pricing-showcase { padding: 22px 15px; border-radius: 24px; }
    .pricing-plan { padding: 22px 18px; }
    .pricing-price { font-size: 2rem; }
    .lead-form { grid-template-columns: 1fr; }
    .lead-form .primary-button { width: 100%; }
    .cover-preview { padding: 17px; }
    .site-header-inner, .shell { width: min(100% - 22px, 1180px); }
    .site-header-inner { gap: 8px; }
    .wordmark img { width: 150px; }
    .header-promise { font-size: .7rem; padding: 7px 9px; }
    .hero { padding-bottom: 34px; }
    .hero-visual { min-height: 245px; }
    .hero-visual img { width: min(260px, 85%); border-radius: 26px; }
    h1 { font-size: clamp(3rem, 16vw, 4.7rem); }
    .hero-points { display: grid; }
    .card { padding: 19px; border-radius: 22px; }
    .upload-form { padding: 14px; border-radius: 18px; }
    .upload-drop { grid-template-columns: auto 1fr; min-height: 115px; }
    .upload-action { display: none; }
    .steps { margin-bottom: 13px; }
    .step { min-height: 48px; padding: 7px 10px; border-radius: 14px; }
    .step strong { font-size: .74rem; }
    .step span { width: 28px; height: 28px; }
    .candidate-grid, .genre-grid, .grid, .product-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
    .genre-media { aspect-ratio: 1.25; }
    .genre-content { padding: 12px; }
    .genre-examples { display: none; }
    .choice-footer, .checkout-bar { align-items: stretch; flex-direction: column; }
    .choice-footer button, .checkout-bar button { width: 100%; }
    .approved-character { gap: 9px; padding: 12px; }
    .arrow { font-size: 1.2rem; }
    .world-header { padding: 14px; }
    .world-header-image { width: 78px; height: 62px; }
    .product-option { padding: 18px; min-height: 335px; }
    .product-option > strong { font-size: 1.3rem; }
    .handoff-panel { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
    .header-promise { display: none; }
    .candidate-grid, .genre-grid, .grid, .product-grid { grid-template-columns: 1fr; }
    .source-panel, .chosen-person-panel { grid-template-columns: 95px 1fr; }
    .product-option { min-height: 0; }
}

/* v8: optional extra character variants and extended world catalogue */
.candidate-more-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 15px 16px; border: 1px dashed #d6dfeb; border-radius: 16px; background: #fbfcfe; }
.candidate-more-button { flex: 0 0 auto; }
.genre-more-row { display: flex; justify-content: center; margin-top: 18px; }
.genre-more-row .secondary-button { min-width: 230px; }

@media (max-width: 720px) {
    .candidate-more-row { align-items: stretch; flex-direction: column; }
    .candidate-more-button, .genre-more-row .secondary-button { width: 100%; }
}

/* v8.1 personalization */
.personalization-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr); gap: clamp(28px, 6vw, 72px); align-items: start; }
.personalization-form { display: grid; gap: 15px; background: #f8fafc; border: 1px solid var(--line); border-radius: 22px; padding: 20px; }
.field-label span small { color: var(--muted); font-weight: 700; }
textarea { width: 100%; resize: vertical; border: 1.5px solid #dce3ed; background: white; color: var(--navy); border-radius: 14px; min-height: 122px; padding: 13px 14px; outline: none; transition: border-color .15s, box-shadow .15s; font: inherit; line-height: 1.5; }
textarea:focus { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(64,176,176,.12); }
.personalization-tip { display: grid; gap: 6px; margin-top: 22px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, rgba(232,88,152,.08), rgba(248,184,56,.10)); border: 1px solid rgba(232,88,152,.13); color: var(--body); line-height: 1.5; }
.personalization-tip strong { color: var(--pink); font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; }
.personalization-actions { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 3px; }
.personalization-actions .privacy-note { text-align: left; margin: 0; max-width: 300px; }
.personalization-actions .primary-button { flex: 0 0 auto; }
.book-cover-title { background: rgba(255,255,255,.90); border-radius: 12px; padding: 7px 9px 8px; box-shadow: 0 5px 18px rgba(18,43,89,.08); }
.book-cover-title .cover-personal-message { display: none; margin-top: 3px; color: var(--navy); font-size: .58rem; line-height: 1.25; font-weight: 900; }
.book-cover-title .cover-personal-message:not(:empty) { display: block; }

@media (max-width: 940px) {
    .personalization-layout { grid-template-columns: 1fr; }
    .personalization-layout .section-copy { margin-bottom: 0; }
}

@media (max-width: 620px) {
    .personalization-form { padding: 14px; border-radius: 18px; }
    .personalization-actions { align-items: stretch; flex-direction: column; }
    .personalization-actions .privacy-note { text-align: center; max-width: none; }
    .personalization-actions .primary-button { width: 100%; }
}

.cover-brand-logo { width: 74px !important; height: auto !important; max-height: 24px; object-fit: contain !important; justify-self: center; margin: 0 auto 1px; }

/* v8.4 production proof */
.production-card { margin-top: 24px; }
.cost-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.production-results { margin-top: 24px; padding: 22px; border: 1px solid rgba(64,176,176,.35); border-radius: 22px; display: grid; grid-template-columns: auto 1fr; gap: 16px; background: rgba(64,176,176,.06); }
.production-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px; }
.production-downloads a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 820px) { .cost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .cost-grid { grid-template-columns: 1fr; } .production-results { grid-template-columns: 1fr; } }
.cost-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; margin: 14px 0; }
.cost-breakdown span { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(18,43,89,.1); }
.cost-breakdown em { font-style: normal; color: var(--muted, #6f7890); text-align: right; }
@media (max-width: 620px) { .cost-breakdown { grid-template-columns: 1fr; } }

/* v8.5 curated examples */
.examples-showcase { margin: 4px 0 34px; padding: clamp(26px, 5vw, 48px); border-radius: 32px; background: linear-gradient(135deg, rgba(64,176,176,.07), rgba(248,184,56,.06), rgba(232,88,152,.06)); border: 1px solid rgba(18,43,89,.09); overflow: hidden; }
.examples-heading { max-width: 720px; margin: 0 auto 26px; text-align: center; }
.examples-heading .lead { margin-left: auto; margin-right: auto; }
.examples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.example-card { min-width: 0; overflow: hidden; border: 1px solid rgba(18,43,89,.10); border-radius: 24px; background: rgba(255,255,255,.94); box-shadow: 0 14px 34px rgba(18,43,89,.07); }
.example-visuals { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(70px, .55fr); gap: 7px; padding: 10px 10px 0; min-height: 250px; }
.example-cover { overflow: hidden; border-radius: 17px; background: #fff; border: 1px solid rgba(18,43,89,.08); aspect-ratio: 1; }
.example-cover img, .example-pages img { width: 100%; height: 100%; object-fit: cover; display: block; }
.example-pages { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; }
.example-pages img { min-height: 0; border-radius: 13px; border: 1px solid rgba(18,43,89,.08); background: #fff; }
.example-meta { display: grid; gap: 3px; padding: 15px 17px 18px; }
.example-meta span { color: var(--pink); text-transform: uppercase; letter-spacing: .1em; font-size: .67rem; font-weight: 950; }
.example-meta strong { color: var(--navy); font-size: 1.06rem; line-height: 1.2; letter-spacing: -.02em; }
@media (max-width: 900px) { .examples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .example-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 440px; width: 100%; justify-self: center; } }
@media (max-width: 620px) { .examples-showcase { padding: 22px 15px; border-radius: 24px; } .examples-grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 5px; scrollbar-width: none; } .examples-grid::-webkit-scrollbar { display: none; } .example-card, .example-card:last-child:nth-child(odd) { flex: 0 0 min(84vw, 350px); max-width: none; width: auto; grid-column: auto; scroll-snap-align: start; } .example-visuals { min-height: 220px; } }

/* v8.6 book type choice */
.steps { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.step:nth-child(7) { --step-accent: var(--yellow); }
.step:nth-child(8) { --step-accent: var(--turquoise); }
.book-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.book-type-option { position: relative; display: flex; flex-direction: column; align-items: stretch; min-height: 330px; text-align: left; padding: 24px; color: var(--navy); background: #fff; border: 2px solid #e0e7ef; border-radius: 23px; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.book-type-option:hover { transform: translateY(-3px); box-shadow: 0 15px 32px rgba(18,43,89,.09); }
.book-type-option.is-selected { border-color: var(--turquoise); box-shadow: 0 0 0 4px rgba(64,176,176,.12), 0 15px 32px rgba(18,43,89,.08); }
.book-type-radio { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; padding: 4px; border-radius: 50%; border: 2px solid #ced7e4; }
.book-type-radio span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.book-type-option.is-selected .book-type-radio { border-color: var(--turquoise); }
.book-type-option.is-selected .book-type-radio span { background: var(--turquoise); }
.book-type-eyebrow { padding-right: 42px; color: var(--pink); text-transform: uppercase; letter-spacing: .11em; font-size: .71rem; font-weight: 950; }
.book-type-option > strong { margin-top: 5px; font-size: 1.65rem; letter-spacing: -.035em; }
.book-type-description { margin-top: 8px; color: var(--body); font-size: .92rem; line-height: 1.5; max-width: 520px; }
.book-type-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin: 20px 0 17px; }
.book-type-demo span { min-height: 66px; display: grid; place-items: center; padding: 8px 7px; text-align: center; border-radius: 14px; background: linear-gradient(145deg, #f7f9fc, #fff); border: 1px solid var(--line); color: var(--navy); font-size: .73rem; font-weight: 900; line-height: 1.25; }
.book-type-option[data-book-type="mix"] .book-type-demo span:nth-child(1) { border-color: rgba(232,88,152,.25); background: rgba(232,88,152,.055); }
.book-type-option[data-book-type="mix"] .book-type-demo span:nth-child(2) { border-color: rgba(248,184,56,.35); background: rgba(248,184,56,.07); }
.book-type-option[data-book-type="mix"] .book-type-demo span:nth-child(3) { border-color: rgba(64,176,176,.28); background: rgba(64,176,176,.07); }
.book-type-features { display: grid; gap: 7px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); }
.book-type-features span { display: flex; gap: 8px; color: var(--body); font-size: .82rem; line-height: 1.4; }
.book-type-features b { color: var(--turquoise); }
#preview-grid figcaption { display: grid; gap: 4px; }
#preview-grid figcaption strong { color: var(--navy); font-size: .82rem; }
.preview-activity { width: fit-content; display: inline-flex; border-radius: 999px; padding: 4px 7px; background: rgba(64,176,176,.10); color: #218788; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 950; }

@media (max-width: 1080px) {
    .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .book-type-grid { grid-template-columns: 1fr; }
    .book-type-option { min-height: 0; padding: 19px; }
    .book-type-demo { margin-top: 15px; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.examples-grid.examples-count-1 { grid-template-columns: minmax(0, 430px); justify-content: center; }
.examples-grid.examples-count-2 { grid-template-columns: repeat(2, minmax(0, 430px)); justify-content: center; }
@media (max-width: 620px) {
    .examples-grid.examples-count-1, .examples-grid.examples-count-2 { display: flex; justify-content: flex-start; }
}

/* v9.0 commercial shell */
html { scroll-behavior: smooth; }
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(255,249,243,.94); }
.site-nav { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.site-nav a { color: var(--navy, #102a56); text-decoration: none; font-weight: 800; font-size: .95rem; }
.site-nav a:hover { color: var(--pink, #e85898); }
.site-nav .nav-cta { padding: .72rem 1rem; border-radius: 999px; background: #102a56; color: #fff; }
.site-nav .nav-cta:hover { color: #fff; transform: translateY(-1px); }
.anchor-target { display:block; position:relative; top:-110px; visibility:hidden; }
.resume-banner { margin: 1.25rem 0 2.25rem; padding: 1.4rem 1.6rem; border: 1px solid rgba(64,176,176,.35); border-radius: 24px; background: linear-gradient(135deg,#f1fffd,#fff8ef); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.resume-banner h2 { margin:.15rem 0 .35rem; }
.resume-banner p { margin:0; color:#657087; }
.how-it-works, .faq-section { margin: 4rem 0; }
.section-heading.compact { max-width: 760px; margin-bottom: 1.5rem; }
.how-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.how-grid article { background:#fff; border:1px solid #e7e5e1; border-radius:22px; padding:1.35rem; box-shadow:0 10px 30px rgba(16,42,86,.05); }
.how-grid article > span { width:2.2rem; height:2.2rem; display:grid; place-items:center; border-radius:50%; background:#fff0f6; color:#e85898; font-weight:900; margin-bottom:.85rem; }
.how-grid strong { display:block; color:#102a56; font-size:1.05rem; margin-bottom:.4rem; }
.how-grid p { margin:0; color:#6d7688; line-height:1.55; }
.faq-list { display:grid; gap:.75rem; max-width:900px; }
.faq-item { background:#fff; border:1px solid #e7e5e1; border-radius:18px; padding:0 1.1rem; }
.faq-item summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; padding:1rem 0; color:#102a56; font-weight:850; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary span { font-size:1.5rem; color:#e85898; transition:transform .2s ease; }
.faq-item[open] summary span { transform:rotate(45deg); }
.faq-item p { margin:0; padding:0 0 1.1rem; color:#687286; line-height:1.65; }
.site-footer { margin-top:4rem; padding:3rem max(24px, calc((100vw - 1180px)/2)); background:#102a56; color:#fff; }
.footer-inner { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2rem; }
.footer-brand img { width:min(220px,90%); filter:brightness(0) invert(1); }
.footer-brand p { opacity:.75; }
.footer-column { display:flex; flex-direction:column; gap:.65rem; }
.footer-column strong { margin-bottom:.25rem; }
.footer-column a, .footer-column span { color:rgba(255,255,255,.75); text-decoration:none; font-size:.92rem; }
.footer-column a:hover { color:#fff; }
.footer-bottom { margin-top:2rem; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.6); font-size:.85rem; }
@media (max-width: 900px) {
  .site-nav a:not(.nav-cta) { display:none; }
  .how-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .site-nav .nav-cta { padding:.65rem .85rem; font-size:.85rem; }
  .how-grid { grid-template-columns:1fr; }
  .resume-banner { align-items:flex-start; flex-direction:column; }
  .footer-inner { grid-template-columns:1fr; }
}

/* v9.1 configurator focus mode */
.configurator-shell { position: relative; }
body.is-configurator-focus .hero,
body.is-configurator-focus .pricing-showcase,
body.is-configurator-focus .examples-showcase,
body.is-configurator-focus .how-it-works,
body.is-configurator-focus .resume-banner,
body.is-configurator-focus .faq-section,
body.is-configurator-focus ~ .site-footer { display: none; }
body.is-configurator-focus .shell { padding-top: 24px; }
body.is-configurator-focus .site-nav a:not(.nav-cta) { display: none; }
body.is-configurator-focus .site-nav .nav-cta { pointer-events: none; opacity: .72; }
body.is-configurator-focus .steps { position: sticky; top: 86px; z-index: 20; padding: 10px; border-radius: 18px; background: rgba(255,249,243,.96); box-shadow: 0 8px 26px rgba(18,43,89,.06); }
body.is-configurator-focus .card:not(.hidden) { scroll-margin-top: 190px; }
@media (max-width: 700px) {
  body.is-configurator-focus .steps { top: 72px; }
  body.is-configurator-focus .card:not(.hidden) { scroll-margin-top: 160px; }
}

body.is-configurator-focus .site-footer { display:none; }

/* v9.2 cover hierarchy: logo top, customer title bottom */
.book-cover-mockup { position: relative; overflow: hidden; }
.cover-brand-logo-top { position:absolute; z-index:3; top:14px; left:50%; transform:translateX(-50%); width:72px; max-height:34px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(255,255,255,.85)); }
.book-cover-title-bottom { top:auto !important; bottom:16px; left:18px; right:18px; padding:10px 12px 9px; background:rgba(255,255,255,.92); border-radius:14px; box-shadow:0 5px 18px rgba(18,43,89,.10); }
.book-cover-title-bottom strong { font-size:clamp(1rem,2.1vw,1.42rem); line-height:1.06; }
.book-cover-title-bottom > span { font-size:.64rem; }