/* PilatesCRM mockup styles — Figtech Design · shares tokens with tokens.css */
@import url("tokens.css");

@font-face {
 font-family: "Ring-Display";
 src: url("/assets/fonts/Ring-Display.woff2") format("woff2"), url("/assets/fonts/Ring-Display.ttf") format("truetype");
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: "Hanken Grotesk";
 src: url("/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2"), url("/assets/fonts/HankenGrotesk-Variable.ttf") format("truetype");
 font-weight: 100 900;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: "Geist Mono";
 src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2"), url("/assets/fonts/GeistMono-Variable.ttf") format("truetype");
 font-weight: 100 900;
 font-style: normal;
 font-display: swap;
}
@font-face {
 font-family: "Fraunces";
 src: local("Fraunces Light Italic"), local("Fraunces");
 font-weight: 300;
 font-style: italic;
 font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
 margin: 0;
 font-family: var(--font-sans);
 font-size: var(--fs-body);
 line-height: var(--lh-body);
 color: var(--c-ink);
 background: var(--c-paper);
}
img, svg { display: block; max-width: 100%; }
svg[hidden], [hidden] { display: none !important; }
a { color: var(--c-azure); text-decoration: none; }
a:hover { color: var(--c-cobalt); }

.ring { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: var(--lh-display); }
.eyebrow {
 font-family: var(--font-mono);
 font-weight: 500;
 font-size: var(--fs-eyebrow);
 letter-spacing: var(--track-eyebrow);
 text-transform: uppercase;
 color: var(--c-violet);
 margin: 0 0 var(--space-3);
}
.label {
 font-family: var(--font-mono);
 font-weight: 500;
 font-size: var(--fs-label);
 letter-spacing: var(--track-label);
 text-transform: uppercase;
 color: var(--c-ink-3);
}
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--c-ink-2); }
.muted { color: var(--c-ink-3); }
.ph-ribbon {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-family: var(--font-mono);
 font-weight: 600;
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-indigo);
 background: var(--c-wash-iris);
 border: 1px solid var(--c-lilac);
 padding: 5px 10px;
 border-radius: 4px;
}

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 font-family: var(--font-mono);
 font-weight: 600;
 font-size: var(--fs-button);
 letter-spacing: var(--track-button);
 text-transform: uppercase;
 line-height: 1;
 padding: 12px 22px;
 border-radius: var(--radius-pill);
 border: 1.5px solid transparent;
 cursor: pointer;
 transition: background var(--dur-fast) var(--ease-standard),
 border-color var(--dur-fast) var(--ease-standard),
 color var(--dur-fast) var(--ease-standard),
 box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary { background: var(--c-cobalt); color: var(--c-surface-raised); }
.btn-primary:hover { background: var(--c-navy); color: var(--c-surface-raised); }
.btn-primary:active { color: var(--c-surface-raised); }
/* Nav link color must never override primary CTA label (AA on cobalt) */
.m-nav-links a.btn-primary,
.m-nav-links a.btn-primary:hover,
.m-nav-links a.btn-primary:focus-visible,
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:visited {
 color: var(--c-surface-raised);
}
.btn-secondary { background: transparent; color: var(--c-violet); border-color: var(--c-violet); }
.btn-secondary:hover { background: var(--c-wash-iris); }
.btn-ghost { background: transparent; color: var(--c-navy); padding-left: 12px; padding-right: 12px; }
.btn-ghost:hover { background: var(--c-wash-sky); }
.btn-sm { padding: 8px 14px; font-size: 12px; }

.wrap { width: min(1120px, calc(100% - 2 * var(--margin-min))); margin-inline: auto; }
.wrap-wide { width: min(1280px, calc(100% - 2 * var(--margin-min))); margin-inline: auto; }

.card {
 background: var(--c-surface);
 border: var(--border);
 border-radius: var(--radius-card);
 padding: 22px;
 box-shadow: var(--shadow-sm);
}
.chip {
 display: inline-flex;
 align-items: center;
 font-family: var(--font-mono);
 font-weight: 600;
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 padding: 5px 10px;
 border-radius: var(--radius-chip);
 white-space: nowrap;
}
.chip-booked { background: var(--c-chip-booked-bg); color: var(--c-chip-booked-fg); }
.chip-waitlist { background: var(--c-chip-waitlist-bg); color: var(--c-chip-waitlist-fg); }
.chip-checked { background: var(--c-chip-checked-bg); color: var(--c-chip-checked-fg); }
.chip-cancelled { background: var(--c-chip-cancelled-bg); color: var(--c-chip-cancelled-fg); }
.chip-open { background: var(--c-chip-open-bg); color: var(--c-chip-open-fg); }
.chip-intro { background: var(--c-chip-intro-bg); color: var(--c-chip-intro-fg); }

/* Marketing nav */
.m-nav {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding: 18px 0;
}
.m-nav .brand { display: flex; align-items: center; gap: 12px; color: inherit; }
.m-nav .brand .word { font-family: var(--font-display); font-size: 28px; color: var(--c-ink); line-height: 1; }
.m-nav .brand .sub {
 font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
 color: var(--c-violet); margin-top: 4px;
}
.m-nav-links { display: flex; gap: 28px; align-items: center; }
.m-nav-links a { color: var(--c-ink-2); font-weight: 500; font-size: 14px; }
.m-nav-links a:hover { color: var(--c-ink); }

