/* d1fpc3.com | /build/demos
   One shell for the three live demos (quote, booking, dashboard) built for a made-up
   home services company. Solid content, Liquid Glass only on floating controls (the demo
   dock, sheets, toasts, the phone tab bar). The accent is the visitor's to change in
   "Make it yours", so every tint is mixed from --accent. */

@font-face { font-family: 'Inter'; src: url('/echelon/assets/fonts/inter-var-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: light;
  --accent: #2b59e6;
  --on-accent: #fff;
  --bg: #f3f2ef; --bg-2: #ebe9e4; --card: #ffffff; --card-2: #f8f7f4;
  --ink: #15171a; --text: #4a4e55; --faint: #82868d;
  --rule: rgba(20, 22, 26, 0.09); --rule-2: rgba(20, 22, 26, 0.16);
  --hover: rgba(20, 22, 26, 0.045);
  --tint: color-mix(in srgb, var(--accent) 10%, var(--card));
  --tint-2: color-mix(in srgb, var(--accent) 18%, var(--card));
  --accent-ink: color-mix(in srgb, var(--accent) 82%, #000);
  --good: #1f9d61; --warn: #c9811a; --bad: #d1453b;
  --shadow: 0 1px 2px rgba(20, 22, 26, 0.05), 0 8px 24px -12px rgba(20, 22, 26, 0.14);
  --shadow-lg: 0 2px 6px rgba(20, 22, 26, 0.06), 0 24px 48px -20px rgba(20, 22, 26, 0.28);
  --lg-fill: rgba(255, 255, 255, 0.62);
  --lg-fill-2: rgba(255, 255, 255, 0.8);
  --lg-blur: blur(22px) saturate(180%);
  --lg-rim: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 50%, rgba(20, 22, 26, 0.04) 72%, rgba(255, 255, 255, 0.6));
  --lg-drop: 0 10px 30px -12px rgba(20, 22, 26, 0.28), 0 2px 6px -2px rgba(20, 22, 26, 0.12);
  --pill: rgba(20, 22, 26, 0.07);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --r: 14px; --r-lg: 20px; --r-xl: 28px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --dock-h: 52px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0e; --bg-2: #111215; --card: #16171a; --card-2: #1b1c20;
  --ink: #f2f3f5; --text: #a9adb5; --faint: #767a82;
  --rule: rgba(255, 255, 255, 0.075); --rule-2: rgba(255, 255, 255, 0.15);
  --hover: rgba(255, 255, 255, 0.05);
  --tint: color-mix(in srgb, var(--accent) 16%, var(--card));
  --tint-2: color-mix(in srgb, var(--accent) 28%, var(--card));
  --accent-ink: color-mix(in srgb, var(--accent) 70%, #fff);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 24px 48px -20px rgba(0, 0, 0, 0.9);
  --lg-fill: rgba(30, 30, 33, 0.58);
  --lg-fill-2: rgba(44, 44, 48, 0.78);
  --lg-blur: blur(24px) saturate(190%);
  --lg-rim: linear-gradient(150deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 28%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.04) 70%, rgba(255, 255, 255, 0.2));
  --lg-drop: 0 12px 32px -14px rgba(0, 0, 0, 0.9), 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --pill: rgba(255, 255, 255, 0.13);
}

html { -webkit-text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }
body { min-height: 100dvh; background: var(--bg); color: var(--text); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.02em; text-wrap: balance; }
p { text-wrap: pretty; }

/* scrollbars: thin, accent thumb, never the gray default */
* { --sb: color-mix(in srgb, var(--accent) 45%, transparent); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover, *::-webkit-scrollbar-thumb:active { background: var(--sb); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; } }

/* ── glass ─────────────────────────────────────────────────────────── */
.glass { position: relative; background: var(--lg-fill); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); box-shadow: var(--lg-drop); }
.glass::after, .dock .thumb::after, .tabbar .thumb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--lg-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── demo dock: the d1fpc3 frame around the demos ─────────────────── */
.dock { position: fixed; z-index: 40; top: calc(var(--sat) + 10px); left: 50%; transform: translateX(-50%); height: var(--dock-h); padding: 6px; border-radius: 999px; display: flex; align-items: center; gap: 4px; view-transition-name: dock; max-width: calc(100vw - 20px); }
.dock .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background-color .2s ease, transform .25s var(--ease); }
.dock .ic:hover { background: var(--hover); }
.dock .ic:active { transform: scale(.92); }
.dock .ic svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dock nav { position: relative; display: flex; height: 40px; border-radius: 999px; background: var(--hover); }
.dock nav a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; font: 560 13.5px/1 var(--sans); color: var(--faint); white-space: nowrap; transition: color .25s ease; }
.dock nav a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dock nav a[aria-current="page"] { color: var(--ink); }
.dock .thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--lg-fill-2); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 12px -4px rgba(0,0,0,.22); transition: transform .5s var(--spring); }
:root[data-theme="dark"] .dock .thumb { background: var(--pill); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px -4px rgba(0,0,0,.6); }
.dock .tag { display: none; }
@media (min-width: 760px) {
  .dock .tag { display: inline-flex; align-items: center; height: 40px; padding: 0 12px 0 6px; font-size: 12.5px; font-weight: 520; color: var(--faint); white-space: nowrap; }
}
@media (max-width: 520px) { .dock nav a { padding: 0 13px; } .dock nav a:not([aria-current]) span { display: none; } }
.edge { position: fixed; z-index: 39; top: 0; left: 0; right: 0; height: calc(var(--sat) + var(--dock-h) + 30px); pointer-events: none; background: linear-gradient(180deg, var(--bg) 35%, color-mix(in srgb, var(--bg) 70%, transparent) 65%, transparent); opacity: 0; transition: opacity .3s var(--ease); }
.edge.on { opacity: 1; }
.dock-space { height: calc(var(--sat) + var(--dock-h) + 22px); }

