/* section-b:start */
/* A self-playing mockup of TiempOS over a plaza photograph.
   Outside the app frame: website tokens only (media, crema, honey).
   Inside .os-app: the TiempOS dark theme, ported from
   tiempos apps/web/src/routes/layout.css and scoped here as --os-*.
   Swap the backdrop for a photo by changing --os-bg on .os-demo. */
.os-demo {
  --os-bg: url("/assets/company/os-plaza.webp");
  /* Shared frosted panel tint: drawer + step list. */
  --os-side-glass: oklch(15% 0.006 40 / 0.5);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--media);
  color: var(--crema);
  padding: var(--band) var(--pad-x);
}
.os-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background: var(--os-bg) center / cover no-repeat;
}
/* Same graded blur as the homepage booking section: strongest on the
   bottom edge and gone by the top third. The mask grades a backdrop-filter. */
.os-demo__blur {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 70%);
  mask-image: linear-gradient(to top, #000 0%, transparent 70%);
}
/* Two scrims. The vertical one keeps the heading on a dark ground; the side
   one sits under the step list, whose muted text needs it to stay AA. */
.os-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background:
    linear-gradient(90deg, rgba(var(--media-rgb), 0.5) 0%, rgba(var(--media-rgb), 0.34) 30%, rgba(var(--media-rgb), 0) 55%),
    linear-gradient(180deg,
      rgba(var(--media-rgb), 0.55) 0%,
      rgba(var(--media-rgb), 0.18) 40%,
      rgba(var(--media-rgb), 0.06) 72%,
      rgba(var(--media-rgb), 0.36) 100%);
}
.os-inner { position: relative; max-width: var(--content-max); margin: 0 auto; }

.os-head { margin-bottom: var(--s-12); }
.os-title { font-size: clamp(2rem, 4vw, 3rem); line-height: var(--lh-tight); color: var(--crema); }
.os-lede { margin-top: var(--s-4); max-width: 56ch; font-size: 1.05rem; line-height: var(--lh-relaxed); color: var(--on-dark-2); }

.os-stage {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--s-10);
  align-items: stretch;
}
/* The rail runs the frame's full height so its action row can sit on the
   frame's bottom edge. */
.os-rail { display: flex; flex-direction: column; min-width: 0; }

/* ── Step selector ─────────────────────────────────────────── */
.os-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.os-step {
  --os-progress: 0;
  position: relative;
  display: flex;
  gap: var(--s-3);
  width: 100%;
  padding: 14px 16px 18px;
  border: 1px solid rgba(var(--crema-rgb), 0.12);
  border-radius: var(--r-md);
  background: url("/assets/company/os-grain.svg") 0 0 / 160px 160px repeat, var(--os-side-glass);
  box-shadow: inset 0 1px 0 rgba(var(--crema-rgb), 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  backdrop-filter: blur(10px) saturate(0.8);
  color: var(--crema);
  font: inherit;
  text-align: left;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity var(--dur-2) var(--ease-std), background-color var(--dur-2) var(--ease-std), border-color var(--dur-2) var(--ease-std);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .os-step { background: var(--os-panel, rgba(var(--media-rgb), 0.88)); }
}
.os-step:hover {
  opacity: 0.92;
  background: url("/assets/company/os-grain.svg") 0 0 / 160px 160px repeat, oklch(18% 0.006 40 / 0.58);
}
.os-step:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.os-step.is-active {
  opacity: 1;
  background: url("/assets/company/os-grain.svg") 0 0 / 160px 160px repeat, oklch(20% 0.008 40 / 0.62);
  border-color: rgba(var(--crema-rgb), 0.18);
}
.os-step__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-circle);
  border: 1px solid rgba(var(--crema-rgb), 0.3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.os-step.is-done .os-step__num { border-color: rgba(var(--honey-rgb), 0.7); color: var(--honey); }
.os-step.is-active .os-step__num { background: var(--honey); border-color: var(--honey); color: var(--crema); }
.os-step__text { display: grid; grid-template-rows: auto 0fr; min-width: 0; transition: grid-template-rows var(--dur-3) var(--ease-std); }
.os-step.is-active .os-step__text { grid-template-rows: auto 1fr; }
.os-step__title { font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.6; }
.os-step__desc { overflow: hidden; min-height: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--on-dark-2); }
.os-step__bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 2px;
  border-radius: var(--r-xxs);
  background: var(--line-dark);
  overflow: hidden;
  opacity: 0;
}
.os-step.is-active .os-step__bar { opacity: 1; }
.os-step__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--honey);
  transform-origin: left center;
  transform: scaleX(var(--os-progress));
}
.os-caption { display: none; }