/* Hero */
.hero {
 position: relative;
 padding: 56px 0 72px;
 overflow: hidden;
}
.hero-grid {
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 gap: 48px;
 align-items: center;
}
.hero h1.ring { font-size: var(--fs-display); margin: 0 0 20px; color: var(--c-ink); max-width: 14ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art {
 position: relative;
 min-height: 420px;
 border-radius: var(--radius-panel);
 background: var(--c-mist);
 overflow: hidden;
 border: var(--border);
}
.hero-art .bloom {
 position: absolute; inset: 0;
 background:
 radial-gradient(ellipse 70% 60% at 70% 40%, rgba(139,111,207,0.28), transparent 60%),
 radial-gradient(ellipse 50% 50% at 30% 70%, rgba(74,143,227,0.22), transparent 55%),
 url("assets/panel-grid-tile.svg") center/cover;
 opacity: 0.9;
}
.hero-card {
 position: absolute; left: 36px; right: 36px; top: 48px;
 background: var(--c-surface-raised);
 border-radius: var(--radius-card);
 border: var(--border);
 box-shadow: var(--shadow-md);
 padding: 20px 22px;
}
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.stat { padding: 12px; background: var(--c-wash-sky); border-radius: 8px; }
.stat b { display: block; font-size: 22px; font-weight: 600; color: var(--c-navy); }
.stat span { font-size: 12px; color: var(--c-ink-3); }

/* Sections */
section.band { padding: 72px 0; }
section.band.mist { background: var(--c-mist); }
section.band.iris { background: var(--c-wash-iris); }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head h2.ring { font-size: var(--fs-display-sm); margin: 0 0 12px; }
.section-head h2.hanken { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h2); letter-spacing: -0.01em; margin: 0 0 12px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.feature-grid .card h3 { font-size: 17px; font-weight: 600; margin: 14px 0 8px; }
.feature-grid .card p { margin: 0; font-size: 14px; color: var(--c-ink-2); line-height: 1.5; }
.icon-tile {
 width: 40px; height: 40px; border-radius: 10px;
 background: var(--c-wash-sky); display: grid; place-items: center;
}
.icon-tile.iris { background: var(--c-wash-iris); }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card { text-align: left; }
.price-card .amt { font-size: 36px; font-weight: 600; color: var(--c-navy); letter-spacing: -0.02em; }
.price-card .amt small { font-size: 14px; font-weight: 500; color: var(--c-ink-3); }
.price-card.featured { border-color: var(--c-cobalt); box-shadow: var(--shadow-md); position: relative; }
.price-card.featured::before {
 content: " · MOST STUDIOS";
 position: absolute; top: -10px; left: 20px;
 font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em;
 background: var(--c-cobalt); color: var(--c-surface); padding: 4px 10px; border-radius: 999px;
}
.cta-final { text-align: left; padding: 64px 0; }
.cta-final h2.ring { font-size: var(--fs-display-sm); margin: 0 0 16px; }
.footer {
 border-top: var(--border);
 padding: 40px 0 48px;
 display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
 color: var(--c-ink-3); font-size: 13px;
}
.footer .brand-mini { display: flex; align-items: center; gap: 10px; color: var(--c-ink); }
.footer .brand-mini .word { font-family: var(--font-display); font-size: 22px; }
.divider-wrap {
 padding: 28px 0;
 opacity: 1;
 max-width: 100%;
 overflow: hidden;
}
.divider-wrap img,
.divider-wrap .streak-divider-svg {
 width: 100%;
 max-width: 1120px;
 height: auto;
 margin: 0 auto;
 display: block;
}

/* App shell */
.app {
 display: grid;
 grid-template-columns: var(--sidebar-w) 1fr;
 min-height: 100vh;
 background: var(--c-paper);
}
.sidebar {
 background: var(--c-mist);
 border-right: var(--border);
 padding: 20px 14px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.sidebar .brand .word { font-family: var(--font-display); font-size: 22px; color: var(--c-ink); }
.sidebar .brand .sub {
 font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
 color: var(--c-violet); margin-top: 2px;
}
.nav-section {
 font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
 color: var(--c-ink-4); padding: 14px 12px 6px;
}
.nav-item {
 display: flex; align-items: center; gap: 10px;
 padding: 10px 12px; border-radius: 8px;
 color: var(--c-ink-2); font-size: 13px; font-weight: 500;
 border-left: 2px solid transparent;
}
.nav-item:hover { background: rgba(255,255,255,0.55); color: var(--c-ink); }
.nav-item.active {
 background: var(--c-surface);
 color: var(--c-navy);
 border-left-color: var(--c-cobalt);
 box-shadow: var(--shadow-sm);
}
.nav-item svg, .nav-item img { flex: none; color: var(--c-ink-2); }
.nav-item.active { color: var(--c-navy); }
.nav-item.active svg, .nav-item.active img { color: var(--c-cobalt); }
.icon-tile { color: var(--c-navy); }
.icon-tile.iris { color: var(--c-violet); }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
 height: var(--topbar-h);
 display: flex; align-items: center; justify-content: space-between;
 gap: 16px; padding: 0 24px;
 background: var(--c-surface);
 border-bottom: var(--border);
}
.studio-switch {
 display: flex; align-items: center; gap: 10px;
 padding: 6px 12px; border-radius: 8px; border: var(--border); background: var(--c-paper);
 font-size: 13px; font-weight: 500;
}
.studio-switch small { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-3); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.search {
 width: 220px; height: 36px; border-radius: 8px; border: var(--border);
 padding: 0 12px; background: var(--c-paper); color: var(--c-ink-3); font-size: 13px;
 display: flex; align-items: center;
}
.icon-btn {
 width: 36px; height: 36px; border-radius: 8px; border: var(--border);
 background: var(--c-paper); display: grid; place-items: center; color: var(--c-ink-2);
}
.avatar {
 width: 36px; height: 36px; border-radius: 999px;
 background: linear-gradient(135deg, var(--c-azure), var(--c-iris));
 color: var(--c-surface); display: grid; place-items: center;
 font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; font-weight: 600;
}
.page { padding: 24px 28px 40px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.page-header h1 { font-size: var(--fs-app-h1); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.filter-pill {
 font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
 padding: 7px 12px; border-radius: 999px; border: var(--border); background: var(--c-surface); color: var(--c-ink-2);
}
.filter-pill.on { background: var(--c-wash-sky); border-color: var(--c-sky); color: var(--c-navy); }
.table-wrap {
 background: var(--c-surface); border: var(--border); border-radius: var(--radius-card);
 box-shadow: var(--shadow-sm); overflow: auto;
 -webkit-overflow-scrolling: touch;
}
.table-wrap table.sched { min-width: 640px; }
table.sched { width: 100%; border-collapse: collapse; font-size: var(--fs-app-table); }
table.sched th {
 text-align: left; padding: 12px 16px;
 font-family: var(--font-mono); font-weight: 500; font-size: 11px;
 letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-3);
 background: var(--c-paper); border-bottom: 1px solid var(--c-rule-strong);
}
table.sched td { padding: 14px 16px; border-bottom: 1px solid var(--c-rule); vertical-align: middle; }
table.sched tr:last-child td { border-bottom: 0; }
table.sched tr:hover td { background: var(--c-wash-sky); }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.metric { background: var(--c-surface); border: var(--border); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.metric .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-3); }
.metric .v { font-size: 26px; font-weight: 600; color: var(--c-navy); margin-top: 6px; letter-spacing: -0.02em; }
.metric .v em { font-style: normal; font-size: 13px; color: var(--c-success); font-weight: 500; margin-left: 6px; }

@media (max-width: 900px) {
 .hero-grid, .feature-grid, .problem-grid, .price-grid, .metrics { grid-template-columns: 1fr 1fr; }
 .feature-grid { grid-template-columns: 1fr 1fr; }
 /* Keep primary CTA visible; hide text links (sheet/hamburger deferred) */
 .m-nav-links a:not(.btn) { display: none; }
 .m-nav-links { gap: 0; }
 .hero h1.ring { font-size: var(--fs-m-display); }
 .app { grid-template-columns: 1fr; }
 .sidebar { display: none; }
}
@media (max-width: 640px) {
 .page { padding: 16px; overflow-x: hidden; }
 .topbar { padding: 0 12px; }
 .search { width: 120px; }
 .metrics { grid-template-columns: 1fr 1fr; }
 .hero-grid, .feature-grid, .problem-grid, .price-grid, .stat-row { grid-template-columns: 1fr; }
 .hero { padding: 32px 0 48px; }
 .hero-art { min-height: 320px; }
 .hero-card { left: 16px; right: 16px; top: 24px; }
 section.band { padding: 48px 0; }
 .section-head h2.ring { font-size: var(--fs-m-h1); }
}



/* Native button resets for motion controls */
button.filter-pill,
button.class-chip,
button.date-pill,
button.slot,
button.spot {
 font: inherit;
 appearance: none;
 -webkit-appearance: none;
 margin: 0;
}

/* =====================================================================
 Motion & microinteractions — DIRECTION.md §7
 Transform + opacity only. CSS-first; motion.js adds enter/stagger/count.
 ===================================================================== */

/* Buttons — hover lift + press */
.btn {
 transition:
 background var(--dur-fast) var(--ease-standard),
 border-color var(--dur-fast) var(--ease-standard),
 color var(--dur-fast) var(--ease-standard),
 box-shadow var(--dur-fast) var(--ease-standard),
 transform var(--dur-fast) var(--ease-standard);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active { transform: scale(0.98); }
.btn-secondary:hover,
.btn-ghost:hover { transform: translateY(-1px); }

/* Marketing cards — subtle lift (app cards stay flat) */
.card.motion-lift {
 transition:
 border-color var(--dur-base) var(--ease-standard),
 box-shadow var(--dur-base) var(--ease-out),
 transform var(--dur-base) var(--ease-out);
}
.card.motion-lift:hover {
 border-color: var(--c-rule-strong);
 box-shadow: var(--shadow-md);
 transform: translateY(-2px);
}

/* Nav links */
.m-nav-links a {
 position: relative;
 transition: color var(--dur-fast) var(--ease-standard);
}
.m-nav-links a:not(.btn)::after {
 content: "";
 position: absolute;
 left: 0; right: 0; bottom: -4px;
 height: 1px;
 background: var(--c-cobalt);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform var(--dur-base) var(--ease-out);
}
.m-nav-links a:not(.btn):hover::after,
.m-nav-links a:not(.btn):focus-visible::after { transform: scaleX(1); }

/* Table rows */
table.sched tbody tr {
 transition: background-color var(--dur-fast) var(--ease-standard);
}
table.sched tbody tr.is-selected td {
 background: var(--c-wash-sky);
 box-shadow: inset 2px 0 0 var(--c-cobalt);
}
table.sched tbody tr.is-selected:hover td { background: var(--c-wash-sky); }

/* Filter pills / chips */
.filter-pill,
.chip {
 transition:
 background var(--dur-base) var(--ease-standard),
 border-color var(--dur-base) var(--ease-standard),
 color var(--dur-base) var(--ease-standard),
 transform var(--dur-instant) var(--ease-in);
}
.filter-pill { cursor: pointer; }
.filter-pill:hover { border-color: var(--c-rule-strong); color: var(--c-ink); }
.filter-pill:active { transform: scale(0.98); }
.chip-breathe {
 animation: breath-opacity calc(var(--dur-breath-in) + var(--dur-breath-out)) var(--ease-breathe) infinite;
}

/* Icon / studio controls */
.icon-btn,
.studio-switch,
.nav-item {
 transition:
 background var(--dur-fast) var(--ease-standard),
 color var(--dur-fast) var(--ease-standard),
 border-color var(--dur-fast) var(--ease-standard),
 box-shadow var(--dur-fast) var(--ease-standard),
 transform var(--dur-instant) var(--ease-in);
}
.icon-btn:hover { background: var(--c-wash-sky); color: var(--c-cobalt); }
.icon-btn:active { transform: scale(0.96); }
.nav-item:active { transform: scale(0.99); }

/* Page / section enter (Roll-Down)
 Resting state is fully visible (PNG / no-JS). JS adds html.js-motion to enable enter. */
.motion-enter-child { /* stagger hooks only */ }
html.js-motion .motion-enter:not(.is-in) {
 opacity: 0;
 transform: translateY(var(--rise-enter));
}
html.js-motion .motion-enter.is-in {
 opacity: 1;
 transform: none;
 transition:
 opacity var(--dur-page) var(--ease-out),
 transform var(--dur-page) var(--ease-out);
}
html.js-motion .motion-enter:not(.is-in) .motion-enter-child {
 opacity: 0;
 transform: translateY(var(--rise-enter));
}
html.js-motion .motion-enter.is-in .motion-enter-child {
 opacity: 1;
 transform: none;
 transition:
 opacity var(--dur-page) var(--ease-out),
 transform var(--dur-page) var(--ease-out);
 transition-delay: calc(var(--stagger-i, 0) * var(--stagger-roll));
}

/* Streak draw-in */
.streak-draw {
 display: block;
 width: 100%;
 height: auto;
 overflow: visible;
}
.streak-draw .streak-path {
 stroke-dasharray: 100;
 stroke-dashoffset: 100;
}
.streak-draw.is-drawn .streak-path {
 transition: stroke-dashoffset var(--dur-draw) var(--ease-out);
 stroke-dashoffset: 0;
}
.streak-draw .streak-path:nth-child(1) { transition-delay: 0ms; }
.streak-draw .streak-path:nth-child(2) { transition-delay: 40ms; }
.streak-draw .streak-path:nth-child(3) { transition-delay: 80ms; }
.streak-draw .streak-path:nth-child(4) { transition-delay: 120ms; }
.streak-draw .streak-path:nth-child(5) { transition-delay: 160ms; }
.streak-draw .streak-path:nth-child(6) { transition-delay: 200ms; }

/* Empty-state / soft breathe */
.motion-breathe {
 animation: breath-scale calc(var(--dur-breath-in) + var(--dur-breath-out)) var(--ease-breathe) infinite;
 transform-origin: center;
}
@keyframes breath-opacity {
 0%, 100% { opacity: 0.88; }
 40% { opacity: 1; } /* end of inhale ~4/10 */
}
@keyframes breath-scale {
 0%, 100% { transform: scale(1); opacity: 0.9; }
 40% { transform: scale(1.015); opacity: 1; }
}

/* Toast */
.toast-stack {
 position: fixed;
 top: 20px;
 right: 20px;
 z-index: 80;
 display: flex;
 flex-direction: column;
 gap: 10px;
 pointer-events: none;
}
.toast {
 pointer-events: auto;
 min-width: 240px;
 max-width: 360px;
 padding: 14px 16px;
 background: var(--c-surface-raised);
 border: var(--border);
 border-radius: var(--radius-card);
 box-shadow: var(--shadow-lg);
 color: var(--c-ink);
 font-size: 14px;
 opacity: 0;
 transform: translateY(-12px);
 transition:
 opacity var(--dur-slow) var(--ease-out),
 transform var(--dur-slow) var(--ease-out);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out {
 opacity: 0;
 transform: translateY(-8px);
 transition-duration: var(--dur-base);
 transition-timing-function: var(--ease-in);
}
.toast .label { margin-bottom: 4px; color: var(--c-violet); }

/* Modal */
.modal-root[hidden] { display: none !important; }
.modal-root {
 position: fixed; inset: 0; z-index: 70;
 display: grid; place-items: center;
 padding: 24px;
}
.modal-backdrop {
 position: absolute; inset: 0;
 background: rgba(26, 27, 58, 0.36);
 opacity: 0;
 transition: opacity 240ms var(--ease-out);
}
.modal-panel {
 position: relative;
 width: min(440px, 100%);
 background: var(--c-surface-raised);
 border-radius: var(--radius-modal);
 border: var(--border);
 box-shadow: var(--shadow-lg);
 padding: 28px 28px 24px;
 opacity: 0;
 transform: translateY(12px) scale(0.98);
 transition:
 opacity var(--dur-slow) var(--ease-out),
 transform var(--dur-slow) var(--ease-out);
}
.modal-root.is-open .modal-backdrop { opacity: 1; }
.modal-root.is-open .modal-panel { opacity: 1; transform: none; }
.modal-root.is-closing .modal-backdrop {
 opacity: 0;
 transition-duration: 180ms;
 transition-timing-function: var(--ease-in);
}
.modal-root.is-closing .modal-panel {
 opacity: 0;
 transform: translateY(8px) scale(0.98);
 transition-duration: 200ms;
 transition-timing-function: var(--ease-in);
}

/* Success check */
.success-check {
 width: 56px; height: 56px;
 margin: 0 auto 16px;
}
.success-check circle,
.success-check path {
 fill: none;
 stroke: var(--c-success);
 stroke-width: 2.25;
 stroke-linecap: round;
 stroke-linejoin: round;
}
.success-check circle {
 stroke-dasharray: 140;
 stroke-dashoffset: 140;
}
.success-check path {
 stroke-dasharray: 40;
 stroke-dashoffset: 40;
}
.success-check.is-drawn {
 animation: success-pulse 480ms var(--ease-breathe) 400ms both;
}
.success-check.is-drawn circle {
 transition: stroke-dashoffset 400ms var(--ease-out);
 stroke-dashoffset: 0;
}
.success-check.is-drawn path {
 transition: stroke-dashoffset 280ms var(--ease-out) 160ms;
 stroke-dashoffset: 0;
}
@keyframes success-pulse {
 0% { transform: scale(1); }
 50% { transform: scale(1.04); }
 100% { transform: scale(1); }
}

/* Skeleton */
.skeleton {
 background: var(--c-mist);
 border-radius: 8px;
 position: relative;
 overflow: hidden;
}
.skeleton::after {
 content: "";
 position: absolute; inset: 0;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
 transform: translateX(-100%);
 animation: skeleton-shimmer 1.4s var(--ease-standard) infinite;
}
@keyframes skeleton-shimmer {
 100% { transform: translateX(100%); }
}
.skeleton-swap {
 position: relative;
}
.skeleton-swap .skeleton-layer,
.skeleton-swap .content-layer {
 transition: opacity 240ms var(--ease-out);
}
.skeleton-swap.is-loaded .skeleton-layer { opacity: 0; pointer-events: none; }
.skeleton-swap:not(.is-loaded) .content-layer { opacity: 0; }
.skeleton-swap.is-loaded .content-layer { opacity: 1; }

/* Sidebar Carriage demo (collapsed rail) */
.app.sidebar-collapsed {
 grid-template-columns: 72px 1fr;
}
.app .sidebar {
 transition: none; /* width via grid; labels fade */
}
.app .sidebar .brand .word,
.app .sidebar .brand .sub,
.app .sidebar .nav-section,
.app .sidebar .nav-item span.nav-label {
 transition: opacity 200ms var(--ease-out);
}
.app.sidebar-collapsed .sidebar .brand .word,
.app.sidebar-collapsed .sidebar .brand .sub,
.app.sidebar-collapsed .sidebar .nav-section,
.app.sidebar-collapsed .sidebar .nav-item span.nav-label {
 opacity: 0;
 width: 0;
 overflow: hidden;
 transition-duration: 80ms;
}
.app .sidebar-inner {
 /* optional transform track for off-canvas mobile — reserved */
}

/* Intro CTA soft breath glow (shadow alpha only) */
.btn-intro-breathe {
 animation: intro-glow calc(var(--dur-breath-in) + var(--dur-breath-out)) var(--ease-breathe) infinite;
}
@keyframes intro-glow {
 0%, 100% { box-shadow: 0 0 0 0 rgba(43, 95, 191, 0.0); }
 40% { box-shadow: 0 0 0 6px rgba(43, 95, 191, 0.12); }
}

/* =====================================================================
 Booking page (client-facing)
 ===================================================================== */
.book-page { min-height: 100vh; display: flex; flex-direction: column; }
.book-top {
 background: var(--c-surface);
 border-bottom: var(--border);
 padding: 14px 0;
}
.book-top-inner {
 display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.book-top .studio {
 display: flex; align-items: center; gap: 12px; color: inherit;
}
.book-top .studio .name { font-weight: 600; font-size: 15px; color: var(--c-ink); }
.book-top .studio .meta {
 font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
 text-transform: uppercase; color: var(--c-ink-3); margin-top: 2px;
}
.book-main { flex: 1; padding: 40px 0 64px; }
.book-layout {
 display: grid;
 grid-template-columns: 1.35fr 0.85fr;
 gap: 32px;
 align-items: start;
}
.book-header { margin-bottom: 28px; }
.book-header h1.ring {
 font-size: clamp(2.5rem, 5vw, 3.5rem);
 margin: 0 0 12px;
 max-width: 16ch;
}
.class-picker {
 display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.class-chip {
 font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
 text-transform: uppercase; font-weight: 600;
 padding: 10px 14px; border-radius: var(--radius-pill);
 border: 1.5px solid var(--c-rule); background: var(--c-surface); color: var(--c-ink-2);
 cursor: pointer;
 transition:
 background var(--dur-base) var(--ease-standard),
 border-color var(--dur-base) var(--ease-standard),
 color var(--dur-base) var(--ease-standard),
 transform var(--dur-instant) var(--ease-in),
 box-shadow var(--dur-base) var(--ease-out);
}
.class-chip:hover { border-color: var(--c-sky); color: var(--c-navy); background: var(--c-wash-sky); }
.class-chip:active { transform: scale(0.98); }
.class-chip.is-selected {
 background: var(--c-wash-sky);
 border-color: var(--c-cobalt);
 color: var(--c-navy);
 box-shadow: inset 0 0 0 1px rgba(43,95,191,0.15);
}
.class-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.date-strip {
 display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px;
 scrollbar-width: thin;
}
.date-pill {
 flex: none;
 min-width: 72px;
 text-align: center;
 padding: 10px 8px;
 border-radius: 10px;
 border: 1px solid var(--c-rule);
 background: var(--c-surface);
 cursor: pointer;
 transition:
 background var(--dur-fast) var(--ease-standard),
 border-color var(--dur-fast) var(--ease-standard),
 transform var(--dur-instant) var(--ease-in),
 color var(--dur-fast) var(--ease-standard);
}
.date-pill:hover { border-color: var(--c-sky); background: var(--c-wash-sky); }
.date-pill:active { transform: scale(0.98); }
.date-pill.is-selected {
 background: var(--c-wash-sky);
 border-color: var(--c-cobalt);
 color: var(--c-navy);
}
.date-pill:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.date-pill .dow {
 font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
 text-transform: uppercase; color: var(--c-ink-3); display: block;
}
.date-pill.is-selected .dow { color: var(--c-violet); }
.date-pill .dom { font-size: 18px; font-weight: 600; display: block; margin-top: 2px; }

.slot-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
 margin-bottom: 28px;
}
.slot {
 text-align: left;
 padding: 14px 14px 12px;
 border-radius: var(--radius-card);
 border: 1.5px solid var(--c-rule);
 background: var(--c-surface);
 cursor: pointer;
 transition:
 background var(--dur-fast) var(--ease-standard),
 border-color var(--dur-fast) var(--ease-standard),
 transform var(--dur-fast) var(--ease-out),
 box-shadow var(--dur-fast) var(--ease-standard);
}
.slot:hover:not(:disabled):not(.is-taken) {
 border-color: var(--c-sky);
 background: var(--c-wash-sky);
 transform: translateY(-1px);
}
.slot:active:not(:disabled) { transform: scale(0.98); }
.slot.is-selected {
 border-color: var(--c-cobalt);
 background: var(--c-wash-sky);
 box-shadow: inset 2px 0 0 var(--c-cobalt);
 transform: none;
}
.slot.is-taken,
.slot:disabled {
 opacity: 0.55;
 cursor: default;
 transform: none;
}
.slot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.slot .time {
 font-family: var(--font-mono); font-weight: 600; font-size: 13px;
 letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink);
}
.slot .meta { font-size: 12px; color: var(--c-ink-3); margin-top: 4px; }

.spot-map {
 background: var(--c-surface);
 border: var(--border);
 border-radius: var(--radius-card);
 padding: 18px 20px 20px;
 box-shadow: var(--shadow-sm);
 margin-bottom: 8px;
}
.spot-map .map-label { margin-bottom: 14px; }
.spot-rail {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 16px 12px;
 border-radius: 10px;
 background:
 linear-gradient(180deg, var(--c-mist), var(--c-wash-sky));
 border: 1px dashed var(--c-rule-strong);
 position: relative;
}
.spot-rail::before,
.spot-rail::after {
 content: "";
 position: absolute;
 left: 10px; right: 10px; height: 1px;
 background: var(--c-rule-strong);
 opacity: 0.7;
}
.spot-rail::before { top: 10px; }
.spot-rail::after { bottom: 10px; }
.spot {
 position: relative;
 z-index: 1;
 width: 40px; height: 40px;
 border-radius: 10px;
 border: 1.5px solid var(--c-rule-strong);
 background: var(--c-surface);
 cursor: pointer;
 font-family: var(--font-mono); font-size: 11px; font-weight: 600;
 color: var(--c-ink-2);
 display: grid; place-items: center;
 transition:
 background var(--dur-fast) var(--ease-standard),
 border-color var(--dur-fast) var(--ease-standard),
 color var(--dur-fast) var(--ease-standard),
 transform 280ms var(--ease-out),
 box-shadow var(--dur-fast) var(--ease-standard);
}
.spot:hover:not(:disabled):not(.is-taken) {
 background: var(--c-wash-sky);
 border-color: rgba(43, 95, 191, 0.4);
 color: var(--c-navy);
}
.spot.is-selected {
 background: var(--c-wash-sky);
 border-color: var(--c-cobalt);
 color: var(--c-navy);
 animation: spot-select 280ms var(--ease-out);
 box-shadow: 0 0 0 3px rgba(43, 95, 191, 0.18);
}
.spot.is-taken,
.spot:disabled {
 opacity: 1;
 cursor: default;
 background: var(--c-mist);
 color: var(--c-ink-4);
 border-color: var(--c-rule);
 border-style: dashed;
 text-decoration: line-through;
 text-decoration-color: var(--c-ink-4);
}
.spot:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@keyframes spot-select {
 0% { transform: scale(1); }
 40% { transform: scale(1.06); }
 100% { transform: scale(1); }
}
.spot-legend {
 display: flex; flex-wrap: wrap; gap: 14px;
 margin-top: 12px; font-size: 12px; color: var(--c-ink-3);
}
.spot-legend i {
 display: inline-block; width: 12px; height: 12px; border-radius: 3px;
 border: 1.5px solid var(--c-rule-strong); vertical-align: -1px; margin-right: 6px;
}
.spot-legend i.open { background: var(--c-surface); }
.spot-legend i.sel { background: var(--c-wash-sky); border-color: var(--c-cobalt); }
.spot-legend i.taken { background: var(--c-mist); opacity: 0.7; }

.book-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 24px; }
.intro-card {
 background: var(--c-wash-iris);
 border: 1px solid var(--c-lilac);
 border-radius: var(--radius-card);
 padding: 20px 22px;
}
.intro-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.intro-card p { margin: 0 0 16px; font-size: 14px; color: var(--c-ink-2); line-height: 1.5; }
.confirm-card h3 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.confirm-row {
 display: flex; justify-content: space-between; gap: 12px;
 padding: 8px 0; border-bottom: 1px solid var(--c-rule); font-size: 14px;
}
.confirm-row:last-of-type { border-bottom: 0; }
.confirm-row .k { color: var(--c-ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.confirm-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.confirm-card.is-success {
 background: var(--c-success-wash);
 border-color: #b7d4c6;
 transition: background 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.book-footer {
 border-top: var(--border);
 padding: 28px 0 36px;
 color: var(--c-ink-3); font-size: 13px;
 display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

@media (max-width: 900px) {
 .book-layout { grid-template-columns: minmax(0, 1fr); }
 .book-aside { position: static; }
 .slot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
 .book-main { padding: 28px 0 48px; }
 .book-header h1.ring { font-size: var(--fs-m-display); }
 .slot-grid { grid-template-columns: 1fr; }
 .spot { width: 36px; height: 36px; }
 .toast-stack { left: 12px; right: 12px; top: 12px; }
 .toast { max-width: none; }
}

/* Reduced motion — hard cuts; opacity fades ≤100ms allowed via .motion-allow-fade */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
 animation-duration: 0.01ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.01ms !important;
 scroll-behavior: auto !important;
 }
 .motion-allow-fade {
 transition: opacity 100ms linear !important;
 }
 .motion-enter,
 .motion-enter-child {
 opacity: 1 !important;
 transform: none !important;
 }
 .streak-draw .streak-path { stroke-dashoffset: 0 !important; }
 .success-check circle,
 .success-check path { stroke-dashoffset: 0 !important; }
 .chip-breathe,
 .motion-breathe,
 .btn-intro-breathe { animation: none !important; }
 .btn:hover,
 .btn:active,
 .card.motion-lift:hover,
 .slot:hover,
 .spot.is-selected { transform: none !important; }
}

/* =====================================================================
 Landing — live product chrome embeds (v1.2)
 Richer hero + feature microinteractions; Carriage/Breath language.
 ===================================================================== */

/* Hero product chrome shell */
.product-chrome {
 position: absolute;
 left: 28px; right: 28px; top: 36px; bottom: 28px;
 display: flex;
 flex-direction: column;
 background: var(--c-surface-raised);
 border-radius: var(--radius-panel);
 border: var(--border);
 box-shadow: var(--shadow-lg);
 overflow: hidden;
 min-height: 0;
}
.pc-topbar {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 10px 14px;
 background: var(--c-surface);
 border-bottom: var(--border);
 flex: none;
}
.pc-dots { display: flex; gap: 5px; }
.pc-dots i {
 width: 8px; height: 8px; border-radius: 999px;
 background: var(--c-rule-strong);
 display: block;
}
.pc-dots i:nth-child(1) { background: #E8A0A8; }
.pc-dots i:nth-child(2) { background: #E8D08A; }
.pc-dots i:nth-child(3) { background: #A8D4B8; }
.pc-crumb {
 display: flex; align-items: center; gap: 8px;
 flex: 1; min-width: 0;
 font-size: 12px; font-weight: 500; color: var(--c-ink-2);
 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-body {
 display: grid;
 grid-template-columns: 44px 1fr;
 flex: 1;
 min-height: 0;
}
.pc-rail {
 background: var(--c-mist);
 border-right: var(--border);
 padding: 12px 8px;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.pc-rail-item {
 display: block;
 height: 28px;
 border-radius: 6px;
 background: rgba(255,255,255,0.55);
 border: 1px solid transparent;
 transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.pc-rail-item.is-on {
 background: var(--c-surface);
 border-color: var(--c-rule);
 box-shadow: inset 2px 0 0 var(--c-cobalt);
}
.pc-main {
 padding: 12px 14px 14px;
 overflow: auto;
 min-width: 0;
}
.pc-tabs {
 display: flex;
 gap: 6px;
 margin-bottom: 12px;
 flex-wrap: wrap;
}
.pc-tab {
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 font-weight: 600;
 padding: 7px 11px;
 border-radius: var(--radius-pill);
 border: 1.5px solid var(--c-rule);
 background: var(--c-paper);
 color: var(--c-ink-2);
 cursor: pointer;
 transition:
 background var(--dur-base) var(--ease-standard),
 border-color var(--dur-base) var(--ease-standard),
 color var(--dur-base) var(--ease-standard),
 transform var(--dur-instant) var(--ease-in);
}
.pc-tab:hover { border-color: var(--c-sky); color: var(--c-navy); background: var(--c-wash-sky); }
.pc-tab:active { transform: scale(0.98); }
.pc-tab.is-selected,
.pc-tab.on {
 background: var(--c-wash-sky);
 border-color: var(--c-cobalt);
 color: var(--c-navy);
}
.pc-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pc-panel[hidden] { display: none !important; }
.pc-panel.is-active { display: block; }
.pc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pc-table { max-height: 220px; }
.pc-table table.sched { min-width: 0; font-size: 12px; }
.pc-table table.sched th,
.pc-table table.sched td { padding: 9px 10px; }
.pc-table table.sched tbody tr { cursor: pointer; }

.funnel-head {
 display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
 margin-bottom: 4px;
}
.funnel-title { font-weight: 600; font-size: 15px; margin-top: 2px; color: var(--c-ink); }
.funnel-steps {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 8px;
 margin-top: 14px;
}
.funnel-step {
 background: var(--c-wash-sky);
 border-radius: 8px;
 padding: 10px 8px;
 text-align: center;
 border: 1px solid transparent;
 transition: border-color var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-out);
}
.funnel-step:hover { border-color: var(--c-sky); transform: translateY(-1px); }
.funnel-step .fs-n {
 display: block;
 font-family: var(--font-mono);
 font-size: 9px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-violet);
 margin-bottom: 4px;
}
.funnel-step .fs-l { display: block; font-size: 11px; color: var(--c-ink-3); }
.funnel-step .fs-v { display: block; font-size: 18px; font-weight: 600; color: var(--c-navy); margin-top: 4px; }

.pc-spots { margin-bottom: 8px; }
.pc-slot-row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 8px;
 margin-top: 14px;
}
.pc-slot-row .slot { padding: 10px 10px 8px; }
.pc-slot-row .slot .time { font-size: 11px; }
.pc-slot-row .slot .meta { font-size: 11px; }

/* Enlarge hero art for richer chrome */
.hero-art { min-height: 520px; }
.hero-art .hero-card { /* legacy single card — keep if used */ }

/* Feature live grid */
.feature-live {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 20px;
}
.feature-live-card {
 padding: 22px 22px 20px;
}
.feature-live-card .fl-head {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 margin-bottom: 16px;
}
.feature-live-card h3 {
 margin: 0 0 2px;
 font-size: 17px;
 font-weight: 600;
}
.feature-live-card .class-picker { margin-bottom: 12px; }
.feature-live-card .class-chip { padding: 8px 12px; font-size: 10px; }

.member-mini { display: flex; flex-direction: column; gap: 8px; }
.member-row {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 border-radius: 8px;
 border: 1px solid var(--c-rule);
 background: var(--c-paper);
 cursor: pointer;
 transition:
 background var(--dur-fast) var(--ease-standard),
 border-color var(--dur-fast) var(--ease-standard),
 transform var(--dur-instant) var(--ease-in);
}
.member-row:hover { background: var(--c-wash-sky); border-color: var(--c-sky); }
.member-row:active { transform: scale(0.99); }
.member-row.is-selected {
 background: var(--c-wash-sky);
 border-color: var(--c-cobalt);
 box-shadow: inset 2px 0 0 var(--c-cobalt);
}
.member-row .av {
 width: 28px; height: 28px; border-radius: 999px;
 background: linear-gradient(135deg, var(--c-azure), var(--c-iris));
 color: var(--c-surface);
 display: grid; place-items: center;
 font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
 flex: none;
}
.member-row .nm { flex: 1; font-size: 13px; font-weight: 500; color: var(--c-ink); min-width: 0; }

.intro-mini .intro-price { font-size: 20px; font-weight: 600; color: var(--c-navy); }

.stat-row.compact { grid-template-columns: 1fr 1fr; margin-top: 0; margin-bottom: 12px; }
.funnel-bar {
 display: flex;
 flex-direction: column;
 gap: 6px;
}
.funnel-bar i {
 display: block;
 height: 8px;
 border-radius: 999px;
 background: linear-gradient(90deg, var(--c-sky), var(--c-cobalt));
 opacity: 0.85;
 transform-origin: left center;
 transition: transform var(--dur-page) var(--ease-out), opacity var(--dur-fast) var(--ease-standard);
}
.feature-live-card:hover .funnel-bar i { opacity: 1; }

/* White-label booking footer modes */
.book-footer .wl-powered {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: var(--c-ink-3);
}
.book-footer .wl-powered strong {
 font-family: var(--font-display);
 font-weight: 400;
 font-size: 16px;
 color: var(--c-ink);
 letter-spacing: 0;
 text-transform: none;
}
.book-page[data-wl-mode="full"] .book-footer .wl-powered { display: none; }
.wl-mode-note {
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--c-violet);
 margin-bottom: 8px;
}


/* =====================================================================
 Marketing streak system (DIRECTION §5 / §7) — house-craft cousin
 Hero field + section dividers + scarce accents. Cool blue→iris→violet.
 ===================================================================== */

.hero-streak-bleed {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 0;
 overflow: hidden;
 opacity: 0.78;
}
.hero-streak-bleed .streak-field-svg {
 position: absolute;
 right: -8%;
 top: 8%;
 width: 78%;
 height: auto;
 max-width: none;
 transform-origin: right center;
}
/* Filled field draw-in via clip (DIRECTION §7 fallback) */
.streak-draw-field .streak-field-rails {
 clip-path: inset(0 100% 0 0);
 transition: clip-path var(--dur-draw) var(--ease-out);
}
.streak-draw-field.is-drawn .streak-field-rails {
 clip-path: inset(0 0 0 0);
}

.hero-grid { position: relative; z-index: 1; }

.hero-streak {
 position: absolute;
 inset: -10% -20% -20% -30%;
 pointer-events: none;
 z-index: 0;
 opacity: 0.58;
 overflow: hidden;
}
.hero-streak-img {
 width: 130%;
 height: auto;
 max-width: none;
 display: block;
 transform: translate(-8%, 4%);
}
.hero-art .bloom { z-index: 1; }
.hero-art .product-chrome { z-index: 2; }

/* Section streak dividers sit between major bands */
.divider-wrap + .band,
.band + .divider-wrap { /* spacing handled by padding */ }

/* Feature edge accent — scarce, left edge only */
.band.mist { position: relative; overflow: hidden; }
.feature-streak-edge {
 position: absolute;
 left: -40px;
 top: 12%;
 width: min(220px, 18vw);
 height: auto;
 pointer-events: none;
 opacity: 0.7;
 z-index: 0;
}
.feature-streak-edge svg { width: 100%; height: auto; display: block; }
.band.mist > .wrap { position: relative; z-index: 1; }

/* Final CTA corner accent */
.band.iris { position: relative; overflow: hidden; }
.cta-streak-accent {
 position: absolute;
 right: -20px;
 bottom: -30px;
 width: min(340px, 32vw);
 pointer-events: none;
 opacity: 0.72;
 z-index: 0;
}
.cta-streak-accent img { width: 100%; height: auto; display: block; }
.band.iris > .wrap { position: relative; z-index: 1; }

/* Streak bleeds are clipped by their own sections (.page-hero/.hero/.band overflow); html/body clip is a safety net only — see “Mobile edges” at end */
.hero, .band { max-width: 100%; }

@media (max-width: 640px) {
 /* Simplify streak density under 640px — fewer/shorter paths; no horizontal scroll */
 .hero-streak-bleed {
 opacity: 0.7;
 }
 .hero-streak-bleed .streak-field-svg {
 /* Prefer the fanned (right) side of the field so rails read as wedges, not hairlines */
 width: 160%;
 right: -35%;
 left: auto;
 top: 42%;
 transform: none;
 }
 /* Keep 6 mid rails; drop outermost extremes */
 .streak-draw-field .streak-field-rails path:nth-child(1),
 .streak-draw-field .streak-field-rails path:nth-child(2),
 .streak-draw-field .streak-field-rails path:nth-child(n+11) {
 display: none;
 }
 .hero-streak { opacity: 0.62; inset: -5% -15% -15% -20%; }
 .hero-streak-img { width: 160%; transform: translate(-18%, 0%); }
 .feature-streak-edge {
 width: 140px;
 left: -50px;
 opacity: 0.5;
 }
 .feature-streak-edge svg path:nth-child(n+4) { display: none; }
 .cta-streak-accent {
 width: min(240px, 62vw);
 right: -36px;
 bottom: -36px;
 opacity: 0.58;
 }
 .divider-wrap { padding: 18px 0; }
 /* Fewer paths on small screens */
 .streak-divider-svg .streak-path:nth-child(1),
 .streak-divider-svg .streak-path:nth-child(6) {
 display: none;
 }
 .streak-divider-svg {
 max-width: 100%;
 }
}

@media (prefers-reduced-motion: reduce) {
 .streak-draw-field .streak-field-rails {
 clip-path: inset(0 0 0 0) !important;
 transition: none !important;
 }
}

/* Theme admin wireframe (DIRECTION §11) — for docs / future mock */
.theme-admin {
 background: var(--c-surface);
 border: var(--border);
 border-radius: var(--radius-card);
 padding: 20px 22px;
 box-shadow: var(--shadow-sm);
 max-width: 420px;
}
.theme-admin .swatches { display: flex; gap: 10px; margin: 12px 0; }
.theme-admin .swatch {
 width: 36px; height: 36px; border-radius: 8px;
 border: 2px solid var(--c-rule);
 cursor: pointer;
 transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-standard);
}
.theme-admin .swatch:hover { transform: translateY(-1px); }
.theme-admin .swatch.is-selected { box-shadow: var(--shadow-focus); border-color: var(--c-cobalt); }
.theme-admin .preview-frame {
 margin-top: 14px;
 border: 1px dashed var(--c-rule-strong);
 border-radius: 8px;
 padding: 14px;
 background: var(--c-paper);
}

@media (max-width: 900px) {
 .feature-live,
 .feature-live--duo { grid-template-columns: 1fr; }
 .feature-live > *,
 .feature-live-card { min-width: 0; }
 .funnel-steps { grid-template-columns: 1fr 1fr; }
 .hero-art { min-height: 480px; }
 .product-chrome { left: 16px; right: 16px; top: 24px; bottom: 16px; }
 .pc-body { grid-template-columns: 1fr; }
 .pc-rail { display: none; }
}
@media (max-width: 640px) {
 .hero-art { min-height: 400px; }
 .pc-slot-row { grid-template-columns: 1fr; }
 .pc-table { max-height: none; }
 .funnel-steps { grid-template-columns: 1fr 1fr; }
}

button.pc-tab {
 font: inherit;
 appearance: none;
 -webkit-appearance: none;
 margin: 0;
}

/* =====================================================================
 Schedule multi-view — List / Kanban / Calendar (DIRECTION §8b v1.4)
 ===================================================================== */

.page-header-actions {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 8px;
 justify-content: flex-end;
}

/* Segmented view switcher */
.view-switcher {
 display: inline-flex;
 align-items: center;
 padding: 3px;
 gap: 2px;
 background: var(--c-mist);
 border: 1px solid var(--c-rule);
 border-radius: 999px;
 margin-right: 4px;
}
.view-btn {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 500;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-2);
 background: transparent;
 border: 0;
 border-radius: 999px;
 padding: 7px 12px;
 cursor: pointer;
 transition: background var(--dur-fast, 160ms) var(--ease-out, ease),
 color var(--dur-fast, 160ms) var(--ease-out, ease),
 box-shadow var(--dur-fast, 160ms) var(--ease-out, ease),
 transform var(--dur-fast, 160ms) var(--ease-out, ease);
}
.view-btn svg { flex: none; opacity: 0.75; }
.view-btn:hover { color: var(--c-ink); background: rgba(255,255,255,0.55); }
.view-btn:active { transform: scale(0.98); }
.view-btn.is-selected {
 background: var(--c-cobalt);
 color: var(--c-surface-raised);
 box-shadow: var(--shadow-sm);
}
.view-btn.is-selected svg { opacity: 1; color: var(--c-surface-raised); }
.view-btn:focus-visible {
 outline: none;
 box-shadow: var(--shadow-focus);
}

/* Shared date toolbar */
.sched-toolbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 12px;
}
.sched-toolbar .date-strip {
 margin: 0;
 flex: 1;
 min-width: 0;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 padding-bottom: 2px;
}
.date-nav {
 width: 32px;
 height: 44px;
 flex: none;
 display: grid;
 place-items: center;
 border-radius: 8px;
 border: 1px solid var(--c-rule);
 background: var(--c-surface);
 color: var(--c-ink-2);
 cursor: pointer;
}
.date-nav:hover { border-color: var(--c-sky); background: var(--c-wash-sky); color: var(--c-navy); }
.date-nav:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.date-pill.is-today:not(.is-selected) {
 border-color: var(--c-sky);
}
.cal-mode-switch {
 display: inline-flex;
 padding: 3px;
 gap: 2px;
 background: var(--c-surface);
 border: 1px solid var(--c-rule);
 border-radius: 8px;
}
.cal-mode-btn {
 font-family: var(--font-mono);
 font-size: 10px;
 font-weight: 500;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 padding: 6px 12px;
 border: 0;
 border-radius: 6px;
 background: transparent;
 color: var(--c-ink-2);
 cursor: pointer;
}
.cal-mode-btn:hover { color: var(--c-ink); background: var(--c-wash-sky); }
.cal-mode-btn.is-selected {
 background: var(--c-wash-sky);
 color: var(--c-navy);
}
.cal-mode-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* View panels — Carriage / Roll-Down enter */
.sched-view {
 opacity: 0;
 transform: translateY(10px);
 pointer-events: none;
 position: absolute;
 width: 1px;
 height: 1px;
 overflow: hidden;
 clip: rect(0 0 0 0);
}
.sched-view.is-active {
 opacity: 1;
 transform: none;
 pointer-events: auto;
 position: relative;
 width: auto;
 height: auto;
 overflow: visible;
 clip: auto;
 animation: schedViewIn var(--dur-slow) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
.sched-view.is-leaving {
 animation: schedViewOut 180ms var(--ease-out, ease) both;
 position: relative;
 width: auto;
 height: auto;
 overflow: visible;
 clip: auto;
 pointer-events: none;
}
@keyframes schedViewIn {
 from { opacity: 0; transform: translateY(10px); }
 to { opacity: 1; transform: none; }
}
@keyframes schedViewOut {
 from { opacity: 1; transform: none; }
 to { opacity: 0; transform: translateY(6px); }
}

/* ----- Kanban (day-flow) ----- */
.kanban {
 display: grid;
 grid-template-columns: repeat(4, minmax(220px, 1fr));
 gap: 12px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 padding-bottom: 8px;
 align-items: start;
}
.kanban-col {
 background: var(--c-mist);
 border: 1px solid var(--c-rule);
 border-radius: var(--radius-card);
 min-width: 220px;
 display: flex;
 flex-direction: column;
 max-height: min(70vh, 720px);
}
.kanban-col-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 12px 14px 10px;
 border-bottom: 1px solid var(--c-rule);
 position: sticky;
 top: 0;
 background: var(--c-mist);
 border-radius: var(--radius-card) var(--radius-card) 0 0;
 z-index: 1;
}
.kanban-col-title {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-2);
}
.kanban-col-count {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 600;
 letter-spacing: 0.04em;
 color: var(--c-navy);
 background: var(--c-surface);
 border: 1px solid var(--c-rule);
 border-radius: 999px;
 min-width: 22px;
 height: 22px;
 display: grid;
 place-items: center;
 padding: 0 6px;
}
.kanban-col-body {
 padding: 10px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 overflow-y: auto;
 min-height: 120px;
}
.kanban-card {
 background: var(--c-surface-raised);
 border: 1px solid var(--c-rule);
 border-radius: 10px;
 padding: 12px 12px 10px;
 box-shadow: var(--shadow-sm);
 cursor: grab;
 transition: box-shadow var(--dur-fast, 160ms) var(--ease-out, ease),
 transform var(--dur-fast, 160ms) var(--ease-out, ease),
 border-color var(--dur-fast, 160ms) var(--ease-out, ease);
}
.kanban-card:hover {
 border-color: var(--c-rule-strong);
 box-shadow: var(--shadow-md, 0 8px 24px rgba(26, 27, 58, 0.08));
}
.kanban-card:active,
.kanban-card.is-lift {
 cursor: grabbing;
 transform: translateY(-2px) scale(1.01);
 box-shadow: 0 12px 28px rgba(26, 27, 58, 0.12);
 border-color: var(--c-sky);
}
.kanban-card:focus-visible {
 outline: none;
 box-shadow: var(--shadow-focus);
}
.kanban-card-top {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 6px;
}
.kanban-grab {
 width: 10px;
 height: 14px;
 flex: none;
 background:
 radial-gradient(circle, var(--c-ink-4) 1.1px, transparent 1.2px) 0 0 / 5px 5px,
 radial-gradient(circle, var(--c-ink-4) 1.1px, transparent 1.2px) 5px 0 / 5px 5px;
 background-size: 5px 5px;
 background-repeat: repeat;
 opacity: 0.7;
 border-radius: 2px;
}
.kanban-time {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--c-ink-3);
 flex: 1;
}
.kanban-card-top .chip { flex: none; }
.kanban-name {
 margin: 0 0 4px;
 font-size: 14px;
 font-weight: 600;
 color: var(--c-ink);
 letter-spacing: -0.01em;
 line-height: 1.3;
}
.kanban-meta {
 margin: 0 0 10px;
 font-size: 12px;
 color: var(--c-ink-3);
}
.kanban-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 margin-bottom: 8px;
}
.kanban-spots {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.06em;
 color: var(--c-navy);
 font-weight: 600;
}
.room-tag {
 font-family: var(--font-mono);
 font-size: 9px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 padding: 3px 8px;
 border-radius: 999px;
 font-weight: 500;
}
.room-tag.room-carriage {
 background: var(--c-wash-sky);
 color: var(--c-navy);
}
.room-tag.room-mat {
 background: var(--c-wash-iris);
 color: var(--c-violet);
}
.spot-bar {
 height: 3px;
 border-radius: 999px;
 background: var(--c-mist);
 overflow: hidden;
}
.spot-bar i {
 display: block;
 height: 100%;
 background: var(--c-cobalt);
 border-radius: inherit;
}
.spot-bar.is-full i { background: var(--c-violet); }

