/* ============================================================
   Soraya Elchehimi — Portfolio
   Shared design system: reset, typography, nav, footer, cards

   Type system pulled from Figma (Mobile Workspace / Styles):
   - Display / Heading 1/2/3  → Crimson Text, Regular
   - Paragraph / Paragraph 2  → DM Sans, Regular / Light
   - Captions                 → Roboto Mono, Regular, #485C11
   - Link / UI Text           → Inter, Regular
   ============================================================ */

:root {
  --bg: #faf9f5;
  --ink: #000000;          /* Text/Headline */
  --ink-soft: #6f6f6f;     /* Text/Paragraph */
  --ink-faint: #8a8678;
  --caption: #485c11;      /* Text/Captions */
  --card-bg: #ffffff;
  --line: #e8e5db;
  --radius-lg: 20px;
  --radius-md: 12px;

  --role-accent: #5430ef;

  --font-serif: "Crimson Text", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Roboto Mono", "SF Mono", Menlo, monospace;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max-width: 1040px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Landing page: everything fits in one viewport, no page scroll,
   even as the window is resized shorter. */
body.landing {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.landing header.wrap,
body.landing footer.wrap {
  flex-shrink: 0;
}

body.landing main.wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

body.landing header.wrap {
  position: relative;
  z-index: 50;
  background: var(--bg);
}

body.landing .hero-intro {
  position: relative;
  z-index: 40;
  background: var(--bg);
}

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

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

h1, h2, h3, h4, p, ul {
  margin: 0;
}

strong {
  font-weight: 500;
}

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------------- Nav (Link/UI text style) ---------------- */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 24px 0 0;
}

body.landing .site-nav {
  padding: 12px 0 0;
}

/* Project pages: center the nav-back + nav-links as one cluster,
   matching the homepage's centered nav treatment. */
.site-nav:has(.nav-back) {
  justify-content: center;
  gap: 8px 20px;
}

.site-nav:has(.nav-back) .nav-links {
  margin-left: 0;
}

.nav-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  column-gap: 20px;
  row-gap: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--ink-soft);
}

.nav-links a {
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.nav-back:hover {
  color: var(--ink);
}

/* ---------------- Hero / intro ---------------- */

.hero-intro {
  padding: 56px 0 48px;
  text-align: center;
}

body.landing .hero-intro {
  flex-shrink: 0;
  padding: clamp(56px, 7.5vh, 70px) 0 clamp(40px, 5.5vh, 50px);
}

@media (max-height: 780px) {
  body.landing .hero-intro {
    padding: clamp(20px, 4vh, 56px) 0 clamp(18px, 3.2vh, 40px);
  }
}

body.landing .hero-title {
  font-size: clamp(28px, 4vw, 52px);
  max-width: 780px;
}

body.landing .hero-meta {
  margin-top: 15px;
  font-size: clamp(14px, 1.6vw, 20px);
  max-width: 560px;
}

.hero-meta-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--ink-faint);
  transition: text-decoration-color 0.15s ease;
}

.hero-meta-link:hover {
  text-decoration-color: var(--ink);
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--caption);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3.2vw, 36px);
  font-weight: 400;
  line-height: 0.95;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.03em;
}

.hero-meta {
  margin-top: 18px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  font-family: var(--font-sans);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 560px;
}


/* ---------------- Card stack ---------------- */

.stack-section {
  padding: 20px 0 100px;
}

.stack-outer {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.stack {
  position: relative;
  height: 480px;
}

body.landing .stack-section {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px 0;
}

.project-dock {
  flex-shrink: 0;
  margin: auto 0 clamp(16px, 3vh, 32px);
  padding: 10px 14px;
  display: flex;
  justify-content: center;
}

.dock-item {
  position: relative;
  width: 34px;
  height: 34px;
  margin-left: -8px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 1;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.25s cubic-bezier(0.22, 1, 0.36, 1), height 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    margin-left 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.dock-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 4px 9px;
  border-radius: var(--radius-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 30;
}

.dock-item:hover .dock-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dock-item:first-child {
  margin-left: 0;
}

.dock-item .logo-badge {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--bg);
  box-shadow: 0 2px 8px -2px rgba(21, 19, 15, 0.25);
}

.project-dock:hover .dock-item {
  width: 40px;
  height: 40px;
  margin-left: 8px;
}

.project-dock:hover .dock-item:first-child {
  margin-left: 0;
}

.dock-item:hover {
  transform: scale(1.08);
}

body.landing .stack-outer {
  width: 100%;
  max-width: min(62vw, 1150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.landing .stack {
  width: 100%;
  height: min(54vh, 760px);
}

.stack-card {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -18px rgba(21, 19, 15, 0.18);
  overflow: hidden;
  cursor: pointer;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.9s ease,
    width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.stack-card.is-locked {
  cursor: default;
}

.card-face {
  position: absolute;
  inset: 0;
  padding: 30px 32px 32px;
  display: flex;
  flex-direction: column;
}

.card-role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--role-accent);
  margin-bottom: 10px;
}

.card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.card-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 22%;
  width: 100%;
  height: 100%;
}

.logo-badge img {
  display: block;
}

.logo-clairify {
  background: #f8f8f6;
}

.logo-clairify img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.card-icon .logo-clairify {
  background: transparent;
}

.card-icon .logo-clairify img {
  width: 100%;
  height: 100%;
  filter: brightness(0) invert(1);
}

.logo-untangled {
  background: #393939;
}

.logo-untangled img {
  width: 83%;
  height: 83%;
  object-fit: contain;
}

.logo-nyt {
  background: #f8f8f6;
}

.logo-nyt img {
  width: 54%;
  height: 68%;
  object-fit: contain;
}

.logo-pebl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-nyt-svg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 34px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.card-blurb {
  font-family: var(--font-sans);
  /* Scales with the viewport so the manual 7-words-per-line <br>
     breaks (see the card-blurb copy in index.html) keep landing on
     one visual line as the card shrinks, instead of each line
     re-wrapping into two and pushing the blurb past the card's
     overflow:hidden bottom edge. */
  font-size: clamp(9.5px, 1.65vw, 15px);
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 440px;
}

.card-cta {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--role-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.card-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.stack-card:hover .card-cta svg {
  transform: translateX(3px);
}

/* ---------------- Clairify card: swipe-stack embed ---------------- */

.stack-card--clairify {
  border: none;
  background: #f8f8f6 url("../assets/clairify-embed/gradient-frame.svg") center / 100% 100% no-repeat;
}

.card-face--clairify {
  display: block;
  padding: 0;
}

/* Full-bleed swipe animation sits behind the text, top-weighted. */
.stack-card--clairify .swipe-embed {
  position: absolute;
  inset: 0;
  flex: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Progressive blur, transparent at the top of the strip, full strength
   by the bottom — keeps the gradient/animation showing through, just
   softened enough for the text to stay readable. */
.clairify-blur-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
}

/* Localized dark-blue glow just behind the text corner, so the type
   stays legible even where the gradient washes out light — the rest
   of the card's gradient is untouched. */
.clairify-text-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(
    115% 100% at 12% 100%,
    rgba(8, 20, 46, 0.8) 0%,
    rgba(8, 20, 46, 0.5) 40%,
    rgba(8, 20, 46, 0.2) 65%,
    transparent 85%
  );
}

.clairify-text-block {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 10;
}

.clairify-text-block .card-title {
  color: #fff;
}

.clairify-text-block .card-blurb {
  max-width: 100%;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.clairify-text-block .card-role {
  color: #f8f8f6;
}

.cursor-hidden {
  cursor: none;
}

.stack-card.is-locked.cursor-hidden {
  cursor: none;
}

.card-cursor-bubble {
  position: fixed;
  top: -5px;
  left: -5px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  transform: translate3d(-9999px, -9999px, 0);
}

.card-cursor-bubble.is-visible {
  opacity: 1;
}

.card-cursor-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.25);
}

.card-cursor-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #393939;
  background: #fff;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  white-space: nowrap;
}

.swipe-embed {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
  margin: -14px 0 6px;
  pointer-events: none;
}

.swipe-embed-scale {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swipe-stage {
  --swipe-frame-w: 856px;
  --swipe-frame-h: 802px;
  --swipe-card-w: 346px;
  --swipe-card-h: 556px;
  --swipe-stack-top: calc((var(--swipe-frame-h) - var(--swipe-card-h)) / 2);
  width: var(--swipe-frame-w);
}

.swipe-frame {
  position: relative;
  width: var(--swipe-frame-w);
  height: var(--swipe-frame-h);
  overflow: visible;
}

.swipe-stack {
  position: absolute;
  left: calc((var(--swipe-frame-w) - var(--swipe-card-w)) / 2);
  top: var(--swipe-stack-top);
  width: var(--swipe-card-w);
  height: var(--swipe-card-h);
}

.swipe-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 0.51px solid rgba(115, 115, 115, 0.23);
  border-radius: 18.22px;
  box-shadow: 0 0 36.7px 2.7px rgba(45, 45, 45, 0.23);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px 24px 24px;
  overflow: hidden;
  will-change: transform;
  transform-origin: 50% 100%;
}

.swipe-card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18.4px;
  width: 100%;
}

.swipe-avatar-row {
  display: flex;
  align-items: flex-start;
  gap: 12.3px;
  height: 42px;
  width: 100%;
}

.swipe-avatar-ring {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px 0 rgba(102, 62, 82, 0.08), 0 1px 4px 0 rgba(0, 0, 0, 0.08);
}

