/* ReStore motion layer. Loaded with js/motion.js. Everything animated is behind
   html:not(.calm), so visitors who prefer reduced motion (or switch animations off in the
   footer) get the still site. Only transform, opacity, filter and clip-path are animated. */

/* ---------- Global ---------- */
.m-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 20; background: var(--teal); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
html.calm .m-progress { display: none; }
html:not(.calm) .site-header { transition: box-shadow .3s, background-color .3s; }
html:not(.calm) .site-header.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.25); background: rgba(9,26,24,.98); }
.site-nav a { position: relative; transition: color .2s; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 1px; background: var(--teal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.site-nav a.on { color: #fff; }
.site-nav a.on::after { transform: scaleX(1); }

/* Word-by-word heading reveal (JS wraps words in .w > .wi) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em 0; margin: 0 -.06em -.14em 0; }
.wi { display: inline-block; }
html:not(.calm) .m-words:not(.in) .wi { transform: translateY(110%); }
html:not(.calm) .m-words .wi { transition: transform .85s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 55ms + var(--d, 0ms)); }

/* Generic rise-in */
html:not(.calm) .m-rv:not(.in) { opacity: 0; transform: translateY(26px); }
html:not(.calm) .m-rv { transition: opacity .75s ease, transform .85s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
html:not(.calm) .m-pop:not(.in) { opacity: 0; transform: scale(.92) translateY(14px); }
html:not(.calm) .m-pop { transition: opacity .6s ease, transform .7s cubic-bezier(.2,1.2,.3,1); transition-delay: var(--d, 0ms); }

/* Buttons: a light sweep on hover */
.btn-teal, .btn-teal-sm, .quote-cta a, .bundle .cta-btn, .form button[type="submit"] { position: relative; overflow: hidden; isolation: isolate; }
html:not(.calm) .btn-teal::after, html:not(.calm) .btn-teal-sm::after, html:not(.calm) .quote-cta a::after, html:not(.calm) .bundle .cta-btn::after, html:not(.calm) .form button[type="submit"]::after {
  content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); }
html:not(.calm) .btn-teal:hover::after, html:not(.calm) .btn-teal-sm:hover::after, html:not(.calm) .quote-cta a:hover::after, html:not(.calm) .bundle .cta-btn:hover::after, html:not(.calm) .form button[type="submit"]:hover::after { transform: translateX(120%); transition: transform .7s ease; }
html:not(.calm) .btn, html:not(.calm) .btn-teal-sm, html:not(.calm) .btn-outline-sm { transition: transform .2s ease, background .15s, border-color .15s; }
html:not(.calm) .btn:active, html:not(.calm) .btn-teal-sm:active { transform: scale(.97); }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero > .wrap, .hero > .stats { position: relative; z-index: 1; }
.m-aurora { position: absolute; inset: -20%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(40% 35% at 30% 40%, rgba(47,211,181,.16), transparent 70%), radial-gradient(35% 30% at 75% 55%, rgba(127,240,218,.12), transparent 70%), radial-gradient(30% 30% at 55% 85%, rgba(14,138,120,.18), transparent 70%); }
.m-aurora::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(127,240,218,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(127,240,218,.05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(60% 60% at 60% 45%, #000, transparent 75%); }
html:not(.calm) .m-aurora { opacity: 1; animation: m-drift 22s ease-in-out infinite alternate; }
@keyframes m-drift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg); } 50% { transform: translate3d(3%, 2%, 0) rotate(4deg); } 100% { transform: translate3d(-2%, 3%, 0) rotate(-3deg); } }

.orbit-wrap { perspective: 900px; }
.orbit.m-live { transform-style: preserve-3d; will-change: transform; }
.orbit.m-live > .orbit-chip { left: 0 !important; top: 0 !important; will-change: transform; transition: box-shadow .3s, border-color .3s; }
.orbit-chip.ping { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(47,211,181,.18), 0 0 18px rgba(47,211,181,.45); }
.orbit.m-live .orbit-ring { border-color: transparent; }
.m-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.m-rings circle { fill: none; stroke: rgba(127,240,218,.55); stroke-width: .35; stroke-dasharray: 1.4 1.4; }
html:not(.calm) .m-rings circle { animation: m-dash 6s linear infinite; }
@keyframes m-dash { to { stroke-dashoffset: -28; } }
.m-packets { position: absolute; inset: 0; pointer-events: none; }
.m-packet { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px 2px rgba(47,211,181,.7); will-change: transform, opacity; }
.m-packet.read { background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.55); }
.orbit-core { position: relative; z-index: 1; transition: box-shadow .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.orbit-core.hit { box-shadow: 0 0 0 6px rgba(47,211,181,.18), 0 0 80px rgba(47,211,181,.7); transform: scale(1.035); transition-duration: .12s; }
html:not(.calm) .orbit.m-live .orbit-core { animation: m-breathe 5s ease-in-out infinite; }
@keyframes m-breathe { 50% { box-shadow: 0 0 80px rgba(47,211,181,.5); } }

html:not(.calm) .hero h1 .m-sweep { background: linear-gradient(100deg, var(--teal-light) 0%, var(--teal-light) 40%, #fff 50%, var(--teal-light) 60%, var(--teal-light) 100%);
  background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: m-fadein .9s ease both, m-shine 1.6s ease-in-out forwards; animation-delay: var(--emd, 400ms), var(--sweep, 900ms); }
@keyframes m-fadein { from { opacity: 0; filter: blur(6px); } }
@keyframes m-shine { to { background-position: -50% 0; } }
html:not(.calm) .offer-pill b { position: relative; overflow: hidden; }
html:not(.calm) .offer-pill b::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-120%); animation: m-glint 5s ease-in-out 2s infinite; }
@keyframes m-glint { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* Stats */
.stat b { font-variant-numeric: tabular-nums; }
.m-inf svg { width: 64px; height: 32px; display: block; margin: 12px 0; }
.m-inf path { fill: none; stroke: var(--teal-light); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 160; stroke-dashoffset: 0; }
html:not(.calm) .m-inf:not(.in) path { stroke-dashoffset: 160; }
html:not(.calm) .m-inf.in path { transition: stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1) .3s; }

/* ---------- KStore ---------- */
.kstore-big .m-num { font: inherit; letter-spacing: inherit; color: inherit; display: inline-block; min-width: 1.15em; font-variant-numeric: tabular-nums; }
html:not(.calm) .kstore-card { transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s; }
html:not(.calm) .kstore-card.m-rv:not(.in) { transform: translateY(40px) rotate(-3deg); }
html:not(.calm) .kstore-card.in { animation: m-float 6s ease-in-out 1.2s infinite; }
html:not(.calm) .kstore-card:hover { animation-play-state: paused; transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 40px 80px rgba(6,32,28,.35); }
@keyframes m-float { 50% { transform: translateY(-8px); } }
html:not(.calm) .kstore-tag.in { animation: m-wobble .7s ease .4s; }
@keyframes m-wobble { 30% { transform: rotate(-3deg) scale(1.06); } 60% { transform: rotate(2deg); } }

/* ---------- Problem cards ---------- */
html:not(.calm) .card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
html:not(.calm) .card:not(.photo-card):hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12,31,29,.08); }
.card .card-title { position: relative; }