/* ----- Calendar ----- */
.cal {
 background: var(--c-surface);
 border: 1px solid var(--c-rule);
 border-radius: var(--radius-card);
 box-shadow: var(--shadow-sm);
 overflow: hidden;
}
.cal-week-head {
 display: grid;
 grid-template-columns: 52px repeat(7, minmax(96px, 1fr));
 border-bottom: 1px solid var(--c-rule-strong);
 background: var(--c-paper);
 position: sticky;
 top: 0;
 z-index: 2;
}
.cal-gutter-label { border-right: 1px solid var(--c-rule); }
.cal-day-head {
 padding: 10px 8px;
 text-align: center;
 border-right: 1px solid var(--c-rule);
 position: relative;
}
.cal-day-head:last-child { border-right: 0; }
.cal-day-head .dow {
 display: block;
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.16em;
 text-transform: uppercase;
 color: var(--c-ink-3);
}
.cal-day-head .dom {
 display: inline-grid;
 place-items: center;
 min-width: 28px;
 height: 28px;
 margin-top: 2px;
 font-size: 16px;
 font-weight: 600;
 color: var(--c-ink);
 border-radius: 999px;
}
.cal-day-head.is-today .dom {
 background: var(--c-cobalt);
 color: var(--c-surface-raised);
}
.cal-day-head .today-dot { display: none; }