.swipe-avatar-ring img {
  width: 38.4px;
  height: 38.4px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.swipe-id-block {
  display: flex;
  flex-direction: column;
  gap: 1.2px;
  width: 148px;
}

.swipe-id-name {
  font-family: "New York", ui-serif, Georgia, "Times New Roman", serif;
  font-size: 17.5px;
  line-height: 1.221;
  letter-spacing: -0.03px;
  color: #1c1c1e;
  font-weight: 500;
  margin: 0;
}

.swipe-id-email {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 13.7px;
  line-height: 1.221;
  color: #7a6370;
  margin: 0;
}

.swipe-id-date {
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-weight: 300;
  font-size: 13.7px;
  line-height: 1.221;
  color: #7a6370;
  text-align: right;
  width: 83px;
  flex-shrink: 0;
  margin: 0;
}

.swipe-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.swipe-hr {
  background: #f4efe6;
  height: 1px;
  width: 100%;
  flex-shrink: 0;
}

.swipe-card-title {
  font-family: "New York", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.16;
  letter-spacing: -0.15px;
  color: #1c1c1e;
  margin: 0;
  width: 100%;
}

.swipe-card-list {
  display: flex;
  flex-direction: column;
  gap: 5.3px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.swipe-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 8.8px;
  list-style: none;
  font-family: "Inter", sans-serif;
  font-size: 13.1px;
  line-height: 18.7px;
  letter-spacing: -0.2px;
  color: #1a1a1a;
}

.swipe-card-list li::before {
  content: "";
  flex-shrink: 0;
  width: 5.3px;
  height: 5.3px;
  margin-top: 6.7px;
  border-radius: 50%;
  background: rgba(197, 197, 197, 0.6);
}

.swipe-card-action {
  font-family: "Inter", sans-serif;
  font-size: 12.3px;
  line-height: 17.6px;
  letter-spacing: -0.2px;
  color: #1a1a1a;
  margin: 0;
  width: 100%;
}

.swipe-card-action b {
  font-family: "New York", ui-serif, Georgia, serif;
  font-weight: 600;
  color: #000;
}

.swipe-card-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  width: 100%;
}

.swipe-card-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #393939;
  border-radius: 12px;
  padding: 8px 16px;
  filter: drop-shadow(0 0 9.1px rgba(255, 255, 255, 0.23));
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: -0.2px;
  color: #fff;
  white-space: nowrap;
}

.swipe-card-btn img {
  width: 11.5px;
  height: 11.5px;
  display: block;
}

.swipe-card-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  padding-top: 6px;
  padding-bottom: 16px;
  width: 100%;
  margin-top: auto;
}

.swipe-audio-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  background: #f8f8f6;
  border-radius: 24px;
  padding: 6px;
  box-sizing: border-box;
}

.swipe-audio-play {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #393939;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.swipe-audio-play img {
  width: 16px;
  height: 16px;
}

.swipe-audio-track-wrap {
  flex: 1;
  position: relative;
  height: 32px;
}

.swipe-audio-time {
  position: absolute;
  top: 6px;
  left: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  letter-spacing: -0.15px;
  color: #1c1c1e;
}

.swipe-audio-time.total {
  left: 151.6px;
  color: #8e8e93;
}

.swipe-audio-track {
  position: absolute;
  left: 42px;
  top: 14px;
  height: 4px;
  width: 97.6px;
  background: #e7e7e6;
  border-radius: 99px;
}

.swipe-audio-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 4px;
  width: 8%;
  background: #393939;
  border-radius: 99px;
}

.swipe-audio-speed {
  position: absolute;
  right: 0;
  top: 0;
  width: 40.3px;
  height: 32px;
  border-radius: 99px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.15px;
  color: #1c1c1e;
}

.swipe-indicator-row {
  display: none;
}

.swipe-indicator {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  opacity: var(--swipe-indicator-dim, 0.4);
  white-space: nowrap;
  transition: opacity 260ms ease;
}

.swipe-indicator img {
  width: 17px;
  height: 17px;
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.swipe-indicator.is-active {
  opacity: 1;
  animation: swipe-indicator-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes swipe-indicator-pop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.swipe-success-check {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.swipe-success-check svg {
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
}

.swipe-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.swipe-success-check[data-state="in"] {
  animation: swipe-check-fade 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
    swipe-check-rotate 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
    swipe-check-blur 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
    swipe-check-bob 500ms cubic-bezier(0.34, 1.35, 0.64, 1) forwards;
}

.swipe-success-check[data-state="in"] svg path {
  animation: swipe-check-draw 500ms cubic-bezier(0.22, 1, 0.36, 1) 80ms forwards;
}

@keyframes swipe-check-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes swipe-check-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes swipe-check-blur {
  from {
    filter: blur(10px);
  }
  to {
    filter: blur(0);
  }
}
@keyframes swipe-check-bob {
  from {
    translate: 0 40px;
  }
  to {
    translate: 0 0;
  }
}
@keyframes swipe-check-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.swipe-success-check.is-popping {
  animation: swipe-check-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes swipe-check-pop {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(1.28);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes swipe-card-fly-out {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 1;
  }
  18% {
    transform: translate3d(calc(var(--swipe-fly-x) * -0.015), calc(var(--swipe-fly-y) * -0.02), 0)
      rotate(calc(var(--swipe-fly-rot) * -0.1));
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  100% {
    transform: translate3d(var(--swipe-fly-x), var(--swipe-fly-y), 0) rotate(var(--swipe-fly-rot));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-embed {
    display: none;
  }
}

/* ---------------- NYT card: read-along phone embed ---------------- */

.stack-card--nyt {
  border: none;
  background: radial-gradient(120% 100% at 30% 0%, #2a2a2e 0%, #1c1c1e 45%, #0d0e10 100%);
}

.card-face--nyt {
  display: block;
  padding: 0;
}

.stack-card--nyt .nyt-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.nyt-blur-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(10, 10, 12, 0.55) 60%, rgba(10, 10, 12, 0.8) 100%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
}

.nyt-text-block {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 10;
}

.nyt-text-block .card-role {
  color: #fff;
}

.nyt-text-block .card-title {
  color: #fff;
}

.nyt-text-block .card-blurb {
  max-width: 100%;
  color: #d8d8d8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ---- phone-frame prototype (adapted from the standalone build) ---- */

.stack-card--nyt {
  --nyt-black: #121212;
  --nyt-gray-text: #727272;
  --nyt-gray-light: #8b8b8b;
  --nyt-hairline: #e2e2e2;
  --nyt-highlight: #d5e1f5;
  --nyt-nav-bg: #f6f6f6;
}

.phone {
  position: absolute;
  top: 28px;
  left: 50%;
  width: 390px;
  height: 844px;
  background: #000;
  border: 10px solid rgba(255, 255, 255, 0.16);
  border-radius: 46px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.55);
}

.screen {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.3s;
}

.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  z-index: 2;
}

.status-bar {
  position: relative;
  z-index: 5;
  flex: none;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 0 26px;
  font-size: 15px;
  font-weight: 600;
  color: var(--nyt-black);
}
.status-bar-light {
  color: #fff;
}
.sb-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-signal,
.sb-wifi,
.sb-battery {
  display: inline-block;
  background: currentColor;
  opacity: 0.95;
}
.sb-signal {
  width: 18px;
  height: 11px;
  clip-path: polygon(
    0 70%,
    15% 70%,
    15% 100%,
    0 100%,
    25% 45%,
    40% 45%,
    40% 100%,
    25% 100%,
    50% 20%,
    65% 20%,
    65% 100%,
    50% 100%,
    75% 0,
    90% 0,
    90% 100%,
    75% 100%
  );
}
.sb-wifi {
  width: 16px;
  height: 12px;
  clip-path: polygon(50% 100%, 35% 60%, 65% 60%, 50% 100%, 20% 40%, 80% 40%, 65% 60%, 35% 60%, 5% 15%, 95% 15%, 80% 40%, 20% 40%);
}
.sb-battery {
  width: 25px;
  height: 12px;
  border-radius: 3px;
  opacity: 1;
  position: relative;
}

.home-indicator {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.9);
  z-index: 6;
}

.lock-screen {
  background: #0e1116;
}
.lock-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 20% 0%, #7fb9c9 0%, #4d7fae 30%, #2c4a86 55%, #1a2c56 75%, #10163a 100%),
    radial-gradient(90% 70% at 80% 100%, #e8b64f 0%, #c97a3a 35%, transparent 70%);
  background-blend-mode: screen;
}
.lock-clock {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  margin-top: 26px;
}
.lock-date {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 500;
}
.lock-time {
  margin: 0;
  font-size: 78px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

.notif-card {
  position: relative;
  z-index: 3;
  margin: 44px 8px 0;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  border-radius: 14px;
  text-align: left;
  border: none;
  font: inherit;
  color: var(--nyt-black);
  opacity: 0;
  transform: translateY(-40px) scale(0.9);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.notif-card.notif-in {
  animation: nyt-notif-drop 0.4s cubic-bezier(0.2, 0.8, 0.3, 1.15) forwards;
}
@keyframes nyt-notif-drop {
  from {
    opacity: 0;
    transform: translateY(-40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.notif-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.notif-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  object-fit: cover;
}
.notif-source {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #555;
  flex: 1;
}
.notif-time {
  font-size: 12px;
  color: #666;
}
.notif-title {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 700;
}
.notif-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: #1a1a1a;
}

.lock-tray {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  display: flex;
  justify-content: space-between;
  padding: 0 34px;
  z-index: 2;
}
.tray-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.playlist-screen {
  color: var(--nyt-black);
}
.playlist-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
}
.playlist-header h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 21px;
}
.header-spacer {
  width: 20px;
}
.header-plus {
  font-size: 22px;
  font-weight: 300;
  width: 20px;
  text-align: right;
}

.playlist-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 100px;
}
.playlist-intro {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23px;
  line-height: 1.25;
}
.playlist-intro-bold {
  font-weight: 700;
  margin-top: 14px;
}
.playlist-intro-light {
  font-weight: 400;
  color: #1c1c1c;
}

.divider {
  border: none;
  border-top: 1px solid var(--nyt-black);
  margin: 22px 0;
  opacity: 0.85;
}

.collection-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.collection-label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.collection-sub {
  margin: 0;
  font-size: 14px;
  color: var(--nyt-gray-text);
}
.round-play {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--nyt-black);
  background: #fff;
  font-size: 13px;
  padding-left: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.article-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.article-thumb {
  width: 83px;
  height: 83px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
}
.article-copy {
  flex: 1;
  min-width: 0;
}
.article-title {
  margin: 0 0 6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.28;
  letter-spacing: -0.3px;
}
.article-meta {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: var(--nyt-gray-text);
  text-transform: uppercase;
}

.view-all {
  display: block;
  margin-top: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--nyt-black);
  text-decoration: none;
}

.mini-player {
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 83px;
  height: 50px;
  background: #fff;
  border-top: 1px solid var(--nyt-black);
  border-bottom: 1px solid var(--nyt-black);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  font: inherit;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  z-index: 4;
}
.mini-player.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}
.mini-player-icon {
  font-size: 13px;
}
.mini-player-title {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-player-close {
  font-size: 20px;
  color: #444;
  font-weight: 300;
}
.mini-player-reader {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mini-player-reader.is-hiding {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
}

.nav-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 83px;
  background: var(--nyt-nav-bg);
  border-top: 0.5px solid #b2b2b2;
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 3;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--nyt-gray-light);
}
.nav-icon {
  font-size: 15px;
}
.nav-item-active {
  color: var(--nyt-black);
}
.nav-bar.is-hidden {
  transform: translateY(100%);
  opacity: 0;
}

.reader-screen {
  color: var(--nyt-black);
}
.reader-header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 10px;
}
.reader-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}
.reader-back,
.reader-dots {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--nyt-black);
  width: 24px;
  padding: 0;
}
.reader-dots {
  font-size: 18px;
  letter-spacing: 1px;
  text-align: right;
}

