/* Section 7: Results (lane D). Ink ground continuing from the work path, entered on a curved wipe.
   .rs-eyebrow and .rs-h-dot are shared by reviews and the close (lane D only). */

#results { position: relative; z-index: 2; min-height: 0; background: var(--bg); color: var(--fg); }
/* Theme: the glass slab, its empty state, the "to be confirmed" amber and the deep shadow per theme. */
#results, #reviews { --rs-slab: #121216; --rs-empty: #141418; --rs-deep: rgb(0 0 0 / .9); --rs-tint: rgb(11 30 91 / .6); --rs-edge: 246 245 242; }
:root[data-scheme="light"] :is(#results, #reviews) { --rs-slab: #F3F6FD; --rs-empty: #EEF3FC; --rs-deep: rgb(11 30 91 / .30); --rs-tint: rgb(31 111 255 / .16); --rs-edge: 11 30 91; }
.rs-arc { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: 22svh; pointer-events: none; overflow: visible; }
.rs-arc-fill { fill: var(--bg); }
.rs-arc-line { fill: none; stroke: var(--line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
#results.is-still .rs-arc { display: none; }

.rs-inner { max-width: 1240px; margin: 0 auto; padding: clamp(56px, 10vh, 112px) var(--gutter) clamp(72px, 12vh, 140px); }
@media (min-width: 820px) { .rs-inner { padding-left: max(var(--gutter), calc((100vw - 1240px) / 2)); padding-right: max(var(--gutter), calc((100vw - 1240px) / 2)); max-width: none; } }

.rs-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .8125rem; font-weight: 500; letter-spacing: .01em; color: var(--fg-2); }
.rs-eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(31, 111, 255, .18); }
.rs-h-dot { color: var(--blue); }
.rs-head { max-width: 760px; margin-bottom: clamp(48px, 9vh, 96px); }
.rs-head h2 { margin: 0; font-size: clamp(2.5rem, 4.6vw, 4.375rem); line-height: .98; font-weight: 600; letter-spacing: -0.036em; text-wrap: balance; }
.rs-sub { margin: 20px 0 0; max-width: 34em; font-size: clamp(1rem, 1.25vw, 1.1875rem); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }

.rs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 12vh, 136px); }
.rs-item {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.rs-text { position: relative; }
.rs-num {
  --fill: 1;
  display: block; margin-bottom: 22px; font-size: clamp(5.5rem, 9.5vw, 9rem); line-height: .8; font-weight: 700; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums; color: transparent; -webkit-text-stroke: 1px rgb(var(--fg-rgb) / .32);
  background: linear-gradient(90deg, var(--num-ink, var(--fg)) 0 calc(var(--fill) * 100%), transparent calc(var(--fill) * 100%) 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* 01 is the answer that named our client first: its number fills in coral, the section's touch of
   the accent (audit D18, 11 Nov 2026); the others fill in ink. The numbers are large and bold so that
   touch carries its share of the page's one part in 100 of coral (theme.spec) */
.rs-item:first-child .rs-num { --num-ink: var(--coral); -webkit-text-stroke-color: var(--coral); }
.rs-client { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.rs-who { margin: 6px 0 0; font-size: .9375rem; color: var(--fg-2); }
.rs-claim { margin: 22px 0 0; max-width: 24em; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.45; color: rgb(var(--fg-rgb) / .9); text-wrap: pretty; }
.rs-date {
  display: inline-flex; align-items: center; gap: 9px; margin: 22px 0 0; padding: 7px 13px 7px 11px; border-radius: 999px;
  font-size: .8125rem; color: rgb(var(--fg-rgb) / .78); border: 1px solid var(--line); background: rgb(var(--fg-rgb) / .03);
}
.rs-date-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--blue); background: var(--paper); }

/* The screenshot: a slab of glass with real thickness and a lit top edge. */
.rs-shot { margin: 0; perspective: 1600px; }
.rs-frame {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px; transform-origin: 50% 100%;
  background: var(--rs-slab);
  box-shadow:
    0 0 0 1px rgb(var(--rs-edge) / .12),
    0 1px 0 rgb(var(--bg-rgb) / .16) inset,
    0 0 0 6px rgb(var(--rs-edge) / .025),
    0 0 0 7px rgb(var(--rs-edge) / .07),
    0 40px 80px -30px var(--rs-deep),
    0 18px 36px -18px var(--rs-tint);
}
/* glass sheen: a soft band of light that follows the pointer across the slab */
.rs-frame::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent calc(var(--sx, -40%) - 22%), rgb(255 255 255 / .07) var(--sx, -40%), transparent calc(var(--sx, -40%) + 22%));
  transition: opacity .4s var(--ease);
}
.rs-frame > img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: inherit; }
.rs-empty {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px; text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgb(var(--fg-rgb) / .06), transparent 70%),
    repeating-linear-gradient(135deg, rgb(var(--fg-rgb) / .022) 0 1px, transparent 1px 11px),
    var(--rs-empty);
}
.rs-empty-title { margin: 0; font-size: .9375rem; font-weight: 600; color: rgb(var(--fg-rgb) / .82); }
.rs-crop { position: absolute; width: 18px; height: 18px; border: 0 solid rgb(var(--fg-rgb) / .35); }
.rs-crop--tl { left: 16px; top: 16px; border-width: 1px 0 0 1px; }
.rs-crop--tr { right: 16px; top: 16px; border-width: 1px 1px 0 0; }
.rs-crop--bl { left: 16px; bottom: 16px; border-width: 0 0 1px 1px; }
.rs-crop--br { right: 16px; bottom: 16px; border-width: 0 1px 1px 0; }
.rs-box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rs-box-path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linejoin: round; }
#results.is-still .rs-box-path { stroke-dashoffset: 0 !important; }
.rs-dot {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; pointer-events: none;
  background: var(--paper); box-shadow: 0 0 0 3px var(--blue) inset, 0 2px 6px rgba(0, 0, 0, .5);
  transform: scale(0);
}
.rs-shot figcaption { margin-top: 14px; font-size: .8125rem; color: rgb(var(--fg-rgb) / .56); }

