/* ==========================================================================
   Slate, homepage, plus the components the interior pages borrow from it
   (the conversation, the answer demo, the product page edit, the ad mock,
   the checker, the AI asks, news rows, the work tiles).
   Running order, after Clay: hero, film, what we do, ask them about us,
   inside the answer, the work, the checker, the people, notes, FAQ.
   ========================================================================== */

/* ---------- 1. hero ---------- */
.hero {
  position: relative;
  padding-top: calc(var(--hdr-h) + clamp(48px, 9vh, 120px));
  padding-bottom: clamp(64px, 9vw, 128px);
}
/* Clay's hero sits on a soft gray field that the reel then overlaps */
.hero-bg { position: absolute; inset: 0 0 -38vh; z-index: -1; background: linear-gradient(180deg, #f3f3f3 0%, #f0f0f0 60%, rgba(243, 244, 246, 0) 100%); }
.hero-shards { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5.5vw, 96px);
  align-items: center;
}
.hero-title {
  margin: 22px 0 26px;
  font-size: clamp(3rem, 6.25vw, 5.625rem); font-weight: 600;
  letter-spacing: -0.045em; line-height: 1.02;
}
.hero-desc { max-width: 30ch; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; color: var(--fg-muted); }

/* the example conversation */
.chat {
  position: relative; z-index: 2;
  padding: clamp(22px, 2.1vw, 32px);
  background: #fff; color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 40px 90px -42px rgba(0, 0, 0, 0.32);
}
.chat-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--gray); }
.chat-top i { display: inline-flex; gap: 5px; }
.chat-top i::before, .chat-top i::after, .chat-top i b { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, 0.18); }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chat-chips button {
  height: 40px; padding: 0 16px;
  border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 999px;
  font-size: 0.9375rem; font-weight: 500;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.chat-chips button:hover { border-color: var(--ink); }
.chat-chips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chat-body { margin-top: 22px; }
.demo-exchange { display: grid; }
.demo-messages { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; }
.demo-question {
  align-self: flex-end; max-width: 88%;
  padding: 13px 18px;
  background: var(--mist);
  border-radius: 18px 18px 4px 18px;
  font-size: 1.0625rem; line-height: 1.4; letter-spacing: -0.016em;
}
.demo-response { position: relative; margin-top: 20px; }
.demo-answer { font-size: 1.0625rem; line-height: 1.55; color: #383838; }
.chat-sizer { visibility: hidden; pointer-events: none; }
.demo-thinking { position: absolute; inset: 2px auto auto 0; display: none; align-items: center; gap: 5px; min-height: 26px; }
.demo-thinking > span:not(.thinking-label) { width: 6px; height: 6px; border-radius: 50%; background: #8a8a8a; }
.thinking-label { margin-left: 8px; font-size: 0.8125rem; color: var(--gray); }
[data-phase="thinking"] .demo-thinking { display: flex; }
[data-phase="thinking"] .demo-thinking > span:not(.thinking-label) { animation: dot 0.8s ease-in-out infinite alternate; }
[data-phase="thinking"] .demo-thinking > span:nth-child(2) { animation-delay: 0.12s; }
[data-phase="thinking"] .demo-thinking > span:nth-child(3) { animation-delay: 0.24s; }
@keyframes dot { from { opacity: 0.3; transform: translateY(1px); } to { opacity: 1; transform: translateY(-1px); } }
.demo-recommendation { margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.1); }
.rec-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; }
.rec-row img { width: 30px; }
.rec-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.rec-row .tlink { font-size: 0.9375rem; min-height: 0; }
[data-phase="question"] .demo-answer, [data-phase="thinking"] .demo-answer,
[data-phase="question"] .demo-recommendation, [data-phase="thinking"] .demo-recommendation,
[data-phase="answer"] .demo-recommendation { visibility: hidden; }

/* ---------- 2. the film ---------- */
.reel { position: relative; padding-bottom: clamp(24px, 4vw, 56px); }
.reel-frame { overflow: hidden; background: #ececec; transform: scale(var(--rs, 1)); transform-origin: 50% 0; will-change: transform; }
.reel-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 760px) { .reel-frame video { aspect-ratio: 720 / 1000; } } /* the portrait cut (tools/film.js portrait) */

/* ---------- 3. what we do: paragraph + accordion ---------- */
.svc-grid { row-gap: 40px; align-items: start; }
.svc-intro { grid-column: 1 / span 6; }
.svc-intro .intro { max-width: 24ch; font-size: clamp(1.5rem, 2.3vw, 2.125rem); line-height: 1.3; letter-spacing: -0.02em; }
.svc-intro .tlink { margin-top: 24px; }
.acc { grid-column: 8 / -1; }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-item:first-child { border-top: 1px solid var(--rule); }
.acc-item summary {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0;
  font-size: clamp(1.25rem, 1.8vw, 1.625rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2;
  cursor: pointer; list-style: none;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary i { width: 10px; height: 10px; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.5s var(--ease); }
.acc-item[open] summary i { transform: translateY(2px) rotate(225deg); }
.acc-body { overflow: hidden; }
.acc-body p { padding-bottom: 14px; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; color: var(--fg-muted); max-width: 34ch; }
.acc-body .tlink { margin-bottom: 18px; font-size: 1rem; min-height: 0; }

/* ---------- 4. ask them about us (the logo wall) ---------- */
.asks { padding-block: clamp(24px, 4vw, 56px) clamp(88px, 8.4vw, 120px); text-align: center; }
.asks-title { font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.02em; color: var(--fg-muted); }
.ai-asks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(28px, 3.4vw, 44px); }
.ai-ask {
  --c: #000;
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: 120px; padding: 0 12px;
  font-size: 1.375rem; font-weight: 600; letter-spacing: -0.03em; color: var(--fg);
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.ai-asks li + li .ai-ask { box-shadow: -1px 0 0 var(--rule); }
.ai-ask svg.logo { width: 30px; height: 30px; flex: none; fill: var(--c); transition: transform 0.6s var(--ease); }
.ai-ask .arr { position: absolute; top: 14px; right: 14px; opacity: 0; transition: opacity 0.4s var(--ease); }
.ai-ask:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.ai-ask:hover svg.logo { transform: scale(1.12) rotate(-4deg); }
.ai-ask:hover .arr { opacity: 1; }
.ask-q { margin-top: 26px; font-size: var(--fs-small); color: var(--fg-muted); }
.ask-q q { quotes: "\201C" "\201D"; color: var(--fg-body); }
.ask-note { margin-top: 10px; font-size: 0.9375rem; font-weight: 500; }
@media (max-width: 960px) {
  .ai-asks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ai-asks li:nth-child(4) .ai-ask { box-shadow: none; }
  .ai-asks li:nth-child(n + 4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 560px) {
  .ai-asks { grid-template-columns: 1fr 1fr; }
  .ai-asks li .ai-ask { box-shadow: none !important; height: 88px; font-size: 1.125rem; }
  .ai-asks li:nth-child(even) { border-left: 1px solid var(--rule); }
  .ai-asks li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .ai-asks li:last-child { grid-column: 1 / -1; border-left: 0; }
}

/* ---------- 5. inside the answer (pinned demo) ---------- */
.answer-layout {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 6vw, 112px);
  margin-top: clamp(48px, 6vw, 96px);
}
.answer-stage { position: sticky; top: calc(var(--hdr-h) + 24px); align-self: start; }
.ai { padding: clamp(20px, 2.2vw, 32px); background: #111111; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ai-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.ai-top .label { color: var(--gray-lt); }
.ai-cats { display: flex; gap: 6px; }
.ai-cats button {
  height: 38px; padding: 0 15px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.76);
  font-size: 0.875rem; font-weight: 500;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.ai-cats button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.ai-cats button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.ai-part { transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.ai-q { display: flex; justify-content: flex-end; margin-top: 24px; }
.ai-q p { max-width: 88%; padding: 13px 18px; border-radius: 18px 18px 4px 18px; background: #262626; font-size: 1.0625rem; line-height: 1.4; }
.ai-a { margin-top: 22px; }
.ai-a > p { color: rgba(255, 255, 255, 0.76); font-size: 1rem; }
.ai-a > p b { color: #fff; font-weight: 500; }
.ai-list { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.ai-list li {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px;
  padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1.0625rem; font-weight: 500;
}
.ai-list li > span:first-child { font-size: 0.8125rem; color: var(--gray-lt); }
.ai-list sup { font-size: 0.6875rem; color: var(--gray-lt); }
.ai-prod { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ai-thumb { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #262626; }
.ai-thumb svg { width: 42px; height: 42px; }
.ai-thumb--you { background: transparent; border: 1.5px dashed rgba(255, 255, 255, 0.4); font-size: 1.125rem; color: var(--gray-lt); }
.ai-prod-t b { display: block; font-weight: 500; }
.ai-prod-t small { display: block; margin-top: 3px; font-size: 0.8125rem; font-weight: 400; color: var(--gray-lt); }
.ai-you { transition: background-color 0.6s var(--ease), padding 0.6s var(--ease); border-radius: 10px; }
.ai-you > span:nth-child(2) { color: var(--gray-lt); }
.ai-src { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.875rem; color: var(--gray-lt); }
.ai-src span { display: inline-flex; gap: 6px; }
.ai-src sup { font-size: 0.6875rem; }
.ai-note { margin-top: 16px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.44); }
.js .answer-stage[data-step] .ai-part { opacity: 0.18; filter: blur(1.5px); }
.js .answer-stage[data-step="1"] .ai-part.p1,
.js .answer-stage[data-step="2"] :is(.p1, .p2),
.js .answer-stage[data-step="3"] :is(.p1, .p2, .p3),
.js .answer-stage[data-step="4"] .ai-part { opacity: 1; filter: none; }
.js .answer-stage[data-step="2"] .p1, .js .answer-stage[data-step="3"] :is(.p1, .p2), .js .answer-stage[data-step="4"] :is(.p1, .p3) { opacity: 0.5; }
.js .answer-stage[data-step="4"] .ai-you { background: #fff; color: #000; padding-inline: 14px; }
.js .answer-stage[data-step="4"] .ai-you > span, .js .answer-stage[data-step="4"] .ai-you b, .js .answer-stage[data-step="4"] .ai-you .arr { color: #000 !important; }
.js .answer-stage[data-step="4"] .ai-you small { color: #666 !important; }
.js .answer-stage[data-step="4"] .ai-thumb--you { border-color: #000; color: #000; background: #fff; }

/* Clay's numbered list: a big gray number, a title, a paragraph */
.answer-steps li {
  min-height: 38vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 32px;
  transition: opacity 0.6s var(--ease);
}
.answer-steps li:first-child { min-height: 28vh; justify-content: flex-start; padding-top: 8px; }
.js .answer-steps li { opacity: 0.28; }
.js .answer-steps li.is-active { opacity: 1; }
.answer-steps h3 { margin-top: 10px; }
.answer-steps p { margin-top: 12px; max-width: 34ch; color: var(--fg-muted); font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; }

/* ---------- 6. the work (Clay's staggered tiles) ---------- */
.tiles {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: clamp(64px, 8vw, 120px);
  margin-top: clamp(56px, 7vw, 104px);
}
.tile { display: block; color: inherit; }
.tile--half { grid-column: span 6; padding-right: clamp(0px, 3vw, 48px); }
.tile--half + .tile--half { padding-right: 0; padding-left: clamp(0px, 3vw, 48px); }
.tile--drop { margin-top: clamp(80px, 12vw, 180px); }
.tile--wide { grid-column: 1 / span 10; }
.tile--wide:nth-of-type(6n) { grid-column: 3 / -1; }
.tile-media { position: relative; overflow: hidden; background: var(--surface); }
.tile > h3 { margin-top: 22px; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.022em; line-height: 1.2; }
.tile > p { margin-top: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--fg-muted); max-width: 52ch; }
.chip {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0;
}
/* a shopper's question on the photograph, and what the page owes them */
.qbub {
  position: absolute; z-index: 2; left: clamp(12px, 1.6vw, 22px); right: clamp(12px, 1.6vw, 22px); bottom: clamp(12px, 1.6vw, 22px);
  display: grid; gap: 8px;
}
.qbub-q { justify-self: end; max-width: 86%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: rgba(255, 255, 255, 0.95); color: var(--ink); font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); font-weight: 500; line-height: 1.35; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.qbub-a { justify-self: start; max-width: 92%; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: var(--ink); color: #fff; font-size: clamp(0.9375rem, 1.2vw, 1.0625rem); font-weight: 600; line-height: 1.3; }
.qbub-a span { display: block; margin-bottom: 3px; font-size: 0.75rem; font-weight: 500; color: var(--gray-lt); }
.tile:hover .qbub-a { background: #2b2b2b; }
.tile:hover .qbub-a span { color: rgba(255, 255, 255, 0.8); }
.qbub-a { transition: background-color 0.5s var(--ease); }
.work-end { margin-top: clamp(56px, 6vw, 88px); display: flex; justify-content: center; }

/* tile art: the spec diff */
.art-spec { display: flex; flex-direction: column; padding: clamp(22px, 3vw, 44px); background: #ececec; color: var(--ink); }
.art-q { margin-top: clamp(40px, 6vw, 72px); align-self: flex-end; max-width: 82%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--ink); color: #fff; font-size: clamp(0.9375rem, 1.1vw, 1.0625rem); line-height: 1.4; }
.art-diff { margin-block: auto; }
.art-old { font-size: clamp(1.125rem, 1.7vw, 1.5rem); color: var(--gray); }
.art-old s { text-decoration-thickness: 2px; }
.art-new { margin-top: 6px; font-size: clamp(2.5rem, 5.4vw, 5.25rem); font-weight: 600; letter-spacing: -0.055em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.art-sub { margin-top: 10px; font-size: clamp(1rem, 1.2vw, 1.125rem); color: #383838; }
.art-foot { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, 0.2); color: var(--gray); font-size: 0.875rem; font-weight: 500; }
/* tile art: three ad angles on the photograph they sell */
.art-angles { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 3vw, 44px); color: #fff; background: #2b2219; }
.art-angles > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.art-angles::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 100%); }
.art-angles ol { position: relative; z-index: 1; max-width: 760px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.art-angles li { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: 16px; align-items: baseline; padding: clamp(10px, 1.2vw, 16px) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.art-angles li span { font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.art-angles li b { font-size: clamp(1.125rem, 2vw, 1.875rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }

/* the product page edit (also used on /ai-visibility) */
.panel--pdp { padding: clamp(64px, 6vw, 92px) clamp(16px, 2.4vw, 36px) clamp(16px, 2.4vw, 36px); background: #ececec; color: var(--ink); }
.pdp {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.35);
}
.pdp-img { background: #e8e8ea; }
.pdp-img img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.pdp-info { padding: clamp(16px, 1.8vw, 26px); display: flex; flex-direction: column; }
.pdp-toggle { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 999px; background: var(--mist); }
.pdp-toggle button { height: 32px; padding: 0 14px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--gray); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.pdp-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pdp-name { margin-top: 18px; font-size: clamp(1.125rem, 1.5vw, 1.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.pdp-sub { margin-top: 4px; font-size: 0.875rem; color: var(--gray); }
.pdp-copy { margin-top: 14px; font-size: 0.9375rem; line-height: 1.5; color: #383838; }
.pdp-specs { margin-top: auto; padding-top: 14px; }
.pdp-specs li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.8125rem; }
.pdp-specs li span:first-child { color: var(--gray); }
.pdp-specs li span:last-child { font-weight: 600; text-align: right; }
.pdp mark {
  background: linear-gradient(#000, #000) no-repeat 0 100% / 100% 100%;
  color: #fff; padding: 0 3px; margin: 0 -1px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-reduced-motion: no-preference) {
  .pdp[data-view="after"] mark { animation: mark-in 0.8s var(--ease) both; }
  .pdp[data-view="after"] .pdp-specs mark { animation-delay: 0.12s; }
}
@keyframes mark-in { from { background-size: 0 100%; color: var(--ink); } 60% { color: #fff; } to { background-size: 100% 100%; color: #fff; } }
.pdp [data-only="after"] { display: none; }
.pdp[data-view="after"] [data-only="after"] { display: revert; }
.pdp[data-view="after"] [data-only="before"] { display: none; }
.pdp-q {
  position: absolute; top: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); z-index: 1;
  max-width: 72%; padding: 11px 15px; border-radius: 16px 16px 4px 16px;
  background: var(--ink); color: #fff; font-size: 0.9375rem; line-height: 1.35;
}

/* the sponsored-card mock (also used on /chatgpt-ads) */
.adx-tile { display: flex; flex-direction: column; justify-content: center; padding: clamp(56px, 6vw, 80px) clamp(16px, 2.4vw, 36px) clamp(16px, 2.4vw, 36px); background: #ececec; color: var(--ink); }
.adx { display: grid; gap: 14px; }
.adx-chat { padding: 20px 22px; background: #fff; border-radius: var(--radius); box-shadow: 0 30px 70px -44px rgba(0, 0, 0, 0.35); }
.adx-chat .demo-question { max-width: 86%; margin-left: auto; display: block; width: fit-content; font-size: 0.9375rem; }
.adx-chat > p { margin-top: 14px; font-size: 0.9375rem; color: #383838; line-height: 1.5; }
.adx-sep { display: flex; align-items: center; gap: 12px; color: var(--gray); font-size: 0.8125rem; font-weight: 500; }
.adx-sep::before, .adx-sep::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.18); }
.adx-card { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; padding: 12px; background: #fff; border-radius: var(--radius); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.4); }
.adx-card img { width: 112px; height: 112px; object-fit: cover; border-radius: 10px; }
.adx-card .label { color: var(--gray); font-size: 0.8125rem; }
.adx-card h4 { margin-top: 4px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.adx-card .btn { margin-top: 10px; --btn-bg: #000000; --btn-fg: #fff; --h: 36px; font-size: 0.8125rem; padding: 0 14px 0 16px; }

/* ---------- 7. the checker card (Clay's industry card) ---------- */
.feature { padding-bottom: clamp(88px, 8.4vw, 120px); }
.feature-card {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 32px clamp(32px, 5vw, 80px);
  margin-inline: clamp(0px, 2.3vw, 32px);
  padding: clamp(32px, 6vw, 96px) clamp(24px, 4.4vw, 64px);
  background: var(--bg); color: var(--fg);
  overflow: hidden;
}
.feature-title { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.feature-copy .lead { margin-top: 20px; max-width: 34ch; }
.feature-scan { align-self: end; border-top: 1px solid var(--rule); }
.feature-scan li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; font-weight: 500; color: var(--fg-body); }
.t-dark .st--miss { color: #fff; }
.t-dark .st--vague { background: rgba(255, 255, 255, 0.16); color: #fff; }
.qcheck { display: flex; gap: 10px; margin-top: 32px; max-width: 620px; }
.qcheck input {
  flex: 1; min-width: 0; height: 56px; padding: 0 22px; border: 1px solid var(--rule-2); border-radius: 999px;
  font: inherit; font-size: 1rem; color: var(--fg); background: transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.qcheck input::placeholder { color: var(--fg-muted); }
.qcheck input:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 4px var(--rule); }
.qcheck .btn { --h: 56px; }
.qcheck .btn[disabled] { opacity: 0.7; cursor: progress; }
.qcheck-out { grid-column: 1 / -1; padding: clamp(20px, 2.6vw, 32px); background: var(--surface); }
.qcheck-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.qcheck-head .label { color: var(--fg-muted); }
.qcheck-head .btn { --h: 46px; font-size: 0.9375rem; }
.qcheck-title { margin-top: 6px; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; max-width: 34ch; }
.qcheck-sum { margin-top: 8px; color: var(--fg-body); }
.qcheck-sum b { font-weight: 600; color: var(--fg); }
.qcheck-list { margin-top: 18px; border-bottom: 1px solid var(--rule-2); }
.qcheck-list li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule-2); }
.qcheck-list b { font-weight: 600; }
.qcheck-list p { margin-top: 2px; font-size: 0.9375rem; color: var(--fg-muted); }
.qcheck-err { color: var(--fg-body); }

/* ---------- 8. the people (Clay's gray band) ---------- */
.band-top, .band-bottom { row-gap: 28px; align-items: end; }
.band-top .h2 { grid-column: 1 / span 5; }
.band-copy { grid-column: 7 / -1; }
.band-copy .intro, .band-bottom .intro { max-width: 30ch; }
.band-copy .tlink, .band-bottom .tlink { margin-top: 18px; }
.strip { margin-block: clamp(64px, 8vw, 112px); overflow: hidden; }
.strip-track { display: flex; align-items: flex-start; gap: clamp(20px, 2.4vw, 36px); width: max-content; padding-inline: var(--pad); transform: translateX(var(--dx, 0px)); will-change: transform; }
.strip-item { flex: none; }
.strip-item .lift { aspect-ratio: 4 / 5; background: #e6e6e6; }
.strip-item figcaption { margin-top: 14px; font-size: 0.9375rem; font-weight: 500; color: var(--fg-muted); }
.strip-item figcaption b { display: block; font-size: 1.125rem; font-weight: 600; color: var(--fg); }
.strip-item--a { width: clamp(220px, 24vw, 360px); }
.strip-item--b { width: clamp(180px, 17vw, 260px); margin-top: clamp(80px, 10vw, 150px); }
.strip-item--c { width: clamp(220px, 24vw, 360px); margin-top: clamp(30px, 4vw, 60px); }
.strip-item--d { width: clamp(240px, 23vw, 340px); margin-top: clamp(110px, 13vw, 200px); }
.strip-item--e { width: clamp(180px, 17vw, 260px); margin-top: 0; }
.strip-mark { aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--slate); }
.strip-mark img { width: 42%; }
.strip-record { aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 2vw, 28px); background: #fff; }
.strip-record .label { color: var(--gray); }
.strip-big { font-size: clamp(4rem, 8vw, 7.5rem); font-weight: 600; letter-spacing: -0.06em; line-height: 0.9; margin: 8px 0 12px; }
.strip-record p:last-child { font-size: 0.9375rem; color: #383838; line-height: 1.4; }
.band-bottom .intro { grid-column: 7 / -1; }
.band-bottom .tlink { grid-column: 7 / -1; margin-top: 0; }

/* ---------- 9. notes (Clay's Featured News) ---------- */
.news { margin-top: clamp(40px, 5vw, 72px); }
.news-row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 48px); align-items: stretch;
  padding: 0 0 clamp(28px, 3vw, 40px); margin-bottom: clamp(28px, 3vw, 40px); border-bottom: 1px solid var(--rule);
}
.news-img { aspect-ratio: 1.73 / 1; background: var(--surface); }
.news-body { display: flex; flex-direction: column; }
.news-body .label { color: var(--fg-muted); }
.news-body h3 { margin-top: 10px; font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; max-width: 22ch; }
.news-meta { margin-top: auto; padding-top: 16px; font-size: var(--fs-small); font-weight: 500; color: var(--fg-muted); }
.notes-more { margin-top: 8px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; gap: 48px; }
  .chat { max-width: 620px; }
  .answer-layout { grid-template-columns: 1fr; }
  .answer-stage { position: relative; top: auto; }
  .js .answer-stage[data-step] .ai-part { opacity: 1; filter: none; }
  .answer-steps li, .answer-steps li:first-child { min-height: 0; padding-block: 24px; opacity: 1 !important; }
  .answer-steps { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .svc-intro, .acc { grid-column: 1 / -1; }
  .feature-card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { padding-top: calc(var(--hdr-h) + 40px); }
  .hero-shards { display: none; }
  .hero-actions .btn { width: 100%; justify-content: space-between; }
  .sec-head > :first-child, .sec-head > :not(:first-child) { grid-column: 1 / -1; }
  .answer-steps { grid-template-columns: 1fr; }
  .tiles { display: block; }
  .tiles > .tile { margin-top: 56px; padding: 0; }
  .tiles > .tile:first-child { margin-top: 0; }
  .pdp { grid-template-columns: 1fr; }
  .pdp-img img { aspect-ratio: 16 / 10; }
  .panel--pdp { padding-top: 16px; }
  .pdp-q { position: relative; top: auto; right: auto; max-width: none; margin-bottom: 14px; }
  .adx-card { grid-template-columns: 84px 1fr; }
  .adx-card img { width: 84px; height: 84px; }
  .feature-card { margin-inline: 0; }
  .qcheck { flex-direction: column; }
  .qcheck .btn { justify-content: space-between; }
  .band-top .h2, .band-copy, .band-bottom .intro, .band-bottom .tlink { grid-column: 1 / -1; }
  .news-row { grid-template-columns: 1fr; gap: 16px; }
  .art-angles li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- what we do: the picture follows the open item ---------- */
.svc-media { position: relative; margin-top: clamp(40px, 5vw, 64px); max-width: 600px; aspect-ratio: 5 / 4; overflow: hidden; background: #e6e6e6; }
.svc-media > .chip { z-index: 5; }
.svm { position: absolute; inset: 0; z-index: 1; clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(.76, 0, .24, 1); }
.svm.is-on { z-index: 3; clip-path: inset(0 0 0 0); }
.svm.was-on { z-index: 2; clip-path: inset(0 0 0 0); transition: none; }
.svm img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 7s linear; }
.svm.is-on img { transform: scale(1); }
.svm-ui {
  position: absolute; left: clamp(12px, 1.6vw, 20px); right: clamp(12px, 1.6vw, 20px); bottom: clamp(12px, 1.6vw, 20px);
  padding: 16px 18px; background: #fff; color: #000; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease);
}
.svm.is-on .svm-ui { opacity: 1; transform: none; transition-delay: 0.45s; }
.svm-ui > *, .svm-ui li { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.svm.is-on .svm-ui > *, .svm.is-on .svm-ui li { opacity: 1; transform: none; }
.svm.is-on .svm-ui > :nth-child(1), .svm.is-on .svm-ui li:nth-child(1) { transition-delay: 0.7s; }
.svm.is-on .svm-ui > :nth-child(2), .svm.is-on .svm-ui li:nth-child(2) { transition-delay: 0.95s; }
.svm.is-on .svm-ui > :nth-child(3), .svm.is-on .svm-ui li:nth-child(3) { transition-delay: 1.2s; }
.svm.is-on .svm-ui > :nth-child(4) { transition-delay: 1.45s; }
.svm-q { margin: 0 0 10px auto; width: fit-content; padding: 9px 13px; border-radius: 14px 14px 3px 14px; background: #f0f0f0; font-size: 0.875rem; font-weight: 500; }
.svm-answer ol { border-top: 1px solid rgba(0, 0, 0, 0.1); }
.svm-answer li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 8px 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.875rem; }
.svm-answer li span { font-size: 0.75rem; color: #8a8a8a; }
.svm-answer li em { font-style: normal; font-size: 0.8125rem; color: #666; }
.svm-answer li.is-you { background: #000; color: #fff; }
.svm-answer li.is-you span, .svm-answer li.is-you em { color: #fff; }
.svm-sep { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.75rem; font-weight: 600; color: #8a8a8a; }
.svm-sep::before, .svm-sep::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, 0.18); }
.svm-brand { font-size: 0.75rem; color: #8a8a8a; }
.svm-head { margin-top: 2px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }
.svm-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; height: 34px; padding: 0 14px; border-radius: 999px; background: #000; color: #fff; font-size: 0.8125rem; font-weight: 600; }
.svm-kicker { margin-bottom: 8px; font-size: 0.75rem; font-weight: 600; color: #8a8a8a; }
.svm-specs p:not(.svm-kicker) { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.875rem; }
.svm-specs p span { color: #666; }
.svm-specs p b { padding: 0 6px; background: linear-gradient(#000, #000) no-repeat 0 0 / 0 100%; transition: background-size 0.7s var(--ease), color 0.7s var(--ease); font-weight: 600; }
.svm.is-on .svm-specs p b { background-size: 100% 100%; color: #fff; transition-delay: 1.6s; }
.svm.is-on .svm-specs p:nth-child(3) b { transition-delay: 1.9s; }
.svm.is-on .svm-specs p:nth-child(4) b { transition-delay: 2.2s; }
.svm-src p:not(.svm-kicker) { position: relative; padding: 9px 10px 9px 30px; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.875rem; font-weight: 500; }
.svm-src sup { position: absolute; left: 10px; top: 10px; font-size: 0.6875rem; color: #8a8a8a; }
.svm-src p.is-you { background: #000; color: #fff; }
.svm-src p.is-you sup { color: #fff; }
.svm-dots div { display: grid; grid-template-columns: 1fr repeat(3, 18px); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); font-size: 0.875rem; }
.svm-dots .mk { color: #000; width: 15px; height: 15px; }
/* the accordion advances itself: a line under the open item counts down */
.acc[data-acc-auto] .acc-item[open] { position: relative; }
.acc[data-acc-auto] .acc-item[open]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); transform-origin: 0 50%; transform: scaleX(var(--t, 0)); }

/* ---------- inside the answer: the product being read ---------- */
.ai-photo { position: relative; margin-top: 18px; aspect-ratio: 2.8 / 1; overflow: hidden; background: #1a1a1a; }
.ai-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 0.8s var(--ease), transform 8s linear; }
.ai-photo img.on { opacity: 1; transform: scale(1); }
.ai-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%); }
.ai-scan { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 2px; background: #fff; box-shadow: 0 0 18px 5px rgba(255, 255, 255, 0.45); opacity: 0.9; }
.ai-scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 60px; background: linear-gradient(to top, rgba(255, 255, 255, 0.18), transparent); }
.ai-reading { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px 6px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 0.75rem; font-weight: 600; }
.ai-reading b { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.ai-reading b:last-of-type { margin-right: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .ai-scan { animation: ai-scan 3.4s cubic-bezier(.65, 0, .35, 1) infinite; }
  .ai-reading b { animation: dot 0.8s ease-in-out infinite alternate; }
  .ai-reading b:nth-child(2) { animation-delay: 0.12s; }
  .ai-reading b:nth-child(3) { animation-delay: 0.24s; }
}
@keyframes ai-scan { 0% { top: 0; } 50% { top: calc(100% - 2px); } 100% { top: 0; } }
.ai-photo + .ai-q { margin-top: 16px; }
.ai-list li { padding-block: 10px; }

/* ---------- the people: who they asked then, who they ask now ---------- */
.swap-line { grid-column: 1 / span 6; font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.035em; line-height: 1.2; }
.swap-line .logo { display: inline-block; width: 0.78em; height: 0.78em; margin: 0 0.16em 0 0.12em; vertical-align: -0.1em; flex: none; }
.swap-g { color: var(--fg-muted); }
.swap { display: inline-grid; vertical-align: bottom; height: 1.2em; overflow: hidden; }
.swap-item { grid-area: 1 / 1; display: inline-flex; align-items: center; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform 0.7s var(--ease), opacity 0.45s var(--ease); }
.swap-item.is-on { opacity: 1; transform: none; }
.swap-item.was-on { opacity: 0; transform: translateY(-100%); }

.band-bottom { align-items: start; }
.band-bottom .intro, .band-bottom .tlink { grid-column: 8 / -1; }
@media (max-width: 1100px) {
  .svc-media { max-width: none; }
}
@media (max-width: 760px) {
  .swap-line, .band-bottom .intro, .band-bottom .tlink { grid-column: 1 / -1; }
  .svm-ui { padding: 12px 14px; }
}

/* ---------- the hero: who they asked then, who they ask now ---------- */
.hero-swap { margin: -6px 0 26px; font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.hero-swap .logo { display: inline-block; width: 0.8em; height: 0.8em; margin: 0 0.16em 0 0.1em; vertical-align: -0.1em; }
.hero-swap .swap-g { color: var(--fg-muted); }
.chat-ask {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 18px calc(clamp(22px, 2.1vw, 32px) * -1) calc(clamp(22px, 2.1vw, 32px) * -1); padding: 14px clamp(22px, 2.1vw, 32px);
  background: #f3f3f3; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-size: 0.875rem; color: #666;
}
.chat-ask-go { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: #000; }
.chat-ask-go [data-ask-tool] { display: inline-flex; align-items: center; gap: 6px; }
.chat-ask-go .logo { width: 18px; height: 18px; }
.chat-ask:hover .chat-ask-go [data-ask-tool] { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- ask about your product ---------- */
.qask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; max-width: 680px; }
.qask input[name="url"] { grid-column: 1 / -1; }
.qask-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.qask-chips button { height: 36px; padding: 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 0.875rem; font-weight: 500; color: var(--fg-body); transition: background-color 0.3s var(--ease), color 0.3s var(--ease); }
.qask-chips button:hover { background: var(--fg); color: var(--bg); }
.qa { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--rule-2); }
.qa .label { color: var(--fg-muted); }
.qa-q { margin: 10px 0 0 auto; width: fit-content; max-width: 80%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: var(--fg); color: var(--bg); font-weight: 500; }
.qa-text { margin-top: 16px; min-height: 3em; font-size: var(--fs-lead); font-weight: 500; letter-spacing: -0.015em; line-height: 1.45; }
.qa-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 22px; }
.qa-used, .qa-missing { margin-top: 10px; display: grid; gap: 8px; }
.qa-used li { padding: 8px 12px; background: var(--fg); color: var(--bg); font-size: 0.9375rem; font-weight: 500; width: fit-content; }
.qa-missing li { padding: 8px 12px; border: 1px dashed var(--rule-2); font-size: 0.9375rem; font-weight: 500; width: fit-content; }
.qa-fine { margin-top: 18px; font-size: 0.875rem; color: var(--fg-muted); }
.qa-note { margin-bottom: 18px; padding: 12px 16px; background: var(--rule); font-size: 0.9375rem; font-weight: 500; }
@media (max-width: 760px) {
  .qask { grid-template-columns: 1fr; }
  .qa-cols { grid-template-columns: 1fr; }
}

/* ---------- the hero's typing pill and the row of tools under it ---------- */
.typer {
  display: inline-flex; align-items: center; gap: 0.22em; vertical-align: -0.1em;
  height: 1.32em; padding: 0 0.42em 0 0.3em; border-radius: 999px;
  background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 14px 30px -16px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}
.typer-logo { display: inline-flex; }
.typer-logo .logo { width: 0.82em !important; height: 0.82em !important; margin: 0 !important; }
.typer-name { min-width: 0.2em; }
.typer-caret { display: inline-block; width: 2px; height: 0.86em; margin-left: 1px; background: #000; }
@media (prefers-reduced-motion: no-preference) {
  .typer:not(.is-typing) .typer-caret { animation: typer-blink 1s steps(1) infinite; }
}
@keyframes typer-blink { 50% { opacity: 0; } }
.typer-dots { display: flex; align-items: center; gap: 8px; margin: -10px 0 26px; font-size: 0.875rem; font-weight: 500; color: var(--fg-muted); }
.typer-dots span { margin-right: 6px; }
.typer-dots button {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.typer-dots button .logo { width: 18px; height: 18px; filter: grayscale(1); opacity: 0.45; transition: filter 0.3s var(--ease), opacity 0.3s var(--ease); }
.typer-dots button:hover { transform: translateY(-2px); }
.typer-dots button:hover .logo, .typer-dots button.is-on .logo { filter: none; opacity: 1; }
.typer-dots button.is-on { box-shadow: 0 0 0 1.5px #000; }
.typer-bar { position: absolute; left: 7px; right: 7px; bottom: -8px; height: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.1); overflow: hidden; opacity: 0; }
.typer-bar b { position: absolute; inset: 0; background: #000; transform-origin: 0 50%; transform: scaleX(0); }
.typer-dots button.is-on .typer-bar { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .typer-dots button.is-on .typer-bar b { animation: typer-fill var(--typer-period, 3600ms) linear forwards; }
}
@keyframes typer-fill { to { transform: scaleX(1); } }
.swap-item.was-on { transition: transform 0.7s var(--ease), opacity 0.2s linear; }