.reader-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 40px;
  scroll-behavior: smooth;
}

.hero-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 65%);
}
.hero-card-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 34px;
  margin: 0;
  color: #fff;
  font-family: Georgia, serif;
  font-size: 21px;
  line-height: 1.25;
}
.hero-card-byline {
  position: absolute;
  left: 14px;
  bottom: 14px;
  margin: 0;
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.2px;
}

.audio-controls {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 14px 2px 12px;
  z-index: 3;
}
.scrubber-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.scrub-time {
  font-size: 14px;
  flex: none;
  width: 34px;
}
.scrub-time:last-child {
  text-align: right;
}
.scrub-track {
  flex: 1;
  height: 3px;
  background: #d9d9d9;
  border-radius: 3px;
  position: relative;
}
.scrub-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--nyt-black);
  border-radius: 3px;
  transition: width 0.95s linear;
}
.scrub-fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nyt-black);
}
.controls-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}
.ctrl-speed {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.ctrl-btn {
  font-size: 20px;
  color: var(--nyt-black);
  background: none;
  border: none;
  padding: 0;
}
.ctrl-play {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--nyt-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  padding-left: 2px;
}
.ctrl-transcript {
  font-size: 18px;
  opacity: 0.8;
}

.read-full-btn {
  width: 100%;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--nyt-black);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 800;
  color: var(--nyt-black);
}
.read-full-icon {
  font-size: 16px;
}
.read-full-btn.is-done {
  opacity: 0.4;
  pointer-events: none;
}

.article-body {
  margin-top: 28px;
}
.article-headline {
  margin: 0 0 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 25px;
  line-height: 1.28;
  font-weight: 400;
}
.article-dek {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.5;
  color: #363636;
  font-family: Georgia, serif;
}
.article-photo {
  width: 100%;
  border-radius: 2px;
  display: block;
  margin-bottom: 10px;
}
.article-caption {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nyt-gray-text);
}
.article-credit {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: #9a9a9a;
}
.article-para {
  font-size: 16px;
  line-height: 1.6;
  color: #2a2a2a;
}

.hl-line {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: linear-gradient(to right, var(--nyt-highlight) 0%, var(--nyt-highlight) 0%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.3s ease;
  padding: 1px 0;
}
.hl-line.is-lit {
  background-size: 100% 100%;
}

.closing-veil {
  position: absolute;
  inset: 0;
  background: #0e1116;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: opacity 0.9s ease;
}
.phone.is-closing .closing-veil {
  opacity: 1;
}
.phone.is-closing .screen.is-active {
  transform: scale(0.94);
  filter: brightness(0.85);
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1), filter 0.9s ease;
}

.closing-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.closing-logo.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .nyt-embed {
    display: none;
  }
}

/* ---------------- Untangled card: video embed ---------------- */

.stack-card--untangled {
  border: none;
  background: #0a0a0a url("../assets/untangled-embed/untangled-bg.png") center / cover no-repeat;
}

.card-face--untangled {
  display: block;
  padding: 0;
}

.stack-card--untangled .untangled-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.untangled-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 506px;
  height: 1072px;
}

.untangled-blur-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(10, 10, 12, 0.55) 60%, rgba(10, 10, 12, 0.8) 100%);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
}

.untangled-text-block {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 10;
}

.untangled-text-block .card-role {
  color: #fff;
}

.untangled-text-block .card-title {
  color: #fff;
}

.untangled-text-block .card-blurb {
  max-width: 100%;
  color: #d8d8d8;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .untangled-embed {
    display: none;
  }
}

/* ---------------- Pebl card: "Ask Alfie" chat embed (locked / coming soon) ---------------- */