/* ── shared bits ──────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; letter-spacing: -0.015em; }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-weight: 750; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.brand small { display: block; font-size: 12px; font-weight: 500; color: var(--faint); letter-spacing: 0; margin-top: 1px; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.eyebrow { font-size: 12.5px; font-weight: 560; color: var(--accent-ink); }
.muted { color: var(--faint); }

.btn { position: relative; height: 46px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14.5px/1 var(--sans); white-space: nowrap; background: var(--card); color: var(--ink); border: 1px solid var(--rule-2); transition: transform .25s var(--ease), background-color .2s ease, box-shadow .25s ease, opacity .2s ease; }
.btn:hover { background: var(--card-2); }
.btn:active { transform: scale(.97); }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 90%, #000); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn.ghost:hover { background: var(--hover); color: var(--ink); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* capsule segmented control */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--hover); border: 1px solid var(--rule); }
.seg button { position: relative; z-index: 1; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 560; color: var(--faint); white-space: nowrap; transition: color .25s ease; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.seg .thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; border-radius: 999px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 0 0 1px var(--rule); transition: transform .45s var(--spring), width .45s var(--spring); }
:root[data-theme="dark"] .seg .thumb { background: var(--pill); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }

/* form fields */
.field { display: grid; gap: 6px; }
.field > span { font-size: 12.5px; font-weight: 560; color: var(--text); }
.input { width: 100%; height: 46px; padding: 0 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--rule-2); color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease; }
textarea.input { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%), linear-gradient(135deg, var(--faint) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.input::placeholder { color: var(--faint); }
.input.bad { border-color: var(--bad); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 14%, transparent); }

