/* Guester · Meet Claire — a scroll-driven introduction.
   Two fixed layers (the particle stage and the workspace device) are moved by
   meet-claire.js; the sections below only supply scroll length and copy.
   Everything that moves is gated on html.js-motion, so a page without JS or
   with reduced motion falls back to a readable stack of end-states. */

:root {
  --mc-ink: #161719;
  --mc-paper: #fff;
  --mc-surface: #f4f5f6;
  --mc-muted: #60646b;
  --mc-line: #dfe1e4;
  --mc-line-strong: #80868f;
  --mc-inverse-muted: #b5b8bf;
  --mc-warn: #8a6a12;
  --mc-ease: cubic-bezier(.16, 1, .3, 1);
  --mc-radius: 16px;
  --mc-fs-micro: 11px;
  --mc-fs-small: 12px;
  --mc-fs-control: 13px;
  /* Written by the controller: 0 on paper, 1 on ink. */
  --mc-dark: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body.mc {
  margin: 0;
  background: var(--mc-paper);
  color: var(--mc-ink);
  font-family: Satoshi, 'Satoshi Fallback', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mc-skip {
  position: fixed; top: 8px; left: 8px; z-index: 90;
  padding: 10px 16px; border-radius: 999px;
  background: var(--mc-ink); color: #fff; font-size: var(--mc-fs-control);
  text-decoration: none; transform: translateY(-200%);
}
.mc-skip:focus-visible { transform: none; }

/* ---------- the ground, which turns to ink for the finale ---------- */

.mc-ground {
  position: fixed; inset: 0; z-index: 0;
  background: var(--mc-ink);
  opacity: var(--mc-dark);
  pointer-events: none;
}

/* ---------- chrome ---------- */

.mc-chrome {
  position: fixed; z-index: 40; inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 24px clamp(20px, 4vw, 48px);
  opacity: 0; transition: opacity .6s var(--mc-ease);
  pointer-events: none;
}
.mc-chrome.is-in { opacity: 1; pointer-events: auto; }
.mc-chrome img { display: block; width: 132px; height: auto; }
.mc-brand, .mc-cta { color: inherit; text-decoration: none; }
.mc-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--mc-line-strong);
  font-size: var(--mc-fs-control); white-space: nowrap;
}
.mc-cta:hover { background: var(--mc-ink); color: var(--mc-paper); border-color: var(--mc-ink); }

/* On ink the chrome inverts with the ground. */
.mc-chrome { color: color-mix(in srgb, var(--mc-paper) calc(var(--mc-dark) * 100%), var(--mc-ink)); }
.mc-chrome img { filter: invert(var(--mc-dark)); }
.mc-cta { border-color: color-mix(in srgb, var(--mc-inverse-muted) calc(var(--mc-dark) * 100%), var(--mc-line-strong)); }

/* ---------- the particle stage ---------- */

.mc-stage {
  position: fixed; inset: 0; z-index: 20;
  pointer-events: none;
}
.mc-stage canvas { display: block; }
/* The ring the engine draws needs no transform, so the canvas layer is
   rasterised once and simply repainted. */
/* The static end-state, shown until the canvas is ready and whenever it cannot run. */
.mc-stage-fallback {
  position: absolute; left: 50%; top: 50%;
  width: min(46vw, 46vh); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: currentColor;
  -webkit-mask: var(--mc-ring) center / contain no-repeat;
  mask: var(--mc-ring) center / contain no-repeat;
  color: #171717;
}
.mc-stage.is-ready .mc-stage-fallback { display: none; }

/* ---------- the workspace device ---------- */

