/* Mozee site styles. Shared by every page. Tokens come from tokens.css. */
/* Concept A, Gallery. Local tokens: only what tokens.css does not carry. */
/* Registered so an em value resolves once, where it is set. Hour labels use a smaller font and still line up. */
@property --hour { syntax: "<length>"; inherits: true; initial-value: 0px; }
:root {
  --nav-global-h: 44px;          /* apple.design.md global-nav height */
  --logo-lockup-w: 96px;         /* brand minimum for the horizontal lockup */
  --hero-render-fs: 0.6875rem;   /* every hero render size is in em off this */
  --render-fs: 0.75rem;
  --render-event-bg: rgba(0, 102, 204, 0.1);   /* Action Blue at 10%, booking fill */
  --render-chip-bg: rgba(0, 102, 204, 0.08);
  --text-numeral: clamp(9rem, 5rem + 16vw, 17rem);
  --chat-dot-cycle: 1200ms;
  --ghost-hover: #ebf3fc;        /* Action Blue at 8% on white, opaque */
  --hover-on-dark: #3a3a3c;      /* opaque hover fill on dark tiles, white text 11:1 */
  /* Render realism */
  --laptop-base-highlight: rgba(255, 255, 255, 0.85); /* light catching the top edge of the base */
  --laptop-base-edge: rgba(0, 0, 0, 0.14);            /* darker lip along the bottom edge */
  --laptop-notch: rgba(0, 0, 0, 0.12);                /* thumb notch, 12% black */
  --phone-edge: #3a3a3c;                              /* titanium band around the phone frame */
  /* Motion curves the brief names that tokens.css does not carry */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);      /* iOS sheet curve */
  --ease-pop: cubic-bezier(0.34, 1.36, 0.64, 1);      /* slight overshoot for the confirm tick */
  --step-win-max: 880px;         /* How it works window on desktop */
  --card-crop: 1.1em;           /* how far a card render runs past the tile's bottom edge, in render em */
  --duration-hero: 900ms;
  --duration-hero-fade: 400ms;
  /* Hero beats, measured from the moment the stage starts playing */
  --hero-t0: 100ms;              /* laptop starts */
  --hero-phone-at: 220ms;        /* phone follows 120ms later */
  --hero-slot-at: 800ms;         /* 10:30 fills, about 700ms in */
  --hero-press-at: 1100ms;       /* confirm presses, about 1000ms in */
  --hero-land-at: 1350ms;        /* booking lands on the laptop, about 1250ms in */
  --sync-out-at: 450ms;          /* covered slots leave once the busy event has landed */
  --sync-label-at: 850ms;        /* then the label says why */
  --follow-at: 150ms;            /* the reminder email follows its notification */
  --tab-pop-at: 120ms;           /* tab 4: the confirm tick starts */
  --tab-rise-at: 160ms;          /* tab 4: title, card and actions follow, one stagger apart */
  --duration-land: 450ms;
  --duration-drop: 500ms;
  --duration-pop: 420ms;
  --stagger: 50ms;
}
@media (min-width: 834px) {
  :root {
    --hero-render-fs: clamp(0.5rem, 0.2rem + 0.72vw, 0.8125rem);
    --render-fs: 0.875rem;
  }
}

html { scroll-padding-top: var(--nav-global-h); }
body { background: var(--color-canvas); overflow-x: clip; }
a { color: var(--color-primary); text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.icon { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* ---------- Global nav ---------- */
.gnav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-global-h);
  background: var(--color-surface-black);
  color: var(--color-body-on-dark);
}
.gnav-inner {
  height: 100%; max-width: var(--container-text); margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.gnav-logo { display: flex; align-items: center; height: var(--nav-global-h); border-radius: var(--radius-xs); }
.gnav-logo img { width: var(--logo-lockup-w); height: auto; }
.gnav-links { display: none; }
.gnav-links a, .gnav-login {
  display: flex; align-items: center; height: var(--nav-global-h); padding: 0 var(--space-xs);
  font-size: var(--text-fine); letter-spacing: var(--tracking-caption);
  color: var(--color-body-muted-on-dark);
  transition: color var(--duration-fast) var(--ease-out);
}
.gnav-links a:focus-visible, .gnav-login:focus-visible, .gnav-logo:focus-visible,
.gnav-cta:focus-visible, .gnav-menu:focus-visible { outline-color: var(--color-primary-on-dark); outline-offset: calc(var(--focus-ring-width) * -1); }
.gnav-right { display: flex; align-items: center; gap: var(--space-2xs); }
.gnav-login { display: none; }
.gnav-cta { display: flex; align-items: center; height: var(--nav-global-h); padding: 0 var(--space-2xs); border-radius: var(--radius-pill); }
.gnav-cta span {
  display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--text-fine); letter-spacing: var(--tracking-caption);
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.gnav-cta:active span { transform: scale(var(--press-scale)); }
.gnav-menu {
  width: var(--target-min); height: var(--target-min); display: grid; place-items: center;
  background: none; border: 0; color: var(--color-body-on-dark); cursor: pointer; border-radius: var(--radius-sm);
  transition: transform var(--duration-press) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.gnav-menu:active { transform: scale(var(--press-scale)); }
.gnav-menu .icon { width: 1.25rem; height: 1.25rem; }
.gnav-menu .i-close, .gnav-menu[aria-expanded="true"] .i-menu { display: none; }
.gnav-menu[aria-expanded="true"] .i-close { display: block; }
.gnav-panel {
  position: absolute; left: 0; right: 0; top: var(--nav-global-h);
  background: var(--color-surface-black); padding: var(--space-xs) var(--space-lg) var(--space-lg);
}
.gnav-panel[hidden] { display: none; }
.gnav-panel a {
  display: flex; align-items: center; min-height: var(--target-min);
  font-family: var(--font-display); font-size: var(--text-tagline); font-weight: var(--weight-semibold);
  color: var(--color-body-on-dark); border-radius: var(--radius-xs);
}
.gnav-panel a:focus-visible { outline-color: var(--color-primary-on-dark); }
@media (min-width: 834px) {
  .gnav-links { display: flex; gap: var(--space-xs); }
  .gnav-login { display: flex; }
  .gnav-menu, .gnav-panel { display: none !important; }
}

/* ---------- Buttons ---------- */
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-lg); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--target-min); padding: 0 var(--space-lg);
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font: inherit; font-size: var(--text-body); letter-spacing: var(--tracking-body); line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
.btn:active { transform: scale(var(--press-scale)); }
.btn .icon { width: 1.05rem; height: 1.05rem; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--ghost { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn .brand, .brand-chip img { width: 1.05rem; height: 1.05rem; }
.brand-chip { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; margin-left: calc(var(--space-sm) * -1); border-radius: var(--radius-pill); background: var(--color-canvas); flex: none; }
.btn[aria-disabled="true"], .btn:disabled { background: var(--color-divider-soft); color: var(--color-ink-muted-56); border-color: transparent; cursor: not-allowed; transform: none; }
/* On dark tiles the secondary action is a solid white pill, not an outline */
.on-dark .btn--ghost { background: var(--color-canvas); color: var(--color-ink); border-color: transparent; }
.on-dark :focus-visible { outline-color: var(--color-primary-on-dark); }
.signup { display: grid; gap: var(--space-sm); width: 100%; max-width: 21rem; margin: var(--space-lg) auto 0; }
.signup .btn { width: 100%; }
@media (min-width: 640px) {
  .signup { display: flex; flex-wrap: wrap; justify-content: center; max-width: none; gap: var(--space-sm) var(--space-md); }
  .signup .btn { width: auto; }
}
.fineprint { margin-top: var(--space-md); font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-ink-muted-56); }
.fineprint a { display: inline-flex; align-items: center; min-height: var(--target-min); padding: 0 var(--space-2xs); border-radius: var(--radius-xs); }
.on-dark .fineprint { color: var(--color-body-muted-on-dark); }
.on-dark .fineprint a { color: var(--color-primary-on-dark); }

/* ---------- Tiles ---------- */
.tile { padding: var(--space-section) var(--space-lg); text-align: center; overflow: clip; }
.tile--white { background: var(--color-canvas); }
.tile--parchment { background: var(--color-canvas-parchment); }
.tile--dark { background: var(--color-surface-tile-1); color: var(--color-body-on-dark); }
.display {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-display-lg); line-height: var(--leading-display); letter-spacing: var(--tracking-hero);
  max-width: 18ch; margin: 0 auto; text-wrap: balance;
}
.tagline {
  font-family: var(--font-display); font-size: var(--text-lead); line-height: var(--leading-lead);
  letter-spacing: var(--tracking-display); font-weight: var(--weight-regular);
  max-width: 32ch; margin: var(--space-sm) auto 0; text-wrap: balance;
}
/* ---------- Made for ---------- */
.madefor { text-align: left; }
.mf-head { max-width: var(--container-wide); margin: 0 auto; }
.madefor .display { margin: 0; max-width: 14ch; }
.madefor .tagline { margin-left: 0; margin-right: 0; }
.mf-grid { list-style: none; padding: 0; max-width: var(--container-wide); margin: var(--space-2xl) auto 0; display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 834px) { .mf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mf-card { background: var(--color-canvas-parchment); border-radius: var(--radius-lg); overflow: hidden; }
.mf-card img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.mf-card div { padding: var(--space-md); }
.compare-more { margin-top: var(--space-md); }
.mf-card { position: relative; transition: transform var(--duration-press) var(--ease-out); }
.mf-card:active { transform: scale(var(--press-scale)); }
.mf-link { color: inherit; }
.mf-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mf-link:focus-visible { outline: none; }
.mf-card:has(.mf-link:focus-visible) { outline: var(--focus-ring-width) solid var(--color-primary-focus); outline-offset: var(--focus-ring-offset); }
@media (hover: hover) and (pointer: fine) { .mf-card:hover .mf-link { color: var(--color-primary); } }
.mf-card h3 { font-family: var(--font-display); font-size: var(--text-tagline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-lead); }
.mf-card p { margin-top: var(--space-2xs); font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); color: var(--color-ink-muted-80); }
.tile--dark .tagline { color: var(--color-body-muted-on-dark); }
.hero { padding-top: var(--space-3xl); padding-bottom: 0; }
.hero h1 {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-hero);
  max-width: 13ch; margin: 0 auto; text-wrap: balance;
}
.hero .tagline { max-width: 36ch; }
.hero h1 { max-width: none; }
.keep { display: block; }
/* The AI tile opens a new chapter, so its headline sits at hero size */
#ai-title { font-size: var(--text-hero); line-height: var(--leading-hero); max-width: 13ch; }

