/* Platform pages on v3's stylesheet (2026-09-24): the only v2 pieces they keep are the
   'rest of the platform' clip cards and the sage/rose hero tints. Lifted verbatim from brand-v2.css. */
.sc5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; margin-top: 44px; }
.sc5 .cs { flex: none; aspect-ratio: 3/4.2; }
.sc5 .cs .in { padding: 22px 20px; }
.sc-k { font-family: var(--f-m); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.86);
  text-shadow: 0 1px 2px rgba(8,10,14,.6); max-width: 70%; }
.sc5 .cs .ttl { font-size: clamp(22px, 1.8vw, 27px); max-width: 12ch; }
.sc-p { margin-top: 10px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.80); }
.sc5 .cs .arw { top: 18px; right: 20px; }
.sc5 .cs .shade { background: linear-gradient(180deg, rgba(8,10,14,.34) 0%, rgba(8,10,14,.02) 30%, rgba(8,10,14,.10) 50%, rgba(8,10,14,.72) 100%); }
.sc5 .cs:hover .arw { transform: translate(3px,-3px); }
@media (max-width: 1100px) {
  .sc5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-right: calc(-1 * var(--gut, 20px)); }
  .sc5::-webkit-scrollbar { display: none; }
  .sc5 .cs { flex: 0 0 clamp(230px, 34vw, 300px); scroll-snap-align: start; }
}
@media (max-width: 620px) { .sc5 .cs { flex-basis: 72vw; } }
.sc5 .cs .arw { top: 19px; font-size: 16px; }
.sc5 .cs .arw { top: 21px; line-height: 1; padding: 0; height: auto; width: auto; display: block; }
/* the dark card ground showed as a hairline round the graded still: over-scan slightly, like the rail cards */
.sc5 .cs { --zoom: 1.03; }