/* switch */
.sw { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 16%, transparent); transition: background-color .25s ease; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .35s var(--spring); }
.sw[aria-checked="true"] { background: var(--accent); }
.sw[aria-checked="true"]::after { transform: translateX(18px); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--card); font-size: 13.5px; font-weight: 520; color: var(--text); white-space: nowrap; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease); }
.chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--rule-2)); color: var(--ink); }
.chip:active { transform: scale(.96); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 620; background: var(--tint); color: var(--accent-ink); white-space: nowrap; }
.badge.good { background: color-mix(in srgb, var(--good) 14%, var(--card)); color: color-mix(in srgb, var(--good) 80%, var(--ink)); }
.badge.warn { background: color-mix(in srgb, var(--warn) 16%, var(--card)); color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
.badge.bad { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: color-mix(in srgb, var(--bad) 80%, var(--ink)); }
.badge.plain { background: var(--hover); color: var(--text); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ── sheet: a centered glass dialog on wide screens, an inset floating sheet on phones ── */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(8, 9, 11, 0.38); opacity: 0; transition: opacity .3s ease; }
.scrim.on { opacity: 1; }
.sheet { position: fixed; z-index: 61; left: 50%; top: 50%; width: min(520px, calc(100vw - 32px)); max-height: min(86dvh, 760px); display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--lg-fill-2); transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .45s var(--spring), opacity .25s ease; }
.sheet.on { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.sheet header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 8px 22px; }
.sheet header h3 { font-size: 18px; }
.sheet .body { padding: 6px 22px 20px; overflow: auto; overscroll-behavior: contain; }
.sheet .x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--hover); color: var(--text); flex: none; }
.sheet .x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 640px) {
  .sheet { left: 8px; right: 8px; top: auto; bottom: calc(8px + var(--sab)); width: auto; max-height: 88dvh; border-radius: 34px; transform: translateY(110%); }
  .sheet.on { transform: translateY(0); }
  .sheet header::before { content: ''; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: var(--rule-2); }
  .sheet header { padding-top: 22px; }
}
:root:not([data-theme="dark"]) .sheet { background: rgba(250, 250, 248, 0.86); }

/* toasts: a glass capsule at the bottom, with an optional undo */
.toasts { position: fixed; z-index: 80; left: 50%; bottom: calc(18px + var(--sab) + var(--toast-lift, 0px)); transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 8px 8px 8px 18px; border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 520; animation: tin .5s var(--spring) both; max-width: 100%; }
.toast.out { animation: tout .25s ease forwards; }
.toast svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--good); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.toast span { overflow: hidden; text-overflow: ellipsis; }
.toast button { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--hover); font-weight: 620; font-size: 13px; color: var(--accent-ink); flex: none; }
.toast:not(:has(button)) { padding-right: 18px; }
@keyframes tin { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@keyframes tout { to { opacity: 0; transform: translateY(8px) scale(.96); } }

/* make it yours: swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches button { width: 38px; height: 38px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: transform .25s var(--spring); }
.swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c); }
.swatches button:active { transform: scale(.9); }
.swatches label { position: relative; width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #f43f5e); cursor: pointer; }
.swatches label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* empty / loading states, one shape for all three demos */
.empty { display: grid; justify-items: center; gap: 8px; padding: 34px 18px; text-align: center; color: var(--faint); font-size: 14px; }
.empty svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.empty b { color: var(--ink); font-weight: 600; font-size: 15px; }
.skel { border-radius: 8px; background: linear-gradient(90deg, var(--hover), color-mix(in srgb, var(--ink) 9%, transparent), var(--hover)); background-size: 200% 100%; animation: sk 1.3s ease infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* the d1fpc3 pitch: ink, not the demo company's accent, so it reads as the builder talking */
.pitch { position: relative; margin-top: 14px; padding: 18px 18px 16px; border-radius: var(--r-lg); background: #15171a; color: #c9ccd2; box-shadow: var(--shadow); }
:root[data-theme="dark"] .pitch { background: #f2f1ed; color: #4a4e55; }
.pitch small { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: #8a8e96; }
.pitch b { display: block; margin-top: 6px; font-size: 16.5px; line-height: 1.3; letter-spacing: -0.015em; color: #fff; text-wrap: balance; }
:root[data-theme="dark"] .pitch b { color: #15171a; }
.pitch p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; }
.pitch .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.pitch .btn { height: 40px; background: #fff; color: #15171a; border-color: transparent; }
.pitch .btn:hover { background: #e9e8e4; }
:root[data-theme="dark"] .pitch .btn { background: #15171a; color: #fff; }
.pitch .row a.plain { font-size: 13px; font-weight: 560; color: inherit; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgba(128,128,128,.5); }
.pitch .terms { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: #8a8e96; }
.pitch .terms a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.pitch .x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #8a8e96; }
.pitch .x:hover { background: rgba(128,128,128,.16); }
.pitch .x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* demo footnote */
.demo-foot { margin: 48px auto 0; padding: 22px 16px calc(28px + var(--sab)); max-width: 1120px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--faint); }
.demo-foot a { color: var(--ink); font-weight: 560; }
.demo-foot a:hover { color: var(--accent-ink); }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media print {
  .dock, .dock-space, .toasts, .no-print, .demo-foot { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}