/* Platform pages (/platforms and /platforms/*). Each platform keeps its own colour inside the
   Webgentic system (design-and-build.md section 2). The accent --pf goes on renders, the hero wash and
   step dots ONLY. Never on text, links, buttons or focus rings, and never as a decorative rule or card
   top: George marked those as AI tells on 30 Oct (accent bar above headings, coloured line down the left
   of a block, coloured top border on rounded cards). */

.pg-platforms{--pf:#111214;--pf-wash:#EEF3F8}
.pg-platforms-wordpress,.pf-c-wordpress{--pf:#21759B;--pf-wash:#E6F1F6}
.pg-platforms-woocommerce,.pf-c-woocommerce{--pf:#7F54B3;--pf-wash:#F0EAF7}
.pg-platforms-magento,.pf-c-magento{--pf:#EC6E29;--pf-wash:#FDEEE6}
.pg-platforms-drupal,.pf-c-drupal{--pf:#0678BE;--pf-wash:#E5F1F9}
.pg-platforms-custom-php,.pf-c-custom-php{--pf:#777BB3;--pf-wash:#EEEEF6}
.pg-platforms-servers,.pf-c-servers{--pf:#111214;--pf-wash:#E8F6FB}
.pg-platforms-shopify,.pf-c-shopify{--pf:#5E8E3E;--pf-wash:#EEF5E8}
.pf-c-soon{--pf:rgba(17,18,20,.28);--pf-wash:#F1F1EF}

/* Hero (field variant): the platform wash under the same grainy blobs, the first blob tinted with the
   accent. Platform pages now open on the dark variant with the platform's own art from the old site. */
.pg-platforms .phero-field,[class*="pg-platforms-"] .phero-field{background:linear-gradient(135deg,var(--pf-wash) 0%,#F5F6F8 100%)}
[class*="pg-platforms-"] .phero-field .hb1{background:radial-gradient(circle,color-mix(in srgb,var(--pf) 38%,transparent) 0%,transparent 68%);opacity:.7}
.pf-render{display:block;width:100%;max-width:540px;height:auto;aspect-ratio:1;margin-inline:auto}

/* Honest depth: two cards, what it can change today and what is not built. */
.pf-can{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pf-can > div{padding:clamp(22px,2.4vw,30px);background:#fff;border:1px solid var(--line);border-radius:18px;min-width:0}
.pf-can > .pf-not{border-style:dashed;background:transparent}
.pf-can h3{font-size:1.15rem;margin-bottom:14px}
.pf-can .ticks .ic{color:#0E7C66}
.pf-can .pf-not .ticks .ic{color:var(--muted)}

/* One job, start to finish: steps with the accent on the dots. */
.pf-job .steps li::before{background:var(--pf)}
.pf-job .steps li{border-top-color:color-mix(in srgb,var(--pf) 45%,var(--line-2))}
.pf-job-meta{margin-top:28px;max-width:62ch;font-size:.93rem;line-height:1.5;color:var(--muted)}

/* Playbook topics: a plain list in columns. */
.pf-topics{columns:3 240px;column-gap:40px}
.pf-topics li{break-inside:avoid;display:flex;gap:12px;align-items:flex-start;line-height:1.45;padding:10px 0;border-top:1px solid var(--line)}
.pf-topics .ic{width:20px;height:20px;flex:none;margin-top:1px;color:#0E7C66;stroke-width:2.2}

/* Demo sites for this platform. */
.pf-demos{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pf-demo{display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;min-width:0}
.pf-demo h3{font-size:1.1rem}
.pf-demo p{color:var(--muted);font-size:.93rem;line-height:1.5}
.pf-demo a{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--blue-ink)}

/* /platforms index: one card per platform, render thumbnail, depth lines. */
.pf-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pf-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:18px;min-width:0}
.pf-card img{width:96px;height:96px;margin:-8px 0 2px -6px}
.pf-card h3{font-size:1.25rem}
.pf-card dl{display:grid;gap:8px;font-size:.93rem;line-height:1.45}
.pf-card dt{font-weight:600;color:var(--ink)}
.pf-card dd{color:var(--muted)}
.pf-card .box-link{margin-top:auto;padding-top:8px;min-height:44px}
.pf-card.pf-c-soon{background:transparent;border-style:dashed}

@media (max-width:980px){
  /* The hero stacks here: trim the empty studio space above and below the glass shape. */
  .pf-render{max-width:440px;aspect-ratio:16/11;object-fit:cover}
}
@media (max-width:960px){
  .pf-index{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .pf-can,.pf-index{grid-template-columns:minmax(0,1fr)}
  .pf-render{max-width:340px}
}