.pi-feature-page main { background: #fff; }
.pi-feature-story { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid #dbe3ec; border-bottom: 1px solid #dbe3ec; background: #f7f9fc; }
.pi-feature-story article { min-height: 360px; padding: clamp(42px,5vw,76px); border-right: 1px solid #dbe3ec; }
.pi-feature-story article:last-child { border-right: 0; }
.pi-feature-story span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: #2864e8; color: #fff; font: 600 12px/1 'IBM Plex Mono',monospace; }
.pi-feature-story h2 { max-width: 420px; margin: 64px 0 18px; font-size: clamp(26px,2.4vw,40px); line-height: 1.05; letter-spacing: -.035em; }
.pi-feature-story p { max-width: 480px; margin: 0; color: var(--pi-next-muted); font-size: 17px; line-height: 1.7; }
.pi-feature-related a p { margin: 18px 0 34px; color: var(--pi-next-muted); font-size: 15px; line-height: 1.6; }
@media (max-width: 800px) { .pi-feature-story { grid-template-columns: 1fr; } .pi-feature-story article { min-height: 0; border-right: 0; border-bottom: 1px solid #dbe3ec; } .pi-feature-story article:last-child { border-bottom: 0; } .pi-feature-story h2 { margin-top: 38px; } }
.pi-feature-hero { min-height: 700px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 7vw; align-items: center; padding: clamp(72px,8vw,120px) 5vw; background: radial-gradient(circle at 82% 20%,rgba(40,100,232,.12),transparent 32%),#f7f9fc; }
.pi-feature-hero h1, .pi-feature-hub h1 { margin: 0; font-size: clamp(50px,6.5vw,98px); line-height: .94; letter-spacing: -.065em; }
.pi-feature-hero > div > p:not(.pi-next-eyebrow), .pi-feature-hub > p:not(.pi-next-eyebrow) { max-width: 690px; color: var(--pi-next-muted); font-size: clamp(18px,1.5vw,23px); line-height: 1.6; }
.pi-feature-hero figure { margin: 0; overflow: hidden; border: 1px solid #cfd9e5; border-radius: 24px; background: #fff; box-shadow: 0 32px 90px rgba(10,30,63,.18); transform: rotate(1deg); }
.pi-feature-hero figure img { display: block; width: 100%; min-height: 430px; max-height: 650px; object-fit: cover; object-position: top; }
.pi-feature-outcome { display: grid; grid-template-columns: .35fr 1.65fr; gap: 6vw; padding: clamp(70px,9vw,140px) 5vw; color: #fff; background: var(--pi-next-navy); }
.pi-feature-outcome p { color: #82ead9; font: 700 12px/1.3 "IBM Plex Mono",monospace; text-transform: uppercase; letter-spacing: .11em; }
.pi-feature-outcome h2, .pi-feature-details h2, .pi-feature-related h2 { margin: 0; font-size: clamp(38px,4.5vw,70px); line-height: 1.03; letter-spacing: -.055em; }
.pi-feature-details { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding: clamp(80px,10vw,150px) 5vw; }
.pi-feature-details > div > p:last-child { color: var(--pi-next-muted); font-size: 18px; line-height: 1.6; }
.pi-feature-details ul { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pi-next-line); }
.pi-feature-details li { min-height: 130px; display: flex; align-items: flex-end; padding: 24px; border-right: 1px solid var(--pi-next-line); border-bottom: 1px solid var(--pi-next-line); font: 600 18px/1.35 "Space Grotesk",sans-serif; }
.pi-feature-details li:nth-child(2n) { border-right: 0; }
.pi-feature-workflow { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 5vw; border: 1px solid var(--pi-next-line); border-radius: 24px; overflow: hidden; background: var(--pi-next-paper); }
.pi-feature-workflow > div { min-height: 260px; padding: 32px; border-right: 1px solid var(--pi-next-line); }
.pi-feature-workflow > div:last-child { border-right: 0; }
.pi-feature-workflow span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--pi-next-blue); font-weight: 700; }
.pi-feature-workflow h3 { margin: 58px 0 0; font-size: 25px; }
.pi-feature-workflow p { color: var(--pi-next-muted); line-height: 1.6; }
.pi-feature-related { padding: clamp(86px,10vw,150px) 5vw; }
.pi-feature-related > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 45px; }
.pi-feature-related a, .pi-feature-hub > div > a { display: flex; flex-direction: column; min-height: 240px; padding: 28px; border: 1px solid var(--pi-next-line); border-radius: 20px; background: #fff; text-decoration: none; transition: transform .2s ease,box-shadow .2s ease; }
.pi-feature-related a:hover, .pi-feature-hub > div > a:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(11,23,45,.1); }
.pi-feature-related a span, .pi-feature-hub > div > a span { color: var(--pi-next-teal); font: 700 11px/1.2 "IBM Plex Mono",monospace; text-transform: uppercase; letter-spacing: .1em; }
.pi-feature-related a strong { margin-top: 18px; font-size: 25px; line-height: 1.15; }
.pi-feature-related a small { margin-top: auto; color: var(--pi-next-blue); font-weight: 700; }
.pi-feature-hub { padding: clamp(86px,9vw,140px) 5vw; background: var(--pi-next-paper); }
.pi-feature-hub > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 58px; }
.pi-feature-hub > div > a h2 { margin: 18px 0 0; font-size: 26px; line-height: 1.1; letter-spacing: -.035em; }
.pi-feature-hub > div > a p { color: var(--pi-next-muted); line-height: 1.55; }
.pi-agent-hero { padding: clamp(64px,7vw,108px) 5vw 0; background: linear-gradient(180deg,#f7f9fc 0%,#fff 92%); }
.pi-agent-hero__copy { max-width: 1020px; }
.pi-agent-hero h1 { max-width: 900px; margin: 0; font-size: clamp(54px,7vw,104px); line-height: .92; letter-spacing: -.065em; }
.pi-agent-hero__copy > p:not(.pi-next-eyebrow) { max-width: 820px; color: var(--pi-next-muted); font-size: clamp(18px,1.5vw,24px); line-height: 1.55; }
.pi-agent-hero figure { margin: clamp(48px,6vw,84px) 0 0; overflow: hidden; border: 1px solid #cfd9e5; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 30px 80px rgba(10,30,63,.16); }
.pi-agent-hero figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.pi-agent-hero figcaption { padding: 14px 20px; color: var(--pi-next-muted); border-top: 1px solid var(--pi-next-line); font: 500 12px/1.4 "IBM Plex Mono",monospace; }
.pi-agent-definition { display: grid; grid-template-columns: 1.15fr .85fr; gap: 8vw; padding: clamp(76px,8vw,124px) 5vw; }
.pi-agent-definition h2,.pi-agent-section-heading h2,.pi-agent-close h2 { margin: 0; font-size: clamp(38px,4.6vw,68px); line-height: 1; letter-spacing: -.05em; }
.pi-agent-definition > div > p:last-child { max-width: 760px; color: var(--pi-next-muted); font-size: 18px; line-height: 1.7; }
.pi-agent-definition ul { align-self: end; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pi-next-line); }
.pi-agent-definition li { padding: 16px 4px; border-bottom: 1px solid var(--pi-next-line); font-weight: 600; }
.pi-agent-definition li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 13px; border-radius: 50%; background: var(--pi-next-blue); }
.pi-agent-capabilities { padding: clamp(76px,8vw,124px) 5vw; color: #fff; background: var(--pi-next-navy); }
.pi-agent-section-heading { display: grid; grid-template-columns: .48fr 1.2fr; gap: 6vw; align-items: end; }
.pi-agent-section-heading .pi-next-eyebrow { align-self: start; }
.pi-agent-capabilities__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 64px; border-top: 1px solid #40526c; }
.pi-agent-capabilities article { position: relative; min-height: 290px; padding: 32px 38px 38px 54px; border-right: 1px solid #40526c; border-bottom: 1px solid #40526c; }
.pi-agent-capabilities article:nth-child(2n) { border-right: 0; }
.pi-agent-capabilities article::before { content: ""; position: absolute; top: 34px; bottom: 38px; left: 0; width: 3px; background: var(--pi-next-blue); }
.pi-agent-capabilities article > span { color: #81ead8; font: 600 11px/1 "IBM Plex Mono",monospace; letter-spacing: .12em; }
.pi-agent-capabilities h3 { margin: 48px 0 14px; font-size: clamp(24px,2.2vw,34px); letter-spacing: -.035em; }
.pi-agent-capabilities article p { max-width: 620px; margin: 0; color: #c9d4e4; font-size: 16px; line-height: 1.65; }
.pi-agent-loop { padding: clamp(76px,8vw,124px) 5vw; background: #f7f9fc; }
.pi-agent-loop .pi-agent-section-heading { align-items: start; }
.pi-agent-loop .pi-agent-section-heading > p:last-child { max-width: 680px; margin: 0; color: var(--pi-next-muted); font-size: 17px; line-height: 1.65; }
.pi-agent-loop__graphic { display: block; width: min(1080px,100%); margin: 72px auto 0; overflow: visible; }
.pi-agent-loop__path { fill: none; stroke: #cbd6e4; stroke-width: 2; }
.pi-agent-loop__arrow { fill: none; stroke: var(--pi-next-blue); stroke-width: 3; }
.pi-agent-loop__graphic marker path { fill: var(--pi-next-blue); }
.pi-agent-loop__graphic g circle { fill: #fff; stroke: #aebed1; stroke-width: 2; }
.pi-agent-loop__graphic g text { fill: var(--pi-next-navy); font: 700 19px "Space Grotesk",sans-serif; text-anchor: middle; }
.pi-agent-loop__graphic g .pi-agent-loop__sub { fill: var(--pi-next-muted); font: 500 10px "IBM Plex Mono",monospace; letter-spacing: .04em; text-transform: uppercase; }
.pi-agent-loop__motion,.pi-agent-loop__static { fill: #81ead8; stroke: var(--pi-next-navy); stroke-width: 3; }
.pi-agent-loop__static { display: none; }
.pi-agent-contexts { display: grid; grid-template-columns: .42fr 1.58fr; gap: 7vw; padding: clamp(70px,7vw,104px) 5vw; }
.pi-agent-contexts > div { display: flex; flex-wrap: wrap; gap: 10px; }
.pi-agent-contexts span { padding: 13px 17px; border: 1px solid var(--pi-next-line); border-radius: 999px; background: #fff; font-weight: 600; }
.pi-agent-close { padding: clamp(78px,8vw,128px) 5vw; color: #fff; background: linear-gradient(135deg,#071a36 0%,#0d2f67 100%); }
.pi-agent-close > p:first-child { max-width: 720px; color: #81ead8; font-size: 18px; line-height: 1.6; }
.pi-agent-close h2 { max-width: 1100px; margin-top: 46px; }
.pi-agent-close > p:last-child { max-width: 720px; margin-top: 34px; color: #c9d4e4; font-size: 18px; line-height: 1.65; }
@media(max-width:960px){.pi-feature-hero,.pi-feature-outcome,.pi-feature-details{grid-template-columns:1fr}.pi-feature-related>div,.pi-feature-hub>div{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.pi-agent-definition,.pi-agent-section-heading,.pi-agent-contexts{grid-template-columns:1fr}.pi-agent-section-heading{gap:28px}.pi-agent-definition ul{align-self:auto}.pi-agent-contexts{gap:30px}}
@media(max-width:700px){.pi-feature-hero{padding:64px 20px 80px}.pi-feature-hero figure img{min-height:260px}.pi-feature-outcome,.pi-feature-details,.pi-feature-related,.pi-feature-hub{padding:76px 20px}.pi-feature-details ul,.pi-feature-workflow,.pi-feature-related>div,.pi-feature-hub>div{grid-template-columns:1fr}.pi-feature-workflow{margin:0 20px}.pi-feature-workflow>div{min-height:210px;border-right:0;border-bottom:1px solid var(--pi-next-line)}.pi-feature-workflow>div:last-child{border-bottom:0}.pi-feature-details li{border-right:0}.pi-agent-hero{padding:58px 20px 0}.pi-agent-hero h1{font-size:clamp(48px,15vw,70px)}.pi-agent-hero figure{border-radius:16px 16px 0 0}.pi-agent-definition,.pi-agent-capabilities,.pi-agent-loop,.pi-agent-contexts,.pi-agent-close{padding:68px 20px}.pi-agent-capabilities__grid{grid-template-columns:1fr;margin-top:44px}.pi-agent-capabilities article{min-height:0;padding:28px 10px 36px 36px;border-right:0}.pi-agent-capabilities article::before{top:28px;bottom:28px}.pi-agent-capabilities h3{margin-top:32px}.pi-agent-loop__graphic{margin-top:42px}.pi-agent-contexts span{font-size:14px}}
@media(prefers-reduced-motion:reduce){.pi-agent-loop__motion{display:none}.pi-agent-loop__static{display:block}}


/* 311 Civic Agents */
.pi-civic-page{--civic-blue:#0b4fc7;--civic-ink:#101827;--civic-mist:#edf4ff;--civic-teal:#087f8c;color:var(--civic-ink);background:linear-gradient(180deg,#f7faff 0,#fff 18rem)}
.pi-civic-hero,.pi-civic-section,.pi-civic-close{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.pi-civic-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:64px;align-items:center;padding:112px 0 88px}
.pi-civic-kicker,.pi-civic-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:800;color:var(--civic-blue)}
.pi-civic-hero h1{font-family:inherit;font-size:clamp(4rem,9vw,7.5rem);font-weight:800;line-height:.88;letter-spacing:-.06em;margin:18px 0 28px;max-width:800px}
.pi-civic-lead{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.55;color:#46536a;max-width:760px}
.pi-civic-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.pi-civic-hero-panel{position:relative;background:#0b1730;color:#fff;padding:32px;border-radius:2px;box-shadow:18px 18px 0 #cfe0ff;overflow:hidden}
.pi-civic-hero-panel:before{content:"311";position:absolute;right:-8px;top:-34px;font-family:inherit;font-size:8rem;font-weight:800;line-height:1;color:rgba(255,255,255,.055)}
.pi-civic-status{display:inline-block;background:#c9f3ef;color:#075c64;padding:7px 10px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.pi-civic-hero-panel>strong{display:block;font-family:inherit;font-size:1.55rem;font-weight:700;line-height:1.25;margin:30px 0}
.pi-civic-hero-panel dl{margin:0}.pi-civic-hero-panel dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.15)}
.pi-civic-hero-panel dt{color:#91a4c8}.pi-civic-hero-panel dd{margin:0;font-weight:700;text-align:right}.pi-civic-hero-panel>p{color:#a9e4df;margin:26px 0 0;font-size:.85rem}
.pi-civic-section{padding:88px 0;border-top:1px solid #d9e3f2}.pi-civic-section h2,.pi-civic-close h2{font-family:inherit;font-size:clamp(2.25rem,5vw,4.3rem);font-weight:800;line-height:1.02;letter-spacing:-.035em;margin:14px 0 38px;max-width:950px}
.pi-civic-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:80px}.pi-civic-intro>div>p:last-child,.pi-civic-loop-copy,.pi-civic-close>p{font-size:1.08rem;line-height:1.75;color:#4c5970}
.pi-civic-checklist{list-style:none;margin:44px 0 0;padding:0}.pi-civic-checklist li{padding:13px 0 13px 28px;border-bottom:1px solid #d6e0ef;font-weight:700;position:relative}.pi-civic-checklist li:before{content:"";position:absolute;left:1px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--civic-blue)}
.pi-civic-capabilities{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#cbd8ea;border:1px solid #cbd8ea}.pi-civic-capabilities article{background:#fff;padding:28px 24px;min-height:245px}.pi-civic-capabilities span{color:var(--civic-blue);font:800 .75rem/1 sans-serif;letter-spacing:.12em}.pi-civic-capabilities h3{font-family:inherit;font-size:1.28rem;font-weight:700;line-height:1.2;margin:30px 0 12px}.pi-civic-capabilities p{color:#566277;line-height:1.6;margin:0}
.pi-civic-people{width:auto;max-width:none;padding-inline:max(20px,calc((100% - 1180px)/2));background:#0b1730;color:#fff}.pi-civic-people .pi-civic-eyebrow{color:#87d9d5}.pi-civic-people-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pi-civic-people-grid article{padding:34px;border:1px solid rgba(255,255,255,.18)}.pi-civic-people-grid article>p{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:800;color:#9fb7e3}.pi-civic-people-grid .is-assisted>p{color:#87d9d5}.pi-civic-people-grid h3{font-family:inherit;font-size:1.65rem;font-weight:700;line-height:1.2}.pi-civic-people-grid ul{list-style:none;padding:0;margin:26px 0 0}.pi-civic-people-grid li{padding:10px 0;border-top:1px solid rgba(255,255,255,.12);color:#dce5f5}
.pi-civic-loop{display:grid;grid-template-columns:repeat(4,1fr);gap:42px;margin:54px 0 34px}.pi-civic-loop div{position:relative;background:var(--civic-mist);border-top:3px solid var(--civic-blue);padding:24px}.pi-civic-loop div:not(:last-child):after{content:"→";position:absolute;right:-31px;top:42%;color:#7f91aa;font-size:1.35rem}.pi-civic-loop span{display:block;color:var(--civic-blue);font-size:.72rem;font-weight:800}.pi-civic-loop strong{display:block;font-family:inherit;font-size:1.5rem;font-weight:700;line-height:1.2;margin:16px 0 7px}.pi-civic-loop small{color:#63738d;line-height:1.4}.pi-civic-loop-copy{max-width:900px}
.pi-civic-channels{display:flex;flex-wrap:wrap;gap:10px}.pi-civic-channels span{background:var(--civic-mist);border-left:3px solid var(--civic-blue);padding:15px 18px;font-weight:700}
.pi-civic-close{margin-top:40px;margin-bottom:80px;background:#eaf8f8;padding:70px}.pi-civic-close>p{max-width:850px}.pi-civic-close .pi-button{margin-top:22px}
@media(max-width:900px){.pi-civic-hero,.pi-civic-intro{grid-template-columns:1fr}.pi-civic-hero{padding-top:72px;gap:48px}.pi-civic-capabilities{grid-template-columns:repeat(2,1fr)}.pi-civic-loop{grid-template-columns:1fr 1fr}.pi-civic-loop div:after{display:none}}
@media(max-width:600px){.pi-civic-hero,.pi-civic-section,.pi-civic-close{width:min(100% - 28px,1180px)}.pi-civic-hero h1{font-size:3.6rem}.pi-civic-hero-panel{box-shadow:9px 9px 0 #cfe0ff}.pi-civic-section{padding:62px 0}.pi-civic-capabilities,.pi-civic-people-grid,.pi-civic-loop{grid-template-columns:1fr}.pi-civic-capabilities article{min-height:0}.pi-civic-people{width:auto;padding-inline:14px}.pi-civic-close{padding:42px 24px}}
@media(prefers-reduced-motion:reduce){.pi-civic-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Keep each product image in the same reading moment as its explanation. */
@media(min-width:961px){
  .pi-feature-hero{
    min-height:0;
    grid-template-columns:minmax(350px,.72fr) minmax(600px,1.28fr);
    gap:clamp(34px,4vw,64px);
    padding:clamp(76px,7vw,104px) max(4vw,calc((100vw - 1480px)/2));
  }
  .pi-feature-hero h1,.pi-feature-hub h1{font-size:clamp(52px,5.2vw,78px);line-height:.98}
  .pi-feature-hero figure{border-radius:18px;transform:none;box-shadow:0 28px 72px rgba(10,30,63,.16)}
  .pi-feature-hero figure img{min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain}
  .pi-feature-outcome,.pi-feature-details{
    gap:clamp(42px,6vw,90px);
    padding:clamp(72px,8vw,112px) max(4vw,calc((100vw - 1400px)/2));
  }
  .pi-feature-outcome{grid-template-columns:minmax(220px,.4fr) minmax(0,1.6fr)}
  .pi-feature-details{grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr)}
  .pi-feature-related{padding:clamp(76px,8vw,112px) max(4vw,calc((100vw - 1400px)/2))}
}

@media(prefers-reduced-motion:no-preference){
  .pi-feature-hero figure img{transition:transform .8s cubic-bezier(.2,.75,.2,1)}
  .pi-feature-hero figure:hover img{transform:scale(1.012)}
}

.pi-feature-workflow > div { min-height: 470px; }
.pi-feature-workflow h3 { max-width: 360px; }
.pi-feature-workflow p { max-width: 470px; font-size: 16px; line-height: 1.68; }
.pi-feature-workflow ul { display: grid; gap: 10px; margin: 28px 0 0; padding: 24px 0 0; border-top: 1px solid #dbe3ec; list-style: none; }
.pi-feature-workflow li { position: relative; padding-left: 18px; color: #526176; font-size: 14px; line-height: 1.5; }
.pi-feature-workflow li::before { content: ""; position: absolute; top: .58em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #2864e8; }
@media (max-width: 800px) { .pi-feature-workflow > div { min-height: 0; } }