/* Buyer exploration, extending the existing Connected R theme. */
@layer components {
  html:not(.js) [data-js-only] { display: none; }
  /* A page-scoped type token leaves more space for the authentic product capture. */
  .page--product-preview { --step-hero: clamp(3.2rem, 4.65vw, 4.7rem); }
  .hero--product { padding-block: 4.25rem 4rem; }
  .hero--product .hero-grid { grid-template-columns: .7fr 1.3fr; gap: 3rem; align-items: center; }
  .hero--product h1 { max-width: 12ch; font-size: var(--step-hero); line-height: 1.01; letter-spacing: -.065em; }
  .hero--product h1 em { color: var(--coral-ink); }
  .hero--product .lead { max-width: 29rem; font-size: 1.1rem; }
  .hero--product .small { max-width: 28rem; color: var(--muted); font-size: .8rem; }
  .hero--product .actions { gap: 1.2rem; }
  .product-preview { min-width: 0; width: 100%; scroll-margin-top: 2rem; }
  .product-preview__stage { position: relative; isolation: isolate; }
  .product-preview__stage::before { content: ""; position: absolute; inset: 5% -3% -5%; z-index: -1; background: radial-gradient(ellipse at 85% 25%, var(--lilac), transparent 65%), radial-gradient(ellipse at 15% 80%, var(--mint), transparent 70%); filter: blur(34px); opacity: .75; }
  .mac-window { overflow: hidden; border-radius: .85rem; background: var(--white); border: 1px solid color-mix(in srgb, var(--ink) 25%, var(--white)); box-shadow: 0 30px 60px -22px color-mix(in srgb, var(--ink) 30%, transparent), 0 5px 18px color-mix(in srgb, var(--ink) 8%, transparent), 0 0 0 5px color-mix(in srgb, var(--white) 50%, transparent); }
  .mac-window__chrome { display: grid; grid-template-columns: auto auto 1fr auto; gap: 1rem; align-items: center; height: 2.85rem; padding-inline: 1rem; background: linear-gradient(var(--white), var(--pale)); border-bottom: 1px solid var(--line); color: var(--muted); }
  .mac-window__lights { display: flex; gap: .4rem; }
  .mac-window__lights i { width: .62rem; height: .62rem; border-radius: 50%; background: var(--coral); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
  .mac-window__lights i:nth-child(2) { background: var(--yellow); }
  .mac-window__lights i:nth-child(3) { background: var(--mint); }
  .mac-window__navigation { display: flex; gap: .3rem; }
  .mac-window__chrome svg { width: 1rem; height: 1rem; flex-shrink: 0; }
  .mac-window__navigation svg:last-child { opacity: .4; }
  .mac-window__address { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 1.65rem; max-width: 22rem; width: 100%; justify-self: center; border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: .35rem; background: color-mix(in srgb, var(--white) 80%, transparent); font-size: .68rem; letter-spacing: .02em; }
  .mac-window__address svg { width: .7rem; height: .7rem; }
  .mac-window__tools { display: flex; }
  .product-screen { margin: 0; }
  .product-screen[hidden], .js .product-screen[data-screen-panel="research"]:not([data-active]) { display: none; }
  .product-screen__image { position: relative; display: block; overflow: hidden; background: var(--white); cursor: zoom-in; }
  .product-screen__image img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 980; }
  .product-screen__cursor { display: none; position: absolute; width: clamp(1rem, 2vw, 1.65rem); height: auto; color: var(--ink); filter: drop-shadow(0 2px 3px #183d3540); pointer-events: none; }
  .product-preview[data-playing="true"] .product-screen[data-active] .product-screen__cursor { display: block; animation: preview-cursor-inbox 6.5s ease-in-out both; }
  .product-preview[data-playing="true"] .product-screen[data-screen-panel="research"] .product-screen__cursor { animation-name: preview-cursor-research; }
  .product-preview[data-playing="true"] .product-screen[data-active] .product-screen__image img { animation: preview-reveal .65s ease-out both; }
  @keyframes preview-reveal { from { opacity: .45; } to { opacity: 1; } }
  @keyframes preview-cursor-inbox {
    0%, 12% { opacity: 0; left: 73%; top: 60%; }
    24%, 62% { opacity: 1; left: 66%; top: 55%; }
    85%, 94% { opacity: 1; left: 28%; top: 34%; }
    100% { opacity: 0; left: 28%; top: 34%; }
  }
  @keyframes preview-cursor-research {
    0%, 12% { opacity: 0; left: 28%; top: 34%; }
    32%, 62% { opacity: 1; left: 51%; top: 48%; }
    85%, 94% { opacity: 1; left: 28%; top: 25%; }
    100% { opacity: 0; left: 28%; top: 25%; }
  }
  .product-screen__image:focus-visible { outline: 3px solid var(--coral-ink); outline-offset: -3px; }
  .product-screen__zoom { position: absolute; right: 1rem; bottom: 1rem; display: flex; gap: .4rem; align-items: center; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: .4rem; background: var(--white); color: var(--ink); font-size: .65rem; font-weight: 600; box-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 10%, transparent); }
  .product-screen__zoom svg { width: .85rem; height: .85rem; }
  .product-screen__image:hover .product-screen__zoom { color: var(--white); background: var(--ink); border-color: var(--ink); }
  .product-screen figcaption { display: flex; justify-content: space-between; gap: .75rem; padding: .65rem 1rem; border-top: 1px solid var(--line); font-size: .65rem; color: var(--muted); background: var(--white); }
  .product-screen figcaption span:first-child { color: var(--ink); font-weight: 600; }
  .product-preview__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding-inline: .25rem; }
  .product-preview__footer p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.4; }
  .product-preview__footer strong { font-weight: 600; color: var(--ink); }
  .product-preview__controls { display: flex; align-items: center; gap: .6rem; }
  .product-preview__play { display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); }
  .product-preview__play:hover { background: var(--pale); border-color: var(--ink); }
  .product-preview__play svg { width: 1rem; height: 1rem; }
  .product-preview__play .preview-play-icon, .product-preview__play[data-paused="true"] .preview-pause-icon { display: none; }
  .product-preview__play[data-paused="true"] .preview-play-icon { display: block; }
  .product-preview__switch { display: flex; gap: .25rem; padding: .25rem; border: 1px solid var(--line); background: var(--paper); border-radius: .6rem; }
  .product-preview__switch button { position: relative; overflow: hidden; padding: .6rem .85rem; min-height: 2.75rem; background: transparent; color: var(--muted); border: 0; border-radius: .4rem; font-size: .75rem; font-weight: 600; }
  .product-preview__switch button[aria-pressed="true"] { color: var(--white); background: var(--ink); }
  .product-preview[data-playing="true"] .product-preview__switch button[aria-pressed="true"]::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--mint); transform-origin: left; animation: preview-progress 6.5s linear both; }
  @keyframes preview-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .screen-dialog { width: min(90rem, calc(100vw - 3rem)); max-width: none; max-height: 94dvh; margin: auto; padding: 0; border: 1px solid var(--line); border-radius: .85rem; background: var(--white); color: var(--ink); box-shadow: 0 30px 90px color-mix(in srgb, var(--ink) 35%, transparent); }
  .screen-dialog::backdrop { background: color-mix(in srgb, var(--ink) 72%, transparent); backdrop-filter: blur(8px); }
  .screen-dialog__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
  .screen-dialog__header strong, .screen-dialog__header span { display: block; }
  .screen-dialog__header strong { font-size: .9rem; }
  .screen-dialog__header div > span { color: var(--muted); font-size: .7rem; margin-top: .2rem; }
  .screen-dialog__header div > .screen-dialog__hint { display: none; }
  .screen-dialog__header button { display: flex; align-items: center; gap: 1rem; min-height: 2.75rem; background: var(--white); border: 1px solid var(--line); padding: .45rem .7rem; font-size: .85rem; }
  .screen-dialog__header button span { font-size: 1.2rem; line-height: 1; }
  .screen-dialog > img { display: block; width: 100%; height: auto; max-height: calc(94dvh - 5.1rem); object-fit: contain; object-position: top; }
  .outcome-strip { border-block: 1px solid var(--line); }
  .outcome-strip .container { display: grid; grid-template-columns: repeat(3, 1fr); }
  .outcome-strip a { display: block; padding: 1.5rem 2rem; border-right: 1px solid var(--line); text-decoration: none; }
  .outcome-strip a:first-child { padding-left: 0; }
  .outcome-strip a:last-child { border-right: 0; }
  .outcome-strip strong { font: 600 1.1rem var(--font-display); display: block; }
  .outcome-strip span { font-size: .8rem; color: var(--muted); }
  .outcome-strip a:hover strong { text-decoration: underline; text-underline-offset: .2rem; }
  .agent-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
  .agent-filters button { background: transparent; border: 1px solid var(--dark-line); border-radius: 2rem; color: var(--paper); padding: .55rem 1rem; font-size: .9rem; min-height: 2.75rem; }
  .agent-filters button[aria-pressed="true"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
  .agent-filters button:focus-visible { outline-color: var(--yellow); }
  .agent-count { color: var(--on-dark); font-size: .8rem; margin-bottom: 1.5rem; }
  .agent-grid .agent-card[hidden] { display: none; }
  .agent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-card { padding: 1.5rem; }
  .agent-card__top { margin-bottom: 1.2rem; }
  .people-section { display: grid; grid-template-columns: 1.05fr .95fr; gap: 4.5rem; align-items: center; }
  .people-section figure { position: relative; }
  .people-section img { display: block; width: 100%; border-radius: 1rem 5rem 1rem 1rem; aspect-ratio: 1.15; object-fit: cover; object-position: 58% center; }
  .people-section figcaption { margin-top: .65rem; color: var(--muted); font-size: .75rem; }
  .people-section h2 em { color: var(--coral-ink); }
  .people-section .capline { padding-block: 1rem; }
  .people-section .capline h3 { font-size: 1.15rem; margin-bottom: .4rem; }
  .people-section .capline p { font-size: .9rem; }
  .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4.5rem; }
  .faq-list details { border-bottom: 1px solid var(--line); }
  .faq-list details:first-child { border-top: 1px solid var(--line); }
  .faq-list summary { padding: 1.2rem 1.8rem 1.2rem 0; font-weight: 600; }
  .faq-list details p { padding-bottom: 1.2rem; color: var(--muted); font-size: 1rem; }
  .fit-panel { display: grid; grid-template-columns: .85fr 1.15fr; border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
  .fit-panel__input { padding: 2.2rem; background: var(--lilac-light); }
  .fit-panel__input h2 { font-size: 2.2rem; }
  .fit-panel__input label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .65rem; }
  .fit-panel__input select { width: 100%; padding: .8rem; color: var(--ink); background: var(--white); border: 1px solid var(--muted); }
  .fit-panel__result { padding: 2.2rem; background: var(--white); }
  .fit-panel__result h3 { font-size: 1.8rem; }
  .fit-panel__scope { font-size: .85rem; border-block: 1px solid var(--line); padding-block: 1rem; color: var(--muted); }
  .fit-panel__note { font-size: .85rem; color: var(--muted); margin-top: 1rem; }
  .email-planner { margin: 1.5rem 0; }
  .email-planner .field { margin-block: 1rem; }
  .email-planner textarea { min-height: 6rem; }
  .email-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block: 1rem; }
  .email-tools button { background: transparent; border: 1px solid var(--line); padding: .6rem .8rem; font-size: .85rem; }
  .email-tools a { font-size: .9rem; }
  .email-status { font-size: .85rem; color: var(--muted); min-height: 1.5em; }
  .demo-expectation { padding: 1rem; background: var(--mint-light); border-radius: .75rem; font-size: .9rem; margin-top: 1.5rem; }
  .product-explorer { max-width: 72rem; margin-inline: auto; }
  @media (max-width: 1100px) {
    .hero--product .hero-grid { gap: 3rem; }
    .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .people-section, .faq-grid { gap: 2.5rem; }
  }
  @media (max-width: 1100px) and (min-width: 801px) {
    .hero--product .hero-grid { grid-template-columns: 1fr; }
    .hero--product .hero-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; max-width: none; }
    .hero--product .hero-copy > .eyebrow { grid-column: 1 / -1; }
    .hero--product h1 { grid-column: 1; grid-row: 2 / 5; margin: 0; }
    .hero--product .lead, .hero--product .actions, .hero--product .small { grid-column: 2; }
    .hero--product .actions { margin-block: .5rem 1rem; }
  }
  @media (max-width: 800px) {
    .hero--product { padding-block: 2.75rem; }
    .hero--product .hero-grid, .people-section, .faq-grid, .fit-panel { grid-template-columns: 1fr; }
    .hero--product .hero-copy { max-width: 40rem; }
    .hero--product h1 { max-width: 14ch; }
    .hero--product .lead { max-width: 38rem; }
    .people-section img { aspect-ratio: 1.6; }
    .outcome-strip a { padding: 1.2rem .8rem; }
    .outcome-strip strong { font-size: 1rem; }
    .outcome-strip span { font-size: .75rem; }
  }
  @media (max-width: 540px) {
    .product-preview__stage::before { inset: 10% 0 -5%; filter: blur(20px); }
    .mac-window { border-radius: .6rem; box-shadow: 0 14px 28px -8px color-mix(in srgb, var(--ink) 20%, transparent); }
    .mac-window__chrome { height: 2.3rem; gap: .7rem; padding-inline: .7rem; grid-template-columns: auto 1fr auto; }
    .mac-window__navigation { display: none; }
    .mac-window__lights { gap: .3rem; }
    .mac-window__lights i { width: .5rem; height: .5rem; }
    .mac-window__address { font-size: .6rem; }
    .product-screen figcaption { padding: .55rem .7rem; font-size: .58rem; }
    .product-screen__zoom { right: .55rem; bottom: .55rem; padding: .4rem; }
    .product-screen__zoom span { display: none; }
    .product-preview__footer { align-items: flex-start; flex-direction: column; gap: .9rem; margin-top: 1rem; }
    .product-preview__footer p br { display: none; }
    .product-preview__footer p strong { margin-left: .25rem; }
    .product-preview__controls { width: 100%; }
    .product-preview__switch { width: 100%; }
    .product-preview__switch button { flex: 1; }
    .screen-dialog { width: calc(100vw - 1rem); }
    .screen-dialog > img { min-width: 960px; width: 960px; max-height: none; }
    .screen-dialog__header { position: sticky; left: 0; top: 0; z-index: 1; }
    .screen-dialog__header div > .screen-dialog__hint { display: block; font-size: .65rem; }

    .hero--product { padding-block: 2rem; }
    .hero--product .hero-grid { gap: 2rem; }
    .hero--product h1 { font-size: var(--step-hero); }
    .hero--product .lead { font-size: 1rem; }
    .hero--product .actions { margin-block: 1.5rem 1rem; gap: .8rem; }
    .hero--product .actions .btn { justify-content: center; }
    .hero--product .actions .text-link { font-size: .85rem; }
    .outcome-strip .container { grid-template-columns: 1fr; }
    .outcome-strip a, .outcome-strip a:first-child { padding: 1rem 0; border: 0; border-bottom: 1px solid var(--line); }
    .outcome-strip a:last-child { border-bottom: 0; }
    .outcome-strip strong { display: inline; margin-right: .5rem; }
    .agent-grid { grid-template-columns: 1fr; }
    .agent-filters { gap: .4rem; }
    .agent-filters button { padding-inline: .8rem; font-size: .8rem; }
    .fit-panel__input, .fit-panel__result { padding: 1.4rem; }
    .fit-panel__input h2 { font-size: 1.8rem; }
    .people-section, .faq-grid { gap: 2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-preview[data-playing="true"] .product-screen[data-active] .product-screen__cursor { display: none; animation: none; }
    .product-preview[data-playing="true"] .product-screen[data-active] .product-screen__image img,
    .product-preview[data-playing="true"] .product-preview__switch button[aria-pressed="true"]::after { animation: none; }
  }
}