.cal-week-body {
 display: grid;
 grid-template-columns: 52px 1fr;
 max-height: min(68vh, 780px);
 overflow: auto;
 -webkit-overflow-scrolling: touch;
 /* hour row height */
 --cal-hour: 56px;
 --cal-start: 6; /* 6am */
 --cal-hours: 15; /* 6am–9pm */
}
.cal-hours {
 display: grid;
 grid-template-rows: repeat(var(--cal-hours), var(--cal-hour));
 border-right: 1px solid var(--c-rule);
 background: var(--c-paper);
 position: sticky;
 left: 0;
 z-index: 1;
}
.cal-hours span {
 font-family: var(--font-mono);
 font-size: 10px;
 letter-spacing: 0.06em;
 color: var(--c-ink-4);
 padding: 4px 6px 0 0;
 text-align: right;
 border-bottom: 1px solid var(--c-rule);
 transform: translateY(-8px);
}
.cal-grid {
 display: grid;
 grid-template-columns: repeat(7, minmax(96px, 1fr));
 min-height: calc(var(--cal-hours) * var(--cal-hour));
}
.cal-col {
 position: relative;
 border-right: 1px solid var(--c-rule);
 background-image: repeating-linear-gradient(
 to bottom,
 transparent 0,
 transparent calc(var(--cal-hour) - 1px),
 var(--c-rule) calc(var(--cal-hour) - 1px),
 var(--c-rule) var(--cal-hour)
 );
 min-height: calc(var(--cal-hours) * var(--cal-hour));
}
.cal-col:last-child { border-right: 0; }
.cal-col.is-today {
 background-color: var(--c-wash-sky);
 background-image: repeating-linear-gradient(
 to bottom,
 transparent 0,
 transparent calc(var(--cal-hour) - 1px),
 rgba(43, 95, 191, 0.12) calc(var(--cal-hour) - 1px),
 rgba(43, 95, 191, 0.12) var(--cal-hour)
 );
}

