body.feedback-landing {
  --pf-bg: #0c0c0c;
  --pf-text: #f7f7f7;
  --pf-muted: #a1a1a1;
  --pf-line: #2b2b2b;
  --pf-accent: #FE5A1D;
  --color-bg: var(--pf-bg);
  --color-text: var(--pf-text);
  --color-text-secondary: var(--pf-muted);
  --color-border: var(--pf-line);
  --color-border-strong: #4b4b4b;
  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color-scheme: dark;
}
.feedback-landing *, .feedback-landing *::before, .feedback-landing *::after {box-sizing: border-box}
.pf-landing {overflow: clip}
.pf-wrap {width: min(1344px, calc(100% - 48px)); margin-inline: auto}
.pf-landing h1, .pf-landing h2, .pf-landing h3, .pf-landing p {margin: 0}
.pf-landing h1, .pf-landing h2 {font-family: inherit; font-weight: 400; letter-spacing: -.055em; line-height: 1.06; text-wrap: balance}
.pf-landing h1 {font-size: clamp(44px, 5.8vw, 84px)}
.pf-landing h2 {font-size: clamp(34px, 4vw, 56px)}
.pf-landing h3 {font-size: 17px; font-weight: 500; letter-spacing: -.025em; line-height: 1.4}
.pf-landing h1 span, .pf-landing h2 span {color: var(--pf-muted)}
.pf-landing p {color: var(--pf-muted)}
.pf-landing a {text-decoration: none; color: inherit}
.pf-landing a:hover {box-shadow: none}
.pf-landing button, .feedback-nav button, .pf-lightbox button {font: inherit; cursor: pointer}
.pf-landing button:focus-visible, .pf-landing a:focus-visible, .feedback-nav :focus-visible, .pf-lightbox button:focus-visible {outline: 2px solid var(--pf-accent); outline-offset: 5px}
.pf-landing button:active, .pf-cta:active {opacity: .8}
.pf-landing svg {width: 24px; height: 24px; flex-shrink: 0}
.pf-masthead {min-height: 112px; display: flex; align-items: center; gap: 28px; padding-right: 70px}
.pf-product {display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; letter-spacing: -.02em}
.pf-product img {display: block}
.pf-breadcrumb {display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--pf-muted)}
.pf-breadcrumb a:hover {color: var(--pf-text)}
.pf-breadcrumb span:last-child {color: var(--pf-muted)}
.pf-hero {display: grid; gap: 52px; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; padding-block: 44px 86px}
.pf-hero__visual {min-width: 0}
.pf-hero__copy > p {font-size: clamp(17px, 1.45vw, 20px); max-width: 34ch; margin: 24px 0 30px; line-height: 1.65}
.pf-cta {display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: var(--pf-text); color: var(--pf-bg) !important; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: 9999px; font-size: 14px; font-weight: 500; transition: background .2s, border-color .2s}
.pf-cta svg {width: 18px; height: 18px; transition: transform .2s}
.pf-cta:hover {background: #ddd !important; border-color: #ddd}
.pf-cta:hover svg {transform: translateX(3px)}
.pf-text-link {display: flex; align-items: center; justify-content: space-between; width: fit-content; gap: 18px; font-size: 12px; padding: 16px 0 0}
.pf-text-link:hover {color: var(--pf-accent); background: transparent !important}
.feedback-landing .pf-shot {position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px !important; overflow: hidden; background: #171717; text-align: left}
.pf-shot img {display: block; width: 100%; height: auto}
.feedback-landing .pf-shot--hero {padding: 35px 22px; background: #ab9b89 url("../images/page-feedback/painterly.64b3e80202fc.jpg") center / cover; border-radius: 24px !important}
.pf-shot--hero img {border-radius: 9px; box-shadow: 0 20px 40px #0005}
.pf-shot__zoom {position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 30px; height: 30px; background: #0c0c0ce6; color: #f7f7f7; border: 1px solid #ffffff30; border-radius: 50%; font-size: 17px; transition: background .2s}
.pf-shot:hover .pf-shot__zoom {background: var(--pf-accent); color: var(--pf-bg)}
.pf-caption {display: flex; align-items: center; gap: 8px; margin-top: 14px !important; font-size: 10px; letter-spacing: .01em}
.pf-dot {display: inline-block; width: 5px; height: 5px; background: var(--pf-accent); border-radius: 50%; flex-shrink: 0}
.pf-section {padding-block: 92px; border-top: 1px solid var(--pf-line); scroll-margin-top: 35px}
.pf-section-intro {display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 46px}
.pf-section-intro > p {max-width: 30ch; font-size: 15px}
.pf-story {display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 48px; align-items: center; padding-block: 32px}
.pf-story + .pf-story {border-top: 1px solid var(--pf-line)}
.pf-step-heading {display: flex; align-items: center; gap: 16px; color: var(--pf-accent); margin-bottom: 20px}
.pf-step-number {font-size: 12px; font-variant-numeric: tabular-nums}
.pf-step-copy h3 {font-size: 32px; font-weight: 400; letter-spacing: -.04em}
.pf-step-copy p {font-size: 15px; max-width: 30ch; margin-top: 14px}
.pf-story__canvas {min-width: 0}
.pf-landing .pf-story-svg {width: 100%; height: auto; overflow: visible}
.pf-svg-note, .pf-svg-output {opacity: 0; transition: opacity .35s, transform .45s}
.pf-svg-note {transform: translateY(8px)}
.pf-svg-output {transform: translateY(10px)}
.pf-svg-page, .pf-svg-pointer, .pf-svg-selection {transition: opacity .35s}
[data-story-step="1"] .pf-svg-note {opacity: 1; transform: none}
[data-story-step="1"] .pf-svg-pointer {opacity: 0}
[data-story-step="2"] .pf-svg-output {opacity: 1; transform: none}
[data-story-step="2"] .pf-svg-page, [data-story-step="2"] .pf-svg-pointer, [data-story-step="2"] .pf-svg-selection {opacity: .12}
.is-visible [data-story-step="0"] .pf-svg-pointer {animation: pf-point 1.5s ease both}
.is-visible [data-story-step="2"] .pf-svg-check {stroke-dasharray: 38; animation: pf-draw .7s .15s both}
@keyframes pf-point {from {transform: translate(90px, 85px)} to {transform: translate(0, 0)}}
@keyframes pf-draw {from {stroke-dashoffset: 38} to {stroke-dashoffset: 0}}
.pf-modes__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px}
.pf-modes__grid article > svg {color: var(--pf-accent); margin-bottom: 20px}
.pf-modes__grid p {font-size: 14px; line-height: 1.8; margin-top: 12px; max-width: 36ch}
.pf-portable {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; border-top: 1px solid var(--pf-line); margin-top: 32px; padding-top: 28px}
.pf-portable h3 {font-size: 25px; font-weight: 400}
.pf-portable p {font-size: 14px; line-height: 1.8; margin-top: 14px}
.pf-portable strong {color: var(--pf-text); font-weight: 500}
.pf-portable__example {min-width: 0}
.pf-portable .pf-portable__graphic {display: block; width: 260px; max-width: 100%; height: auto; color: var(--pf-muted); margin-bottom: 12px}
.pf-portable__example pre {margin: 0; padding: 0; background: transparent; color: var(--pf-accent); font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere}
.pf-portable__example code {font-family: "JetBrains Mono", ui-monospace, monospace}
.pf-portable__example .pf-portable__caption {font-size: 10px; margin: 4px 0 0}
.is-visible .pf-portable__packet {animation: pf-pack-image 5s ease-in-out infinite}
@keyframes pf-pack-image {
  0%, 15% {transform: translateX(-32px); opacity: 0}
  30% {transform: translateX(-16px); opacity: 1}
  65% {transform: translateX(103px); opacity: 1}
  80%, 100% {transform: translateX(103px); opacity: 0}
}
.pf-detail {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(44px, 7vw, 100px); align-items: center}
.pf-detail__visual {min-width: 0; padding-block: 15%; display: grid; place-items: center}
.feedback-landing .pf-detail__visual .pf-shot {width: 70%}

.pf-detail__copy > p {margin-top: 24px; font-size: 17px}
.pf-feature-lines {list-style: none; padding: 0; margin: 28px 0 0; display: grid}
.pf-feature-lines li {display: flex; gap: 18px; border-top: 1px solid var(--pf-line); padding: 21px 0}
.pf-feature-lines svg {margin-top: 3px; color: var(--pf-muted)}
.pf-feature-lines p {font-size: 13px; line-height: 1.7; margin-top: 5px}
.pf-usecases__grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px}
.pf-usecase-copy {display: flex; gap: 16px; margin-top: 24px}
.pf-usecase-copy svg {color: var(--pf-muted)}
.pf-usecase-copy p {font-size: 14px; line-height: 1.7; max-width: 44ch; margin-top: 8px}
.pf-handoff {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(40px, 8vw, 112px); align-items: center}
.pf-handoff > div > p {margin-top: 24px; max-width: 36ch; font-size: 17px}
.pf-handoff > div > .pf-compatibility {font-size: 14px; line-height: 2; color: var(--pf-text)}
.pf-handoff > div > .pf-muted {font-size: 12px}
.pf-export {min-width: 0; border-top: 1px solid #555; border-bottom: 1px solid #555; background: #101010}
.pf-export__bar {display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--pf-line); font-family: monospace; font-size: 12px}
.pf-export__bar small {margin-left: 12px; color: var(--pf-muted); font: inherit}
.pf-export__bar button {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 83px; min-height: 36px; border-radius: 9999px; border: 1px solid #444; background: transparent; color: var(--pf-text); font-size: 11px}
.pf-export__bar button:hover {border-color: var(--pf-accent)}
.pf-export__bar svg {width: 14px; height: 14px}
.pf-export pre {margin: 0; padding: 26px 24px; font-size: 12px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; color: #ddd; background: transparent}
.pf-export code {font-family: "JetBrains Mono", ui-monospace, monospace}
.pf-export__foot {display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--pf-line); padding: 14px 24px; font-size: 10px; color: var(--pf-muted)}
.pf-extras {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px}
.pf-extras article > svg {color: var(--pf-muted); margin-bottom: 20px}
.pf-extras p {font-size: 13px; line-height: 1.8; margin-top: 10px}
.pf-outro {text-align: center; padding-block: 100px 112px}
.pf-outro > img {margin: 0 auto 26px}
.pf-outro h2 {font-size: clamp(44px, 6vw, 80px)}
.pf-outro .pf-cta {margin-top: 34px}
.pf-outro > p {margin-top: 26px; font-size: 11px; line-height: 2}
.pf-outro kbd {font: inherit; color: #ccc}
.pf-footer {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; border-top: 1px solid var(--pf-line); padding-block: 26px; font-size: 11px; color: var(--pf-muted)}
.pf-footer a {display: inline-flex; align-items: center; gap: 8px; color: var(--pf-text)}
.pf-footer svg {width: 14px; height: 14px}
.pf-muted {color: var(--pf-muted)}
.feedback-nav {position: fixed; z-index: 50; top: 28px; right: max(24px, calc((100vw - 1344px) / 2)); padding-bottom: 14px; font-size: 14px; line-height: 1.5}
.feedback-nav__toggle {display: grid; place-items: center; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 1px solid #484848; color: #f7f7f7; background: #171717ed; backdrop-filter: blur(12px)}
.feedback-nav__toggle:hover {border-color: var(--pf-accent)}
.feedback-nav__toggle svg {width: 22px; height: 22px; transition: transform .25s}
.feedback-nav__toggle[aria-expanded="true"] svg {transform: rotate(90deg)}
.feedback-nav__links {position: absolute; right: 0; top: 62px; width: 230px; background: #171717f5; border: 1px solid #444; border-radius: 20px; padding: 12px; box-shadow: 0 16px 70px #0008; backdrop-filter: blur(20px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.97); transform-origin: top right; transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s}
.feedback-nav.is-open .feedback-nav__links {opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s}
.feedback-nav__links a {display: block; padding: 10px 14px; border-radius: 10px; color: #ddd; text-decoration: none; font-family: inherit}
.feedback-nav__links a:hover {background: #292929; color: #fff}
.feedback-nav__links .feedback-nav__brand {display: flex; justify-content: space-between; border-bottom: 1px solid #333; border-radius: 0; margin-bottom: 6px; padding-bottom: 14px; color: #999}
.pf-lightbox {position: fixed; inset: 0; padding: 0; border: 0; background: transparent; width: min(1440px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 80px); margin: auto; overflow: visible}
.pf-lightbox::backdrop {background: #000e; backdrop-filter: blur(12px)}
.pf-lightbox > img {display: block; width: 100%; max-height: calc(100dvh - 100px); object-fit: contain; border-radius: 8px}
.pf-lightbox__close {position: fixed; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #555; background: #151515; color: #f7f7f7}
.pf-lightbox__close svg {display: block; width: 22px; height: 22px; pointer-events: none}
.pf-lightbox__close:hover {background: #292929; border-color: #a1a1a1}
@media (prefers-reduced-motion: no-preference) {
  .pf-landing [data-reveal].will-reveal {opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease}
  .pf-landing [data-reveal].is-visible {opacity: 1; transform: none}
}
@media (min-width: 1550px) {.pf-hero {padding-block: 64px 110px}}
@media (max-width: 1000px) {
  .pf-hero {gap: 32px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr)}
  .pf-hero h1 {font-size: clamp(38px, 5.5vw, 58px)}
  .pf-masthead {gap: 18px}
  .pf-breadcrumb span:last-child {display: none}
  .pf-story {gap: 28px}
  .pf-section {padding-block: 66px}
}
@media (max-width: 760px) {
  .pf-wrap {width: calc(100% - 40px)}
  .pf-masthead {min-height: 94px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 6px; padding-right: 50px}
  .pf-product {font-size: 12px; gap: 9px}
  .pf-product img {width: 24px; height: 24px}
  .pf-breadcrumb {font-size: 10px; margin-left: 33px}
  .pf-breadcrumb span:last-child {display: inline}
  .feedback-nav {right: 20px; top: 24px}
  .feedback-nav__toggle {width: 42px; height: 42px}
  .feedback-nav__links {top: 56px}
  .pf-hero {grid-template-columns: 1fr; gap: 28px; padding-block: 10px 56px}
  .pf-hero h1 {font-size: clamp(46px, 11.5vw, 72px)}
  .pf-hero__copy > p {font-size: 16px; max-width: 36ch; margin-block: 18px 24px}
  .feedback-landing .pf-shot--hero {padding: 25px 14px; border-radius: 16px !important}
  .pf-shot--hero img {border-radius: 5px}
  .pf-caption {font-size: 9px}
  .pf-text-link {display: inline-flex; padding: 14px 0 14px 18px}
  .pf-section {padding-block: 52px}
  .pf-section-intro {display: block; margin-bottom: 28px}
  .pf-section-intro > p {margin-top: 20px; max-width: 36ch; font-size: 14px}
  .pf-story {display: flex; flex-direction: column; gap: 18px; align-items: stretch; padding-block: 28px}
  .pf-step-copy h3 {font-size: 27px}
  .pf-step-copy p {max-width: 36ch; font-size: 14px}
  .pf-step-heading {margin-bottom: 12px}
  .pf-story__canvas {width: 100%}
  .pf-modes__grid {grid-template-columns: 1fr; gap: 28px}
  .pf-modes__grid article > svg {margin-bottom: 12px}
  .pf-modes__grid p {margin-top: 8px; max-width: none}
  .pf-portable {grid-template-columns: 1fr; gap: 28px; margin-top: 32px; padding-top: 32px}
  .pf-portable__example pre {font-size: 12px}
  .pf-detail {grid-template-columns: 1fr; gap: 32px}
  .pf-detail__copy > p {font-size: 16px}
  .pf-feature-lines {margin-top: 24px}
  .pf-usecases__grid {grid-template-columns: 1fr; gap: 36px}
  .pf-usecase-copy {margin-top: 18px}
  .pf-handoff {grid-template-columns: 1fr; gap: 32px}
  .pf-export pre {font-size: 11px; padding: 24px 18px}
  .pf-export__bar, .pf-export__foot {padding-inline: 18px}
  .pf-handoff > div > p {font-size: 16px}
  .pf-extras {grid-template-columns: 1fr; gap: 30px}
  .pf-extras article {display: grid; grid-template-columns: 26px 1fr; column-gap: 16px}
  .pf-extras article > svg {grid-row: 1/3; margin: 0}
  .pf-extras p {grid-column: 2; margin-top: 6px}
  .pf-extras h3 {font-size: 16px}
  .pf-outro {padding-block: 64px}
  .pf-footer {font-size: 10px}
}
@media (prefers-reduced-motion: reduce) {
  html:has(.feedback-landing) {scroll-behavior: auto}
  .feedback-nav__links, .feedback-nav__toggle svg {transition: none}
  .feedback-landing *, .feedback-landing *::before, .feedback-landing *::after {animation: none !important; transition: none !important; scroll-behavior: auto !important}
}
@media (max-width: 760px) {
  .pf-lightbox {width: calc(100vw - 24px); max-height: calc(100dvh - 120px); overflow: auto; border-radius: 8px}
  .pf-lightbox > img {width: 1000px; max-width: none; max-height: none}
}

.pf-chrome-logo {display: block; width: 20px; height: 20px; flex-shrink: 0}
.pf-cta > svg {margin-left: 8px}
.pf-agent-logos {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; padding: 0; margin: 32px 0 0; gap: 26px 16px}
.pf-agent-logos li {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px; min-width: 0}
.pf-agent-logos img {display: block; width: 42px; height: 42px; object-fit: contain}
.pf-agent-logos img[src$="/bolt-brand.svg"] {width: 60px}
.pf-agent-logos span {font-size: 10px; color: var(--pf-muted); line-height: 1.4}
@media (max-width: 760px) {.pf-agent-logos {gap: 24px 12px; margin-top: 26px}.pf-agent-logos img {width: 36px; height: 36px}}

.pf-agent-logos img[src$="/copilot-brand.svg"] {width: 100%; max-width: 112px}

/* Page Feedback showcase. Shared landing primitives above also serve VS Code. */
.pf-showcase .pf-install-fixed {position:fixed;z-index:49;top:28px;right:max(88px,calc((100vw - 1344px)/2 + 64px))}
.pf-showcase .pf-install-fixed .pf-cta {min-height:48px;padding:10px 20px;font-size:12px;box-shadow:0 4px 20px #0005}
.pf-showcase .pf-masthead {padding-right:290px}
.pf-showcase .pf-install-mobile {display:none}
.pf-showcase .pf-agent-strip {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-block:28px 44px}
.pf-agent-strip > ul {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;width:100%;list-style:none;margin:0;padding:0}
.pf-agent-strip > ul > li {display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
.pf-agent-strip img, .pf-compatible-agents img {width:24px;height:24px;object-fit:contain}
.pf-showcase .pf-agent-icon--copilot {filter:brightness(0) invert(1)}
.pf-editor-tour {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center}
.pf-editor-stage {display:flex;flex-direction:column;align-items:center}
.pf-showcase .pf-editor-stage .pf-shot {width:100%;max-width:518px;border-radius:16px !important;background:#eeeae2}
.pf-tour-items {display:grid;gap:26px}
.pf-tour-items article {display:flex;align-items:flex-start;gap:18px}
.pf-tour-items svg {color:var(--pf-muted);width:20px;height:20px;margin-top:3px}
.pf-tour-items p {font-size:14px;line-height:1.8;max-width:40ch;margin-top:7px}
.pf-tour-items strong {font-weight:500;color:var(--pf-text)}
.pf-feature-split {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;align-items:center}
.pf-feature-copy > p {font-size:16px;margin-top:22px}
.pf-action-examples {display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;padding:0;margin:28px 0 0;color:var(--pf-muted);font-size:12px}
.pf-action-examples li::before {content:"✓";margin-right:8px;color:#aaa}
.pf-actions-visual {margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;padding:48px 24px;background:#171717;border-radius:20px}
.pf-actions-example {width:340px;max-width:100%;padding:18px;border:1px solid #494949;border-radius:10px;font-size:13px;line-height:1.7;background:var(--pf-bg)}
.pf-example-action {display:flex;gap:8px;align-items:center;margin-top:18px;color:var(--pf-muted);font-size:11px}
.pf-example-action b {font-size:10px;background:#292929;padding:0 8px;border-radius:5px;font-weight:400}
.pf-showcase .pf-actions-visual .pf-shot {max-width:340px;border-radius:8px !important}
.pf-context-proof {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:80px}
.pf-showcase .pf-context-proof .pf-shot {max-width:518px;justify-self:center;border-radius:16px !important}
.pf-context-notes {display:grid;gap:26px}
.pf-context-proof p {font-size:14px;line-height:1.8;margin-top:10px;max-width:40ch}
.pf-context-notes > p {font-size:12px;color:var(--pf-muted);margin:0}
.pf-text-diff {border-left:2px solid #444;padding:0 0 0 16px;margin:20px 0 0 40px;display:grid;gap:8px;font-size:12px}
.pf-text-diff del {color:var(--pf-muted);text-decoration-color:#b07575}
.pf-text-diff ins {color:#c7d6bc;text-decoration:none}
.pf-settings-overview {display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:80px;align-items:center}
.pf-showcase .pf-settings-overview .pf-shot {border:1px solid #404040;background:var(--pf-bg)}
.pf-settings-list {display:grid;gap:26px}
.pf-settings-list p {font-size:14px;margin-top:8px;line-height:1.8;max-width:33ch}
.pf-color-example {display:inline-flex;gap:10px;align-items:center;border:1px solid #444;border-radius:8px;padding:5px 10px 5px 5px;margin-top:14px}
.pf-color-example i {width:20px;height:20px;background:#404040;border-radius:4px}
.pf-color-example code {font-size:11px;color:var(--pf-muted)}
.pf-prompt-intro {display:flex;align-items:end;justify-content:space-between;gap:48px;margin:64px 0 32px;padding-top:48px;border-top:1px solid var(--pf-line)}
.pf-prompt-intro h3 {font-size:32px;font-weight:400;letter-spacing:-.04em;line-height:1.2}
.pf-prompt-intro h3 span {color:var(--pf-muted)}
.pf-prompt-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.pf-prompt-heading {display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.pf-prompt-heading > span {font:11px monospace;color:var(--pf-muted);order:1;overflow-wrap:anywhere}
.pf-prompt-grid .pf-shot {border:1px solid #333;border-radius:12px !important}
.pf-prompt-grid > article > p {font-size:13px;margin-top:18px;line-height:1.8}
.pf-feature-request {margin-top:28px;padding-top:24px;border-top:1px solid #333}
.pf-feature-request p {font-size:13px;line-height:1.8;margin-top:10px;max-width:40ch}
.pf-local {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 80px;align-items:center}
.pf-local > div > p {font-size:15px;line-height:1.8;max-width:44ch;margin-top:24px}
.pf-local-visual {display:flex;flex-direction:column;align-items:center;text-align:center}
.pf-local-visual .pf-security-lock {display:block;width:min(100%,320px);height:auto;color:var(--pf-text)}
.pf-lock-orbit {transform-origin:160px 130px;opacity:.7}
.pf-local .pf-local-visual > p {font-size:11px;margin-top:16px}
.pf-showcase .pf-outro .pf-cta {margin-top:34px}
@media (prefers-reduced-motion:no-preference) {
  .is-visible .pf-text-diff ins {animation:pf-output-in .5s .15s ease both}
  .is-visible .pf-lock-orbit {animation:pf-lock-orbit 24s linear infinite}
  .is-visible .pf-lock-keyhole {animation:pf-lock-pulse 3s ease-in-out infinite}
}
@keyframes pf-lock-orbit {to {transform:rotate(360deg)}}
@keyframes pf-lock-pulse {0%,100% {opacity:.6} 50% {opacity:1}}
@keyframes pf-output-in {from {opacity:.4;transform:translateY(3px)} to {opacity:1;transform:none}}
@media (max-width:1100px) {
  .pf-showcase .pf-masthead .pf-breadcrumb {display:none}
  .pf-agent-strip > ul {gap:18px}
  .pf-editor-tour,.pf-feature-split,.pf-settings-overview,.pf-context-proof {gap:40px}
}
@media (max-width:760px), (hover:none) and (pointer:coarse) {
  .pf-showcase .pf-install-desktop,.pf-showcase .pf-install-fixed {display:none}
  .pf-showcase .pf-install-mobile {display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.6;color:var(--pf-text);margin:20px 0 0}
  .pf-showcase .pf-install-mobile svg {width:18px;height:18px}
  .pf-showcase .pf-outro .pf-install-mobile {justify-content:center;margin-top:28px}
  .pf-showcase .pf-masthead {padding-right:50px}
}
@media (max-width:760px) {
  .pf-showcase .pf-masthead .pf-breadcrumb {display:flex}
  .pf-showcase .pf-hero__copy {order:-1}
  .pf-showcase .pf-hero h1 {font-size:clamp(42px,11vw,70px)}
  .pf-showcase .pf-text-link {padding:18px 0 0}
  .pf-showcase .pf-agent-strip {padding-block:0 36px;gap:20px}
  .pf-agent-strip > ul {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 16px;width:100%}
  .pf-agent-strip > ul > li {flex-direction:column;font-size:10px;gap:8px}
  .pf-editor-tour,.pf-feature-split,.pf-settings-overview,.pf-prompt-grid,.pf-local {grid-template-columns:minmax(0,1fr);gap:36px}
  .pf-tour-items {gap:24px}
  .pf-tour-items p,.pf-settings-list p {font-size:13px;max-width:none}
  .pf-actions-visual {padding:30px 20px}
  .pf-context-proof {grid-template-columns:minmax(0,1fr);gap:24px;justify-items:center}
  .pf-context-proof p {max-width:none}
  .pf-prompt-intro {display:block;margin-top:40px;padding-top:32px}
  .pf-prompt-heading {flex-wrap:wrap;gap:8px}
  .pf-prompt-grid .pf-shot {border-radius:8px !important}
  .pf-local > div > p {font-size:14px}
  .pf-showcase .pf-outro h2 {font-size:clamp(36px,9vw,60px)}
}

/* Neutral frames keep the product captures consistent with the default UI. */
.pf-showcase .pf-shot {border:1px solid #404040}
.pf-showcase .pf-shot:focus-visible {outline-color:#aaa}
.pf-showcase .pf-shot:hover .pf-shot__zoom {background:#404040;color:#fff}

/* Compact setup message and the repeated agent list. */
.pf-markdown-only {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:24px;width:100%;margin-top:12px;padding:28px 0 0;border-top:1px solid var(--pf-line)}
.pf-landing .pf-markdown-only h2,
.pf-landing .pf-markdown-only p {display:flex;align-items:center;justify-content:center;gap:14px;margin:0;font-size:25px;font-weight:400;line-height:1.06;letter-spacing:-.035em;color:var(--pf-text);text-wrap:balance}
.pf-markdown-only svg {width:24px;height:24px;flex-shrink:0;color:var(--pf-accent)}
.pf-compatible-agents {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;list-style:none;padding:0;margin:28px 0 0}
.pf-compatible-agents li {display:flex;align-items:center;gap:10px;min-width:0;font-size:12px;white-space:nowrap}
.pf-compatible-agents img {flex:none}
.pf-showcase .pf-agent-icon--bolt {width:36px}
.pf-handoff > div > .pf-compatible-note {font-size:12px;line-height:1.8;margin-top:22px}

/* An explanatory example of a review spanning pages on one site. */
.pf-review-pages {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:80px}
.pf-pages-copy > p {max-width:37ch;margin-top:24px;font-size:16px;line-height:1.8}
.pf-review-features {display:grid;gap:16px;list-style:none;margin:32px 0 0;padding:0}
.pf-review-features li {display:flex;align-items:center;gap:12px;color:var(--pf-muted);font-size:13px;line-height:1.6}
.pf-review-features svg {width:18px;height:18px}
.pf-pages-example {margin:0;padding:26px;border:1px solid #404040;border-radius:16px;background:#121212}
.pf-pages-example figcaption {display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;font-size:11px;color:var(--pf-muted);margin-bottom:22px}
.pf-pages-example figcaption span {font-family:ui-monospace,monospace;overflow-wrap:anywhere}
.pf-pages-example ol {display:grid;list-style:none;padding:0;margin:0}
.pf-pages-example li {display:grid;grid-template-columns:24px minmax(0,1fr) 18px;align-items:center;gap:16px;padding:22px 0;border-top:1px solid var(--pf-line)}
.pf-page-number {align-self:start;padding-top:4px;font:11px ui-monospace,monospace;color:var(--pf-muted)}
.pf-page-route {float:right;font:11px ui-monospace,monospace;color:var(--pf-muted);padding:5px 0 0 12px}
.pf-pages-example li p {font-size:12px;line-height:1.6;margin-top:6px}
.pf-pages-example li > svg {width:18px;height:18px;color:var(--pf-muted)}
.pf-pages-summary {display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;padding-top:24px;border-top:1px solid #404040}
.pf-pages-summary svg {width:18px;height:18px}
.pf-pages-summary > span:last-child {margin-left:auto;font-size:10px;color:var(--pf-muted)}
@media (min-width:1280px) {
  .pf-compatible-agents {grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px) {
  .pf-review-pages {gap:40px}
}
@media (max-width:760px) {
  .pf-markdown-only {grid-template-columns:1fr;gap:20px;margin-top:0;padding-top:24px}
  .pf-landing .pf-markdown-only h2, .pf-landing .pf-markdown-only p {justify-content:flex-start}
  .pf-review-pages {grid-template-columns:minmax(0,1fr);gap:32px}
  .pf-pages-copy > p {font-size:14px}
  .pf-pages-example {padding:20px}
  .pf-pages-example li {gap:10px}
  .pf-pages-summary > span:last-child {flex-basis:calc(100% - 28px);margin-left:28px}
}