/* =========================================================================
   LVIS AI — Cherry Bloom Workday
   Identity sourced from lvis-app `cherry-blossom` theme bundle (SOT).
   ========================================================================= */

:root {
  /* Surfaces */
  --bg: hsl(345 56% 99%);          /* base petal-white */
  --bg-soft: hsl(345 60% 97%);
  --surface: #ffffff;
  --surface-2: hsl(345 70% 98%);

  /* Foreground */
  --ink: hsl(342 26% 12%);         /* dark plum */
  --ink-soft: hsl(342 22% 24%);
  --muted: hsl(340 16% 38%);

  /* Accents */
  --cherry: hsl(343 78% 44%);
  --cherry-deep: hsl(343 64% 36%);
  --magenta: hsl(291 82% 42%);
  --gold: hsl(41 91% 50%);
  --petal: hsl(342 78% 86%);
  --petal-soft: hsl(348 72% 95%);
  --petal-edge: hsl(340 60% 78%);

  /* Lines, shadows */
  --line: hsl(340 32% 90%);
  --line-strong: hsl(340 30% 84%);
  --plum-shadow: hsla(342, 50%, 30%, 0.16);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --shell: min(1180px, calc(100% - 48px));
  --header-h: 72px;

  font-family:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}

/* =========================================================================
   Utilities — eyebrow, display, lead, btn, section-head
   ========================================================================= */

.eyebrow {
  margin: 0 0 14px;
  color: var(--cherry);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow-cherry { color: var(--cherry); }
.eyebrow-light  { color: var(--petal); }

.display-1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  font-weight: 800;
  color: var(--ink);
}

.display-1 em {
  font-style: normal;
  color: var(--cherry);
}

.display-2 {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 800;
}

.lead {
  margin: 20px 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    background 220ms var(--ease),
    border-color 220ms var(--ease);
}

.btn-sm { min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 16px; }

.btn-primary {
  background: var(--cherry);
  color: #fff;
  box-shadow: 0 14px 30px hsla(343, 80%, 50%, 0.32);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px hsla(343, 80%, 50%, 0.42);
  background: var(--cherry-deep);
}

.btn-ghost {
  background: transparent;
  border-color: hsla(343, 50%, 50%, 0.32);
  color: var(--ink);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cherry);
}

.btn-link {
  background: transparent;
  color: var(--cherry);
  padding: 0;
  min-height: auto;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  font-size: 15px;
  font-weight: 800;
}
.btn-link:hover,
.btn-link:focus-visible {
  border-bottom-color: var(--cherry);
}
.btn-link-light { color: var(--petal); }
.btn-link-light:hover { border-bottom-color: var(--petal); }

.section-head {
  width: var(--shell);
  margin: 0 auto;
}
.section-head-center { text-align: center; }
.section-head-center .lead { margin-left: auto; margin-right: auto; }

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--surface);
  border-radius: 8px;
  transform: translateY(-140%);
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* =========================================================================
   Header
   ========================================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.site-header.is-scrolled {
  background: hsla(346, 70%, 99%, 0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  width: var(--shell);
  height: var(--header-h);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--ink);
  overflow: hidden;
}
.brand-mark img { width: 20px; height: 20px; }

.site-nav {
  display: flex;
  justify-content: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.site-nav a {
  padding: 8px 0;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--cherry);
  border-bottom-color: var(--cherry);
}

/* =========================================================================
   Petal field (falling cherry blossoms)
   ========================================================================= */

.petal-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.petal {
  position: absolute;
  top: -12vh;
  left: var(--x, 50vw);
  width: var(--sz, 20px);
  height: calc(var(--sz, 20px) * 1.18);
  opacity: 0;
  pointer-events: none;
  animation: petalFall var(--dur, 16s) linear var(--dly, 0s) infinite;
  filter: drop-shadow(0 6px 14px hsla(343, 70%, 60%, 0.22));
}

.petal-field-dark .petal {
  filter: drop-shadow(0 8px 20px hsla(343, 80%, 60%, 0.42));
}

.petal-static {
  position: relative;
  top: auto;
  left: auto;
  animation: none;
  opacity: 1;
}

@keyframes petalFall {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; }
  7%   { opacity: 0.92; }
  35%  { transform: translate3d(36px, 38vh, 0) rotate(calc(var(--rot, 360deg) * 0.45)); }
  65%  { transform: translate3d(-22px, 72vh, 0) rotate(calc(var(--rot, 360deg) * 0.78)); }
  94%  { opacity: 0.9; }
  100% { transform: translate3d(48px, 118vh, 0) rotate(var(--rot, 360deg)); opacity: 0; }
}

