/* Home page proposal P4, "Ask first" (content/en/home-p4.html). Linked by that page only.
   Builds on site.css and showcase.css. Adds the prompt inside the hero, the stage grid that lights up
   for the products the map drew (pure CSS: :has on the map's links, no script of its own), the map's
   example note, the three "one" facts and the closing split. */

.p4 { --p4-lit-bg: color-mix(in srgb, var(--accent) 7%, var(--paper)); }

/* ---- Hero: the prompt is the first thing on the page --------------------------------------------- */
.p4-hero { border-bottom: var(--rule-w, 1px) solid var(--rule); }
.p4-hero andy-hero-prompt { max-width: 1440px; margin-inline: auto; --hero-h1-scale: .8; }
.p4-hero andy-hero-prompt > h1 { text-wrap: balance; }
/* The builder's one grid track would otherwise grow to the typed line and push the card past a phone's edge. */
.p4-hero andy-hero-prompt::part(builder) { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.p4-hero h1 em { font-style: normal; color: var(--accent-ink); }
.p4-hero andy-hero-prompt > p { max-width: 40ch; }
.p4 .p4-form { margin: 26px 0 0; max-width: 34rem; background: var(--paper); box-shadow: var(--shadow); }
.p4 .p4-form textarea { font-size: 1.05rem; }
.p4 andy-hero-prompt > .p4-privacy { margin: 12px 0 0 4px; max-width: 34rem; font-size: var(--t-1); color: var(--ink-3); line-height: 1.45; }
.p4 andy-hero-prompt > .p4-privacy::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--good, #2f8f4e); vertical-align: 1px; }

/* ---- The stage grid, reactive -------------------------------------------------------------------- */
.p4-stages .p4-head { max-width: 60rem; }
.p4-grid > li { position: relative; display: flex; flex-direction: column; gap: 6px; min-block-size: clamp(240px, 22vw, 320px);
  padding: clamp(28px, 4vw, 64px) clamp(22px, 3.4vw, 52px); transition: background-color .4s ease, box-shadow .4s ease; }
.p4-grid h3 { margin: 4px 0 2px; }
.p4-grid h3 a { color: inherit; text-decoration: none; }
.p4-grid h3 a::after { content: " →"; color: var(--accent-ink); opacity: 0; transition: opacity .25s ease; }
.p4-grid h3 a:is(:hover, :focus-visible)::after { opacity: 1; }
.p4-n { margin: 0; font-size: var(--t-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p4-n span { color: var(--accent-ink); margin-right: 6px; }
.p4-on { position: absolute; top: clamp(14px, 2vw, 24px); right: clamp(14px, 2vw, 24px); margin: 0; padding: 4px 12px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 12px; font-weight: 800; letter-spacing: .02em;
  opacity: 0; transform: translateY(-4px); transition: opacity .35s ease, transform .35s ease; }
.p4-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 14px 0 0; list-style: none; }
.p4-picks > li { display: none; margin: 0; }
.p4-picks a { display: inline-flex; align-items: center; min-block-size: 32px; padding: 4px 12px; border-radius: 999px;
  background: var(--paper); border: var(--rule-w, 1px) solid color-mix(in srgb, var(--accent) 45%, var(--rule));
  color: var(--ink); font-size: var(--t-1); font-weight: 600; text-decoration: none; line-height: 1.25; overflow-wrap: anywhere; }
.p4-picks a:is(:hover, :focus-visible) { border-color: var(--accent); }
.p4-grid-foot a { white-space: nowrap; }
@media (max-width: 640px) {
  .p4-grid { grid-template-columns: minmax(0, 1fr); }
  .p4-grid > li { min-block-size: 0; }
}

/* ---- The map ------------------------------------------------------------------------------------- */
.p4-map .mm-stage { margin-top: 12px; }
.p4-example-note { display: none; margin: 0 auto; max-width: 40rem; text-align: center; color: var(--ink-2); font-size: var(--t-1); }
.p4:has(.mm-stage .p4-example) .p4-example-note { display: block; }
.p4-map .mm-next { margin-top: 36px; }
.p4-map .mm-note:empty { display: none; }

/* ---- Who is asking ------------------------------------------------------------------------------- */
.p4-who andy-audience h3 { margin: 0 0 .4em; font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1.1; }
.p4-who andy-audience p { max-width: 40ch; color: var(--ink-2); }
.p4-who andy-audience .p4-k { margin: 0 0 10px; color: var(--sc-hue); font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---- The job card -------------------------------------------------------------------------------- */
.p4-card .anatomy-stage { background: var(--paper); border-radius: var(--radius-tile, 22px); }

/* ---- One seller ---------------------------------------------------------------------------------- */
.p4-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin: 0; padding: 0; list-style: none; }
.p4-facts > li { min-width: 0; margin: 0; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-tile, 22px); background: var(--paper-2); }
.p4-fact-n { display: block; margin-bottom: 12px; font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--slot-2); }
.p4-facts h3 { margin: 0 0 .4em; font-size: 1.3rem; }
.p4-facts p { margin: 0; color: var(--ink-2); }
.p4-facts a { color: var(--slot-2); }
@media (max-width: 860px) { .p4-facts { grid-template-columns: minmax(0, 1fr); } }