/* Reveal: hidden only by a paused animation, so no-JS, reduced motion and print all show content */
@keyframes rise { from { opacity: 0; transform: translateY(var(--space-xl)); } to { opacity: 1; transform: none; } }
.motion [data-reveal] { animation: rise var(--duration-slow) var(--ease-out) both paused; }
.motion [data-reveal].is-in { animation-play-state: running; }
.motion [data-reveal="late"] { animation-delay: calc(var(--duration-fast) / 2); }

/* ---------- Hero stage: laptop + phone, all in em ---------- */
.stage { position: relative; font-size: var(--hero-render-fs); height: 49em; margin: var(--space-2xl) auto 0; max-width: var(--container-max); font-variant-numeric: tabular-nums; }
/* Phones: the laptop slides left so Thursday, where the new booking lands, stays on screen */
.laptop { position: absolute; top: 3em; left: calc(50% - 36em); width: 64em; }
.phone { position: absolute; top: 2em; left: calc(50% - 17em); width: 19.5em; z-index: 2; }
@media (min-width: 834px) {
  .stage { height: 55em; }
  .laptop { top: 2em; left: calc(50% - 27em); }
  .phone { top: 7.5em; left: calc(50% - 41em); }
}
/* Wide screens: the phone steps 4em left so the laptop's Monday column stays readable */
@media (min-width: 1200px) { .phone { left: calc(50% - 45em); } }
.laptop-lid {
  background: var(--color-ink); border-radius: 1.5em 1.5em 0.5em 0.5em;
  padding: 1.2em 1.2em 1.6em; box-shadow: var(--shadow-product);
}
.laptop-screen { aspect-ratio: 16 / 10; background: var(--color-canvas); border-radius: 0.35em; overflow: hidden; display: flex; flex-direction: column; }
/* Only the lid casts the product shadow. The base reads as metal through inset light and edge. */
.laptop-base {
  position: relative; height: 1.3em; margin: 0 -5%; background: var(--color-hairline);
  border-radius: 0 0 1.4em 1.4em;
  box-shadow: inset 0 0.12em 0 var(--laptop-base-highlight), inset 0 -0.3em 0.35em var(--laptop-base-edge);
}
.laptop-base::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 14em; height: 0.35em; transform: translateX(-50%);
  background: var(--laptop-notch); border-radius: 0 0 0.5em 0.5em;
}

/* Hero playback. The markup is the booked end state. With .motion the devices rise in,
   the client picks 10:30 and confirms on the phone, and the booking lands on the laptop. */
