@font-face{font-family:"Luxia";src:url("/fonts/luxia-regular.otf") format("opentype");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Luxia Display";src:url("/fonts/luxia-display.otf") format("opentype");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("/fonts/euclid-regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("/fonts/euclid-medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("/fonts/euclid-semibold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Euclid Circular A";src:url("/fonts/euclid-bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
:root{--velvet:#470054;--oak:#7c3d00;--pure:#ffffff;--lavender:#635282;--olive:#c0caa0;--skin:#e7b997;--hillside:#90a572;--walnut:#e7d8c3;--velvet-deep:#33003d;--velvet-wash:rgba(71,0,84,0.07);--velvet-line:rgba(71,0,84,0.14);--bg:#fbf8f9;--surface:#ffffff;--surface-2:#f6f1f4;--surface-3:#efe7ec;--border:#ebe0e8;--text:#2b0f33;--dim:#6d5974;--faint:#9c8ba2;--brand:var(--velvet);--brand-soft:var(--velvet-wash);--positive:#5f7a44;--pending:var(--oak);--danger:#a3352c;--chiropractic:#7c3d00;--physiotherapy:#635282;--tcm:#b8763a;--pharmacy:#6d8a4e;--radius:16px;--shell:480px;--tabbar-h:64px;--font-head:"Luxia","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;--font-body:"Euclid Circular A","Euclid Circular",Avenir,"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}.card-title,.success h2,h1,h2,h3{font-family:var(--font-head);font-weight:600;letter-spacing:-.005em}button{font:inherit;background:none;border:none;cursor:pointer}a,button{color:inherit}a{text-decoration:none}input,select,textarea{font:inherit;width:100%;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 13px}input::placeholder,textarea::placeholder{color:var(--faint)}a:focus-visible,button:focus-visible,input:focus,select:focus,textarea:focus{outline:2px solid var(--velvet);outline-offset:2px}.shell{max-width:var(--shell);margin:0 auto;min-height:100dvh;background:var(--bg);border-left:1px solid var(--border);border-right:1px solid var(--border);display:flex;flex-direction:column}@media (max-width:520px){.shell{border:none}}.screen{flex:1 1;padding:0 18px calc(var(--tabbar-h) + 30px)}.demo-banner{background:var(--walnut);border-bottom:1px solid rgba(124,61,0,.22);color:var(--oak);font-size:11.5px;line-height:1.45;padding:8px 18px;text-align:center}.brandmark{display:inline-flex;align-items:center;gap:8px}.brandmark img{display:block;height:100%;width:auto}.brandmark .wordmark{font-family:var(--font-head);font-size:17px;font-weight:600;letter-spacing:.14em;color:var(--velvet);line-height:1}.brandmark.on-velvet .wordmark{color:var(--pure)}.brandmark .glyph{color:var(--velvet)}.brandmark.on-velvet .glyph{color:var(--pure)}.page-head{padding:20px 0 16px;display:flex;align-items:center;gap:12px}.page-head h1{font-size:24px;line-height:1.2}.page-head p{font-family:var(--font-body);font-size:13.5px;color:var(--dim);margin-top:6px;line-height:1.5}.back-btn{width:36px;height:36px;flex:0 0 36px;border-radius:12px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;font-size:17px;color:var(--velvet)}.back-btn:hover{background:var(--velvet-wash)}.home-top{padding:20px 0 18px;display:flex;align-items:center;gap:12px}.avatar{width:46px;height:46px;border-radius:50%;background:var(--velvet);display:grid;place-items:center;font-family:var(--font-head);font-weight:600;font-size:16px;color:var(--pure);flex:0 0 46px}.home-top .greeting{flex:1 1;min-width:0}.home-top .greeting span{display:block;font-size:12.5px;color:var(--dim)}.home-top .greeting strong{display:block;font-family:var(--font-head);font-size:19px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-line{font-size:12.5px;color:var(--dim);font-style:italic;margin:-6px 0 16px}.points-card{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--velvet) 0,var(--velvet-deep) 100%);border-radius:20px;padding:20px;display:block;color:var(--pure)}.points-card .sky{position:absolute;top:-14px;right:-10px;width:130px;height:130px;opacity:.5;pointer-events:none;color:var(--skin)}.points-card .row{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.points-card .label{font-size:12px;color:rgba(255,255,255,.72);letter-spacing:.02em}.points-card .value{font-family:var(--font-head);font-size:36px;font-weight:600;letter-spacing:-.02em;margin-top:4px;line-height:1.05}.tier-badge{padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid;white-space:nowrap}.tier-badge.silver{color:var(--pure);border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.12)}.tier-badge.gold{color:#2b0f33;border-color:var(--skin);background:var(--skin)}.tier-badge.platinum{color:#2b0f33;border-color:var(--olive);background:var(--olive)}.progress{position:relative;margin-top:18px}.progress-track{height:6px;border-radius:999px;background:rgba(255,255,255,.2);overflow:hidden}.progress-fill{height:100%;border-radius:999px;background:var(--skin)}.progress-note{font-size:12px;color:rgba(255,255,255,.78);margin-top:9px;line-height:1.45}.section{margin-top:28px}.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}.section-head h2{font-size:17px}.section-head a,.section-head button{font-family:var(--font-body);font-size:12.5px;color:var(--velvet);font-weight:600}.actions{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:11px;gap:11px}.action{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px;display:flex;flex-direction:column;gap:9px;min-height:112px;transition:border-color .15s ease,transform .15s ease}.action:hover{border-color:var(--velvet);transform:translateY(-1px)}.action .icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--velvet-wash);color:var(--velvet)}.action strong{font-family:var(--font-head);font-size:15px;font-weight:600;line-height:1.25}.action span{font-size:11.5px;color:var(--dim);line-height:1.4}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:block}.card+.card{margin-top:11px}.card.tap{transition:border-color .15s ease}.card.tap:hover{border-color:var(--velvet)}.card-title{font-size:15.5px;line-height:1.3}.card-sub{font-size:13px;color:var(--dim);margin-top:5px;line-height:1.5}.card-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.stack{display:flex;flex-direction:column;gap:11px}.booking{display:flex;gap:14px;align-items:flex-start}.booking .date-chip{flex:0 0 54px;background:var(--velvet-wash);border-radius:12px;padding:9px 0;text-align:center;color:var(--velvet)}.booking .date-chip .d{font-family:var(--font-head);font-size:20px;font-weight:600;line-height:1}.booking .date-chip .m{font-size:10.5px;letter-spacing:.05em;margin-top:4px;opacity:.75}.booking .body{flex:1 1;min-width:0}.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--surface-2);color:var(--dim);white-space:nowrap}.pill.confirmed{color:var(--positive);border-color:rgba(95,122,68,.35);background:rgba(144,165,114,.16)}.pill.requested{color:var(--oak);border-color:rgba(124,61,0,.3);background:rgba(231,185,151,.28)}.pill.cancelled{color:var(--danger);border-color:rgba(163,53,44,.3);background:rgba(163,53,44,.08)}.pill.brand{color:var(--velvet);border-color:var(--velvet-line);background:var(--velvet-wash)}.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}.chiprow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.chiprow::-webkit-scrollbar{display:none}.chip{padding:8px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:12.5px;color:var(--dim);white-space:nowrap;flex:0 0 auto}.chip.on{border-color:var(--velvet)}.btn,.chip.on{background:var(--velvet);color:var(--pure);font-weight:600}.btn{display:block;width:100%;padding:14px;border-radius:13px;font-size:14.5px;text-align:center}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.secondary{background:var(--surface);border:1px solid var(--velvet-line);color:var(--velvet)}.btn.ghost{background:none;border:1px solid var(--border);color:var(--dim)}.btn.danger{background:none;border:1px solid rgba(163,53,44,.4);color:var(--danger)}.btn-sm{width:auto;padding:9px 15px;font-size:13px;border-radius:11px}.btn-row{display:flex;gap:10px}.sticky-cta{position:-webkit-sticky;position:sticky;bottom:calc(var(--tabbar-h) + 12px);margin-top:22px;z-index:5}.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--shell);height:var(--tabbar-h);background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(6,1fr);z-index:50}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;color:var(--faint)}.tab .glyph{display:grid;place-items:center;height:20px}.tab.on{color:var(--velvet);font-weight:600}.meta-row{display:flex;flex-wrap:wrap;gap:6px 13px;font-size:12px;color:var(--dim);margin-top:9px}.meta-row span{display:inline-flex;align-items:center;gap:5px}.divider{height:1px;background:var(--border);margin:16px 0}.empty{text-align:center;padding:30px 18px;color:var(--dim);font-size:13.5px;line-height:1.55;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius)}.steps{display:flex;gap:6px;margin:4px 0 20px}.step{flex:1 1;height:4px;border-radius:999px;background:var(--surface-3)}.step.on{background:var(--velvet)}.option{width:100%;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.option.on{border-color:var(--velvet);background:var(--velvet-wash)}.datestrip{display:flex;gap:9px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.datestrip::-webkit-scrollbar{display:none}.dateopt{flex:0 0 58px;border-radius:13px;background:var(--surface);border:1px solid var(--border);padding:10px 0;text-align:center}.dateopt .wd{font-size:11px;color:var(--dim)}.dateopt .dd{font-family:var(--font-head);font-size:19px;font-weight:600;margin:3px 0;line-height:1}.dateopt .mm{font-size:10px;color:var(--faint)}.dateopt.on{border-color:var(--velvet);background:var(--velvet);color:var(--pure)}.dateopt.on .mm,.dateopt.on .wd{color:rgba(255,255,255,.8)}.dateopt:disabled{opacity:.35}.slots{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:9px;gap:9px}.slot{padding:12px 4px;border-radius:11px;background:var(--surface);border:1px solid var(--border);font-size:13.5px;text-align:center}.slot.on{border-color:var(--velvet);background:var(--velvet);color:var(--pure);font-weight:600}.slot:disabled{opacity:.32;text-decoration:line-through;cursor:not-allowed}.summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px}.summary .line{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:8px 0}.summary .line span:first-child{color:var(--dim);flex:0 0 auto}.summary .line span:last-child{text-align:right;font-weight:600}.summary .line.total{border-top:1px solid var(--border);margin-top:6px;padding-top:13px;font-size:15.5px}.note{font-size:12.5px;color:var(--dim);line-height:1.55;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 13px}.note.warn{color:var(--oak);background:var(--walnut);border-color:rgba(124,61,0,.22)}.success{text-align:center;padding:34px 10px}.success .tick{width:64px;height:64px;border-radius:50%;background:var(--velvet-wash);border:1px solid var(--velvet-line);color:var(--velvet);display:grid;place-items:center;margin:0 auto 18px}.success h2{font-size:21px;margin-bottom:8px}.success p{font-size:13.5px;color:var(--dim);line-height:1.6;max-width:310px;margin:0 auto}.cat-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}.cat-chiropractic{background:var(--chiropractic)}.cat-physiotherapy{background:var(--physiotherapy)}.cat-tcm{background:var(--tcm)}.cat-pharmacy{background:var(--pharmacy)}.prose{font-size:15.5px;line-height:1.72;color:#3d2444}.prose p{margin-bottom:16px}.prose h3{font-size:17px;color:var(--velvet);margin:26px 0 10px}.prose ul{margin:0 0 16px 19px}.prose li{margin-bottom:8px}.pullquote{font-family:var(--font-head);font-size:17px;line-height:1.5;color:var(--velvet);border-left:3px solid var(--skin);padding:4px 0 4px 16px;margin:24px 0}.redflags{background:rgba(163,53,44,.05);border:1px solid rgba(163,53,44,.25);border-radius:var(--radius);padding:16px;margin-top:24px}.redflags h3{font-size:15px;color:var(--danger);margin-bottom:9px}.redflags ul{margin-left:18px;font-size:13.5px;line-height:1.65;color:#6b3b36}.disclaimer{font-size:11.5px;color:var(--faint);line-height:1.6;margin-top:24px;padding-top:15px;border-top:1px solid var(--border)}.profile-head{display:flex;align-items:center;gap:15px;padding:8px 0 20px}.profile-head .avatar{width:62px;height:62px;flex:0 0 62px;font-size:22px}.profile-head h1{font-size:21px}.profile-head p{font-size:12.5px;color:var(--dim);margin-top:4px}.field{margin-bottom:14px}.field label{display:block;font-size:12px;color:var(--dim);font-weight:600;margin-bottom:7px}.readout{font-size:14px;padding:11px 13px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}.taglist{display:flex;flex-wrap:wrap;gap:7px}.rowlink{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-size:14.5px}.rowlink .chev{color:var(--faint)}.rowlink:hover{border-color:var(--velvet)}.toggle{width:46px;height:27px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border);position:relative;flex:0 0 46px;transition:background .15s ease}.toggle span{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--faint);transition:transform .15s ease,background .15s ease}.toggle.on{background:var(--velvet);border-color:var(--velvet)}.toggle.on span{transform:translateX(19px);background:var(--pure)}.ledger-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.ledger-entry:last-child{border-bottom:none}.ledger-entry .label{font-size:13.5px;line-height:1.4}.ledger-entry .date{font-size:11.5px;color:var(--faint);margin-top:3px}.ledger-entry .amt{font-family:var(--font-head);font-size:15px;font-weight:600;white-space:nowrap}.ledger-entry .amt.plus{color:var(--positive)}.ledger-entry .amt.minus{color:var(--dim)}.tier-row{display:flex;gap:11px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border)}.tier-row:last-child{border-bottom:none}.tier-row .marker{width:11px;height:11px;border-radius:50%;border:2px solid var(--surface-3);margin-top:5px;flex:0 0 11px}.tier-row.reached .marker{background:var(--velvet);border-color:var(--velvet)}.tier-row ul{margin:7px 0 0 17px;font-size:12.5px;color:var(--dim);line-height:1.6}.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar-h) + 18px);z-index:100;background:var(--velvet);color:var(--pure);border-radius:13px;padding:12px 17px;font-size:13px;max-width:calc(var(--shell) - 40px);box-shadow:0 12px 30px rgba(71,0,84,.28);text-align:center}.event-progress{height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden;margin-top:11px}.event-progress i{display:block;height:100%;background:var(--skin)}
/* ============ motion ============================================
   Short, purposeful movement only: screens ease in, taps answer
   immediately, and progress animates so a changed number is noticed.
   Every effect below is switched off for visitors who ask their
   device for reduced motion (see the guard at the end).            */

/* Screen entrance — first paint of a page staggers its sections in. */
.screen.enter > * {
  animation: screen-rise .34s cubic-bezier(.22, .9, .3, 1) backwards;
}
.screen.enter > *:nth-child(1) { animation-delay: .02s }
.screen.enter > *:nth-child(2) { animation-delay: .06s }
.screen.enter > *:nth-child(3) { animation-delay: .10s }
.screen.enter > *:nth-child(4) { animation-delay: .14s }
.screen.enter > *:nth-child(n+5) { animation-delay: .18s }
@keyframes screen-rise { from { opacity: 0; transform: translateY(10px) } }

/* Re-render inside a page (booking steps, refreshes) — a soft cross-fade,
   no movement, so tapping a chip never feels like the page jumped. */
.screen.refresh { animation: screen-fade .16s ease-out }
@keyframes screen-fade { from { opacity: .35 } }

/* Taps answer instantly. */
.btn, .chip, .slot, .dateopt, .option, .action, .card.tap, .rowlink, .back-btn, .toggle {
  transition: transform .12s cubic-bezier(.2, .8, .3, 1), background-color .15s ease,
              border-color .15s ease, color .15s ease, opacity .15s ease;
}
.btn:active:not(:disabled), .btn-sm:active:not(:disabled) { transform: scale(.975) }
.chip:active, .slot:active:not(:disabled), .dateopt:active:not(:disabled),
.option:active, .action:active, .card.tap:active, .rowlink:active, .back-btn:active {
  transform: scale(.985);
}
.action:active { transform: translateY(0) scale(.985) }
.slot.on, .dateopt.on, .chip.on { animation: pick .22s cubic-bezier(.3, 1.4, .5, 1) }
@keyframes pick { from { transform: scale(.9) } 50% { transform: scale(1.03) } }

/* Points: the bar grows to its value, so progress reads as progress. */
.progress-fill { animation: grow .8s .12s cubic-bezier(.22, .9, .3, 1) backwards }
@keyframes grow { from { width: 0 } }
.points-card .value { animation: value-in .5s .1s cubic-bezier(.22, .9, .3, 1) backwards }
@keyframes value-in { from { opacity: 0; transform: translateY(6px) } }
/* The brandbook's moons drift, very slowly, like a night sky. */
.points-card .sky { animation: drift 14s ease-in-out infinite alternate }
@keyframes drift { to { transform: translate3d(-5px, 5px, 0) rotate(-3deg) } }

/* Confirmation should feel like an answer, not a page swap. */
.success .tick { animation: tick-pop .42s cubic-bezier(.3, 1.5, .5, 1) both }
@keyframes tick-pop { from { opacity: 0; transform: scale(.6) } }
.toast { animation: toast-rise .26s cubic-bezier(.22, .9, .3, 1) }
@keyframes toast-rise { from { opacity: 0; transform: translate(-50%, 14px) } }

/* Steps fill as you advance through booking. */
.step { transition: background-color .3s ease }
.tab .glyph { transition: transform .18s cubic-bezier(.3, 1.3, .5, 1) }
.tab.on .glyph { transform: translateY(-1px) scale(1.06) }
.pill, .tier-badge { transition: background-color .2s ease, color .2s ease }

/* An empty state should arrive gently rather than blink into place. */
.empty { animation: screen-rise .3s ease-out backwards }

/* Vouchers: the code is what the crew reads back, so it gets the headline
   treatment; a spent voucher stays legible but clearly done. */
.voucher .v-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: grid; place-items: center; background: var(--velvet-wash); color: var(--velvet) }
.voucher .v-code { font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .12em; color: var(--velvet); margin-top: 3px }
.voucher .v-expiry { font-size: 11.5px; color: var(--faint); margin-top: 8px }
.voucher.spent { opacity: .62 }
.voucher.spent .v-icon { background: var(--surface-3); color: var(--faint) }
.voucher.spent .v-code { color: var(--dim) }

/* The redeemed screen is what staff look at: unmistakably LUNOX, with a live
   clock so a screenshot can never pass for the real thing. */
.redeemed-hero { text-align: center; margin-top: 22px; padding: 34px 20px 30px; border-radius: 20px; background: linear-gradient(155deg, var(--velvet) 0, var(--velvet-deep) 100%); color: var(--pure) }
.redeemed-hero .big-tick { width: 68px; height: 68px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.4); display: grid; place-items: center; margin: 0 auto 16px; font-size: 30px; animation: tick-pop .42s cubic-bezier(.3, 1.5, .5, 1) both }
.redeemed-hero h2 { font-size: 22px; margin-bottom: 14px }
.redeemed-hero .r-title { font-size: 14.5px; line-height: 1.4 }
.redeemed-hero .r-value { font-family: var(--font-head); font-size: 26px; font-weight: 600; margin-top: 6px }
.redeemed-hero .r-code { font-family: var(--font-head); font-weight: 600; letter-spacing: .14em; font-size: 14px; margin-top: 10px; color: var(--skin) }
.redeemed-hero .r-when { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 16px }
.redeemed-hero .live-clock { font-family: var(--font-head); font-size: 34px; font-weight: 600; letter-spacing: .04em; margin-top: 4px; font-variant-numeric: tabular-nums }
.redeemed-hero .r-note { font-size: 11.5px; color: rgba(255,255,255,.65); margin-top: 10px }

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