/* ---- Next ---------------------------------------------------------------------------------------- */
.p4-next .split { align-items: start; }
.p4-next .sc-title { font-size: clamp(2.2rem, 4.6vw, 4rem); }
.p4-quote { padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-tile, 22px); background: var(--paper-2); }

/* ---- Lit stages: one pair of rules per product, written from the stage pages ------------------------ */
.p4:has(.mm-stage a[href="/products/product-discovery/"]) .p4-picks [data-p="product-discovery"],
.p4:has(.mm-stage a[href="/products/brand-identity/"]) .p4-picks [data-p="brand-identity"],
.p4:has(.mm-stage a[href="/products/customiser-2d/"]) .p4-picks [data-p="customiser-2d"],
.p4:has(.mm-stage a[href="/products/3d-customiser/"]) .p4-picks [data-p="3d-customiser"],
.p4:has(.mm-stage a[href="/products/augmented-reality/"]) .p4-picks [data-p="augmented-reality"],
.p4:has(.mm-stage a[href="/products/presentation/"]) .p4-picks [data-p="presentation"],
.p4:has(.mm-stage a[href="/products/chatbot/"]) .p4-picks [data-p="chatbot"],
.p4:has(.mm-stage a[href="/products/app/"]) .p4-picks [data-p="app"],
.p4:has(.mm-stage a[href="/products/mobile-app/"]) .p4-picks [data-p="mobile-app"],
.p4:has(.mm-stage a[href="/products/saas/"]) .p4-picks [data-p="saas"],
.p4:has(.mm-stage a[href="/products/website/"]) .p4-picks [data-p="website"],
.p4:has(.mm-stage a[href="/products/landing-page/"]) .p4-picks [data-p="landing-page"],
.p4:has(.mm-stage a[href="/products/online-store/"]) .p4-picks [data-p="online-store"],
.p4:has(.mm-stage a[href="/products/online-payments/"]) .p4-picks [data-p="online-payments"],
.p4:has(.mm-stage a[href="/products/translation/"]) .p4-picks [data-p="translation"],
.p4:has(.mm-stage a[href="/products/analytics/"]) .p4-picks [data-p="analytics"],
.p4:has(.mm-stage a[href="/products/dashboards/"]) .p4-picks [data-p="dashboards"],
.p4:has(.mm-stage a[href="/products/workflow/"]) .p4-picks [data-p="workflow"],
.p4:has(.mm-stage a[href="/products/order-reading/"]) .p4-picks [data-p="order-reading"],
.p4:has(.mm-stage a[href="/products/data-migration/"]) .p4-picks [data-p="data-migration"],
.p4:has(.mm-stage a[href="/products/crm-setup/"]) .p4-picks [data-p="crm-setup"],
.p4:has(.mm-stage a[href="/products/go-to-market/"]) .p4-picks [data-p="go-to-market"],
.p4:has(.mm-stage a[href="/products/business-development/"]) .p4-picks [data-p="business-development"],
.p4:has(.mm-stage a[href="/products/seo/"]) .p4-picks [data-p="seo"],
.p4:has(.mm-stage a[href="/products/social-media/"]) .p4-picks [data-p="social-media"],
.p4:has(.mm-stage a[href="/products/email-marketing/"]) .p4-picks [data-p="email-marketing"],
.p4:has(.mm-stage a[href="/products/mass-marketing/"]) .p4-picks [data-p="mass-marketing"],
.p4:has(.mm-stage a[href="/products/product-placement/"]) .p4-picks [data-p="product-placement"],
.p4:has(.mm-stage a[href="/products/content-writing/"]) .p4-picks [data-p="content-writing"],
.p4:has(.mm-stage a[href="/products/video-editing/"]) .p4-picks [data-p="video-editing"],
.p4:has(.mm-stage a[href="/products/quiz/"]) .p4-picks [data-p="quiz"],
.p4:has(.mm-stage a[href="/products/loyalty-programme/"]) .p4-picks [data-p="loyalty-programme"],
.p4:has(.mm-stage a[href="/products/events/"]) .p4-picks [data-p="events"],
.p4:has(.mm-stage a[href="/products/client-portal/"]) .p4-picks [data-p="client-portal"],
.p4:has(.mm-stage a[href="/products/customer-support/"]) .p4-picks [data-p="customer-support"],
.p4:has(.mm-stage a[href="/products/booking-system/"]) .p4-picks [data-p="booking-system"] { display: list-item; }

