:root {
  --bg: #fffdf9;
  --ink: #151515;
  --muted: #65635f;
  --line: rgba(21, 21, 21, 0.1);
  --orange: #ff8a34;
  --orange-soft: #fff0df;
  --green: #62a85b;
  --green-soft: #eaf5e5;
  --purple: #8b69d8;
  --purple-soft: #f0eafd;
  --blue: #3b8fe9;
  --blue-soft: #e7f2ff;
  --radius-card: 32px;
  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --duration-slow: 480ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);

  /* Entrance choreography, kept as tokens so the whole reveal can be retimed from
     one place.
     The long stagger (--reveal-step) is what creates the visible layering: each
     line of text arrives clearly after the previous one. The trailing ease-out and
     the slightly longer travel give the drift, so motion keeps settling rather than
     snapping to a stop. */
  --reveal-dur: 900ms;
  --reveal-step: 95ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-offset: 34px;
  --reveal-offset-child: 24px;
  --reveal-lag: 90ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 1000; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 999px; transition: top var(--duration-normal) var(--ease-standard); }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 72px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  background: rgba(255, 253, 249, 0.82);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal), background var(--duration-normal);
}
.site-header.scrolled { border-color: var(--line); background: rgba(255, 253, 249, 0.94); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 760; letter-spacing: -0.02em; width: max-content; }
.brand-mark { width: 32px; aspect-ratio: 1; border-radius: 10px; background: var(--ink); display: grid; place-items: center; box-shadow: 0 8px 22px rgba(62, 45, 23, 0.16); transform: rotate(-5deg); }
.brand-mark i { display: block; width: 15px; height: 18px; background: var(--orange); border-radius: 70% 40% 62% 42%; transform: rotate(15deg); }
.button:active, .product-link:active { transform: scale(0.98); }