@keyframes hero-rise-laptop { from { transform: translateY(3em); } to { transform: none; } }
@keyframes hero-rise-phone { from { transform: translateY(5em); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slot-fill { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes press { 0% { transform: none; } 15%, 52% { transform: scale(var(--press-scale)); } 100% { transform: none; } }
@keyframes land { from { opacity: 0; transform: translateY(-0.6em) scale(0.96); } to { opacity: 1; transform: none; } }
.motion .stage .laptop-body { animation: hero-rise-laptop var(--duration-hero) var(--ease-out) var(--hero-t0) both paused, fade-in var(--duration-hero-fade) var(--ease-out) var(--hero-t0) both paused; }
.motion .stage .phone-frame { animation: hero-rise-phone var(--duration-hero) var(--ease-out) var(--hero-phone-at) both paused, fade-in var(--duration-hero-fade) var(--ease-out) var(--hero-phone-at) both paused; }
.motion .stage .slots .sel::after { animation: slot-fill var(--duration-fast) var(--ease-out) var(--hero-slot-at) both paused; }
.motion .stage .r-btn { animation: press var(--duration-base) var(--ease-out) var(--hero-press-at) both paused; }
.motion .stage .ev--new { transform-origin: top; animation: land var(--duration-land) var(--ease-out) var(--hero-land-at) both paused; }
.motion .stage.is-play .laptop-body,
.motion .stage.is-play .phone-frame,
.motion .stage.is-play .slots .sel::after,
.motion .stage.is-play .r-btn,
.motion .stage.is-play .ev--new { animation-play-state: running; }

/* Scroll-linked depth: the phone drifts up faster than the laptop over the first 70vh */
@keyframes drift-phone { to { translate: 0 -4em; } }
@keyframes drift-laptop { to { translate: 0 -1em; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion .phone { animation: drift-phone linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .motion .laptop { animation: drift-laptop linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
  }
}

/* Mozee app: week view */
.app-bar { display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1.3em; border-bottom: 1px solid var(--color-hairline-alpha); text-align: left; }
.app-bar img { width: 1.6em; height: 1.6em; }
.app-bar strong { font-size: 1.15em; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caption); }
.app-bar .muted { color: var(--color-ink-muted-56); font-size: 0.95em; }
.app-bar .spacer { flex: 1; }
.seg { display: inline-flex; background: var(--color-canvas-parchment); border-radius: 0.6em; padding: 0.2em; font-size: 0.9em; }
.seg span { padding: 0.3em 0.8em; border-radius: 0.45em; color: var(--color-ink-muted-56); }
.seg .on { background: var(--color-canvas); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-hairline-alpha); }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%;
  background: var(--color-ink); color: var(--color-body-on-dark); font-size: 0.85em; font-weight: var(--weight-semibold); letter-spacing: 0;
}
img.avatar { object-fit: cover; background: var(--color-canvas-parchment); }
.week { --hour: 4em; flex: 1; display: grid; grid-template-columns: 3.6em repeat(5, 1fr); grid-template-rows: auto 1fr; text-align: left; }
.week-head { display: contents; }
.week-head > div { padding: 0.6em 0.7em; border-bottom: 1px solid var(--color-hairline-alpha); font-size: 0.95em; color: var(--color-ink-muted-56); display: flex; align-items: baseline; gap: 0.35em; }
.week-head b { font-weight: var(--weight-semibold); color: var(--color-ink); font-size: 1.15em; }
.week-head .today b { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-size: 1em; }
.gutter { position: relative; }
.gutter span { position: absolute; right: 0.6em; transform: translateY(-50%); font-size: 0.8em; color: var(--color-ink-muted-56); font-variant-numeric: tabular-nums; }
.gutter span:first-child { transform: none; }
.day { position: relative; border-left: 1px solid var(--color-hairline-alpha);
  background-image: linear-gradient(var(--color-divider-soft) 1px, transparent 1px);
  background-size: 100% var(--hour); }
.ev {
  position: absolute; left: 0.3em; right: 0.3em; top: calc(var(--s) * var(--hour) + 0.15em); height: calc(var(--d) * var(--hour) - 0.3em);
  border-radius: 0.45em; padding: 0.35em 0.55em; overflow: hidden;
  background: var(--render-event-bg); color: var(--color-primary);
}
.ev b, .ev i { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.ev b { font-size: 0.88em; font-weight: var(--weight-semibold); }
.ev i { font-size: 0.78em; }
.ev--busy { background: var(--color-canvas-parchment); color: var(--color-ink-muted-56); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.ev--new { background: var(--color-primary); color: var(--color-on-primary); }
.ev--new i { opacity: 1; }

/* Phone */
.phone-frame { background: var(--color-ink); border-radius: 3.1em; padding: 0.6em; box-shadow: var(--shadow-product), inset 0 0 0 0.15em var(--phone-edge); }
.phone-screen { position: relative; background: var(--color-canvas); border-radius: 2.6em; overflow: hidden; height: 43em; text-align: left; padding: 0 1.3em; }
.island { position: absolute; top: 0.8em; left: 50%; width: 6.4em; height: 1.85em; transform: translateX(-50%); background: var(--color-ink); border-radius: var(--radius-pill); }
.status { display: flex; justify-content: space-between; align-items: center; height: 3.4em; padding: 0 1em; font-size: 0.95em; font-weight: var(--weight-semibold); }
.status .bars { display: flex; gap: 0.3em; align-items: center; }
.status .bars i { display: block; width: 1.5em; height: 0.75em; border-radius: 0.25em; border: 1px solid var(--color-ink); position: relative; }
.status .bars i::after { content: ""; position: absolute; inset: 0.12em 0.35em 0.12em 0.12em; background: var(--color-ink); border-radius: 0.1em; }
.urlbar { display: flex; align-items: center; justify-content: center; gap: 0.4em; height: 2.4em; margin: 0.2em 0 1em; border-radius: var(--radius-pill); background: var(--color-canvas-parchment); font-size: 0.9em; color: var(--color-ink-muted-80); }
.urlbar .icon { width: 0.9em; height: 0.9em; }
.who { display: flex; gap: 0.8em; align-items: center; }
.who .avatar { width: 3em; height: 3em; font-size: 1em; }
.who b { display: block; font-size: 1.2em; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caption); }
.who > div > span { color: var(--color-ink-muted-56); font-size: 0.95em; }
.btype { display: flex; align-items: center; gap: 0.5em; margin: 0.9em 0 1em; padding: 0.7em 0.9em; border-radius: 0.8em; background: var(--color-canvas-parchment); font-size: 0.95em; }
.btype b { font-weight: var(--weight-semibold); }
.btype span { margin-left: auto; color: var(--color-ink-muted-56); display: inline-flex; align-items: center; gap: 0.3em; }
.label { font-size: 0.85em; color: var(--color-ink-muted-56); margin: 0 0 0.5em; }
.dates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35em; margin-bottom: 1em; }
.dates span { display: grid; justify-items: center; padding: 0.45em 0; border-radius: 0.7em; font-size: 0.8em; color: var(--color-ink-muted-56); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.dates b { font-size: 1.35em; font-weight: var(--weight-semibold); color: var(--color-ink); }
.dates .sel { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
.dates .sel b { color: var(--color-on-primary); }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; margin-bottom: 1.1em; }
.slots span { text-align: center; padding: 0.55em 0; border-radius: 0.6em; font-size: 0.95em; font-weight: var(--weight-semibold); color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); font-variant-numeric: tabular-nums; }
/* The picked slot is a filled layer over a normal slot, so the fill can fade in without a colour transition */
.slots .sel { position: relative; }
.slots .sel::after { content: attr(data-t); position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--color-primary); color: var(--color-on-primary); }
.field { display: block; padding: 0.6em 0.8em; border-radius: 0.6em; box-shadow: inset 0 0 0 1px var(--color-hairline); font-size: 0.95em; margin-bottom: 0.4em; }
.field small { display: block; font-size: 0.78em; color: var(--color-ink-muted-56); }
.r-btn { display: block; text-align: center; padding: 0.75em 0; margin-top: 0.7em; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: var(--weight-semibold); font-size: 0.95em; }
.status .bars svg { width: 1.2em; height: 0.8em; fill: currentColor; }

/* ---------- Product grid ---------- */
/* Apple's tile grid: 12px from the screen edge, 12px between tiles */
.grid { display: grid; gap: var(--space-sm); margin: var(--space-2xl) calc(var(--space-sm) - var(--space-lg)) 0; grid-template-columns: 1fr; }
@media (min-width: 834px) { .grid { grid-template-columns: 1fr 1fr; } .card--lead { grid-column: 1 / -1; } }
/* Features: the section heading is the first tile, so nothing stacks above the grid */
.grid--features { margin-top: 0; }
@media (min-width: 834px) {
  .grid--features { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .card--intro { grid-column: 1 / span 5; }
  .card--rem { grid-column: 6 / -1; }
  .card--book { grid-column: 1 / span 6; }
  .card--sync { grid-column: 7 / -1; }
}
.card.card--intro { align-items: flex-start; text-align: left; padding: var(--space-2xl) var(--space-xl); }
.card--intro .display { margin: 0; max-width: 11ch; }
.card--intro .tagline { margin: var(--space-sm) 0 0; color: var(--color-ink-muted-56); }
.included { list-style: none; padding: 0; margin: var(--space-xl) 0 var(--space-2xl); display: grid; gap: var(--space-sm); }
.included li { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-body); letter-spacing: var(--tracking-body); color: var(--color-ink-muted-80); }
.included .icon { width: 1.1rem; height: 1.1rem; color: var(--color-ink); stroke-width: 2.4; }
.card--rem .render { max-width: 34rem; }
.card {
  container-type: inline-size;
  padding: var(--space-2xl) var(--space-lg) 0; background: var(--color-canvas); border-radius: var(--radius-xl);
  display: flex; flex-direction: column; align-items: center; overflow: clip;
}
.card--dark { background: var(--color-surface-tile-1); color: var(--color-body-on-dark); }
.card h3 {
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-display-md);
  line-height: var(--leading-display); letter-spacing: var(--tracking-hero);
}
.card--lead h3 { font-size: var(--text-display-lg); }
.card .sub { font-family: var(--font-display); font-size: var(--text-tagline); line-height: var(--leading-lead); letter-spacing: var(--tracking-display); max-width: 26ch; margin-top: var(--space-xs); text-wrap: balance; }
.card--lead .sub { font-size: var(--text-lead); max-width: 30ch; }
.card--dark .sub { color: var(--color-body-muted-on-dark); }
/* One quiet text link per card instead of two pills */
.more {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: var(--target-min); margin-top: var(--space-xs);
  padding: 0 var(--space-xs); border-radius: var(--radius-xs);
  font-size: var(--text-body); letter-spacing: var(--tracking-body); color: var(--color-primary);
}
.more .icon { width: 0.9em; height: 0.9em; stroke-width: 2.4; transition: transform var(--duration-fast) var(--ease-out); }
.on-dark .more { color: var(--color-primary-on-dark); }
/* Renders fill most of the tile and run out of its bottom edge, like an Apple product tile.
   Type scales with the tile (cqi), so the render keeps its proportions at every width. */