.stack-card--pebl {
  border: none;
  border-radius: 25px;
  /* Figma "agent-role" background (node 62:1075) — four blobs, each
     with a uniform 400 (stdDeviation 200) layer blur, reproduced here
     as soft radial-gradients rather than a live filter:blur(), same
     approach used for the Alfie card's own background. */
  background: radial-gradient(34% 42% at 76% 46%, rgba(0, 148, 255, 0.55) 0%, rgba(0, 148, 255, 0) 100%),
    radial-gradient(56% 60% at 78% 47%, #8bb5ff 0%, #cfeaff 55%, rgba(225, 251, 255, 0) 100%),
    radial-gradient(26% 40% at 12% 58%, rgba(255, 144, 234, 0.4) 0%, rgba(255, 144, 234, 0) 100%),
    radial-gradient(85% 85% at 18% 22%, #e0edff 0%, rgba(224, 237, 255, 0) 100%), #e6eef9;
}

.card-face--pebl {
  display: block;
  padding: 0;
}

.stack-card--pebl .pebl-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ---- Ask Alfie animation — self-contained package, kept unprefixed
   since none of its class names collide with the rest of the site.
   Fonts are self-hosted under assets/alfie-embed/fonts/; colors are
   inlined from the source package's tokens rather than added to
   :root, since --font-serif/--font-sans there would otherwise clash
   with the site's own type-system variables. ---- */

@font-face {
  font-family: "FK Roman Standard";
  src: url("../assets/alfie-embed/fonts/FKRomanStandard-Regular.woff2") format("woff2"),
    url("../assets/alfie-embed/fonts/FKRomanStandard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FK Roman Standard";
  src: url("../assets/alfie-embed/fonts/FKRomanStandard-Bold.woff2") format("woff2"),
    url("../assets/alfie-embed/fonts/FKRomanStandard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sharp Earth OL";
  src: url("../assets/alfie-embed/fonts/SharpEarth-Regular.woff2") format("woff2"),
    url("../assets/alfie-embed/fonts/SharpEarth-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sharp Earth OL";
  src: url("../assets/alfie-embed/fonts/SharpEarth-Bold.woff2") format("woff2"),
    url("../assets/alfie-embed/fonts/SharpEarth-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.alfie-shell {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1456px;
  padding: 4px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
}

.alfie-card {
  position: relative;
  width: 100%;
  height: 871px;
  border: 8px solid #e4edf9;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06), 0px 0px 20px rgba(0, 0, 0, 0.08);
  background: radial-gradient(ellipse 780px 760px at 66% 42%, #dcebff 0%, rgba(220, 235, 255, 0) 70%),
    radial-gradient(ellipse 540px 570px at 30% 55%, #cdf0f7 0%, rgba(205, 240, 247, 0) 70%), #ffffff;
}

.alfie-header {
  flex: none;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(2.4px);
  position: relative;
  z-index: 2;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.alfie-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 19px;
  background: #dcebff;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0px 2px 16px rgba(255, 255, 255, 0.2));
}

.alfie-avatar img {
  width: 19.385px;
  height: 19.385px;
  display: block;
}

.alfie-title {
  margin: 0;
  font-family: "FK Roman Standard", Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.88px;
  color: #171717;
}

.chat-history-btn {
  all: unset;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 32px;
  padding: 0 8px 0 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0);
  background: #cadbf4;
  mix-blend-mode: multiply;
  cursor: pointer;
}

.chat-history-btn span {
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.175px;
  color: #0c1017;
  white-space: nowrap;
}

.chat-history-btn img {
  width: 16px;
  height: 16px;
}

.alfie-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  /* Old messages scroll up and out through this top edge (see
     .msg-row.is-leaving) instead of shrinking away in place — the
     fade means that exit, and any bubble that briefly runs past the
     top at the larger conversation scale, softens out rather than
     getting a hard rectangular cut. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px);
}

.conversation {
  position: relative;
  width: 830px;
  max-width: 92%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transform: scale(1.16);
  transform-origin: 50% 100%;
}

.thread {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  padding: 24px 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.thread.is-active {
  opacity: 1;
}

.msg-row {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  overflow: hidden;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 0.8, 0.35, 1);
}

.msg-row.bot {
  justify-items: start;
}

.msg-row.user {
  justify-items: end;
}

.msg-row.is-in {
  grid-template-rows: 1fr;
}

.msg-row > * {
  min-height: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 0.8, 0.35, 1);
}

.msg-row.is-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* Exit: instead of shrinking the row in place, the bubble itself
   scrolls up and fades — like it's continuing off the top of a real
   chat thread. .is-leaving overrides the row's own clip so the
   bubble can travel past its own box on the way out; the outer
   .alfie-body clips (and mask-fades) it once it crosses the frame. */
.msg-row.is-leaving {
  overflow: visible;
}

.msg-row.is-leaving > * {
  opacity: 0;
  transform: translateY(-76px);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.4, 0, 1, 1);
}

.bubble-text {
  max-width: 300px;
  padding: 16px 18px;
  border-radius: 29px;
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.32px;
}

.bubble-text.bot {
  background: #dcebff;
  color: #171717;
}

.bubble-text.user {
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 25px;
  padding: 16px 19px;
}

.bubble-response {
  width: 444px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.response-content {
  width: 100%;
  background: #dcebff;
  border-radius: 29px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.175px;
  color: #3e3e3e;
  width: 100%;
}

.status-row .status-text {
  flex: 1;
  min-width: 0;
}

.status-row .status-caret {
  flex: none;
  width: 12px;
  height: 12px;
  opacity: 0.45;
}

.loading-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.loading-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.loading-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.loading-row .spinner {
  flex: none;
  width: 14px;
  height: 16px;
  animation: alfie-spin 0.9s linear infinite;
}

.loading-row .check {
  flex: none;
  width: 14px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  color: #496288;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.loading-row.is-done .spinner {
  display: none;
}

.loading-row.is-done .check {
  opacity: 1;
  transform: scale(1);
}

.loading-row p {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.35px;
  color: #496288;
}

@keyframes alfie-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.value-card {
  width: 441px;
  max-width: 100%;
  margin-top: 19px;
  background: #ffffff;
  border: 1px solid #d7e4f7;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.value-card-label {
  margin: 0;
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.36px;
  color: #496288;
}

.value-card-title {
  display: flex;
  align-items: center;
  gap: 4px;
}

.value-card-title img {
  width: 20px;
  height: 20px;
  flex: none;
}

.value-card-title span {
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.175px;
  color: #0c1017;
}

.value-card-pills {
  display: flex;
  gap: 8px;
  width: 100%;
}

.value-card-pill {
  flex: 1;
  min-width: 0;
  background: #f2f6fc;
  border-radius: 16px;
  padding: 8px;
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  color: #0c1017;
}

.value-card-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.value-row {
  position: relative;
  width: 100%;
  height: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.value-row .skeleton-bar {
  position: absolute;
  inset: 0;
  height: 8px;
  top: 6px;
  border-radius: 8px;
  background: #f2f6fc;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.value-row .skeleton-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: alfie-shimmer 1.4s ease-in-out infinite;
}

.value-row .fact-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  margin: 0;
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #0c1017;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.value-row.is-loaded .skeleton-bar {
  opacity: 0;
}

.value-row.is-loaded .fact-text {
  opacity: 1;
  transform: translateY(0);
}

@keyframes alfie-shimmer {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

.alfie-input {
  flex: none;
  width: 724px;
  max-width: 92%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 24px 16px;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.alfie-input.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.composer {
  width: 100%;
  height: 68px;
  padding: 20px 16px;
  border-radius: 19px;
  background: #f2f6fc;
  border: 1px solid rgba(42, 53, 70, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.composer-text {
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.1875px;
  color: #2a3546;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.composer-text.is-filled {
  opacity: 1;
}

.composer-caret {
  display: inline-block;
  width: 1px;
  margin-left: 1px;
  background: #2a3546;
  animation: alfie-caret-blink 0.9s steps(1) infinite;
}

@keyframes alfie-caret-blink {
  50% {
    opacity: 0;
  }
}

.composer-send {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: multiply;
  transition: transform 0.12s ease;
}

.composer-send.is-pressed {
  transform: scale(0.85);
}

.composer-send img {
  width: 16px;
  height: 16px;
}

.privacy-link {
  margin: 0;
  font-family: "Sharp Earth OL", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.3px;
  color: #31425b;
  opacity: 0.6;
  mix-blend-mode: multiply;
  text-decoration: underline;
}

/* Short now — just enough to soften the sliver of frame edge right
   behind the text — so the chat bubbles above it stay crisp instead
   of sitting under a blur that used to cover half the card. */
.pebl-blur-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 20%;
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 55%);
}

/* Legibility for the text itself (which now often overlaps the
   frame's lower edge, not just the card background) comes from this
   pale, localized glow instead — same idea as .clairify-text-scrim,
   tinted light instead of dark since the text underneath it is dark. */
.pebl-text-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(
    115% 100% at 10% 100%,
    rgba(230, 238, 249, 0.92) 0%,
    rgba(230, 238, 249, 0.68) 42%,
    rgba(230, 238, 249, 0.28) 68%,
    transparent 88%
  );
}

.pebl-text-block {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 10;
}

.pebl-text-block .card-role {
  color: #0d1f3d;
}

/* The title sits over the Alfie frame's own white/pale UI as often as
   it sits over the card's colorful background, so "Pebl" can wash out
   there without help — a soft white glow that fades out with no hard
   edge, rather than a solid chip shape. */
.pebl-text-block .card-title-row {
  position: relative;
  z-index: 1;
  width: fit-content;
}

.pebl-text-block .card-title-row::before {
  content: "";
  position: absolute;
  inset: -26px -34px;
  z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0) 78%);
  pointer-events: none;
}

.pebl-text-block .card-title {
  color: #0d1f3d;
}

.pebl-text-block .card-blurb {
  max-width: 100%;
  color: #0d1f3d;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .pebl-embed {
    display: none;
  }
}

.card-badge {
  position: absolute;
  top: 30px;
  right: 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--caption);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 5px 12px;
}

/* ---------------- Footer ---------------- */

.site-footer {
  padding: 40px 0 60px;
  border-top: 1px solid var(--line);
  margin-top: 40px;
}

body.landing .site-footer {
  padding: 12px 0;
  margin-top: 0;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.footer-links {
  display: flex;
  gap: 22px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--ink-soft);
}

.footer-links a:hover {
  color: var(--ink);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}

/* ---------------- About page ---------------- */

.about-hero {
  padding: 56px 0 20px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: stretch;
}

.about-hero-photo {
  height: 100%;
}

.about-bio {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.about-bio strong {
  color: var(--ink);
  font-weight: 500;
}

.about-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -22px rgba(21, 19, 15, 0.22);
}

@media (max-width: 720px) {
  .about-hero {
    grid-template-columns: 1fr;
  }

  .about-hero-photo {
    max-width: 320px;
    height: auto;
  }

  .about-hero-photo img {
    height: auto;
    object-fit: initial;
  }
}

.focus-grid {
  margin: 56px 0 80px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.focus-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  background: var(--card-bg);
}

.focus-card h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.focus-card p {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  line-height: 1.5;
}

.photo-collage {
  column-count: 3;
  column-gap: 14px;
  margin-bottom: 80px;
}

.collage-item {
  break-inside: avoid;
  margin-bottom: 14px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(21, 19, 15, 0.22);
}

.collage-item img {
  display: block;
  width: 100%;
}

@media (max-width: 640px) {
  .photo-collage {
    column-count: 2;
    column-gap: 10px;
  }

  .collage-item {
    margin-bottom: 10px;
  }
}

/* ---------------- Project / case-study pages ---------------- */

.project-hero {
  padding: 40px 0 8px;
}

.project-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  max-width: 780px;
  margin-bottom: 16px;
}

.project-oneliner {
  font-family: var(--font-sans);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 620px;
  margin-bottom: 28px;
}

.project-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.project-meta-item span {
  display: block;
}

.project-meta-item .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--caption);
  margin-bottom: 4px;
}

.project-meta-item .value {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.project-body {
  max-width: 720px;
  padding: 48px 0;
}

.project-body section {
  margin-bottom: 48px;
}

.project-body h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
}

.project-body h3 {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 22px 0 8px;
}

.project-body p {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

.project-body ul, .project-body ol {
  margin: 0 0 14px;
  padding-left: 20px;
  font-family: var(--font-sans);
  color: var(--ink-soft);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.6;
}

.project-body li {
  margin-bottom: 6px;
}

.pull-quote {
  border-left: 3px solid var(--line);
  padding: 4px 0 4px 20px;
  margin: 22px 0;
  font-family: var(--font-sans);
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.4;
}

.pull-quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--caption);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px;
  background: var(--card-bg);
}

.stat-card .num {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: 6px;
}

.stat-card .label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  line-height: 1.4;
}

.stat-card .source {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  margin-top: 10px;
}

.stat-card .source strong {
  font-weight: 500;
  color: var(--ink-soft);
}

.asset-note {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  margin: 18px 0;
}

/* ---------------- Clairify AI project page: "Research" visual ----------------
   Pulled from Figma (inbox-era screenshot + the two whiteboard-style
   process diagrams). The Figma frame's own canvas is dark, and the
   title pills (translucent white) were designed against it, so this
   is wrapped in the same dark-card treatment as .ps-frame elsewhere
   on the site rather than sitting directly on the page's cream
   background. Fills the same width as the Stories swipe demo below. */
