/* Result page, book mockup, offer, checkout, after-order pages. Loaded after site.css on those pages only. */

/* ---------- result ---------- */
.res-head { text-align: center; padding: 10px 0 6px; }
.res-head h1 { font-size: 36px; }
.res-head .data { color: var(--muted); font-size: 16px; }
.yearcard { margin: 18px 0 8px; padding: 22px 20px; border-radius: 20px; border: 1px solid var(--line2); background: radial-gradient(120% 90% at 0% 0%, rgba(226,196,127,.16), transparent 60%), var(--card); }
.yearcard .big { display: flex; align-items: baseline; gap: 12px; }
.yearcard .num { font: 600 72px/1 var(--serif); color: var(--gold); }
.yearcard .lbl { font-size: 19px; color: var(--cream); line-height: 1.3; }
.yearcard ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.yearcard li { display: flex; gap: 10px; font-size: 18px; }
.yearcard li::before { content: '✦'; color: var(--gold); font-size: 14px; margin-top: 4px; }
.yearcard .lockline { margin-top: 14px; font-size: 16px; color: var(--dim); }
.wheel { width: 100%; max-width: 440px; margin: 8px auto 6px; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(226,196,127,.35); }
.wheel svg { width: 100%; height: auto; display: block; }
.note { font-size: 16px; color: var(--dim); text-align: center; }
.b3 { display: grid; gap: 14px; margin-top: 10px; }
.b3card { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.b3card .hd { display: flex; gap: 14px; align-items: center; padding: 14px; }
.b3card .hd img { width: 74px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); flex: none; }
.b3card .lbl { font-size: 14px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold); }
.b3card .sg { font: 600 30px/1.1 var(--serif); color: #FFF6E2; }
.b3card .wh { font-size: 16px; color: var(--muted); }
.b3card .tx { padding: 0 16px 16px; font-size: 18px; }
.b3card .tx p:last-child { margin: 0; }
.b3card.unknown .tx { color: var(--muted); }
.locks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.locks li { display: flex; gap: 14px; align-items: flex-start; padding: 15px 16px; border-radius: 14px; background: rgba(18,26,56,.75); border: 1px solid rgba(226,196,127,.16); font-size: 18px; }
.locks .lk { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(226,196,127,.14); color: var(--gold); font-size: 16px; }
.locks .ch { display: block; margin-top: 4px; font-size: 14px; color: var(--gold2); letter-spacing: .4px; }

/* ---------- hybrid mockup: the personal book is a PDF (phone screen), the planner is the only physical book ---------- */
.duo { position: relative; width: 340px; max-width: 100%; height: 312px; margin: 10px auto 6px; }
.duo .pl { position: absolute; right: 10px; top: 4px; width: 182px; aspect-ratio: 148 / 210; perspective: 1100px; }
.duo .bk { position: absolute; inset: 0; transform: rotateY(-20deg) rotateX(3deg); transform-style: preserve-3d; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: rotateY(-15deg) rotateX(2deg) translateY(-5px); } }
.duo .bk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px 6px 6px 2px; background: #1A2350; box-shadow: 18px 24px 44px -12px rgba(0,0,0,.8), inset 4px 0 8px -4px rgba(0,0,0,.6); }
.duo .bk .edge { position: absolute; top: 3px; bottom: 3px; left: 100%; width: 16px; transform-origin: left center; transform: rotateY(80deg); background: repeating-linear-gradient(90deg, #EFE6D0 0 1px, #D3C7AA 1px 2px); }
.device { position: absolute; left: 8px; bottom: 2px; z-index: 2; width: 146px; aspect-ratio: 9 / 18.6; padding: 6px; border-radius: 26px; background: linear-gradient(150deg, #3A4060, #0A0D19 60%); box-shadow: 0 26px 50px -14px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.14); transform: rotate(-5deg); }
.device .screen { position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden; background: #0E1638 center 62% / cover no-repeat; }
.device .screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,12,30,.92) 0%, rgba(8,12,30,.35) 40%, transparent 58%, rgba(8,12,30,.55) 100%); }
.device .notch { position: absolute; z-index: 3; top: 7px; left: 50%; width: 38px; height: 9px; border-radius: 6px; background: #04060D; transform: translateX(-50%); }
.cover-txt { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: 26px 8px 0; text-align: center; }
.cover-txt .t1 { font: 600 7.5px/1.2 var(--sans); letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold); }
.cover-txt .nm { font: 600 25px/1.05 var(--serif); color: #F7E7BF; margin: 6px 0 4px; text-shadow: 0 2px 12px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.cover-txt .sg { font: italic 500 10px/1.3 var(--serif); color: #E8D4A0; }
.cover-txt .dt { font: 500 7.5px/1.3 var(--sans); letter-spacing: .4px; color: rgba(246,237,215,.75); margin-top: 4px; }
.cover-brand { position: absolute; z-index: 2; bottom: 10px; left: 0; right: 0; text-align: center; font: 600 6.5px var(--sans); letter-spacing: 2px; text-transform: uppercase; color: rgba(232,212,160,.85); }
.duo-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.duo-tags span { font-size: 14px; line-height: 1.3; padding: 5px 12px; border-radius: 20px; border: 1px solid var(--line); background: rgba(18,26,56,.75); color: var(--muted); }
.duo-tags .t-pdf::before { content: '📱 '; }
.duo-tags .t-print::before { content: '📦 '; }
.spreads { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 16px; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.pg { scroll-snap-align: center; padding: 9px; border-radius: 22px; background: linear-gradient(150deg, #3A4060, #0A0D19 60%); box-shadow: 0 18px 40px -16px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(255,255,255,.12); }
.paper { height: 100%; min-height: 360px; border-radius: 12px; padding: 26px 22px; background: linear-gradient(180deg, #FBF5E6, #F2E8D1); color: #2B2520; font: 400 15.5px/1.55 Georgia, 'Times New Roman', serif; position: relative; overflow: hidden; }
.paper h4 { font: 600 24px/1.15 var(--serif); margin: 0 0 4px; color: #1F1A15; }
.paper .ch { font: 600 11px var(--sans); letter-spacing: 2px; text-transform: uppercase; color: #8A6A2B; margin-bottom: 10px; }
.paper ol { padding-left: 20px; margin: 10px 0 0; }
.paper li { margin: 0 0 7px; }
.paper .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, rgba(242,232,209,0), #F2E8D1 78%); }
.paper .blur { filter: blur(4px); user-select: none; }
.paper .num { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 12px; color: #8C8170; z-index: 2; }
.caption { text-align: center; font-size: 15px; color: var(--dim); }

/* ---------- offer ---------- */
.offer { margin-top: 18px; padding: 24px 18px; border-radius: 22px; border: 1.5px solid var(--line2); background: linear-gradient(180deg, rgba(226,196,127,.1), rgba(226,196,127,0) 40%), var(--card); }
.offer h2 { text-align: center; }
.stack { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 12px; }
.stack li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.stack li::before { content: '✓'; width: 28px; height: 28px; border-radius: 50%; background: rgba(143,209,166,.15); color: var(--ok); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.stack .nm { font-weight: 600; font-size: 18px; }
.stack .ds { color: var(--muted); font-size: 16px; }
.stack .vl { font-size: 14px; color: var(--dim); }
.stack .tg { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font: 600 12px/1.5 var(--sans); letter-spacing: .4px; color: var(--gold); border: 1px solid var(--line2); white-space: nowrap; }
.stack .tg.print { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.stack li.has-thumb { grid-template-columns: 30px 1fr 58px; }
.stack .thumb { width: 58px; aspect-ratio: 148 / 210; object-fit: cover; border-radius: 2px 4px 4px 2px; box-shadow: 4px 8px 16px -6px rgba(0,0,0,.8); background: #1A2350; }
.totals { border-top: 1px dashed var(--line2); padding-top: 14px; margin-top: 4px; }
.totals .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.totals .worth { color: var(--muted); font-size: 17px; }
.totals .worth b { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.totals .pay { font-size: 20px; margin-top: 6px; }
.totals .big { font: 600 46px/1 var(--serif); color: var(--gold); }
.totals s { color: var(--dim); margin-right: 8px; font-size: 20px; }
.timerline { text-align: center; margin: 14px 0 0; font-size: 17px; color: var(--gold); }
.timerline b { font-variant-numeric: tabular-nums; }
.under { text-align: center; font-size: 15px; color: var(--dim); margin-top: 10px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin-top: 14px; font-size: 15px; color: var(--muted); }
.trust span::before { content: '✦ '; color: var(--gold2); }
.guarantee { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px; border-radius: 16px; background: rgba(143,209,166,.07); border: 1px solid rgba(143,209,166,.25); font-size: 16px; }
.guarantee .seal { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ok); display: grid; place-items: center; color: var(--ok); font-size: 22px; }
.personal { font-size: 15px; color: var(--dim); margin-top: 14px; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.faq summary::after { content: '+'; color: var(--gold); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq p { margin: 10px 0 0; color: var(--muted); }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(6,9,23,0), rgba(6,9,23,.96) 30%); transform: translateY(110%); transition: transform .3s ease; }
.sticky-cta.on { transform: none; }
.sticky-cta .btn { max-width: 540px; margin: 0 auto; }

/* ---------- checkout & after-order ---------- */
.timerbar { position: sticky; top: 0; z-index: 10; text-align: center; padding: 11px 14px; font-size: 16px; background: #2A2208; color: #F6DDA0; border-bottom: 1px solid var(--line2); }
.timerbar b { font-variant-numeric: tabular-nums; }
.timerbar.expired { background: #22182A; color: var(--muted); }
.co h1 { font-size: 34px; margin-top: 14px; }
.sec { margin-top: 26px; }
.sec > h2 { font: 600 22px/1.2 var(--sans); color: var(--cream); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sec > h2 .n { width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--gold-ink); display: grid; place-items: center; font-size: 16px; flex: none; }
.prod { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.prod img { width: 62px; height: 85px; object-fit: cover; border-radius: 4px; flex: none; }
.prod .prodpic { position: relative; width: 76px; height: 88px; flex: none; }
.prod .prodpic .pi { position: absolute; right: 0; top: 0; width: 60px; height: 85px; border-radius: 2px 4px 4px 2px; box-shadow: 4px 8px 16px -6px rgba(0,0,0,.8); background: #1A2350; }
.prod .prodpic .mini { position: absolute; left: 0; bottom: 0; width: 33px; height: 64px; padding: 3px; border-radius: 9px; background: #0A0D19; box-shadow: 0 6px 14px -4px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.16); }
.prod .prodpic .mini img { width: 100%; height: 100%; border-radius: 6px; }
.prod .s2 { font-size: 14px; color: var(--dim); margin-top: 2px; }
.prod .t { font-weight: 600; }
.prod .s { font-size: 15px; color: var(--muted); }
.prod .p { margin-left: auto; text-align: right; font-weight: 600; font-size: 19px; color: var(--gold); white-space: nowrap; }
.prod .p s { display: block; color: var(--dim); font-size: 15px; font-weight: 400; }
.confirm { padding: 18px 16px; border-radius: 16px; border: 1.5px solid var(--gold); background: rgba(226,196,127,.07); }
.confirm h2 { font-size: 26px; margin-bottom: 12px; }
.confirm dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 6px; font-size: 18px; }
.confirm dt { color: var(--muted); }
.confirm dd { margin: 0; font-weight: 600; }
.confirm .namefld input { font: 600 24px var(--serif); }
.confirm .bad { color: var(--bad); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fld { margin-bottom: 14px; }
.fld.bad input, .fld.bad select { border-color: var(--bad); }
.fld .err { margin-top: 6px; }
.fld .hint { font-size: 14px; line-height: 1.4; color: var(--dim); margin-top: 6px; }
.phone { display: flex; gap: 8px; }
.phone .cc { display: grid; place-items: center; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--line); color: var(--muted); font-size: 17px; flex: none; }
.dopts { display: grid; gap: 10px; }
.dopt { border: 1.5px solid var(--line); border-radius: 14px; background: rgba(18,26,56,.7); }
.dopt .row { display: flex; align-items: center; gap: 12px; padding: 16px 14px; cursor: pointer; font-size: 18px; }
.dopt input[type=radio] { flex: none; } /* drawn by assets/js/picker.js (one check/radio look) */
.dopt .fee { margin-left: auto; color: var(--gold); font-weight: 600; white-space: nowrap; }
.dopt .fee s { color: var(--dim); font-weight: 400; margin-right: 6px; }
.dopt .more { display: none; padding: 0 14px 14px; }
.dopt.on { border-color: var(--gold); }
.dopt.on .more { display: block; }
.dopt .eta { display: block; font-size: 15px; color: var(--dim); }
.bump { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 16px 14px; margin-bottom: 12px; border-radius: 16px; border: 2px dashed var(--line2); background: rgba(226,196,127,.05); cursor: pointer; }
.bump.on { border-style: solid; border-color: var(--gold); background: rgba(226,196,127,.12); }
/* .bump input: drawn by assets/js/picker.js (one check/radio look) */
.bump .tag { font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); }
.bump .t { font-weight: 600; font-size: 18px; margin: 2px 0 4px; }
.bump .d { font-size: 16px; color: var(--muted); }
.bump .pr { margin-top: 8px; font-weight: 600; color: var(--gold); }
.bump .pr s { color: var(--dim); font-weight: 400; margin-right: 8px; }
.bump .af { font-size: 14px; color: var(--dim); margin-top: 6px; }
.free { font-size: 16px; color: var(--muted); margin-top: 4px; }
.free.done { color: var(--ok); }
.free .bar { height: 6px; border-radius: 6px; background: rgba(246,237,215,.12); margin-top: 8px; overflow: hidden; }
.free .bar i { display: block; height: 100%; background: var(--gold); }
.summary { margin: 22px 0 14px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.summary .row { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; padding: 3px 0; }
.summary .row span:first-child { color: var(--muted); }
.summary .total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-weight: 600; font-size: 20px; }
.summary .total span:first-child { color: var(--cream); }
.formerr { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: rgba(255,156,143,.1); color: var(--bad); font-size: 16px; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.paysel .dopt .row { flex-wrap: wrap; }
.paysel .eta { width: 100%; padding-left: 34px; }
.cbadges { display: inline-flex; gap: 4px; margin-left: auto; }
.cbadges i { font: 700 10px var(--sans); font-style: normal; padding: 3px 5px; border-radius: 4px; background: #F6EDD7; color: #1A1F3C; }
#pel, #xpay { margin-top: 6px; }
.cload { color: var(--dim); font-size: 15px; padding: 10px 0; }
.or { text-align: center; color: var(--dim); font-size: 14px; margin: 12px 0; }
.cnote { font-size: 14px; color: var(--dim); margin-top: 10px; }
.okbadge { display: inline-block; margin-top: 18px; padding: 8px 14px; border-radius: 30px; background: rgba(143,209,166,.12); color: var(--ok); font-weight: 600; font-size: 16px; }
.pcard { padding: 18px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); margin-top: 18px; }
.pcard h2 { font-size: 26px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg button { min-height: 56px; border-radius: 14px; border: 1.5px solid var(--line2); background: #0E1533; color: var(--cream); font: 500 18px var(--sans); cursor: pointer; }
.seg button.on { border-color: var(--gold); background: rgba(226,196,127,.14); }
.steps-next { padding-left: 22px; }
.steps-next li { margin-bottom: 12px; }
.xsell { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin: 16px 0; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line2); }
.cal { aspect-ratio: 3/4; border-radius: 8px; background: linear-gradient(180deg, #FBF5E6, #EFE4CA); color: #2B2520; padding: 10px 8px; font: 600 11px var(--sans); text-align: center; box-shadow: 0 12px 30px -10px rgba(0,0,0,.7); }
.cal .y { font: 600 26px/1 var(--serif); color: #8A6A2B; margin: 4px 0; }
.cal .g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 8px; }
.cal .g i { height: 9px; border-radius: 2px; background: #E2D6B8; }
.cal .g i.d { background: #B8862F; }
.legal h2 { font-size: 26px; margin-top: 28px; }
.legal p, .legal li { color: var(--muted); }
.bump-gift .tag { font: 600 23px/1.15 var(--serif); letter-spacing: 0; text-transform: none; color: #FFF6E2; margin-bottom: 2px; }
.bump-gift { border-color: var(--gold2); }
.databar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 12px; margin: 4px auto 0; padding: 10px 14px; border-radius: 30px; border: 1px solid var(--line); background: rgba(18,26,56,.7); font-size: 16px; color: var(--muted); width: fit-content; max-width: 100%; }
.databar a { font-weight: 600; }
.rare { text-align: center; font-size: 17px; color: var(--muted); margin: 14px 0 0; }
.ship { font-size: 15px; color: var(--muted); text-align: center; margin: 12px 0 0; line-height: 1.5; }
.ship::before { content: '🚚 '; }
.summary .row span:last-child { white-space: nowrap; }
/* .fld/.pcard check boxes and .pp-ab: drawn by assets/js/picker.js (one check/radio look) */