.card .more { margin-bottom: var(--space-2xl); }
.card .render {
  width: 85%; margin: auto auto calc(var(--card-crop) * -1);
  font-size: clamp(var(--render-fs), 2.3cqi, var(--text-body));
}
.card--lead .render { font-size: clamp(var(--render-fs), 1.3cqi, var(--text-body)); }
.card--lead { --card-crop: 2.2em; }
.card .win, .card .sync, .card .notif-stack { max-width: none; }
.render { font-size: var(--render-fs); text-align: left; width: 100%; color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* Booking types window */
.win { background: var(--color-canvas); border-radius: 1em; box-shadow: var(--shadow-product); overflow: hidden; max-width: 40em; margin: 0 auto; }
.win-top { display: flex; align-items: center; gap: 0.45em; padding: 0.8em 1em; background: var(--color-canvas-parchment); border-bottom: 1px solid var(--color-hairline-alpha); }
.win-top i { width: 0.75em; height: 0.75em; border-radius: 50%; background: var(--color-hairline); }
.win-top span { margin-left: 0.6em; font-size: 0.9em; color: var(--color-ink-muted-56); }
.win-body { padding: 1.3em 1.4em 1.4em; }
.linkrow { display: flex; align-items: center; gap: 0.6em; padding: 0.7em 0.9em; border-radius: 0.7em; background: var(--color-canvas-parchment); }
.linkrow .icon { color: var(--color-ink-muted-56); }
.linkrow b { font-weight: var(--weight-semibold); }
.chip { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35em 0.8em; border-radius: var(--radius-pill); background: var(--render-chip-bg); color: var(--color-primary); font-size: 0.85em; font-weight: var(--weight-semibold); white-space: nowrap; }
.chip .icon { width: 0.95em; height: 0.95em; color: inherit; }
.types { margin-top: 0.9em; }
.type { display: flex; align-items: center; gap: 0.9em; padding: 0.85em 0.2em; border-top: 1px solid var(--color-hairline-alpha); }
.type:first-child { border-top: 0; }
.type-ico { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 0.7em; background: var(--render-chip-bg); color: var(--color-primary); flex: none; }
.type b { display: block; font-weight: var(--weight-semibold); }
.type small { display: block; color: var(--color-ink-muted-56); font-size: 0.85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.type > div { min-width: 0; }
.toggle { margin-left: auto; flex: none; width: 2.6em; height: 1.55em; border-radius: var(--radius-pill); background: var(--color-primary); position: relative; }
.toggle::after { content: ""; position: absolute; top: 0.15em; right: 0.15em; width: 1.25em; height: 1.25em; border-radius: 50%; background: var(--color-canvas); }
.type--add { color: var(--color-primary); font-weight: var(--weight-semibold); }
/* Lead tile: when the tile is wide, the window shows the list and a preview of the picked booking page */
.type.is-sel { background: var(--color-canvas-parchment); border-radius: 0.7em; margin-inline: -0.5em; padding-inline: 0.7em; border-top-color: transparent; }
.type.is-sel + .type { border-top-color: transparent; }
.preview { display: none; }
@container (min-width: 760px) {
  .split { display: grid; grid-template-columns: 1.35fr 1fr; }
  .preview { display: block; padding: 1.3em 1.4em 1.4em; background: var(--color-canvas-parchment); }
}
.preview-url { display: flex; align-items: center; justify-content: center; gap: 0.4em; margin-bottom: 0.8em; font-size: 0.85em; color: var(--color-ink-muted-56); }
.preview-url .icon { width: 0.9em; height: 0.9em; }
.preview-page { background: var(--color-canvas); border-radius: 0.9em; padding: 1.1em 1.1em 0.4em; box-shadow: inset 0 0 0 1px var(--color-hairline-alpha); }
.preview-page .btype { margin: 0.8em 0 0.9em; }
.type--add .type-ico { background: transparent; box-shadow: inset 0 0 0 1px var(--color-primary); }

/* Sync render */
.sync { display: grid; gap: 0.9em; max-width: 24em; margin: 0 auto; }
.panel { background: var(--color-canvas); color: var(--color-ink); border-radius: 1em; padding: 1em 1.1em; box-shadow: var(--shadow-product); }
.panel-head { display: flex; align-items: center; gap: 0.5em; font-size: 0.85em; color: var(--color-ink-muted-56); margin-bottom: 0.7em; }
.panel-head b { color: var(--color-ink); font-weight: var(--weight-semibold); }
.panel-head .chip { font-size: 0.95em; }
.busyline { display: flex; align-items: center; justify-content: space-between; padding: 0.6em 0.8em; border-radius: 0.6em; background: var(--color-canvas-parchment); box-shadow: inset 0 0 0 1px var(--color-hairline); color: var(--color-ink-muted-80); font-size: 0.95em; }
.busyline b { font-weight: var(--weight-semibold); }
.slotgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4em; }
.slotgrid > span { text-align: center; padding: 0.5em 0; border-radius: 0.55em; font-weight: var(--weight-semibold); font-size: 0.95em; color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
/* The struck cell has a fixed height. Chips and label sit on top of it absolutely, so nothing reflows. */
.slotgrid > .struck { padding: 0; box-shadow: none; }
.struck { position: relative; grid-column: 1 / -1; height: 2.6em; border-radius: 0.55em; background: var(--color-canvas-parchment); }
.struck .chip-slot, .struck .gone { position: absolute; top: 0; bottom: 0; display: grid; place-items: center; border-radius: 0.55em; }
.struck .chip-slot { width: calc(50% - 0.2em); font-weight: var(--weight-semibold); font-size: 0.95em; color: var(--color-primary); background: var(--color-canvas); box-shadow: inset 0 0 0 1px var(--color-primary); opacity: 0; }
.struck .chip-slot + .chip-slot { right: 0; }
.struck .gone { inset: 0; padding: 0 0.8em; text-align: center; color: var(--color-ink-muted-56); font-size: 0.85em; line-height: var(--leading-caption); }

/* Sync playback, shared by the card and the proof tile: busy time drops in, the open slots
   it covers fade out, then the label says why. Final state is the markup. */
@keyframes drop-in { from { opacity: 0; transform: translateY(-1.2em); } to { opacity: 1; transform: none; } }
@keyframes slot-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.9); } }
/* Off screen a render keeps its final state. Just before it scrolls into view JS arms it
   (start state, paused), and at 50% visibility it plays. */