/* ---------- Approach: layers dock, data flows ---------- */
html:not(.calm) .layer.m-dock { transition: transform 1s cubic-bezier(.2,.8,.2,1), opacity .8s ease; transition-delay: var(--d, 0ms); }
html:not(.calm) .layer.m-dock:not(.in) { opacity: 0; }
html:not(.calm) .layer-1.m-dock:not(.in) { transform: translateY(-46px); }
html:not(.calm) .layer-3.m-dock:not(.in) { transform: translateY(46px); }
html:not(.calm) .layer-2.m-dock:not(.in) { transform: scale(.94); }
.connector { position: relative; }
.m-lane { position: absolute; left: 9px; top: 0; bottom: 0; width: 4px; overflow: hidden; }
.m-lane::before, .m-lane::after { content: ''; position: absolute; left: 0; width: 4px; height: 4px; border-radius: 50%; opacity: 0; }
.m-lane::before { background: var(--teal); box-shadow: 0 0 6px var(--teal); }
.m-lane::after { background: #fff; box-shadow: 0 0 6px #fff; }
html:not(.calm) .m-lane::before { animation: m-down 1.6s linear infinite; }
html:not(.calm) .m-lane::after { animation: m-up 1.6s linear infinite .8s; }
@keyframes m-down { 0% { top: -4px; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes m-up { 0% { top: 100%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { top: -4px; opacity: 0; } }
.connector > span { position: relative; z-index: 1; }
html:not(.calm) .layer { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, opacity .8s; }
html:not(.calm) .layer.pulse { box-shadow: 0 0 0 1px rgba(127,240,218,.5), 0 0 30px rgba(47,211,181,.25); }

/* ---------- Range ---------- */
.range-group > h3 { border-top-color: transparent !important; position: relative; }
.range-group > h3::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink); transform-origin: 0 50%; }
html:not(.calm) .range-group > h3:not(.in)::before { transform: scaleX(0); }
html:not(.calm) .range-group > h3::before { transition: transform 1s cubic-bezier(.2,.8,.2,1) .1s; }
.mod { position: relative; overflow: hidden; }
.mod > * { position: relative; z-index: 1; }
.mod::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(47,211,181,.16), transparent 60%); }
html:not(.calm) .mod { transition: transform .25s ease-out, border-color .25s, box-shadow .25s, opacity .7s ease, translate .85s cubic-bezier(.2,.8,.2,1); }
html:not(.calm) .mod:hover { border-color: rgba(47,211,181,.6); box-shadow: 0 18px 40px rgba(12,31,29,.08); }
html:not(.calm) .mod:hover::before { opacity: 1; }
html:not(.calm) .mod.m-rv:not(.in) { opacity: 0; translate: 0 22px; transform: none; }
html:not(.calm) .mod[aria-expanded="true"] .mod-addons { animation: m-open .45s cubic-bezier(.2,.8,.2,1); }
@keyframes m-open { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Field Ops ---------- */
html:not(.calm) .ops-grid:not([hidden]) .browser { animation: m-swap .6s cubic-bezier(.2,.8,.2,1); }
html:not(.calm) .ops-grid:not([hidden]) .ops-points .point { animation: m-swap .6s cubic-bezier(.2,.8,.2,1) backwards; }
html:not(.calm) .ops-grid:not([hidden]) .ops-points .point:nth-child(2) { animation-delay: .08s; }
html:not(.calm) .ops-grid:not([hidden]) .ops-points .point:nth-child(3) { animation-delay: .16s; }
@keyframes m-swap { from { opacity: 0; transform: translateY(14px); } }
html:not(.calm) .browser { transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
html:not(.calm) .browser:hover { transform: translateY(-4px); box-shadow: 0 50px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(127,240,218,.25); }
.tab { transition: background .25s, color .25s, border-color .25s; }

/* ---------- Standalone ---------- */
.photo-card { overflow: hidden; }
.photo-card img { transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
html:not(.calm) .photo-card.m-rv:not(.in) img { transform: scale(1.14); }
html:not(.calm) .photo-card:hover img { transform: scale(1.05); transition-duration: .8s; }
.zebra { position: relative; }
.zebra > img { will-change: transform; }
html:not(.calm) .zebra > img { transform: scale(1.12) translateY(var(--py, 0px)); }

/* ---------- Economics ---------- */
html:not(.calm) .compare.m-table tbody tr { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--r) * 90ms); }
html:not(.calm) .compare.m-table:not(.in) tbody tr { opacity: 0; transform: translateX(-14px); }
html:not(.calm) .compare.m-table .ours { background-image: linear-gradient(90deg, rgba(47,211,181,.25), rgba(47,211,181,0)); background-size: 0% 100%; background-repeat: no-repeat; transition: background-size .9s ease; transition-delay: calc(var(--r) * 90ms + .4s); }
html:not(.calm) .compare.m-table.in .ours { background-size: 100% 100%; }

/* ---------- Pricing ---------- */
.bundle-price b { font-variant-numeric: tabular-nums; display: inline-block; }
html:not(.calm) .bundle-price b.tick { animation: m-tick .5s ease; }
@keyframes m-tick { 30% { transform: translateY(-3px); color: var(--teal-light); } }
html:not(.calm) .bundle.best .bundle-price b.tick { animation-name: m-tick-dark; }
@keyframes m-tick-dark { 30% { transform: translateY(-3px); color: var(--teal-text); } }
@property --m-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
html:not(.calm) .bundle.best { box-shadow: none; position: relative; }
html:not(.calm) .bundle.best::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: 18px; background: conic-gradient(from var(--m-angle), var(--teal), #0c1f1d 25%, var(--teal-light) 50%, #0c1f1d 75%, var(--teal)); animation: m-spin 6s linear infinite; }
html:not(.calm) .bundles { isolation: isolate; }
@keyframes m-spin { to { --m-angle: 360deg; } }
.bundle-sep s { position: relative; text-decoration: none; }
.bundle-sep s::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: currentColor; transform-origin: 0 50%; }
html:not(.calm) .bundle:not(.in) .bundle-sep s::after { transform: scaleX(0); }
html:not(.calm) .bundle .bundle-sep s::after { transition: transform .6s ease calc(var(--d, 0ms) + .5s); }
html:not(.calm) .bundle { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .75s ease, translate .85s cubic-bezier(.2,.8,.2,1); }
html:not(.calm) .bundle:hover { transform: translateY(-6px); }
html:not(.calm) .bundle.m-rv:not(.in) { opacity: 0; translate: 0 26px; transform: none; }

/* ---------- Built here ---------- */
html:not(.calm) .till.ready .till-row, html:not(.calm) .till.ready .till-total { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); }
html:not(.calm) .till.print .till-row, html:not(.calm) .till.print .till-total { animation: m-print .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: var(--d); }
@keyframes m-print { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
.till-total b { font-variant-numeric: tabular-nums; }
html:not(.calm) .till.done .till-total b { animation: m-pop .5s ease; }
@keyframes m-pop { 40% { transform: scale(1.06); color: var(--teal-text); } }
.ruled { border-top-color: transparent !important; position: relative; }
.ruled::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--ink); transform-origin: 0 50%; }
html:not(.calm) .ruled:not(.in)::before { transform: scaleX(0); }
html:not(.calm) .ruled::before { transition: transform 1s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0ms) + .15s); }

