:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #24262b;
  background: #f7f8fa;
  font-synthesis: none;
  --orange: #bc481f;
  --muted: #656b75;
  --border: #e3e5e9;
  --surface: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-size: 14px; line-height: 1.6; }
button, input { font: inherit; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, a { color: inherit; }
button, summary { cursor: pointer; }
button { border: 0; }
a { text-decoration: none; }
button:disabled { cursor: not-allowed; opacity: .5; }
:is(button, a, summary, input):focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
[hidden] { display: none !important; }
h1, h2, h3, p, figure { margin: 0; }
h2 { font-size: 26px; font-weight: 650; line-height: 1.45; letter-spacing: -.5px; }
.section-wrap { max-width: 1280px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.eyebrow { font-size: 13px; font-weight: 550; color: var(--muted); }
.sr-only, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 50; background: #fff; padding: 12px; }

.header { position: sticky; top: 0; z-index: 10; height: 72px; border-bottom: 1px solid var(--border); background: var(--surface); }
.nav-wrap { height: 100%; max-width: 1280px; padding: 0 32px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 700; white-space: nowrap; letter-spacing: -.5px; }
.brand-mark { color: var(--orange); font-size: 36px; line-height: 1; font-weight: 400; }
.brand-ai { font-size: 15px; font-weight: 600; margin-left: 5px; }
.header nav { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--muted); }
.header nav .active { color: #24262b; font-weight: 600; }
.small-arrow { font-size: 12px; margin-left: 4px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; border-radius: 8px; padding: 12px 20px; font-size: 14px; font-weight: 600; transition: background .15s; }
.button-dark { color: #fff; background: #292c32; }
.button-dark:hover:not(:disabled) { background: #43474f; }
.button-orange { background: var(--orange); color: #fff; }
.button-orange:hover:not(:disabled) { background: #a63b17; }
.button-small { min-height: 42px; font-size: 13px; gap: 8px; padding: 10px 14px; }
.full-width { width: 100%; }
.apple-icon { display: inline-block; flex-shrink: 0; width: 15px; height: 18px; background: currentColor; clip-path: polygon(55% 18%,60% 4%,78% 0,74% 12%,59% 22%,75% 21%,90% 30%,78% 45%,80% 58%,96% 67%,84% 91%,73% 100%,53% 94%,36% 100%,21% 88%,9% 62%,9% 41%,18% 28%,35% 22%,49% 27%); }
.text-link { display: inline-flex; gap: 10px; align-items: center; padding: 0; background: transparent; color: var(--orange); font-size: 14px; font-weight: 550; }
.text-button { padding: 8px 0; background: transparent; color: var(--muted); font-size: 13px; }

.hero { position: relative; isolation: isolate; overflow: hidden; padding-top: 48px; padding-bottom: 30px; text-align: center; }
.hero-content { position: relative; z-index: 1; }
.hero-backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 90%, transparent); }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 32% 78% at center, #f7f8fa 18%, #f7f8faf2 44%, #f7f8fa00 100%); }
.hero-backdrop canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: .56; }
.hero-static-type { position: absolute; left: 50%; top: 50%; display: grid; gap: 12px; width: max-content; transform: translate(-50%, -50%) rotate(-12deg); color: #24262b; opacity: .14; font-size: clamp(32px, 5vw, 64px); font-weight: 750; line-height: 1.1; letter-spacing: -2px; white-space: nowrap; }
.hero-backdrop.is-animated .hero-static-type { visibility: hidden; }
h1 { margin-top: 12px; font-weight: 650; font-size: clamp(30px, 3.5vw, 44px); letter-spacing: -1.2px; line-height: 1.4; }
h1 span { color: var(--orange); }
.hero-tagline { margin-top: 12px; font-size: 22px; font-weight: 550; line-height: 1.5; }
.hero-copy { margin-top: 14px; font-size: 16px; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 18px; }
.benefit-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; padding-top: 12px; padding-bottom: 24px; font-size: 13px; color: var(--muted); }
.benefit-strip b { font-size: 14px; font-weight: 500; margin-right: 5px; color: #454b55; }

.pricing { padding-top: 16px; padding-bottom: 56px; }
.pricing-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.pricing-heading p { margin-top: 5px; color: var(--muted); font-size: 14px; }
.member-link { color: var(--muted); font-size: 13px; white-space: nowrap; }
.member-link span { margin-left: 7px; }
.plan-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 28px; margin-top: 30px; }
.regular-plans { min-width: 0; }
[data-option] { cursor: pointer; position: relative; scroll-margin-block: 96px 170px; transition: border-color .15s, background .15s; }
[data-option]:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 4px; }
[data-option].is-unavailable { cursor: not-allowed; background: #f0f1f3; border-color: #dce0e5; }
input[name="photo-plan"] { appearance: none; width: 20px; height: 20px; flex-shrink: 0; border: 1.5px solid #b1b7c1; background: #fff; border-radius: 50%; margin: 0; cursor: pointer; }
input[name="photo-plan"]:checked { border: 6px solid var(--orange); }
input[name="photo-plan"]:disabled { cursor: not-allowed; opacity: .5; }
input[name="photo-plan"]:focus-visible { outline: none; }
.selection-state { display: none; }

.promotion-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(250px, .9fr); grid-template-areas: "main price status" "footer price status"; gap: 12px 28px; align-items: center; padding: 24px 58px 24px 24px; border: 1px solid #efd6c9; border-radius: 12px; background: #fff8f4; }
.promotion-offer.is-selected { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.promotion-offer > input { position: absolute; top: 24px; right: 24px; }
.promotion-main { grid-area: main; min-width: 0; }
.offer-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.offer-badge { color: var(--orange); font-size: 13px; font-weight: 600; }
.promotion-phase { font-size: 12px; color: var(--muted); }
.promotion-copy { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.promotion-copy strong { font-size: 22px; font-weight: 650; line-height: 1.4; }
.promotion-copy > span { font-size: 13px; color: var(--muted); }
.promotion-pricing { grid-area: price; display: flex; flex-direction: column; align-items: flex-start; }
.promotion-price { display: flex; align-items: baseline; gap: 3px; color: var(--orange); white-space: nowrap; }
.promotion-price > span:first-child { font-size: 18px; }
.promotion-price strong { font-size: 44px; font-weight: 650; line-height: 1.2; letter-spacing: -1px; }
.promotion-price > span:last-child { font-size: 12px; color: var(--muted); margin-left: 3px; }
.promotion-status { grid-area: status; padding-left: 26px; border-left: 1px solid #eddcd2; }
.promotion-countdown { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.countdown-label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.countdown-digits { display: inline-flex; align-items: baseline; gap: 8px; }
.countdown-part { display: inline-flex; align-items: baseline; gap: 3px; }
.countdown-part b { min-width: 27px; color: #353942; font-size: 24px; font-weight: 650; line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums; }
.countdown-part small { font-size: 12px; color: var(--muted); }
.promotion-countdown.is-ended .countdown-digits { display: none; }
.promotion-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.remaining-stock { display: inline-flex; align-items: baseline; gap: 5px; }
.remaining-stock strong { color: #555d68; font-size: 12px; font-weight: 550; }
.offer-footer { grid-area: footer; color: var(--muted); font-size: 12px; }
.inventory-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 8px; }

.regular-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 22px; }
.regular-heading h3 { font-size: 17px; font-weight: 600; }
.regular-heading > span { font-size: 12px; color: var(--muted); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plan-card { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.plan-card:hover { border-color: #b0b6bf; }
.plan-card.is-selected { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); background: #fffaf7; }
.recommended-tag { position: absolute; top: -12px; left: 22px; padding: 2px 9px; border-radius: 4px; background: var(--orange); color: #fff; font-size: 12px; line-height: 1.6; }
.plan-label { position: absolute; top: 24px; right: 24px; display: flex; }
.plan-name { display: block; padding-right: 24px; font-size: 14px; font-weight: 600; }
.photo-count { display: flex; align-items: baseline; gap: 6px; margin-top: 20px; }
.photo-count strong { font-size: 44px; font-weight: 650; line-height: 1.2; letter-spacing: -1.5px; }
.photo-count > span { font-size: 14px; color: var(--muted); }
.unit-pill { color: var(--muted); font-size: 14px; margin-top: 8px; }
.price-stack { display: flex; flex-direction: column; margin-top: 24px; gap: 5px; }
.price-reference { display: flex; flex-direction: column; gap: 2px; min-height: 49px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.price-reference s { color: var(--muted); font-size: 22px; font-weight: 500; text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }
.price-reference-base { visibility: hidden; }
.plan-price { display: flex; align-items: baseline; gap: 2px; white-space: nowrap; }
.currency { font-size: 18px; }
.amount { font-size: 38px; font-weight: 650; line-height: 1.2; letter-spacing: -1px; }
.plan-price > span:last-child { color: var(--muted); font-size: 12px; margin-left: 4px; }
.is-selected .plan-price { color: var(--orange); }
.saving-line { color: var(--orange); font-size: 12px; line-height: 1.6; margin-top: 12px; min-height: 20px; }
.comparison-explainer { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 14px; }
.membership-section { scroll-margin-top: 96px; margin-top: 30px; }
.membership-section .regular-heading { margin-bottom: 14px; }
.membership-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.membership-offer:hover { border-color: #b0b6bf; }
.membership-offer.is-selected { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange); background: #fffaf7; }
.membership-intro { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.membership-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-right: 22px; font-size: 16px; font-weight: 600; }
.membership-badge { padding: 2px 6px; border-radius: 4px; background: #f0f1f4; color: var(--muted); font-size: 12px; font-weight: 400; }
.membership-quantity { font-size: 40px; font-weight: 650; letter-spacing: -1px; line-height: 1.4; margin-top: 12px; }
.membership-quantity > span { display: inline-block; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.membership-note { max-width: 440px; font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 8px; }
.membership-purchase { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 145px; padding-top: 28px; }
.membership-purchase input { position: absolute; right: 24px; top: 24px; }
.membership-purchase .price-reference { align-items: flex-end; }
.membership-price { display: flex; align-items: baseline; gap: 3px; }
.membership-price > span { font-size: 18px; }
.membership-price strong { font-size: 38px; font-weight: 650; letter-spacing: -1px; line-height: 1.3; }
.membership-offer.is-selected .membership-price { color: var(--orange); }
.membership-unit { font-size: 14px; color: var(--muted); margin-top: 5px; }
.purchase-rules { margin-top: 22px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.purchase-rules summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; list-style: none; font-size: 13px; color: #515762; }
.purchase-rules p { font-size: 13px; color: var(--muted); line-height: 1.8; padding: 0 10px 14px 0; }

.checkout-sidebar { position: sticky; top: 96px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.checkout-sidebar > h3 { font-size: 18px; font-weight: 600; margin-bottom: 20px; }
.summary-package { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.summary-package-icon { display: none; }
.summary-package > div { display: flex; flex-direction: column; gap: 4px; }
.summary-package strong { font-size: 15px; font-weight: 600; }
.summary-package div > span { font-size: 13px; color: var(--muted); }
.summary-details { margin: 18px 0 0; font-size: 13px; }
.summary-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; }
.summary-details dt { color: var(--muted); }
.summary-details dd { margin: 0; text-align: right; }
.summary-details .reference-price { color: var(--muted); font-size: 12px; padding-top: 14px; border-top: 1px solid var(--border); }
.summary-details .reference-price s { font-size: 20px; text-decoration-thickness: 1.5px; }
.summary-saving, .summary-saving dt { color: var(--orange); }
.summary-saving dd { font-weight: 600; }
.summary-total { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--border); }
.summary-total > span { font-size: 13px; }
.summary-total small { display: none; }
.summary-total strong { font-size: 32px; font-weight: 650; letter-spacing: -1px; }
.summary-balance { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.7; }
.comparison-note { color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 8px; }
.checkout-sidebar > .button { margin-top: 20px; justify-content: space-between; }
.checkout-caption { text-align: center; color: var(--muted); font-size: 12px; margin-top: 10px; }
.account-reminder { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.purchase-issue { padding: 12px; border: 1px solid #efd6c9; border-radius: 6px; font-size: 13px; color: #a23a1c; line-height: 1.7; margin-top: 14px; background: #fff5ef; }
.mobile-checkout { display: none; }

.account-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; width: calc(100% - 64px); max-width: 1216px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 24px; }
.account-panel h2 { font-size: 20px; margin-top: 4px; }
.account-panel p { margin-top: 6px; font-size: 13px; color: var(--muted); }
.balance { margin-left: auto; display: flex; flex-direction: column; gap: 3px; }
.balance span { font-size: 12px; color: var(--muted); }
.balance strong { font-size: 30px; font-weight: 650; line-height: 1.4; }
.order-history { flex-basis: 100%; padding-top: 16px; border-top: 1px solid var(--border); }
.order-history summary { font-size: 13px; }
.order-history ul { list-style: none; margin: 12px 0 0; padding: 0; max-height: 280px; overflow-y: auto; }
.order-history li { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--border); padding: 12px 0; }
.order-history li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.order-history li > div:last-child { text-align: right; }
.order-history strong { font-weight: 550; font-size: 13px; }
.order-history li span { color: var(--muted); font-size: 12px; }
.possibilities { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 20px; padding-top: 40px; padding-bottom: 44px; border-top: 1px solid var(--border); }
.possibilities h2 { font-size: 24px; margin-top: 10px; }
.possibilities p { font-size: 14px; color: var(--muted); line-height: 1.8; margin-top: 10px; }
.possibilities .text-link { margin-top: 14px; font-size: 13px; }
.possibilities .scene-note { font-size: 12px; }
.feature-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 24px; }
.feature-category { font-size: 12px; color: var(--muted); }
.feature-card h3 { font-size: 16px; font-weight: 600; margin-top: 20px; }
.feature-card p { margin-top: 10px; font-size: 13px; }
.feature-card br { display: none; }
.steps { padding-top: 40px; padding-bottom: 44px; border-top: 1px solid var(--border); }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 24px; }
.step-number { color: var(--muted); font-size: 14px; font-weight: 600; }
.steps h3 { font-weight: 600; font-size: 16px; margin-top: 8px; }
.steps p { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 8px; }
.faq { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding-top: 40px; padding-bottom: 44px; border-top: 1px solid var(--border); }
.faq > div > p { font-size: 14px; color: var(--muted); margin-top: 8px; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list details:first-child { border-top: 1px solid var(--border); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; padding: 18px 0; font-size: 14px; }
summary::-webkit-details-marker { display: none; }
.faq-list summary > span, .purchase-rules summary > span { font-size: 20px; color: var(--muted); }
.faq-list details[open] summary > span, .purchase-rules[open] summary > span { transform: rotate(45deg); }
.faq-list details p { padding: 0 20px 18px 0; font-size: 13px; color: var(--muted); line-height: 1.85; }
.closing { display: flex; align-items: center; gap: 20px; width: calc(100% - 64px); max-width: 1216px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 24px; margin-bottom: 40px; }
.closing > span { display: none; }
.closing h2 { font-size: 20px; }
.closing p { color: var(--muted); font-size: 13px; margin-top: 5px; }
.closing .button { margin-left: auto; white-space: nowrap; }
.footer { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; padding-top: 24px; padding-bottom: 28px; border-top: 1px solid var(--border); }
.footer .brand { font-size: 20px; }
.footer .brand-mark { font-size: 28px; }
.footer .brand-ai { font-size: 13px; }
.footer > span { color: var(--muted); font-size: 12px; }
.footer > span:last-child { margin-left: auto; }

.modal { position: fixed; width: min(480px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 36px 28px 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: #24262b; overflow: auto; text-align: center; box-shadow: 0 24px 80px #11182726; }
.modal::backdrop { background: #11182770; }
.close-button { position: absolute; right: 14px; top: 10px; font-size: 26px; padding: 2px 8px; color: var(--muted); background: transparent; line-height: 1.3; }
.modal-brand { color: var(--orange); font-size: 44px; margin: 0 0 16px; }
.modal .eyebrow { font-size: 12px; }
.modal h2 { font-size: 24px; margin: 12px 0 10px; }
.modal > p { color: var(--muted); font-size: 14px; line-height: 1.8; }
.modal .login-selection { margin-top: 16px; padding: 12px; border-radius: 6px; background: #f3f4f6; color: #3d434d; font-size: 13px; }
.inline-notice { padding: 12px 14px; border-radius: 6px; color: #626873; background: #f3f4f6; font-size: 13px; line-height: 1.8; text-align: left; margin: 16px 0; }
.modal .modal-caption { color: var(--muted); font-size: 12px; margin-top: 12px; }
.order-card { padding: 20px; border: 1px solid var(--border); border-radius: 10px; background: #f8f9fb; text-align: left; margin-top: 22px; }
.order-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.order-title > span { font-size: 12px; color: var(--muted); font-weight: 400; white-space: nowrap; }
.order-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 8px; }
.order-row strong { text-align: right; color: #353b45; font-weight: 550; }
.order-total { padding-top: 12px; margin-top: 16px; border-top: 1px solid var(--border); align-items: center; }
.order-total strong { font-size: 28px; color: var(--orange); }
.order-card > p { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 12px; }
.agreement { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.8; text-align: left; margin-top: 18px; color: var(--muted); cursor: pointer; }
.agreement input { flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px; accent-color: var(--orange); }
.error-message { color: #a5321d !important; font-size: 13px !important; line-height: 1.8; margin: 12px 0; }
.success-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 20px; background: #e9f4ed; color: #31734a; font-size: 28px; }
.cancel-reset { margin-top: 14px; padding: 8px 14px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30; width: max-content; max-width: calc(100vw - 32px); border-radius: 8px; padding: 12px 18px; background: #292c32; color: #fff; box-shadow: 0 6px 24px #11182720; font-size: 13px; line-height: 1.7; text-align: center; }

@media (max-width: 1199px) {
  body { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .checkout-sidebar { display: none; }
  .mobile-checkout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 20px; position: fixed; z-index: 12; bottom: 0; left: 0; right: 0; padding: 14px max(24px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 20px #11182706; }
  .mobile-checkout > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
  #mobile-selection { flex-basis: 100%; font-size: 12px; color: var(--muted); }
  #mobile-total { font-size: 28px; font-weight: 650; line-height: 1.4; letter-spacing: -.5px; }
  #mobile-reference { font-size: 11px; color: var(--muted); }
  #mobile-reference s { font-size: 16px; text-decoration-thickness: 1.5px; }
  #mobile-unit { flex-basis: 100%; color: var(--muted); font-size: 12px; }
  .mobile-checkout > .button { min-width: 164px; justify-content: space-between; }
  .mobile-checkout > p { grid-column: 1 / -1; color: var(--muted); font-size: 12px; text-align: right; }
  .possibilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .possibilities-intro { grid-column: 1 / -1; }
  .possibilities h2 br, .possibilities-intro > p br { display: none; }
  .toast { bottom: calc(186px + env(safe-area-inset-bottom)); }
}

@media (max-width: 760px) {
  .section-wrap { padding-left: 20px; padding-right: 20px; }
  .header { height: 64px; }
  .nav-wrap { padding: 0 20px; gap: 12px; }
  .header nav { display: none; }
  .brand { font-size: 22px; }
  .brand-mark { font-size: 32px; }
  .brand-ai { font-size: 14px; }
  .hero { padding-top: 32px; padding-bottom: 22px; }
  .hero-backdrop::after { background: radial-gradient(ellipse 70% 78% at center, #f7f8fa 18%, #f7f8faf2 44%, #f7f8fa00 100%); }
  .hero-backdrop canvas { opacity: .42; }
  h1 { font-size: 32px; letter-spacing: -.8px; }
  .hero-tagline { font-size: 20px; }
  .hero-copy { font-size: 14px; }
  .benefit-strip { justify-content: flex-start; gap: 8px 16px; font-size: 12px; padding-bottom: 20px; }
  .benefit-strip span:first-child { flex-basis: 100%; }
  .pricing { padding-top: 12px; padding-bottom: 36px; }
  h2 { font-size: 24px; }
  .pricing-heading { align-items: flex-start; gap: 10px; }
  .pricing-heading p { font-size: 13px; }
  .member-link { margin-top: 5px; font-size: 12px; }
  .promotion-offer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main price" "status status" "footer footer"; gap: 16px; padding: 20px; }
  .promotion-offer > input { top: 20px; right: 20px; }
  .promotion-copy strong { font-size: 18px; }
  .promotion-copy > span { font-size: 12px; }
  .offer-heading { gap: 4px 10px; }
  .offer-badge { font-size: 12px; }
  .promotion-phase { font-size: 11px; }
  .promotion-pricing { align-items: flex-end; padding-right: 28px; max-width: 150px; }
  .promotion-pricing .price-reference { align-items: flex-end; }
  .promotion-price { flex-wrap: wrap; justify-content: flex-end; }
  .promotion-price strong { font-size: 38px; }
  .promotion-price > span:last-child { flex-basis: 100%; text-align: right; margin: 0; }
  .promotion-status { border-left: 0; border-top: 1px solid #eddcd2; padding: 14px 0 0; }
  .promotion-countdown { gap: 6px; }
  .countdown-digits { gap: 6px; }
  .countdown-part { gap: 2px; }
  .countdown-part b { font-size: 22px; min-width: 25px; }
  .countdown-part small { font-size: 11px; }
  .regular-heading { margin-bottom: 20px; }
  .regular-heading > span { font-size: 12px; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .plan-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name radio" "quantity price" "unit price" "saving saving"; gap: 6px 16px; padding: 22px; }
  .plan-label { position: static; grid-area: radio; justify-self: end; }
  .plan-name { grid-area: name; padding-right: 0; font-size: 14px; }
  .photo-count { grid-area: quantity; margin-top: 10px; }
  .photo-count strong { font-size: 40px; }
  .unit-pill { grid-area: unit; margin-top: 0; font-size: 13px; }
  .price-stack { grid-area: price; align-self: center; align-items: flex-end; margin-top: 8px; gap: 3px; }
  .price-stack .price-reference { align-items: flex-end; }
  .amount { font-size: 34px; }
  .saving-line { grid-area: saving; margin-top: 8px; font-size: 12px; }
  .membership-section { margin-top: 26px; }
  .membership-offer { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px; }
  .membership-title { padding-right: 28px; }
  .membership-quantity { font-size: 36px; }
  .membership-quantity > span { font-size: 12px; }
  .membership-note { font-size: 12px; }
  .membership-purchase { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3px 12px; border-top: 1px solid var(--border); padding-top: 16px; min-width: 0; }
  .membership-purchase input { top: 22px; right: 22px; }
  .membership-purchase .price-reference { grid-column: 2; grid-row: 1; }
  .membership-price { grid-column: 2; grid-row: 2; justify-content: flex-end; }
  .membership-price strong { font-size: 34px; }
  .membership-unit { grid-column: 1; grid-row: 2; align-self: center; font-size: 13px; margin: 0; }
  .mobile-checkout { gap: 6px 12px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
  .mobile-checkout > .button { min-width: 136px; padding: 12px 14px; font-size: 13px; }
  .account-panel, .closing { width: calc(100% - 40px); padding: 20px; }
  .account-panel { gap: 16px; }
  .account-panel h2 { font-size: 18px; }
  .balance { margin-left: 0; }
  .account-panel > .text-button { margin-left: auto; }
  .order-history li { gap: 12px; }
  .order-history li span { font-size: 11px; }
  .possibilities { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 30px; padding-bottom: 32px; }
  .possibilities-intro { margin-bottom: 8px; }
  .feature-card { padding: 20px; }
  .feature-card h3 { margin-top: 8px; }
  .steps { padding-top: 30px; padding-bottom: 32px; }
  .steps-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .steps p br { display: none; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 30px; padding-bottom: 32px; }
  .faq-list summary { gap: 12px; font-size: 14px; }
  .faq-list details p { padding-right: 0; }
  .closing { flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
  .closing h2 { font-size: 18px; }
  .closing .button { width: 100%; }
  .footer { gap: 12px 20px; }
  .footer > span:last-child { width: 100%; margin-left: 0; }
  .modal { padding: 34px 20px 24px; }
  .modal h2 { font-size: 22px; }
  .order-card { padding: 16px; }
  .order-row { font-size: 12px; gap: 10px; }
}

@media (max-width: 400px) {
  .nav-wrap { gap: 8px; }
  .brand { font-size: 20px; }
  .brand-mark { font-size: 28px; }
  .brand-ai { font-size: 13px; margin-left: 4px; }
  .button-small { font-size: 12px; padding: 10px; }
  h1 { font-size: 29px; }
  .promotion-offer { gap: 14px 10px; padding: 16px; }
  .promotion-offer > input { top: 16px; right: 16px; }
  .promotion-copy strong { font-size: 17px; }
  .promotion-pricing { max-width: 128px; }
  .promotion-price strong { font-size: 34px; }
  .countdown-part b { font-size: 21px; }
  .plan-card { padding: 20px; gap: 6px 12px; }
  .photo-count strong { font-size: 36px; }
  .amount, .membership-price strong { font-size: 32px; }
  .mobile-checkout > .button { min-width: 120px; padding: 12px; font-size: 12px; }
  #mobile-total { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-backdrop canvas { display: none; }
  .hero-backdrop.is-animated .hero-static-type { visibility: visible; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}