.motion [data-play].is-armed .js-drop { animation: drop-in var(--duration-drop) var(--ease-drawer) both paused; }
.motion [data-play].is-armed .js-out { animation: slot-out var(--duration-base) var(--ease-out) var(--sync-out-at) both paused; }
.motion [data-play].is-armed .js-out + .js-out { animation-delay: calc(var(--sync-out-at) + var(--stagger)); }
.motion [data-play].is-armed .js-label { animation: fade-in var(--duration-base) var(--ease-out) var(--sync-label-at) both paused; }
.motion [data-play].is-armed .js-follow { animation: drop-in var(--duration-drop) var(--ease-drawer) var(--follow-at) both paused; }
.motion [data-play].is-play .js-drop,
.motion [data-play].is-play .js-out,
.motion [data-play].is-play .js-label,
.motion [data-play].is-play .js-follow { animation-play-state: running; }

/* Reminder render */
.notif-stack { display: grid; gap: 0.7em; max-width: 25em; margin: 0 auto; }
.notif { display: flex; gap: 0.8em; padding: 0.9em 1em; border-radius: 1.2em; background: var(--color-canvas-parchment); box-shadow: var(--shadow-product); }
.notif-ico { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 0.6em; background: var(--color-primary); color: var(--color-on-primary); flex: none; }
.notif > div { min-width: 0; flex: 1; }
.notif-meta { display: flex; justify-content: space-between; font-size: 0.8em; color: var(--color-ink-muted-56); }
.notif b { display: block; font-weight: var(--weight-semibold); font-size: 0.95em; }
.notif p { font-size: 0.9em; color: var(--color-ink-muted-80); line-height: var(--leading-caption); }
.mail { background: var(--color-canvas); border-radius: 1em; padding: 1.1em 1.2em; box-shadow: var(--shadow-product); }
.mail b { font-weight: var(--weight-semibold); }
.mail p { color: var(--color-ink-muted-80); font-size: 0.9em; margin-top: 0.2em; }
.mail-actions { display: flex; gap: 0.5em; margin-top: 0.9em; }
.mail-actions span { flex: 1; text-align: center; padding: 0.55em 0; border-radius: var(--radius-pill); font-size: 0.9em; font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 1px var(--color-primary); color: var(--color-primary); }
.mail-actions .solid { background: var(--color-primary); color: var(--color-on-primary); }

/* ---------- AI chat render ---------- */
.chat { max-width: 44em; margin: var(--space-2xl) auto 0; background: var(--color-canvas-parchment); color: var(--color-ink); border-radius: 1.1em; overflow: hidden; box-shadow: var(--shadow-product); }
.chat .win-top { background: var(--color-divider-soft); justify-content: flex-start; }
.chat .win-top span { margin: 0 auto; transform: translateX(-1.6em); font-weight: var(--weight-semibold); color: var(--color-ink-muted-80); }
.chat-body { padding: 1.6em 1.6em 1em; display: grid; gap: 1.1em; }
.msg-user { justify-self: end; max-width: 80%; background: var(--color-hairline); padding: 0.75em 1em; border-radius: 1.1em; line-height: var(--leading-caption); }
.msg-ai { max-width: 92%; line-height: var(--leading-body); display: grid; gap: 0.6em; }
.tool { display: inline-flex; align-items: center; gap: 0.5em; justify-self: start; padding: 0.4em 0.8em; border-radius: 0.6em; background: var(--color-canvas); box-shadow: inset 0 0 0 1px var(--color-hairline); font-size: 0.85em; color: var(--color-ink-muted-80); }
.tool .ok { color: var(--color-success); }
.result { display: flex; gap: 0.8em; align-items: center; padding: 0.8em 1em; border-radius: 0.8em; background: var(--color-canvas); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.result .type-ico { width: 2.3em; height: 2.3em; }
.result b { display: block; font-weight: var(--weight-semibold); }
.result small { color: var(--color-ink-muted-56); font-size: 0.85em; }
/* Chat playback. Every message keeps its space from the start, so the window never changes size.
   Only opacity and transform animate. Without JS or with reduced motion, the final state shows. */
.msg-ai { position: relative; }
.chat-dots { display: inline-flex; opacity: 0; pointer-events: none; position: absolute; left: 0; top: 0; gap: 0.3em; padding: 0.75em 0.9em; border-radius: 1.1em; background: var(--color-canvas); box-shadow: inset 0 0 0 1px var(--color-hairline); }
.chat-dots i { width: 0.45em; height: 0.45em; border-radius: var(--radius-pill); background: var(--color-ink-muted-56); animation: chat-blink var(--chat-dot-cycle) ease-in-out infinite; }
.chat-dots i:nth-child(2) { animation-delay: calc(var(--chat-dot-cycle) / 6); }
.chat-dots i:nth-child(3) { animation-delay: calc(var(--chat-dot-cycle) / 3); }
@keyframes chat-blink { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.chat-anim [data-beat] { opacity: 0; transform: translateY(0.6em); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.chat-anim [data-beat].on { opacity: 1; transform: none; }
.chat-anim .chat-dots.off { opacity: 0; transform: none; }
/* Replay and the MCP note share one line. The button keeps its space and only toggles visibility. */
.ai-foot { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); max-width: calc(44 * var(--render-fs)); margin: var(--space-sm) auto 0; text-align: center; }
.composer { display: flex; align-items: center; margin: 0.4em 1.2em 1.2em; padding: 0.75em 0.75em 0.75em 1.1em; border-radius: 1.1em; background: var(--color-canvas); box-shadow: inset 0 0 0 1px var(--color-hairline); color: var(--color-ink-muted-56); }
.composer i { margin-left: auto; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--color-ink); color: var(--color-body-on-dark); }
.mcp-note { flex: 0 1 auto; margin: 0; font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-body-muted-on-dark); }