/* =========================================================================
   HERO
   ========================================================================= */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 100svh;
  padding: calc(var(--header-h) + clamp(56px, 8vh, 120px)) 0 clamp(96px, 12vh, 132px);
  background:
    radial-gradient(120% 80% at 20% 10%, hsla(343, 90%, 92%, 0.55), transparent 55%),
    radial-gradient(110% 80% at 90% 90%, hsla(291, 80%, 92%, 0.32), transparent 60%),
    linear-gradient(180deg, #fff8fb 0%, #ffe9f1 55%, #ffd9e6 100%);
}

.hero-grid {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.hero-copy { max-width: 620px; }

.bloom-line {
  display: block;
  overflow: hidden;
}
.bloom-line em {
  font-style: normal;
  background: linear-gradient(135deg, var(--cherry) 0%, var(--magenta) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  margin: clamp(22px, 2.4vw, 32px) 0 0;
  max-width: 540px;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.65;
  color: var(--ink-soft);
  letter-spacing: -0.008em;
}
.hero-lead strong {
  color: var(--ink);
  font-weight: 800;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.hero-facts {
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-strong);
  padding-top: 22px;
}
.hero-facts > div {
  border-right: 1px solid var(--line);
  padding: 0 18px;
}
.hero-facts > div:first-child { padding-left: 0; }
.hero-facts > div:last-child  { border-right: 0; padding-right: 0; }
.hero-facts dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}
.hero-facts dd {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1200px;
}

.hero-petal-accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: block;
}
.hero-petal-accent .petal-static:nth-child(1) {
  position: absolute;
  top: -22px;
  right: -28px;
  transform: rotate(28deg);
  opacity: 0.85;
}
.hero-petal-accent .petal-static:nth-child(2) {
  position: absolute;
  bottom: -16px;
  left: -10px;
  transform: rotate(-46deg);
  opacity: 0.75;
}

/* Demo card */
.demo-frame {
  width: 100%;
  max-width: 460px;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 30px 80px hsla(343, 60%, 40%, 0.18),
    0 6px 18px hsla(343, 50%, 50%, 0.12),
    0 0 0 1px hsla(343, 60%, 60%, 0.06);
  overflow: hidden;
  transform: rotate(-1.2deg);
  transition: transform 600ms var(--ease);
}
.hero:hover .demo-frame { transform: rotate(0); }

.demo-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}
.demo-dots { display: inline-flex; gap: 6px; }
.demo-dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: hsl(0 0% 84%);
}
.demo-dots i:nth-child(1) { background: var(--cherry); }
.demo-dots i:nth-child(2) { background: var(--gold); }
.demo-dots i:nth-child(3) { background: hsl(150 52% 60%); }
.demo-bar-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.demo-bar-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.demo-body { padding: 22px 22px 18px; }
.demo-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cherry);
}
.signal-stream {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.signal {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}
.signal b { color: var(--ink); }
.signal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cherry);
}
.dot-mail { background: var(--cherry); }
.dot-cal  { background: var(--gold); }
.dot-doc  { background: var(--magenta); }
.signal-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--petal-soft);
  color: var(--cherry-deep);
}

.proposal {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff 0%, var(--petal-soft) 100%);
  border: 1px solid var(--petal-edge);
}
.proposal-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cherry);
}
.proposal-line {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.proposal-row { display: flex; gap: 8px; }

.demo-btn {
  flex: 1;
  min-height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: default;
}
.demo-btn-primary {
  background: var(--cherry);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px hsla(343, 80%, 50%, 0.32);
}

.demo-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 1px 0 0 var(--line-strong);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Hero entrance stagger */
.has-js .hero-copy > * {
  opacity: 0;
  transform: translateY(28px);
  animation: heroIn 0.95s var(--ease) forwards;
}
.has-js .hero-copy > .eyebrow      { animation-delay: 0.08s; }
.has-js .hero-copy > .display-1    { animation-delay: 0.18s; }
.has-js .hero-copy > .hero-lead    { animation-delay: 0.34s; }
.has-js .hero-copy > .hero-actions { animation-delay: 0.46s; }
.has-js .hero-copy > .hero-facts   { animation-delay: 0.58s; }

.has-js .demo-frame {
  opacity: 0;
  transform: rotate(-1.2deg) translateY(34px) scale(0.96);
  animation: stageIn 1.1s var(--ease) 0.4s forwards;
}
.has-js .signal,
.has-js .proposal {
  opacity: 0;
  transform: translateY(10px);
  animation: signalIn 0.6s var(--ease) calc(1.0s + var(--i, 0) * 0.18s) forwards;
}
.has-js .demo-foot {
  opacity: 0;
  animation: signalIn 0.6s var(--ease) calc(1.0s + var(--i, 4) * 0.18s) forwards;
}

@keyframes heroIn  { to { opacity: 1; transform: none; } }
@keyframes stageIn { to { opacity: 1; transform: rotate(-1.2deg); } }
@keyframes signalIn { to { opacity: 1; transform: none; } }

/* Scroll cue */
.scroll-cue {
  position: absolute;
  bottom: clamp(22px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cherry-deep);
}
.scroll-cue-line {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cherry) 50%, transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cherry);
  width: 14px;
  animation: cueSlide 2.2s var(--ease) infinite;
}
@keyframes cueSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(800%); }
}

