/* ==========================================================================
   Kizen — prompt-first homepage options (home-prompt-a/b/c.html)
   Loads after css/styles.css. Shared: prompt box, example chips, email pop-up, idea cards.
   Per option: .ph-a (light, centered) · .ph-b (dark panel, agent-first) · .ph-c (split + live build plan)
   ========================================================================== */

/* ---------- Prompt box ---------- */
.prompt { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: 22px; box-shadow: 0 1px 2px rgba(11,23,36,.04), 0 24px 60px -28px rgba(12,89,92,.45); text-align: left; transition: border-color .15s, box-shadow .15s; }
.prompt:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(12,89,92,.12), 0 24px 60px -28px rgba(12,89,92,.5); }
.prompt__label { font-size: 14px; font-weight: 500; color: var(--text-3); padding: 2px 6px 0; }
.prompt__input { display: block; width: 100%; min-height: 84px; max-height: 280px; padding: 6px; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 18px; line-height: 1.5; color: var(--ink); }
.prompt__input::placeholder { color: #8A929C; }
.prompt__input:focus-visible { outline: none; }
.prompt__bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prompt__modes { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--gray-50); }
.prompt__mode { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.prompt__mode svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prompt__mode[aria-pressed="true"] { background: #fff; color: var(--teal); box-shadow: 0 1px 3px rgba(11,23,36,.12); }
.prompt__hint { font-size: 13px; color: var(--text-3); margin-left: auto; display: none; }
.prompt__hint kbd { font: inherit; font-size: 12px; padding: 1px 6px; border: 1px solid var(--gray-300); border-radius: 5px; background: #fff; }
.prompt__go { margin-left: auto !important; min-height: 48px !important; padding: 10px 20px 10px 22px !important; border: 0 !important; border-radius: 999px !important; background: var(--coral) !important; color: #fff !important; font: inherit !important; font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: background-color .15s, transform .15s !important; }
.prompt__go:hover { background: var(--coral-hover) !important; }
.prompt__go:active { transform: scale(.98) !important; }
.prompt__go svg { width: 18px !important; height: 18px !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
@media (min-width: 640px) {
  .prompt { padding: 18px 18px 14px; }
  .prompt__input { font-size: 20px; min-height: 96px; }
  .prompt__hint { display: inline; }
  .prompt__hint + .prompt__go { margin-left: 12px; }
}

/* ---------- Example chips ---------- */
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ph-chips__label { width: 100%; font-size: 14px; color: var(--text-3); }
.ph-chip { min-height: 40px; padding: 8px 14px; border: 1px solid var(--gray-200); border-radius: 999px; background: #fff; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s, color .15s, background-color .15s; }
.ph-chip:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-tint); }
.ph-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ph-chips--dark .ph-chips__label { color: rgba(255,255,255,.75); }
.ph-chips--dark .ph-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.ph-chips--dark .ph-chip:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.6); color: #fff; }

.ph-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 14px; color: var(--text-3); }
.ph-trust li { display: flex; align-items: center; gap: 6px; }
.ph-trust li::before { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C595C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.ph-trust--dark { color: rgba(255,255,255,.85); }
.ph-trust--dark li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FD3D5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }

/* ---------- Idea cards (click → fills the hero prompt) ---------- */
.ph-ideas { display: grid; gap: 14px; }
@media (min-width: 640px) { .ph-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .ph-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ph-idea { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--gray-200); border-radius: 18px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ph-idea:hover { border-color: var(--teal); box-shadow: 0 18px 40px -26px rgba(12,89,92,.55); transform: translateY(-2px); }
.ph-idea__tag { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); background: var(--teal-tint); padding: 4px 10px; border-radius: 999px; }
.ph-idea__tag--agent { color: var(--blue); background: var(--blue-tint); }
.ph-idea h3 { font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ph-idea p { color: var(--text-2); font-size: 15px; }
.ph-idea__go { margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 600; color: var(--teal); }

/* ---------- Steps ---------- */
.ph-steps { display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 960px) { .ph-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.ph-step { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 18px; background: var(--gray-50); }
.ph-step__num { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--teal); color: #fff; font-weight: 600; }
.ph-step h3 { font-size: 20px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ph-step p { color: var(--text-2); }

/* ---------- Email pop-up ---------- */
html.ps-locked { overflow: hidden; }
.ps-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--text); box-shadow: 0 40px 100px -30px rgba(11,23,36,.6); overflow: auto; }
.ps-dialog::backdrop { background: rgba(11,23,36,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ps-dialog[open] { animation: ps-in .22s ease-out; }
@keyframes ps-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.ps-dialog__inner { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px 22px 24px; }
@media (min-width: 640px) { .ps-dialog__inner { padding: 36px 36px 30px; } }
.ps-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ps-close:hover { background: var(--gray-50); color: var(--ink); }
.ps-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ps-dialog__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); }
.ps-dialog__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2BB673; box-shadow: 0 0 0 4px rgba(43,182,115,.18); }
.ps-dialog__title { font-size: clamp(28px, 5vw, 36px); line-height: 1.12; color: var(--ink); padding-right: 32px; }
.ps-dialog__sub { color: var(--text-2); font-size: 16px; margin-top: -8px; }
.ps-idea { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--teal-tint); }
.ps-idea label { font-size: 13px; font-weight: 600; color: var(--teal-dark); }
.ps-idea textarea { width: 100%; min-height: 56px; max-height: 200px; padding: 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink); }
.ps-idea textarea::placeholder { color: #5E7F80; }
.ps-optional { font-weight: 400; color: var(--text-3); }
.ps-dialog .field select { font-size: 16px; }
.ps-perks { display: grid; gap: 8px; font-size: 14px; color: var(--text-2); }
@media (min-width: 480px) { .ps-perks { grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 18px; } }
.ps-perks li { display: flex; align-items: center; gap: 6px; }
.ps-perks li::before { content: ""; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C595C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.ps-legal { font-size: 13px; color: var(--text-3); text-align: center; }
.ps-legal a { text-decoration: underline; text-underline-offset: 2px; }
.ps-error { font-size: 14px; color: #B42318; }
.ps-done { align-items: flex-start; }
.ps-done:focus { outline: none; }
.ps-done q { display: block; padding: 12px 14px; border-left: 3px solid var(--teal); background: var(--gray-50); border-radius: 0 12px 12px 0; color: var(--ink); quotes: "\201C" "\201D"; }
.ps-done__next { width: 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--gray-200); }

/* ==========================================================================
   Option A — light, centered (closest to Replit)
   ========================================================================== */
.ph-a .ph-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 0 40px; text-align: center; }
.ph-a .ph-hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 760px; z-index: -1; background:
  radial-gradient(40% 50% at 30% 35%, rgba(12,89,92,.16), transparent 70%),
  radial-gradient(35% 45% at 72% 30%, rgba(36,92,135,.14), transparent 70%),
  radial-gradient(30% 40% at 50% 70%, rgba(242,108,86,.10), transparent 70%); }
