/* Pro Prompt Generator page (tools/pro-prompt/). Everything is scoped to .pb / .pb-page. */
.pb-page {
  --pb-bg: #F7F6F2;
  --pb-band: #EFEDE7;
  --pb-card: #FFFFFF;
  --pb-soft: #F4F3EF;
  --pb-softer: #FBFAF7;
  --pb-field: #FCFBF9;
  --pb-line: #E6E4DE;
  --pb-line-2: #D9D7D0;
  --pb-ink: #17171B;
  --pb-ink-2: #4A4950;
  --pb-muted: #6B6A72;
  --pb-accent: #1F5EFF;
  --pb-accent-ink: #1A45C2;
  --pb-on-ink: #FFFFFF;
  --pb-blank-bg: #FFE7A3;
  --pb-blank-ink: #3D2E00;
  --pb-ok-bg: #E8F5EE;
  --pb-ok-ink: #065F46;
  --pb-warn: #8A6100;
  --pb-tip-bg: #FFF7E6;
  --pb-tip-line: #F3E2BD;
  --pb-tip-ink: #5B4613;
  --pb-photo: #C2410C; --pb-photo-bg: #FDEEE4;
  --pb-image: #1F5EFF; --pb-image-bg: #E7EEFF;
  --pb-video: #047857; --pb-video-bg: #E3F4EC;
  --pb-text: #9D174D;  --pb-text-bg: #FBE7F0;
  --pb-shadow: 0 1px 2px rgba(23, 23, 27, 0.04), 0 30px 60px -30px rgba(23, 23, 27, 0.28);
  --pb-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --pb-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
  background: var(--pb-bg);
}
[data-theme="dark"] .pb-page {
  --pb-bg: #111113;
  --pb-band: #18181B;
  --pb-card: #1D1D21;
  --pb-soft: #26262B;
  --pb-softer: #1A1A1E;
  --pb-field: #16161A;
  --pb-line: #2F2F36;
  --pb-line-2: #3C3C44;
  --pb-ink: #F3F2EE;
  --pb-ink-2: #C4C3CA;
  --pb-muted: #9E9DA5;
  --pb-accent: #4D7EFF;
  --pb-accent-ink: #8FB0FF;
  --pb-on-ink: #111113;
  --pb-blank-bg: #5A4710;
  --pb-blank-ink: #FFE7A3;
  --pb-ok-bg: #12352A;
  --pb-ok-ink: #7EE2B8;
  --pb-warn: #F2C45A;
  --pb-tip-bg: #2A2413;
  --pb-tip-line: #4A3F1E;
  --pb-tip-ink: #F1DDA6;
  --pb-photo: #FB9A64; --pb-photo-bg: #3A2217;
  --pb-image: #8FB0FF; --pb-image-bg: #1C2744;
  --pb-video: #5FD3A2; --pb-video-bg: #14322A;
  --pb-text: #F58AB8;  --pb-text-bg: #3A1A29;
  --pb-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.pb { color: var(--pb-ink); font-size: 16px; overflow-x: clip; }
.pb a { color: inherit; }
.pb-wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.pb-crumbs { padding-top: 20px; margin-bottom: 0; }

.pb-h1, .pb-h2, .pb-h3, .pb-h4 { font-family: var(--pb-display); color: var(--pb-ink); margin: 0; }
.pb-h2 { font-weight: 800; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.08; letter-spacing: -0.03em; }
.pb-h3 { font-weight: 700; font-size: 20px; }
.pb-h4 { font-weight: 700; font-size: 18px; line-height: 1.3; }
.pb-kicker { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pb-muted); margin: 0; }
.pb-sub { margin: 0; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--pb-ink-2); }
.pb-mono { font-family: var(--pb-mono); font-size: 13px; }
.pb-muted { color: var(--pb-muted); }
.pb-accent { color: var(--pb-accent); }
.pb-center { display: flex; justify-content: center; margin-top: 28px; }