/* =========================================================================
   WORKDAY — pinned scrollytelling
   ========================================================================= */

.workday {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}

.workday-pin {
  width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(36px, 4vw, 72px);
  /* tall scrollable area so each of 8 moments gets ~viewport scroll */
  min-height: 720vh;
  padding: clamp(80px, 9vw, 140px) 0;
}

.workday-rail {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  max-height: calc(100svh - var(--header-h) - 48px);
  padding-right: 12px;
}

.timeline {
  list-style: none;
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  position: relative;
}

.t-item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  transition: opacity 280ms var(--ease);
  opacity: 0.42;
  border-top: 1px solid var(--line);
}
.t-item:first-child { border-top: 0; }
.t-item:hover { opacity: 0.7; }
.t-item.is-active { opacity: 1; }

.t-time {
  grid-row: 1 / 3;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink-soft);
  align-self: center;
  letter-spacing: -0.02em;
}
.t-item.is-active .t-time { color: var(--cherry); }
.t-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.t-subtitle {
  margin-top: 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.t-stem {
  display: none;
}

.workday-canvas {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  height: calc(100svh - var(--header-h) - 48px);
}

.moment {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 18px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}
.moment.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.moment-eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--cherry);
}
.moment-title {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.moment-title em { font-style: normal; color: var(--cherry); }
.moment-body {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
}
.moment-body em { font-style: normal; color: var(--cherry); font-weight: 700; }

.mock {
  position: relative;
  align-self: stretch;
  display: grid;
  align-items: stretch;
  min-height: 0;
}

/* Workday progress bar */
.workday-progress {
  position: sticky;
  bottom: 16px;
  width: var(--shell);
  margin: 0 auto;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-16px);
}
.workday-progress-bar {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cherry), var(--magenta));
  border-radius: inherit;
  transition: width 220ms var(--ease);
}

/* ---- mock: mail moment 09:14 ---- */

.mock-mail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 28px;
  align-items: center;
}