.os-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: auto; padding-top: var(--s-6); }
.os-play {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid rgba(var(--crema-rgb), 0.25);
  border-radius: var(--r-pill);
  background: rgba(var(--media-rgb), 0.45);
  color: var(--crema);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background-color var(--dur-2), border-color var(--dur-2), transform var(--dur-1);
}
.os-play:hover { background: var(--fill-dark-2); border-color: rgba(var(--crema-rgb), 0.5); }
.os-play:active { transform: scale(0.97); }
.os-play:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.os-play .os-i { width: 12px; height: 12px; }

/* ── The app frame ─────────────────────────────────────────── */
.os-frame { min-width: 0; container: osframe / inline-size; }

.os-app {
  position: relative;
  display: flex;
  height: 544px;
  overflow: hidden;
  border-radius: var(--os-r-panel);
  background: transparent;
  box-shadow: 0 0 0 1px var(--os-stroke), 0 12px 32px oklch(0% 0 0 / 0.5), 0 40px 90px oklch(0% 0 0 / 0.4);
  color: var(--os-ink);
  font-family: var(--font-body);
  font-size: var(--fs-os);
  line-height: var(--lh-os);
  text-align: left;
}

/* Sidebar (AppShell.svelte + DrawerItem.svelte) */
/* Frosted glass. The app frame is transparent behind the sidebar (the main
   column carries the page colour), so the blurred skyline shows through a
   tinted panel. Grain is a tiled SVG at 5% so the glass reads as a surface. */