/* --t = hours from 6am; --h = duration in hours */
.cal-block {
 position: absolute;
 left: 3px;
 right: 3px;
 top: calc(var(--t) * var(--cal-hour));
 height: calc(var(--h) * var(--cal-hour) - 3px);
 border: 1px solid transparent;
 border-radius: 8px;
 padding: 4px 6px 6px;
 text-align: left;
 cursor: pointer;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 gap: 1px;
 transition: transform var(--dur-fast, 160ms) var(--ease-out, ease),
 box-shadow var(--dur-fast, 160ms) var(--ease-out, ease),
 filter var(--dur-fast, 160ms) var(--ease-out, ease);
 z-index: 1;
}
.cal-block.room-carriage {
 background: var(--c-wash-sky);
 border-color: #b8ccea;
 color: var(--c-navy);
}
.cal-block.room-mat {
 background: var(--c-wash-iris);
 border-color: #d4c8ea;
 color: var(--c-indigo);
}
.cal-block.is-waitlist {
 background: var(--c-wash-iris);
 border-color: var(--c-lilac);
 color: var(--c-violet);
}
.cal-block.is-intro {
 background: var(--c-wash-peri);
 border-color: #c8cae8;
 color: var(--c-indigo);
}
.cal-block.is-cancelled {
 background: var(--c-chip-cancelled-bg, #F8E6EA);
 border-color: #e8c0c8;
 color: var(--c-error);
 opacity: 0.72;
 text-decoration: line-through;
 text-decoration-thickness: 1px;
}
.cal-block:hover:not(:disabled) {
 transform: translateY(-1px);
 box-shadow: var(--shadow-sm);
 z-index: 3;
 filter: brightness(0.98);
}
.cal-block:active:not(:disabled) { transform: scale(0.99); }
.cal-block.is-selected,
.cal-block:focus-visible {
 outline: none;
 box-shadow: var(--shadow-focus);
 z-index: 4;
 border-color: var(--c-cobalt);
}
.cal-block-time {
 font-family: var(--font-mono);
 font-size: 9px;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 opacity: 0.85;
 line-height: 1.2;
}
.cal-block-name {
 font-size: 12px;
 font-weight: 600;
 line-height: 1.25;
 letter-spacing: -0.01em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.cal-block-spots {
 font-family: var(--font-mono);
 font-size: 9px;
 letter-spacing: 0.06em;
 margin-top: auto;
 opacity: 0.9;
}
.cal-block-meta {
 font-size: 11px;
 opacity: 0.85;
 margin-top: 2px;
}
.cal-fill {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 3px;
 background: rgba(26, 27, 58, 0.08);
}
.cal-fill::after {
 content: "";
 display: block;
 height: 100%;
 width: var(--fill, 0%);
 background: var(--c-cobalt);
}
.cal-block.room-mat .cal-fill::after,
.cal-block.is-waitlist .cal-fill::after { background: var(--c-violet); }
.cal-fill.is-full::after { background: var(--c-violet); }

.cal-now {
 position: absolute;
 left: 0;
 right: 0;
 top: calc(var(--now) * var(--cal-hour));
 height: 0;
 border-top: 2px solid var(--c-error);
 z-index: 5;
 pointer-events: none;
}
.cal-now::before {
 content: "";
 position: absolute;
 left: -4px;
 top: -5px;
 width: 8px;
 height: 8px;
 border-radius: 999px;
 background: var(--c-error);
}

/* Day mode */
.cal-day-banner {
 display: flex;
 align-items: baseline;
 justify-content: space-between;
 gap: 12px;
 padding: 14px 16px;
 border-bottom: 1px solid var(--c-rule);
 background: var(--c-paper);
}
.cal-day-summary {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--c-ink-3);
}
.cal-day-body {
 display: grid;
 grid-template-columns: 52px 1fr;
 max-height: min(68vh, 780px);
 overflow: auto;
 --cal-hour: 64px;
 --cal-hours: 15;
}
.cal-day-track {
 position: relative;
 min-height: calc(var(--cal-hours) * var(--cal-hour));
 background-image: repeating-linear-gradient(
 to bottom,
 transparent 0,
 transparent calc(var(--cal-hour) - 1px),
 var(--c-rule) calc(var(--cal-hour) - 1px),
 var(--c-rule) var(--cal-hour)
 );
 background-color: var(--c-wash-sky);
}
.cal-block-lg {
 left: 8px;
 right: 12px;
 padding: 8px 12px;
}
.cal-block-lg .cal-block-time { font-size: 10px; }
.cal-block-lg .cal-block-name { font-size: 14px; white-space: normal; }

@media (max-width: 1100px) {
 .kanban { grid-template-columns: repeat(4, minmax(200px, 1fr)); }
 .cal-week {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 }
 .cal-week-head,
 .cal-week-body { min-width: 860px; }
 .cal-week-head { grid-template-columns: 52px repeat(7, minmax(110px, 1fr)); }
 .cal-grid { grid-template-columns: repeat(7, minmax(110px, 1fr)); }
}

@media (max-width: 900px) {
 .page-header { flex-direction: column; align-items: flex-start; }
 .page-header-actions { width: 100%; }
 .view-switcher { order: -1; width: 100%; justify-content: stretch; }
 .view-btn { flex: 1; justify-content: center; padding: 8px 8px; }
 .view-btn svg { display: none; }
 .kanban {
 grid-template-columns: repeat(4, minmax(200px, 1fr));
 }
}

@media (max-width: 640px) {
 .sched-toolbar { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
 .cal-mode-switch { align-self: flex-start; }
 .kanban {
 grid-auto-flow: column;
 grid-template-columns: none;
 grid-auto-columns: minmax(240px, 82vw);
 }
 .cal-block-name { font-size: 11px; }
 .cal-block-spots { display: none; }
 .metrics { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
 .sched-view.is-active,
 .sched-view.is-leaving {
 animation: none !important;
 opacity: 1 !important;
 transform: none !important;
 }
 .kanban-card:hover,
 .kanban-card:active,
 .kanban-card.is-lift,
 .cal-block:hover:not(:disabled),
 .cal-block:active:not(:disabled),
 .view-btn:active {
 transform: none !important;
 }
}

/* ========== v1.5 — onboarding, pages, portal, empty, emails ========== */
.chip-noshow { background: var(--c-chip-noshow-bg); color: var(--c-chip-noshow-fg); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field input, .field select, .field textarea {
 height: 40px; border-radius: 8px; border: 1px solid var(--c-line-input);
 padding: 0 12px; background: var(--c-surface); font: inherit; color: var(--c-ink);
}
.field textarea { height: auto; min-height: 80px; padding: 10px 12px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
 outline: none; box-shadow: var(--shadow-focus); border-color: var(--c-cobalt);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* Page panels (app shell hash routing) */
.page-panel[hidden] { display: none !important; }
.page-panel.is-active { display: block; animation: schedEnter 220ms var(--ease-standard) both; }
.app-nav-item.is-active { background: var(--c-wash-sky); color: var(--c-navy); }

/* Empty state */
.empty-state {
 text-align: center; padding: 48px 24px; border-radius: var(--radius-card);
 background: var(--c-wash-peri); border: 1px dashed var(--c-rule-strong);
 position: relative; overflow: hidden;
}
.empty-state::before {
 content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
 background: url("assets/panel-grid-tile.svg") center/cover;
}
.empty-state > * { position: relative; }
.empty-state .ring { font-size: 36px; margin: 12px 0 8px; }
.empty-state .mark-breathe { margin: 0 auto 8px; }
.empty-state p { max-width: 36ch; margin: 0 auto 18px; color: var(--c-ink-2); }

/* Drawer */
.drawer-root[hidden] { display: none !important; }
.drawer-root {
 position: fixed; inset: 0; z-index: 80; display: grid; justify-content: end;
}
.drawer-backdrop { position: absolute; inset: 0; background: rgba(26,27,58,.28); opacity: 0; transition: opacity 200ms var(--ease-standard); }
.drawer-panel {
 position: relative; width: min(420px, 100vw); height: 100%; background: var(--c-surface-raised);
 box-shadow: var(--shadow-lg); border-left: 1px solid var(--c-rule);
 padding: 24px; overflow: auto; transform: translateX(100%);
 transition: transform 280ms var(--ease-carriage);
}
.drawer-root.is-open .drawer-backdrop { opacity: 1; }
.drawer-root.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.drawer-meta { display: grid; gap: 10px; margin: 16px 0; }
.drawer-meta .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; border-bottom: 1px solid var(--c-rule); padding-bottom: 8px; }
.drawer-meta .k { color: var(--c-ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }

/* Members table */
table.members { width: 100%; border-collapse: collapse; font-size: 13px; }
table.members th {
 text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
 text-transform: uppercase; color: var(--c-ink-3); padding: 10px 12px; border-bottom: 1px solid var(--c-rule-strong);
}
table.members td { padding: 12px; border-bottom: 1px solid var(--c-rule); vertical-align: middle; }
table.members tr { cursor: pointer; transition: background 120ms var(--ease-standard); }
table.members tr:hover, table.members tr.is-selected { background: var(--c-wash-sky); }
table.members .avatar-sm {
 width: 28px; height: 28px; border-radius: 999px; background: var(--c-wash-iris);
 color: var(--c-indigo); display: inline-grid; place-items: center; font-size: 11px; font-weight: 600; margin-right: 8px;
}

/* Roster / check-in */
.roster-layout { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
@media (max-width: 900px) { .roster-layout { grid-template-columns: 1fr; } }
.roster-list { display: flex; flex-direction: column; gap: 8px; }
.roster-row {
 display: grid; grid-template-columns: 40px 1fr auto auto; gap: 12px; align-items: center;
 padding: 12px 14px; background: var(--c-surface-raised); border: 1px solid var(--c-rule);
 border-radius: 10px; transition: border-color 120ms, box-shadow 120ms, transform 120ms;
}
.roster-row:hover { border-color: var(--c-rule-strong); box-shadow: var(--shadow-sm); }
.roster-row.is-checked { background: var(--c-success-wash); border-color: #b7d9c8; }
.roster-row.is-noshow { background: var(--c-warning-wash); }
.roster-row.is-wait { background: var(--c-wash-iris); }
.check-toggle {
 width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--c-line-input);
 background: var(--c-surface); cursor: pointer; display: grid; place-items: center;
 font-family: var(--font-mono); font-size: 12px; color: var(--c-ink-3);
}
.check-toggle[aria-pressed="true"] { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.roster-aside .card { margin-bottom: 12px; }

/* Offers */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .offer-grid { grid-template-columns: 1fr; } }
.offer-card {
 background: var(--c-surface-raised); border: 1px solid var(--c-rule); border-radius: 10px;
 padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform 120ms, box-shadow 120ms;
}
.offer-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.offer-card.is-intro { background: linear-gradient(180deg, var(--c-wash-iris), var(--c-surface-raised)); }
.offer-card .price { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.offer-card .price em { font-style: normal; font-size: 14px; color: var(--c-ink-3); font-weight: 400; }

/* Branding settings */
.brand-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; }
@media (max-width: 1000px) { .brand-layout { grid-template-columns: 1fr; } }
.dropzone {
 border: 1.5px dashed var(--c-rule-strong); border-radius: 10px; padding: 28px 16px;
 text-align: center; background: var(--c-mist); color: var(--c-ink-2); cursor: pointer;
 transition: border-color 120ms, background 120ms;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--c-cobalt); background: var(--c-wash-sky); outline: none; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.swatch {
 width: 28px; height: 28px; border-radius: 999px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--c-rule-strong);
 cursor: pointer;
}
.swatch.is-selected { box-shadow: 0 0 0 2px var(--c-cobalt); }
.wl-preview {
 border: 1px solid var(--c-rule); border-radius: 12px; overflow: hidden; background: var(--c-paper);
 box-shadow: var(--shadow-md);
}
.wl-preview-top {
 display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--c-rule);
 background: var(--c-surface-raised);
}
.wl-preview-body { padding: 20px 16px; }
.wl-preview .preview-cta {
 display: inline-flex; margin-top: 12px; padding: 10px 18px; border-radius: 999px;
 background: var(--wl-primary, var(--c-cobalt)); color: #fff;
 font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
}
.radio-stack { display: flex; flex-direction: column; gap: 8px; }
.radio-stack label {
 display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--c-rule);
 border-radius: 8px; cursor: pointer; background: var(--c-surface);
}
.radio-stack label.is-on { border-color: var(--c-cobalt); background: var(--c-wash-sky); }

/* Classes / Payments */
.template-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 800px) { .template-grid { grid-template-columns: 1fr; } }
.template-card {
 padding: 16px; border: 1px solid var(--c-rule); border-radius: 10px; background: var(--c-surface-raised);
 display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}
.pay-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pay-table th, .pay-table td { padding: 12px; border-bottom: 1px solid var(--c-rule); text-align: left; }
.pay-table th {
 font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-3);
}

/* Onboarding wizard */
.wiz-page {
 min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto;
 background: var(--c-paper);
}
.wiz-top {
 display: flex; align-items: center; justify-content: space-between; gap: 16px;
 padding: 16px 28px; border-bottom: 1px solid var(--c-rule); background: var(--c-surface-raised);
}
.wiz-progress { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wiz-dot {
 width: 8px; height: 8px; border-radius: 999px; background: var(--c-rule-strong);
 transition: background 160ms, transform 160ms;
}
.wiz-dot.is-done { background: var(--c-iris); }
.wiz-dot.is-current { background: var(--c-cobalt); transform: scale(1.35); }
.wiz-step-label {
 font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-3);
}
.wiz-main { display: grid; place-items: center; padding: 32px 20px 48px; }
.wiz-card {
 width: min(640px, 100%); background: var(--c-surface-raised); border: 1px solid var(--c-rule);
 border-radius: 14px; padding: 32px 28px; box-shadow: var(--shadow-md);
 position: relative; overflow: hidden;
}
.wiz-card .bloom {
 position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%;
 background: radial-gradient(circle, var(--c-wash-sky), transparent 70%); pointer-events: none;
}
.wiz-panel[hidden] { display: none !important; }
.wiz-panel.is-active { display: block; animation: schedEnter 240ms var(--ease-standard) both; }
.wiz-foot {
 display: flex; justify-content: space-between; gap: 12px; padding: 16px 28px;
 border-top: 1px solid var(--c-rule); background: var(--c-surface-raised);
}
.room-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.room-chip {
 padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--c-rule-strong);
 background: var(--c-surface); cursor: pointer; font-size: 13px;
}
.room-chip.is-selected { border-color: var(--c-cobalt); background: var(--c-wash-sky); color: var(--c-navy); }
.hours-grid { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 8px; align-items: center; font-size: 13px; }
.hours-grid input { height: 36px; border-radius: 8px; border: 1px solid var(--c-line-input); padding: 0 10px; font: inherit; }