/* Buttons */
.pb-btn { height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; border: 0; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.pb-btn:hover { transform: translateY(-1px); }
.pb-btn:active { transform: translateY(0); }
.pb a.pb-btn-dark, .pb-btn-dark { background: var(--pb-ink); color: var(--pb-bg); }
.pb a.pb-btn-outline, .pb-btn-outline { background: var(--pb-card); color: var(--pb-ink); border: 1.5px solid var(--pb-ink); }
.pb-btn-accent { background: var(--pb-accent); color: #FFFFFF; height: 50px; font-size: 16px; border-radius: 13px; }
.pb-btn-accent:hover { box-shadow: 0 10px 22px -10px var(--pb-accent); }
.pb a.pb-btn-white { background: #FFFFFF; color: #17171B; flex-shrink: 0; height: 58px; font-size: 18px; }
.pb-btn-sm { height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pb-btn-ink { background: var(--pb-ink); color: var(--pb-bg); border: 0; }
.pb-btn-ghost { background: var(--pb-card); color: var(--pb-ink); border: 1px solid var(--pb-line-2); }
.pb-btn-sm:disabled { opacity: .45; cursor: not-allowed; }
.pb button:focus-visible, .pb a:focus-visible, .pb select:focus-visible, .pb summary:focus-visible, .pb-result:focus-visible { outline: 3px solid var(--pb-accent); outline-offset: 2px; }

/* Hero */
.pb-hero { position: relative; width: min(1440px, 100%); margin: 0 auto; min-height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 16px 24px; box-sizing: border-box; text-align: center; }
.pb-hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pb-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px; margin: 0; background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 999px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--pb-ink-2); }
.pb-dot { width: 7px; height: 7px; border-radius: 99px; background: #047857; flex-shrink: 0; }
.pb-h1 { max-width: 760px; font-weight: 800; font-size: clamp(40px, 6.2vw, 72px); line-height: 1.02; letter-spacing: -0.04em; }
.pb-lede { max-width: 640px; margin: 0; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; color: var(--pb-ink-2); }
.pb-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.pb-works { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pb-works-list { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font-family: var(--pb-display); font-weight: 700; font-size: 18px; color: var(--pb-ink-2); }

.pb-float { position: absolute; margin: 0; padding: 8px; background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 18px; box-shadow: 0 18px 40px -20px rgba(23, 23, 27, 0.35); transition: transform .3s ease; }
.pb-float:hover { transform: rotate(0deg) scale(1.03) !important; }
.pb-float img { width: 100%; height: 148px; object-fit: cover; border-radius: 12px; display: block; background: var(--pb-soft); }
.pb-float figcaption { padding: 10px 4px 4px; font-size: 13px; font-weight: 600; text-align: left; }
.pb-f1 { left: 44px; top: 36px; width: 264px; transform: rotate(-5deg); }
.pb-f2 { right: 44px; top: 36px; width: 264px; transform: rotate(5deg); }
.pb-f3 { left: 96px; top: 330px; width: 232px; transform: rotate(4deg); }
.pb-f4 { right: 96px; top: 330px; width: 232px; transform: rotate(-4deg); }
.pb-f3 img, .pb-f4 img { height: 130px; }

/* Builder */
.pb-builder-wrap { padding: 40px 0 96px; scroll-margin-top: 72px; }
.pb-builder { display: grid; grid-template-columns: minmax(0, 700fr) minmax(0, 480fr); background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 28px; overflow: hidden; box-shadow: var(--pb-shadow); }
.pb-left { display: flex; flex-direction: column; border-right: 1px solid var(--pb-line); min-width: 0; }
.pb-left-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 22px 26px 6px; }
.pb-auto-note { font-size: 13px; color: var(--pb-muted); }
.pb-auto-note button { font: inherit; color: var(--pb-accent-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.pb-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px 26px 0; }
.pb-mode { --m: var(--pb-photo); --mb: var(--pb-photo-bg); height: 88px; padding: 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border-radius: 14px; text-align: left; font: inherit; color: var(--pb-ink); border: 1.5px solid var(--pb-line); background: var(--pb-softer); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.pb-mode[data-type="image"] { --m: var(--pb-image); --mb: var(--pb-image-bg); }
.pb-mode[data-type="video"] { --m: var(--pb-video); --mb: var(--pb-video-bg); }
.pb-mode[data-type="text"] { --m: var(--pb-text); --mb: var(--pb-text-bg); }
.pb-mode:hover { border-color: var(--pb-line-2); background: var(--pb-card); }
.pb-mode[aria-checked="true"] { border-color: var(--pb-ink); background: var(--pb-card); box-shadow: 0 0 0 3px var(--mb); }
.pb-mode-ic { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--mb); color: var(--m); }
.pb-mode-label { font-size: 14px; font-weight: 600; }
.pb-field { padding: 14px 26px 0; }
.pb-field .pb-kicker { margin-bottom: 8px; }
.pb-idea { width: 100%; box-sizing: border-box; padding: 16px 18px; border: 1.5px solid var(--pb-line-2); border-radius: 14px; resize: vertical; min-height: 84px; font: inherit; font-size: 20px; line-height: 1.45; color: var(--pb-ink); background: var(--pb-field); transition: border-color .15s, box-shadow .15s; }
.pb-idea::placeholder { color: var(--pb-muted); }
.pb-idea:focus { outline: none; border-color: var(--pb-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pb-accent) 18%, transparent); }
.pb-try { display: flex; align-items: center; gap: 8px; padding: 12px 26px 0; flex-wrap: wrap; }
.pb-try-label { font-size: 14px; color: var(--pb-muted); }
.pb-try-chips { display: contents; }
.pb-chip { min-height: 34px; padding: 4px 13px; background: var(--pb-soft); border: 1px solid var(--pb-line); border-radius: 999px; font: inherit; font-size: 14px; color: var(--pb-ink-2); cursor: pointer; }
.pb-chip:hover { border-color: var(--pb-ink); color: var(--pb-ink); }
.pb-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 26px; }
.pb-opts { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.pb-opt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--pb-ink-2); }
.pb-opt[hidden] { display: none; }
.pb-select { height: 36px; padding: 0 30px 0 12px; border: 0; border-radius: 9px; background: var(--pb-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6A72' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; -webkit-appearance: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--pb-ink); cursor: pointer; }
.pb-for-static { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; background: var(--pb-soft); border-radius: 9px; font-weight: 600; color: var(--pb-ink); }
.pb-for-static[hidden] { display: none; }

.pb-out { margin: 0 18px 18px; background: var(--pb-soft); border-radius: 18px; overflow: hidden; flex-grow: 1; display: flex; flex-direction: column; }
.pb-out-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--pb-line); }
.pb-out-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pb-out-btns { display: flex; gap: 8px; }
.pb-count { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 999px; font-size: 13px; color: var(--pb-ink-2); }
.pb-count[hidden] { display: none; }
.pb-result { padding: 18px 20px; min-height: 220px; max-height: 460px; box-sizing: border-box; overflow: auto; font-family: var(--pb-mono); font-size: 14px; line-height: 1.75; color: var(--pb-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pb-result mark { background: var(--pb-blank-bg); color: var(--pb-blank-ink); border-radius: 5px; padding: 1px 4px; font-weight: 600; }
.pb-empty { font-family: inherit; color: var(--pb-muted); }
.pb-status { margin: 0; padding: 0 20px 14px; font-size: 13.5px; color: var(--pb-muted); }
.pb-status:empty { display: none; }

.pb-right { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: var(--pb-softer); min-width: 0; }
.pb-pic { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--pb-line); text-decoration: none; }
.pb-pic img { width: 100%; height: 252px; object-fit: cover; display: block; transition: transform .4s ease; }
.pb-pic:hover img { transform: scale(1.03); }
.pb-pic-tag { position: absolute; left: 12px; top: 12px; height: 28px; padding: 0 10px; display: flex; align-items: center; background: rgba(23, 23, 27, 0.78); color: #FFFFFF; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pb-pic-meta { display: flex; flex-direction: column; gap: 4px; }
.pb-pic-title { font-family: var(--pb-display); font-weight: 700; font-size: 19px; line-height: 1.25; }
.pb-pic-tools { font-size: 14px; color: var(--pb-ink-2); }
.pb-block { display: flex; flex-direction: column; gap: 10px; }
.pb-includes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pb-includes li { height: 30px; padding: 0 10px 0 28px; display: inline-flex; align-items: center; background: var(--pb-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") no-repeat 10px center; color: var(--pb-ok-ink); border-radius: 8px; font-size: 13px; font-weight: 600; }
.pb-launch { display: flex; gap: 8px; flex-wrap: wrap; }
.pb-launch a { height: 36px; padding: 0 12px 0 14px; display: inline-flex; align-items: center; gap: 6px; background: var(--pb-card); border: 1px solid var(--pb-line-2); border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; }
.pb-launch a::after { content: '↗'; font-size: 13px; color: var(--pb-muted); }
.pb-launch a:hover { border-color: var(--pb-ink); }
.pb-related[hidden] { display: none; }
.pb-related { display: flex; flex-direction: column; gap: 8px; }
.pb-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pb-related a { font-size: 14.5px; font-weight: 600; color: var(--pb-accent-ink); text-decoration: none; }
.pb-related a:hover { text-decoration: underline; }
.pb-tip { margin: auto 0 0; padding: 14px 16px; display: flex; gap: 12px; background: var(--pb-tip-bg); border: 1px solid var(--pb-tip-line); border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--pb-tip-ink); }
.pb-tip svg { flex-shrink: 0; }

/* Stats */
.pb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--pb-line-2); border-bottom: 1px solid var(--pb-line-2); margin-bottom: 96px; }
.pb-stats > div { padding: 30px 12px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.pb-stats > div + div { border-left: 1px solid var(--pb-line-2); }
.pb-stats strong { font-family: var(--pb-display); font-weight: 800; font-size: clamp(34px, 4vw, 46px); letter-spacing: -0.03em; line-height: 1.1; }
.pb-stats span { font-size: 15px; color: var(--pb-ink-2); }

/* Sections */
.pb-section { padding: 96px 0; }
.pb-band { background: var(--pb-band); }
.pb-sec-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 36px; }

/* Before / after (always dark) */
.pb-dark { padding: 96px 0; background: #17171B; color: #FFFFFF; }
[data-theme="dark"] .pb-dark { background: #0A0A0C; border-block: 1px solid #25252B; }
.pb-dark .pb-h2 { color: #FFFFFF; }
.pb-dark .pb-sub { color: #BDBCC3; }
.pb-dark .pb-kicker { color: #A9A8B0; }
.pb-diff { display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 780fr); gap: 20px; }
.pb-diff-in { padding: 28px; display: flex; flex-direction: column; gap: 18px; background: #232329; border: 1px solid #34343C; border-radius: 22px; }
.pb-diff-idea { font-family: var(--pb-mono); font-size: 26px; color: #FFFFFF; }
.pb-diff-wrong { margin-top: auto; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: #D4D3D9; }
.pb-diff-wrong p { margin: 0; display: flex; gap: 10px; }
.pb-x { color: #F87171; }
.pb-diff-out { padding: 28px; display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; color: #26252B; border-radius: 22px; }
.pb-diff-out .pb-kicker { color: #6B6A72; }
.pb-diff-out-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.pb-pill-green { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; background: #E8F5EE; color: #065F46; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.pb-parts { margin: 0; }
.pb-parts > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid #EFEDE8; }
.pb-parts dd { margin: 0; font-size: 16px; line-height: 1.55; }
.pb-parts mark { background: #FFE7A3; color: #3D2E00; border-radius: 5px; padding: 1px 4px; font-weight: 600; }
.pb-part { justify-self: start; align-self: start; height: 28px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 8px; font-size: 13px; font-weight: 600; }
.pb-part-task { background: #E7EEFF; color: #1A45C2; }
.pb-part-ctx { background: #F1F0EC; color: #3A3940; }
.pb-part-goal { background: #FDEEE4; color: #9A3412; }
.pb-part-safe { background: #E8F5EE; color: #065F46; }
.pb-part-q { background: #FBE7F0; color: #9D174D; }

/* Library */
.pb-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 26px; }
.pb-filter { height: 44px; padding: 0 8px 0 16px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 600; border: 1px solid var(--pb-line-2); background: var(--pb-card); color: var(--pb-ink); cursor: pointer; }
.pb-filter span { height: 28px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13px; background: var(--pb-soft); color: var(--pb-ink-2); }
.pb-filter[aria-pressed="true"] { border-color: var(--pb-ink); background: var(--pb-ink); color: var(--pb-bg); }
.pb-filter[aria-pressed="true"] span { background: color-mix(in srgb, var(--pb-bg) 22%, transparent); color: var(--pb-bg); }
.pb-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.pb a.pb-card { display: flex; flex-direction: column; background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 20px; overflow: hidden; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.pb a.pb-card[hidden] { display: none; }
.pb a.pb-card:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(23, 23, 27, 0.45); }
.pb-card-pic { position: relative; display: block; padding: 8px 8px 0; }
.pb-card-pic img { width: 100%; height: 160px; object-fit: cover; border-radius: 14px; display: block; background: var(--pb-soft); }
.pb-badge { position: absolute; left: 18px; top: 18px; height: 24px; padding: 0 9px; display: flex; align-items: center; background: rgba(23, 23, 27, 0.78); color: #FFFFFF; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.pb-card-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.pb-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pb-mode-tag { height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 7px; font-size: 12.5px; font-weight: 600; background: var(--pb-photo-bg); color: var(--pb-photo); }
.pb-mode-tag[data-mode="image"] { background: var(--pb-image-bg); color: var(--pb-image); }
.pb-mode-tag[data-mode="video"] { background: var(--pb-video-bg); color: var(--pb-video); }
.pb-mode-tag[data-mode="text"] { background: var(--pb-text-bg); color: var(--pb-text); }
.pb-ready { font-size: 12.5px; font-weight: 600; color: var(--pb-warn); }
.pb-ready.is-ready { color: var(--pb-ok-ink); }
.pb-card-title { font-family: var(--pb-display); font-weight: 700; font-size: 17.5px; line-height: 1.25; color: var(--pb-ink); }
.pb-card-tools { margin-top: auto; font-size: 13px; color: var(--pb-muted); }

/* How it works */
.pb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pb-steps li { padding: 28px; display: flex; flex-direction: column; gap: 14px; background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 22px; }
.pb-steps .pb-h4 { font-size: 23px; }
.pb-steps p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--pb-ink-2); }
.pb-step-top { display: flex; align-items: center; justify-content: space-between; }
.pb-step-n { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--pb-ink); color: var(--pb-bg); border-radius: 999px; font-family: var(--pb-display); font-weight: 800; font-size: 20px; }
.pb-step-sample { margin-top: auto; padding: 12px 14px; background: var(--pb-soft); border-radius: 12px; font-family: var(--pb-mono); font-size: 13.5px; color: var(--pb-ink-2); }

/* Why */
.pb-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.pb-why > div { padding: 28px; display: flex; gap: 18px; background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 20px; }
.pb-why-ic { flex-shrink: 0; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--pb-soft); border-radius: 14px; color: var(--pb-ink); }
.pb-why .pb-h4 { font-size: 21px; margin-bottom: 6px; }
.pb-why p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--pb-ink-2); }
.pb-why p a, .pb-more-tools a { color: var(--pb-accent-ink); }
.pb-more-tools { margin: 28px 0 0; text-align: center; font-size: 15px; color: var(--pb-ink-2); }

/* FAQ */
.pb-faq-grid { display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 752fr); gap: 48px; }
.pb-faq-intro { display: flex; flex-direction: column; gap: 14px; }
.pb-faq { display: flex; flex-direction: column; gap: 10px; }
.pb-faq details { background: var(--pb-card); border: 1px solid var(--pb-line); border-radius: 16px; }
.pb-faq summary { min-height: 64px; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 600; color: var(--pb-ink); box-sizing: border-box; }
.pb-faq summary::-webkit-details-marker { display: none; }
.pb-sign { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--pb-soft); color: var(--pb-ink); font-size: 20px; transition: transform .2s ease, background .2s ease; }
.pb-faq details[open] .pb-sign { transform: rotate(45deg); background: var(--pb-ink); color: var(--pb-bg); }
.pb-faq p { margin: 0; padding: 0 22px 22px; font-size: 16px; line-height: 1.6; color: var(--pb-ink-2); }

/* CTA */
.pb-cta { margin-block: 88px; box-sizing: border-box; padding: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--pb-accent); border-radius: 32px; }
.pb-cta .pb-h2 { color: #FFFFFF; font-size: clamp(30px, 4vw, 48px); }
.pb-cta p { margin: 12px 0 0; font-size: 18px; color: #E4EAFF; }
[data-theme="dark"] .pb-cta { background: #1F5EFF; }

.pb-page .site-footer { background: var(--pb-bg); }

/* Tablet: pictures move under the headline as a scrolling row */
@media (max-width: 1180px) {
  .pb-hero { min-height: 0; padding-top: 32px; }
  .pb-hero-pics { order: 2; width: 100%; margin-top: 32px; display: flex; gap: 14px; overflow-x: auto; padding: 8px 4px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pb-hero-pics::-webkit-scrollbar { display: none; }
  .pb-float { position: static; flex: 0 0 220px; transform: none !important; scroll-snap-align: start; }
  .pb-float img, .pb-f3 img, .pb-f4 img { height: 130px; }
  .pb-builder { grid-template-columns: 1fr; }
  .pb-left { border-right: 0; border-bottom: 1px solid var(--pb-line); }
  .pb-right { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .pb-pic { grid-row: span 3; }
  .pb-tip { margin: 0; grid-column: 1 / -1; }
  .pb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .pb-diff, .pb-faq-grid, .pb-why, .pb-steps { grid-template-columns: 1fr; }
  .pb-faq-grid { gap: 24px; }
  .pb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-stats > div:nth-child(3) { border-left: 0; }
  .pb-stats > div:nth-child(n+3) { border-top: 1px solid var(--pb-line-2); }
  .pb-cta { flex-direction: column; align-items: flex-start; padding: 40px 28px; }
  .pb-section, .pb-dark { padding: 64px 0; }
}

/* Phone */
@media (max-width: 600px) {
  .pb-hero { padding: 20px 16px 8px; }
  .pb-hero-copy { gap: 16px; }
  .pb-pill { font-size: 11px; letter-spacing: 0.04em; }
  .pb-hero-ctas { width: 100%; flex-direction: column; }
  .pb-hero-ctas .pb-btn { width: 100%; }
  .pb-works-list { font-size: 15px; gap: 4px 14px; }
  .pb-builder-wrap { padding: 8px 0 56px; }
  .pb-builder { border-radius: 22px; }
  .pb-left-head { padding: 18px 16px 4px; }
  .pb-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 16px 0; }
  .pb-mode { height: auto; min-height: 72px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
  .pb-field, .pb-try { padding-left: 16px; padding-right: 16px; }
  .pb-idea { font-size: 18px; }
  .pb-actions { padding: 16px; }
  .pb-actions .pb-btn-accent { width: 100%; }
  .pb-out { margin: 0 10px 10px; }
  .pb-out-head { padding: 12px 14px; }
  .pb-out-btns { width: 100%; }
  .pb-out-btns .pb-btn-sm { flex: 1; justify-content: center; }
  .pb-result { padding: 14px; font-size: 13.5px; }
  .pb-right { display: flex; padding: 16px; }
  .pb-pic img { height: 200px; }
  .pb-stats { margin-bottom: 56px; }
  .pb-stats > div { padding: 22px 8px; }
  .pb-stats span { font-size: 13.5px; }
  .pb-parts > div { grid-template-columns: 1fr; gap: 8px; }
  .pb-diff-in, .pb-diff-out { padding: 22px; }
  .pb-diff-idea { font-size: 22px; }
  .pb-filters { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .pb-filter { flex-shrink: 0; }
  .pb-card-pic img { height: 120px; }
  .pb-card-body { padding: 10px 12px 14px; }
  .pb-card-title { font-size: 15.5px; }
  .pb-card-meta { flex-wrap: wrap; }
  .pb-why > div { padding: 20px; }
  .pb-steps li { padding: 22px; }
  .pb-faq summary { font-size: 16.5px; padding: 12px 16px; }
  .pb-faq p { padding: 0 16px 18px; }
  .pb-cta { margin-block: 56px; }
  .pb-cta .pb-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .pb *, .pb *::before, .pb *::after { transition: none !important; }
}