.research-visual {
  display: flex;
  align-items: stretch;
  gap: 28px;
  width: 100%;
  margin: 24px 0 8px;
  padding: 28px 24px;
  border-radius: 28px;
  background: radial-gradient(120% 140% at 50% 0%, #3c3c3c 0%, #1a1a1a 72%);
  box-shadow: 0 18px 40px -18px rgba(21, 19, 15, 0.18);
  box-sizing: border-box;
}

.research-visual-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.research-visual-col--inbox {
  flex: 0 0 34%;
}

.research-visual-divider {
  flex: 0 0 1px;
  background: rgba(255, 255, 255, 0.14);
}

.research-visual-col--phases {
  flex: 1 1 auto;
  gap: 20px;
}

.research-phase {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.research-pill {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.research-pill h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #000;
  text-align: center;
}

.research-inbox-img {
  width: 100%;
  display: block;
  border-radius: 14px;
  object-fit: cover;
}

.research-phase-img {
  width: 100%;
  display: block;
  border-radius: 10px;
  object-fit: cover;
}

@media (max-width: 640px) {
  .research-visual {
    flex-direction: column;
  }
  .research-visual-divider {
    display: none;
  }
  .research-visual-col--inbox {
    flex-basis: auto;
  }
}

/* ---------------- Clairify AI project page: "Stories" swipe demo ----------------
   Same auto-playing swipe-stack animation as the homepage Clairify
   card (same blue/orange gradient backdrop), reused standalone under
   the Pivot -> Stories copy. Unlike the homepage version, the whole
   card is meant to be visible (no full-bleed crop), so the embed
   fills the box without the homepage's absolute/overflow-hidden
   treatment. */
.stories-demo {
  position: relative;
  width: 100%;
  height: 376px;
  margin: 24px 0 8px;
  border-radius: 28px;
  overflow: hidden;
  background: #f8f8f6 url("../assets/clairify-embed/gradient-frame.svg") center / cover no-repeat;
  box-shadow: 0 18px 40px -18px rgba(21, 19, 15, 0.18);
}

.stories-demo .swipe-embed {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* ---------------- WATG project page: "The Gang Cycle" ----------------
   No card chrome — title + survey subhead on top, then the 3 stat
   containers run left to right below; a pink glow travels across
   them one at a time, cycling on repeat. */
.gang-cycle {
  position: relative;
  margin: 32px 0;
}

.gang-cycle-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.gang-cycle-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.gang-cycle-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.gang-cycle .gang-cycle-title {
  font-family: "Anton", var(--font-sans);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.gang-cycle .gang-cycle-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
}

.gang-cycle-eyebrow em {
  font-style: italic;
  color: var(--ink-soft);
}

.gang-cycle-cards {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
}

.gang-cycle-cards .gang-cycle-card {
  flex: 1;
}

.gang-cycle-card {
  --gang-pink: #ff64a5;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  background: var(--card-bg);
  animation: gang-cycle-card-glow 6s ease-in-out infinite;
}

.gang-cycle-card .num {
  font-family: "Anton", var(--font-sans);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 4px;
}

.gang-cycle-card .label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  line-height: 1.4;
}

.gang-cycle-card:nth-child(2) {
  animation-delay: 2s;
}

.gang-cycle-card:nth-child(3) {
  animation-delay: 4s;
}

@keyframes gang-cycle-card-glow {
  0%,
  96%,
  100% {
    border-color: var(--line);
  }
  8%,
  26% {
    border-color: var(--gang-pink);
  }
}

@media (max-width: 640px) {
  .gang-cycle-cards {
    flex-direction: column;
  }
}

/* ---------------- WATG project page: "Journey of a Beginner Knitter" ----------------
   Compact flow diagram (source boxes -> linear chain -> troubleshoot
   loop -> quit), sized to fit inside the article column so it never
   overflows the viewport. Reveals left-to-right, one group at a time,
   via .scroll-fade (js/scroll-fade.js) toggling .is-visible on .kj. */
.kj {
  width: 100%;
  margin: 8px 0 0;
}

/* Beyond ~1100px the article column (992px, wrap's content width) has
   enough slack past the 720px column to safely let this specific
   diagram run wider — plain fixed-pixel width, no vw/percentage
   centering math (that's what broke the earlier full-bleed attempt). */
@media (min-width: 1100px) {
  .kj {
    width: 960px;
  }
}

.kj-svg {
  display: block;
  width: 100%;
  height: auto;
}

.kj-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.kj.is-visible .kj-d0 {
  transition-delay: 0s;
}
.kj.is-visible .kj-d1 {
  transition-delay: 0.12s;
}
.kj.is-visible .kj-d2 {
  transition-delay: 0.24s;
}
.kj.is-visible .kj-d3 {
  transition-delay: 0.36s;
}
.kj.is-visible .kj-d4 {
  transition-delay: 0.48s;
}
.kj.is-visible .kj-d5 {
  transition-delay: 0.6s;
}
.kj.is-visible .kj-d6 {
  transition-delay: 0.72s;
}
.kj.is-visible .kj-d7 {
  transition-delay: 0.86s;
}

.kj.is-visible .kj-reveal {
  opacity: 1;
  transform: none;
}

.kj-box {
  fill: var(--bg);
  stroke: var(--gang-pink, #ff64a5);
  stroke-width: 1.5;
}

.kj-box--big {
  fill: none;
}

.kj-box-text {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.01em;
  fill: var(--ink);
}

.kj-node-text {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.01em;
  fill: var(--ink);
}

.kj-quad-text {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
  fill: var(--ink);
}

.kj-center-text {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  fill: #ff64a5;
}

.kj-pink {
  fill: #ff64a5;
}

.kj-arrow {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
}

.project-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 18px 0;
  box-shadow: 0 18px 40px -18px rgba(21, 19, 15, 0.18);
}

.context-image {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  margin: 18px 0;
  box-shadow: 0 18px 40px -18px rgba(21, 19, 15, 0.18);
}

/* Generic fade-up-on-scroll utility, triggered by js/scroll-fade.js */
.scroll-fade {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-fade.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------- NYT project page: Key Features 2-column rows ----------------
   Copy on the left, its matching portrait screen-recording on the
   right — same rounded-corner/shadow treatment as .project-video
   above, just a portrait (848x1316) aspect instead of 16:9. Stacks to
   copy-then-video per feature on narrow screens. */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 40px;
}

.feature-row:last-child {
  margin-bottom: 0;
}

.feature-copy h3:first-child {
  margin-top: 0;
}

/* The source videos have a solid black backdrop baked into the pixels
   behind each phone mockup (confirmed by pulling a frame — not
   something our own CSS was adding). Since it can't be made
   transparent without re-exporting or chroma-keying, .feature-video-frame
   crops in tighter via a narrower aspect-ratio + object-fit:cover
   (zooming past most of the black margin) and gives the frame itself
   a soft background matching the page instead of flat black, so
   whatever sliver is left at the edges reads as intentional framing. */
.feature-video-frame {
  aspect-ratio: 0.5;
  border-radius: 55px;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f1ea 0%, #ebe8de 100%);
  box-shadow: 0 18px 40px -18px rgba(21, 19, 15, 0.18);
}

/* Freestanding footage frames (WATG Key Features) — no rounded corners. */
.feature-video-frame:has(.feature-video--free) {
  border-radius: 0;
}

.feature-video {
  display: block;
  width: 100%;
  aspect-ratio: 0.5;
  object-fit: cover;
  /* Shifted a few px left of center — the phone mockup's right edge
     has the power-button bump, so a dead-center crop reads as
     tighter/less breathing room on the left than the right. */
  object-position: 46% center;
}

/* Freestanding footage (no phone-frame mockup baked in, so no need to
   crop out a black backdrop) — show the whole clip uncropped instead. */
.feature-video--free {
  object-fit: contain;
  object-position: center;
}

@media (max-width: 640px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ---------------- NYT project page: playlist-setup animation ----------------
   Pulled as-is from the peer session's artifact (colors, type, spacing,
   timing, copy all untouched) — only the class/id names are prefixed
   "ps-"/"ps", since the artifact's own ".screen"/".screen.is-active"
   collide with the landing page's NYT phone-frame embed, which already
   owns those names. Custom properties are scoped to .ps-frame instead
   of :root for the same reason. Sized to ~520px max-width, matching
   the notification-loop widget under Project Overview. */
.ps-frame {
  --ps-stage-1: #1a1a1a;
  --ps-stage-2: #3c3c3c;
  --ps-card: #ffffff;
  --ps-card-ring: rgba(255, 255, 255, 0.25);
  --ps-ink: #000000;
  --ps-label: #5a5a5a;
  --ps-line: #000000;
  --ps-selected: #c1d0ee;
  --ps-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ps-sans: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;

  max-width: 520px;
  margin: 28px auto;
  padding: 24px 16px;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 140% at 50% 10%, var(--ps-stage-2) 0%, var(--ps-stage-1) 72%);
  display: flex;
  justify-content: center;
}

/* .ps-viewport reserves the (much smaller) on-screen footprint —
   sized to match the notification-loop widget's compactness. Its
   height is set in JS (see nyt-playlist-setup.js) from the card's own
   natural, unscaled height, which changes between screen A and screen
   B — a fixed CSS height here would either clip screen B's taller
   content or leave a gap under screen A's shorter content.
   .ps-stage keeps its native ~490px design width (the width its
   vw-based clamp()s and day-circle sizes were actually tuned for) and
   is scaled down as a whole via transform, rather than being narrowed
   by max-width the way an earlier version of this did — narrowing the
   layout box directly left those vw-sized children too big for it,
   which is what was overflowing/wrapping and cutting off the days
   row. */
.ps-viewport {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.ps-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 490px;
  transform-origin: top left;
}

.ps-card {
  position: relative;
  width: 100%;
  background: var(--ps-card);
  border: 10px solid var(--ps-card-ring);
  border-radius: 30px;
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.55), 0 14px 28px -16px rgba(0, 0, 0, 0.4);
  padding: clamp(34px, 7vw, 60px) clamp(24px, 6.5vw, 45px);
  min-height: 373px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.ps-card.is-hidden {
  opacity: 0;
  transform: scale(0.985);
}

.ps-screen {
  display: none;
  flex-direction: column;
}

.ps-screen.is-active {
  display: flex;
}

.ps-title-serif {
  margin: 0;
  font-family: var(--ps-serif);
  font-weight: 400;
  font-size: clamp(19px, 4.6vw, 23px);
  line-height: 1.25;
  color: var(--ps-ink);
  text-wrap: balance;
}

.ps-name-block {
  margin-top: 52px;
}

.ps-name-input-row {
  position: relative;
  padding-bottom: 14px;
}

.ps-typed-line {
  display: inline;
  font-family: var(--ps-serif);
  font-weight: 700;
  font-size: clamp(17px, 4.2vw, 21px);
  color: var(--ps-ink);
}

.ps-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--ps-ink);
  vertical-align: -3px;
  margin-left: 2px;
  animation: ps-blink 1s step-end infinite;
}