/* Portal (client WL) */
.portal-page[data-wl="client"] { min-height: 100vh; background: var(--wl-paper, var(--c-paper)); color: var(--wl-ink, var(--c-ink)); }
.portal-top {
 display: flex; justify-content: space-between; align-items: center; gap: 16px;
 padding: 16px 0; border-bottom: 1px solid var(--c-rule);
}
.portal-grid { display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 20px; margin-top: 24px; }
@media (max-width: 800px) { .portal-grid { grid-template-columns: 1fr; } }
.portal-class {
 display: flex; justify-content: space-between; gap: 12px; align-items: center;
 padding: 14px 16px; border: 1px solid var(--c-rule); border-radius: 10px; background: var(--c-surface-raised);
 margin-bottom: 10px;
}
.pack-balance {
 padding: 20px; border-radius: 12px; background: var(--c-wash-iris); border: 1px solid var(--c-lilac);
}
.pack-balance .big { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }

/* Email mock */
.email-frame {
 max-width: 560px; margin: 40px auto; background: #fff; border: 1px solid var(--c-rule);
 border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md);
 font-family: Helvetica, Arial, sans-serif;
}
.email-bar { padding: 10px 16px; background: var(--c-mist); font-size: 12px; color: var(--c-ink-3); }
.email-header { padding: 24px 28px 12px; border-bottom: 1px solid var(--c-rule); }
.email-body { padding: 24px 28px 32px; font-size: 15px; line-height: 1.55; color: var(--c-ink-2); }
.email-body h1 { font-size: 22px; color: var(--c-ink); margin: 0 0 12px; font-weight: 600; }
.email-cta {
 display: inline-block; margin-top: 18px; padding: 12px 20px; border-radius: 999px;
 background: var(--c-cobalt); color: #fff !important; text-decoration: none; font-size: 13px; font-weight: 600;
 letter-spacing: 0.04em;
}
.email-foot { padding: 16px 28px; font-size: 12px; color: var(--c-ink-3); background: var(--c-paper); }