.mail-shell {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 36px hsla(342, 40%, 40%, 0.08);
}
.mail-row {
  display: grid;
  grid-template-columns: 12px auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.mail-row:last-child { border-bottom: 0; }
.mail-row strong { color: var(--ink); font-size: 14px; }
.mail-row .mail-sub { color: var(--ink-soft); }
.mail-row .mail-time {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.mail-row-head { background: var(--petal-soft); }
.dot-pink { width: 10px; height: 10px; border-radius: 50%; background: var(--cherry); }
.dot-grey { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }

.overlay-card {
  background: var(--surface);
  border: 1px solid var(--petal-edge);
  border-radius: 16px;
  padding: 18px;
  box-shadow:
    0 24px 60px hsla(343, 60%, 50%, 0.18),
    0 0 0 1px hsla(343, 70%, 60%, 0.1);
  position: relative;
  z-index: 1;
}
.overlay-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--muted);
}
.overlay-tag {
  color: var(--cherry);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.overlay-title {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.room-chips {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.chip {
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.chip-on {
  background: var(--cherry);
  color: #fff;
  border-color: transparent;
}
.overlay-cta { display: flex; gap: 8px; }

/* ---- mock: prep moment 10:55 ---- */

.mock-prep {
  position: relative;
  display: grid;
  place-items: center;
}
.prep-card {
  width: min(440px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 26px 60px hsla(342, 40%, 40%, 0.12),
    0 2px 6px hsla(342, 40%, 40%, 0.06);
}
.prep-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.prep-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cherry);
}
.prep-time {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--petal-soft);
  padding: 4px 10px;
  border-radius: 999px;
}
.prep-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.prep-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.prep-list li {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
.prep-list li b { color: var(--ink); font-weight: 800; }
.prep-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--petal-soft);
  border: 1px solid var(--petal-edge);
  display: inline-block;
}
.ico-calendar { background: linear-gradient(180deg, var(--petal-soft) 0%, var(--petal) 100%); }
.ico-link     { background: linear-gradient(180deg, hsl(220 80% 96%), hsl(220 70% 88%)); border-color: hsl(220 60% 80%); }
.ico-doc      { background: linear-gradient(180deg, hsl(150 50% 96%), hsl(150 40% 86%)); border-color: hsl(150 40% 78%); }
.prep-foot { display: flex; gap: 8px; }

.os-toast {
  position: absolute;
  top: 22px;
  right: 6px;
  display: grid;
  gap: 4px;
  width: min(280px, 70%);
  padding: 14px 16px;
  border-radius: 14px;
  background: hsla(0, 0%, 100%, 0.96);
  border: 1px solid var(--line-strong);
  box-shadow:
    0 30px 60px hsla(342, 40%, 30%, 0.18),
    0 0 0 1px hsla(343, 70%, 60%, 0.1);
  font-size: 13px;
  color: var(--ink-soft);
  transform: rotate(2deg);
}
.os-toast strong { color: var(--ink); font-size: 14px; }
.os-toast-app {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 4px;
}
.os-toast-app .brand-mark { width: 18px; height: 18px; border-radius: 6px; }
.os-toast-app .brand-mark img { width: 12px; height: 12px; }

/* ---- mock: meeting summary 11:47 ---- */

.mock-meeting {
  display: grid;
  place-items: center;
}
.meeting-card {
  width: min(520px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 60px hsla(342, 40%, 40%, 0.12);
}
.meeting-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.meeting-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
}
.meeting-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.meeting-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.meeting-summary {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.action-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.action-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.action-list li em { font-style: normal; font-weight: 700; color: var(--ink); }
.check {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid var(--cherry);
}
.meeting-foot {
  display: flex; gap: 12px; align-items: center;
}
.meeting-foot-meta { font-size: 12px; color: var(--muted); }

/* ---- mock: approval moment 14:32 ---- */

.mock-approval { display: grid; place-items: center; }
.approval-card {
  width: min(520px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 60px hsla(342, 40%, 40%, 0.16);
}
.approval-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.risk-badge {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cherry);
  padding: 4px 10px;
  border-radius: 999px;
}
.approval-tool {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
}
.approval-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.018em;
}
.approval-args {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: 6px;
}
.approval-args > div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  font-size: 12px;
}
.approval-args dt {
  font-family: ui-monospace, monospace;
  color: var(--muted);
}
.approval-args dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
.approval-reason {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.approval-reason input {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}
.approval-reason input:focus {
  outline: none;
  border-color: var(--cherry);
  box-shadow: 0 0 0 3px hsla(343, 78%, 44%, 0.18);
}
.approval-foot { display: flex; gap: 8px; }

/* ---- mock: morning briefing 08:00 ---- */
.mock-briefing { display: grid; place-items: center; }
.briefing-card {
  width: min(500px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface), var(--petal-soft));
  border: 1px solid var(--petal-edge);
  box-shadow: 0 26px 60px hsla(342, 40%, 40%, 0.14);
}
.briefing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.briefing-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cherry);
}
.briefing-day {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.briefing-title {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.32;
  color: var(--ink);
}
.briefing-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 6px;
}
.briefing-list li {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: baseline;
  gap: 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.briefing-time {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--ink);
}
.briefing-foot {
  display: flex;
  gap: 14px;
  padding: 10px 0 0;
  border-top: 1px solid hsla(343, 50%, 50%, 0.14);
  font-size: 12px;
  color: var(--muted);
}
.briefing-foot b {
  color: var(--cherry);
  font-weight: 900;
  margin-right: 4px;
}

/* ---- mock: weekly report draft 15:30 ---- */
.mock-weekly { display: grid; place-items: center; }
.weekly-card {
  width: min(500px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 60px hsla(342, 40%, 40%, 0.12);
}
.weekly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.weekly-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cherry);
}
.weekly-pill {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--petal-soft);
  border: 1px solid var(--petal-edge);
  font-size: 11px;
  font-weight: 800;
  color: var(--cherry-deep);
}
.weekly-title {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.weekly-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.weekly-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 10px 12px;
  background: var(--bg-soft);
  border-radius: 10px;
  border: 1px solid var(--line);
  font-size: 13px;
}
.weekly-list b { color: var(--ink); font-weight: 800; }
.weekly-list span { color: var(--muted); font-variant-numeric: tabular-nums; }
.weekly-foot { display: flex; gap: 8px; }