.os-side {
  /* A near-neutral dark. saturate() stays below 1 so the orange skyline is
     calmed, not pushed red, once the blur is live after the reveal. */
  /* Muted ink runs a step brighter on the glass to hold AA over the lights. */
  --os-ink-muted: rgba(var(--crema-rgb), 0.8);
  --os-side-dur: 300ms;
  --os-side-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  width: 212px;
  padding: 0 8px 8px;
  overflow: hidden;
  border-right: 1px solid rgba(var(--crema-rgb), 0.12);
  background: url("/assets/company/os-grain.svg") 0 0 / 160px 160px repeat, var(--os-side-glass);
  box-shadow: inset -1px 0 0 rgba(var(--crema-rgb), 0.04), inset 0 1px 0 rgba(var(--crema-rgb), 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  backdrop-filter: blur(10px) saturate(0.8);
  /* Expanding: the width opens first, the labels follow. */
  transition: width var(--os-side-dur) var(--os-side-ease);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .os-side { background: var(--os-panel); }
}
/* The wordmark row: 64px tall with 8px under it before the nav, the mark and
   the toggle both centred on it, and the mark's left edge on the nav icons'. */
.os-brand { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 64px; margin-bottom: 8px; }
.os-brand__mark { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; }
.os-drawer-toggle { margin-right: 0; transition: margin-right var(--os-side-dur) var(--os-side-ease), background-color var(--os-fast) var(--os-ease), color var(--os-fast) var(--os-ease); }

/* What fades as the drawer closes. Nothing here changes size, so no line
   rewraps mid-animation: the words just clip under the narrowing edge. */
.os-brand__mark,
.os-nav__label,
.os-nav__meta,
.os-client__name,
.os-client__dot,
.os-user__text,
.os-user > .os-i {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 180ms var(--os-side-ease) 160ms, transform 220ms var(--os-side-ease) 160ms, visibility 0s linear 0s;
}
.os-brand__mark img { display: block; width: auto; height: 31px; }

.os-nav { display: flex; flex-direction: column; gap: 2px; }
.os-nav__item,
.os-client {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 32px;
  /* Icons sit 12px in and avatars 10px in, which is dead centre of the
     collapsed 56px rail, so neither moves when the drawer closes. */
  padding: 0 8px 0 12px;
  overflow: hidden;
  border-radius: var(--os-r-control);
  white-space: nowrap;
  transition: background-color var(--os-base) var(--os-ease), color var(--os-fast) var(--os-ease);
}
.os-nav__item:hover,
.os-client:hover,
.os-nav__item.is-active,
.os-client.is-active { background: var(--os-accent-fill); }
.os-nav__item .os-i { width: 15px; height: 15px; }
.os-nav__label,
.os-client__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.os-nav__meta { display: flex; align-items: center; gap: 6px; }
.os-nav__badge { font-size: 10px; font-weight: 600; color: var(--os-danger); }
.os-nav__count { font-size: 11px; color: var(--os-ink-muted); }
.os-nav__badge:empty,
.os-nav__count:empty { display: none; }
.os-sep { margin: 12px 8px; border-top: 1px solid var(--os-stroke-subtle); }
.os-clients { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.os-client { padding-left: 10px; }
.os-clients__list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.os-client__dot { flex: none; width: 7px; height: 7px; border-radius: var(--r-circle); background: var(--os-tag-green); box-shadow: 0 0 6px color-mix(in srgb, var(--os-tag-green) 65%, transparent); }
.os-side__foot { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.os-user { display: flex; align-items: center; gap: 8px; height: 44px; padding: 6px 6px 6px 4px; overflow: hidden; border-radius: 8px; white-space: nowrap; transition: background-color var(--os-fast) var(--os-ease); }
.os-user:hover { background: var(--os-accent-fill); }
.os-user__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.os-user__name { font-size: 12px; font-weight: 500; }
.os-user__role { font-size: 10px; text-transform: uppercase; color: var(--os-ink-muted); }
.os-user .os-i { width: 12px; height: 12px; color: var(--os-ink-muted); }

.os-client.is-active .os-cav { box-shadow: 0 0 0 1px rgba(var(--crema-rgb), 0.8); }
.os-client.is-active img.os-cav { box-shadow: 0 0 0 1.5px rgba(var(--crema-rgb), 0.85); }

/* Collapsed drawer: the real app's w-14 state. Toggle or narrow frame. */
/* Collapsing: labels fade and slide out first, then the width closes. */
.os-app.is-collapsed .os-side { width: 56px; transition-delay: 110ms; }
.os-app.is-collapsed .os-drawer-toggle { margin-right: 5px; transition-delay: 110ms, 0s, 0s; }
.os-app.is-collapsed .os-brand__mark,
.os-app.is-collapsed .os-nav__label,
.os-app.is-collapsed .os-nav__meta,
.os-app.is-collapsed .os-client__name,
.os-app.is-collapsed .os-client__dot,
.os-app.is-collapsed .os-user__text,
.os-app.is-collapsed .os-user > .os-i {
  opacity: 0;
  transform: translateX(-6px);
  visibility: hidden;
  transition: opacity 120ms var(--os-side-ease), transform 160ms var(--os-side-ease), visibility 0s linear 160ms;
}
@media (prefers-reduced-motion: reduce) {
  .os-side,
  .os-app.is-collapsed .os-side,
  .os-drawer-toggle,
  .os-app.is-collapsed .os-drawer-toggle { transition: none; }
  .os-brand__mark,
  .os-nav__label,
  .os-nav__meta,
  .os-client__name,
  .os-client__dot,
  .os-user__text,
  .os-user > .os-i,
  .os-app.is-collapsed .os-brand__mark,
  .os-app.is-collapsed .os-nav__label,
  .os-app.is-collapsed .os-nav__meta,
  .os-app.is-collapsed .os-client__name,
  .os-app.is-collapsed .os-client__dot,
  .os-app.is-collapsed .os-user__text,
  .os-app.is-collapsed .os-user > .os-i { transform: none; transition: none; }
}

/* ── Container rules. The frame reflows by its own width. ──── */
/* A forced rail hides the toggle, so it waits until the open drawer truly
   cannot fit. At 640px and up the inbox drops its profile pane and the
   drawer still opens and closes. */
@container osframe (max-width: 640px) {
  .os-side { width: 56px; }
  .os-brand__mark,
  .os-drawer-toggle,
  .os-nav__label,
  .os-nav__meta,
  .os-client__name,
  .os-client__dot,
  .os-user__text,
  .os-user .os-i { display: none; }
  .os-brand { justify-content: center; }
  .os-nav__item,
  .os-client { justify-content: center; padding: 0; }
}
@container osframe (max-width: 560px) {
  .os-app { flex-direction: column; height: 527px; }
  .os-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; width: auto; padding: 6px 8px; border-right: 0; border-bottom: 1px solid var(--os-stroke); }
  .os-brand,
  .os-sep,
  .os-user { display: none; }
  .os-nav { flex-direction: row; order: 1; }
  .os-side__foot { display: contents; }
  .os-side__foot .os-nav__item { order: 2; }
  .os-nav__item { width: 36px; }
  .os-clients { flex-basis: 100%; order: 3; }
  .os-clients__list { flex-direction: row; gap: 4px; overflow-x: auto; }
  .os-client { width: 32px; flex: none; }
  .os-cav { width: 24px; height: 24px; font-size: 9px; }
}

/* ── Page breakpoints for the outer layout ─────────────────── */
@media (max-width: 1024px) {
  .os-stage { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .os-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
  .os-step { flex-direction: column; gap: var(--s-2); padding: 12px 12px 16px; }
  .os-step__text { grid-template-rows: auto 0fr; }
  .os-step.is-active .os-step__text { grid-template-rows: auto 0fr; }
  .os-step__title { font-size: var(--fs-sm); line-height: var(--lh-snug); }
  .os-step__bar { left: 12px; right: 12px; }
  .os-caption { display: block; min-height: 3em; margin-top: var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--on-dark-2); }
  .os-caption b { color: var(--crema); font-weight: var(--fw-semibold); }
  /* One column: steps, caption, the app, then Book a Call beside Pause. */
  .os-stage { row-gap: var(--s-4); }
  .os-rail { display: contents; }
  .os-steps { order: 1; }
  .os-caption { order: 2; margin-top: 0; }
  .os-frame { order: 3; }
  .os-controls { order: 4; margin-top: var(--s-2); padding-top: 0; }
}
@media (max-width: 767px) {
  .os-head { margin-bottom: var(--s-8); }
}
@media (max-width: 640px) {
  .os-steps { gap: var(--s-1); }
  .os-step { align-items: center; padding: 10px 4px 14px; }
  .os-step__text { display: none; }
  .os-step__bar { left: 8px; right: 8px; bottom: 6px; }
}

/* ── Explore-only (/company). No step rail, no autoplay. ───── */
.os-demo--explore::after {
  background: linear-gradient(180deg,
    rgba(var(--media-rgb), 0.55) 0%,
    rgba(var(--media-rgb), 0.18) 40%,
    rgba(var(--media-rgb), 0.06) 72%,
    rgba(var(--media-rgb), 0.36) 100%);
}
.os-demo--explore .os-head {
  text-align: center;
  margin-bottom: var(--s-8);
}
.os-demo--explore .os-lede {
  margin-left: auto;
  margin-right: auto;
}
.os-demo--explore .os-stage {
  --os-stage-h: calc(544px * 0.8);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 860px) minmax(220px, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: clamp(16px, 2vw, 28px);
  width: 100%;
}
/* Scale the whole app, do not squash its height. A shorter box alone
   crushed the client list while type and row heights stayed full size. */
.os-demo--explore .os-frame {
  --os-explore-scale: 0.8;
  --os-explore-h: 544px;
  grid-column: 2;
  width: 100%;
  max-width: 860px;
  height: var(--os-stage-h);
  overflow: hidden;
  justify-self: center;
}
.os-demo--explore .os-app {
  width: calc(100% / var(--os-explore-scale));
  height: var(--os-explore-h);
  transform: scale(var(--os-explore-scale));
  transform-origin: top left;
}
.os-demo--explore .os-cursor { display: none; }
.os-demo--explore .os-cta-row {
  display: flex;
  justify-content: center;
  margin-top: var(--s-6);
}

/* Feature lists match /company hubs: ruled rows, no boxed cards. */
.os-feats {
  min-width: 0;
  width: 100%;
  max-width: 280px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s var(--ease-out-expo),
    transform 0.5s var(--ease-out-expo);
}
.os-feats--right { transition-delay: 0.06s; }
.os-stage.is-armed .os-feats {
  opacity: 1;
  transform: none;
}
.os-feats--left { grid-column: 1; justify-self: end; }
.os-feats--right { grid-column: 3; justify-self: start; }
.os-feats__rail {
  display: grid;
  gap: var(--s-2);
}
.os-feat {
  border: 1px solid rgba(var(--crema-rgb), 0.12);
  border-radius: var(--r-md);
  background: url("/assets/company/os-grain.svg") 0 0 / 160px 160px repeat, var(--os-side-glass);
  box-shadow: inset 0 1px 0 rgba(var(--crema-rgb), 0.08);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  backdrop-filter: blur(10px) saturate(0.8);
  transition:
    background-color 0.25s var(--ease-std),
    border-color 0.25s var(--ease-std),
    opacity 0.25s var(--ease-std);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .os-feat { background: var(--os-panel, rgba(var(--media-rgb), 0.88)); }
}
.os-feat:hover {
  background: url("/assets/company/os-grain.svg") 0 0 / 160px 160px repeat, oklch(18% 0.006 40 / 0.58);
}
.os-feat.is-open {
  background: url("/assets/company/os-grain.svg") 0 0 / 160px 160px repeat, oklch(20% 0.008 40 / 0.62);
  border-color: rgba(var(--crema-rgb), 0.18);
}
.os-feat__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: var(--crema);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
}
.os-feat__btn span { min-width: 0; }
.os-feat__btn::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0;
  border-right: 1.5px solid rgba(var(--crema-rgb), 0.45);
  border-bottom: 1.5px solid rgba(var(--crema-rgb), 0.45);
  transform: rotate(45deg);
  transition: transform 0.35s var(--ease-out-expo), border-color 0.25s var(--ease-std);
}
.os-feat.is-open .os-feat__btn::after {
  margin-top: 3px;
  transform: rotate(225deg);
  border-color: rgba(var(--crema-rgb), 0.85);
}
.os-feat__btn:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 2px;
}
.os-feat__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--ease-out-expo);
}
.os-feat.is-open .os-feat__panel { grid-template-rows: 1fr; }
.os-feat__inner {
  overflow: hidden;
  min-height: 0;
}
.os-feat__inner p {
  margin: 0;
  padding: 0 16px 14px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--on-dark-2);
}

@container osframe (max-width: 560px) {
  .os-demo--explore .os-frame { --os-explore-h: 527px; }
  .os-demo--explore .os-stage { --os-stage-h: calc(527px * 0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .os-feats {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .os-feat__panel,
  .os-feat__btn::after { transition: none; }
}
@media (max-width: 1100px) {
  .os-demo--explore .os-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
  .os-demo--explore .os-frame { grid-column: 1; max-width: 960px; }
  .os-feats {
    grid-column: 1;
    max-width: 520px;
    margin-inline: auto;
    opacity: 1;
    transform: none;
  }
  .os-feats--left { order: 1; justify-self: stretch; }
  .os-demo--explore .os-frame { order: 2; }
  .os-feats--right { order: 3; justify-self: stretch; }
}
@media (max-width: 767px) {
  .os-demo--explore .os-head { margin-bottom: var(--s-6); }
  .os-demo--explore .os-cta-row { margin-top: var(--s-4); }
  .os-feat__btn { padding-top: 12px; font-size: 1rem; }
  .os-feat__inner p { padding-bottom: 12px; }
}
/* section-b:end */