/* hover: the slab lifts a little and its edge catches the light */
@media (hover: hover) {
  .rs-frame { transition: box-shadow .4s var(--ease), translate .4s var(--ease); }
  .rs-item:hover .rs-frame { translate: 0 -6px; box-shadow: 0 0 0 1px rgb(31 111 255 / .45), 0 1px 0 rgb(var(--bg-rgb) / .2) inset, 0 0 0 6px rgb(var(--rs-edge) / .03), 0 0 0 7px rgb(var(--rs-edge) / .09), 0 52px 90px -30px var(--rs-deep), 0 18px 36px -18px var(--rs-tint); }
}

@media (max-width: 819.98px) {
  .rs-item { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 22px; }
  .rs-num { font-size: 5.25rem; margin-bottom: 14px; }
  .rs-claim { margin-top: 14px; }
  .rs-date { margin-top: 14px; }
  .rs-frame { border-radius: 14px; aspect-ratio: 4 / 3; }
  .rs-list { gap: 64px; }
}

/* ---------- Frame 01: the live answer, in the opening panel's look (css/hero.css .panel) ---------- */
.rs-frame--live { aspect-ratio: auto; }
.rs-chat {
  --pn-line: rgba(10, 10, 11, .08); --pn-muted: rgba(10, 10, 11, .52);
  position: relative; border-radius: inherit; overflow: hidden; color: #17171A; font-size: 15px; line-height: 1.5;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 120px), #FBFBF9;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(11, 30, 91, .11);
}
.rs-chat-top { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 12px 0 20px; border-bottom: 1px solid var(--pn-line); }
.rs-chat-model { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.rs-replay {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--pn-line); background: #fff; font: 500 12.5px/1 var(--font); color: rgba(10, 10, 11, .72);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04); transition: border-color .2s, color .2s;
  animation: rs-rise .45s var(--ease) both;
}
.rs-replay[hidden] { display: none; }
.rs-replay:hover { border-color: rgba(10, 10, 11, .25); color: #17171A; }
.rs-replay:focus-visible, .rs-original:focus-visible, .rs-pick-site a:focus-visible, .rs-lb-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.rs-chat-body { position: relative; padding: 18px 28px 26px; outline: none; }

.rs-q-row { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.rs-q { margin: 0; max-width: 82%; padding: 9px 16px; border-radius: 20px; background: #EFEEEA; line-height: 1.45; }
.rs-intro { margin: 0 0 18px; line-height: 1.6; text-wrap: pretty; }
.rs-intro strong { font-weight: 600; }
.rs-recs { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; }

.rs-pick { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.rs-pick > * { grid-column: 2; }
.rs-pick-photo {
  grid-column: 1; grid-row: 1 / span 5; position: relative; display: block; width: 92px; aspect-ratio: 185 / 246;
  border-radius: 10px; overflow: hidden; background: #E9E7E2;
}
.rs-pick-photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(10, 10, 11, .08); }
.rs-pick-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rs-pick-title { margin: 0; font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; }
.rs-pick-name, .rs-pick-biz { display: block; }
.rs-pick-biz { margin-top: 1px; text-decoration: underline dotted rgba(10, 10, 11, .35); text-underline-offset: 4px; }
.rs-badge {
  justify-self: start; margin: 7px 0 4px; padding: 2px 10px 3px; border-radius: 999px;
  background: #E6F4E9; color: #1D6E32; font-size: 12.5px; font-weight: 500; line-height: 1.45;
}
.rs-reasons { list-style: none; margin: 4px -8px 4px; padding: 0; display: grid; gap: 2px; }
.rs-reason { position: relative; z-index: 0; display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 0 11px; padding: 3px 8px; font-size: 14.5px; line-height: 1.45; color: rgba(10, 10, 11, .82); }
.rs-rdot { width: 9px; height: 9px; margin-top: .42em; border-radius: 50%; border: 2px solid var(--blue); background: #fff; transition: background-color .4s var(--ease), transform .4s var(--ease), box-shadow .5s var(--ease); }
.rs-reason::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 8px; background: rgba(31, 111, 255, .04);
  transform: scaleX(0); transform-origin: left; opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease), background-color .6s, box-shadow .6s;
}
.rs-reason.is-lit::before { transform: scaleX(1); opacity: 1; }
.rs-reason.is-fresh::before { background: rgba(31, 111, 255, .09); box-shadow: inset 0 0 0 1px rgba(31, 111, 255, .32); }
.rs-reason.is-lit .rs-rdot { background: var(--blue); }
.rs-reason.is-fresh .rs-rdot { box-shadow: 0 0 0 4px rgba(31, 111, 255, .16); }
.rs-rdot { box-shadow: 0 0 0 0 rgba(31, 111, 255, 0); }
.rs-pick-site { margin: 6px 0 0; font-size: 14.5px; }
.rs-pick-site a {
  color: #17171A; text-decoration: underline dotted rgba(10, 10, 11, .4);
  text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s;
}
.rs-pick-site a svg { display: inline-block; margin-left: 5px; vertical-align: -1px; transition: opacity .3s; }
.rs-pick-site a:hover { color: var(--blue); text-decoration-color: currentColor; }
.rs-pick-reviews { margin: 3px 0 0; font-size: 12.5px; color: var(--pn-muted); }
/* longer answers (frame 03): plain paragraphs and bullet lists before the heading, a lead line
   before the reason rows and closing lines after them, as ChatGPT sets them */
.rs-para { margin: 0 0 10px; line-height: 1.6; text-wrap: pretty; }
.rs-bullets { margin: 0 0 16px; padding: 0 0 0 22px; display: grid; gap: 3px; list-style: disc outside; }
.rs-bul { padding-left: 4px; line-height: 1.5; }
.rs-bul::marker { color: #17171A; font-size: .9em; }
.rs-pick-lead { margin: 6px 0 2px; line-height: 1.5; }
.rs-pick-after { margin: 8px 0 0; line-height: 1.55; text-wrap: pretty; }
.rs-pick-after strong { font-weight: 600; }
/* a logo in place of a photo: a square tile, as ChatGPT shows a product's icon */
.rs-pick--logo .rs-pick-photo { grid-row: 1 / span 3; aspect-ratio: 1; background: #fff; border-radius: 16px; }
.rs-pick--logo .rs-pick-photo img { object-fit: contain; transform: scale(1.16); }
.rs-chat .rs-pick--logo .rs-pick-photo.rs-b img { transform: scale(1.24); }
.rs-chat .rs-pick--logo .rs-pick-photo.is-on img { transform: scale(1.16); }
.rs-pick--logo .rs-badge { margin: 0 0 4px; }
.rs-pick--logo .rs-pick-title { font-size: 17px; }
/* a long answer: its words stay beside it while the panel passes (desktop) */
@media (min-width: 820px) {
  .rs-item--long { align-items: start; }
  .rs-item--long .rs-text { position: sticky; top: calc(var(--header-h, 72px) + 48px); }
}

/* the stream: words and blocks wait, then arrive in order (JS adds .is-on) */
.rs-chat .rs-w { opacity: 0; transition: opacity .32s ease-out; white-space: nowrap; }   /* a quoted word never splits at its hyphen */
.rs-chat .rs-w.is-on { opacity: 1; }
.rs-chat .rs-b:not(.hl, a) { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.rs-chat .rs-b.is-on:not(.hl, a) { opacity: 1; transform: none; }
.rs-chat .rs-pick-photo.rs-b img { transform: scale(1.06); transition: transform .9s var(--ease); }
.rs-chat .rs-pick-photo.is-on img { transform: none; }
.rs-chat .hl { background-size: 0% 46%; transition: background-size 1.1s var(--ease) .1s; }
.rs-chat .hl.is-on { background-size: 100% 46%; }
.rs-chat a.rs-b:not(.is-on) { text-decoration-color: transparent; }
.rs-chat a.rs-b:not(.is-on) svg { opacity: 0; }
.rs-chat .rs-reason .rs-rdot { transform: scale(.4); }
.rs-chat .rs-reason.is-on .rs-rdot { transform: none; }
.rs-caret {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  opacity: 0; transition: opacity .25s;
}
.rs-caret.is-on { opacity: 1; }
/* the pulse lives on a child layer so the caret itself can jump word to word without lag */
.rs-caret::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: #17171A; animation: rs-pulse 1s ease-in-out infinite; }
@keyframes rs-pulse { 50% { transform: scale(.7); } }
@keyframes rs-rise { from { opacity: 0; transform: translateY(4px); } }
.rs-chat.is-reset * { transition: none !important; }

/* source and date under the panel, and the way to the untouched capture */
.rs-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.rs-original {
  font-weight: 500; color: var(--blue); text-decoration: none; border-bottom: 1px dashed rgb(31 111 255 / .5); padding-bottom: 1px;
  transition: border-color .2s;
}
.rs-original:hover { border-bottom-style: solid; }

.rs-lightbox { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; overflow: visible; }
.rs-lightbox::backdrop { background: rgb(11 30 91 / .5); backdrop-filter: blur(6px); }
.rs-lightbox[open] { animation: rs-lb-in .4s var(--ease) both; }
@keyframes rs-lb-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.rs-lb-inner { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rs-lb-inner img {
  display: block; width: auto; height: auto; max-width: min(1200px, calc(100vw - 32px)); max-height: calc(100svh - 120px);
  border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgb(11 30 91 / .12), 0 40px 90px -30px rgb(11 30 91 / .6);
}
.rs-lb-close {
  height: 34px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; background: #fff; color: #17171A;
  font: 500 13px/1 var(--font); box-shadow: 0 2px 10px rgb(11 30 91 / .25);
}
.rs-lb-close:hover { background: #F1F0EC; }
.rs-lb-cap { align-self: flex-start; margin: 0; font-size: .8125rem; color: #fff; }

@media (max-width: 819.98px) {
  .rs-chat { font-size: 14px; }
  .rs-chat-top { height: 42px; padding-left: 16px; }
  .rs-chat-body { padding: 14px 16px 20px; }
  .rs-q-row { margin-bottom: 14px; }
  .rs-q { max-width: 88%; padding: 8px 14px; }
  .rs-intro { margin-bottom: 16px; }
  .rs-recs { font-size: 16px; }
  .rs-pick { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; }
  .rs-pick-photo { width: 64px; grid-row: 1 / span 2; border-radius: 8px; }
  .rs-reasons, .rs-pick-site, .rs-pick-reviews { grid-column: 1 / -1; }
  .rs-reasons { margin-top: 10px; }
  .rs-reason, .rs-pick-site { font-size: 14px; }
  .rs-pick--logo .rs-pick-photo { width: 60px; grid-row: 1 / span 2; border-radius: 13px; }
  .rs-pick-lead, .rs-pick-after { grid-column: 1 / -1; }
  .rs-pick--logo .rs-pick-title { font-size: 16px; }
  .rs-bullets { padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-chat *, .rs-lightbox[open], .rs-replay { transition: none !important; animation: none !important; }
}