.p4:has(.mm-stage a[href="/products/product-discovery/"]) .p4-grid > li:has([data-p="product-discovery"]),
.p4:has(.mm-stage a[href="/products/brand-identity/"]) .p4-grid > li:has([data-p="brand-identity"]),
.p4:has(.mm-stage a[href="/products/customiser-2d/"]) .p4-grid > li:has([data-p="customiser-2d"]),
.p4:has(.mm-stage a[href="/products/3d-customiser/"]) .p4-grid > li:has([data-p="3d-customiser"]),
.p4:has(.mm-stage a[href="/products/augmented-reality/"]) .p4-grid > li:has([data-p="augmented-reality"]),
.p4:has(.mm-stage a[href="/products/presentation/"]) .p4-grid > li:has([data-p="presentation"]),
.p4:has(.mm-stage a[href="/products/chatbot/"]) .p4-grid > li:has([data-p="chatbot"]),
.p4:has(.mm-stage a[href="/products/app/"]) .p4-grid > li:has([data-p="app"]),
.p4:has(.mm-stage a[href="/products/mobile-app/"]) .p4-grid > li:has([data-p="mobile-app"]),
.p4:has(.mm-stage a[href="/products/saas/"]) .p4-grid > li:has([data-p="saas"]),
.p4:has(.mm-stage a[href="/products/website/"]) .p4-grid > li:has([data-p="website"]),
.p4:has(.mm-stage a[href="/products/landing-page/"]) .p4-grid > li:has([data-p="landing-page"]),
.p4:has(.mm-stage a[href="/products/online-store/"]) .p4-grid > li:has([data-p="online-store"]),
.p4:has(.mm-stage a[href="/products/online-payments/"]) .p4-grid > li:has([data-p="online-payments"]),
.p4:has(.mm-stage a[href="/products/translation/"]) .p4-grid > li:has([data-p="translation"]),
.p4:has(.mm-stage a[href="/products/analytics/"]) .p4-grid > li:has([data-p="analytics"]),
.p4:has(.mm-stage a[href="/products/dashboards/"]) .p4-grid > li:has([data-p="dashboards"]),
.p4:has(.mm-stage a[href="/products/workflow/"]) .p4-grid > li:has([data-p="workflow"]),
.p4:has(.mm-stage a[href="/products/order-reading/"]) .p4-grid > li:has([data-p="order-reading"]),
.p4:has(.mm-stage a[href="/products/data-migration/"]) .p4-grid > li:has([data-p="data-migration"]),
.p4:has(.mm-stage a[href="/products/crm-setup/"]) .p4-grid > li:has([data-p="crm-setup"]),
.p4:has(.mm-stage a[href="/products/go-to-market/"]) .p4-grid > li:has([data-p="go-to-market"]),
.p4:has(.mm-stage a[href="/products/business-development/"]) .p4-grid > li:has([data-p="business-development"]),
.p4:has(.mm-stage a[href="/products/seo/"]) .p4-grid > li:has([data-p="seo"]),
.p4:has(.mm-stage a[href="/products/social-media/"]) .p4-grid > li:has([data-p="social-media"]),
.p4:has(.mm-stage a[href="/products/email-marketing/"]) .p4-grid > li:has([data-p="email-marketing"]),
.p4:has(.mm-stage a[href="/products/mass-marketing/"]) .p4-grid > li:has([data-p="mass-marketing"]),
.p4:has(.mm-stage a[href="/products/product-placement/"]) .p4-grid > li:has([data-p="product-placement"]),
.p4:has(.mm-stage a[href="/products/content-writing/"]) .p4-grid > li:has([data-p="content-writing"]),
.p4:has(.mm-stage a[href="/products/video-editing/"]) .p4-grid > li:has([data-p="video-editing"]),
.p4:has(.mm-stage a[href="/products/quiz/"]) .p4-grid > li:has([data-p="quiz"]),
.p4:has(.mm-stage a[href="/products/loyalty-programme/"]) .p4-grid > li:has([data-p="loyalty-programme"]),
.p4:has(.mm-stage a[href="/products/events/"]) .p4-grid > li:has([data-p="events"]),
.p4:has(.mm-stage a[href="/products/client-portal/"]) .p4-grid > li:has([data-p="client-portal"]),
.p4:has(.mm-stage a[href="/products/customer-support/"]) .p4-grid > li:has([data-p="customer-support"]),
.p4:has(.mm-stage a[href="/products/booking-system/"]) .p4-grid > li:has([data-p="booking-system"]) {
  background: var(--p4-lit-bg); box-shadow: inset 0 4px 0 var(--accent);
}