.mc-device {
  position: fixed; z-index: 10;
  left: 50%; top: 50%;
  width: min(1020px, 63vw);
  aspect-ratio: 1425 / 990;
  /* The controller writes --mc-device-x; on wide screens the device lives in the
     right-hand column and the copy keeps the left. */
  --mc-device-x: 17vw;
  transform: translate(-50%, -50%);
  border-radius: clamp(10px, 1.1vw, 18px);
  background: var(--mc-paper);
  border: 1px solid var(--mc-line);
  box-shadow: 0 40px 120px rgba(22, 23, 25, .16), 0 4px 16px rgba(22, 23, 25, .06);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.mc-device-inner { position: absolute; inset: 0; }

.mc-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* The exact seat of the Claire button in panel-overview-desktop.webp. */
.mc-claire-slot {
  position: absolute;
  left: 83.93%; top: 3.64%;
  width: 2.28%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

/* The work surface that covers the screenshot while Claire is busy. */
.mc-work {
  position: absolute; inset: 0 min(41%, 480px) 0 0;
  background: var(--mc-surface);
  padding: clamp(20px, 3.4%, 48px);
  display: grid; align-content: start; gap: clamp(12px, 1.8%, 24px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--mc-ease), visibility .5s;
}
.mc-device[data-phase="sweep"] .mc-work--sweep,
.mc-device[data-phase="correct"] .mc-work--correct { opacity: 1; visibility: visible; }

.mc-work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mc-work-title { margin: 0; font-size: clamp(15px, 1.5vw, 21px); font-weight: 500; letter-spacing: -.01em; }
.mc-work-note { margin: 0; font-size: var(--mc-fs-small); color: var(--mc-muted); font-variant-numeric: tabular-nums; }

/* ---------- scene 5: the channel sweep ---------- */

.mc-rows { display: grid; gap: 8px; }
.mc-row {
  display: grid; grid-template-columns: 1fr auto auto auto; align-items: center;
  gap: clamp(10px, 2vw, 28px);
  padding: clamp(9px, 1.5%, 16px) clamp(12px, 2%, 20px);
  border: 1px solid var(--mc-line); border-radius: 10px;
  background: var(--mc-paper);
  font-size: clamp(11px, 1.05vw, 14px);
  opacity: .38;
  transition: opacity .35s var(--mc-ease), border-color .35s var(--mc-ease), box-shadow .35s var(--mc-ease);
}
.mc-row.is-read { opacity: 1; }
.mc-row.is-reading { opacity: 1; border-color: var(--mc-ink); box-shadow: 0 6px 20px rgba(22, 23, 25, .1); }
.mc-row-name { font-weight: 500; }
.mc-row-rate, .mc-row-free { font-variant-numeric: tabular-nums; }
.mc-row-free { color: var(--mc-muted); }
.mc-row-state {
  justify-self: end; min-width: 68px; text-align: right;
  font-size: var(--mc-fs-micro); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mc-muted);
}
.mc-row.is-reading .mc-row-state { color: var(--mc-ink); }

/* ---------- scene 6: the rate calendar ---------- */

.mc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(6px, 1vw, 12px); align-items: end; }
.mc-day { display: grid; gap: 8px; justify-items: center; }
.mc-day-rate {
  font-size: clamp(12px, 1.15vw, 16px); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: color .4s var(--mc-ease);
}
.mc-bar {
  width: 100%; border-radius: 6px 6px 0 0;
  background: var(--mc-line-strong);
  height: 12px;
  transition: height .7s var(--mc-ease), background-color .5s var(--mc-ease);
}
.mc-day[data-state="high"] .mc-bar, .mc-day[data-state="low"] .mc-bar { background: var(--mc-warn); }
.mc-day[data-state="optimal"] .mc-bar { background: var(--mc-ink); }
.mc-day-label { font-size: var(--mc-fs-micro); color: var(--mc-muted); letter-spacing: .06em; text-transform: uppercase; }
.mc-day-flag {
  font-size: var(--mc-fs-micro); letter-spacing: .07em; text-transform: uppercase;
  color: var(--mc-muted); transition: color .4s var(--mc-ease);
}
.mc-day[data-state="high"] .mc-day-flag, .mc-day[data-state="low"] .mc-day-flag { color: var(--mc-warn); }
.mc-cal-foot { display: flex; justify-content: space-between; gap: 16px; font-size: var(--mc-fs-small); color: var(--mc-muted); }
.mc-cal-foot strong { color: var(--mc-ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- the drawer ---------- */

.mc-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(41%, 480px);
  display: flex; flex-direction: column;
  background: var(--mc-paper);
  border-left: 1px solid var(--mc-line);
  box-shadow: -8px 0 32px rgb(0 0 0 / .08);
  transform: translateX(101%);
  transition: transform .8s var(--mc-ease);
}
.mc-device[data-drawer="open"] .mc-drawer { transform: none; }
.mc-scrim {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .6s var(--mc-ease);
}
/* The backdrop filter is the expensive part, so it only exists while the drawer
   is actually up rather than sitting on an invisible layer all the way down. */
.mc-device[data-drawer="open"] .mc-scrim {
  opacity: 1;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}

.mc-drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: clamp(12px, 3%, 22px) clamp(14px, 4%, 24px) clamp(8px, 2%, 14px);
}
.mc-drawer-mark { width: clamp(20px, 2.4vw, 30px); aspect-ratio: 1; flex: none; }
.mc-drawer-title { margin: 0; font-size: clamp(15px, 1.6vw, 22px); font-weight: 500; letter-spacing: -.01em; }

