/* ==========================================================
   /platform/agents · 22 September 2026
   Scoped styles for the 4 capability visuals and the 4 hub cards.
   One visual language: sage panel, white line-art cards, hairline
   strokes, the homepage brain's muted point palette, orange once.
   ========================================================== */

.v3a-panel { position: relative; background: #EDEDE5; border: 1px solid var(--line);
  aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center;
  padding: 28px; overflow: hidden; }
.v3a-svg { display: block; width: 100%; height: 100%; }

/* type inside the drawings: the page fonts, not SVG defaults */
.v3a-svg text { font-family: var(--f-b); fill: var(--ink); }
.v3a-t { font-size: 14px; }
.v3a-t-m { font-size: 11.5px; fill: var(--muted); }
.v3a-w5 { font-weight: 500; }
.v3a-mono { font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; fill: #8A8B84; }
.v3a-mono-ink { fill: var(--ink); }
.v3a-mono-acc { fill: var(--orange); }
.v3a-strike { text-decoration: line-through; fill: var(--muted); }

/* shared line-art parts */
.v3a-card { fill: #FFFFFF; stroke: #DCDCD4; stroke-width: 1; }
.v3a-ln { stroke: #DCDCD4; fill: none; stroke-width: 1; }
.v3a-p1 { fill: #98AB86; } .v3a-p2 { fill: #78A499; } .v3a-p3 { fill: #A895B7; } .v3a-p4 { fill: #BD99AA; }
.v3a-acc { fill: var(--orange); }

/* ── 1 · chat ── */
.v3a-panel-chat .v3a-svg { max-width: 540px; }
.v3a-av-bot { fill: #FFFFFF; stroke: #DCDCD4; }
.v3a-av-h { fill: #DCDCCC; }
.v3a-av-i { font-size: 11px; font-weight: 500; fill: #4F4F4C; }
.v3a-bub-h { fill: #F1F1EA; stroke: #E4E4DC; }
.v3a-bub-a { fill: #FFFFFF; stroke: #DCDCD4; }
.v3a-chip { fill: #F1F1EA; }
.v3a-chip-acc { fill: #FBEEE3; }
.v3a-bb { opacity: 0; transform: translateY(8px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.v3a-in .v3a-bb { opacity: 1; transform: none; }

/* ── 2 · company brain: 3 isometric planes, the homepage geometry on a light ground ── */
.v3a-plane { opacity: 0; transform: translateY(10px);
  transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.v3a-in .v3a-plane { opacity: 1; transform: none; }
.v3a-plane path { stroke-width: 1; stroke-dasharray: 4 6; stroke-linejoin: round; }
.v3a-plane-obs path { fill: #F4F4EF; fill-opacity: .9; stroke: #B6C2C7; }
.v3a-plane-mem path { fill: #F8F8F4; fill-opacity: .9; stroke: #A8BBC4; }
.v3a-plane-kn  path { fill: #FFFFFF; fill-opacity: .94; stroke: #D7A675; }
.v3a-guide { stroke: #BFC0B7; stroke-dasharray: 2 5; fill: none; }
.v3a-pts circle { animation: v3a-breathe 6s var(--d, 0s) ease-in-out infinite; animation-play-state: paused; }
.v3a-play .v3a-pts circle { animation-play-state: running; }
@keyframes v3a-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; transform: translateY(-2px); } }
.v3a-packet { fill: var(--orange); opacity: 0; transform: translateY(372px);
  animation: v3a-rise 5.5s ease-in-out infinite; animation-play-state: paused; }
.v3a-play .v3a-packet { animation-play-state: running; }
@keyframes v3a-rise {
  0%   { transform: translateY(372px); opacity: 0; }
  8%   { opacity: 1; }
  78%  { opacity: 1; }
  88%  { transform: translateY(130px); opacity: 0; }
  100% { transform: translateY(130px); opacity: 0; } }
.v3a-ring { fill: none; stroke: var(--orange); stroke-width: 1; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: v3a-ring 5.5s ease-out infinite; animation-play-state: paused; }
.v3a-play .v3a-ring { animation-play-state: running; }
@keyframes v3a-ring { 0%, 82% { transform: scale(.4); opacity: 0; } 86% { opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }

/* ── 3 · connected systems: the agent as a node ── */
.v3a-orbit { fill: none; stroke: #C8C9C0; stroke-dasharray: 2 7; }
.v3a-wires line { stroke: #CFD0C8; stroke-width: 1; }
.v3a-pk line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 4 96;
  stroke-dashoffset: 100; animation: v3a-dash 4.2s linear infinite; animation-delay: var(--d, 0s);
  animation-play-state: paused; }
.v3a-pk-in  { stroke: #78A499; }
.v3a-pk-out { stroke: var(--orange); }
.v3a-play .v3a-pk line { animation-play-state: running; }
@keyframes v3a-dash { to { stroke-dashoffset: 0; } }
.v3a-tile rect { fill: #FFFFFF; stroke: #DCDCD4; }
.v3a-tile { opacity: 0; transition: opacity .7s var(--ease); transition-delay: var(--d, 0s); }
.v3a-in .v3a-tile { opacity: 1; }
.v3a-hub-node circle { fill: #FFFFFF; stroke: #B9B9A9; stroke-width: 1.25; }

/* ── 4 · autonomy control ── */
.v3a-track { stroke: #DCDCD4; stroke-width: 3; stroke-linecap: round; }
.v3a-track-on { stroke: #4F4F4C; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s var(--ease) .35s; }
.v3a-in .v3a-track-on { stroke-dashoffset: 0; }
.v3a-stop { fill: #FFFFFF; stroke: #C8C9C0; stroke-width: 1.25; }
.v3a-stop-on { fill: #4F4F4C; stroke: #4F4F4C; }
.v3a-knob circle { fill: var(--orange); stroke: #FFFFFF; stroke-width: 3; }
.v3a-knob { transform: translateX(-170px); transition: transform 1.1s var(--ease) .35s; }
.v3a-in .v3a-knob { transform: none; }
.v3a-tag { opacity: 0; transition: opacity .6s var(--ease) 1.4s; }
.v3a-tag line { stroke: var(--orange); stroke-width: 1; }
.v3a-in .v3a-tag { opacity: 1; }
.v3a-pill { fill: #F1F1EA; }
.v3a-person { fill: none; stroke: var(--orange); stroke-width: 1.25; stroke-linecap: round; }

/* ── what you get: 3 benefits under the hero ── */
.pg-platform #benefits { padding: 88px 0 36px; }
.v3a-rule { border-top: 1px solid var(--line); padding-top: 16px; display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--f-m); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.v3a-gains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; margin-top: 64px; }
.v3a-gain-c h3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(28px, 2.5vw, 36px); line-height: 1.08;
  letter-spacing: -.03em; color: var(--ink); max-width: 12ch; }
.v3a-gain-c p { margin-top: 16px; font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 34ch; }
.pg-platform #benefits + .band { padding-top: 40px; }

/* ── the other 4 elements: cinematic stills in the homepage outcome-card language ── */
.pg-platform #platform.band { padding-top: 48px; }
.v3a-els { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 52px; }
.v3a-el { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.v3a-el:hover, .v3a-el:focus-visible { transform: translateY(-4px); border-color: #D8D8D3; box-shadow: 0 22px 44px rgba(20,30,40,.10); }
.v3a-el-visual { display: block; position: relative; overflow: hidden; aspect-ratio: 1/1.08; background: var(--dark); isolation: isolate; }
.v3a-el-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  filter: saturate(1.16) sepia(.10) brightness(calc(var(--exp, 1) * 1.01)) url(#cardgrade);
  transition: transform 1.2s var(--ease); }
.v3a-el-tint { position: absolute; inset: 0; z-index: 2; background: var(--tint, #A45E2C); mix-blend-mode: color;
  opacity: var(--tintop, .16); transition: opacity .45s var(--ease); }
.v3a-el-shade { position: absolute; inset: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(20,30,40,.12) 0%, rgba(20,30,40,0) 32%, rgba(20,30,40,.22) 58%, rgba(20,30,40,.86) 100%); }
.v3a-el-title { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 4; font-family: var(--f-d); font-weight: 400;
  font-size: clamp(28px, 2.3vw, 34px); line-height: 1.08; letter-spacing: -.035em; color: #FFFFFF; }
.v3a-el:hover .v3a-el-visual img { transform: scale(1.035); }
.v3a-el:hover .v3a-el-tint { opacity: 0; }
.v3a-el-foot { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px 24px; flex: 1; }
.v3a-el-p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.v3a-el-l { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink); }
.v3a-el-l i { font-style: normal; color: var(--orange); transition: transform .3s var(--ease); }
.v3a-el:hover .v3a-el-l i { transform: translate(2px, -2px); }

@media (max-width: 1100px) {
  .v3a-els { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .v3a-gains { grid-template-columns: 1fr; gap: 36px; margin-top: 44px; }
  .pg-platform #benefits { padding-top: 72px; }
}
@media (max-width: 1040px) {
  .v3a-panel { aspect-ratio: 16/10; padding: 28px; }
}
@media (max-width: 620px) {
  .v3a-panel { aspect-ratio: auto; padding: 14px; }
  .v3a-svg { height: auto; }
  .v3a-els { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .v3a-el-visual { aspect-ratio: 4/3; }
  .v3a-el-foot { padding: 18px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .v3a-bb, .v3a-plane, .v3a-tile, .v3a-knob, .v3a-tag, .v3a-track-on, .v3a-el, .v3a-el-visual img, .v3a-el-tint, .v3a-el-l i {
    transition: none !important; }
  .v3a-bb, .v3a-plane, .v3a-tile, .v3a-tag { opacity: 1; transform: none; }
  .v3a-knob { transform: none; }
  .v3a-track-on { stroke-dashoffset: 0; }
  .v3a-el:hover { transform: none; }
  .v3a-el:hover .v3a-el-visual img { transform: none; }
  .v3a-pts circle, .v3a-pk line { animation: none !important; }
  .v3a-packet { animation: none !important; opacity: 1; transform: translateY(210px); }
  .v3a-ring { display: none; }
}

/* ── 2026-09-23: "What you get" ran straight into "Talk to it like a colleague"
   -- two serif stacks on the same ground, ~76px apart, reading as one block.
   The benefits now sit on their own white band closed by a rule, and #what
   starts clear of it. ── */
.pg-platform #benefits { padding: 96px 0 84px; background: var(--white); }
.pg-platform #what, .pg-platform #anatomy, .pg-platform #path, .pg-platform #platform,
.pg-platform #fde { background: var(--white); }
.pg-platform .v3a-gains { margin-top: 56px; }
.pg-platform #benefits + .band { padding-top: 112px; }
@media (max-width: 900px) {
  .pg-platform #benefits { padding: 72px 0 64px; }
  .pg-platform #benefits + .band { padding-top: 80px; }
}

/* ==========================================================
   23 September 2026 · platform-pages round (all 5 pages)
   Scoped overrides only. brand.css untouched, other pages untouched.
   ========================================================== */

/* logo bar: 26% larger on the platform-page heroes (desktop), same ratio
   on mobile. Scoped so the homepage's own trust bar, if any, is untouched
   by this file (this stylesheet is only linked on the 5 platform pages). */
.phero-trust .mq img { height: calc(var(--lh, 38) * .78px); max-width: 155px; }
@media (max-width: 620px) {
  .phero-trust .mq img { height: calc(var(--lh, 38) * .55px); }
}

/* text-plus-image blocks: match column heights above the stacked breakpoint.
   Below 1040px .cap already stacks to one column (brand.css), so this stays
   scoped to the two-column layout only and never touches the mobile fix. */
@media (min-width: 1041px) {
  .cap { align-items: stretch; }
  .cap-media { display: flex; }
  .cap-frame { aspect-ratio: auto; height: 100%; min-height: 460px; width: 100%; }
  .v3a-panel { aspect-ratio: auto; height: 100%; min-height: 460px; width: 100%; }
}

/* ==========================================================
   24 September 2026 - platform-pages round 3 (all 5 pages)
   1) darken the faded grey used as a lead/support line under an
      ink heading (hero lead + the equivalent body-copy lines)
   2) warm blurred glow panel background, ported from V2's own
      .cap-frame.soft treatment (site-v2-copy-of-competitors)
   ========================================================== */

/* 1. --muted (#6B6B6B) reads too faint against the busy hero footage and
   next to the dark ink headings. Grey-800 keeps it lighter than the
   heading while giving it real contrast. Scoped to the "support line
   directly under an ink heading" pattern used across these 5 pages. */
.phero .lead,
.pg-platform .phero .lead,
.cap-l .lead-s,
.v3a-gain-c p,
#platform .shead p.p {
  color: var(--ll-color-grey-800);
}

/* 2. Warm blurred glow panels. V2's .cap-frame.soft puts a blurred still on
   ::before (its own exposure) and a diagonal light sheen on ::after, both
   behind the real content. .cap-frame.flat set `content:none` on its own
   ::after (brand.css) to kill the registration-mark decoration; this re-opens
   it for the sheen. Real children get z-index:1 so they stay legible on top,
   same mechanism brand.css already uses for the photo variant. */
.v3a-panel, .cap-frame.flat { background: #EDEDE5; }
.v3a-panel > *, .cap-frame.flat > * { position: relative; z-index: 1; }
.v3a-panel::before, .cap-frame.flat::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--v3a-bg) center/cover no-repeat;
  filter: saturate(1.08) brightness(1.02);
}
.v3a-panel::after, .cap-frame.flat::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(140deg, rgba(250,250,249,.30) 0%, rgba(250,250,249,.06) 52%, rgba(250,250,249,.34) 100%);
}
.v3a-bg-1  { --v3a-bg: url(/assets/v2img/platform/ag-channels-soft.jpg); }
.v3a-bg-2  { --v3a-bg: url(/assets/v2img/platform/in-owned-soft.jpg); }
.v3a-bg-3  { --v3a-bg: url(/assets/v2img/platform/ag-job-soft.jpg); }
.v3a-bg-4  { --v3a-bg: url(/assets/v2img/platform/ag-predictable-soft.jpg); }
.v3a-bg-5  { --v3a-bg: url(/assets/v2img/platform/au-night-soft.jpg); }
.v3a-bg-6  { --v3a-bg: url(/assets/v2img/platform/au-formats-soft.jpg); }
.v3a-bg-7  { --v3a-bg: url(/assets/v2img/platform/au-handover-soft.jpg); }
.v3a-bg-8  { --v3a-bg: url(/assets/v2img/platform/au-log-soft.jpg); }
.v3a-bg-9  { --v3a-bg: url(/assets/v2img/platform/ag-predictable-soft.jpg); }
.v3a-bg-10 { --v3a-bg: url(/assets/v2img/platform/au-handover-soft.jpg); }
.v3a-bg-11 { --v3a-bg: url(/assets/v2img/platform/ag-channels-soft.jpg); }
.v3a-bg-12 { --v3a-bg: url(/assets/v2img/platform/in-owned-soft.jpg); }
.v3a-bg-13 { --v3a-bg: url(/assets/v2img/platform/in-layers-soft.jpg); }
.v3a-bg-14 { --v3a-bg: url(/assets/v2img/platform/in-training-soft.jpg); }
.v3a-bg-15 { --v3a-bg: url(/assets/v2img/platform/in-trace-soft.jpg); }
.v3a-bg-16 { --v3a-bg: url(/assets/v2img/platform/in-trace-soft.jpg); }
.v3a-bg-17 { --v3a-bg: url(/assets/v2img/platform/in-team-soft.jpg); }
.v3a-bg-18 { --v3a-bg: url(/assets/v2img/platform/in-layers2-soft.jpg); }