.p4:has(.mm-stage a[href="/products/product-discovery/"]) .p4-grid > li:has([data-p="product-discovery"]) .p4-on,
.p4:has(.mm-stage a[href="/products/brand-identity/"]) .p4-grid > li:has([data-p="brand-identity"]) .p4-on,
.p4:has(.mm-stage a[href="/products/customiser-2d/"]) .p4-grid > li:has([data-p="customiser-2d"]) .p4-on,
.p4:has(.mm-stage a[href="/products/3d-customiser/"]) .p4-grid > li:has([data-p="3d-customiser"]) .p4-on,
.p4:has(.mm-stage a[href="/products/augmented-reality/"]) .p4-grid > li:has([data-p="augmented-reality"]) .p4-on,
.p4:has(.mm-stage a[href="/products/presentation/"]) .p4-grid > li:has([data-p="presentation"]) .p4-on,
.p4:has(.mm-stage a[href="/products/chatbot/"]) .p4-grid > li:has([data-p="chatbot"]) .p4-on,
.p4:has(.mm-stage a[href="/products/app/"]) .p4-grid > li:has([data-p="app"]) .p4-on,
.p4:has(.mm-stage a[href="/products/mobile-app/"]) .p4-grid > li:has([data-p="mobile-app"]) .p4-on,
.p4:has(.mm-stage a[href="/products/saas/"]) .p4-grid > li:has([data-p="saas"]) .p4-on,
.p4:has(.mm-stage a[href="/products/website/"]) .p4-grid > li:has([data-p="website"]) .p4-on,
.p4:has(.mm-stage a[href="/products/landing-page/"]) .p4-grid > li:has([data-p="landing-page"]) .p4-on,
.p4:has(.mm-stage a[href="/products/online-store/"]) .p4-grid > li:has([data-p="online-store"]) .p4-on,
.p4:has(.mm-stage a[href="/products/online-payments/"]) .p4-grid > li:has([data-p="online-payments"]) .p4-on,
.p4:has(.mm-stage a[href="/products/translation/"]) .p4-grid > li:has([data-p="translation"]) .p4-on,
.p4:has(.mm-stage a[href="/products/analytics/"]) .p4-grid > li:has([data-p="analytics"]) .p4-on,
.p4:has(.mm-stage a[href="/products/dashboards/"]) .p4-grid > li:has([data-p="dashboards"]) .p4-on,
.p4:has(.mm-stage a[href="/products/workflow/"]) .p4-grid > li:has([data-p="workflow"]) .p4-on,
.p4:has(.mm-stage a[href="/products/order-reading/"]) .p4-grid > li:has([data-p="order-reading"]) .p4-on,
.p4:has(.mm-stage a[href="/products/data-migration/"]) .p4-grid > li:has([data-p="data-migration"]) .p4-on,
.p4:has(.mm-stage a[href="/products/crm-setup/"]) .p4-grid > li:has([data-p="crm-setup"]) .p4-on,
.p4:has(.mm-stage a[href="/products/go-to-market/"]) .p4-grid > li:has([data-p="go-to-market"]) .p4-on,
.p4:has(.mm-stage a[href="/products/business-development/"]) .p4-grid > li:has([data-p="business-development"]) .p4-on,
.p4:has(.mm-stage a[href="/products/seo/"]) .p4-grid > li:has([data-p="seo"]) .p4-on,
.p4:has(.mm-stage a[href="/products/social-media/"]) .p4-grid > li:has([data-p="social-media"]) .p4-on,
.p4:has(.mm-stage a[href="/products/email-marketing/"]) .p4-grid > li:has([data-p="email-marketing"]) .p4-on,
.p4:has(.mm-stage a[href="/products/mass-marketing/"]) .p4-grid > li:has([data-p="mass-marketing"]) .p4-on,
.p4:has(.mm-stage a[href="/products/product-placement/"]) .p4-grid > li:has([data-p="product-placement"]) .p4-on,
.p4:has(.mm-stage a[href="/products/content-writing/"]) .p4-grid > li:has([data-p="content-writing"]) .p4-on,
.p4:has(.mm-stage a[href="/products/video-editing/"]) .p4-grid > li:has([data-p="video-editing"]) .p4-on,
.p4:has(.mm-stage a[href="/products/quiz/"]) .p4-grid > li:has([data-p="quiz"]) .p4-on,
.p4:has(.mm-stage a[href="/products/loyalty-programme/"]) .p4-grid > li:has([data-p="loyalty-programme"]) .p4-on,
.p4:has(.mm-stage a[href="/products/events/"]) .p4-grid > li:has([data-p="events"]) .p4-on,
.p4:has(.mm-stage a[href="/products/client-portal/"]) .p4-grid > li:has([data-p="client-portal"]) .p4-on,
.p4:has(.mm-stage a[href="/products/customer-support/"]) .p4-grid > li:has([data-p="customer-support"]) .p4-on,
.p4:has(.mm-stage a[href="/products/booking-system/"]) .p4-grid > li:has([data-p="booking-system"]) .p4-on { opacity: 1; transform: none; }