.ph-a .ph-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 880px; }
.ph-a .ph-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--gray-200); border-radius: 999px; background: rgba(255,255,255,.8); font-size: 14px; color: var(--text-2); }
.ph-a .ph-pill b { padding: 3px 10px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.ph-a .ph-title { font-size: clamp(40px, 8vw, 80px); line-height: 1.04; color: var(--ink); }
.ph-a .ph-title em { font-style: normal; color: var(--teal); }
.ph-a .ph-lede { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: var(--text-2); max-width: 680px; }
.ph-a .prompt { max-width: 780px; margin-top: 6px; }
@media (min-width: 960px) { .ph-a .ph-hero { padding: 88px 0 56px; } }

/* Before / after band */
.ph-vs { display: grid; gap: 16px; }
@media (min-width: 960px) { .ph-vs { grid-template-columns: 1fr 1fr; gap: 24px; } }
.ph-vs__col { padding: 28px; border-radius: 20px; border: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 14px; }
.ph-vs__col h3 { font-size: 20px; font-weight: 600; color: var(--ink); }
.ph-vs__col--them { background: #FAFAFB; }
.ph-vs__col--them li { color: var(--text-3); }
.ph-vs__col--them .checklist li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3AE' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ph-vs__col--us { background: var(--teal-tint); border-color: rgba(12,89,92,.25); }

/* ==========================================================================
   Option B — dark panel, agent-first
   ========================================================================== */
.ph-b .ph-hero { text-align: center; padding: 56px 18px 48px; display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; overflow: hidden; }
.ph-b .ph-hero::after { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 70%; background: radial-gradient(50% 60% at 50% 100%, rgba(143,211,213,.28), transparent 70%); pointer-events: none; }
.ph-b .ph-hero > * { position: relative; z-index: 1; }
.ph-b .ph-title { font-size: clamp(40px, 8vw, 78px); line-height: 1.04; color: #fff; max-width: 980px; }
.ph-b .ph-title span { color: #8FD3D5; }
.ph-b .ph-lede { font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5; color: rgba(255,255,255,.88); max-width: 700px; }
.ph-b .prompt { max-width: 800px; border-color: transparent; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.ph-b .ph-live { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font-size: 14px; color: rgba(255,255,255,.9); }
.ph-b .ph-live i { width: 8px; height: 8px; border-radius: 50%; background: #5EE0A0; box-shadow: 0 0 0 4px rgba(94,224,160,.2); }
@media (min-width: 960px) { .ph-b .ph-hero { padding: 96px 48px 80px; gap: 26px; } }

.ph-outcomes { display: grid; gap: 16px; }
@media (min-width: 960px) { .ph-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.ph-outcome { padding: 28px; border-radius: 20px; background: var(--gray-50); display: flex; flex-direction: column; gap: 8px; }
.ph-outcome b { font-family: var(--font-display); font-weight: 300; font-size: clamp(48px, 6vw, 64px); line-height: 1; color: var(--teal); }
.ph-outcome span { font-size: 17px; color: var(--ink); font-weight: 500; }
.ph-outcome small { font-size: 15px; color: var(--text-3); }

.ph-loop { display: grid; gap: 28px; padding: 40px 22px; }
@media (min-width: 960px) { .ph-loop { grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; padding: 80px 64px; } }
.ph-loop .h2 { color: #fff; }
.ph-loop .lede { color: rgba(255,255,255,.85); }
.ph-trace { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font-size: 15px; }
.ph-trace__row { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; }
.ph-trace__row svg { width: 20px; height: 20px; fill: none; stroke: #8FD3D5; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ph-trace__row small { display: block; color: rgba(255,255,255,.65); font-size: 13px; }
.ph-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(94,224,160,.16); color: #9FF0C6; white-space: nowrap; }
.ph-badge--review { background: rgba(242,190,86,.18); color: #F7D58C; }

/* ==========================================================================
   Option C — split hero + live build plan
   ========================================================================== */
.ph-c .ph-hero { display: grid; gap: 36px; padding: 40px 0 32px; }
@media (min-width: 1100px) { .ph-c .ph-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; padding: 72px 0 56px; } }
.ph-c .ph-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.ph-c .ph-title { font-size: clamp(40px, 7.4vw, 72px); line-height: 1.04; color: var(--ink); }
.ph-c .ph-title u { text-decoration: none; background: linear-gradient(transparent 62%, rgba(242,108,86,.28) 62%); }
.ph-c .ph-lede { font-size: clamp(17px, 2.1vw, 20px); color: var(--text-2); max-width: 600px; }
.ph-c .ph-chips { justify-content: flex-start; }
.ph-c .ph-trust { justify-content: flex-start; }

.ph-plan { border-radius: 22px; background: var(--gradient); color: #fff; padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 40px 80px -40px rgba(12,89,92,.8); }
@media (min-width: 640px) { .ph-plan { padding: 28px; } }
.ph-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ph-plan__title { font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.ph-plan__status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); }
.ph-plan__status i { width: 8px; height: 8px; border-radius: 50%; background: #F7D58C; }
.ph-plan.is-live .ph-plan__status i { background: #5EE0A0; box-shadow: 0 0 0 4px rgba(94,224,160,.2); }
.ph-plan__name { font-family: var(--font-display); font-weight: 300; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; min-height: 2.3em; }
.ph-plan__list { display: grid; gap: 8px; }
.ph-plan__item { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); transition: background-color .25s, border-color .25s, opacity .25s; }
.ph-plan__item svg { width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: #8FD3D5; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ph-plan__item strong { display: block; font-size: 15px; font-weight: 600; }
.ph-plan__item span { display: block; font-size: 14px; color: rgba(255,255,255,.75); }
.ph-plan__item { opacity: .55; }
.ph-plan__item.is-on { opacity: 1; background: rgba(143,211,213,.16); border-color: rgba(143,211,213,.5); }
.ph-plan__item.is-on strong::after { content: " ✓"; color: #9FF0C6; }
.ph-plan__foot { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.75); }

.ph-promise { display: grid; gap: 16px; }
@media (min-width: 960px) { .ph-promise { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.ph-promise li { padding: 24px; border-radius: 18px; border: 1px solid var(--gray-200); display: flex; flex-direction: column; gap: 8px; }
.ph-promise b { font-family: var(--font-display); font-weight: 300; font-size: 40px; line-height: 1; color: var(--teal); }
.ph-promise strong { font-size: 17px; color: var(--ink); }
.ph-promise span { color: var(--text-2); font-size: 15px; }

/* Final prompt (all options) */
.ph-final { padding-block: var(--section-y); display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.ph-final .prompt { max-width: 760px; }
.ph-final__title { font-size: clamp(36px, 6.5vw, 64px); line-height: 1.08; color: var(--ink); max-width: 960px; }

/* ---------- Pillars (option A "Meet Kizen") ---------- */
.ph-pillars { display: grid; gap: 32px; }
@media (min-width: 960px) { .ph-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.ph-pillar { display: flex; flex-direction: column; gap: 14px; }
.ph-pillar__art { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; border-radius: 22px; background: var(--gray-50); margin-bottom: 10px; }
.ph-pillar__icon { width: 36%; max-width: 116px; aspect-ratio: 1; border-radius: 26%; background: #fff; display: flex; align-items: center; justify-content: center; }
.ph-pillar__icon svg { width: 58%; height: auto; fill: none; stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ph-pillar h3 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 500; line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }
.ph-pillar p { font-size: 17px; line-height: 1.6; color: var(--text-3); }
#meet .section-head h2 { max-width: 1000px; }

/* ==========================================================================
   Option A2 — positioning + tabbed prompt in one hero
   ========================================================================== */
.prompt__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: -2px -2px 4px; border-radius: 16px; background: var(--gray-50); }
.prompt__tab { min-height: 48px; padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.25; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; transition: background-color .15s, color .15s, box-shadow .15s; }
.prompt__tab svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.prompt__tab small { display: none; font-size: 12px; font-weight: 400; color: var(--text-3); }
.prompt__tab:hover { color: var(--teal); }
.prompt__tab[aria-pressed="true"] { background: #fff; color: var(--teal); box-shadow: 0 1px 3px rgba(11,23,36,.12); }
@media (min-width: 640px) {
  .prompt__tab { min-height: 58px; flex-direction: column; gap: 2px; font-size: 16px; }
  .prompt__tab span { display: inline-flex; align-items: center; gap: 8px; }
  .prompt__tab small { display: block; }
}

.ph-a2 .ph-title { font-size: clamp(38px, 6.6vw, 70px); }
.ph-a2 .ph-lede strong { color: var(--ink); font-weight: 600; }
.ph-pillrow { display: grid; gap: 10px; width: 100%; max-width: 780px; }
@media (min-width: 720px) { .ph-pillrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.ph-pillrow a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.75); border: 1px solid var(--gray-200); color: var(--ink); text-align: left; font-size: 15px; font-weight: 500; line-height: 1.3; transition: border-color .15s; }
.ph-pillrow a:hover { border-color: var(--teal); color: var(--ink); }
.ph-pillrow span.ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--gray-50); display: inline-flex; align-items: center; justify-content: center; }
.ph-pillrow svg { width: 24px; height: 24px; fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ph-pillrow small { display: block; font-size: 13px; font-weight: 400; color: var(--text-3); }
.prompt__tab span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 719px) {
  .ph-pillrow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ph-pillrow a { flex-direction: column; text-align: center; gap: 6px; padding: 10px 6px; font-size: 13px; }
  .ph-pillrow small { display: none; }
}

/* A2 hero: headline + kicker line, and the "Start building free" label above the prompt */
.ph-a2 .ph-title { font-size: clamp(36px, 6vw, 64px); max-width: 960px; }
.ph-a2 .ph-title__kicker { display: block; margin-top: .18em; font-style: normal; color: var(--teal); }
.ph-start { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; margin: 10px 0 -8px; font-size: clamp(20px, 2.4vw, 24px); font-weight: 600; color: var(--ink); }
.ph-start span { font-size: 14px; font-weight: 500; color: var(--text-3); }
.ph-a2 .ph-title { font-size: clamp(34px, 5vw, 58px); max-width: 1080px; }
.ph-a2 .ph-title__kicker { font-size: .86em; }
.ph-a2 .ph-hero__inner { gap: 18px; }
@media (min-width: 960px) { .ph-a2 .ph-hero { padding-top: 56px; } }
@media (max-width: 479px) { .ph-pill__more { display: none; } }
.ph-a2 .ph-lede { max-width: 780px; text-wrap: balance; }
/* A2 shows 6 customer logos (no Gordon Marketing): even rows on tablet and desktop */
@media (min-width: 640px) { .ph-a2 .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ph-a2 .logos__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* A2 headline: two lines on laptop + desktop (checked 1024–1920px with Newsreader) */
.ph-a2 .ph-title { font-size: clamp(32px, 4vw, 50px); max-width: 1200px; }
/* A2 headline is now just "Business loved. IT approved." — larger, one line on desktop */
.ph-a2 .ph-title.ph-title--short { font-size: clamp(40px, 6.4vw, 76px); }
/* A2 headline "Business loved. IT approved." on one line at every screen width */
.ph-a2 .ph-title.ph-title--short { white-space: nowrap; font-size: clamp(28px, 7.4vw, 70px); max-width: none; }