.eyebrow, .product-number { margin: 0 0 24px; color: var(--muted); font-size: 11px; letter-spacing: 0.2em; font-weight: 750; }
h1, h2, h3, p { margin-top: 0; }
.things-title em { color: var(--orange); font-style: normal; }
.button { min-height: 52px; padding: 0 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; transition: transform var(--duration-fast), background var(--duration-normal), color var(--duration-normal); }
.button.primary { background: var(--ink); color: #fff; }
.button.primary:hover { background: var(--orange); }

.product { min-height: 100dvh; padding: clamp(88px, 7vw, 112px) clamp(24px, 6vw, 96px) clamp(36px, 4vw, 64px); position: relative; }
.product-standard { display: grid; grid-template-columns: minmax(320px, 0.8fr) minmax(460px, 1.2fr); align-items: center; gap: clamp(36px, 6vw, 96px); }
.product-copy { max-width: 570px; }
.app-signature { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 22px; box-shadow: 0 16px 36px rgba(52, 39, 27, 0.12); }
.app-icon { object-fit: cover; }
.app-signature.orange { background: var(--orange); }
.app-signature.green { background: var(--green); }
.app-signature.purple { background: var(--purple); }
.app-signature.blue { background: var(--blue); }
.ledger-glyph { width: 32px; height: 30px; border-radius: 5px 12px 7px 7px; background: #fff; position: relative; transform: rotate(-5deg); }
.ledger-glyph::after { content: ""; position: absolute; width: 26px; height: 7px; border-radius: 4px; background: #ffd4b1; left: 3px; top: 8px; box-shadow: 0 9px 0 #ffe8d4; }
.check-glyph { width: 33px; height: 33px; border: 4px solid white; border-radius: 10px; position: relative; }
.check-glyph::after { content: ""; position: absolute; width: 15px; height: 8px; border-left: 4px solid white; border-bottom: 4px solid white; transform: rotate(-45deg); left: 7px; top: 7px; }
.box-glyph { width: 34px; height: 26px; background: white; border-radius: 4px 4px 9px 9px; position: relative; margin-top: 8px; }
.box-glyph::before { content: ""; position: absolute; width: 38px; height: 8px; left: -2px; top: -7px; border-radius: 5px; background: #e9defe; }
.receipt-glyph { width: 31px; height: 38px; background: white; clip-path: polygon(0 0,100% 0,100% 100%,84% 88%,66% 100%,50% 88%,32% 100%,16% 88%,0 100%); position: relative; }
.receipt-glyph::after { content: ""; position: absolute; left: 7px; top: 10px; width: 18px; height: 3px; background: #abd4ff; box-shadow: 0 7px 0 #abd4ff, 0 14px 0 #abd4ff; }
.product h1, .product h2, .product h3 { margin-bottom: 16px; font-size: clamp(52px, 6vw, 94px); line-height: 0.98; letter-spacing: -0.04em; }
.product h3 { font-size: clamp(48px, 5vw, 78px); }
.product-tagline { margin-bottom: 20px; font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.03em; }
.product-desc { max-width: 500px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.feature-line { padding: 0; margin: 24px 0 28px; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.feature-line li { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 650; }
.product-link { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; font-weight: 750; border-bottom: 1px solid var(--ink); transition: color var(--duration-normal), transform var(--duration-fast); }
.product-link:hover { color: var(--orange); }
.store-button { min-height: 50px; padding: 0 20px; display: inline-flex; align-items: center; gap: 12px; border-radius: 14px; background: var(--ink); color: white; font-size: 14px; font-weight: 740; box-shadow: 0 12px 28px rgba(21,21,21,.13); transition: background var(--duration-normal), transform var(--duration-fast); }
.store-button:hover { background: var(--orange); }
.store-button:active { transform: scale(.98); }

.stage { height: clamp(460px, 72dvh, 620px); min-height: 0; border-radius: var(--radius-card); position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
/* Showcase stages carry no background of their own: the device mockups sit
   directly on the page background. */
.stage-orange, .stage-green, .stage-purple { background: none; }
.store-stage { position: relative; overflow: visible; isolation: isolate; }
.store-stage::before { content: ""; position: absolute; width: 68%; aspect-ratio: 1; border: 1px solid rgba(21,21,21,.08); border-radius: 50%; }
.store-stage::after { content: ""; position: absolute; width: 46%; aspect-ratio: 1; border: 1px solid rgba(21,21,21,.08); border-radius: 50%; }
.ledger-device-stage::before { width: 76%; border-color: rgba(255, 138, 52, .18); }
.ledger-device-stage::after { width: 52%; border-color: rgba(255, 138, 52, .18); }
/* The right inset is deliberately larger than the left: it pulls the whole device
   group inwards from the right edge, so the composition sits a little left of
   centre. The bottom inset lifts the group off the bottom edge. */
.device-showcase { position: absolute; inset: 0 4% 4% 0; z-index: 2; }
/* The Mac anchors the composition, the pad sits to its right and the phone
   overlaps the pad's right edge at the far right. These three rules are shared by
   every product section (see .plan-device-showcase below), so all sections scale
   identically with the stage. */
.device-shot { position: absolute; display: block; height: auto; object-fit: contain; mix-blend-mode: normal; filter: drop-shadow(0 22px 30px rgba(64, 43, 22, .13)); }
/* All three are sized by width; each image's own ratio determines its height. */
.device-mac { width: 100%; height: auto; left: -10%; bottom: 0%; z-index: 1; }
.device-pad { width: 62%; height: auto; left: 26%; bottom: 0%; z-index: 2; }
.device-phone { width: 35%; height: auto; right: 0%; bottom: 1%; z-index: 3; }
/* 桔子记物 and 桔子发票盒 let the phone hang below the shared baseline. Scoped by
   section id rather than child order so inserting a section cannot shift it. */
#things .device-phone, #invoice .device-phone { bottom: -4%; }
.plan-device-stage::before { width: 76%; border-color: rgba(98, 168, 91, .18); }
.plan-device-stage::after { width: 52%; border-color: rgba(98, 168, 91, .18); }
/* 桔子清单 reuses the shared .device-mac / .device-pad / .device-phone geometry
   above, so its three mockups match 桔子账本 exactly; only the tint of the drop
   shadow differs. */
.plan-device-showcase .device-shot { mix-blend-mode: normal; filter: drop-shadow(0 24px 34px rgba(39, 79, 39, .16)); }
/* 桔子清单 only: lift the pad above the phone (the phone's own z-index is 3, so
   anything higher wins regardless of DOM order) */
.plan-device-showcase .device-pad { z-index: 4; }
.orbit { position: absolute; border: 1px solid rgba(255, 138, 52, 0.26); border-radius: 50%; }
.orbit-one { width: 560px; height: 560px; }
.orbit-two { width: 390px; height: 390px; }
.phone { width: 294px; height: 594px; border: 9px solid #171717; border-radius: 46px; background: #fff; position: relative; overflow: hidden; box-shadow: 0 38px 80px rgba(76, 47, 24, 0.22); z-index: 2; }
.phone::before { content: ""; position: absolute; width: 86px; height: 24px; left: 50%; top: 9px; transform: translateX(-50%); background: #171717; border-radius: 99px; z-index: 5; }
.phone-bar { height: 48px; padding: 15px 22px 0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
.phone-bar span { width: 36px; height: 8px; border-top: 3px solid #202020; border-bottom: 3px dotted #202020; }
.screen-head, .list-date, .things-head { padding: 18px 22px 16px; display: flex; flex-direction: column; gap: 7px; }
.screen-head small, .list-date small, .things-head small { color: #85817b; font-size: 12px; }
.screen-head strong { font-size: 30px; letter-spacing: -0.04em; }
.mini-chart { height: 135px; margin: 4px 20px 20px; padding: 24px 12px 12px; display: flex; align-items: end; justify-content: space-between; gap: 8px; background: #fff5ea; border-radius: 22px; }
.mini-chart i { width: 18px; height: 44%; background: #ffd4ad; border-radius: 8px; }
.mini-chart i:nth-child(2) { height: 62%; }.mini-chart i:nth-child(3) { height: 50%; }.mini-chart i:nth-child(4) { height: 82%; background: var(--orange); }.mini-chart i:nth-child(5) { height: 68%; }.mini-chart i:nth-child(6) { height: 74%; }.mini-chart i:nth-child(7) { height: 56%; }
.ledger-row { padding: 10px 20px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; }
.ledger-row p { margin: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.ledger-row small { color: #96918a; }.ledger-row strong { font-size: 12px; }
.row-icon { width: 36px; height: 36px; border-radius: 12px; background: #fff0df; position: relative; }
.row-icon::after { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--orange); }
.float-add { position: absolute; right: 20px; bottom: 20px; width: 48px; height: 48px; display: grid; place-items: center; background: var(--ink); color: white; border-radius: 50%; font-size: 25px; box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.detail-card { position: absolute; z-index: 3; width: 210px; padding: 18px; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.7); backdrop-filter: blur(16px); border-radius: 18px; box-shadow: 0 22px 50px rgba(76,47,24,.14); }
.spending-card { right: 5%; bottom: 10%; transform: rotate(4deg); }
.detail-card small, .detail-card b { display: block; }.detail-card small { color: var(--muted); margin-bottom: 5px; }.detail-card span { display: block; height: 6px; background: #ece8e1; border-radius: 9px; margin-top: 14px; overflow: hidden; }.detail-card span i { display: block; width: 68%; height: 100%; background: var(--orange); }

.product-list { background: #f4faef; display: grid; align-content: center; }
.list-heading { display: grid; grid-template-columns: .55fr 1.15fr .9fr; align-items: end; gap: 40px; max-width: 1400px; margin: 0 auto 32px; width: 100%; }
.list-heading h2 { margin-bottom: 10px; }
.list-heading .product-desc { margin-bottom: 8px; }
.list-showcase { min-height: 620px; position: relative; display: grid; place-items: center; overflow: hidden; }
.phone-list { height: 520px; transform: translateY(30px); box-shadow: 0 35px 70px rgba(53,94,52,.2); }
.list-date strong { font-size: 28px; }.task { margin: 12px 20px; padding: 14px; background: #f5f8f3; border-radius: 16px; display: grid; grid-template-columns: 24px 1fr; gap: 11px; align-items: center; }.task i { width: 21px; height: 21px; border: 2px solid #b9c1b4; border-radius: 50%; }.task p { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }.task small { color: #8a9085; }.task.done { opacity: .6; }.task.done i { background: var(--green); border-color: var(--green); position: relative; }.task.done i::after { content: ""; position: absolute; width: 9px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg); left: 4px; top: 5px; }.task.done b { text-decoration: line-through; }.progress-ring { margin: 20px auto; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) 0 60%, #e3e8df 60%); position: relative; }.progress-ring::after { content: ""; position: absolute; inset: 8px; background: white; border-radius: 50%; }.progress-ring span { position: relative; z-index: 2; font-weight: 750; font-size: 13px; }
.list-note { position: absolute; padding: 18px 24px; background: white; border-radius: 18px; box-shadow: 0 18px 45px rgba(53,94,52,.12); font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 12px; }.list-note span { width: 13px; height: 13px; border-radius: 50%; background: var(--green); }.note-one { left: 15%; top: 24%; transform: rotate(-6deg); }.note-two { right: 15%; bottom: 18%; transform: rotate(5deg); }
.feature-row { border-top: 1px solid rgba(47,76,44,.16); max-width: 1400px; width: 100%; margin: 20px auto 0; padding-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 20px; font-size: 13px; font-weight: 680; }.feature-row a { text-decoration: underline; text-underline-offset: 5px; }
.store-text-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: flex-end; }

.product-things { background: #fff8ef; }
.things-title { max-width: 1400px; margin: 0 auto 48px; }
.things-title h2 { max-width: 1020px; margin: 0; }.things-title em { color: var(--orange); }
.things-content { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: .68fr 1.32fr; align-items: center; gap: clamp(44px, 7vw, 110px); }
.things-copy { align-self: center; padding-bottom: 80px; }
.stage-purple { border-radius: var(--radius-card); }
.phone-things { transform: rotate(3deg) translateY(25px); }.things-head strong { font-size: 25px; }.category-tabs { display: flex; gap: 10px; padding: 0 20px 18px; font-size: 10px; color: #89828e; }.category-tabs > * { padding: 6px 8px; }.category-tabs b { color: white; background: var(--purple); border-radius: 8px; }.item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px; }.item-grid article { background: #f7f4fd; border-radius: 16px; padding: 10px; min-height: 140px; display: flex; flex-direction: column; gap: 4px; }.item-grid article b { font-size: 12px; }.item-grid article small { color: #8e8794; font-size: 9px; }.item-art { height: 86px; border-radius: 12px; background: #e9defa; position: relative; }.item-art::before, .item-art::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--purple); }.headphones::before { width: 35px; height: 35px; border: 8px solid var(--purple); background: transparent; border-bottom-color: transparent; border-radius: 50%; }.headphones::after { width: 47px; height: 20px; background: linear-gradient(90deg,var(--purple) 0 22%,transparent 22% 78%,var(--purple) 78%); top: 62%; }.camera::before { width: 48px; height: 34px; border-radius: 8px; }.camera::after { width: 15px; height: 15px; border: 4px solid #e9defa; border-radius: 50%; }.card-art::before { width: 52px; height: 35px; border-radius: 6px; transform: translate(-50%,-50%) rotate(-8deg); }.key-art::before { width: 26px; height: 26px; border: 7px solid var(--purple); border-radius: 50%; background: transparent; }.key-art::after { width: 31px; height: 7px; border-radius: 8px; transform: translate(0,-50%); }.where-card { position: absolute; left: 7%; bottom: 12%; background: white; border-radius: 16px; padding: 15px 22px; box-shadow: 0 18px 40px rgba(65,45,97,.16); z-index: 4; transform: rotate(-4deg); }.where-card small, .where-card b { display: block; }.where-card small { color: var(--muted); font-size: 10px; margin-bottom: 5px; }.where-card b { font-size: 13px; }

.product-invoice { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(44px, 8vw, 130px); align-items: center; background: #f2f8ff; overflow: hidden; }.invoice-copy { max-width: 580px; }.invoice-stats { margin-top: 40px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.invoice-stats span { padding-top: 16px; border-top: 1px solid rgba(37,91,146,.2); display: flex; flex-direction: column; gap: 5px; }.invoice-stats b { font-size: 16px; }.invoice-stats small { color: var(--muted); }.invoice-visual { min-height: 660px; display: grid; place-items: center; position: relative; }.receipt-paper, .receipt-stack { width: min(450px, 70%); aspect-ratio: .74; border-radius: 10px; position: absolute; }.receipt-stack.back { background: #a9d4ff; transform: rotate(10deg) translate(36px,8px); }.receipt-stack.middle { background: #d7eaff; transform: rotate(-7deg) translate(-34px,10px); }.receipt-paper { background: #fff; z-index: 2; padding: 46px; box-shadow: 0 34px 80px rgba(30,77,124,.18); }.receipt-top { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; }.tiny-logo { width: 34px; height: 34px; border-radius: 10px; background: var(--blue); }.receipt-top small { color: var(--blue); background: var(--blue-soft); padding: 6px 8px; border-radius: 99px; font-size: 10px; }.receipt-amount { margin: 54px 0 38px; display: flex; flex-direction: column; gap: 10px; }.receipt-amount small { color: var(--muted); }.receipt-amount strong { font-size: clamp(38px, 4vw, 58px); letter-spacing: -0.05em; }.receipt-lines { display: grid; gap: 16px; }.receipt-lines i { height: 9px; background: #edf1f5; border-radius: 99px; }.receipt-lines i:nth-child(2) { width: 72%; }.receipt-lines i:nth-child(3) { width: 87%; }.receipt-lines i:nth-child(4) { width: 55%; }.receipt-meta { position: absolute; bottom: 40px; left: 46px; right: 46px; padding-top: 20px; border-top: 1px dashed #ccd7e1; display: flex; justify-content: space-between; }.receipt-meta span { color: var(--blue); font-weight: 700; }.receipt-meta small { color: var(--muted); }.scan-chip { position: absolute; z-index: 4; right: 0; bottom: 14%; padding: 16px 20px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); border-radius: 18px; box-shadow: 0 20px 50px rgba(30,77,124,.16); display: flex; align-items: center; gap: 13px; }.scan-chip i { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); position: relative; }.scan-chip i::after { content: ""; position: absolute; width: 13px; height: 7px; border-left: 3px solid white; border-bottom: 3px solid white; transform: rotate(-45deg); left: 9px; top: 10px; }.scan-chip span { display: flex; flex-direction: column; gap: 3px; }.scan-chip small { color: var(--muted); }

.invoice-stats { margin: 40px 0 32px; }
.product-invoice { gap: clamp(36px, 6vw, 96px); }
.invoice-visual { height: clamp(460px, 72dvh, 620px); min-height: 0; }

.story { min-height: 78dvh; padding: 120px 24px; display: grid; place-items: center; align-content: center; text-align: center; }.story h2 { max-width: 1000px; margin: 0 auto 30px; font-size: clamp(52px, 7vw, 96px); line-height: .98; letter-spacing: -.04em; }.story > p:not(.product-number) { max-width: 640px; margin: 0 auto 34px; color: var(--muted); font-size: 19px; line-height: 1.8; }
.contact-button { display: inline-grid; border: 0; font: inherit; cursor: pointer; }
.contact-button > span { grid-area: 1 / 1; transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard); }
.contact-email { opacity: 0; transform: translateY(6px); }
.contact-button:hover .contact-default, .contact-button:focus-visible .contact-default { opacity: 0; transform: translateY(-6px); }
.contact-button:hover .contact-email, .contact-button:focus-visible .contact-email { opacity: 1; transform: translateY(0); }
.copy-toast { position: fixed; z-index: 200; left: 50%; bottom: 28px; max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 680; box-shadow: 0 14px 36px rgba(21,21,21,.2); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity var(--duration-normal) var(--ease-enter), transform var(--duration-normal) var(--ease-enter); }
.copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
footer { min-height: 180px; margin: 0 clamp(24px, 6vw, 96px); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }.footer p { color: var(--muted); } footer small { justify-self: end; color: var(--muted); }

/* ---- 出场动效 -------------------------------------------------------------
   Text fades up (opacity + translate) inside blocks gated on html.js, so without
   JavaScript nothing is ever left invisible. The device mockups deliberately use
   translation only - no opacity fade, no scale - and are always painted. */
.js .reveal { opacity: 0; transform: translateY(var(--reveal-offset)); }
.js .reveal.is-visible { opacity: 1; transform: none; }
/* Container-in, children, and the device stagger are all driven off the same
   duration and the same step (--reveal-index), so a block reads as one cascade
   that ramps up rather than three animations that each finish on their own. */
.js .product-copy.reveal, .js .story.reveal, .js footer.reveal {
  transition: opacity var(--reveal-dur) var(--reveal-ease), transform var(--reveal-dur) var(--reveal-ease);
  /* the block lags behind its own lines, so the copy drifts in as a layer behind
     its content instead of moving as one rigid sheet */
  transition-delay: var(--reveal-lag);
}

.js .reveal-child { opacity: 0; transform: translateY(var(--reveal-offset-child)); }
/* fill-mode must be `both`: the child's base state is opacity:0, so without the
   forwards half it would snap back to hidden the moment the animation ends. */
.js .reveal.is-visible .reveal-child {
  animation: reveal-in var(--reveal-dur) var(--reveal-ease) both;
  animation-delay: calc(var(--reveal-index, 0) * var(--reveal-step));
}

/* the mockups rise into place from the shared baseline, back to front. These are
   transitions rather than keyframes so they only fire when the block scrolls in.
   The delays are shared with the text stagger via --reveal-step. */
.device-showcase .device-shot {
  transition: transform var(--reveal-dur) var(--reveal-ease);
}
.device-showcase .device-mac { transform: translateY(calc(var(--reveal-offset) * 1.5)); transition-delay: calc(var(--reveal-step) * 1.5); }
.device-showcase .device-pad { transform: translateY(calc(var(--reveal-offset) * 1.5)); transition-delay: calc(var(--reveal-step) * 3.5); }
.device-showcase .device-phone { transform: translateY(calc(var(--reveal-offset) * 1.5)); transition-delay: calc(var(--reveal-step) * 5.5); }
.device-showcase.is-visible .device-shot { transform: none; }

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(var(--reveal-offset-child)); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 980px) {
  .product-standard { grid-template-columns: 1fr; gap: 44px; }.product-copy, .invoice-copy { max-width: 680px; }.stage, .invoice-visual { height: 560px; min-height: 0; }
}

@media (max-width: 640px) {
  .site-header { height: 64px; padding: 0 18px; }.brand { font-size: 15px; }.brand-mark { width: 30px; border-radius: 9px; }.button { min-height: 48px; }
  .product { min-height: auto; padding: 68px 22px 48px; }.product h1, .product h2, .product h3 { font-size: 44px; }.product-tagline { font-size: 21px; }.product-desc { font-size: 16px; }.product-number { margin-bottom: 18px; }.feature-line { margin: 20px 0 24px; }
  .product-standard { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }.stage { height: 360px; min-height: 0; border-radius: 24px; }.phone { transform: scale(.88); }.spending-card { width: 180px; right: -2%; bottom: 7%; }
  .list-heading { display: block; }.list-heading .app-signature { display: block; }.list-showcase { min-height: 540px; margin: 0 -22px; }.phone-list { transform: scale(.86) translateY(35px); }.note-one { left: 1%; top: 16%; }.note-two { right: 0; bottom: 8%; }.list-note { padding: 13px 16px; font-size: 12px; }.feature-row { grid-template-columns: 1fr 1fr; gap: 18px; }.feature-row a { grid-column: 1 / -1; }
  .stage-purple { margin: 0; border-radius: 24px; }
  .product-invoice { gap: 28px; }.invoice-stats { margin: 28px 0 30px; }.invoice-visual { height: 360px; min-height: 0; margin: 0 -12px; }.receipt-paper, .receipt-stack { width: min(330px, 79%); }.receipt-paper { padding: 28px; }.receipt-amount { margin: 34px 0 26px; }.receipt-meta { left: 28px; right: 28px; bottom: 26px; }.scan-chip { right: -8px; bottom: 6%; padding: 13px; }
  .device-showcase { inset: 0 5% 4% 0; }
  .device-mac { width: 100%; height: auto; left: -6%; }
  .device-pad { width: 62%; height: auto; left: 20%; }
  .device-phone { width: 35%; height: auto; right: 0%; }
  .store-text-link { justify-content: flex-start; }
  .story { min-height: 72dvh; padding: 96px 22px; }.story h2 { font-size: 50px; }.story > p:not(.product-number) { font-size: 17px; }
  footer { margin: 0 22px; padding: 40px 0; grid-template-columns: 1fr; gap: 16px; } footer small { justify-self: start; } footer p { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; --duration-normal: 1ms; --duration-slow: 1ms; }
  html { scroll-behavior: auto; }
  :root { --reveal-dur: 1ms; --reveal-step: 0ms; --reveal-lag: 0ms; --reveal-offset: 0px; --reveal-offset-child: 0px; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  .reveal, .reveal-child, .device-shot { transform: none; animation: none; }
  .js .reveal, .js .reveal-child { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header, .detail-card, .scan-chip { backdrop-filter: none; background: #fffdf9; }
}