.mc-thread {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: clamp(10px, 2.4%, 18px);
  padding: 0 clamp(14px, 4%, 24px);
  font-size: clamp(11px, 1.05vw, 14px);
}
.mc-turn { display: grid; gap: 10px; opacity: 0; transform: translateY(8px); }
.mc-turn.is-in { opacity: 1; transform: none; transition: opacity .45s var(--mc-ease), transform .45s var(--mc-ease); }
.mc-ask {
  justify-self: end; max-width: 88%;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--mc-surface);
}
.mc-reply { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.mc-reply-mark {
  width: 24px; aspect-ratio: 1; flex: none;
  background: currentColor;
  -webkit-mask: var(--mc-ring) center / contain no-repeat;
  mask: var(--mc-ring) center / contain no-repeat;
}
.mc-reply-body { margin: 0; color: var(--mc-ink); }
.mc-reply-body.is-waiting { color: var(--mc-muted); }
.mc-caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--mc-ink); vertical-align: text-bottom;
  animation: mc-blink 1.1s steps(1, end) infinite;
}
@keyframes mc-blink { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

.mc-summary {
  margin: 4px 0 0; padding: 12px 14px;
  border: 1px solid var(--mc-line); border-radius: 12px;
  display: grid; gap: 6px;
  opacity: 0; transform: translateY(8px);
}
.mc-summary.is-in { opacity: 1; transform: none; transition: opacity .5s var(--mc-ease), transform .5s var(--mc-ease); }
html:not(.js-motion) .mc-summary { opacity: 1; transform: none; }
.mc-summary dt { font-size: var(--mc-fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--mc-muted); }
.mc-summary dd { margin: 0; font-variant-numeric: tabular-nums; }

.mc-composer {
  display: flex; align-items: center; gap: 10px;
  margin: clamp(10px, 2.4%, 18px) clamp(14px, 4%, 24px) clamp(14px, 4%, 24px);
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--mc-line); border-radius: 16px;
}
.mc-composer.is-focus { border-color: var(--mc-ink); }
.mc-composer-text { flex: 1; min-width: 0; font-size: clamp(11px, 1.05vw, 14px); color: var(--mc-ink); }
.mc-composer-text:empty::before { content: attr(data-placeholder); color: var(--mc-muted); }
.mc-send {
  flex: none; display: grid; place-items: center;
  width: clamp(28px, 3.2vw, 40px); aspect-ratio: 1; border-radius: 12px;
  background: var(--mc-ink); color: var(--mc-paper);
}
.mc-send svg { width: 55%; height: 55%; }

