@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/cormorant-garamond.ttf') format('truetype');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
.store {
  --bg: #f9f9f3;
  --store-stage: #e7eee3;
  --store-display: 'Cormorant Garamond', Georgia, serif;
  background: var(--bg);
  color: var(--ink);
  caret-color: var(--accent);
  scrollbar-color: var(--line-strong) var(--bg);
}
.store ::selection { background: #c9e0d2; color: #16201b; }
.store a { text-underline-offset: .2em; }
.store :focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.store .button { min-height: 46px; padding: .75rem 1.1rem; gap: .6rem; }
.store .button:disabled, .store .button:disabled:hover { cursor: not-allowed; color: var(--ink-2); background: #e2e6df; border-color: var(--line-strong); }
.store .brand { color: var(--ink); font-size: 1.4rem; gap: .7rem; }
.store .brand-mark { width: 40px; height: 40px; border-radius: 12px; font-size: 1.2rem; }
.store-bar { padding: 1.15rem max(1.5rem, calc((100vw - 1280px) / 2)); background: var(--bg); border-bottom: 1px solid var(--line); gap: 1.5rem; }
.store-nav { gap: 1.65rem; align-items: center; font-size: .9rem; }
.store-nav > a:not(.button) { padding-block: .65rem; }
.store-nav > a { text-decoration: none; }
.store-nav a[aria-current] { font-weight: 650; }
.store-mobile-nav { display: none; position: relative; }
.store-mobile-nav summary { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; font-weight: 600; }
.store-mobile-nav summary::after { content: ''; border-right: 1.5px solid; border-bottom: 1.5px solid; width: 6px; height: 6px; transform: rotate(45deg); margin-left: .3rem; }
.store-mobile-nav[open] summary::after { transform: rotate(225deg); }
.store-mobile-nav summary::-webkit-details-marker { display: none; }
.store-mobile-nav nav { position: absolute; right: 0; top: calc(100% + .6rem); width: min(280px, calc(100vw - 2rem)); padding: .6rem; background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px #16201b1a; z-index: 10; }
.store-mobile-nav nav a { display: block; padding: .8rem; border-radius: 6px; text-decoration: none; color: var(--ink); }
.store-mobile-nav nav a:hover { background: var(--accent-soft); }
.store-main { width: min(calc(100% - 3rem), 1280px); margin: 0 auto; gap: 0; min-height: 50vh; }
.store-main > * { min-width: 0; }
.store .lead { color: var(--ink-2); font-size: 1.1rem; line-height: 1.7; max-width: 62ch; }
.store h1, .store-page-title h1, .landing-hero h1, .store h2 { font-family: var(--store-display); font-weight: 600; letter-spacing: -.025em; line-height: 1.06; text-wrap: balance; }
.store h1 { font-size: clamp(3rem, 5.7vw, 5.5rem); }
.store h2 { font-size: clamp(2.2rem, 3.6vw, 3.6rem); }
.store h1 em, .store h2 em { font-style: normal; color: var(--accent); }
.store p { line-height: 1.65; }
.store-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.landing-hero { display: grid; grid-template-columns: .9fr 1.15fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; padding-block: 5.5rem 5rem; }
.landing-hero h1 { font-size: clamp(4rem, 6.6vw, 6rem); }
.hero-copy .lead { margin-block: 1.65rem 1.8rem; font-size: 1.0625rem; max-width: 46ch; }
.hero-reassurance { color: var(--muted); font-size: .82rem; margin-top: 1.1rem; }
.hero-product { margin: 0; background: var(--store-stage); padding: 1.5rem; border-radius: 18px; }
.product-heading { display: flex; align-items: center; gap: .65rem; color: var(--accent); font-weight: 650; font-size: .92rem; margin-bottom: 1rem; }
.hero-product a { display: block; border-radius: 8px; }
.hero-product img { display: block; width: 100%; height: auto; border: 1px solid #c9d6ca; border-radius: 8px; box-shadow: 0 12px 30px #203e2524; }
.store figcaption { color: var(--muted); font-size: .78rem; line-height: 1.6; margin-top: 1.1rem; }
.hero-product figcaption { color: #435a47; }
.workflow-section { padding-block: 3.5rem 4rem; border-block: 1px solid var(--line-strong); text-align: center; }
.workflow-section h2 { font-size: clamp(2rem, 3.2vw, 3rem); }
.section-intro { color: var(--muted); margin-top: .7rem; }
.workflow-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.6rem; list-style: none; padding: 0; margin: 2.7rem 0 0; text-align: left; }
.workflow-list li { border-top: 1px solid #bcccbf; padding-top: 1.35rem; }
.workflow-list .icon { width: 28px; height: 28px; color: var(--accent); margin-bottom: .65rem; }
.workflow-list h3 { font-size: 1rem; margin-bottom: .4rem; }
.workflow-list p { color: var(--muted); font-size: .87rem; max-width: 24ch; }
.problem-section { display: grid; grid-template-columns: .9fr 1fr; gap: 6rem; padding-block: 7rem; align-items: start; }
.problem-section > div > p { color: var(--ink-2); max-width: 42ch; margin-top: 1.5rem; }
.problem-list { margin: 0; padding: 0; list-style: none; }
.problem-list li { display: flex; align-items: start; gap: 1.2rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; }
.problem-list li:first-child { padding-top: .3rem; }
.problem-list .icon { color: var(--accent); flex-shrink: 0; width: 24px; height: 24px; margin-top: .2rem; }
.benefits-section { padding: 4.5rem 3rem; background: var(--store-stage); border-radius: 16px; }
.benefit-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-block: 2.5rem; }
.benefit-rows h3 { font-size: 1.1rem; margin-bottom: .8rem; }
.benefit-rows p { color: #435a47; font-size: .96rem; }
.tour-section { padding-block: 7rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2.5rem; }
.section-heading p { margin-top: 1.2rem; color: var(--ink-2); max-width: 55ch; }
.section-heading .button { flex-shrink: 0; }
.tour-image { margin: 0; padding: 1.5rem; background: var(--store-stage); border-radius: 16px; }
.tour-image img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line-strong); }
.faq-section { display: grid; grid-template-columns: .9fr 1fr; gap: 5rem; padding-block: 4rem 6rem; }
.faq-section > div > p { margin-top: 1.2rem; color: var(--muted); }
.faq-list details { padding-block: 1.4rem; border-bottom: 1px solid var(--line-strong); }
.faq-list details:first-child { border-top: 1px solid var(--line-strong); }
.faq-list summary { cursor: pointer; font-weight: 650; line-height: 1.5; }
.faq-list details p { margin: 1rem 0 .25rem; color: var(--ink-2); }
.store-closing { padding: 3.5rem; border-radius: 16px; background: var(--accent); color: white; margin-bottom: 5rem; display: flex; gap: 2rem; justify-content: space-between; align-items: center; }
.store-closing h2 { font-size: clamp(2.2rem, 3.3vw, 3.3rem); }
.store-closing p { color: #d8e9df; margin-top: .9rem; max-width: 52ch; }
.store-closing .store-actions { flex-direction: column; align-items: stretch; flex-shrink: 0; }
.store-closing .button { background: white; color: var(--accent); border-color: white; }
.store-closing .button-secondary { background: transparent; color: white; border-color: #aecdbf; }
.store-closing .button:hover { background: #e2f0ea; color: var(--accent); }
.store-footer { padding: 3.5rem max(1.5rem, calc((100vw - 1280px) / 2)) 1.5rem; background: #eef2e9; border-top: 1px solid var(--line); font-size: .87rem; }
.store-footer-top { display: grid; grid-template-columns: 1.2fr .8fr 1fr 1.25fr; gap: 2rem; }
.store-footer-top p { margin-top: 1rem; color: var(--muted); }
.store-footer nav, .store-footer-contact { display: flex; flex-direction: column; align-items: start; gap: .7rem; }
.store-footer a:not(.brand) { color: var(--ink-2); }
.store-footer strong { margin-bottom: .3rem; }
.store-footer-contact { min-width: 0; overflow-wrap: anywhere; }
.store-footer-contact .icon { width: 16px; height: 16px; vertical-align: middle; }
.store-footer-contact a:last-child { display: inline-flex; align-items: center; gap: .4rem; }
.store-footer-legal { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin-top: 1.75rem; font-size: .85rem; }
.store-footer-legal a { color: inherit; opacity: .85; }
.store-legal { width: min(100% - 2rem, 46rem); margin: 0 auto 3rem; }
.store-legal-body { line-height: 1.7; }
.store-legal-body h2 { font-size: 1.2rem; margin: 1.6rem 0 .4rem; }
.store-legal-body h3 { font-size: 1.05rem; margin: 1.2rem 0 .3rem; }
.store-legal-body ul, .store-legal-body ol { padding-left: 1.3rem; }
.store-legal-body > :first-child { margin-top: 0; }
.store-footer-bottom { color: var(--muted); padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--line-strong); font-size: .78rem; }
.store-page-title { padding-block: 4.5rem 3rem; }
.store-page-title h1 { margin-bottom: 1.5rem; }
.store-page-title.centered { text-align: center; }
.store-page-title.centered .lead { margin: 0 auto 1.5rem; }
.store-page-title.compact { padding-block: 3rem 2rem; }
.store-page-title.compact h1 { font-size: clamp(2.5rem, 4.5vw, 4rem); }
.store-page-title.compact > .text-link { margin-bottom: 1.5rem; }
.store .plan-grid { gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: stretch; }
.store .plan-card { padding: 2rem; box-shadow: none; gap: 1.2rem; border-color: #d7ddd1; }
.store .plan-card h2 { font-size: 2.6rem; }
.plan-featured { background: #e7eee3; }
.plan-description { color: var(--ink-2); min-height: 3.3em; font-size: .93rem; }
.store .plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; font-variant-numeric: tabular-nums; }
.store .plan-price strong { font-family: var(--font); font-size: clamp(1.8rem, 2.6vw, 2.3rem); letter-spacing: -.03em; }
.store .plan-price span { font-size: .82rem; }
.plan-foundation { color: var(--ink-2); font-size: .88rem; }
.plan-install { font-size: .86rem; font-weight: 650; color: #0f5f4b; margin: 0; }
.plan-featured .plan-install { color: #d7f0c4; }
.store .plan-includes { gap: .65rem; font-size: .9rem; }
.store .plan-includes li { display: flex; gap: .65rem; align-items: start; }
.store .plan-includes li::before { content: none; }
.store .plan-includes .icon { width: 16px; height: 16px; margin-top: .2rem; flex-shrink: 0; color: var(--accent); }
.store .plan-card > .text-link { padding-top: 1rem; font-size: .86rem; }
.store-note { color: var(--muted); font-size: .88rem; margin-block: 1.5rem 4.5rem; text-align: center; }
.compare-section { margin-bottom: 3rem; }
.compare-section > h2 { margin-bottom: 2rem; }
.compare-hint { display: none; color: var(--muted); font-size: .85rem; margin-bottom: 1rem; }
.plan-comparison { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 12px; background: white; }
.plan-comparison table { min-width: 640px; width: 100%; font-size: .9rem; border-collapse: collapse; }
.plan-comparison caption { padding: 1rem; text-align: left; color: var(--muted); font-size: .83rem; }
.plan-comparison th, .plan-comparison td { padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); text-align: left; white-space: normal; }
.plan-comparison thead th { background: #eef2e9; color: var(--ink); }
.plan-comparison tbody th { font-weight: 500; width: 32%; }
.plan-comparison td { font-variant-numeric: tabular-nums; }
.plan-comparison tr:last-child > * { border-bottom: 0; }
.store-checkout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; align-items: start; margin-bottom: 5rem; }
.store .card { box-shadow: none; padding: clamp(1.4rem, 3vw, 2.5rem); }
.store .card h2 { font-family: var(--font); font-size: 1.45rem; line-height: 1.3; letter-spacing: -.015em; }
.store .plan-card h2 { font-family: var(--store-display); font-size: 2.6rem; }
.store .card .license-key { overflow-wrap: anywhere; }
.store .card h2 .mono { overflow-wrap: anywhere; }
.store .stack { gap: 1.1rem; }
.order-summary { background: #eef2e9; }
.store-account-layout, .store-contact-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 5rem; align-items: center; padding-block: 4rem 5rem; }
.store-account-layout .store-page-title, .store-contact-layout .store-page-title { padding: 0; }
.store-account-layout .store-page-title > p + p { margin-top: 1.25rem; color: var(--muted); }
.store-contact-layout { align-items: start; }
.store-contact-layout h1 { font-size: clamp(3rem, 5.3vw, 5rem); }
.contact-panel { margin-top: 1rem; }
.contact-address { overflow-wrap: anywhere; font-size: .9rem; }
.contact-divider { border-top: 1px solid var(--line); padding-top: 1.3rem; margin-top: .6rem; }
.contact-divider h3 { font-size: 1rem; margin-bottom: .6rem; }
.contact-divider .text-link { margin-top: .8rem; }
.contact-reasons { margin-top: 2rem; display: grid; gap: 1.8rem; max-width: 52ch; }
.contact-reasons h2 { font-family: var(--font); font-size: 1.2rem; margin-bottom: .6rem; }
.contact-reasons p { color: var(--ink-2); }
.demo-agenda { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: 1rem; }
.demo-agenda li { display: flex; gap: .8rem; align-items: center; color: var(--ink-2); }
.demo-agenda .icon { color: var(--accent); flex-shrink: 0; }
.demo-preview { margin: 0 0 4rem; max-width: 960px; }
.demo-preview img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-strong); }
.store-main > .store-narrow { margin-block: 4rem; width: min(100%, 42rem); }
.store-main > .page-header:not(.store-page-title) { padding-top: 3rem; margin-bottom: 1.5rem; }
.store-main > .card:not(.plan-card):not(.store-narrow) { margin-bottom: 2rem; }
.store .flash p { margin: 0 0 .5rem; }
.store .page-header .mono { overflow-wrap: anywhere; }
@media (max-width: 1050px) {
  .store-nav { gap: 1rem; }
  .landing-hero { gap: 2rem; }
  .landing-hero h1 { font-size: 4.6rem; }
  .hero-product { padding: 1rem; }
  .problem-section, .faq-section, .store-contact-layout, .store-account-layout { gap: 2.5rem; }
  .store-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .store-closing { flex-direction: column; align-items: start; }
  .store-closing .store-actions { flex-direction: row; }
}
@media (max-width: 800px) {
  .store-bar { padding: 1rem 1.25rem; }
  .store-nav { display: none; }
  .store-mobile-nav { display: block; }
  .store-main { width: calc(100% - 2.5rem); }
  .landing-hero { grid-template-columns: 1fr; padding-block: 3rem 3.5rem; gap: 2.3rem; }
  .landing-hero h1 { font-size: clamp(3.8rem, 11vw, 5rem); }
  .desktop-break { display: none; }
  .hero-copy .lead { max-width: 60ch; }
  .hero-product { padding: 1.25rem; }
  .workflow-section { padding-block: 2.5rem; }
  .workflow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 2rem; }
  .problem-section, .faq-section { grid-template-columns: 1fr; padding-block: 4rem; gap: 2rem; }
  .problem-section h2 br { display: none; }
  .benefits-section { padding: 2.5rem 1.5rem; }
  .benefit-rows { grid-template-columns: 1fr; gap: 1.6rem; margin-block: 1.8rem; }
  .benefit-rows article + article { border-top: 1px solid #bcccbf; padding-top: 1.5rem; }
  .tour-section { padding-block: 4rem; }
  .section-heading { flex-direction: column; align-items: start; }
  .tour-image { padding: .75rem; }
  .store-closing { padding: 2rem 1.5rem; margin-bottom: 3rem; }
  .store-page-title { padding-block: 3rem 2rem; }
  .store .plan-card { padding: 1.7rem; }
  .compare-hint { display: block; }
  .store-checkout, .store-account-layout, .store-contact-layout { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3rem; }
  .store-account-layout, .store-contact-layout { padding-block: 3rem 1rem; }
  .store .order-summary { padding: 1.6rem; }
  .store-main > .store-narrow { margin-block: 3rem; }
  .store-footer { padding: 2.5rem 1.25rem 1.5rem; }
}
@media (max-width: 450px) {
  .store .brand { font-size: 1.25rem; }
  .store .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .hero-copy .store-actions { align-items: stretch; flex-direction: column; }
  .hero-copy .store-actions > .button { justify-content: center; }
  .hero-product { padding: .9rem; }
  .product-heading { font-size: .82rem; gap: .4rem; }
  .store-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
  .store-footer-top > :first-child, .store-footer-contact { grid-column: 1 / -1; }
  .store-closing .store-actions { flex-direction: column; width: 100%; }
  .store-closing .button { justify-content: center; }
  .store .plan-price strong { font-size: 2rem; }
  .store-page-title h1 { font-size: 3rem; }
}

/* Public product site: editorial salon identity, connected workflow demonstrations. */
.store { --bg: #faf8f2; --store-stage: #e7eee3; color-scheme: light; }
.store-main { width: min(calc(100% - 4rem), 1280px); }
.store-bar { padding-block: 1.2rem; }
.store-main [id] { scroll-margin-top: 2rem; }
.store input, .store select { border-color: #7b897f; }
.store .button-secondary { border-color: #6f8377; }
.salon-hero { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 3rem; padding-block: 5rem 4rem; }
.salon-hero h1 { font-size: clamp(4rem, 6.6vw, 6rem); line-height: .96; }
.salon-hero-copy .lead { max-width: 43ch; margin-block: 1.8rem; font-size: 1.05rem; }
.hero-demo-link { display: inline-flex; gap: .5rem; align-items: center; color: var(--accent); font-weight: 600; padding-block: .8rem; }
.salon-hero-scene { min-width: 0; background: #173e32; border-radius: 20px; padding: 1.7rem; box-shadow: 0 24px 55px #20392d1a; }
.scene-heading { color: #e3eddd; display: flex; gap: 1rem; justify-content: space-between; align-items: center; margin-bottom: 1.6rem; font-size: .85rem; }
.scene-heading > span, .scene-heading a { display: inline-flex; align-items: center; gap: .5rem; }
.scene-heading a { color: #e3eddd; text-decoration: none; white-space: nowrap; }
.scene-heading .icon { width: 18px; height: 18px; }
.salon-screen { margin: 0; border-radius: 10px; overflow: hidden; background: #f9faf7; }
.screen-bar { padding: .65rem 1rem; display: flex; justify-content: space-between; font-size: .68rem; color: #3f5746; border-bottom: 1px solid #d2ddd1; gap: 1rem; }
.salon-screen img { display: block; width: 100%; height: auto; }
.salon-screen figcaption { margin: 0; padding: .7rem 1rem; font-size: .7rem; color: #4e6255; }
.scene-appointment { display: flex; align-items: center; gap: .8rem; background: #e4eddb; color: #173e32; padding: 1rem; margin: 1.2rem 0 0 2rem; border-radius: 8px; }
.appointment-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #c8d8bb; font-family: var(--store-display); font-size: 1.4rem; flex-shrink: 0; }
.scene-appointment strong { display: block; font-size: .85rem; }
.scene-appointment div > span { font-size: .72rem; }
.sample-status { margin-left: auto; padding: .3rem .6rem; background: #fff; font-size: .7rem; border-radius: 4px; }
.scene-bottom { display: flex; justify-content: space-between; color: #d5e4d9; padding-top: 1.4rem; font-size: .75rem; }
.scene-bottom span { display: flex; gap: .4rem; align-items: center; }
.scene-bottom .icon { width: 17px; height: 17px; }
.trust-section { padding-block: 3rem 4rem; border-bottom: 1px solid #becbbf; }
.trust-section h2 { font-size: clamp(2rem, 3vw, 2.8rem); text-align: center; }
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 2.8rem; }
.trust-row > div { display: grid; grid-template-columns: 26px 1fr; gap: .5rem .9rem; }
.trust-row .icon { color: var(--accent); grid-row: 1 / 3; }
.trust-row strong { font-size: .92rem; }
.trust-row p { font-size: .83rem; color: var(--muted); }
.role-section, .modules-section, .transformation-section, .stories-section { padding-block: 5rem; }
.role-section .section-heading, .modules-section .section-heading, .transformation-section .section-heading, .stories-section .section-heading { margin-bottom: 2.5rem; }
.tab-list { display: none; gap: .5rem; padding-bottom: 1.3rem; }
.tabs-ready .tab-list { display: flex; flex-wrap: wrap; }
.tab-list button { min-height: 46px; padding: .8rem 1.2rem; background: transparent; border: 1px solid #718578; border-radius: 6px; color: #294337; font: inherit; font-size: .92rem; cursor: pointer; }
.tab-list button:hover { background: #e3ebdf; }
.tab-list button[aria-selected="true"] { background: #173e32; color: white; border-color: #173e32; text-decoration: underline; text-underline-offset: .3em; }
.role-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 3rem; background: #e7eee3; border-radius: 12px; align-items: center; margin-bottom: 1rem; }
[hidden] { display: none !important; }
.role-body h3 { font-family: var(--store-display); font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
.role-body p { margin-block: 1rem; color: #435a47; max-width: 54ch; }
.role-body ul, .module-card ul, .feature-detail ul { padding-left: 1.2rem; margin-block: 1.3rem; }
.role-body li, .module-card li, .feature-detail li { margin-block: .6rem; line-height: 1.55; }
.role-preview { background: #fafcf8; border: 1px solid #c5d1bf; border-radius: 8px; padding: 1.6rem; }
.preview-title { font-size: .94rem; font-weight: 650; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-bottom: 1rem; border-bottom: 1px solid #d5ddd1; }
.preview-title span { font-size: .7rem; font-weight: 400; color: #52634f; }
.preview-report { padding-top: 1.3rem; }
.preview-report > strong { font-family: var(--store-display); font-size: 1.7rem; }
.preview-report > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .9rem; border-bottom: 1px solid #d9e1d4; font-size: .83rem; }
.preview-report b { color: var(--accent); }
.role-preview > p { font-size: .85rem; color: #52634f; margin-top: 1rem; }
.schedule-line { display: flex; gap: 1.2rem; padding-block: 1.25rem; border-bottom: 1px solid #d5ddd1; font-size: .82rem; }
.schedule-line:last-child { border-bottom: 0; }
.schedule-line time { font-variant-numeric: tabular-nums; color: var(--accent); }
.schedule-line strong, .schedule-line span { display: block; }
.schedule-line span { font-size: .75rem; color: #52634f; padding-top: .4rem; }
.client-preview > strong { display: block; margin-top: 1.5rem; font-family: var(--store-display); font-size: 2.2rem; }
.sample-times { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.2rem; }
.sample-times span { border: 1px solid #899d88; padding: .6rem; font-size: .8rem; border-radius: 5px; }
.sample-times span:nth-child(2) { background: #173e32; color: white; border-color: #173e32; }
.client-preview .preview-note { font-size: .75rem; margin-bottom: 1rem; }
.modules-section { padding-top: 1rem; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #becbbf; }
.module-card { padding: 2.5rem 2rem; border-bottom: 1px solid #becbbf; display: flex; flex-direction: column; }
.module-card:nth-child(3n + 1) { padding-left: 0; }
.module-card:not(:nth-child(3n)) { border-right: 1px solid #becbbf; }
.module-card > .icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: 1.2rem; }
.module-card h3 { font-size: 1.13rem; line-height: 1.4; margin-bottom: .8rem; }
.module-card > strong { font-family: var(--store-display); font-size: 1.6rem; line-height: 1.2; margin-bottom: 1rem; font-weight: 600; }
.module-card p, .module-card ul { font-size: .88rem; color: #4a5b4d; }
.module-card .text-link { font-size: .81rem; margin-top: auto; padding-top: .5rem; }
.module-note { font-size: .8rem; color: var(--muted); max-width: 90ch; margin-top: 1.5rem; }
.roi-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; background: #173e32; padding: 3.5rem; border-radius: 14px; color: #f6f8ef; margin-block: 1rem; }
.roi-section h2 em { color: #c5d7b8; }
.roi-intro .lead { color: #d4e2d4; margin-block: 1.5rem; font-size: 1rem; }
.roi-intro > p:last-child { color: #c1d5c6; font-size: .87rem; }
.roi-tool { min-width: 0; }
.roi-controls { background: #f3f6ec; color: #173e32; border-radius: 8px; padding: 1.5rem; }
.slider-control { margin-bottom: 1.4rem; }
.slider-control > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.slider-control label { font-size: .86rem; font-weight: 600; }
.slider-control input[type="number"] { width: 6.5rem; padding: .5rem; font-variant-numeric: tabular-nums; }
.slider-control input[type="range"] { width: 100%; accent-color: #0f5f4b; min-height: 26px; cursor: pointer; padding: 0; }
.roi-controls > label { font-size: .8rem; }
.roi-controls select { background: #fff; margin-top: .3rem; width: 100%; }
.roi-assumptions { border-top: 1px solid #bdcbbc; margin-top: 1.2rem; padding-top: 1rem; font-size: .85rem; }
.roi-assumptions summary { cursor: pointer; font-weight: 600; }
.assumption-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1rem; }
.assumption-grid label { display: block; font-size: .75rem; margin-bottom: .4rem; }
.assumption-grid input { width: 100%; padding: .5rem; }
.roi-result { margin-top: 1.7rem; }
.roi-result > span { color: #cddfcf; font-size: .85rem; }
.roi-result output { display: block; font-family: var(--store-display); font-size: clamp(2.8rem, 4.5vw, 4rem); line-height: 1.2; font-variant-numeric: tabular-nums; margin-block: .4rem; overflow-wrap: anywhere; }
.roi-result > p { font-size: .8rem; color: #d4e2d4; }
.roi-breakdown { display: grid; gap: .5rem; padding-block: 1.3rem; border-bottom: 1px solid #678372; margin-bottom: 1rem; font-size: .78rem; color: #d4e2d4; }
.roi-breakdown b { color: #fff; font-variant-numeric: tabular-nums; }
.roi-result .roi-error { color: #ffdbce; }
.roi-result .button { background: #dcebcf; color: #173e32; border-color: #dcebcf; margin-top: 1.2rem; }
.roi-result .button:hover { background: #fff; }
.transformation-table { border-block: 1px solid #bccbbd; }
.transformation-table table { width: 100%; border-collapse: collapse; }
.transformation-table caption { text-align: left; font-size: .8rem; color: var(--muted); padding-block: 1rem; }
.transformation-table th, .transformation-table td { padding: 1.3rem 1.5rem; text-align: left; white-space: normal; font-size: .9rem; }
.transformation-table thead { background: #edece3; }
.transformation-table tbody tr { border-top: 1px solid #ccd5c8; }
.transformation-table th:first-child { width: 18%; }
.transformation-table td:nth-child(2) { color: #5b6459; }
.transformation-table :is(th, td):last-child { background: #e7eee3; color: #244b37; width: 42%; }
.stories-section { padding-top: 1rem; }
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
.story { border-top: 1px solid #a6b8a4; padding-top: 1.5rem; }
.story > .icon { color: var(--accent); width: 28px; height: 28px; margin-bottom: 1rem; }
.story h3 { font-family: var(--store-display); font-size: 2rem; line-height: 1.15; }
.story-intro { font-size: .88rem; margin-block: .8rem 1.7rem; color: #52634f; }
.story dt { font-size: .76rem; font-weight: 650; color: var(--accent); margin-top: 1.3rem; }
.story dd { margin: .4rem 0 0; font-size: .88rem; color: #4a5b4d; line-height: 1.6; }
.final-section .faq-section { padding-top: 1rem; }
.final-section .faq-section .text-link { margin-top: 1.3rem; }
.centered-actions { justify-content: center; }
.feature-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.5rem; padding-bottom: 3rem; border-bottom: 1px solid #b5c6b3; }
.feature-jump a { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; }
.feature-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; padding-block: 4rem; border-bottom: 1px solid #c0ceba; }
.feature-detail > div > .icon { color: var(--accent); width: 32px; height: 32px; margin-bottom: 1.2rem; }
.feature-detail .lead { font-size: 1rem; margin-block: 1.5rem; }
.feature-detail h3 { margin-bottom: 1rem; font-size: 1.2rem; }
.feature-detail > div:last-child { padding-top: 1rem; }
.feature-detail .muted { font-size: .86rem; margin-top: 1.5rem; }
.feature-detail + .store-closing { margin-top: 4rem; }
.demo-workspace { padding: 2rem; background: #173e32; border-radius: 14px; margin-bottom: 4rem; }
.demo-workspace .tab-list button { color: #e8f0e1; border-color: #9fb49f; }
.demo-workspace .tab-list button:hover { background: #305441; }
.demo-workspace .tab-list button[aria-selected="true"] { background: #dcebcf; color: #173e32; border-color: #dcebcf; }
.demo-workspace .role-panel { background: #fafbf5; padding: 2.5rem; min-height: 350px; margin-bottom: 0; }
.demo-workspace .role-body h2 { font-size: 2.8rem; }
.demo-workspace .role-preview { background: #e7eee3; }
.demo-workspace .demo-label { color: #d4e2d4; font-size: .78rem; margin-bottom: 1.2rem; }
.demo-workspace .demo-label a { color: #d4e2d4; }
.demo-desk { margin: 0 0 4rem; }
.demo-desk img { width: 100%; height: auto; border-radius: 10px; border: 1px solid #bccbbd; }
.demo-desk .section-heading { margin-bottom: 2rem; }
.demo-total { display: flex; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #a6baa4; font-weight: 650; }
@media (prefers-reduced-motion: no-preference) {
 .role-tabs.tabs-ready, .demo-workspace.tabs-ready { view-transition-name: salon-workflow; }
 ::view-transition-group(salon-workflow) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.16,1,.3,1); }
}
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (max-width: 1100px) {
 .salon-hero { gap: 2rem; }
 .salon-hero-scene { padding: 1.2rem; }
 .role-panel { gap: 2rem; padding: 2rem; }
 .roi-section { padding: 2.5rem; gap: 2rem; }
 .module-card { padding-inline: 1.5rem; }
 .story-grid { gap: 2rem; }
}
@media (max-width: 800px) {
 .store-main { width: calc(100% - 2.5rem); }
 .salon-hero { grid-template-columns: 1fr; padding-block: 3rem; gap: 2.5rem; }
 .salon-hero h1 { font-size: clamp(4rem, 11vw, 5.5rem); }
 .salon-hero-copy .lead { max-width: 58ch; }
 .salon-hero-scene { padding: 1.5rem; }
 .trust-row { gap: 1.5rem; }
 .trust-row > div { display: block; }
 .trust-row strong { display: block; margin-block: .6rem; }
 .role-section, .modules-section, .transformation-section, .stories-section { padding-block: 3.5rem; }
 .role-panel, .feature-detail { grid-template-columns: 1fr; gap: 2rem; }
 .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .module-card:nth-child(n) { padding: 2rem 1.4rem; border-right: 0; }
 .module-card:nth-child(odd) { padding-left: 0; border-right: 1px solid #becbbf; }
 .roi-section { grid-template-columns: 1fr; padding: 2rem; }
 .roi-intro .lead { max-width: 58ch; }
 .story-grid { grid-template-columns: 1fr; gap: 2rem; }
 .story dl { display: grid; grid-template-columns: 7.2rem 1fr; align-items: baseline; gap: .7rem 1rem; }
 .story dt, .story dd { margin: 0; }
 .story-intro { margin-bottom: 1rem; }
 .feature-detail { padding-block: 3rem; }
 .demo-workspace { padding: 1.2rem; }
 .demo-workspace .role-panel { padding: 1.8rem; }
}
@media (max-width: 520px) {
 .salon-hero h1 { font-size: clamp(3.7rem, 15vw, 4.8rem); }
 .salon-hero-copy .store-actions { flex-direction: column; align-items: stretch; }
 .salon-hero-copy .button, .hero-demo-link { justify-content: center; }
 .salon-hero-scene { padding: 1rem; border-radius: 12px; }
 .scene-heading { font-size: .75rem; margin-bottom: 1rem; }
 .scene-appointment { margin-left: 0; padding: .8rem; }
 .screen-bar { padding: .6rem; font-size: .6rem; }
 .salon-screen figcaption { font-size: .64rem; padding: .6rem; }
 .trust-row { grid-template-columns: 1fr; gap: 1.5rem; }
 .trust-row > div { display: grid; }
 .trust-row strong { margin: 0; }
 .tab-list { gap: .4rem; }
 .tab-list button { flex: 1 1 100%; text-align: left; }
 .role-panel { padding: 1.5rem; }
 .role-preview { padding: 1.1rem; }
 .module-grid { grid-template-columns: 1fr; }
 .module-card:nth-child(n) { padding: 2rem 0; border-right: 0; }
 .roi-section { padding: 1.5rem; }
 .roi-controls { padding: 1.1rem; }
 .slider-control > div { gap: .5rem; }
 .slider-control label { font-size: .8rem; }
 .slider-control input[type="number"] { width: 5.5rem; flex-shrink: 0; }
 .assumption-grid { grid-template-columns: 1fr; }
 .transformation-table caption { padding-bottom: 1rem; }
 .transformation-table th, .transformation-table td { padding: .8rem .55rem; font-size: .875rem; line-height: 1.6; }
 .transformation-table th:first-child { width: 19%; }
 .transformation-table :is(th,td):last-child { width: 43%; }
 .story dl { display: block; }
 .story dt { margin-top: 1.1rem; }
 .story dd { margin-top: .3rem; }
 .demo-workspace .role-panel { padding: 1.4rem; }
 .demo-workspace .role-body h2 { font-size: 2.2rem; }
 .feature-jump { justify-content: start; }
 .centered-actions { flex-direction: column; align-items: stretch; }
}

.demo-time-options { display: none; }
.tabs-ready .demo-time-options { display: flex; }
.demo-time-options button { border: 1px solid #718578; padding: .7rem; background: #fff; color: #173e32; border-radius: 5px; font: inherit; font-size: .8rem; min-height: 44px; cursor: pointer; }
.demo-time-options button:hover { background: #e7eee3; }
.demo-time-options button[aria-pressed="true"] { background: #173e32; color: white; text-decoration: underline; text-underline-offset: .3em; }

.currency-hint { font-size: .75rem; color: #435a47; margin-top: .7rem; }
#personal-demo .store-page-title > h2 { font-size: clamp(3rem, 5.3vw, 5rem); margin-bottom: 1.5rem; }

/* Yearly / lifetime switch on the pricing page. */
.billing-switch { justify-content: center; padding: 0 0 1.75rem; }
.billing-tabs .tab-list button { min-width: 9rem; }
.plan-lifetime { margin: -.25rem 0 0; color: #0f5f4b; font-size: .9rem; font-weight: 600; }
.plan-lifetime::before { content: "∞"; margin-right: .4rem; font-weight: 700; }

/* =====================================================================================================
   Homepage, round two: an animated hero stage built from real screens, an interactive product tour with
   hotspots, a scroll-drawn "one day in the salon", the hosting flow, and a rent-or-own chart.
   Motion is progressive: nothing is hidden without JavaScript, and nothing moves for people who ask for less.
   ===================================================================================================== */
:root { --mx-forest: #173e32; --mx-forest-2: #0f2c23; --mx-sage: #e7eee3; --mx-gold: #c7a45a; --mx-ease: cubic-bezier(.2, .7, .2, 1); }

/* ----- Scroll reveals (only once JS has marked the page) ----- */
.mx-js .mx-reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--mx-ease), transform 700ms var(--mx-ease); transition-delay: var(--stagger, 0ms); }
.mx-js .mx-reveal.is-in { opacity: 1; transform: none; }

/* ----- Header: floats and blurs once you scroll ----- */
.store-bar { position: sticky; top: 0; z-index: 40; transition: background-color 250ms, box-shadow 250ms, padding 250ms; }
.store-bar.is-scrolled { background: rgb(250 248 242 / .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 8px 24px -18px rgb(16 28 22 / .5); padding-block: .75rem; }
.store-nav a { position: relative; }
.store-nav a:not(.button)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.3rem; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--mx-ease); }
.store-nav a:not(.button):hover::after, .store-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ----- Hero ----- */
.mx-hero { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: clamp(2rem, 3.5vw, 4rem); align-items: center; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 6vw, 5.5rem); isolation: isolate; }
.mx-hero-bg { position: absolute; inset: -4rem -1.5rem; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 62%, transparent 100%); }
.mx-hero-bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: mx-drift 18s ease-in-out infinite alternate; }
.mx-hero-bg i:nth-child(1) { width: 34rem; height: 34rem; right: 12%; top: -6rem; background: #cfe3d4; }
.mx-hero-bg i:nth-child(2) { width: 26rem; height: 26rem; left: 8%; bottom: -8rem; background: #efe3c6; animation-duration: 22s; animation-delay: -6s; }
.mx-hero-bg i:nth-child(3) { width: 20rem; height: 20rem; right: 38%; bottom: 4rem; background: #bfd8cb; animation-duration: 26s; animation-delay: -12s; }
@keyframes mx-drift { to { transform: translate3d(3rem, -2rem, 0) scale(1.12); } }
.mx-eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .7rem; border: 1px solid var(--line-strong); border-radius: 999px; background: rgb(255 255 255 / .6); color: #294337; font-size: .8125rem; font-weight: 600; letter-spacing: .01em; margin-bottom: 1.6rem; }
.mx-pulse { position: relative; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); flex: none; }
.mx-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: mx-ping 2.2s var(--mx-ease) infinite; }
@keyframes mx-ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }
.mx-hero h1 { font-size: clamp(2.8rem, 4.8vw, 4.9rem); }
.mx-rotor { display: inline-block; color: var(--accent); transition: opacity 320ms ease, transform 320ms var(--mx-ease); }
.mx-rotor.is-out { opacity: 0; transform: translateY(35%); }
.mx-hero .lead { margin-block: 1.6rem 1.8rem; max-width: 46ch; font-size: 1.0625rem; }
.mx-cta { box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
ul.mx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.mx-chips li { padding: .3rem .8rem; border-radius: 999px; background: rgb(23 62 50 / .07); color: #294337; font-size: .8125rem; font-weight: 600; }

.mx-stage { position: relative; perspective: 1400px; padding: 0 0 2.5rem 3.5rem; }
.mx-window { position: relative; border-radius: 16px; background: var(--mx-forest); padding: 0 0 .5rem; box-shadow: 0 50px 90px -40px rgb(10 30 22 / .6), 0 0 0 1px rgb(255 255 255 / .06) inset; transform: rotateY(var(--ry, -7deg)) rotateX(var(--rx, 3deg)); transform-style: preserve-3d; transition: transform 500ms var(--mx-ease); overflow: hidden; }
.mx-window-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; color: #9ec0ae; font-size: .72rem; }
.mx-window-bar i { width: .6rem; height: .6rem; border-radius: 50%; background: #3b6a58; }
.mx-window-bar i:nth-child(1) { background: #d98b6a; } .mx-window-bar i:nth-child(2) { background: #d9c06a; } .mx-window-bar i:nth-child(3) { background: #7fcf9b; }
.mx-window-bar span { margin-left: .6rem; padding: .15rem .8rem; border-radius: 999px; background: rgb(255 255 255 / .08); }
.mx-window a { display: block; margin: 0 .5rem; border-radius: 10px; overflow: hidden; position: relative; }
.mx-window img { display: block; width: 100%; height: auto; }
.mx-window a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .22) 50%, transparent 60%); transform: translateX(-120%); animation: mx-sheen 7s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes mx-sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.mx-phone { position: absolute; left: 0; bottom: 0; width: 24%; min-width: 7.5rem; border-radius: 22px; padding: .35rem; background: #0e241c; box-shadow: 0 30px 60px -20px rgb(10 30 22 / .65); transform: translateZ(60px) rotate(-4deg); animation: mx-bob 7s ease-in-out infinite; }
.mx-phone img { display: block; width: 100%; height: auto; border-radius: 17px; }
.mx-float { position: absolute; display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 22px 44px -18px rgb(10 30 22 / .45), 0 0 0 1px rgb(23 62 50 / .06); font-size: .8125rem; line-height: 1.35; animation: mx-bob 6s ease-in-out infinite; }
.mx-float strong { display: block; font-size: .875rem; }
.mx-float span { color: var(--muted); }
.mx-float-a { right: -1rem; top: 22%; animation-delay: -1.5s; }
.mx-float-b { right: 6%; bottom: 2.2rem; flex-direction: column; align-items: flex-start; gap: .1rem; min-width: 11rem; animation-delay: -3s; }
.mx-float-b strong { font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mx-float-b svg { width: 100%; height: 1.6rem; color: var(--accent); }
.mx-spark { stroke-dasharray: 220; stroke-dashoffset: 220; animation: mx-draw 2.4s var(--mx-ease) .8s forwards; }
.mx-float-c { left: 22%; top: -.9rem; animation-delay: -4.5s; }
.mx-float-c .icon { color: var(--accent); }
.mx-avatar { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.mx-ok { padding: .15rem .55rem; border-radius: 999px; background: var(--success-soft); color: var(--success); font-size: .72rem; font-weight: 650; white-space: nowrap; }
@keyframes mx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes mx-draw { to { stroke-dashoffset: 0; } }
.mx-caption { position: absolute; left: 30%; bottom: 0; margin: 0; color: var(--muted); font-size: .78rem; }

/* ----- Facts strip ----- */
.mx-facts { padding-block: 1rem 3.5rem; }
.mx-facts ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--line-strong); }
.mx-facts li { padding: 1.7rem 1.4rem; border-left: 1px solid var(--line-strong); }
.mx-facts li:first-child { border-left: 0; padding-left: 0; }
.mx-facts strong { display: block; font-family: var(--font); font-size: clamp(2.4rem, 3.6vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--mx-forest); font-variant-numeric: tabular-nums lining-nums; }
.mx-facts span { display: block; margin-top: .55rem; color: var(--muted); font-size: .875rem; line-height: 1.5; }

/* ----- Product tour ----- */
.mx-tour { padding-block: 4.5rem; }
.mx-tour-tabs .tab-list { margin-bottom: 1.6rem; }
.mx-tour-panel { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 22px; background: var(--mx-sage); }
.mx-tour-panel[hidden] { display: none; }
.mx-tour-copy h3 { font-family: var(--store-display); font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .8rem; }
.mx-tour-copy p { color: #3d5246; margin: 0 0 1.1rem; }
.mx-tour-copy ul { display: grid; gap: .55rem; margin: 0 0 1.3rem; padding: 0; list-style: none; font-size: .9375rem; }
.mx-tour-copy li { display: flex; gap: .6rem; align-items: flex-start; }
.mx-tour-copy li .icon { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--accent); stroke-width: 2.4; }
.mx-tour-figure { margin: 0; }
.mx-shot { position: relative; border-radius: 12px; overflow: visible; box-shadow: 0 40px 70px -36px rgb(10 30 22 / .55), 0 0 0 1px rgb(23 62 50 / .1); }
.mx-shot-img { display: block; width: 100%; height: auto; border-radius: 12px; }
.mx-tour-figure figcaption { margin-top: 1rem; }
.mx-hot { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 1.75rem; height: 1.75rem; margin: -.875rem 0 0 -.875rem; padding: 0; min-height: 0; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; box-shadow: 0 0 0 4px rgb(255 255 255 / .85), 0 8px 18px -4px rgb(10 30 22 / .5); }
.mx-hot::before { content: "+"; display: grid; place-items: center; height: 100%; font: 700 1rem/1 var(--font); transition: transform 200ms var(--mx-ease); }
.mx-hot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: mx-ring 2.4s var(--mx-ease) infinite; animation-delay: var(--delay, 0ms); pointer-events: none; }
@keyframes mx-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.mx-hot:hover::before, .mx-hot:focus-visible::before { transform: rotate(45deg); }
.mx-hot-tip { position: absolute; left: 50%; bottom: calc(100% + .65rem); width: max-content; max-width: 15rem; padding: .5rem .8rem; border-radius: 10px; background: var(--mx-forest); color: #fff; font-size: .8125rem; font-weight: 600; line-height: 1.35; text-align: left; opacity: 0; transform: translate(-50%, 6px); pointer-events: none; transition: opacity 180ms, transform 220ms var(--mx-ease); z-index: 3; }
.mx-hot-tip::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--mx-forest); }
.mx-hot:hover .mx-hot-tip, .mx-hot:focus-visible .mx-hot-tip, .mx-hot.is-open .mx-hot-tip { opacity: 1; transform: translate(-50%, 0); }
.mx-hot:not([data-x]) { display: none; }
.mx-two-phones { display: grid; place-items: center; }
.mx-phone-pair { display: flex; gap: 1.5rem; justify-content: center; align-items: flex-start; }
.mx-phone-pair img { width: min(15rem, 42%); height: auto; border-radius: 26px; border: 8px solid #0e241c; box-shadow: 0 40px 60px -30px rgb(10 30 22 / .6); }
.mx-phone-pair .mx-p2 { margin-top: 2.5rem; }

/* ----- One day in the salon ----- */
.mx-day { padding-block: 4.5rem; border-top: 1px solid var(--line-strong); }
.mx-day-list { --p: 0%; position: relative; list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.mx-day-list::before, .mx-day-list::after { content: ""; position: absolute; left: calc(6rem + 1.4rem + 1.5rem - 1px); top: 1.4rem; bottom: 1.4rem; width: 2px; border-radius: 2px; }
.mx-day-list::before { background: var(--line-strong); }
.mx-day-list::after { background: linear-gradient(var(--accent), #6cb494); height: var(--p); bottom: auto; transition: height 120ms linear; }
.mx-step { display: grid; grid-template-columns: 6rem 3rem minmax(0, 1fr) minmax(16rem, .8fr); gap: 1.4rem; align-items: center; }
.mx-step time { text-align: right; color: var(--muted); font-size: .8125rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
.mx-node { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); color: var(--muted); position: relative; z-index: 1; transition: background-color 400ms, color 400ms, border-color 400ms, transform 400ms var(--mx-ease); }
.mx-step.is-in .mx-node { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); }
.mx-step-body h3 { font-family: var(--store-display); font-size: clamp(1.5rem, 2vw, 2rem); font-weight: 600; line-height: 1.1; margin: 0 0 .35rem; letter-spacing: -.015em; }
.mx-step-body p { margin: 0; color: var(--muted); max-width: 40ch; font-size: .9375rem; }
.mx-mini { display: grid; gap: .55rem; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; box-shadow: 0 18px 36px -22px rgb(10 30 22 / .45), 0 0 0 1px rgb(23 62 50 / .07); font-size: .8125rem; color: var(--muted); transform: translateX(14px); opacity: 0; transition: transform 700ms var(--mx-ease) 150ms, opacity 700ms 150ms; }
.mx-step.is-in .mx-mini, html:not(.mx-js) .mx-mini { transform: none; opacity: 1; }
.mx-mini strong { color: var(--ink); font-size: .9rem; }
.mx-mini-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mx-slots { display: flex; gap: .35rem; } .mx-slots i { flex: 1; height: .5rem; border-radius: 99px; background: var(--surface-2); } .mx-slots i.on { background: var(--accent); }
.mx-chat p { margin: 0; padding: .7rem .85rem; border-radius: 4px 14px 14px 14px; background: #dcf2e4; color: #1d3a2a; font-size: .8125rem; line-height: 1.45; }
.mx-chat-meta { display: flex; gap: .4rem; } .mx-chat-meta span, .mx-tags span { padding: .15rem .55rem; border-radius: 99px; background: var(--surface-2); color: #3d5246; font-size: .72rem; font-weight: 600; }
.mx-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.mx-ticket { grid-template-columns: auto 1fr auto; align-items: center; display: grid; gap: .8rem; }
.mx-ticket-no { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-weight: 750; font-size: 1rem; }
.mx-ticket div { display: grid; }
.mx-receipt > div { display: flex; justify-content: space-between; gap: 1rem; }
.mx-receipt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.mx-receipt .mx-total { padding-top: .5rem; border-top: 1px dashed var(--line-strong); color: var(--ink); font-weight: 650; }
.mx-bars { grid-template-columns: repeat(6, 1fr); align-items: end; height: 6.2rem; gap: .5rem; }
.mx-bars i { height: 12%; border-radius: 6px 6px 2px 2px; background: linear-gradient(var(--accent), #5aa88c); transition: height 900ms var(--mx-ease) .3s; }
.mx-step.is-in .mx-bars i:nth-child(1) { height: 40%; } .mx-step.is-in .mx-bars i:nth-child(2) { height: 68%; } .mx-step.is-in .mx-bars i:nth-child(3) { height: 52%; } .mx-step.is-in .mx-bars i:nth-child(4) { height: 92%; } .mx-step.is-in .mx-bars i:nth-child(5) { height: 62%; } .mx-step.is-in .mx-bars i:nth-child(6) { height: 80%; }
html:not(.mx-js) .mx-bars i:nth-child(n) { height: 60%; }
.mx-meter { height: .55rem; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.mx-meter i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #6cb494); border-radius: 99px; transition: width 1.1s var(--mx-ease) .3s; }
.mx-step.is-in .mx-meter i, html:not(.mx-js) .mx-meter i { width: 68%; }
.mx-note { color: var(--muted); font-size: .8125rem; margin-top: 1.5rem; }

/* ----- Hosting flow ----- */
.mx-host { padding-block: 4.5rem; border-top: 1px solid var(--line-strong); position: relative; }
.mx-flow { counter-reset: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.2rem; list-style: none; margin: 3rem 0 0; padding: 0; position: relative; }
.mx-flow::before { content: ""; position: absolute; left: 1.5rem; right: calc((100% - 4.8rem) / 5 - 1.5rem); top: 1.5rem; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 8px, transparent 8px 16px); }
.mx-flow li { position: relative; z-index: 1; }
.mx-flow-n { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--mx-forest); color: #fff; font-weight: 700; margin-bottom: 1rem; position: relative; box-shadow: 0 0 0 6px var(--bg); }
.mx-flow strong { display: block; font-size: 1.0625rem; margin-bottom: .3rem; }
.mx-flow p { margin: 0; color: var(--muted); font-size: .875rem; }
.mx-flow-line { display: none; }
.mx-keep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: 3rem; }
.mx-keep article { padding: 1.6rem; border-radius: 18px; background: var(--mx-forest); color: #e3efe8; transition: transform 300ms var(--mx-ease), box-shadow 300ms; }
.mx-keep article:hover { transform: translateY(-4px); box-shadow: 0 28px 48px -26px rgb(10 30 22 / .7); }
.mx-keep .icon { width: 1.9rem; height: 1.9rem; color: #8fe0bf; margin-bottom: 1rem; }
.mx-keep h3 { font-family: var(--store-display); font-size: 1.7rem; font-weight: 600; margin: 0 0 .4rem; color: #fff; }
.mx-keep p { margin: 0; color: #b8d2c4; font-size: .9375rem; }

/* ----- Rent or own ----- */
.mx-own { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; padding: clamp(2rem, 4vw, 3.5rem); margin-block: 2rem 4rem; border-radius: 26px; background: var(--mx-forest); color: #e3efe8; position: relative; overflow: hidden; }
.mx-own::before { content: ""; position: absolute; width: 30rem; height: 30rem; right: -8rem; top: -12rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(143 224 191 / .22), transparent); pointer-events: none; }
.mx-own h2 { color: #fff; } .mx-own h2 em { color: #8fe0bf; }
.mx-own .lead, .mx-own .mx-note { color: #b8d2c4; }
.mx-own-tool { position: relative; display: grid; gap: 1.2rem; padding: 1.5rem; border-radius: 20px; background: rgb(255 255 255 / .06); box-shadow: 0 0 0 1px rgb(255 255 255 / .09) inset; }
.mx-own-plans { display: flex; flex-wrap: wrap; gap: .4rem; }
.mx-own-plans button { min-height: 2.4rem; padding: .4rem 1rem; border-radius: 99px; border: 1px solid rgb(255 255 255 / .22); background: transparent; color: #d4e4db; font: inherit; font-weight: 600; font-size: .875rem; cursor: pointer; transition: background-color 160ms, color 160ms; }
.mx-own-plans button[aria-selected="true"] { background: #8fe0bf; color: #0f2c23; border-color: #8fe0bf; }
.mx-own-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.mx-own-chart text { font: 600 11px var(--font); fill: #9ec0ae; }
.mx-own-chart .grid { stroke: rgb(255 255 255 / .1); }
.mx-own-chart .yearly { fill: none; stroke: #e8b86d; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.mx-own-chart .life { fill: none; stroke: #8fe0bf; stroke-width: 3; stroke-linecap: round; }
.mx-own-chart .area { fill: rgb(232 184 109 / .12); }
.mx-own-chart .dot-y { fill: #e8b86d; } .mx-own-chart .dot-l { fill: #8fe0bf; }
.mx-own-chart .be { fill: #fff; stroke: #8fe0bf; stroke-width: 3; }
.mx-own-chart .marker { stroke: rgb(255 255 255 / .55); stroke-dasharray: 4 4; }
.mx-own-controls { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; }
.mx-own-controls label { font-weight: 600; font-size: .9rem; grid-column: 1 / -1; }
.mx-own-controls input { accent-color: #8fe0bf; min-height: 0; padding: 0; background: transparent; border: 0; }
.mx-own-controls output { font-weight: 700; min-width: 5rem; text-align: right; color: #fff; }
.mx-own-result { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
.mx-own-result > div { padding: 1rem 1.1rem; border-radius: 14px; background: rgb(232 184 109 / .12); }
.mx-own-result > .mx-own-win { background: rgb(143 224 191 / .16); }
.mx-own-result span { display: block; color: #b8d2c4; font-size: .78rem; font-weight: 600; }
.mx-own-result strong { display: block; font-family: var(--store-display); font-size: 2.2rem; font-weight: 600; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.mx-own-result p { grid-column: 1 / -1; margin: 0; font-size: .9375rem; color: #e3efe8; min-height: 3em; }
.mx-own-result .button { grid-column: 1 / -1; justify-self: start; background: #8fe0bf; border-color: #8fe0bf; color: #0f2c23; background-image: none; }
.mx-own-result .button:hover { background: #fff; border-color: #fff; color: #0f2c23; }

/* ----- Responsive ----- */
@media (max-width: 1100px) {
  .mx-hero { grid-template-columns: minmax(0, 1fr); }
  .mx-stage { max-width: 46rem; margin-inline: auto; width: 100%; }
  .mx-facts ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mx-facts li:nth-child(4) { border-left: 0; padding-left: 0; }
  .mx-tour-panel { grid-template-columns: minmax(0, 1fr); }
  .mx-own { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .mx-step { grid-template-columns: 3rem minmax(0, 1fr); }
  .mx-step time { grid-column: 2; text-align: left; }
  .mx-step .mx-node { grid-row: 1 / span 3; grid-column: 1; align-self: start; }
  .mx-step .mx-mini { grid-column: 2; }
  .mx-day-list::before, .mx-day-list::after { left: 1.45rem; }
  .mx-flow { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .mx-flow::before { left: 1.45rem; right: auto; top: 1.5rem; bottom: 1.5rem; width: 2px; height: auto; background: repeating-linear-gradient(var(--line-strong) 0 8px, transparent 8px 16px); }
  .mx-flow li { display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; }
  .mx-flow-n { grid-row: 1 / span 2; margin: 0; }
  .mx-keep { grid-template-columns: minmax(0, 1fr); }
  .mx-own-result { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .mx-stage { padding: 0 0 2.2rem 1.2rem; }
  .mx-float-a { right: -.4rem; } .mx-float-c { display: none; } .mx-float-b { right: 2%; min-width: 9rem; }
  .mx-phone { width: 30%; }
  .mx-facts ul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mx-facts li { padding: 1.2rem .8rem; border-left: 0; } .mx-facts li:nth-child(even) { border-left: 1px solid var(--line-strong); }
  .mx-phone-pair img { width: 44%; }
  .mx-hot-tip { max-width: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-hero-bg i, .mx-float, .mx-phone, .mx-pulse::after, .mx-hot::after, .mx-window a::after { animation: none !important; }
  .mx-spark { animation: none; stroke-dashoffset: 0; }
  .mx-js .mx-reveal, .mx-mini, .mx-window { transition: none !important; opacity: 1 !important; transform: none !important; }
  .mx-window { transform: none; }
}
.store { overflow-x: clip; }

/* ----- Round two, polish ----- */
ul.mx-own-points { display: grid; gap: .6rem; margin: 1.6rem 0 1.4rem; padding: 0; list-style: none; color: #e3efe8; font-size: .9375rem; }
.mx-own-points li { display: flex; gap: .6rem; align-items: flex-start; }
.mx-own-points .icon { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: #8fe0bf; stroke-width: 2.4; }
.mx-flow::after { content: ""; z-index: 0; position: absolute; left: 1.5rem; top: 1.5rem; height: 2px; width: 0; background: var(--accent); transition: width 2.2s var(--mx-ease) .2s; }
.mx-host.is-live .mx-flow::after { width: calc(100% - (100% - 4.8rem) / 5); }
.mx-flow-n { transition: background-color 500ms, transform 500ms var(--mx-ease); }
.mx-host.is-live .mx-flow li:nth-child(n) .mx-flow-n { background: var(--accent); transform: scale(1.06); }
.mx-host.is-live .mx-flow li:nth-child(2) .mx-flow-n { transition-delay: .5s; } .mx-host.is-live .mx-flow li:nth-child(3) .mx-flow-n { transition-delay: .9s; } .mx-host.is-live .mx-flow li:nth-child(4) .mx-flow-n { transition-delay: 1.3s; } .mx-host.is-live .mx-flow li:nth-child(5) .mx-flow-n { transition-delay: 1.7s; }
@media (max-width: 800px) { .mx-flow::after { display: none; } }
@media (min-width: 801px) { .feature-detail { grid-template-columns: 1fr 1fr; } } /* one column on phones and small tablets */
.mx-feature-shot { grid-column: 1 / -1; margin: 1rem 0 0; padding: clamp(1rem, 2.5vw, 2rem); border-radius: 20px; background: var(--mx-sage); }
.mx-feature-shot figcaption { margin-top: 1rem; }
.mx-feature-art { display: grid; grid-template-columns: repeat(2, minmax(0, 24rem)); gap: 1.2rem; justify-content: center; }
.mx-feature-art figcaption { grid-column: 1 / -1; text-align: center; }
.mx-feature-art .mx-mini { opacity: 1; transform: none; align-content: start; }
@media (max-width: 800px) { .mx-feature-art { grid-template-columns: minmax(0, 1fr); } }
.mx-feature-art .mx-meter i { width: 68%; }

/* Numbers in the display serif use old-style figures that wobble on the baseline; show big figures in the sans. */
.mx-own-result strong, .roi-result output, .roi-result strong { font-family: var(--font); font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; }
.mx-own-result strong { font-size: 2rem; }

/* =====================================================================================================
   Round three: a bento feature grid with live mini-interfaces, a drag-to-compare slider, a providers strip,
   a sticky call to action and a more textured hero. All motion is decoration: it pauses until a card is on
   screen and is off for reduced motion.
   ===================================================================================================== */

/* ----- Hero texture ----- */
.mx-hero::before { content: ""; position: absolute; inset: -4rem -1.5rem; z-index: -1; background-image: linear-gradient(rgb(23 62 50 / .05) 1px, transparent 1px), linear-gradient(90deg, rgb(23 62 50 / .05) 1px, transparent 1px); background-size: 3.2rem 3.2rem; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0, transparent 68%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0, transparent 68%); pointer-events: none; }

/* ----- Providers strip ----- */
.mx-marquee { overflow: hidden; margin-bottom: 2rem; padding-block: .9rem; border-block: 1px solid var(--line-strong); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mx-marquee-track { display: flex; gap: .8rem; width: max-content; animation: mx-marquee 38s linear infinite; }
.mx-marquee:hover .mx-marquee-track { animation-play-state: paused; }
.mx-marquee-track span { padding: .4rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); color: #294337; font-size: .875rem; font-weight: 600; white-space: nowrap; }
@keyframes mx-marquee { to { transform: translateX(-50%); } }

/* ----- Bento ----- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; }
.bn-card { grid-column: span 2; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.6rem; border-radius: 22px; background: #fff; border: 1px solid #dfe6dc; box-shadow: 0 1px 2px rgb(16 28 22 / .04); overflow: hidden; position: relative; transition: transform 300ms var(--mx-ease), box-shadow 300ms, border-color 300ms; }
.bn-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgb(10 30 22 / .35); border-color: #bcd0bf; }
.bn-card.bn-wide { grid-column: span 4; flex-direction: row; align-items: stretch; gap: 1.6rem; }
.bn-card.bn-wide .bn-text { flex: 0 0 38%; }
.bn-card.bn-full { grid-column: span 6; }
.bn-card.bn-full .bn-promo { grid-template-columns: auto 1fr; } .bn-card.bn-full .bn-birthday { grid-column: 1 / -1; }
.bn-card.bn-wide .bn-visual { flex: 1; min-width: 0; }
.bn-card.bn-marketing { background: linear-gradient(135deg, #eef5ea, #fff 60%); }
.bn-card.bn-booking { background: linear-gradient(135deg, #e7eee3, #fff 70%); }
.bn-text > .icon { width: 1.7rem; height: 1.7rem; color: var(--accent); margin-bottom: .8rem; }
.bn-text h3 { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
.bn-text strong { display: block; font-family: var(--store-display); font-size: clamp(1.5rem, 2vw, 1.95rem); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; margin-bottom: .6rem; }
.bn-text p { margin: 0 0 .9rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.bn-visual { display: grid; align-content: center; min-height: 12rem; padding: 1rem; border-radius: 16px; background: #f3f6f1; position: relative; overflow: hidden; }
.bn-card:not(.is-in) .bn-visual * { animation-play-state: paused !important; }
.bn-cal { position: relative; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 36px -22px rgb(10 30 22 / .5); }
.bn-cal-img { display: block; width: 100%; height: 14.5rem; object-fit: cover; object-position: 62% 42%; }
.bn-pill { position: absolute; padding: .35rem .8rem; border-radius: 999px; background: var(--mx-forest); color: #fff; font-size: .75rem; font-weight: 650; box-shadow: 0 10px 24px -8px rgb(10 30 22 / .55); animation: mx-bob 6s ease-in-out infinite; }
.bn-pill-a { left: 8%; top: 14%; } .bn-pill-b { right: 6%; bottom: 14%; background: #fff; color: var(--mx-forest); animation-delay: -3s; }
.bn-chat { display: grid; gap: .5rem; }
.bn-chat p { margin: 0; max-width: 85%; padding: .55rem .8rem; border-radius: 4px 14px 14px 14px; background: #fff; box-shadow: 0 6px 16px -10px rgb(10 30 22 / .4); font-size: .8rem; line-height: 1.4; opacity: 0; transform: translateY(8px); animation: bn-msg 9s ease infinite; }
.bn-chat .bn-me { justify-self: end; border-radius: 14px 4px 14px 14px; background: #dcf2e4; }
.bn-chat .bn-b1 { animation-delay: 0s; } .bn-chat .bn-b2 { animation-delay: 1.4s; } .bn-chat .bn-b3 { animation-delay: 3s; }
.bn-typing { display: flex; gap: .25rem; width: 3.4rem; animation: bn-typing 9s ease infinite !important; animation-delay: 1.9s; }
.bn-typing i { width: .4rem; height: .4rem; border-radius: 50%; background: #8aa095; animation: bn-dot 1s ease-in-out infinite; } .bn-typing i:nth-child(2) { animation-delay: .15s; } .bn-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bn-msg { 0% { opacity: 0; transform: translateY(8px); } 6%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes bn-typing { 0%, 12% { opacity: 0; } 14%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes bn-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.bn-receipt { display: grid; gap: .45rem; padding: 1rem; border-radius: 10px; background: #fff; box-shadow: 0 18px 30px -20px rgb(10 30 22 / .5); font-size: .8rem; color: var(--muted); clip-path: inset(0 0 100% 0); animation: bn-print 8s ease infinite; }
.bn-receipt > div { display: flex; justify-content: space-between; gap: 1rem; } .bn-receipt b { color: var(--ink); font-variant-numeric: tabular-nums; }
.bn-total { padding-top: .5rem; border-top: 1px dashed var(--line-strong); color: var(--ink) !important; font-weight: 650; }
.bn-stock { justify-self: start; padding: .15rem .6rem; border-radius: 99px; background: var(--warning-soft); color: var(--warning); font-size: .72rem; font-weight: 650; }
@keyframes bn-print { 0% { clip-path: inset(0 0 100% 0); } 22%, 88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.bn-profile { display: grid; gap: .8rem; padding: .9rem; border-radius: 12px; background: #fff; box-shadow: 0 18px 30px -20px rgb(10 30 22 / .5); }
.bn-who { display: flex; gap: .7rem; align-items: center; } .bn-who div { display: grid; } .bn-who small, .bn-ring-row small, .bn-bars small { color: var(--muted); font-size: .75rem; }
.bn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; text-align: center; font-size: .72rem; color: var(--muted); }
.bn-stats span { padding: .4rem .2rem; border-radius: 8px; background: var(--surface-2); } .bn-stats b { display: block; font-size: 1rem; color: var(--ink); }
.bn-ring-row { display: flex; align-items: center; gap: .7rem; } .bn-ring-row div { display: grid; }
.bn-ring { width: 2.8rem; height: 2.8rem; transform: rotate(-90deg); }
.bn-ring circle { fill: none; stroke-width: 5; } .bn-ring-bg { stroke: var(--surface-2); } .bn-ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; animation: bn-ring 6s ease-in-out infinite; }
@keyframes bn-ring { 0% { stroke-dashoffset: 113; } 30%, 85% { stroke-dashoffset: 54; } 100% { stroke-dashoffset: 113; } }
.bn-bars { display: grid; gap: .7rem; padding: .9rem; border-radius: 12px; background: #fff; box-shadow: 0 18px 30px -20px rgb(10 30 22 / .5); }
.bn-bars > div { display: grid; grid-template-columns: 3.6rem 1fr 3rem; gap: .6rem; align-items: center; font-size: .8rem; } .bn-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.bn-bar { display: block; height: .6rem; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #5aa88c); width: 0; animation: bn-grow 7s var(--mx-ease) infinite; }
.bn-bar-1 { --w: 92%; } .bn-bar-2 { --w: 70%; animation-delay: .2s; } .bn-bar-3 { --w: 56%; animation-delay: .4s; }
@keyframes bn-grow { 0% { width: 0; } 18%, 88% { width: var(--w); } 100% { width: 0; } }
.bn-promo { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.bn-coupon { display: grid; padding: .9rem 1.1rem; border-radius: 12px; background: var(--mx-forest); color: #fff; position: relative; box-shadow: 0 18px 30px -18px rgb(10 30 22 / .6); animation: mx-bob 7s ease-in-out infinite; }
.bn-coupon::before, .bn-coupon::after { content: ""; position: absolute; top: 50%; width: .9rem; height: .9rem; margin-top: -.45rem; border-radius: 50%; background: #f3f6f1; } .bn-coupon::before { left: -.45rem; } .bn-coupon::after { right: -.45rem; }
.bn-coupon span { font-size: .72rem; letter-spacing: .12em; color: #9fd8bf; font-weight: 700; } .bn-coupon strong { font-size: 1.6rem; line-height: 1.1; } .bn-coupon small { color: #b8d2c4; }
.bn-points { display: grid; gap: .5rem; padding: .9rem; border-radius: 12px; background: #fff; box-shadow: 0 18px 30px -20px rgb(10 30 22 / .5); }
.bn-points-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; } .bn-points-row span { color: var(--muted); }
.bn-card .mx-meter i { width: 0; animation: bn-meter 6s var(--mx-ease) infinite; } @keyframes bn-meter { 0% { width: 0; } 25%, 90% { width: 52%; } 100% { width: 0; } }
.bn-birthday { grid-column: 1 / -1; display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 10px; background: #fff; box-shadow: 0 12px 24px -18px rgb(10 30 22 / .5); font-size: .8rem; color: #3d5246; }
.bn-birthday .icon { width: 1.1rem; height: 1.1rem; color: #c7a45a; }

/* ----- Drag to compare ----- */
.mx-compare { padding-block: 4.5rem; border-top: 1px solid var(--line-strong); }
.mx-compare-stage { --pos: 50%; position: relative; aspect-ratio: 2 / 1; border-radius: 22px; overflow: hidden; background: var(--mx-forest); box-shadow: 0 40px 70px -40px rgb(10 30 22 / .55), 0 0 0 1px rgb(23 62 50 / .1); user-select: none; touch-action: pan-y; }
.mx-after, .mx-before { position: absolute; inset: 0; } .mx-after img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.mx-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .mx-diary { width: 100%; height: 100%; display: block; }
.mx-compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .08), 0 0 24px rgb(0 0 0 / .3); pointer-events: none; }
.mx-compare-handle i { position: absolute; top: 50%; left: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: #fff; box-shadow: 0 10px 24px -6px rgb(0 0 0 / .45); }
.mx-compare-handle i::before, .mx-compare-handle i::after { content: ""; position: absolute; top: 50%; width: .5rem; height: .5rem; border: solid var(--mx-forest); border-width: 0 0 3px 3px; margin-top: -.25rem; } .mx-compare-handle i::before { left: .8rem; transform: rotate(45deg); } .mx-compare-handle i::after { right: .8rem; transform: rotate(225deg); }
.mx-compare-label { position: absolute; top: 1rem; padding: .35rem .85rem; border-radius: 999px; background: rgb(255 255 255 / .92); color: var(--mx-forest); font-size: .8rem; font-weight: 700; pointer-events: none; }
.mx-compare-label-a { left: 1rem; } .mx-compare-label-b { right: 1rem; background: var(--mx-forest); color: #fff; }
.mx-compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; min-height: 0; }
.mx-compare-stage:has(.mx-compare-range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ----- Sticky call to action ----- */
.mx-sticky { position: fixed; left: 50%; bottom: 1.25rem; z-index: 35; display: flex; align-items: center; gap: 1rem; padding: .6rem .6rem .6rem 1.2rem; border-radius: 999px; background: var(--mx-forest); color: #e6f1ea; box-shadow: 0 24px 50px -16px rgb(10 30 22 / .7); translate: -50% 140%; transition: translate 450ms var(--mx-ease); font-size: .9rem; max-width: calc(100vw - 1.5rem); }
.mx-sticky.is-shown { translate: -50% 0; }
.mx-sticky strong { color: #fff; font-size: 1.05rem; } .mx-sticky small { color: #9fc4b0; font-size: .8rem; }
.mx-sticky .button { background: #8fe0bf; border-color: #8fe0bf; color: #0f2c23; background-image: none; min-height: 2.5rem; }
.mx-sticky .button:hover { background: #fff; }
.mx-sticky-close { min-height: 0; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1; }

/* ----- Pricing polish ----- */
.plan-card { transition: transform 300ms var(--mx-ease), box-shadow 300ms; position: relative; }
.plan-card:hover { transform: translateY(-5px); box-shadow: 0 32px 54px -30px rgb(10 30 22 / .4); }
.plan-ribbon { position: absolute; top: 1.1rem; right: 1.1rem; padding: .25rem .7rem; border-radius: 99px; background: var(--mx-forest); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }

@media (max-width: 1100px) { .bn-card, .bn-card.bn-wide { grid-column: span 3; } .bn-card.bn-full { grid-column: span 6; } .bn-card.bn-wide { flex-direction: column; } .bn-card.bn-wide .bn-text { flex: none; } }
@media (max-width: 800px) { .bento { grid-template-columns: minmax(0, 1fr); } .bn-card, .bn-card.bn-wide { grid-column: auto; } .bn-promo { grid-template-columns: minmax(0, 1fr); } .mx-compare-stage { aspect-ratio: 4 / 5; } .mx-after img { object-position: 8% top; } .mx-sticky small { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .mx-marquee-track, .bn-pill, .bn-coupon, .bn-ring-fg, .bn-bar, .bn-card .mx-meter i, .bn-typing, .bn-typing i { animation: none !important; }
  .bn-chat p { opacity: 1; transform: none; animation: none; } .bn-typing { display: none; }
  .bn-receipt { clip-path: none; animation: none; } .bn-ring-fg { stroke-dashoffset: 54; } .bn-bar { width: var(--w); } .bn-card .mx-meter i { width: 52%; }
  .mx-sticky { transition: none; }
}


/* =====================================================================================================
   Inner pages come up to the same standard: a textured page band with a label chip, bolder cards, a dark
   featured plan and checkout summary, a richer closing band, a dark footer, and a sticky features menu.
   ===================================================================================================== */
.store-nav a:not(.button) { text-decoration: none; }
.store-nav a:not(.button):hover { color: var(--accent); }

/* ----- Page band ----- */
.store-main { position: relative; }
.store-main:has(.store-page-title)::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; height: 34rem; margin-left: -50vw; pointer-events: none; background: radial-gradient(40rem 22rem at 80% 0%, rgb(207 227 212 / .8), transparent 70%), radial-gradient(34rem 20rem at 10% 10%, rgb(239 227 198 / .7), transparent 70%), linear-gradient(rgb(23 62 50 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(23 62 50 / .045) 1px, transparent 1px); background-size: auto, auto, 3.2rem 3.2rem, 3.2rem 3.2rem; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.page-eyebrow { margin-bottom: 1.4rem; }
.store-page-title.centered .page-eyebrow { margin-inline: auto; }
.store-page-title.centered { display: flex; flex-direction: column; align-items: center; }
.store-page-title.centered .lead { max-width: 52ch; }

/* ----- Cards ----- */
.store .card { border-radius: 22px; border-color: #dfe6dc; box-shadow: 0 30px 50px -42px rgb(10 30 22 / .45), 0 1px 2px rgb(16 28 22 / .04); }
.store .card > h2 { font-family: var(--store-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -.015em; }
.store-contact-layout .contact-panel, .store-account-layout > .card { box-shadow: 0 40px 70px -48px rgb(10 30 22 / .5); }
.store .button { border-radius: 12px; }

/* ----- Featured plan stands out ----- */
.plan-card.plan-featured { background: linear-gradient(165deg, #1b4a3c, #0f2c23); color: #e3efe8; border-color: transparent; box-shadow: 0 50px 80px -44px rgb(10 30 22 / .75); transform: translateY(-.5rem); }
.plan-card.plan-featured:hover { transform: translateY(-.9rem); }
.plan-featured h2, .plan-featured .plan-price strong { color: #fff; }
.plan-featured .plan-description, .plan-featured .plan-foundation, .plan-featured .plan-price .muted { color: #b8d2c4; }
.plan-featured .plan-lifetime { color: #8fe0bf; }
.plan-featured .plan-includes li, .plan-featured .plan-includes .icon { color: #e3efe8; }
.plan-featured .plan-includes .icon { color: #8fe0bf; }
.plan-featured .button { background: #8fe0bf; border-color: #8fe0bf; color: #0f2c23; background-image: none; }
.plan-featured .button:hover { background: #fff; border-color: #fff; color: #0f2c23; }
.plan-featured .text-link { color: #8fe0bf; }
.plan-featured .plan-ribbon { background: #8fe0bf; color: #0f2c23; }

/* ----- Checkout summary ----- */
.store .order-summary { background: linear-gradient(165deg, #1b4a3c, #0f2c23); color: #e3efe8; border-color: transparent; box-shadow: 0 50px 80px -44px rgb(10 30 22 / .75); }
.store .order-summary > h2 { color: #fff; }
.store .order-summary .plan-price strong { color: #fff; }
.store .order-summary .muted, .store .order-summary .plan-price .muted { color: #b8d2c4; }
.store .order-summary .plan-includes li { color: #e3efe8; }
.store .order-summary .plan-includes li::before { color: #8fe0bf; }
.store .order-summary .text-link { color: #8fe0bf; }

/* ----- Closing band ----- */
.store-closing { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; background: linear-gradient(135deg, #1b4a3c, #0f2c23); box-shadow: 0 50px 80px -50px rgb(10 30 22 / .7); }
.store-closing::before { content: ""; position: absolute; z-index: -1; width: 30rem; height: 30rem; right: -8rem; top: -14rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(143 224 191 / .28), transparent); }
.store-closing::after { content: ""; position: absolute; z-index: -1; width: 24rem; height: 24rem; left: -8rem; bottom: -14rem; border-radius: 50%; background: radial-gradient(closest-side, rgb(232 184 109 / .2), transparent); }
.store-closing .button { background: #8fe0bf; border-color: #8fe0bf; color: #0f2c23; background-image: none; }
.store-closing .button:hover { background: #fff; border-color: #fff; color: #0f2c23; }
.store-closing .button-secondary { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
.store-closing .button-secondary:hover { background: rgb(255 255 255 / .1); border-color: #fff; color: #fff; }

/* ----- Footer ----- */
.store-footer { background: linear-gradient(180deg, #0f2c23, #0a1f18); color: #b8d2c4; border-top: 0; }
.store-footer .brand, .store-footer strong { color: #fff; }
.store-footer-top p, .store-footer-bottom { color: #8fb0a0; }
.store-footer a:not(.brand) { color: #cfe3d8; text-decoration-color: rgb(207 227 216 / .35); }
.store-footer a:not(.brand):hover { color: #8fe0bf; }
.store-footer-bottom { border-top-color: rgb(255 255 255 / .12); }

/* ----- Features page: a menu that stays with you ----- */
.feature-jump { position: sticky; top: 4.4rem; z-index: 20; margin-inline: auto; width: fit-content; max-width: 100%; padding: .5rem; border: 1px solid #dfe6dc; border-radius: 999px; background: rgb(250 248 242 / .88); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 16px 36px -24px rgb(10 30 22 / .5); gap: .25rem; margin-bottom: 1rem; }
.feature-jump a { padding: .45rem .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; text-decoration: none; color: #294337; transition: background-color 180ms, color 180ms; }
.feature-jump a:hover { background: var(--accent-soft); }
.feature-jump a.is-active { background: var(--mx-forest); color: #fff; }
.feature-detail { scroll-margin-top: 8rem; }
.feature-detail > div > .icon { width: 2.4rem; height: 2.4rem; padding: .55rem; border-radius: 12px; background: var(--accent-soft); }

/* ----- Contact: real phone screens ----- */
.mx-contact-visual { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; margin: 2.2rem 0 0; }
.mx-contact-visual img { width: min(11rem, 40%); height: auto; border-radius: 22px; border: 6px solid #0e241c; box-shadow: 0 34px 50px -28px rgb(10 30 22 / .6); }
.mx-contact-visual img:nth-of-type(2) { margin-top: 1.8rem; }
.mx-contact-visual figcaption { flex-basis: 100%; }

/* ----- Forms on the public pages ----- */
.store input, .store select, .store textarea { border-radius: 12px; border-color: #cfd9cf; background: #fcfdfb; }
.store input:focus-visible, .store select:focus-visible, .store textarea:focus-visible { background: #fff; }

@media (max-width: 800px) {
  .feature-jump { position: static; border-radius: 18px; width: auto; }
  .plan-card.plan-featured { transform: none; } .plan-card.plan-featured:hover { transform: translateY(-4px); }
  .store-main:has(.store-page-title)::before { height: 26rem; }
}
@media (prefers-reduced-motion: reduce) { .plan-card.plan-featured, .plan-card.plan-featured:hover { transform: none; } }
.store-page-title.compact > .text-link { display: flex; width: fit-content; }
.store-page-title.compact .page-eyebrow { display: flex; width: fit-content; }

.feature-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100% - 1rem); }
.feature-jump::-webkit-scrollbar { display: none; }
.feature-jump a { white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; flex: none; }
.feature-jump a .icon { width: 1.05rem; height: 1.05rem; }
@media (max-width: 800px) { .feature-jump { justify-content: flex-start; } }

/* =====================================================================================================
   Glass theme on the public website: frosted bar, cards and panels over the aurora; dark glass for the
   feature moments (featured plan, rent-or-own, hosting promises, checkout summary, closing band, footer).
   ===================================================================================================== */
.store { --bg: #f7f5ee; --store-stage: transparent; }
body.store { background: transparent; }
.store-bar, .store-bar.is-scrolled { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--glass-edge); box-shadow: 0 10px 34px -24px rgb(12 64 48 / .5); }
.store-bar.is-scrolled { padding-block: .7rem; }
/* Solid: the menu sits inside the frosted header, and a blur inside a blur shows nothing (it looked see-through on phones). */
.store-mobile-nav nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--line); box-shadow: 0 18px 50px -12px rgb(8 30 22 / .35), 0 2px 8px rgb(8 30 22 / .08); }
.store-nav .button-secondary { background: var(--glass); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Light glass panes */
.store .card, .plan-card, .bn-card, .mx-tour-panel, .mx-mini, .mx-feature-shot, .mx-float, .role-panel, .demo-stage, .feature-detail .mx-shot, .contact-panel, .store-narrow, .story, .release {
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
.bn-card:hover, .plan-card:hover { background: var(--glass-strong); }
.mx-tour-panel { background: var(--glass-soft); }
.role-panel { background: var(--glass-soft); }
.bn-card.bn-booking, .bn-card.bn-marketing { background: var(--glass); }
.bn-visual { background: rgb(255 255 255 / .42); border: 1px solid var(--glass-line); }
.bn-receipt, .bn-profile, .bn-bars, .bn-points, .bn-birthday, .bn-chat p { background: var(--glass-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mx-float { background: rgb(255 255 255 / .78); }
.mx-window { background: linear-gradient(155deg, rgb(24 80 62 / .88), rgb(9 34 26 / .94)); border: 1px solid var(--glass-dark-edge); }
.mx-phone { background: rgb(14 36 28 / .9); border: 1px solid var(--glass-dark-edge); }
.mx-eyebrow, .mx-chips li, .mx-marquee-track span { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mx-chips li { color: #294337; }
.mx-facts ul { background: var(--glass-soft); border: 1px solid var(--glass-edge); border-radius: 22px; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); overflow: hidden; }
.mx-facts li { border-left-color: var(--glass-line); padding-inline: 1.6rem; } .mx-facts li:first-child { padding-left: 1.6rem; }
.mx-marquee { border: 0; }
.feature-jump { background: var(--glass); border-color: var(--glass-edge); box-shadow: var(--glass-shadow); }
.faq-list details { background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 16px; padding: 1.1rem 1.3rem; margin-bottom: .7rem; box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.faq-list details:first-child { border-top: 1px solid var(--glass-edge); }
.transformation-table table { background: var(--glass-strong); border-radius: 16px; overflow: hidden; }
.plan-comparison, .plan-comparison table { background: var(--glass-strong); border-radius: 16px; }
.mx-compare-stage { border: 1px solid var(--glass-edge); }
.mx-compare-label { background: var(--glass-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mx-compare-label-b { background: var(--glass-dark); color: #fff; }
.store .tab-list button { background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.store .tab-list button[aria-selected="true"] { background: var(--mx-forest); color: #fff; border-color: var(--mx-forest); }
.store input, .store select, .store textarea { background: rgb(255 255 255 / .78); border-color: rgb(12 64 48 / .16); }

/* Monthly / yearly pricing, tax notes and the checkout choice */
.plan-effective { margin: -.35rem 0 0; font-size: .88rem; color: var(--ink-2); }
.plan-effective strong { color: var(--mx-forest, #0f5f4b); font-variant-numeric: tabular-nums; }
.plan-save { display: inline-block; margin-left: .35rem; padding: .1rem .55rem; border-radius: 999px; background: #dff3e6; color: #0b5a3a; font-size: .76rem; font-weight: 700; }
.plan-tax { margin: -.35rem 0 0; font-size: .78rem; color: var(--muted); }
.plan-featured .plan-effective, .plan-featured .plan-tax { color: #cfe3d6; } .plan-featured .plan-effective strong { color: #fff; } .plan-featured .plan-save { background: rgb(255 255 255 / .16); color: #d9f7e3; }
.billing-choice { border: 0; padding: 0; margin: 0 0 .5rem; display: grid; gap: .6rem; }
.billing-choice legend { font-weight: 650; margin-bottom: .5rem; padding: 0; }
.billing-choice .choice { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--glass-edge, #cfd9d0); border-radius: 14px; background: rgb(255 255 255 / .7); cursor: pointer; }
.billing-choice .choice:has(input:checked) { border-color: #0f5f4b; box-shadow: 0 0 0 3px rgb(15 95 75 / .14); background: #fff; }
.billing-choice .choice { justify-content: flex-start; min-height: 0; }
.billing-choice .choice input { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; flex: none; margin-top: .2rem; accent-color: #0f5f4b; }
.billing-choice .choice > span { flex: 1; }
.billing-choice .choice strong, .billing-choice .choice small { display: block; }
.billing-choice .choice small { color: var(--muted); font-size: .82rem; margin-top: .15rem; }
/* Pay with: one card per payment provider */
.pay-methods { border: 0; padding: 0; margin: .25rem 0 .25rem; display: grid; gap: .6rem; min-width: 0; }
.pay-methods legend { font-weight: 650; margin-bottom: .5rem; padding: 0; }
.pay-method { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1px solid var(--glass-edge, #cfd9d0); border-radius: 14px; background: rgb(255 255 255 / .7); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.pay-method:hover { border-color: #8fb3a3; }
.pay-method:has(input:checked) { border-color: #0f5f4b; box-shadow: 0 0 0 3px rgb(15 95 75 / .14); background: #fff; }
.pay-method:has(input:focus-visible) { outline: 2px solid #0f5f4b; outline-offset: 2px; }
.pay-method input { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: #0f5f4b; }
.pay-mark { flex: none; display: inline-grid; place-items: center; min-width: 3.4rem; height: 2.1rem; padding: 0 .5rem; border-radius: 8px; font-size: .78rem; font-weight: 800; letter-spacing: .01em; color: #fff; background: #1f2937; }
.pay-mark-card { background: linear-gradient(135deg, #635bff, #4b45c6); }
.pay-mark-paypal { background: #ffc439; color: #003087; font-style: italic; }
.pay-mark-upi { background: linear-gradient(135deg, #0f9d58, #0b7a44); }
.pay-mark-test { background: #e5e7eb; color: #374151; }
.pay-text { display: grid; gap: .1rem; min-width: 0; }
.pay-text strong { font-size: .95rem; }
.pay-text small { color: var(--muted); font-size: .8rem; }
.pay-secure { margin: .15rem 0 0; font-size: .8rem; color: var(--muted); }
/* the billing and installation choices: the box sits beside its text, not in a column of its own */
.billing-choice .choice { display: flex; align-items: flex-start; }
.billing-choice .choice input[type=radio], .billing-choice .choice input[type=checkbox] { width: 1.15rem; height: 1.15rem; min-height: 0; padding: 0; margin: .2rem 0 0; flex: none; accent-color: #0f5f4b; }
.billing-choice .choice > span { flex: 1; min-width: 0; }
.billing-choice .choice strong { display: block; margin-bottom: .1rem; }
.order-lines { display: grid; gap: .45rem; margin: .4rem 0 0; font-size: .9rem; }
.order-lines div { display: flex; justify-content: space-between; gap: 1rem; }
.order-lines dt, .order-lines dd { margin: 0; }
.order-lines .order-total { border-top: 1px solid rgb(255 255 255 / .25); padding-top: .55rem; font-weight: 700; font-size: 1rem; }

/* The calculator sits inside dark glass: no light pane behind its light text */
.roi-tool { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.roi-controls { background: rgb(246 249 240 / .94); border: 1px solid rgb(255 255 255 / .7); border-radius: 16px; box-shadow: 0 18px 40px -22px rgb(4 20 14 / .6); }
.roi-controls input[type="number"] { background: #fff; }
.roi-result > span, .roi-result > p, .roi-breakdown { color: #e3eee3; }
.roi-breakdown { border-bottom-color: rgb(255 255 255 / .22); }

/* Story cards: the glass pane needs room around the text */
.story { padding: 1.75rem 1.6rem 1.9rem; border-radius: 20px; border-top: 1px solid var(--glass-edge); }
.story-grid { gap: 1.5rem; }
/* The narrow main wrapper is layout only, not a pane */
.store-main.store-narrow { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Dark glass: the feature moments */
.plan-card.plan-featured, .store .order-summary, .mx-keep article, .mx-own, .store-closing, .roi-section, .mx-sticky {
  background: var(--glass-dark); border: 1px solid var(--glass-dark-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 30px 60px -30px rgb(8 30 22 / .7), inset 0 1px 0 rgb(255 255 255 / .18);
}
.mx-own-tool { background: rgb(255 255 255 / .08); border: 1px solid var(--glass-dark-edge); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mx-own-result > div { border: 1px solid var(--glass-dark-edge); }
.mx-sticky { background: linear-gradient(155deg, rgb(24 80 62 / .82), rgb(9 34 26 / .9)); }
.store-footer { background: linear-gradient(180deg, rgb(15 44 35 / .9), rgb(8 26 20 / .96)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--glass-dark-edge); }

/* A shared light-to-glass shimmer on hover for the big panes */
.bn-card, .plan-card, .store .card { position: relative; }
.bn-card::after, .plan-card:not(.plan-featured)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(120deg, rgb(255 255 255 / .55), transparent 38%); opacity: .55; mix-blend-mode: soft-light; }
@media (prefers-reduced-transparency: reduce) { .store-bar, .store .card, .plan-card, .bn-card, .faq-list details, .mx-facts ul { -webkit-backdrop-filter: none; backdrop-filter: none; } .bn-card::after, .plan-card::after { display: none; } }

/* Decorative glows and the hero phone reach a little past the edges; never let them make the page scroll sideways. */
html:has(body.store), body.store { overflow-x: clip; }
/* Demo steps on the dark panel: the current step is the light one, the others are outlined (the glass theme had
   made the current step vanish into the panel and the others look selected). */
.demo-workspace .tab-list button { background: transparent; color: #e8f0e1; border-color: rgb(232 240 225 / .35); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; text-decoration: none; }
.demo-workspace .tab-list button:hover { background: rgb(255 255 255 / .08); }
.demo-workspace .tab-list button[aria-selected="true"] { background: #dcebcf; color: #173e32; border-color: #dcebcf; font-weight: 650; }
/* Checkout on a phone or small tablet: what you're buying first, then the form; the pay button full width. */
@media (max-width: 800px) {
  .store-checkout .order-summary { order: -1; }
  .store-checkout .form-actions .button { width: 100%; }
}
/* Contact: the account and renew links each get their own tap room. */
.contact-panel .text-link, .contact-panel .text-link + p { display: block; margin-top: .75rem; }
.contact-panel .text-link + p a { display: inline-block; padding-block: .35rem; }
/* Plans on a tablet: three narrow cards don't fit, two leave one alone, so they stack (one under another) until there's room for all three. */
@media (min-width: 640px) and (max-width: 1023px) { .store .plan-grid { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; } }
/* Hero on phones and tablets: the phone picture stays inside the screen and above the caption, not over it. */
@media (max-width: 1023px) {
  .mx-stage { padding-left: 2.25rem; padding-bottom: 0; }
  .mx-phone { left: .25rem; bottom: 2.75rem; }
  .mx-caption { position: relative; inset: auto; transform: none; margin: 1rem 0 0 -2.25rem; padding: 0; white-space: normal; text-align: center; }
}
/* Pricing: "Hosted for you" plans (from the hosted SalonOS), above the license plans. */
.hosted-section { margin: 0 0 3.5rem; }
.hosted-head { max-width: 46rem; margin: 0 auto 1.5rem; text-align: center; }
.hosted-head h2, .own-hosting-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); line-height: 1.15; }
.own-hosting-title { margin: 0 auto 1.5rem; text-align: center; max-width: 46rem; }
.hosted-section .plan-price strong { font-size: 1.8rem; }
.hosted-trial { color: var(--accent); font-weight: 650; margin: 0; }
.hosted-section .plan-card h3 { font-size: 1.35rem; margin: 0; }