/* Mocks hub */
.mocks-hub { max-width: 880px; margin: 0 auto; padding: 48px 24px 80px; }
.mocks-hub .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .mocks-hub .grid { grid-template-columns: 1fr; } }
.mocks-hub a.card-link {
 display: block; padding: 18px; border-radius: 10px; border: 1px solid var(--c-rule);
 background: var(--c-surface-raised); color: inherit; transition: border-color 120ms, transform 120ms;
}
.mocks-hub a.card-link:hover { border-color: var(--c-cobalt); transform: translateY(-2px); color: inherit; }
.mocks-hub a.card-link strong { display: block; margin-bottom: 4px; }

/* ---- Pricing: plan comparison table (generated from docs/plan-matrix.json) ---- */
.sr-only {
 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
 overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.pt-intro { margin: 0; max-width: 62ch; font-size: var(--fs-small); }
.pt-hint { display: none; margin: 0 0 var(--space-2); font-size: var(--fs-caption); color: var(--c-ink-3); }
.pt-scroll {
 position: relative;
 max-width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 overscroll-behavior-x: contain;
 background: var(--c-surface);
 border: var(--border);
 border-radius: var(--radius-card);
 box-shadow: var(--shadow-sm);
}
.pt-scroll:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.plan-table {
 width: 100%;
 min-width: 640px;
 border-collapse: separate;
 border-spacing: 0;
 font-size: var(--fs-small);
 line-height: var(--lh-caption);
 color: var(--c-ink);
}
.plan-table .pt-col-feature { width: 34%; }
.plan-table .pt-col-plan { width: 22%; }
.plan-table th,
.plan-table td {
 padding: var(--space-3) var(--space-4);
 border-bottom: var(--border);
 text-align: left;
 vertical-align: top;
}
.plan-table tbody tr:last-child > * { border-bottom: var(--border); }
.plan-table tbody:last-of-type tr:last-child > * { border-bottom: 0; }
/* Sticky first column */
.plan-table thead th:first-child,
.plan-table tbody th[scope="row"] {
 position: sticky; left: 0; z-index: 2;
 background: var(--c-surface);
 box-shadow: inset -1px 0 0 var(--c-rule);
}
.plan-table tbody th[scope="row"] { font-weight: 500; color: var(--c-ink); }
.plan-table thead th {
 background: var(--c-surface-raised);
 border-bottom: var(--border-strong);
 vertical-align: bottom;
 padding-top: var(--space-4); padding-bottom: var(--space-4);
}
.plan-table thead th:first-child { background: var(--c-surface-raised); z-index: 3; }
.pt-plan-name {
 display: block;
 font-family: var(--font-mono); font-weight: 600;
 font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
 color: var(--c-ink-2);
}
.pt-plan-price {
 display: block; margin-top: var(--space-1);
 font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4);
 color: var(--c-navy); letter-spacing: -0.01em;
}
.pt-plan-price small { font-size: var(--fs-caption); font-weight: 500; color: var(--c-ink-3); letter-spacing: 0; }
.plan-table .is-featured .pt-plan-name { color: var(--c-cobalt); }
.plan-table thead th.is-featured { box-shadow: inset 0 3px 0 var(--c-cobalt); }
.plan-table col.is-featured { background: var(--c-wash-sky); }
/* Section (rowgroup) rows */
.plan-table .pt-section th {
 background: var(--c-mist);
 padding-top: var(--space-2); padding-bottom: var(--space-2);
 font-family: var(--font-mono); font-weight: 600;
 font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase;
 color: var(--c-violet);
}
.plan-table .pt-section th > span { position: sticky; left: var(--space-4); display: inline-block; }
/* Cells */
.pt-icon { display: inline-block; vertical-align: -3px; flex: none; }
.pt-yes { color: var(--c-ink-2); }
.pt-yes .pt-check { color: var(--c-cobalt); }
.pt-no .pt-dash { color: var(--c-ink-3); }
.pt-detail { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--c-ink-3); }
.pt-text { color: var(--c-ink-2); font-weight: 500; }
.pt-chip {
 display: inline-block;
 font-family: var(--font-mono); font-weight: 600; font-size: 10px;
 letter-spacing: 0.14em; text-transform: uppercase;
 color: var(--c-violet); background: var(--c-wash-iris);
 border-radius: var(--radius-pill); padding: 3px 8px;
}
@media (max-width: 640px) {
 .pt-hint { display: block; }
 .plan-table { min-width: 520px; font-size: var(--fs-app-small); }
 .plan-table .pt-col-feature { width: 148px; }
 .plan-table th,
 .plan-table td { padding: var(--space-2) var(--space-3); }
 .plan-table thead th:first-child,
 .plan-table tbody th[scope="row"] { width: 148px; min-width: 148px; max-width: 148px; }
 .plan-table .pt-section th > span { left: var(--space-3); }
 .pt-plan-price { font-size: var(--fs-body); }
}