/* ---------- How it works: tabs ---------- */
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xs); max-width: 24rem; margin: var(--space-2xl) auto 0; padding: var(--space-2xs); background: var(--color-canvas-parchment); border-radius: var(--radius-lg); }
@media (min-width: 834px) { .tabs { display: inline-flex; max-width: none; border-radius: var(--radius-pill); } }
.tab {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--target-min); padding: 0 var(--space-md); border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-ink-muted-80); font: inherit; font-size: var(--text-caption); letter-spacing: var(--tracking-caption);
  cursor: pointer; white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out);
}
@media (min-width: 834px) { .tab { border-radius: var(--radius-pill); padding: 0 var(--space-lg); } }
.tab:active { transform: scale(var(--press-scale)); }
.tab[aria-selected="true"] { background: var(--color-ink); color: var(--color-body-on-dark); }
.tab .n { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: var(--text-fine); box-shadow: inset 0 0 0 1px currentColor; }
.panels { display: grid; margin-top: var(--space-xl); }
/* Outgoing panel fades in 200ms, incoming in 320ms */
.tabpanel {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: scale(0.985);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-none) linear var(--duration-fast);
}
.tabpanel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
/* Every step has the same caption space and window height: the tallest step sets it, nothing moves on switch */
.tabpanel { display: flex; flex-direction: column; }
.tabpanel .caption { max-width: 34ch; min-height: calc(3em * var(--leading-body)); margin: 0 auto; color: var(--color-ink-muted-80); }
.tabpanel .render { margin-top: var(--space-xl); flex: 1; display: flex; }
.tabpanel .step-win { width: 100%; display: flex; flex-direction: column; }
.tabpanel .step-win .win-body { flex: 1; }
@media (min-width: 834px) { .tabpanel .render { font-size: var(--text-tagline); } }
/* The step window is the product shot of this tile: about 880px on desktop */
.step-win { max-width: min(100%, var(--step-win-max)); }
.step-win .win-body { min-height: 19em; padding: 1.6em 1.8em 1.8em; }

/* Tab 4 plays each time it is picked: the tick pops, then title, card and actions rise */
@keyframes pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes rise-sm { from { opacity: 0; transform: translateY(0.5em); } to { opacity: 1; transform: none; } }
.motion .tabpanel.is-play .confirm-ico { animation: pop var(--duration-pop) var(--ease-pop) var(--tab-pop-at) both; }
.motion .tabpanel.is-play .js-rise { animation: rise-sm var(--duration-base) var(--ease-out) calc(var(--tab-rise-at) + var(--i) * var(--stagger)) both; }
.step-title { font-size: 1.25em; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caption); margin-bottom: 0.2em; }
.step-sub { color: var(--color-ink-muted-56); font-size: 0.9em; margin-bottom: 1.1em; }
.cal-row { display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1em; border-radius: 0.8em; box-shadow: inset 0 0 0 1px var(--color-hairline); margin-bottom: 0.6em; }
.cal-row .type-ico { width: 2.4em; height: 2.4em; }
.cal-row b { display: block; font-weight: var(--weight-semibold); }
.cal-row small { color: var(--color-ink-muted-56); font-size: 0.85em; }
.ok-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3em; color: var(--color-success); font-size: 0.85em; font-weight: var(--weight-semibold); }
.hours-row { display: grid; grid-template-columns: 3em 2.6em 1fr; align-items: center; gap: 0.8em; padding: 0.5em 0; border-top: 1px solid var(--color-hairline-alpha); }
.hours-row:first-of-type { border-top: 0; }
.hours-row b { font-weight: var(--weight-semibold); }
.hours-row .toggle { margin: 0; }
.hours-row .off { background: var(--color-hairline); }
.hours-row .off::after { right: auto; left: 0.15em; }
.hours-row .t { display: flex; gap: 0.4em; align-items: center; color: var(--color-ink-muted-56); }
.hours-row .t span { padding: 0.3em 0.6em; border-radius: 0.45em; background: var(--color-canvas-parchment); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.share-link { display: flex; align-items: center; gap: 0.6em; padding: 0.9em 1em; border-radius: 0.8em; box-shadow: inset 0 0 0 1px var(--color-primary); font-size: 1.1em; }
.share-link b { font-weight: var(--weight-semibold); }
.share-link .chip { font-size: 0.8em; }
.share-list { margin-top: 1em; display: grid; gap: 0.5em; }
.share-list span { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6em 0.9em; border-radius: 0.6em; background: var(--color-canvas-parchment); font-size: 0.95em; }
.share-list small { color: var(--color-ink-muted-56); }
.confirm-ico { display: grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--color-success); color: var(--color-on-primary); margin-bottom: 0.9em; }
.confirm-ico .icon { width: 1.5em; height: 1.5em; stroke-width: 2.5; }
.confirm-card { padding: 0.9em 1em; border-radius: 0.8em; background: var(--color-canvas-parchment); line-height: var(--leading-caption); }
.confirm-card b { font-weight: var(--weight-semibold); }

/* ---------- Proof ---------- */
/* The one left-aligned tile: copy in the left 5/12, a live sync render in the right 7/12
   that runs off the right edge. Phones stack it. */