@keyframes ps-blink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

.ps-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ps-line);
}

.ps-action-row {
  margin-top: 28px;
  display: flex;
  justify-content: flex-end;
}

.ps-pill-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ps-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--ps-ink);
  cursor: default;
  padding: 8px 4px;
  border-radius: 999px;
  transform: scale(1);
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.ps-pill-btn.is-pressed {
  transform: scale(0.92);
  opacity: 0.55;
}

.ps-pill-btn svg {
  display: block;
}

.ps-time-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ps-line);
}

.ps-time-row + .ps-time-row {
  margin-top: 26px;
}

.ps-time-block {
  margin-top: 44px;
}

.ps-row-label {
  font-family: var(--ps-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ps-label);
  flex: 0 0 auto;
}

.ps-row-fill {
  flex: 1 1 auto;
}

.ps-row-value {
  font-family: var(--ps-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ps-ink);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.ps-repeat-block {
  margin-top: 34px;
}

.ps-repeat-label {
  font-family: var(--ps-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ps-label);
}

.ps-days-row {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.ps-day-circle {
  flex: 0 0 auto;
  width: clamp(32px, 8.2vw, 45px);
  height: clamp(32px, 8.2vw, 45px);
  border-radius: 50%;
  border: 1.4px solid var(--ps-line);
  background: var(--ps-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ps-sans);
  font-weight: 600;
  font-size: clamp(13px, 3.4vw, 16.5px);
  color: var(--ps-ink);
  transition: background-color 0.35s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ps-day-circle.is-selected {
  background: var(--ps-selected);
  transform: scale(1.08);
}

.ps-create-row {
  margin-top: 26px;
  display: flex;
  justify-content: flex-end;
}

@keyframes ps-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(6px);
  }
  60% {
    opacity: 1;
    transform: scale(1.015) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ps-screen.is-popping {
  animation: ps-pop-in 0.48s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes ps-fade-slide-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.ps-screen.is-leaving {
  animation: ps-fade-slide-out 0.28s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .ps-caret,
  .ps-day-circle,
  .ps-pill-btn,
  .ps-card,
  .ps-screen {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------- NYT project page: journey diagrams ----------------
   Two separate diagrams, both self-contained SVGs. "Current Journey"
   starts fully plain (no stage boxes, no highlight, no yellow — see
   the reference screenshot), then reveals its own opportunity cells
   in place (.is-highlighted). Once that's held a beat, the "Updated
   User Journey" diagram fades/slides in underneath (.is-visible) so
   both stay on screen together for direct comparison — see
   nyt-journey-diagram.js for the timing.

   These diagrams are wider than the ~720px article column can hold at
   a legible size (7-8 nodes across), so .journey-diagram-bleed breaks
   them out to a wider, still-centered container — see that rule below
   before assuming the 720px .project-body max-width applies here.

   The SVGs are laid out on a ~1160-unit-wide canvas rendering into
   that wider (~1000px) container — close enough to 1:1 that the
   font-size values below (13-15px) are close to their actual on-screen
   size. Circle radius is 52 units: text inside a circle must fit
   within roughly 1.7 * radius of width, so keep circle-text lines
   under ~13 characters or the text will spill past the circle's edge
   (this exact bug is why these numbers are what they are — don't bump
   font-size without also re-checking line lengths against the radius). */

/* Plain fixed-pixel width, no vw/percentage centering math — that
   trick resolves "left: 50%" against the 720px article column (its
   real containing block), not the viewport, so it drifted the whole
   diagram left of the header above it. Left edge now stays flush with
   the article column; width only grows rightward into the wrap's
   unused right-hand slack, gated to viewports with room for it. */
.journey-diagram-bleed {
  width: 100%;
}

@media (min-width: 1100px) {
  .journey-diagram-bleed {
    width: 960px;
  }
}

.journey-diagram {
  max-width: 1000px;
  margin: 22px 0 8px;
  padding: 0 24px 0 0;
}

.journey-diagram-svg {
  display: block;
  width: 100%;
  height: auto;
}

.journey-diagram--updated {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.journey-diagram--updated.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.jd-reveal {
  opacity: 0;
  transition: opacity 0.9s ease;
}

.journey-diagram.is-highlighted .jd-reveal {
  opacity: 1;
}

.jd-stage-box {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
}

.jd-stage-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  fill: var(--ink-faint);
  text-transform: uppercase;
}

.jd-line {
  fill: none;
  stroke: #cfcabb;
  stroke-width: 1.5;
}

.jd-line-loop {
  opacity: 0.7;
}

.jd-loop-label,
.jd-inline-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  fill: var(--ink-faint);
  text-transform: uppercase;
}

.jd-inline-label {
  font-size: 9.5px;
}

.jd-circle--fill {
  fill: #e3bd5c;
  stroke: none;
}

.jd-circle--outline {
  fill: var(--bg);
  stroke: #cfcabb;
  stroke-width: 1.5;
}

/* Default state matches .jd-circle--outline; .is-highlighted on the
   diagram wrapper animates these specific cells to yellow in place. */
.jd-circle--target {
  fill: var(--bg);
  stroke: #cfcabb;
  stroke-width: 1.5;
  transition: fill 0.9s ease, stroke 0.9s ease;
}

.journey-diagram.is-highlighted .jd-circle--target {
  fill: #e3bd5c;
  stroke: #e3bd5c;
}

.jd-circle-text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  fill: #1a1a1a;
}

.jd-circle-text--faint {
  fill: var(--ink-faint);
}

.jd-callout-bar {
  fill: #e3bd5c;
}

.jd-callout-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  fill: #1a1a1a;
}

.jd-callout-body {
  font-family: var(--font-sans);
  font-size: 11.5px;
  fill: var(--ink-soft);
}

.jd-wordmark {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ink);
}

/* ---------------- NYT project page: notification pop-in loop ----------------
   Lives inline in the "Project Overview" section, between the body copy and
   the "Context" heading. Prefixed "overview-notif-*" (not "notif-*") since
   the landing page's own NYT card already owns that class family for its
   phone-frame lock-screen screen — same Figma notification design, but a
   separate, differently-sized instance, so the two must not share rules. */
/* Frame reserves the (bigger, responsive) layout footprint; the widget
   itself stays a fixed 430x202 native canvas — same Figma coordinate
   space everything inside it was tuned to — and is scaled up to fill
   the frame via JS (see nyt-notification-loop.js), the same
   fixed-canvas-plus-transform-scale approach used for the Alfie and
   Pebl embeds elsewhere on the site. */
.overview-notif-frame {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 430 / 202;
  margin: 28px auto 32px;
}

.overview-notif-widget {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 430px;
  height: 202px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 50px rgba(21, 19, 15, 0.22);
}

.overview-notif-widget::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 10px solid rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  pointer-events: none;
  z-index: 5;
}

.overview-notif-widget-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.overview-notif-card {
  position: relative;
  z-index: 3;
  /* Exact values from the source notification-loop-style.css (.notif-card):
     374px wide, 13px padding, 10px gap — sized in proportion to the
     430x202 native frame it sits in, so scaling the frame up (see
     fitScale in nyt-notification-loop.js) scales this by the same
     factor and keeps that exact ratio. */
  width: 374px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(-28px) scale(0.92);
  /* System font, not the site's DM Sans/Inter — those are only loaded
     at weights up to 500 here, so .overview-notif-title's 700 was
     falling back/synthesizing instead of rendering truly bold. Also
     reads correctly as a native iOS notification. */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

.overview-notif-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.51) 0%, rgba(255, 255, 255, 0.51) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.overview-notif-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.overview-notif-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-notif-icon {
  width: 28.65px;
  height: 28.65px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}

.overview-notif-source,
.overview-notif-time {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: rgba(102, 102, 102, 0.53);
  white-space: nowrap;
}

.overview-notif-text {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Both are <p> tags, and this page's own ".project-body p" rule
   (class+element, specificity 0,1,1) otherwise beats a bare
   ".overview-notif-title" (0,1,0) regardless of source order — it was
   silently winning and overriding both the font-family and the bold
   weight below. Scoped under .overview-notif-text (0,2,0) to reliably
   beat it. */
.overview-notif-text .overview-notif-title {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #000;
}

.overview-notif-text .overview-notif-body {
  margin: 0;
  font-size: 15px;
  line-height: 18px;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  color: #000;
}

.overview-notif-card.overview-notif-in {
  animation: overview-notif-pop-in 0.6s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

.overview-notif-card.overview-notif-out {
  animation: overview-notif-pop-out 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes overview-notif-pop-in {
  0% {
    opacity: 0;
    transform: translateY(-52px) scale(0.8);
  }
  55% {
    opacity: 1;
    transform: translateY(8px) scale(1.05);
  }
  78% {
    opacity: 1;
    transform: translateY(-3px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes overview-notif-pop-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-16px) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .overview-notif-card.overview-notif-in,
  .overview-notif-card.overview-notif-out {
    animation-duration: 0.01ms !important;
  }
}

.next-project {
  border-top: 1px solid var(--line);
  padding: 40px 0 60px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.next-project .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--caption);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.next-project .title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.next-project a {
  color: var(--role-accent);
  transition: opacity 0.15s ease;
}

.next-project a:hover {
  opacity: 0.7;
}

.locked-banner {
  margin: 24px 0 8px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: #f1f0eb;
  border: 1px solid var(--line);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------------- Custom pencil cursor ---------------- */

body.pencil-active {
  cursor: none;
}

body.pencil-active a,
body.pencil-active button {
  cursor: pointer;
}

#pencil-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.pencil-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pencil-cursor.is-visible {
  opacity: 1;
}

.pencil-cursor-dot {
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--ink);
  transform: scale(1);
  transition: transform 0.15s ease-out;
}

.pencil-cursor.is-drawing .pencil-cursor-dot {
  transform: scale(1.9);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 640px) {
  .stack {
    height: 440px;
  }

  .card-face {
    padding: 24px 22px 26px;
  }

  body.landing .stack-section {
    margin: 0 -24px;
    padding: 8px 10px 0;
  }

  body.landing .stack-outer {
    max-width: 100%;
  }

  .focus-grid {
    grid-template-columns: 1fr;
  }

  .project-meta-row {
    gap: 18px 26px;
  }
}

/* ---------------- Clairify AI project page: "Multiple apps" row ----------------
   Pulled from Figma (node 79:1659, "Multipleapps") — a horizontal dock
   of connected-tool icons, each with a red notification-count badge,
   sitting in a soft floating pill. Horizontally scrollable on narrow
   screens rather than wrapping, since the badges only read cleanly
   in a single row. */
.multiapps {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px;
  padding: 20px;
  margin: 18px 0;
  box-shadow: 0 18px 40px -18px rgba(21, 19, 15, 0.2);
}

.multiapps-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.multiapps-icon {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 22%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08), 0 2px 3px rgba(0, 0, 0, 0.08);
}

.multiapps-icon img {
  width: 66%;
  height: 66%;
  object-fit: contain;
}

.multiapps-icon--dark {
  background: #303030;
}

.multiapps-icon--green {
  background: #2ca01c;
}

.multiapps-icon--blue {
  background: #1868db;
}

.multiapps-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #fb2c36;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  white-space: nowrap;
  z-index: 1;
}

@media (max-width: 640px) {
  .multiapps {
    border-radius: 20px;
    padding: 12px;
  }

  .multiapps-row {
    gap: 6px;
  }

  .multiapps-badge {
    top: -6px;
    right: -6px;
    font-size: 8px;
    padding: 2px 4px;
  }
}

/* ================================================================
   Clairify AI project page: Solution — 4 product-moment cards
   Pulled from Figma (node 79:1075 section): Connect your stack,
   Build your profile, Swipe to delegate, Delegate to Claire.

   Layout: 4-across on wide screens, 2-across mid-width, 1-across
   (stacked) narrow — see media queries below.

   Reveal: cards start dimmed except the first. js/clairify-solution-cards.js
   adds .is-active to one card at a time, left to right; earlier cards
   KEEP .is-active (stay full opacity) as later ones activate, so the
   row builds up cumulatively. Each card's own micro-animation is a
   plain CSS @keyframes gated on `.sol-card.is-active` — removing
   .is-active (on scroll-out) resets it so re-entering replays fresh.

   Scale-to-fit: each .sol-card-inner is a fixed-size native canvas
   (same convention as .ps-stage/.overview-notif-widget elsewhere on
   this site); js/clairify-solution-cards.js scales it down to fit
   whatever width the grid column actually gives it. */

.sol-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 0;
}

.sol-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  opacity: 0.32;
  filter: grayscale(0.5);
  transition: opacity 0.7s ease, filter 0.7s ease;
}