/* ---- Pricing: integrations logo grid ---- */
section.band.int-band { padding-top: var(--space-6); }
.int-head { margin-bottom: var(--space-5); }
.int-head p.muted { margin: 0; max-width: 64ch; font-size: var(--fs-small); text-wrap: balance; }
.int-grid {
 list-style: none; margin: 0; padding: 0;
 display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-3);
}
.int-tile {
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 gap: var(--space-1);
 min-height: 112px; padding: var(--space-4) var(--space-2);
 text-align: center;
 background: var(--c-paper);
 border: var(--border);
 border-radius: var(--radius-card);
 transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.int-logo {
 position: relative; display: block; width: 72px; height: 28px; margin-bottom: var(--space-2);
}
/* Monochrome by default: the logo's own shape, filled with ink-3 */
.int-logo::before {
 content: ""; position: absolute; inset: 0;
 background: var(--c-ink-3);
 -webkit-mask: var(--logo) center / contain no-repeat;
 mask: var(--logo) center / contain no-repeat;
 transition: opacity var(--dur-base) var(--ease-standard);
}
/* Full-color brand file sits on top, revealed on hover */
.int-logo img {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
 opacity: 0; transition: opacity var(--dur-base) var(--ease-standard);
}
.int-name { font-size: var(--fs-small); font-weight: 600; color: var(--c-ink); line-height: 1.2; }
.int-cat {
 font-family: var(--font-mono); font-weight: 500; font-size: 10px;
 letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-3); line-height: 1.3;
}
@media (hover: hover) {
 .int-tile:hover {
  transform: translateY(-2px);
  background: var(--c-surface-raised);
  border-color: var(--c-rule-strong);
  box-shadow: var(--shadow-sm);
 }
 .int-tile:hover .int-logo::before { opacity: 0; }
 .int-tile:hover .int-logo img { opacity: 1; }
}
@media (max-width: 900px) {
 .int-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
 section.band.int-band { padding-top: var(--space-5); }
 .int-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
 .int-tile { min-height: 96px; padding: var(--space-3) var(--space-1); }
 .int-logo { width: 64px; height: 24px; margin-bottom: var(--space-1); }
 .int-name { font-size: var(--fs-app-small); }
 .int-cat { font-size: 9px; letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
 .int-tile, .int-logo::before, .int-logo img { transition: none; }
 .int-tile:hover { transform: none; }
}

/* ---- Home: compact integrations strip (reuses .int-* tiles) ---- */
section.band.int-home { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.int-home-grid {
 display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 gap: var(--space-6); align-items: center;
}
.int-home-copy .eyebrow { margin-bottom: var(--space-2); }
.int-home-copy h2 {
 font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3);
 line-height: var(--lh-h3); letter-spacing: -0.01em; margin: 0 0 var(--space-2); text-wrap: balance;
}
.int-home-copy p.muted { margin: 0 0 var(--space-4); font-size: var(--fs-small); max-width: 40ch; }
.int-grid--compact { gap: var(--space-2); }
.int-grid--compact .int-tile { min-height: 84px; padding: var(--space-3) var(--space-1); }
.int-grid--compact .int-logo { width: 64px; height: 24px; margin-bottom: var(--space-1); }
.int-grid--compact .int-name { font-size: var(--fs-caption); font-weight: 600; color: var(--c-ink-2); }
@media (max-width: 900px) {
 .int-home-grid { grid-template-columns: 1fr; gap: var(--space-5); }
 .int-grid.int-grid--compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
 section.band.int-home { padding-top: var(--space-5); padding-bottom: var(--space-5); }
 .int-grid.int-grid--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .int-grid--compact .int-tile { min-height: 76px; }
 .int-grid--compact .int-logo { width: 56px; height: 22px; }
}

/* ---- Integrations: 10-tile layout (5×2 desktop/tablet, 2-col rows on phones) ---- */
.int-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
 .int-grid,
 .int-grid.int-grid--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
 .int-grid,
 .int-grid.int-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
 /* Horizontal tiles on phones: logo left, name (and category) right */
 .int-tile,
 .int-grid--compact .int-tile {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: var(--space-3); row-gap: 2px; align-items: center; align-content: center;
  justify-items: start; text-align: left;
  min-height: 64px; padding: var(--space-3);
 }
 .int-tile .int-logo,
 .int-grid--compact .int-logo { grid-row: 1 / span 2; width: 48px; height: 22px; margin: 0; }
 .int-tile .int-name { grid-column: 2; align-self: end; }
 .int-tile .int-cat { grid-column: 2; align-self: start; }
 .int-grid--compact .int-tile { min-height: 56px; }
 .int-grid--compact .int-tile .int-name { grid-row: 1 / span 2; align-self: center; }
}

/* ---- Integrations: 11 tiles — centered flex rows (6+5 desktop, 4/4/3 tablet, 2-col phones with a full-width last tile) ---- */
.int-grid {
 --int-cols: 6; --int-gap: var(--space-3);
 display: flex; flex-wrap: wrap; justify-content: center; gap: var(--int-gap);
}
.int-grid > .int-tile {
 flex: 0 0 calc((100% - (var(--int-cols) - 1) * var(--int-gap)) / var(--int-cols));
 min-width: 0;
}
.int-grid.int-grid--compact { --int-gap: var(--space-2); }
@media (max-width: 900px) {
 .int-grid,
 .int-grid.int-grid--compact { --int-cols: 4; }
}
@media (max-width: 640px) {
 .int-grid,
 .int-grid.int-grid--compact { --int-cols: 2; --int-gap: var(--space-2); }
 /* Odd count: the last tile spans the row instead of sitting alone */
 .int-grid > .int-tile:last-child:nth-child(odd) { flex-basis: 100%; justify-content: center; grid-template-columns: auto auto; justify-content: center; }
}

/* ---- Mobile edges: content gutters + safe areas, no sideways scroll ---- */
/* Gutters never sit closer than the device safe area (notch / rounded corners in landscape). */
.wrap { width: min(1120px, calc(100% - 2 * max(var(--margin-min), env(safe-area-inset-left), env(safe-area-inset-right)))); }
.wrap-wide { width: min(1280px, calc(100% - 2 * max(var(--margin-min), env(safe-area-inset-left), env(safe-area-inset-right)))); }
/* Grid/flex children may shrink below their content so inner scrollers (date strips, chip rows) scroll inside themselves. */
.book-layout > * { min-width: 0; }
/* Long unbroken strings (emails, URLs) wrap instead of widening the page. */
body { overflow-wrap: break-word; }
@media (max-width: 640px) {
 .page { padding-inline: max(var(--space-4), env(safe-area-inset-left), env(safe-area-inset-right)); }
}
@media (max-width: 400px) { :root { --margin-min: var(--space-4); } } /* 16px floor on small phones (marketing.css matches) */
/* Final safety net only — every known root cause above is fixed; clip (not hidden) keeps position: sticky working. */
html, body { overflow-x: clip; }