/* ClickRetail homepage. Shared navigation, typography and footer live in site-theme.css. */
.home-page { --header-height: 81px; }
.home-page main { overflow: clip; }
.home-page #products, .home-page #sale-entry { scroll-margin-top: calc(var(--header-height) + 18px); }

.home-page .retail-hero { padding: clamp(28px, 4vw, 58px) 0 clamp(64px, 7vw, 108px); }
.home-page .hero-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(310px, .68fr); gap: clamp(38px, 5vw, 84px); align-items: center; }
.home-page .hero-art { position: relative; display: grid; place-items: center; isolation: isolate; height: clamp(520px, 46vw, 650px); min-width: 0; transform: translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0); transition: transform .45s ease-out; }
.home-page .hero-rings { position: absolute; inset: 5% 8%; border: 1px solid #edf0ee; border-radius: 50%; pointer-events: none; }
.home-page .hero-rings::after { content: ''; position: absolute; inset: 12%; border: 1px solid #f4f5f4; border-radius: 50%; }
.home-page .hero-device { position: relative; display: block; width: min(81%, 660px); z-index: 1; animation: hero-device-in .85s .06s backwards; }
.home-page .hero-device img { display: block; width: 100%; height: auto; }
.home-page .feature-orbit { position: absolute; inset: 0; padding: 0; margin: 0; list-style: none; z-index: 2; pointer-events: none; }
.home-page .orbit-item { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 7px; width: 105px; color: #52615d; text-align: center; font-size: .68rem; letter-spacing: .01em; animation: orbit-enter .7s var(--delay) both; }
.home-page .orbit-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid #e4e9e6; border-radius: 22px; background: #fff; box-shadow: 0 12px 30px rgba(29, 48, 41, .09), 0 2px 7px rgba(29, 48, 41, .04); animation: orbit-float var(--duration) calc(var(--delay) + .8s) ease-in-out infinite alternate; }
.home-page .orbit-icon svg, .home-page .card-icon svg { width: 30px; height: 30px; fill: none; stroke: #008c6c; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.home-page .orbit-label { white-space: nowrap; }
.home-page .orbit-billing { top: 4%; left: 12%; }
.home-page .orbit-inventory { top: 5%; right: 13%; }
.home-page .orbit-customers { top: 27%; left: 0; }
.home-page .orbit-purchases { top: 26%; right: 1%; }
.home-page .orbit-barcode { top: 52%; left: 1%; }
.home-page .orbit-voucher { top: 52%; right: 0; }
.home-page .orbit-gst { bottom: 3%; left: 15%; }
.home-page .orbit-reports { bottom: 3%; right: 15%; }
.home-page .orbit-cloud { top: 0; left: calc(50% - 52px); }

.home-page .hero-copy { position: relative; z-index: 3; max-width: 500px; animation: hero-copy-in .8s .22s both; }
.home-page .hero-eyebrow { color: #13836b; font-size: .68rem; font-weight: 600; letter-spacing: .19em; margin-bottom: 24px; }
.home-page .hero-copy h1 { margin: 0; color: #202725; font-size: clamp(3rem, 5vw, 5.8rem); font-weight: 700; line-height: 1.04; letter-spacing: -.075em; }
.home-page .hero-copy h1 span { display: block; }
.home-page .hero-copy h1 .hero-product-name { color: #202725; white-space: nowrap; overflow-wrap: normal; }
.home-page .hero-subtitle { margin: 22px 0 36px; color: #64706b; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.home-page .hero-explore { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; min-width: 180px; min-height: 55px; padding: 6px 8px 6px 22px; background: #00a67e; border: 1px solid #00a67e; border-radius: 999px; color: #082a22; font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.home-page .hero-explore span { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; background: #fff; font-size: 1.1rem; }
.home-page .hero-explore:hover { background: #26b38e; transform: translateY(-2px); }
.home-page .hero-secondary { display: block; width: max-content; padding: 12px 0; margin-top: 13px; color: #35564b; font-size: .8rem; text-decoration: underline; text-decoration-color: #b5c9be; text-underline-offset: 5px; }
.home-page .hero-secondary:hover { color: #007356; }

.home-page .sale-section { border-top: 1px solid #edf0ee; padding: clamp(76px, 9vw, 132px) 0; }
.home-page .sale-grid { display: grid; grid-template-columns: minmax(290px, .75fr) minmax(0, 1.25fr); align-items: center; gap: clamp(44px, 6vw, 105px); }
.home-page .sale-copy { max-width: 500px; }
.home-page .sale-copy h2 { margin: 0; color: #202725; font-size: clamp(2.7rem, 4.4vw, 5rem); font-weight: 700; line-height: 1.1; letter-spacing: -.07em; }
.home-page .sale-description { max-width: 35ch; margin: 24px 0 29px; color: #5d6764; font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.75; }
.home-page .sale-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; padding: 0; list-style: none; border-top: 1px solid #e6eae7; }
.home-page .sale-highlights li { min-height: 51px; padding: 14px 0; border-bottom: 1px solid #e6eae7; font-size: .82rem; color: #3d4b45; }
.home-page .sale-highlights li::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: #00a67e; vertical-align: 2px; }
.home-page .sale-device { display: block; min-width: 0; }
.home-page .sale-device img { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 28px rgba(30, 42, 38, .11)); }
.home-page.home-motion [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.home-page.home-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.home-page.home-motion .sale-device { transition-delay: .13s; }

.home-page .cards-scroll { min-height: calc(100svh + clamp(360px, 48vh, 570px)); background: #fafbfa; border-top: 1px solid #eff1ef; }
.home-page .cards-stage { position: sticky; top: var(--header-height); display: flex; align-items: center; min-height: calc(100svh - var(--header-height)); padding-block: 56px; }
.home-page .cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(16px, 2vw, 28px); width: 100%; }
.home-page .scroll-card { display: flex; flex-direction: column; min-width: 0; min-height: 390px; padding: clamp(25px, 2.7vw, 40px); border: 1px solid #e4e8e5; border-radius: 18px; background: #fff; box-shadow: 0 15px 40px rgba(28, 45, 38, .045); }
.home-page.home-motion .scroll-card { opacity: var(--card-opacity, 1); transform: translate3d(0, var(--card-lift, 0px), 0); will-change: transform, opacity; }
.home-page .card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 40px; border: 1px solid #e1e8e3; border-radius: 16px; }
.home-page .card-kicker { color: #00886a; font-size: .66rem; font-weight: 600; letter-spacing: .17em; margin-bottom: 16px; }
.home-page .scroll-card h2 { margin: 0 0 20px; color: #202725; font-size: clamp(1.35rem, 1.8vw, 1.9rem); line-height: 1.3; letter-spacing: -.045em; font-weight: 700; }
.home-page .scroll-card > p:last-child { max-width: 31ch; margin-top: auto; color: #626e68; font-size: .88rem; line-height: 1.65; }
.home-page .plan-card { border-color: #a8d4c3; box-shadow: 0 20px 46px rgba(24, 81, 60, .075); }
.home-page .plan-card h2 { margin-bottom: 15px; }
.home-page .plan-loading { min-height: 44px; margin: 0 0 14px; color: #63716a; font-size: .84rem; line-height: 1.6; }
.home-page .home-price { margin: 5px 0 3px; color: #202725; font-family: 'Montserrat', sans-serif; font-size: clamp(1.7rem, 2.4vw, 2.5rem); font-weight: 700; letter-spacing: -.055em; }
.home-page .home-price span:last-child { margin-left: 7px; color: #65716b; font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.home-page .home-plan-name { color: #65716b; font-size: .77rem; }
.home-page .plan-includes { display: grid; gap: 10px; margin: 23px 0 26px; padding: 0; list-style: none; }
.home-page .plan-includes li { color: #3c4c44; font-size: .8rem; }
.home-page .plan-includes li::before { content: '✓'; color: #00886a; font-weight: 700; margin-right: 12px; }
.home-page .plan-card .site-button { align-self: start; margin-top: auto; border: 0; cursor: pointer; font: 600 .85rem 'Inter', sans-serif; }
.home-page .plan-card .site-button:disabled { opacity: .5; cursor: not-allowed; background: #e0e9e3; }

.home-page .system-requirements { padding: clamp(76px, 9vw, 124px) 0; border-top: 1px solid #e8ece9; background: #fff; }
.home-page .requirements-layout { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr); gap: clamp(42px, 6vw, 96px); align-items: start; }
.home-page .requirements-heading { max-width: 520px; }
.home-page .requirements-heading h2 { margin: 0; color: #202725; font-size: clamp(2.3rem, 4.2vw, 4.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.065em; overflow-wrap: normal; word-break: normal; }
.home-page .requirements-heading h2 span { display: block; white-space: nowrap; }
.home-page .requirements-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #dfe5e1; }
.home-page .requirements-list li { display: grid; grid-template-columns: minmax(150px, .8fr) auto minmax(180px, 1.2fr); gap: 24px; align-items: center; min-height: 72px; padding: 18px 0; border-bottom: 1px solid #dfe5e1; }
.home-page .requirements-list li::before { content: ''; grid-column: 1; grid-row: 1; width: 7px; height: 7px; margin-left: -20px; border-radius: 50%; background: #00a67e; }
.home-page .requirement-name { grid-column: 1; grid-row: 1; color: #26312d; font-size: .9rem; font-weight: 600; }
.home-page .requirement-divider { grid-column: 2; color: #9aa49f; font-size: .9rem; }
.home-page .requirements-list strong { grid-column: 3; color: #65706b; font-size: .87rem; font-weight: 400; line-height: 1.55; }

@keyframes hero-device-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-copy-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes orbit-enter { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes orbit-float { from { transform: translate3d(-2px, calc(-1 * var(--travel)), 0) rotate(-2deg); } to { transform: translate3d(3px, var(--travel), 0) rotate(2deg); } }

@media (max-width: 1150px) {
    .home-page .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr); gap: 25px; }
    .home-page .hero-art { height: 530px; }
    .home-page .orbit-icon { width: 56px; height: 56px; border-radius: 18px; }
    .home-page .orbit-item { width: 90px; }
    .home-page .orbit-cloud, .home-page .orbit-gst { display: none; }
    .home-page .sale-grid { gap: 38px; }
    .home-page .scroll-card { min-height: 370px; }
}
@media (max-width: 900px) {
    .home-page .hero-grid { grid-template-columns: 1fr; }
    .home-page .hero-art { width: min(100%, 760px); height: 550px; margin-inline: auto; }
    .home-page .hero-copy { max-width: none; text-align: center; }
    .home-page .hero-copy h1 span { display: inline; }
    .home-page .hero-copy h1 .hero-product-name { display: inline; }
    .home-page .hero-subtitle { margin: 16px 0 24px; }
    .home-page .hero-secondary { margin-inline: auto; }
    .home-page .sale-grid { grid-template-columns: 1fr; gap: 30px; }
    .home-page .sale-copy { max-width: 650px; }
    .home-page .sale-description { max-width: 50ch; }
    .home-page .cards-scroll { min-height: 0; padding: 72px 0 88px; }
    .home-page .cards-stage { position: static; display: block; min-height: 0; padding-block: 0; }
    .home-page .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-page .plan-card { grid-column: 1 / -1; }
    .home-page .scroll-card { min-height: 300px; }
    .home-page.home-motion .scroll-card { opacity: 1; transform: none; will-change: auto; }
    .home-page .requirements-layout { grid-template-columns: 1fr; gap: 38px; }
    .home-page .requirements-heading { max-width: 620px; }
}
@media (max-width: 600px) {
    .home-page .retail-hero { padding-top: 15px; padding-bottom: 76px; }
    .home-page .hero-art { height: min(92vw, 390px); }
    .home-page .hero-device { width: 84%; }
    .home-page .orbit-icon { width: 42px; height: 42px; border-radius: 14px; }
    .home-page .orbit-icon svg { width: 21px; height: 21px; }
    .home-page .orbit-item { width: 66px; gap: 3px; font-size: .54rem; }
    .home-page .orbit-inventory { right: 6%; }
    .home-page .orbit-billing { left: 7%; }
    .home-page .orbit-customers { left: -1%; }
    .home-page .orbit-purchases, .home-page .orbit-voucher, .home-page .orbit-gst, .home-page .orbit-reports { display: none; }
    .home-page .orbit-barcode { left: 2%; bottom: 4%; top: auto; }
    .home-page .orbit-cloud { display: flex; top: auto; bottom: 0; left: auto; right: 5%; }
    .home-page .hero-copy h1 { font-size: clamp(2.45rem, 10vw, 3.7rem); }
    .home-page .hero-eyebrow { margin-bottom: 15px; }
    .home-page .hero-subtitle { font-size: .98rem; }
    .home-page .sale-section { padding: 72px 0; }
    .home-page .sale-copy h2 { font-size: clamp(2.3rem, 9vw, 3.5rem); }
    .home-page .sale-highlights { gap: 0 12px; }
    .home-page .sale-highlights li { font-size: .73rem; }
    .home-page .cards-scroll { padding: 64px 0 76px; }
    .home-page .cards-grid { grid-template-columns: 1fr; }
    .home-page .plan-card { grid-column: auto; }
    .home-page .scroll-card { min-height: 290px; }
    .home-page .system-requirements { padding: 66px 0 74px; }
    .home-page .requirements-layout { gap: 30px; }
    .home-page .requirements-heading h2 { font-size: clamp(2.2rem, 10vw, 3.3rem); }
    .home-page .requirements-list li { grid-template-columns: 1fr; gap: 5px; min-height: 0; padding: 18px 0; }
    .home-page .requirements-list li::before { display: none; }
    .home-page .requirement-name, .home-page .requirements-list strong { grid-column: 1; grid-row: auto; }
    .home-page .requirement-divider { display: none; }
    .home-page .requirements-list strong { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .hero-art { transition: none; }
    .home-page .hero-device, .home-page .hero-copy, .home-page .orbit-item, .home-page .orbit-icon { animation: none; }
    .home-page.home-motion [data-reveal], .home-page.home-motion .scroll-card { opacity: 1; transform: none; transition: none; }
}