.sol-card.is-active {
  opacity: 1;
  filter: none;
}

.sol-card-inner {
  width: 656px;
  height: 571px;
  transform-origin: top left;
  background: #fff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(21, 19, 15, 0.22);
}

.sol-title-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 135px;
  flex-shrink: 0;
  padding: 32px;
  box-sizing: border-box;
}

.sol-title-pill h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 71px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 27px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-align: center;
  margin: 0;
  box-sizing: border-box;
}

/* ---------------- Card 1: Connect your stack ---------------- */

.sol-connect-grid {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 115px);
  row-gap: 30px;
  column-gap: 57px;
  align-content: center;
  justify-content: center;
  padding: 0 24px 40px;
  box-sizing: border-box;
}

.sol-app-icon {
  position: relative;
  width: 115px;
  height: 115px;
  border-radius: 27px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 9px 7px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: scale(0.4);
}

.sol-app-icon--dark {
  background: #303030;
}

.sol-app-icon img {
  width: 64%;
  height: 64%;
  object-fit: contain;
}

.sol-app-badge {
  position: absolute;
  top: -13px;
  right: -13px;
  background: #fb2c36;
  border: 4px solid #fb2c36;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
}

.sol-card[data-card="connect"].is-active .sol-app-icon {
  animation: solPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.sol-card[data-card="connect"].is-active .sol-app-icon[data-pop="0"] { animation-delay: 0.1s; }
.sol-card[data-card="connect"].is-active .sol-app-icon[data-pop="1"] { animation-delay: 0.32s; }
.sol-card[data-card="connect"].is-active .sol-app-icon[data-pop="2"] { animation-delay: 0.54s; }
.sol-card[data-card="connect"].is-active .sol-app-icon[data-pop="3"] { animation-delay: 0.76s; }

@keyframes solPopIn {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------------- Card 2: Build your profile ---------------- */

.sol-build-panel {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-build-panel-inner {
  width: 516px;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 7px solid rgba(209, 209, 209, 0.23);
  border-radius: 24px;
  box-shadow: 0 0 23px 2px rgba(45, 45, 45, 0.23);
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sol-build-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.sol-build-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-build-icon svg {
  width: 16px;
  height: 16px;
}

.sol-build-field {
  flex: 1;
  min-width: 0;
}

.sol-card-inner .sol-build-label {
  font-family: var(--font-sans);
  font-size: 13px;
  color: #393939;
  margin: 0 0 10px;
}

.sol-slider-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.sol-card-inner .sol-slider-value {
  font-family: var(--font-sans);
  font-size: 19px;
  color: #393939;
}

.sol-card-inner .sol-slider-def {
  font-family: var(--font-sans);
  font-size: 12px;
  color: #393939;
}

.sol-slider-track {
  position: relative;
  height: 5px;
  border-radius: 5px;
  background: var(--bg);
  margin-bottom: 8px;
}

.sol-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 22%;
  background: #00818d;
  border-radius: 4px;
}

.sol-slider-knob {
  position: absolute;
  left: 22%;
  top: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #00818d;
  transform: translate(-50%, -50%);
}

.sol-card-inner .sol-slider-minmax {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 12px;
  color: #393939;
}

.sol-card[data-card="build"].is-active .sol-slider-fill,
.sol-card[data-card="build"].is-active .sol-slider-knob {
  animation: solSliderMove 2.2s ease-in-out both;
  animation-delay: 0.3s;
}

@keyframes solSliderMove {
  0% {
    left: 22%;
  }
  35% {
    left: 68%;
  }
  65% {
    left: 10%;
  }
  100% {
    left: 22%;
  }
}

.sol-slider-fill {
  animation-timing-function: ease-in-out;
}

.sol-card[data-card="build"].is-active .sol-slider-fill {
  animation-name: solSliderFillMove;
}

@keyframes solSliderFillMove {
  0% {
    width: 22%;
  }
  35% {
    width: 68%;
  }
  65% {
    width: 10%;
  }
  100% {
    width: 22%;
  }
}

.sol-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.sol-card-inner .sol-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  border: 1px solid #e7e7e6;
  font-family: var(--font-ui);
  font-size: 14px;
  color: #393939;
  background: transparent;
}

.sol-card-inner .sol-chip--selected {
  background: var(--bg);
  border-color: rgba(142, 142, 147, 0.3);
}

.sol-chip-check {
  display: none;
}

.sol-card-inner .sol-chip--selected .sol-chip-check {
  display: block;
}

.sol-card[data-card="build"].is-active .sol-chip[data-chip="friendly"] {
  animation: solChipClick 1.1s ease both;
  animation-delay: 2.7s;
}

@keyframes solChipClick {
  0% {
    background: transparent;
    border-color: #e7e7e6;
    transform: scale(1);
  }
  25% {
    transform: scale(0.92);
  }
  45% {
    background: var(--bg);
    border-color: rgba(142, 142, 147, 0.3);
    transform: scale(1.05);
  }
  70% {
    background: var(--bg);
    border-color: rgba(142, 142, 147, 0.3);
    transform: scale(1);
  }
  100% {
    background: transparent;
    border-color: #e7e7e6;
    transform: scale(1);
  }
}

.sol-build-row2 {
  display: flex;
  gap: 18px;
}

.sol-build-select {
  flex: 1;
  min-width: 0;
}

.sol-select-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border: 1px solid #e7e7e6;
  border-radius: 10px;
  padding: 13px;
  box-sizing: border-box;
}

.sol-card-inner .sol-select-main {
  font-family: var(--font-sans);
  font-size: 14px;
  color: #393939;
  margin: 0;
}

.sol-card-inner .sol-select-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #8e8e93;
  margin: 0;
}

.sol-caret {
  color: #393939;
  font-size: 13px;
}

/* ---------------- Card 3: Swipe to delegate ---------------- */

.sol-swipe-stage {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0 24px;
  box-sizing: border-box;
}

.sol-swipe-deck {
  position: relative;
  width: 236px;
  height: 100%;
  max-height: 380px;
}

.sol-swipe-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  border: 8px solid rgba(209, 209, 209, 0.23);
  border-radius: 26px;
  box-shadow: 0 0 25px 2px rgba(45, 45, 45, 0.2);
  box-sizing: border-box;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  opacity: 1;
  overflow: hidden;
}