/* ---------- the toast ---------- */

.mc-toast {
  position: absolute; left: 50%; bottom: 6%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--mc-ink); color: var(--mc-paper);
  font-size: clamp(11px, 1.05vw, 14px);
  opacity: 0; transform: translate(-50%, 16px);
  transition: opacity .5s var(--mc-ease), transform .5s var(--mc-ease);
}
.mc-device[data-phase="done"] .mc-toast { opacity: 1; transform: translate(-50%, 0); }
.mc-toast svg { width: 16px; height: 16px; }

/* ---------- the keycaps ---------- */

.mc-keys {
  position: fixed; z-index: 30; left: 50%; top: 50%;
  display: flex; align-items: center; gap: 12px;
  transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .4s var(--mc-ease);
  pointer-events: none;
}
.mc-keys.is-in { opacity: 1; }
.mc-key {
  display: grid; place-items: center;
  min-width: clamp(56px, 6.4vw, 84px); height: clamp(56px, 6.4vw, 84px);
  padding: 0 clamp(12px, 1.6vw, 20px);
  border-radius: 14px;
  background: var(--mc-paper);
  border: 1px solid var(--mc-line);
  box-shadow: 0 6px 0 var(--mc-line), 0 14px 30px rgba(22, 23, 25, .12);
  font-size: clamp(18px, 2.2vw, 28px); font-weight: 500;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}
.mc-key.is-down { transform: translateY(6px); box-shadow: 0 0 0 var(--mc-line), 0 6px 16px rgba(22, 23, 25, .12); }
.mc-key-plus { font-size: clamp(14px, 1.6vw, 20px); color: var(--mc-muted); }

/* ---------- scenes and copy ---------- */

.mc-main { position: relative; z-index: 25; }
.mc-scene { position: relative; }
.mc-pin {
  position: sticky; top: 0;
  height: 100svh; min-height: 520px;
  display: grid; align-content: center;
  padding: clamp(72px, 12vh, 140px) clamp(20px, 4vw, 48px);
  pointer-events: none;
}
.mc-copy { max-width: 26ch; }
.mc-copy--wide { max-width: 34ch; }
.mc-copy--centre { justify-self: center; text-align: center; max-width: 26ch; }
.mc-copy--bottom { align-self: end; }
/* The copy column stops where the device column starts. */
@media (min-width: 1024px) {
  .mc-pin { padding-right: 68vw; }
  .mc-copy--centre { justify-self: start; text-align: left; }
  .mc-scene--finale .mc-pin { padding-right: clamp(20px, 4vw, 48px); }
  .mc-scene--finale .mc-copy--centre { justify-self: center; text-align: center; }
}

.mc-eyebrow {
  margin: 0 0 14px; font-size: var(--mc-fs-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--mc-muted);
}
.mc-title {
  margin: 0; font-weight: 500; letter-spacing: -.04em; line-height: 1.04;
  font-size: clamp(2.75rem, 5.3vw, 5rem);
  text-wrap: balance;
}
.mc-title--small { font-size: clamp(1.75rem, 3.2vw, 3rem); letter-spacing: -.03em; }
.mc-lede { margin: 20px 0 0; max-width: 34ch; color: var(--mc-muted); font-size: clamp(15px, 1.25vw, 18px); }
.mc-prompt {
  margin: 20px 0 0; max-width: 40ch; font-size: clamp(14px, 1.15vw, 17px);
  color: var(--mc-ink); border-left: 2px solid var(--mc-line-strong); padding-left: 16px;
}

/* The finale sits on ink. */
.mc-scene--finale .mc-copy { color: var(--mc-paper); }
.mc-scene--finale .mc-lede { color: var(--mc-inverse-muted); }
.mc-punch { margin: 0; color: var(--mc-paper); }
.mc-finale-line { display: block; }
.mc-finale-line + .mc-finale-line { margin-top: .04em; }
.mc-scene--finale .mc-title { font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1.02; text-wrap: balance; }
.mc-scene--finale .mc-copy--centre { max-width: none; }