/* ---- mock: wrap up 17:00 ---- */
.mock-wrap { display: grid; place-items: center; }
.wrap-card {
  width: min(500px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 60px hsla(342, 40%, 40%, 0.12);
}
.wrap-head { margin-bottom: 8px; }
.wrap-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cherry);
}
.wrap-title {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.wrap-checklist {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.wrap-checklist li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}
.wrap-checklist .checkbox {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid var(--cherry);
  background: var(--surface);
}
.wrap-foot {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wrap-meta {
  font-size: 12px;
  color: var(--muted);
}

/* ---- mock: autonomous indexing 20:00 ---- */
.mock-autonomy { display: grid; place-items: center; }
.autonomy-card {
  width: min(520px, 100%);
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--ink), hsl(342 32% 9%));
  color: hsl(345 30% 96%);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
  box-shadow: 0 30px 64px hsla(342, 50%, 20%, 0.4);
}
.autonomy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.autonomy-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--petal);
}
.autonomy-meta {
  font-size: 11px;
  color: hsla(0, 0%, 100%, 0.6);
  padding: 4px 10px;
  border-radius: 999px;
  background: hsla(0, 0%, 100%, 0.08);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
}
.autonomy-title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: #fff;
}
.autonomy-task { margin-bottom: 14px; }
.autonomy-task:last-of-type { margin-bottom: 10px; }
.autonomy-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 13px;
  color: hsla(0, 0%, 100%, 0.86);
}
.autonomy-progress-meta {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: hsla(0, 0%, 100%, 0.6);
}
.autonomy-bar {
  height: 6px;
  border-radius: 999px;
  background: hsla(0, 0%, 100%, 0.1);
  overflow: hidden;
}
.autonomy-fill {
  display: block;
  height: 100%;
  width: var(--p, 50%);
  background: linear-gradient(90deg, var(--cherry), var(--magenta));
  border-radius: inherit;
  animation: autonomyShimmer 2.2s var(--ease) infinite;
}
@keyframes autonomyShimmer {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1; box-shadow: 0 0 18px hsla(343, 80%, 60%, 0.45); }
}
.autonomy-foot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid hsla(0, 0%, 100%, 0.08);
  font-size: 11px;
  color: hsla(0, 0%, 100%, 0.56);
  letter-spacing: 0.04em;
}

/* =========================================================================
   SURFACES — diptych
   ========================================================================= */

.surfaces {
  padding: clamp(96px, 11vw, 168px) 0;
  background: var(--bg);
}

.diptych {
  width: var(--shell);
  margin: clamp(48px, 5vw, 80px) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 22px;
}

.diptych-card {
  position: relative;
  padding: clamp(28px, 3vw, 44px);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 460px;
  overflow: hidden;
}
.diptych-marketplace {
  background:
    radial-gradient(circle at 85% 10%, hsla(343, 90%, 90%, 0.6), transparent 50%),
    var(--surface);
  border: 1px solid var(--line-strong);
}
.diptych-hub {
  background:
    radial-gradient(circle at 90% 90%, hsla(291, 70%, 50%, 0.22), transparent 50%),
    linear-gradient(160deg, hsl(342 30% 14%), hsl(342 32% 11%));
  color: hsl(345 30% 96%);
}
.diptych-hub h3,
.diptych-hub .diptych-body { color: hsl(345 30% 96%); }
.diptych-hub .diptych-body { opacity: 0.78; }

.diptych-head h3 {
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.022em;
}
.diptych-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44ch;
}

.storefront-mock {
  display: grid;
  gap: 10px;
  margin-top: auto;
}
.store-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.store-tile-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--petal-soft);
  border: 1px solid var(--petal-edge);
}
.store-mark-mail    { background: linear-gradient(135deg, var(--cherry), var(--magenta)); }
.store-mark-meeting { background: linear-gradient(135deg, var(--gold), var(--cherry)); }
.store-mark-indexer { background: linear-gradient(135deg, hsl(150 60% 70%), hsl(220 70% 70%)); }
.store-tile-meta strong { display: block; font-weight: 800; }
.store-tile-meta span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-top: 2px;
}
.store-chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--cherry);
  color: #fff;
}
.store-chip-installed {
  background: var(--bg-soft);
  color: var(--cherry-deep);
  border: 1px solid var(--petal-edge);
}

/* Personal Agent Hub — a Kanban board mock inside the dark hub card. */
.kanban-mock {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kanban-col {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: hsla(0, 0%, 100%, 0.06);
  border: 1px solid hsla(0, 0%, 100%, 0.12);
}
.kanban-col-head {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsla(0, 0%, 100%, 0.66);
}
.kanban-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  background: hsla(0, 0%, 100%, 0.08);
  border: 1px solid hsla(0, 0%, 100%, 0.14);
}
.kanban-card-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.kanban-tag {
  justify-self: start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.kanban-tag-active { background: hsla(220, 80%, 60%, 0.24); color: hsl(220 80% 86%); }
.kanban-tag-due    { background: hsla(355, 80%, 60%, 0.28); color: hsl(355 90% 90%); }
.kanban-tag-pending{ background: hsla(41, 80%, 60%, 0.26); color: hsl(41 80% 84%); }
.kanban-tag-done   { background: hsla(150, 60%, 50%, 0.24); color: hsl(150 60% 82%); }

.diptych-note {
  margin: 0;
  font-size: 12px;
  color: hsla(0, 0%, 100%, 0.6);
}

/* =========================================================================
   DOWNLOAD
   ========================================================================= */

.download {
  padding: clamp(96px, 11vw, 160px) 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}
.download-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: end;
}
.download-head h2 { margin: 0 0 12px; }
.download-head .lead { margin-top: 4px; max-width: 56ch; }