/* ── platform pages: "The rest of the platform" as cards on the wavy plate ── */
.sc5.sc4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.pcard { --tintop: 0; background: #2A2320; }
.pcard video, .pcard .still { object-position: var(--pos, 50% 50%); }
.pcard.pc-warm video, .pcard.pc-warm .still { filter: saturate(1.05) brightness(.92); }
.pcard.pc-sage video, .pcard.pc-sage .still { filter: hue-rotate(58deg) saturate(.75) brightness(.86); }
.pcard.pc-rust video, .pcard.pc-rust .still { filter: hue-rotate(-14deg) saturate(1.7) brightness(.74); }
.pcard .shade { background: linear-gradient(180deg, rgba(8,10,14,.22) 0%, rgba(8,10,14,0) 30%, rgba(8,10,14,.06) 55%, rgba(8,10,14,.55) 100%); }
@media (max-width: 1100px) { .sc5.sc4 { display: flex; } }

/* platform cards = the SAME plate treatment as the platform heroes: pale, ink type */
.pcard { background: #F1F0EC; }
.pcard video, .pcard .still { filter: saturate(.24) brightness(1.34) contrast(.74) !important; }
.pcard.pc-cool video, .pcard.pc-cool .still { filter: saturate(.24) brightness(1.32) contrast(.74) sepia(.26) hue-rotate(176deg) !important; }
.pcard.pc-warm video, .pcard.pc-warm .still { filter: saturate(.34) brightness(1.32) contrast(.72) sepia(.42) hue-rotate(-14deg) !important; }
.pcard.pc-sage video, .pcard.pc-sage .still { filter: saturate(.30) brightness(1.30) contrast(.74) sepia(.40) hue-rotate(38deg) !important; }
.pcard.pc-rose video, .pcard.pc-rose .still { filter: saturate(.36) brightness(1.30) contrast(.72) sepia(.40) hue-rotate(-38deg) !important; }
.pcard .shade { background: radial-gradient(90% 70% at 50% 45%, rgba(250,250,249,.40) 0%, rgba(250,250,249,.18) 62%, rgba(250,250,249,.30) 100%); }
.pcard .sc-k { color: var(--muted-2); text-shadow: none; }
.pcard .ttl { color: var(--ink); }
.pcard .sc-p { color: var(--muted); }
.pcard .arw { color: var(--ink); opacity: .7; }
.sc5 .pcard .shade { background: radial-gradient(80% 62% at 50% 50%, rgba(250,250,249,.56) 0%, rgba(250,250,249,.30) 62%, rgba(250,250,249,.44) 100%); }
.sc5 .pcard .tint { display: none; }
.sc5 .pcard .sc-k { color: rgba(20,24,32,.55); }
/* shorter cards (his ask): 3:4.2 -> 4:5 */
.sc5 .cs { aspect-ratio: 4/5; }
.sc5.sc4 .cs { aspect-ratio: 1 / 1; }
/* Control and Integrations heroes: the same plate, tinted to their own cards'
   colours (pc-sage / pc-rose, same filter values as the cards) (2026-09-24). */
.phero.tint-sage .phero-media video, .phero.tint-sage .phero-media img {
  filter: saturate(.30) brightness(1.30) contrast(.74) sepia(.40) hue-rotate(38deg); }
.phero.tint-rose .phero-media video, .phero.tint-rose .phero-media img {
  filter: saturate(.36) brightness(1.30) contrast(.72) sepia(.40) hue-rotate(-38deg); }

/* platform hero title at v2's size: v3's brand.css forces every h1 to 48-90px !important */
.phero h1.d1{font-size:clamp(40px,4.6vw,66px)!important;line-height:1.04!important;letter-spacing:-.038em!important;max-width:17ch;margin:0 auto;text-align:center}

/* Agents page visuals, squared and quieter (Matteo 2026-09-24: "more premium like
   the other ones, squared blocks not cornered"). Corners are rx="0" in the markup;
   this sets the hairlines, tags and lift to the grammar of the Control visuals. */
body.pg-agents #what .v3a-svg{filter:drop-shadow(0 22px 44px rgba(8,10,14,.16)) drop-shadow(0 2px 4px rgba(8,10,14,.06))}
body.pg-agents #what .v3a-card{stroke:rgba(20,30,40,.12)}
body.pg-agents #what .v3a-bub-h{fill:#F5F5F1;stroke:rgba(20,30,40,.08)}
body.pg-agents #what .v3a-bub-a{stroke:rgba(20,30,40,.14)}
body.pg-agents #what .v3a-chip,body.pg-agents #what .v3a-pill{fill:#F7F7F3;stroke:rgba(20,30,40,.12);stroke-width:1}
body.pg-agents #what .v3a-chip-acc{fill:#FDF3EA;stroke:rgba(236,117,35,.35)}
body.pg-agents #what .v3a-tile rect{stroke:rgba(20,30,40,.12)}

/* Agents "Already connected to your systems": the systems as a 3 x 3 grid of dark
   framed tiles with + register marks, on the panel's own photo ground (2026-09-24) */
body.pg-agents .v3a-panel-sys{display:flex;align-items:center;justify-content:center}
body.pg-agents .v3a-sysgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:min(84%,540px);margin:auto}
body.pg-agents .v3a-sys{position:relative;height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#FFFFFF;border:1px solid rgba(20,30,40,.12);
  box-shadow:0 18px 40px rgba(8,10,14,.14);opacity:0;transform:translateY(8px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--d,0s)}
body.pg-agents .v3a-in .v3a-sys{opacity:1;transform:none}
body.pg-agents .v3a-sys .m{height:44px;display:flex;align-items:center;justify-content:center}
body.pg-agents .v3a-sys img{height:calc(var(--mh,34px) * .72);width:auto;max-width:80%;object-fit:contain;display:block}
body.pg-agents .v3a-sys b{font-size:12px;font-weight:500;color:var(--ink);letter-spacing:-.005em;text-align:center}
body.pg-agents .v3a-sys .bpc{color:rgba(20,30,40,.34)}
@media (max-width:760px){body.pg-agents .v3a-sysgrid{gap:10px;width:92%}body.pg-agents .v3a-sys{height:88px}}
@media (prefers-reduced-motion:reduce){body.pg-agents .v3a-sys{opacity:1;transform:none;transition:none}}

/* Control "It can only reach what you connected": the table sits inset on its
   photo ground with real inner padding, like the other white cards (2026-09-24) */
.pg-control .control-permissions{display:flex;align-items:center;justify-content:center;padding:48px 52px}
.pg-control .control-permissions .pt-table{width:100%;max-width:560px;margin:0;padding:6px 30px 2px;background:#FFFFFF;
  border:1px solid rgba(20,30,40,.12);box-shadow:0 22px 44px rgba(8,10,14,.16),0 2px 4px rgba(8,10,14,.06)}
.pg-control .control-permissions .pt-row{padding:18px 0 19px}
.pg-control .control-permissions .pt-row.pt-head{padding:14px 0 12px}
.pg-control .control-permissions .pt-row:last-child{border-bottom:0}
@media (max-width:760px){.pg-control .control-permissions{padding:24px 18px}.pg-control .control-permissions .pt-table{padding:4px 18px 0}}
/* Integrations: the logo wall sits centred in its panel */
.syswall-erp{align-self:center;margin:auto 0}
.cap-frame.flat:has(> .syswall-erp){display:flex;align-items:center;justify-content:center}
/* Automation pipeline: nodes placed in % of the 646px drawing, so a narrower panel
   scales it instead of pushing the third card past the edge (keeps it centred) */
.wfx .wfx-n{width:28.173%}
.cap-frame.flat:has(> .wfx){display:flex;align-items:center;justify-content:center}