/* ---------- Walkthrough CTA ---------- */
html:not(.calm) .cta .watermark { animation: m-turn 60s linear infinite; }
@keyframes m-turn { to { transform: rotate(360deg); } }
html:not(.calm) .form input, html:not(.calm) .form select { transition: border-color .2s, box-shadow .2s; }
.form input:focus, .form select:focus { outline: none; border-color: var(--teal-text); box-shadow: 0 0 0 3px rgba(47,211,181,.25); }
html:not(.calm) .thanks:not([hidden]) { animation: m-thanks .7s cubic-bezier(.2,1.2,.3,1); }
@keyframes m-thanks { from { opacity: 0; transform: scale(.94); } }
.m-check { width: 46px; height: 46px; }
.m-check circle { fill: var(--teal); }
.m-check path { fill: none; stroke: var(--on-teal); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
html:not(.calm) .thanks:not([hidden]) .m-check path { animation: m-tickdraw .5s ease .35s backwards; }
@keyframes m-tickdraw { from { stroke-dashoffset: 30; } }

/* ---------- Quote builder ---------- */
html:not(.calm) .qb-row { transition: background-color .25s; }
html:not(.calm) .qb-row input[type="checkbox"]:checked { animation: m-check .3s cubic-bezier(.2,1.4,.4,1); }
@keyframes m-check { 50% { transform: scale(1.25); } }
.qb-amount b { font-variant-numeric: tabular-nums; }
html:not(.calm) .qb-amount b.tick { animation: m-tick .5s ease; }
html:not(.calm) .qb-bundle:not([hidden]) { animation: m-swap .45s cubic-bezier(.2,.8,.2,1); }

/* ---------- Extras (js/extras.js) ---------- */
.orbit-chip[role="button"] { cursor: pointer; }
.orbit-chip[role="button"]:hover, .orbit-chip[role="button"]:focus-visible { border-color: var(--teal); background: #12403b; outline: none; }
/* Hoverable (no pointer-events: none): the pointer can move onto the tooltip to read it (WCAG 1.4.13). */
.m-tip { position: absolute; z-index: 30; max-width: 260px; background: #f3f5f2; color: var(--ink); border-radius: 12px; padding: 12px 14px; box-shadow: 0 20px 50px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.45; }
.m-tip b { font: 700 16px var(--display); }
.m-tip em { font: 500 11px var(--mono); font-style: normal; color: var(--teal-text); }
html:not(.calm) .m-tip:not([hidden]) { animation: m-swap .25s ease; }
html:not(.calm) .m-flash { animation: m-flash 1.4s ease; }
section[tabindex="-1"]:focus { outline: none; } /* an orbit chip moved focus to the whole section; the flash marks it */
@keyframes m-flash { 0%, 100% { box-shadow: none; } 20%, 60% { box-shadow: 0 0 0 3px var(--teal), 0 20px 40px rgba(47,211,181,.25); } }

.m-feed { margin-top: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; background: rgba(255,255,255,.03); }
.m-feed-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.m-feed-head small { font: 500 11px var(--mono); color: rgba(255,255,255,.62); margin-left: auto; text-transform: uppercase; letter-spacing: .04em; }
.m-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(47,211,181,.6); }
html:not(.calm) .m-live-dot { animation: m-live 1.6s ease-out infinite; }
@keyframes m-live { 70% { box-shadow: 0 0 0 8px rgba(47,211,181,0); } 100% { box-shadow: 0 0 0 0 rgba(47,211,181,0); } }
.m-feed-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.m-feed-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
/* Older rows fade only slightly, so their text keeps AA contrast. */
.m-feed-list li:nth-child(3) { opacity: .92; }
.m-feed-list li:nth-child(4) { opacity: .85; }
.m-feed-mod { font: 500 10.5px var(--mono); color: var(--on-teal); background: var(--teal); border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.m-feed-what { color: rgba(255,255,255,.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-feed-val { font: 500 12px var(--mono); color: rgba(255,255,255,.6); white-space: nowrap; }
.m-feed-ok { font: 500 10.5px var(--mono); color: var(--teal-light); white-space: nowrap; }
html:not(.calm) .m-feed-list li.new { animation: m-feedin .6s cubic-bezier(.2,.8,.2,1); }
html:not(.calm) .m-feed-list li.new .m-feed-ok { animation: m-okin .4s ease .5s backwards; }
@keyframes m-feedin { from { opacity: 0; transform: translateY(-12px) scale(.98); background: rgba(47,211,181,.18); } }
@keyframes m-okin { from { opacity: 0; transform: translateX(-6px); } }
@media (max-width: 520px) { .m-feed-list li { grid-template-columns: auto minmax(0, 1fr) auto; } .m-feed-val { display: none; } }

.till-col { display: flex; flex-direction: column; min-width: 0; } /* the till and its rate slider share one grid cell */
.m-rate { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-size: 13px; }
.m-rate span { font-weight: 600; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.m-rate small { font: 500 11px var(--mono); color: var(--muted-2); font-weight: 400; }
.m-rate input { width: 100%; accent-color: var(--teal-text); }
.m-rate output { font: 500 12px var(--mono); color: var(--teal-text); }

.m-teaser { display: flex; flex-direction: column; gap: 12px; }
.m-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.m-chips button { border: 1px solid rgba(6,32,28,.3); background: transparent; color: var(--on-teal); border-radius: 999px; padding: 6px 11px; font: 500 13px var(--sans); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.m-chips button:hover { border-color: var(--on-teal); }
.m-chips button[aria-pressed="true"] { background: var(--on-teal); color: var(--teal-light); border-color: var(--on-teal); }
html:not(.calm) .m-chips button:active { transform: scale(.95); }
.m-teaser-out { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.m-teaser-out b { font: 700 38px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.m-teaser-out small { flex-basis: 100%; font: 500 12px var(--mono); opacity: .75; }

.m-glow { background-image: radial-gradient(520px circle at var(--gx, -999px) var(--gy, -999px), rgba(47,211,181,.09), transparent 60%); }
.kstore.m-glow { background-image: radial-gradient(520px circle at var(--gx, -999px) var(--gy, -999px), rgba(255,255,255,.18), transparent 60%); }

/* ---------- Print ----------
   Nothing waits for scrolling on paper: content that hasn't risen in yet (the quote builder's module
   groups below the fold, word-split headings, table rows, the till) prints in its final state. */
@media print {
  .m-rv, .m-pop, .layer.m-dock, .compare.m-table tbody tr, .m-words .wi,
  .till.ready .till-row, .till.ready .till-total { opacity: 1 !important; transform: none !important; translate: none !important; clip-path: none !important; transition: none !important; animation: none !important; }
}