.sol-swipe-card[data-swipe-card="1"] { z-index: 3; }
.sol-swipe-card[data-swipe-card="2"] { z-index: 2; }
.sol-swipe-card[data-swipe-card="3"] { z-index: 1; }

.sol-swipe-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sol-swipe-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #b8e6e6;
  object-fit: cover;
}

.sol-swipe-who {
  flex: 1;
  min-width: 0;
}

.sol-card-inner .sol-swipe-name {
  font-family: var(--font-serif);
  font-size: 15px;
  color: #1c1c1e;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-card-inner .sol-swipe-email {
  font-family: var(--font-sans);
  font-size: 11px;
  color: #7a6370;
  margin: 0;
}

.sol-card-inner .sol-swipe-date {
  font-family: var(--font-sans);
  font-size: 11px;
  color: #7a6370;
  margin: 0;
  flex-shrink: 0;
}

.sol-swipe-divider {
  height: 1px;
  background: #f4efe6;
  width: 100%;
}

.sol-card-inner .sol-swipe-title {
  font-family: var(--font-serif);
  font-size: 16px;
  color: #1c1c1e;
  margin: 0;
}

.sol-swipe-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sol-card-inner .sol-swipe-list li {
  position: relative;
  padding-left: 13px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: #1a1a1a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-swipe-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(197, 197, 197, 0.8);
}

.sol-card-inner .sol-swipe-action {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-card-inner .sol-swipe-action strong {
  font-family: var(--font-serif);
  font-weight: 700;
}

.sol-swipe-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: #4fa3ad;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 6px 11px;
  border-radius: 10px;
}

.sol-swipe-pill img {
  width: 11px;
  height: 11px;
}

.sol-swipe-chat {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(2, 6, 24, 0.1);
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sol-card-inner .sol-swipe-chat-text {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(28, 28, 30, 0.4);
}

.sol-swipe-chat-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sol-swipe-chat-dialog {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-swipe-chat-send {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #393939;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Default (inactive) state: fanned spread */
.sol-swipe-card[data-swipe-card="1"] { transform: translateX(-20px) rotate(-7deg); }
.sol-swipe-card[data-swipe-card="2"] { transform: translateY(-5px) rotate(0deg) scale(0.98); }
.sol-swipe-card[data-swipe-card="3"] { transform: translateX(20px) rotate(7deg); }

.sol-card[data-card="swipe"].is-active .sol-swipe-card[data-swipe-card="1"] {
  animation: solSwipe1 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.sol-card[data-card="swipe"].is-active .sol-swipe-card[data-swipe-card="2"] {
  animation: solSwipe2 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.sol-card[data-card="swipe"].is-active .sol-swipe-card[data-swipe-card="3"] {
  animation: solSwipe3 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes solSwipe1 {
  0% { transform: translateX(-20px) rotate(-7deg); opacity: 1; }
  18% { transform: translateX(-20px) rotate(-7deg); opacity: 1; }
  30%, 40% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  52% { transform: translateX(160%) rotate(22deg) scale(1); opacity: 0; }
  99.9% { transform: translateX(160%) rotate(22deg) scale(1); opacity: 0; }
  100% { transform: translateX(-20px) rotate(-7deg); opacity: 1; }
}

@keyframes solSwipe2 {
  0% { transform: translateY(-5px) rotate(0deg) scale(0.98); opacity: 1; }
  18% { transform: translateY(-5px) rotate(0deg) scale(0.98); opacity: 1; }
  30% { transform: translateY(4px) rotate(0deg) scale(0.97); opacity: 1; }
  46%, 58% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  70% { transform: translateX(-160%) rotate(-22deg) scale(1); opacity: 0; }
  99.9% { transform: translateX(-160%) rotate(-22deg) scale(1); opacity: 0; }
  100% { transform: translateY(-5px) rotate(0deg) scale(0.98); opacity: 1; }
}

@keyframes solSwipe3 {
  0% { transform: translateX(20px) rotate(7deg); opacity: 1; }
  18% { transform: translateX(20px) rotate(7deg); opacity: 1; }
  30% { transform: translateY(8px) rotate(0deg) scale(0.94); opacity: 1; }
  64%, 76% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  88% { transform: translateY(-160%) rotate(0deg) scale(1); opacity: 0; }
  99.9% { transform: translateY(-160%) rotate(0deg) scale(1); opacity: 0; }
  100% { transform: translateX(20px) rotate(7deg); opacity: 1; }
}

/* ---------------- Card 4: Delegate to Claire ---------------- */

.sol-claire-phone {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-claire-phone-inner {
  width: 250px;
  max-width: 100%;
  height: 100%;
  max-height: 404px;
  box-sizing: border-box;
  background: #fff;
  border: 8px solid rgba(209, 209, 209, 0.23);
  border-radius: 26px;
  box-shadow: 0 0 25px 2px rgba(45, 45, 45, 0.2);
  padding: 20px 16px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sol-card-inner .sol-claire-header {
  font-family: var(--font-serif);
  font-size: 15px;
  color: #1c1c1e;
  text-align: center;
  margin: 0 0 14px;
}

.sol-claire-body {
  flex: 1;
  position: relative;
  min-height: 0;
}

.sol-claire-welcome {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 1;
}

.sol-claire-spark img {
  width: 38px;
  height: 38px;
}

.sol-card-inner .sol-claire-title {
  font-family: var(--font-serif);
  font-size: 15px;
  color: #1c1c1e;
  margin: 0;
}

.sol-card-inner .sol-claire-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(28, 28, 30, 0.6);
  margin: 0;
}

.sol-chat-thread {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 2px;
  overflow: hidden;
}

.sol-chat-bubble {
  max-width: 84%;
  border-radius: 14px;
  padding: 9px 12px;
  opacity: 0;
  transform: translateY(8px);
  box-sizing: border-box;
}

.sol-chat-bubble--user {
  align-self: flex-end;
  background: #393939;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  border-bottom-right-radius: 4px;
}

.sol-chat-bubble--thinking {
  align-self: flex-start;
  background: var(--bg);
  border-bottom-left-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}

.sol-thinking-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8e8e93;
  animation: solThinkingBounce 1s ease-in-out infinite;
}

.sol-thinking-dot:nth-child(2) { animation-delay: 0.15s; }
.sol-thinking-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes solThinkingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.sol-chat-bubble--claire {
  align-self: flex-start;
  background: var(--bg);
  border-bottom-left-radius: 4px;
}

.sol-card-inner .sol-chat-bubble--claire p {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.sol-card-inner .sol-chat-done {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  color: #00818d;
  margin: 0;
}

.sol-claire-prompts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: hidden;
  padding: 8px 0;
  max-height: 160px;
  transform: translateY(0);
  opacity: 1;
}

.sol-prompt-chip {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  background: #fff;
  border: 1px solid rgba(2, 6, 24, 0.1);
  border-radius: 9px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sol-card-inner .sol-prompt-title {
  font-family: var(--font-ui);
  font-size: 11px;
  color: #020618;
  display: block;
}

.sol-card-inner .sol-prompt-sub {
  font-family: var(--font-ui);
  font-size: 9px;
  color: #62748e;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sol-claire-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-radius: 14px;
  padding: 12px 14px;
  gap: 10px;
  margin-top: 8px;
}

.sol-claire-input-text {
  position: relative;
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sol-claire-input-placeholder,
.sol-claire-input-filled {
  display: block;
}

.sol-claire-input-placeholder {
  color: rgba(28, 28, 30, 0.4);
}

.sol-claire-input-filled {
  position: absolute;
  left: 0;
  top: 0;
  color: #1c1c1e;
  clip-path: inset(0 100% 0 0);
}

.sol-claire-send {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #393939;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sol-card[data-card="delegate"].is-active .sol-prompt-chip[data-prompt="1"] {
  animation: solPromptPress 0.6s ease;
  animation-delay: 1s;
}

@keyframes solPromptPress {
  0% { transform: scale(1); background: #fff; }
  40% { transform: scale(0.93); background: var(--bg); }
  100% { transform: scale(1); background: #fff; }
}

.sol-card[data-card="delegate"].is-active .sol-claire-input-placeholder {
  animation: solFadeOut 0.3s ease both;
  animation-delay: 1.6s;
}

.sol-card[data-card="delegate"].is-active .sol-claire-input-filled {
  animation: solInputFill 0.5s steps(24) both;
  animation-delay: 1.7s;
}

@keyframes solInputFill {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.sol-card[data-card="delegate"].is-active .sol-claire-prompts {
  animation: solPromptsHide 0.5s ease both;
  animation-delay: 2.1s;
}

@keyframes solPromptsHide {
  to {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }
}

.sol-card[data-card="delegate"].is-active .sol-claire-welcome {
  animation: solFadeOut 0.5s ease both;
  animation-delay: 2.1s;
}

.sol-card[data-card="delegate"].is-active .sol-chat-bubble--user {
  animation: solFadeIn 0.45s ease both;
  animation-delay: 2.4s;
}

.sol-card[data-card="delegate"].is-active .sol-chat-bubble--thinking {
  animation: solThinkingShow 1.6s ease both;
  animation-delay: 2.9s;
}

@keyframes solThinkingShow {
  0% { opacity: 0; transform: translateY(8px); }
  15%, 80% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}

.sol-card[data-card="delegate"].is-active .sol-chat-bubble--claire {
  animation: solFadeIn 0.5s ease both;
  animation-delay: 4.3s;
}

@keyframes solFadeOut {
  to {
    opacity: 0;
  }
}

@keyframes solFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------- Clairify AI project page: Tools ----------------
   A row of tool icons (Claude, Figma, Figma Make, Excalidraw) inside
   the project-meta-row header, alongside Role / Platforms / Impact. */
.tools-mini-stack {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tools-mini-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 10px -3px rgba(21, 19, 15, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 560px) {
  .sol-cards {
    grid-template-columns: 1fr;
  }
}