.numeral { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-numeral); line-height: 0.9; letter-spacing: var(--tracking-hero); font-variant-numeric: tabular-nums; }
.proof { text-align: left; }
.proof-grid { display: grid; gap: var(--space-2xl); max-width: var(--container-wide); margin: 0 auto; }
.proof .numeral { margin-left: -0.04em; }
.proof .display { margin: var(--space-xs) 0 0; max-width: 12ch; }
.proof .tagline { margin: var(--space-sm) 0 0; max-width: 28ch; }
.facts { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-2xs); font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-body-muted-on-dark); }
.facts li { display: flex; align-items: center; gap: var(--space-xs); }
.facts .icon { color: var(--color-success-on-dark); width: 1em; height: 1em; }
@media (min-width: 834px) {
  .proof-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: var(--space-xl); }
  .proof-copy { grid-column: 1 / span 5; }
  .proof-render { grid-column: 6 / -1; }
}
.proof-render { font-size: clamp(var(--render-fs), 0.4rem + 0.6vw, 1rem); }
.sync-stage { display: flex; align-items: flex-start; gap: 1.2em; width: max-content; }
.bookcard { width: 15em; flex: none; background: var(--color-canvas); color: var(--color-ink); border-radius: 1em; padding: 1.1em 1em 1em; box-shadow: var(--shadow-product); }
.bookcard .who { gap: 0.6em; margin-bottom: 0.9em; }
.bookcard .who .avatar { width: 2.4em; height: 2.4em; font-size: 0.85em; }
.bookcard .who b { font-size: 1em; }
.bookcard .who > div > span { font-size: 0.8em; }
.bookcard .label { font-size: 0.8em; margin-bottom: 0.5em; }
.slotlist { display: grid; gap: 0.4em; }
.slotlist > span { display: grid; place-items: center; height: 2.3em; border-radius: 0.55em; font-weight: var(--weight-semibold); font-size: 0.95em; color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.slotlist > .struck { height: 4.77em; font-size: 1em; box-shadow: none; }
.struck--v .chip-slot { width: auto; left: 0; right: 0; height: calc(50% - 0.2em); }
.struck--v .chip-slot + .chip-slot { top: auto; bottom: 0; }
.struck--v .chip-slot:first-child { bottom: auto; }
.struck--v .gone { align-content: center; font-weight: var(--weight-semibold); color: var(--color-ink-muted-80); gap: 0.15em; }
.struck--v .gone small { display: block; font-weight: var(--weight-regular); color: var(--color-ink-muted-56); }
.gcal { width: 46em; flex: none; max-width: none; margin: 0; }
.gcal .win-top img { width: 1.2em; height: 1.2em; margin-left: 0.6em; }
.gcal .win-top span { margin-left: 0.4em; }
.week--g { --hour: 3.6em; grid-template-columns: 3.4em repeat(4, 1fr); grid-template-rows: auto calc(6 * var(--hour)); }
.ev--block { background: var(--color-ink); color: var(--color-body-on-dark); }

/* ---------- Reminders (homepage #reminders) ----------
   Same left-aligned split as the proof tile. The render tells one story: the reminder lands on
   Lena's phone, she taps Reschedule, and on Sarah's calendar the session moves from Tue 15:00 to
   Thu 11:00. The markup is the end state. Every moving piece is absolutely placed or keeps its
   space, so nothing resizes. Only transform and opacity animate, once. */
:root {
  --text-rem-time: clamp(6rem, 3.5rem + 8vw, 11rem);
  --rem-banner-out-at: 1100ms;   /* the banner is tapped and gives way to the email */
  --rem-mail-at: 1150ms;         /* email rows rise, one stagger apart */
  --rem-press-at: 2000ms;        /* Reschedule is pressed */
  --rem-move-at: 2400ms;         /* the session leaves Tue 15:00 and the phone confirms */
  --rem-ghost-at: 2550ms;        /* the old slot shows as an outline */
  --rem-land-at: 3000ms;         /* it lands on Thu 11:00 and turns solid */
  --rem-tag-at: 3150ms;          /* then "Moved by Lena" */
  --duration-move: 700ms;
  --duration-tap: 450ms;
}
.rem-time {
  margin: 0; font-family: var(--font-display); font-weight: var(--weight-light);
  font-size: var(--text-rem-time); line-height: 0.9; letter-spacing: var(--tracking-hero); font-variant-numeric: tabular-nums;
}
.rem-grid .display { max-width: 15ch; }
/* Between tablet and 1200px the split leaves too little room for the calendar, so the render sits under the copy */
@media (min-width: 834px) and (max-width: 1199.98px) {
  .rem-grid .proof-copy, .rem-grid .proof-render { grid-column: 1 / -1; }
}
/* Phones: the phone sits above the calendar. From 640px they stand side by side. */
.rem-stage { display: grid; gap: 1.5em; justify-items: start; width: max-content; }
@media (min-width: 640px) { .rem-stage { display: flex; align-items: flex-start; } }
.rem-phone { width: 16em; flex: none; }
.rem-phone .phone-frame { border-radius: 2.7em; }
.rem-screen { height: 29.8em; padding: 0 1.1em; border-radius: 2.2em; }
.rem-screen .island { width: 5.4em; height: 1.6em; }
.rem-bar { display: flex; align-items: center; gap: 0.1em; height: 2.2em; margin-left: -0.3em; color: var(--color-primary); font-size: 0.95em; }
.rem-bar .icon { transform: scaleX(-1); }
.rem-mail { display: grid; gap: 0.8em; }
.rem-from { display: flex; align-items: center; gap: 0.6em; padding-bottom: 0.8em; border-bottom: 1px solid var(--color-hairline-alpha); }
.rem-from .avatar { width: 2.3em; height: 2.3em; }
.rem-from b { display: block; font-size: 0.85em; font-weight: var(--weight-semibold); line-height: var(--leading-caption); }
.rem-from small { display: block; font-size: 0.78em; color: var(--color-ink-muted-56); }
.rem-subject { display: block; font-size: 1.1em; font-weight: var(--weight-semibold); line-height: var(--leading-lead); letter-spacing: var(--tracking-caption); }
.rem-when { display: flex; align-items: center; gap: 0.6em; padding: 0.65em 0.8em; border-radius: 0.7em; background: var(--color-canvas-parchment); font-size: 0.9em; }
.rem-when .icon { color: var(--color-primary); }
.rem-when b, .rem-when span { display: block; }
.rem-when b { font-weight: var(--weight-semibold); }
.rem-when span { font-size: 0.92em; color: var(--color-ink-muted-80); }
.rem-mail .mail-actions { margin-top: 0.1em; }
.rem-press { position: relative; overflow: hidden; }
.rem-tap { position: absolute; left: 50%; top: 50%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: var(--color-canvas); opacity: 0; }
.rem-help { margin-top: -0.3em; font-size: 0.78em; text-align: center; color: var(--color-ink-muted-56); }
/* The notification is only seen while it plays. At rest the open email shows. */
.rem-banner { position: absolute; z-index: 1; top: 3.3em; left: 0.5em; right: 0.5em; gap: 0.6em; padding: 0.7em 0.8em; border-radius: 1.1em; opacity: 0; }
.rem-banner .notif-ico { width: 2.1em; height: 2.1em; }
.rem-done { position: absolute; left: 0.8em; right: 0.8em; bottom: 1.4em; display: flex; align-items: center; gap: 0.6em; padding: 0.65em 0.8em; border-radius: 0.9em; background: var(--color-ink); color: var(--color-body-on-dark); }
.rem-done-ico { display: grid; place-items: center; flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--color-success-on-dark); color: var(--color-ink); }
.rem-done-ico .icon { width: 1.1em; height: 1.1em; stroke-width: 3; color: var(--color-ink); }
.rem-done b { display: block; font-size: 0.9em; font-weight: var(--weight-semibold); }
.rem-done span { display: block; font-size: 0.8em; color: var(--color-body-muted-on-dark); }
/* Sarah's week. Fixed column width, so the move is an exact distance: two columns left, four hours down. */
.rem-cal { width: 39.4em; flex: none; max-width: none; margin: 0; }
/* Stacked on a phone, the calendar waits until 90% of its height is on screen, so the slot it
   leaves (Tue 15:00, near its bottom) is in view. Side by side it starts at 50% with the phone. */
.rem-cal { --play-at: 0.9; }
@media (min-width: 640px) { .rem-cal { --play-at: 0.5; } }
.rem-cal .win-top img { width: 1.2em; height: 1.2em; margin-left: 0.6em; }
.rem-cal .win-top span { margin-left: 0.4em; }
.rem-week { --hour: 4.2em; --rem-col: 9em; grid-template-columns: 3.4em repeat(4, var(--rem-col)); grid-template-rows: auto calc(6 * var(--hour)); }
.rem-ghost { background: none; border: 1px dashed var(--color-primary); }
.rem-moved { padding: 0; background: none; }
.rem-face { position: absolute; inset: 0; padding: 0.35em 0.55em; border-radius: inherit; background: var(--ghost-hover); color: var(--color-primary); }
.rem-face--new { background: var(--color-primary); color: var(--color-on-primary); }
.rem-tag {
  position: absolute; left: 0.55em; bottom: 0.45em; padding: 0.15em 0.55em; border-radius: var(--radius-pill);
  background: var(--color-canvas); color: var(--color-primary); font-size: 0.72em; font-weight: var(--weight-semibold); white-space: nowrap; transform-origin: left center;
}
/* Playback, on the same arm and play-at-50% system as the other renders. Phone and calendar each
   carry data-play: side by side they start together; stacked on a phone, the calendar starts when
   it is half on screen, never before the phone, so the move always follows the tap. */
