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-hero__facts {display: flex; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--pf-line); padding-top: 22px; margin-top: 28px; color: var(--pf-muted); font-size: 11px}
.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-hero__facts {gap: 6px 12px}
  .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-hero__facts {margin-top: 22px; padding-top: 20px}
  .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}