.mc-hint {
  position: fixed; left: 50%; bottom: 28px; z-index: 35;
  transform: translateX(-50%);
  font-size: var(--mc-fs-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mc-muted);
  opacity: 0; transition: opacity .5s var(--mc-ease);
  pointer-events: none;
}
.mc-hint.is-in { opacity: 1; }

.mc-end { position: relative; z-index: 25; padding: 0 clamp(20px, 4vw, 48px) 96px; text-align: center; }
.mc-end a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--mc-paper); color: var(--mc-ink);
  font-size: var(--mc-fs-control); text-decoration: none;
}

/* ---------- the no-motion contract ---------- */

/* Without js-motion the fixed layers never move, so they are laid out inline
   instead and every scene shows its finished state. */
html:not(.js-motion) .mc-stage,
html:not(.js-motion) .mc-device,
html:not(.js-motion) .mc-keys { position: static; transform: none; opacity: 1; }
html:not(.js-motion) .mc-stage { width: min(320px, 60vw); height: auto; aspect-ratio: 1; margin: 0 auto; inset: auto; }
html:not(.js-motion) .mc-stage-fallback { position: static; width: 100%; transform: none; }
html:not(.js-motion) .mc-device { margin: 32px auto; }
html:not(.js-motion) .mc-work { position: static; opacity: 1; visibility: visible; }
html:not(.js-motion) .mc-row { opacity: 1; }
html:not(.js-motion) .mc-drawer { position: static; width: auto; transform: none; box-shadow: none; }
html:not(.js-motion) .mc-turn { opacity: 1; transform: none; }
html:not(.js-motion) .mc-pin { position: static; height: auto; min-height: 0; }
html:not(.js-motion) .mc-chrome { position: static; opacity: 1; }
html:not(.js-motion) .mc-hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mc-caret { animation: none; }
  .mc-drawer, .mc-work, .mc-row, .mc-bar, .mc-toast, .mc-turn, .mc-chrome, .mc-keys { transition: none; }
}

/* ---------- narrow ---------- */

/* Below the two-column breakpoint the copy takes the top of the screen and the
   device sits under it, so the two never overlap. */
@media (max-width: 1023px) {
  .mc-device { width: 92vw; --mc-device-x: 0vw; top: 63%; }
  .mc-drawer { width: 62%; }
  .mc-work { inset: 0 62% 0 0; }
  .mc-pin { align-content: start; padding-top: clamp(84px, 13vh, 140px); }
  .mc-copy, .mc-copy--wide { max-width: 26ch; }
  .mc-copy--centre { justify-self: start; text-align: left; }
  .mc-title { font-size: clamp(2rem, 7vw, 3rem); }
  .mc-title--small { font-size: clamp(1.5rem, 5.4vw, 2.25rem); }
  /* The prompts are already legible inside the drawer. */
  .mc-prompt { display: none; }
  .mc-scene--finale .mc-pin { align-content: center; }
  .mc-scene--finale .mc-copy--centre { justify-self: center; text-align: center; }
}

@media (max-width: 719px) {
  .mc-device { width: 94vw; aspect-ratio: 4 / 5; top: 67%; }
  .mc-shot { object-position: top left; }
  .mc-drawer { width: 100%; border-left: 0; }
  .mc-work { inset: 0; }
  .mc-device[data-drawer="open"] .mc-work { opacity: 0; visibility: hidden; }
  .mc-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .mc-row-free, .mc-row-state { display: none; }
  .mc-cal { gap: 4px; }
  .mc-day-label, .mc-day-flag { font-size: 9px; }
  .mc-keys { gap: 8px; }
  .mc-lede { font-size: 15px; }
}