@keyframes rem-banner-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-0.8em) scale(0.97); } }
@keyframes rem-rise { from { opacity: 0; transform: translateY(0.8em); } to { opacity: 1; transform: none; } }
@keyframes rem-tap { 0% { opacity: 0; transform: scale(0.4); } 35% { opacity: 0.35; } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes rem-move { from { transform: translate(calc(var(--rem-col) * -2), calc(var(--hour) * 4)); } to { transform: none; } }
@keyframes rem-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
.motion .rem-phone.is-armed .rem-banner { animation: drop-in var(--duration-drop) var(--ease-drawer) both paused, rem-banner-out var(--duration-fast) var(--ease-out) var(--rem-banner-out-at) forwards paused; }
.motion .rem-phone.is-armed .rem-in { animation: rem-rise var(--duration-base) var(--ease-out) calc(var(--rem-mail-at) + var(--i) * var(--stagger)) both paused; }
.motion .rem-phone.is-armed .rem-press { animation: press var(--duration-base) var(--ease-out) var(--rem-press-at) both paused; }
.motion .rem-phone.is-armed .rem-tap { animation: rem-tap var(--duration-tap) var(--ease-out) var(--rem-press-at) both paused; }
.motion .rem-phone.is-armed .rem-done { animation: rem-rise var(--duration-base) var(--ease-out) var(--rem-move-at) both paused; }
.motion .rem-cal.is-armed .rem-moved { animation: rem-move var(--duration-move) var(--ease-in-out) var(--rem-move-at) both paused; }
.motion .rem-cal.is-armed .rem-ghost { animation: fade-in var(--duration-base) var(--ease-out) var(--rem-ghost-at) both paused; }
.motion .rem-cal.is-armed .rem-face--new { animation: fade-in var(--duration-fast) var(--ease-out) var(--rem-land-at) both paused; }
.motion .rem-cal.is-armed .rem-tag { animation: rem-pop var(--duration-base) var(--ease-out) var(--rem-tag-at) both paused; }
.motion .rem-phone.is-play .rem-banner,
.motion .rem-phone.is-play .rem-in,
.motion .rem-phone.is-play .rem-press,
.motion .rem-phone.is-play .rem-tap,
.motion .rem-phone.is-play .rem-done,
.motion .rem-cal.is-play .rem-moved,
.motion .rem-cal.is-play .rem-ghost,
.motion .rem-cal.is-play .rem-face--new,
.motion .rem-cal.is-play .rem-tag { animation-play-state: running; }

/* ---------- Compare ---------- */
.compare { max-width: 46rem; margin: var(--space-2xl) auto 0; background: var(--color-canvas); border-radius: var(--radius-lg); border: 1px solid var(--color-hairline-alpha); text-align: left; overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--text-caption); letter-spacing: var(--tracking-caption); }
@media (min-width: 640px) { .compare table { font-size: var(--text-body); letter-spacing: var(--tracking-body); } }
.compare th, .compare td { padding: var(--space-md) var(--space-sm); border-top: 1px solid var(--color-hairline-alpha); vertical-align: top; }
@media (min-width: 640px) { .compare th, .compare td { padding: var(--space-md) var(--space-lg); } }
.compare thead th { border-top: 0; font-weight: var(--weight-semibold); color: var(--color-ink-muted-56); font-size: var(--text-caption); }
.compare thead th.us { color: var(--color-ink); }
.compare tbody th { font-weight: var(--weight-regular); color: var(--color-ink-muted-80); }
.compare th, .compare td { width: 33.33%; }
.compare td.us { font-weight: var(--weight-semibold); color: var(--color-ink); background: var(--color-surface-pearl); }
.compare thead th.us { background: var(--color-surface-pearl); }
.compare td.them { color: var(--color-ink-muted-56); }
.promise { max-width: 46rem; margin: var(--space-lg) auto 0; font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-ink); }
.source { max-width: min(46rem, 75ch); margin: var(--space-md) auto 0; font-size: var(--text-fine); color: var(--color-ink-muted-56); letter-spacing: 0; line-height: var(--leading-caption); }

/* ---------- Integrations ---------- */
.integrations { display: grid; gap: var(--space-sm); max-width: var(--container-wide); margin: var(--space-2xl) auto 0; text-align: left; }
@media (min-width: 834px) { .integrations { grid-template-columns: 1.5fr 1fr; } }
.integ { background: var(--color-canvas-parchment); border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; }
.cal-logo { width: 2.3em; height: 2.3em; flex: none; }
.integ-logo { width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-sm); }
.integ .type-ico { font-size: var(--text-body); width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); margin-bottom: var(--space-sm); }
.integ .type-ico .icon { width: 1.35rem; height: 1.35rem; }
.integ h3 { font-family: var(--font-display); font-size: var(--text-tagline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); }
.integ p { color: var(--color-ink-muted-80); }
.integ--lead h3 { font-size: var(--text-display-md); line-height: var(--leading-display); }
.integ .tag { justify-self: start; font-size: var(--text-fine); letter-spacing: 0; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: var(--color-canvas); color: var(--color-ink-muted-80); }

/* ---------- Closing ---------- */
.closing { padding-top: var(--space-section); padding-bottom: var(--space-section); }

/* ---------- Footer ---------- */
.foot { background: var(--color-canvas-parchment); color: var(--color-ink-muted-80); padding: var(--space-3xl) var(--space-lg) var(--space-2xl); }
.foot-inner { max-width: var(--container-text); margin: 0 auto; }
.foot-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-hairline); }
.foot-brand img { width: var(--logo-lockup-w); height: auto; }
.foot-brand p { font-size: var(--text-caption); color: var(--color-ink-muted-56); }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-md); padding: var(--space-lg) 0; }
@media (min-width: 834px) { .foot-cols { grid-template-columns: repeat(4, 1fr); } }
.foot h2 { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-ink); letter-spacing: var(--tracking-caption); margin-bottom: var(--space-2xs); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a { display: flex; align-items: center; min-height: var(--target-min); font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-ink-muted-80); border-radius: var(--radius-xs); overflow-wrap: anywhere; }
/* The rule spans the full footer width like the one under the brand row; only the text keeps a reading measure */
.legal { padding-top: var(--space-md); border-top: 1px solid var(--color-hairline); }
.legal p { max-width: 75ch; font-size: var(--text-fine); letter-spacing: 0; color: var(--color-ink-muted-56); line-height: var(--leading-caption); }
/* ---------- Hover: only where a real pointer hovers, so taps on iOS never stick ---------- */
@media (hover: hover) and (pointer: fine) {
  .gnav-links a:hover, .gnav-login:hover { color: var(--color-body-on-dark); }
  .gnav-cta:hover span { background: var(--color-primary-focus); }
  .gnav-menu:hover { color: var(--color-body-muted-on-dark); }
  .gnav-panel a:hover { color: var(--color-body-muted-on-dark); }
  .btn--primary:hover { background: var(--color-primary-focus); }
  .btn--ghost:hover { background: var(--ghost-hover); }
  .on-dark .btn--ghost:hover { background: var(--color-canvas-parchment); color: var(--color-ink); }
  .fineprint a:hover { text-decoration: underline; }
  .more:hover { text-decoration: underline; }
  .more:hover .icon { transform: translateX(0.15em); }
  .tab:hover { background: var(--color-hairline); color: var(--color-ink); }
  .tab[aria-selected="true"]:hover { background: var(--color-ink); color: var(--color-body-on-dark); }
  .foot li a:hover { color: var(--color-primary); text-decoration: underline; }
}