:root {
  --canvas: #f7f1e7;
  --paper: #fbf8f2;
  --cream: #efe5d5;
  --sage: #d9e4d5;
  --teal: #176b68;
  --deep-teal: #144c4b;
  --orange: #d9683b;
  --ink: #2a302d;
  --muted: #64706a;
  --line: rgba(20, 76, 75, 0.18);
  --shadow: 0 18px 45px rgba(63, 54, 40, 0.1);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  line-height: 1.65;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); }
a { color: var(--teal); }
a:hover { color: var(--deep-teal); }

.page-shell { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 800; letter-spacing: -0.03em; text-decoration: none; }
.brand img { display: block; width: min(43px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; }
.brand span { font-size: 1.05rem; }
.nav { display: flex; flex-shrink: 0; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 19px; white-space: nowrap; font-size: 0.91rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--teal); }
.nav .nav-cta { color: var(--paper); background: var(--teal); padding: 9px 15px; border-radius: 999px; font-weight: 800; }
.nav .nav-cta:hover { color: var(--paper); background: var(--deep-teal); }

.hero { display: grid; grid-template-columns: 1fr 0.88fr; align-items: center; gap: 72px; padding: 74px 0 98px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-size: 0.77rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 25px; height: 3px; border-radius: 99px; background: var(--orange); transform: rotate(-3deg); }
.eyebrow-light { color: #d9e4d5; }
.eyebrow-light::before { background: #f3c071; }
h1, h2, h3 { color: var(--deep-teal); line-height: 1.12; letter-spacing: -0.05em; }
h1 { max-width: 650px; margin: 18px 0 21px; font-size: clamp(3rem, 6.5vw, 5.5rem); }
h2 { margin: 0 0 14px; font-size: clamp(2.15rem, 4.4vw, 3.65rem); }
h3 { margin: 0 0 8px; font-size: 1.24rem; }
.lede { max-width: 590px; margin: 0; color: var(--muted); font-size: clamp(1.08rem, 1.8vw, 1.26rem); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 29px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border: 1px solid var(--teal); border-radius: 13px 15px 12px 14px; padding: 11px 19px; color: var(--paper); background: var(--teal); box-shadow: 4px 4px 0 rgba(20, 76, 75, 0.12); font-weight: 800; text-decoration: none; transform: rotate(-1deg); }
.button:hover { color: var(--paper); background: var(--deep-teal); transform: rotate(0); }
.text-link { color: var(--teal); font-weight: 800; text-underline-offset: 4px; }
.text-link span { display: inline-block; margin-left: 4px; font-size: 1.2em; }
.small-note { display: flex; align-items: center; gap: 8px; margin: 23px 0 0; color: var(--muted); font-size: 0.84rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

.hero-sketch { position: relative; min-height: 440px; overflow: hidden; border: 2px solid var(--deep-teal); border-radius: 47% 53% 45% 55% / 51% 44% 56% 49%; background: var(--cream); box-shadow: 10px 12px 0 rgba(20, 76, 75, 0.12); transform: rotate(2deg); container-type: inline-size; }
.hero-sketch::before { position: absolute; inset: 25px; border: 1px dashed rgba(20, 76, 75, 0.28); border-radius: 48% 52% 44% 56% / 52% 45% 55% 48%; content: ""; }
.sketch-note { position: absolute; color: var(--orange); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 1.15rem; transform: rotate(-7deg); }
.note-top { top: 41px; left: 42px; }
.sketch-line { position: absolute; display: flex; align-items: center; gap: 10px; color: var(--deep-teal); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 1.1rem; }
.sketch-line span { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid var(--deep-teal); border-radius: 50%; font-family: inherit; font-size: 0.88rem; }
.line-one { top: 117px; left: 72px; }
.line-two { top: 219px; left: 157px; }
.line-three { top: 324px; left: 55px; }
.sketch-card { position: absolute; display: grid; grid-template-columns: 38px 1fr; align-items: center; column-gap: 10px; width: 163px; padding: 13px; border: 1px solid rgba(20, 76, 75, 0.4); border-radius: 8px 12px 7px 10px; color: var(--deep-teal); background: var(--paper); box-shadow: 5px 6px 0 rgba(20, 76, 75, 0.12); }
.receipt-card { top: 145px; right: 39px; transform: rotate(5deg); }
.stock-card { top: 253px; right: 72px; transform: rotate(-4deg); }
.sketch-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 9px; color: var(--paper); background: var(--orange); font-weight: 900; }
.sketch-card strong { font-size: 0.9rem; }
.sketch-card small { grid-column: 2; color: var(--muted); font-size: 0.7rem; }
.sketch-sun { position: absolute; right: 42px; bottom: 39px; color: var(--orange); font-size: 2rem; transform: rotate(13deg); }
.sketch-underline { position: absolute; bottom: 63px; left: 68px; width: 118px; border-top: 3px solid var(--orange); border-radius: 50%; transform: rotate(-5deg); }

.section { padding: 92px 0; }
.section.paper { background: var(--paper); }
.example-section { background: var(--cream); }
.app-preview-section { overflow: hidden; background: var(--paper); }
.demo-scroll-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr); align-items: center; gap: 72px; }
.demo-card-column { width: 100%; align-self: center; }
.demo-stage { position: relative; display: grid; min-height: 650px; place-items: center; isolation: isolate; }
.demo-stage::before { position: absolute; z-index: -2; width: 86%; height: 72%; border-radius: 48% 52% 43% 57% / 55% 44% 56% 45%; background: var(--sage); content: ""; transform: rotate(-5deg); }
.demo-stage::after { position: absolute; z-index: -1; width: 62%; height: 48%; border: 1px dashed rgba(20, 76, 75, 0.25); border-radius: 48% 52% 43% 57% / 55% 44% 56% 45%; content: ""; transform: rotate(7deg); }
.demo-device-card { position: relative; width: min(100%, 450px); overflow: hidden; aspect-ratio: 9 / 16; border: 10px solid var(--deep-teal); border-radius: 34px; background: var(--deep-teal); box-shadow: 12px 15px 0 rgba(20, 76, 75, 0.14); }
.demo-screen { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 320ms ease; }
.demo-screen:first-child { position: relative; }
.demo-screen.is-active { opacity: 1; }
.stage-app-cues { position: absolute; inset: 0; z-index: 1; pointer-events: none; font-size: 0.62rem; font-weight: 800; }
.stage-cue-set { position: absolute; inset: 0; opacity: 0; transition: opacity 220ms ease; }
.stage-cue-set.is-active { opacity: 1; }
.app-cue { position: absolute; padding: 6px 9px; border: 1px solid rgba(20, 76, 75, 0.18); border-radius: 8px 11px 7px 9px; color: var(--deep-teal); background: rgba(251, 248, 242, 0.94); box-shadow: 2px 3px 0 rgba(20, 76, 75, 0.08); white-space: nowrap; }
.cue-dashboard-target { top: 20%; left: 0; transform: rotate(-4deg); }
.cue-dashboard-stock { bottom: 24%; left: 0; color: #8b5d2d; background: rgba(243, 230, 196, 0.94); transform: rotate(3deg); }
.cue-sell-popular { top: 23%; right: 0; color: var(--teal); background: rgba(217, 228, 213, 0.94); transform: rotate(3deg); }
.cue-sell-product { bottom: 19%; right: 0; color: var(--orange); background: rgba(255, 240, 231, 0.95); transform: rotate(-3deg); }
.cue-product-quantity { top: 26%; left: 0; color: var(--teal); background: rgba(217, 228, 213, 0.94); transform: rotate(-3deg); }
.cue-product-unit { bottom: 22%; right: 0; color: var(--orange); background: rgba(255, 240, 231, 0.95); transform: rotate(3deg); }
.cue-stock-remaining { top: 24%; right: 0; color: #8b5d2d; background: rgba(243, 230, 196, 0.94); transform: rotate(3deg); }
.cue-stock-action { bottom: 21%; left: 0; color: var(--teal); background: rgba(217, 228, 213, 0.94); transform: rotate(-4deg); }
.cue-analytics-pulse { top: 25%; left: 0; color: var(--teal); background: rgba(217, 228, 213, 0.94); transform: rotate(-4deg); }
.cue-analytics-total { bottom: 20%; right: 0; color: var(--orange); background: rgba(255, 240, 231, 0.95); transform: rotate(3deg); }
.cue-doodle { position: absolute; width: 34px; height: 26px; opacity: 0.75; }
.cue-doodle::before, .cue-doodle::after { position: absolute; content: ""; }
.doodle-target { top: 17%; right: 5%; border: 2px solid var(--orange); border-radius: 50%; transform: rotate(-12deg); }
.doodle-target::before { inset: 6px; border: 1px dashed var(--orange); border-radius: 50%; }
.doodle-target::after { top: 12px; left: 15px; width: 17px; border-top: 2px solid var(--orange); transform: rotate(-35deg); }
.doodle-stock { bottom: 18%; right: 4%; border-bottom: 2px solid var(--teal); transform: rotate(5deg); }
.doodle-stock::before { bottom: 2px; left: 5px; width: 7px; height: 17px; border: 2px solid var(--teal); border-bottom: 0; }
.doodle-stock::after { right: 4px; bottom: 2px; width: 7px; height: 11px; border: 2px solid var(--teal); border-bottom: 0; }
.doodle-products { top: 19%; left: 2%; border-bottom: 2px solid var(--teal); transform: rotate(-5deg); }
.doodle-products::before { left: 5px; bottom: 2px; width: 9px; height: 13px; border: 2px solid var(--teal); border-radius: 3px; }
.doodle-products::after { right: 4px; bottom: 2px; width: 9px; height: 17px; border: 2px solid var(--orange); border-radius: 50%; }
.doodle-scale { top: 18%; right: 3%; border: 2px solid var(--teal); border-radius: 20px 20px 5px 5px; transform: rotate(4deg); }
.doodle-scale::before { top: 6px; left: 8px; width: 14px; border-top: 2px solid var(--orange); transform: rotate(-25deg); }
.doodle-scale::after { top: 2px; left: 18px; width: 2px; height: 10px; background: var(--orange); transform: rotate(25deg); }
.doodle-shelf { top: 19%; left: 3%; border-top: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-3deg); }
.doodle-shelf::before { top: 5px; left: 5px; width: 9px; height: 9px; border: 2px solid var(--orange); }
.doodle-shelf::after { top: 5px; right: 5px; width: 9px; height: 9px; border: 2px solid var(--teal); }
.doodle-chart { top: 19%; right: 4%; border-bottom: 2px solid var(--teal); border-left: 2px solid var(--teal); transform: rotate(-3deg); }
.doodle-chart::before { top: 5px; left: 7px; width: 21px; height: 13px; border-top: 2px solid var(--orange); border-right: 2px solid var(--orange); transform: skewY(-30deg); }
.doodle-chart::after { top: 4px; right: 4px; width: 5px; height: 5px; border: 2px solid var(--orange); border-radius: 50%; }
.stage-label { position: absolute; right: 8%; bottom: 7%; padding: 6px 11px; border-radius: 99px; color: var(--paper); background: rgba(20, 76, 75, 0.9); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; }
.demo-steps { position: relative; width: 100%; height: 330px; }
.demo-step-card { position: absolute; inset: 0; display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-content: start; min-height: 0; padding: 20px 18px; border: 1px solid var(--line); border-radius: 16px 23px 15px 21px; background: var(--paper); box-shadow: 6px 7px 0 rgba(20, 76, 75, 0.08); opacity: 1; pointer-events: none; transform: translate(calc(var(--deck-position, 0) * 8px), calc(var(--deck-position, 0) * 7px)) rotate(calc(var(--deck-position, 0) * 0.8deg)); transition: border-color 260ms ease, background 260ms ease, box-shadow 260ms ease, opacity 320ms ease, transform 320ms ease; }
.demo-step-card.is-active { border-color: var(--orange); background: #fffaf2; box-shadow: 8px 9px 0 rgba(217, 104, 59, 0.14); pointer-events: auto; }
.demo-step-card.is-leaving { opacity: 0; transform: translate(58px, 42px) rotate(7deg) !important; }
.demo-step-card .step-number { position: static; display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid var(--teal); border-radius: 50%; color: var(--teal); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 0.85rem; }
.demo-step-card.is-active .step-number { color: var(--paper); background: var(--orange); border-color: var(--orange); }
.step-graphic { display: grid; grid-column: 2; width: 43px; height: 43px; margin-top: -2px; place-items: center; border-radius: 14px 11px 13px 10px; color: var(--teal); background: var(--sage); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 1.25rem; font-weight: 900; transform: rotate(-4deg); }
.step-graphic::before { content: "✦"; }
.graphic-dashboard::before { content: "▦"; }
.graphic-sell::before { content: "₱"; }
.graphic-product::before { content: "✦"; }
.graphic-stock::before { content: "▤"; }
.graphic-analytics::before { content: "↗"; }
.demo-step-card > div { grid-column: 2; }
.demo-step-card strong { display: block; color: var(--deep-teal); font-size: 1.05rem; }
.demo-step-card p { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.42; }
.demo-controls { position: relative; z-index: 50; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 42px; }
.demo-control { border: 1px solid rgba(20, 76, 75, 0.2); border-radius: 999px; padding: 6px 10px; color: var(--muted); background: transparent; font: inherit; font-size: 0.7rem; font-weight: 800; cursor: pointer; }
.demo-control span { margin-left: 2px; font-weight: 600; }
.demo-control:hover, .demo-control:focus-visible { border-color: var(--teal); color: var(--teal); outline: none; }
.demo-control.is-active { border-color: var(--orange); color: var(--paper); background: var(--orange); }
.app-preview-note { margin: 30px 0 0; color: var(--muted); font-size: 0.91rem; line-height: 1.45; }
.example-grid { display: grid; grid-template-columns: minmax(260px, 0.72fr) 1.28fr; align-items: center; gap: 58px; }
.section-heading { max-width: 670px; margin-bottom: 40px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 1.08rem; }
.section-heading.compact { max-width: 510px; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; }
.step { position: relative; min-height: 250px; padding: 28px; border: 1px solid var(--line); border-radius: 9px 18px 12px 15px; background: rgba(239, 229, 213, 0.48); }
.step:nth-child(2) { background: rgba(217, 228, 213, 0.5); }
.step:nth-child(3) { background: rgba(242, 218, 194, 0.48); }
.step-offset { transform: translateY(15px) rotate(1deg); }
.step-number { position: absolute; top: 19px; right: 21px; color: var(--orange); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 0.87rem; font-weight: 900; }
.step-icon { display: grid; width: 47px; height: 47px; place-items: center; margin-bottom: 31px; border: 1px solid var(--teal); border-radius: 50%; color: var(--teal); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 1.35rem; }
.step p { margin: 0; color: var(--muted); }

.split-section { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 82px; }
.mini-ledger { position: relative; padding: 61px 29px 29px; border: 1px solid var(--line); border-radius: 5px 18px 10px 13px; background: var(--paper); box-shadow: 8px 9px 0 var(--sage); transform: rotate(-2deg); }
.ledger-tab { position: absolute; top: 20px; left: 27px; color: var(--orange); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 1rem; transform: rotate(-3deg); }
.ledger-row { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px dashed var(--line); color: var(--muted); }
.ledger-row b { color: var(--deep-teal); }
.ledger-check { margin-top: 22px; color: var(--teal); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 1.1rem; transform: rotate(-2deg); }
.check-list { display: grid; gap: 12px; margin: 25px 0 0; padding: 0; list-style: none; color: var(--muted); }
.check-list li { position: relative; padding-left: 29px; }
.check-list li::before { position: absolute; left: 0; color: var(--orange); content: "✓"; font-weight: 900; }
.sale-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.sale-step { min-height: 155px; padding: 18px 15px; border: 1px solid var(--line); border-radius: 10px 16px 9px 14px; background: var(--paper); box-shadow: 5px 6px 0 rgba(20, 76, 75, 0.1); }
.sale-step span { display: block; margin-bottom: 23px; color: var(--orange); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 0.82rem; font-weight: 900; }
.sale-step strong, .sale-step small { display: block; }
.sale-step strong { color: var(--deep-teal); font-size: 1rem; line-height: 1.2; }
.sale-step small { margin-top: 8px; color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.flow-arrow { color: var(--orange); font-size: 1.5rem; font-weight: 900; }

.testing-section { background: var(--sage); }
.tester-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 44px; padding: 48px; border-radius: 15px 32px 21px 28px; color: var(--paper); background: var(--deep-teal); box-shadow: 11px 12px 0 rgba(20, 76, 75, 0.13); }
.tester-card h2, .tester-card p { color: var(--paper); }
.tester-card p { max-width: 620px; margin: 0; opacity: 0.9; }
.tester-disclaimer { margin-top: 15px !important; color: #d9e4d5 !important; font-size: 0.87rem; }
.pre-release-note { margin-top: 10px !important; }
.store-actions { display: grid; gap: 13px; min-width: 220px; }
.store-button { display: flex; min-height: 62px; align-items: center; gap: 12px; padding: 10px 15px; border: 1px solid rgba(251, 248, 242, 0.3); border-radius: 9px 13px 8px 11px; text-align: left; }
.store-button svg { width: 29px; height: 29px; flex: 0 0 auto; }
.store-button span { display: grid; line-height: 1.2; }
.store-button small { font-size: 0.7rem; opacity: 0.75; }
.store-button strong { font-size: 0.95rem; }
.play-button { color: var(--deep-teal); background: var(--paper); text-decoration: none; }
.play-button:hover { color: var(--deep-teal); background: white; }
.future-button { color: var(--paper); border-style: dashed; opacity: 0.8; }

.approach-section { padding: 76px 0 92px; }
.approach-copy { max-width: 690px; }
.approach-copy p { max-width: 610px; margin: 0 0 19px; color: var(--muted); font-size: 1.08rem; }
.maker-section { padding: 76px 0 86px; background: var(--canvas); }
.maker-card { display: grid; grid-template-columns: minmax(180px, 0.6fr) 1.4fr; align-items: center; gap: 42px; padding: 42px 48px; border: 1px solid var(--line); border-radius: 12px 28px 18px 24px; background: var(--sage); box-shadow: 10px 10px 0 rgba(20, 76, 75, 0.12); transform: rotate(-1deg); }
.maker-signature { display: grid; width: min(180px, 100%); aspect-ratio: 1; place-items: center; margin-inline: auto; border: 2px solid var(--teal); border-radius: 47% 53% 45% 55% / 51% 44% 56% 49%; color: var(--teal); background: var(--cream); transform: rotate(4deg); }
.maker-signature strong { font-size: clamp(3.6rem, 8vw, 5.6rem); letter-spacing: -0.1em; }
.maker-signature small { margin-top: -40px; color: var(--orange); font-family: "Comic Sans MS", "Bradley Hand", cursive; font-size: 0.9rem; transform: rotate(-6deg); }
.maker-copy { transform: rotate(1deg); }
.maker-copy h2 { margin-bottom: 14px; }
.maker-copy p { max-width: 610px; margin: 0 0 19px; color: var(--muted); font-size: 1.08rem; }
.maker-project { margin-top: -8px !important; color: var(--deep-teal) !important; font-size: 0.98rem !important; font-weight: 800; }
.maker-link { display: inline-flex; align-items: center; gap: 6px; color: var(--teal); font-weight: 800; text-underline-offset: 4px; }
.maker-link span { font-size: 1.2em; }

.site-footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px 0 42px; color: var(--muted); font-size: 0.87rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-links a { color: var(--muted); }

.legal-page { max-width: 820px; padding: 58px 0 96px; }
.legal-page h1 { margin: 0 0 14px; font-size: clamp(2.6rem, 6vw, 4.8rem); }
.legal-page h2 { margin-top: 42px; font-size: 1.7rem; }
.legal-page h3 { margin-top: 28px; font-size: 1.18rem; }
.legal-page p, .legal-page li { color: #3e4447; font-size: 1.03rem; }
.legal-page .meta { color: var(--muted); font-size: 0.95rem; }
.legal-page .notice { margin: 28px 0; padding: 18px 20px; border-left: 4px solid var(--orange); border-radius: 0 16px 16px 0; background: #fff0e7; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; gap: 45px; padding-top: 48px; }
  .hero-sketch { max-width: 590px; width: 100%; margin-inline: auto; }
  .split-section { grid-template-columns: 1fr; gap: 62px; }
  .example-grid { grid-template-columns: 1fr; gap: 32px; }
  .demo-scroll-layout { grid-template-columns: 1fr; gap: 24px; }
  .demo-stage { top: 16px; min-height: 610px; }
  .demo-device-card { width: min(100%, 390px); }
  .demo-steps { max-width: 560px; margin-inline: auto; padding-top: 12px; }
  .mini-ledger { max-width: 500px; width: 100%; margin-inline: auto; }
  .tester-card { grid-template-columns: 1fr; }
  .store-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .site-header { align-items: flex-start; flex-direction: column; }
  .nav { flex-shrink: 1; flex-wrap: wrap; justify-content: flex-start; gap: 13px 17px; white-space: normal; }
  .nav .nav-cta { padding: 8px 13px; }
  .hero { padding-bottom: 70px; }
  h1 { font-size: clamp(2.9rem, 14vw, 4.5rem); }
  .hero-sketch { width: min(100%, 440px); min-height: 0; aspect-ratio: 1; }
  .note-top { top: 9.3cqw; left: 9.5cqw; font-size: 2.6cqw; }
  .line-one { top: 26.6cqw; left: 16.4cqw; font-size: 2.5cqw; }
  .line-two { top: 49.8cqw; left: 35.7cqw; font-size: 2.5cqw; }
  .line-three { top: 73.6cqw; left: 12.5cqw; font-size: 2.5cqw; }
  .sketch-line { gap: 2.3cqw; }
  .sketch-line span { width: 6.6cqw; height: 6.6cqw; font-size: 2cqw; }
  .sketch-card { grid-template-columns: 8.6cqw 1fr; column-gap: 2.3cqw; width: 37cqw; padding: 3cqw; }
  .receipt-card { top: 33cqw; right: 8.9cqw; }
  .stock-card { top: 57.5cqw; right: 16.3cqw; }
  .sketch-icon { width: 8cqw; height: 8cqw; border-radius: 2cqw; }
  .sketch-card strong { font-size: 2.05cqw; }
  .sketch-card small { font-size: 1.6cqw; }
  .sketch-sun { right: 9.5cqw; bottom: 8.9cqw; font-size: 4.5cqw; }
  .sketch-underline { bottom: 14.3cqw; left: 15.5cqw; width: 26.8cqw; border-top-width: 0.7cqw; }
  .section { padding: 70px 0; }
  .demo-stage { min-height: 0; padding-bottom: 8px; }
  .demo-device-card { width: min(100%, 340px); }
  .stage-app-cues { display: none; }
  .stage-label { right: 7%; bottom: 5%; padding: 5px 8px; font-size: 0.61rem; }
  .demo-steps { height: 188px; }
  .demo-step-card { grid-template-columns: 36px 1fr; gap: 9px; padding: 16px 14px; border-radius: 14px 19px 13px 17px; }
  .demo-step-card .step-number, .step-graphic { width: 36px; height: 36px; font-size: 0.72rem; }
  .step-graphic { grid-column: 2; font-size: 1rem; }
  .demo-step-card strong { font-size: 0.93rem; }
  .demo-step-card p { font-size: 0.77rem; line-height: 1.35; }
  .demo-controls { justify-content: center; margin-top: 44px; }
  .demo-control { padding: 5px 8px; font-size: 0.65rem; }
  .steps { grid-template-columns: 1fr; }
  .step-offset { transform: none; }
  .sale-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sale-step { min-height: 128px; padding: 14px 12px; }
  .sale-step span { margin-bottom: 14px; font-size: 0.72rem; }
  .sale-step strong { font-size: 0.92rem; }
  .sale-step small { margin-top: 6px; font-size: 0.7rem; line-height: 1.3; }
  .flow-arrow { display: none; }
  .tester-card { padding: 30px 24px; }
  .store-actions { grid-template-columns: 1fr; }
  .maker-card { grid-template-columns: 1fr; gap: 28px; padding: 30px 24px; }
  .maker-signature { width: 120px; margin-inline: 0; }
  .maker-signature small { margin-top: -27px; }
  .site-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}