.download-grid {
  width: var(--shell);
  margin: 38px auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.dl-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) 1.5fr;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  transition:
    border-color 220ms var(--ease),
    box-shadow 220ms var(--ease);
}
.dl-card:hover {
  border-color: var(--cherry);
  box-shadow: 0 20px 40px hsla(343, 60%, 50%, 0.18);
}
.dl-card.is-recommended {
  border-color: var(--cherry);
  box-shadow: inset 0 0 0 1px var(--cherry);
}

/* Left column — the download action (carries data-os-download for script.js) */
.dl-pick {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px;
  border-right: 1px solid var(--line);
  transition: background 220ms var(--ease);
}
.dl-pick:hover {
  background: color-mix(in srgb, var(--surface) 88%, var(--petal-soft));
}
.dl-pick.is-unavailable {
  opacity: 0.7;
  cursor: not-allowed;
}
.dl-pick.is-unavailable:hover {
  background: var(--surface);
}
.dl-pick strong { font-size: 22px; }
.dl-pick span:not(.dl-os):not(.dl-status) { color: var(--muted); font-size: 13px; }

.dl-os, .dl-status {
  width: fit-content;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.dl-os {
  color: #fff;
  background: var(--cherry);
}
.dl-status {
  color: var(--cherry-deep);
  background: var(--petal-soft);
  margin-top: 6px;
}
.dl-pick.is-unavailable .dl-status {
  color: hsl(20 70% 36%);
  background: hsl(30 90% 92%);
}

/* Right column — OS-specific first-run instructions */
.dl-setup {
  padding: 22px;
  display: grid;
  gap: 12px;
  align-content: start;
  background: color-mix(in srgb, var(--surface) 94%, var(--petal-soft));
}
.dl-setup-title {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--cherry-deep);
}
.dl-setup-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.dl-steps {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
}
.dl-steps li { padding-left: 2px; }
.dl-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.dl-cmd code {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.dl-copy {
  flex: none;
  white-space: nowrap;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 160ms var(--ease),
    background 160ms var(--ease);
}
.dl-copy:hover {
  border-color: var(--cherry);
  background: color-mix(in srgb, var(--surface) 88%, var(--petal-soft));
}
.dl-note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* =========================================================================
   PILOT — closing CTA
   ========================================================================= */

.pilot {
  position: relative;
  padding: clamp(96px, 11vw, 160px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  overflow: hidden;
}
.pilot-inner {
  width: var(--shell);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}
.pilot-inner h2 { margin: 0 0 18px; }
.pilot-inner .lead { margin: 0 auto 32px; }
.pilot-actions {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.pilot-petal {
  position: absolute;
  width: var(--sz);
  height: calc(var(--sz) * 1.18);
  top: 50%;
  right: -40px;
  transform: translateY(-50%) rotate(28deg);
  opacity: 0.35;
  filter: drop-shadow(0 10px 20px hsla(343, 70%, 60%, 0.32));
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  padding: 36px 0 56px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.site-footer-inner {
  width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: var(--muted);
}
.footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 800;
}
.footer-nav {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-nav a:hover { color: var(--cherry); }
.footer-contact:hover { color: var(--cherry); }

/* =========================================================================
   ABOUT — what the app is
   ========================================================================= */

.about {
  padding: clamp(96px, 11vw, 168px) 0;
  background:
    radial-gradient(60% 50% at 50% 0%, hsla(343, 80%, 92%, 0.5), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}
.about .section-head { text-align: center; margin-bottom: clamp(48px, 5vw, 80px); }
.about .lead { margin-left: auto; margin-right: auto; }

.about-grid {
  width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.about-card {
  padding: 28px 26px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  transition:
    transform 280ms var(--ease),
    box-shadow 280ms var(--ease),
    border-color 280ms var(--ease);
}
.about-card:hover {
  transform: translateY(-6px);
  border-color: var(--cherry);
  box-shadow: 0 24px 48px hsla(343, 60%, 50%, 0.18);
}

.about-ico {
  width: 64px;
  height: 48px;
  margin-bottom: 22px;
  filter: drop-shadow(0 10px 22px hsla(343, 60%, 50%, 0.22));
}
.about-ico svg { width: 100%; height: 100%; display: block; }

.about-card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.about-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.about-meta {
  list-style: none;
  width: var(--shell);
  margin: clamp(36px, 4vw, 56px) auto 0;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, hsla(343, 90%, 96%, 0.7), hsla(291, 70%, 96%, 0.7)),
    var(--surface);
  border: 1px solid var(--petal-edge);
}
.about-meta li {
  display: grid;
  gap: 4px;
  font-size: 13px;
}
.about-meta li span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cherry);
}
.about-meta li strong { color: var(--ink); font-weight: 700; }

@media (max-width: 1024px) {
  .about-grid,
  .about-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .about-grid,
  .about-meta { grid-template-columns: 1fr; }
}

/* =========================================================================
   Reveal engine
   ========================================================================= */

.has-js .reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.has-js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-stage { max-width: 480px; justify-self: center; }
  .demo-frame { transform: none; }
  .has-js .demo-frame { transform: rotate(0); }

  .workday-pin {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .workday-rail {
    position: static;
    max-height: none;
    padding-right: 0;
  }
  .workday-canvas {
    position: relative;
    top: 0;
    height: auto;
    display: grid;
    gap: 64px;
    margin-top: 48px;
  }
  .moment {
    position: relative;
    inset: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .workday-progress { display: none; }

  .diptych {
    grid-template-columns: 1fr;
  }
  .download-head {
    grid-template-columns: 1fr;
  }
  .dl-card {
    grid-template-columns: 1fr;
  }
  .dl-pick {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .principles {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-header-inner { grid-template-columns: auto 1fr auto; }
  .hero { padding-top: calc(var(--header-h) + 64px); }
  .hero-facts { grid-template-columns: 1fr; gap: 14px; }
  .hero-facts > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
  }
  .hero-facts > div:last-child { border-bottom: 0; }
  .mock-mail { grid-template-columns: 1fr; }
  .download-grid { grid-template-columns: 1fr; }
  .footer-nav { display: none; }
  .site-footer-inner { grid-template-columns: auto auto; }
  .moment-title { font-size: 26px; }
  .os-toast { width: 240px; right: -10px; }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .petal-field { display: none; }
  .has-js .hero-copy > *,
  .has-js .demo-frame,
  .has-js .signal,
  .has-js .proposal,
  .has-js .demo-foot,
  .has-js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* =========================================================================
   ROADMAP — vision axes + horizontal rail (Cherry Bloom style)
   ========================================================================= */

.roadmap {
  position: relative;
  padding: clamp(96px, 11vw, 168px) 0;
  background:
    radial-gradient(70% 50% at 50% 8%, hsla(343, 80%, 92%, 0.42), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  overflow: hidden;
}
/* Roadmap is paused: the plan is blurred behind a centered closing notice. */
.roadmap.is-closing .roadmap-blur {
  filter: blur(7px);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}
.roadmap-closing {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 0 24px;
  text-align: center;
}
.roadmap-closing-text {
  margin: 0;
  font-size: clamp(44px, 8vw, 104px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(135deg, var(--cherry) 0%, var(--magenta) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.roadmap .section-head { text-align: center; }
.roadmap .lead { margin-left: auto; margin-right: auto; }
.roadmap .display-2 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--cherry) 0%, var(--magenta) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vision-axes {
  list-style: none;
  width: var(--shell);
  margin: clamp(48px, 5vw, 80px) auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.axis {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 16px;
  padding: 26px 26px 24px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  transition:
    transform 280ms var(--ease),
    border-color 280ms var(--ease),
    box-shadow 280ms var(--ease);
}
.axis:hover {
  transform: translateY(-5px);
  border-color: var(--cherry);
  box-shadow: 0 24px 50px hsla(343, 60%, 50%, 0.16);
}

.axis-ico {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--petal-soft) 0%, var(--surface) 100%);
  border: 1px solid var(--petal-edge);
  color: var(--cherry);
  box-shadow: 0 10px 22px hsla(343, 60%, 50%, 0.16);
  transition:
    background 280ms var(--ease),
    color 280ms var(--ease),
    transform 280ms var(--ease),
    border-color 280ms var(--ease);
}
.axis-ico svg { width: 22px; height: 22px; display: block; }
.axis:hover .axis-ico {
  background:
    radial-gradient(circle at 30% 28%, hsla(0, 0%, 100%, 0.32), transparent 55%),
    linear-gradient(135deg, #ff4b2e 0%, #ff3f6e 56%, #d946ef 100%);
  color: #fff;
  transform: rotate(-4deg) scale(1.06);
  border-color: transparent;
}

.axis-num {
  grid-row: 1;
  grid-column: 2;
  margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--cherry);
}
.axis h3 {
  grid-row: 2;
  grid-column: 2;
  margin: 4px 0 10px;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.axis p:not(.axis-num) {
  grid-row: 3;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* Horizontal rail with progress line + station cards */
.rail {
  position: relative;
  width: var(--shell);
  margin: clamp(56px, 5vw, 88px) auto 0;
}
.rail-line {
  position: absolute;
  top: 8px;
  left: 6%;
  right: 6%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    hsl(343 50% 80%) 0%,
    hsl(343 78% 56%) 30%,
    hsl(330 75% 50%) 65%,
    hsl(291 82% 42%) 100%
  );
  z-index: 0;
}
.rail-stations {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.station {
  position: relative;
  padding: 36px 22px 22px;
  border-radius: 18px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  display: grid;
  gap: 6px;
  transition:
    transform 280ms var(--ease),
    border-color 280ms var(--ease),
    box-shadow 280ms var(--ease);
}
.station:hover {
  transform: translateY(-4px);
  border-color: var(--cherry);
  box-shadow: 0 22px 44px hsla(343, 60%, 50%, 0.14);
}
.station-dot {
  position: absolute;
  top: -8px;
  left: 22px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line-strong), 0 8px 14px hsla(343, 60%, 40%, 0.22);
  z-index: 1;
}
.station-dot-1 { background: hsl(343 70% 76%); }
.station-dot-2 { background: hsl(343 78% 56%); }
.station-dot-3 { background: hsl(330 75% 50%); }
.station-dot-4 { background: hsl(291 82% 44%); }

.station-tag {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.station-name {
  margin: 4px 0 0;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.station-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.station-list li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.station-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cherry);
}

.roadmap-foot {
  width: var(--shell);
  margin: clamp(40px, 4vw, 64px) auto 0;
  padding: 18px 22px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, hsla(343, 90%, 96%, 0.7), hsla(291, 70%, 96%, 0.7)),
    var(--surface);
  border: 1px solid var(--petal-edge);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.roadmap-foot a {
  font-weight: 800;
  color: var(--cherry);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.roadmap-foot a:hover { border-bottom-color: var(--cherry); }

@media (max-width: 1024px) {
  .vision-axes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail-line { display: none; }
}
@media (max-width: 560px) {
  .vision-axes,
  .rail-stations { grid-template-columns: 1fr; }
}

/* =========================================================================
   ARCHITECTURE — layered stack diagram
   ========================================================================= */

.architecture {
  padding: clamp(96px, 11vw, 160px) 0;
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
}
.architecture .section-head { text-align: center; }
.architecture .lead { margin-left: auto; margin-right: auto; }

.arch-stack {
  width: var(--shell);
  max-width: 820px;
  margin: clamp(48px, 5vw, 80px) auto 0;
  display: grid;
  gap: 12px;
}

.arch-layer {
  position: relative;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--surface);
  transition:
    transform 280ms var(--ease),
    box-shadow 280ms var(--ease);
}
.arch-layer:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px hsla(342, 40%, 40%, 0.12);
}
.arch-layer-tag {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--cherry);
  text-transform: uppercase;
}
.arch-layer-body strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin-bottom: 4px;
}
.arch-layer-body span {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.arch-layer-user {
  background: linear-gradient(180deg, var(--surface), var(--petal-soft));
}
.arch-layer-core {
  background:
    radial-gradient(circle at 0% 50%, hsla(0, 0%, 100%, 0.32), transparent 55%),
    linear-gradient(135deg, #ff4b2e 0%, #ff3f6e 56%, #d946ef 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 22px 52px hsla(343, 60%, 50%, 0.32);
}
.arch-layer-core .arch-layer-tag { color: rgba(255, 255, 255, 0.92); }
.arch-layer-core .arch-layer-body strong { color: #fff; }
.arch-layer-core .arch-layer-body span { color: rgba(255, 255, 255, 0.82); }

.arch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.arch-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--petal-soft);
  border: 1px solid var(--petal-edge);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}
.arch-chip svg {
  width: 12px;
  height: 12px;
  color: var(--cherry);
}

.arch-layer-signals {
  background: var(--ink);
  color: hsl(345 30% 96%);
  border-color: transparent;
}
.arch-layer-signals .arch-layer-tag { color: var(--petal); }
.arch-layer-signals .arch-layer-body strong { color: #fff; }
.arch-layer-signals .arch-layer-body span { color: rgba(255, 255, 255, 0.72); }

.arch-flow {
  width: var(--shell);
  max-width: 820px;
  margin: clamp(28px, 3vw, 48px) auto 0;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .arch-layer {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .arch-flow {
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
}