/* 收据自己的品牌消费画面与票据细节。保留原有页面结构。 */
.home-page .haul {padding-block:58px 38px;background:#f5f2e7}
.home-page .haul-head {letter-spacing:.13em;font-size:12px;color:#5f563c}
.home-page .haul-track {gap:26px;padding-top:22px;padding-bottom:48px;align-items:flex-start}
.home-page .haul .card {flex-basis:264px;padding:8px 8px 0;box-shadow:0 12px 24px -15px #49412670;border:1px solid #d9d2bf;border-radius:3px 3px 0 0}
.home-page .haul .card:nth-child(even) {translate:0 16px}
.home-page .haul .card:hover {transform:rotate(0deg) translateY(-5px);box-shadow:0 18px 28px -16px #49412680}
.home-page .haul .card::before {content:"";position:absolute;inset:auto;top:-8px;left:calc(50% - 26px);width:52px;height:17px;rotate:-3deg;background:#f0b90bc9;border-inline:1px dashed #bc93075c;z-index:1;opacity:1}
.home-page .card-index {padding:12px 5px 10px;font:500 10px/1.3 var(--mono);letter-spacing:.07em;color:#7b7158}
.home-page .haul .card img {aspect-ratio:3/4;border-radius:1px}
.home-page .haul .card figcaption {padding:16px 9px 20px;border-top:1px dashed #c9ba87;margin-top:10px;min-height:108px}
.home-page .haul .card .pair {font-size:15px;margin-top:7px}
.home-page .haul .card .pair b {font-size:13px;background:#fff0af;padding:1px 5px}
.home-page .haul .card .amt {font-size:10px;line-height:1.7;letter-spacing:0}
.home-page .haul .card .amt em {display:block;color:#745600;margin-top:3px;font-weight:600}
.home-page .haul .card::after {height:7px;bottom:-7px;background:linear-gradient(135deg,#fffefb 5px,transparent 0) 0 0/12px 8px repeat-x;clip-path:none}
.home-page .text-receipt-art {aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-start;gap:0;padding:20px 14px 12px;color:#322b22;background:repeating-linear-gradient(0deg,#fffefb,#fffefb 3px,#f6f3eb 4px);text-align:center;font-family:var(--mono)}
.home-page .merchant-wordmark {font:800 28px/1.2 var(--display);color:#d82929;letter-spacing:.04em;margin-bottom:5px}
.home-page .text-receipt-art>small {font-size:9px;line-height:1.6;color:#7c7059;margin-bottom:12px}
.home-page .text-receipt-art .receipt-art-row {display:flex;justify-content:space-between;gap:10px;text-align:left;font-size:11px;padding:6px 0;border-bottom:1px dashed #d2c9b7}
.home-page .text-receipt-art .receipt-art-total {border-bottom:0;font-weight:700;padding-top:10px}
.home-page .paper-seal {color:#947000;border:2px solid #ba901c;padding:4px 11px;rotate:-8deg;align-self:center;margin:9px 0;font-weight:700;font-size:18px;line-height:1.2}
.home-page .paper-seal small {display:block;font-size:8px;letter-spacing:.1em;margin-top:4px}
.home-page .text-receipt-art>small:last-child {margin:auto 0 0}

.home-page .receipt-edition {display:flex;justify-content:space-between;gap:12px;font:500 9px/1.5 var(--mono);color:#918064;letter-spacing:.04em;border-bottom:1px solid #e0d3b6;padding-bottom:12px;margin-bottom:17px}
.home-page .hero.show .pslot {height:12px;border-radius:8px;box-shadow:0 5px 10px #24231e33}
.home-page .hero.show .rcpt {clip-path:none;border-inline:1px solid #e3d6b3;background:#fffdf5;padding:24px 26px 22px;box-shadow:0 22px 35px -20px #62491370;min-height:512px}
.home-page .hero.show .rcpt::before {content:"";position:absolute;left:8px;top:65px;bottom:70px;width:5px;background:radial-gradient(circle,#dfd7c5 2px,transparent 2.5px) center top/5px 17px repeat-y;opacity:.8}
.home-page .hero.show .rcpt::after {height:7px;bottom:-7px;clip-path:none;background:linear-gradient(135deg,#fffdf5 5px,transparent 0) 0 0/12px 8px repeat-x}
.home-page .r-store {letter-spacing:.08em;font-size:19px}
.home-page .r-sub {font-size:9px;letter-spacing:.06em;line-height:1.7;margin-top:7px}
.home-page .hero.show .r-back {clear:both;background:#fff0ad;border-left:3px solid #e1ae0a}
.home-page .r-flip,.home-page .r-flip.paid {transform:none;transform-style:flat;min-height:101px;transition:none}
.home-page .r-flip .face {transition:opacity .25s ease,transform .35s ease;backface-visibility:visible}
.home-page .r-flip .face.a {opacity:1;transform:none;font-size:10px;letter-spacing:.02em}
.home-page .r-flip .face.b {transform:translateY(8px);opacity:0;text-align:left;pointer-events:none}
.home-page .r-flip.paid .face.a {opacity:0;transform:translateY(-6px);pointer-events:none}
.home-page .r-flip.paid .face.b {opacity:1;transform:none}
.home-page .r-flip .face.b b {font-size:24px}
.home-page .r-flip .face.b small {font-size:9px;letter-spacing:0}
.home-page .receipt-stamp {position:absolute;right:24px;bottom:48px;border:2px solid #bd9319;color:#997211;padding:4px 8px;font:700 12px/1.2 var(--mono);letter-spacing:.08em;rotate:-9deg;opacity:0}
.home-page .receipt-stamp small {display:block;font-size:8px;text-align:center;letter-spacing:.16em;margin-top:3px}
.home-page .rcpt.stamped .receipt-stamp {opacity:1;animation:receipt-stamp-in .35s ease-out both}
.home-page .rcpt .barcode {width:54%;height:29px;opacity:.66;margin-top:19px}
.home-page .r-thanks {font-size:9px;letter-spacing:.08em;margin-top:15px}
@media(min-width:1000px){.home-page .hero.show .show-h {font-size:clamp(52px,5.2vw,76px);max-width:none;line-height:1.15}}
.home-page .rcpt.printing {animation:receipt-enter .55s cubic-bezier(.22,1,.36,1) both}
.home-page .rcpt.printing #rLines .r-row {animation:receipt-line .35s ease both;animation-delay:calc(.25s + var(--line,0)*.16s)}
.home-page .rcpt.tear {animation:receipt-file .45s ease both}
@keyframes receipt-enter {from{transform:translateY(-16px);opacity:.3}to{transform:none;opacity:1}}
@keyframes receipt-line {from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes receipt-stamp-in {from{opacity:0;scale:1.25}to{opacity:1;scale:1}}
@keyframes receipt-file {to{transform:translate(26px,9px) rotate(4deg);opacity:0}}

.home-page #how .step {border-top:1px solid #f1c6386b;padding-top:18px}
.home-page #how .steps {gap:20px;align-items:start}
.home-page #how .step .n {font-size:52px;margin-bottom:7px;-webkit-text-stroke:0;color:#f2bd16;letter-spacing:-.06em}
.home-page #how .step h3 {font-size:23px;margin-bottom:13px}
.home-page #how .step p {min-height:94px;max-width:none;font-size:13px;line-height:1.75}
.home-page #how .frame {box-shadow:none;border-radius:3px;aspect-ratio:3/2}
.home-page #how .frame img {filter:none;transition:transform .65s ease}
.home-page #how .frame .tag {left:0;bottom:0;background:#f2be23;color:#30280c;padding:8px 14px;letter-spacing:.06em}
.home-page #how .frame:hover img {transform:scale(1.025)}

.home-page .brand-story {padding:100px 0 124px;background:#fffdf6;text-align:left;border-bottom:1px solid #e4dcc8}
.home-page .brand-layout {display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:52px;align-items:center}
.home-page .brand-copy {padding-bottom:20px}
.home-page .brand-story .show-k {color:#786440;letter-spacing:.15em;font-size:11px}
.home-page .brand-story .show-h {font-size:clamp(36px,4vw,59px);line-height:1.16;letter-spacing:-.055em;max-width:none;margin:0;word-break:keep-all}
.home-page .brand-story .show-h .em {font-style:normal;font-family:inherit;color:#866309;text-decoration:underline;text-decoration-color:#f3ce47;text-decoration-thickness:.12em;text-underline-offset:.12em}
.home-page .brand-story .show-sub {font-size:16px;line-height:1.85;max-width:none;margin:24px 0 0}
.home-page .brand-note {font:400 10px/1.8 var(--mono);color:#837559;margin-top:18px}
.home-page .brand-story .show-stage {display:block;margin:0 0 70px;isolation:isolate}
.home-page .brand-story .show-stage>img {width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 53%;border-radius:4px;background:#f7edcf;mask-image:none;-webkit-mask-image:none}
.home-page .brand-story .show-rc {width:295px;right:-12px;bottom:-90px;rotate:4deg;padding:20px;background:#fffef9;border:1px solid #dacfaf;box-shadow:0 18px 40px -22px #54442180}
.home-page .brand-story .show-rc .store {letter-spacing:.02em;font-size:13px;text-align:left}
.home-page .brand-story .show-rc .row {font:400 11px/1.7 var(--mono)}
.home-page .brand-story .show-rc .row.tot {font-weight:700;font-size:13px}
.home-page .brand-story .show-rc .back {text-align:left;background:#fff0b0;color:#614a08;padding:12px}
.home-page .brand-story .show-rc .back b {font-size:31px;line-height:1.2;display:flex;align-items:baseline;gap:10px}
.home-page .brand-story .show-rc .back b small {font-size:12px;display:inline;font-weight:500;letter-spacing:0;margin:0}
.home-page .brand-story .show-rc .back>small {font-size:8px;letter-spacing:0;line-height:1.6}
.home-page .brand-story .show-rc .back>span {font-size:8px;letter-spacing:.05em}
.home-page .brand-story .show-rc::after {background:linear-gradient(135deg,#fffef9 5px,transparent 0) 0 0/12px 8px repeat-x;clip-path:none}
.home-page .story-stamp {position:absolute;right:25px;top:70px;rotate:-14deg;border:2px solid #b9983a;color:#a58325;font:600 11px/1.2 var(--mono);padding:6px;opacity:.75}
@media(max-width:999px){.home-page .brand-layout {grid-template-columns:minmax(0,1fr);gap:32px}.home-page .brand-story {padding:64px 0 88px}.home-page .brand-story .show-h {font-size:clamp(38px,6vw,60px)}.home-page .brand-story .show-stage {max-width:680px;width:100%;margin-inline:auto}.home-page .brand-story .show-rc {position:absolute;bottom:-75px;right:18px;margin:0;rotate:3deg}.home-page #how .steps {display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;padding:2px 20px 16px;margin-inline:-20px;scrollbar-width:none}.home-page #how .steps::-webkit-scrollbar {display:none}.home-page #how .step {flex:0 0 min(270px,78vw);scroll-snap-align:start}.home-page #how .step p {min-height:112px}.home-page #how .frame {aspect-ratio:3/2}}
@media(max-width:560px){.home-page .haul .card {flex-basis:235px}.home-page .haul-track {gap:18px}.home-page .haul-head {font-size:10px;letter-spacing:.02em;gap:12px}.home-page .haul .card:nth-child(even) {translate:0 10px}.home-page .hero.show .rcpt {padding-inline:22px;min-height:506px}.home-page .receipt-edition {font-size:8px}.home-page .r-flip .face.b b {font-size:22px}.home-page .brand-story .show-h {font-size:clamp(32px,8.8vw,44px);line-height:1.25}.home-page .brand-story .show-sub {font-size:14px}.home-page .brand-story .show-stage {margin-bottom:0}.home-page .brand-story .show-stage>img {aspect-ratio:4/3}.home-page .brand-story .show-rc {position:relative;right:auto;bottom:auto;width:calc(100% - 42px);max-width:320px;margin:-25px 8px 0 auto;rotate:3deg}.home-page .brand-story {padding-bottom:62px}.home-page .text-receipt-art {padding:22px 14px 12px}.home-page .merchant-wordmark {font-size:27px}.home-page .paper-seal {margin:14px 0}.home-page .text-receipt-art>small {margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){.home-page .rcpt.printing,.home-page .rcpt.tear,.home-page .rcpt.printing #rLines .r-row,.home-page .receipt-stamp {animation:none!important}.home-page .receipt-stamp {opacity:1}.home-page .reveal {opacity:1;transform:none}}
