/* Dedicated IOPS landing page, based on the approved product-site draft. */
.iops-page { overflow: hidden; }
.iops-draft-hero { position: relative; min-height: min(760px, calc(100vh - 100px)); display: flex; align-items: center; isolation: isolate; color: #F6F2EB; background-image: linear-gradient(90deg, rgba(8, 23, 33, .97) 0%, rgba(8, 23, 33, .88) 45%, rgba(8, 23, 33, .50) 100%), url("/assets/iops-plant-hero.jpg"); background-size: cover; background-position: center; }
.iops-draft-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 23, 33, 0) 65%, rgba(8, 23, 33, .68)); }
.iops-draft-hero .wrap { width: 100%; padding-block: clamp(68px, 10vw, 140px); }
.iops-draft-kicker { display: flex; align-items: center; gap: 10px; color: #F0B18D; }
.iops-draft-kicker::before { content: ""; inline-size: 9px; block-size: 9px; border-radius: 50%; background: #F0B18D; box-shadow: 0 0 0 5px rgba(240,177,141,.16); }
.iops-draft-hero h1 { max-width: 13ch; margin-top: 24px; font-size: clamp(52px, 7vw, 102px); letter-spacing: -.02em; line-height: .92; }
.iops-draft-hero .hero-copy { max-width: 700px; margin-top: 24px; color: #E4EAED; font-size: clamp(18px, 2vw, 23px); line-height: 1.5; }
.iops-draft-hero .actions { margin-top: 28px; }
.iops-draft-hero .btn.ghost { border-color: rgba(246,242,235,.72); color: #F6F2EB; }
.iops-draft-hero .btn.ghost:hover { background: #F6F2EB; color: #15202B; }
.iops-proof { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 34px; padding: 16px 0 0; border-top: 1px solid rgba(246,242,235,.35); font: 13px var(--mono); color: #D4DEE2; }
.iops-proof span { display: inline-flex; align-items: center; gap: 8px; }
.iops-proof span::before { content: "✓"; color: #F0B18D; font-weight: 700; }

.iops-draft-section { padding-block: clamp(64px, 9vw, 120px); }
.iops-draft-section .sec-head { margin-bottom: 42px; }
.iops-draft-section .sec-head .label { color: var(--accent); }
.iops-draft-section .sec-head h2 { max-width: 16ch; margin-top: 10px; font-size: clamp(42px, 5.5vw, 72px); }
.iops-draft-section .sec-head p { font-size: 18px; line-height: 1.55; }
.iops-draft-model { display: grid; grid-template-columns: .95fr 1.1fr .95fr; gap: 20px; align-items: stretch; }
.iops-draft-card { padding: 28px; border: 1px solid var(--rule); background: var(--card-surface); }
.iops-draft-card .stage { color: var(--accent); font: 13px var(--mono); letter-spacing: .08em; }
.iops-draft-card h3 { margin-top: 11px; font-size: 33px; }
.iops-draft-card p { margin-top: 12px; color: var(--ink-2); }
.iops-source-list, .iops-intelligence-list { list-style: none; padding: 0; margin: 20px 0 0; }
.iops-source-list li, .iops-intelligence-list li { padding: 10px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.iops-source-list li:last-child, .iops-intelligence-list li:last-child { border-bottom: 1px solid var(--rule); }
.iops-core { display: flex; flex-direction: column; justify-content: center; color: #F6F2EB; background: #14242D; border: 0; box-shadow: 16px 18px 0 rgba(21,32,43,.1); }
.iops-core .stage { color: #F0B18D; }
.iops-core p { color: #D7E1E5; }
.iops-core-mark { display: grid; place-items: center; aspect-ratio: 1.2; margin: 26px 0; border: 1px solid rgba(246,242,235,.35); background: radial-gradient(circle at center, rgba(240,177,141,.25), transparent 46%); font-family: var(--display); font-size: clamp(42px, 5vw, 68px); letter-spacing: .04em; }
.iops-core-flow { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.iops-core-flow span { border-top: 1px solid rgba(246,242,235,.35); padding-top: 8px; font: 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }

.iops-intelligence { background: #E7EBEC; }
.iops-intelligence-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 32px 64px; align-items: start; }
.iops-intelligence-statement { padding: 24px 0; border-top: 3px solid var(--accent); font-family: var(--display); font-size: clamp(31px, 4vw, 48px); line-height: 1.03; }
.iops-intelligence-list { margin-top: 0; border-top: 2px solid var(--ink); }
.iops-intelligence-list li { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding-block: 19px; }
.iops-intelligence-list .item-no { color: var(--accent); font: 20px var(--display); }
.iops-intelligence-list b { display: block; font-size: 18px; }
.iops-intelligence-list small { display: block; margin-top: 5px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }

.iops-why { color: #F6F2EB; background: #14242D; }
.iops-why .sec-head p { color: #D7E1E5; }
.iops-why-grid { display: grid; grid-template-columns: 1fr 1.25fr; border-top: 2px solid #D7E1E5; }
.iops-why-grid > div { padding: 28px 32px 30px 0; }
.iops-why-grid > div + div { padding-left: 32px; border-left: 1px solid #687985; }
.iops-why-grid h3 { font-size: 37px; }
.iops-why-grid p { margin-top: 14px; color: #D7E1E5; }
.iops-why-grid ul { list-style: none; padding: 0; margin: 22px 0 0; }
.iops-why-grid li { padding: 10px 0; border-top: 1px solid #687985; }
.iops-why-grid li::before { content: "✓"; color: #F0B18D; margin-right: 10px; }

.iops-loop-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.iops-loop-grid > div { min-height: 142px; padding: 16px 10px 18px; border-bottom: 1px solid var(--rule); }
.iops-loop-grid > div + div { border-left: 1px solid var(--rule); }
.iops-loop-grid .loop-no { display: block; color: var(--accent); font: 17px var(--mono); }
.iops-loop-grid b { display: block; margin-top: 9px; font-size: 15px; line-height: 1.2; }
.iops-loop-grid small { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }

.iops-pump { background: #EDE6DD; }
.iops-pump .sec-head h2 { max-width: 18ch; }
.iops-pump-grid { display: grid; grid-template-columns: .9fr 1.15fr 1fr; gap: 1px; background: var(--rule); border-top: 2px solid var(--ink); }
.iops-pump-grid > div { padding: 24px; background: #F8F4EE; }
.iops-pump-grid h3 { font-size: 30px; }
.iops-pump-grid p { margin-top: 12px; color: var(--ink-2); }
.iops-pump-grid ul { margin: 16px 0 0; padding-left: 19px; color: var(--ink-2); }
.iops-pump-grid li + li { margin-top: 5px; }
.iops-human { margin-top: 20px; padding: 18px 22px; border-left: 4px solid var(--accent); background: rgba(255,255,255,.42); font-weight: 600; }

.iops-capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 2px solid var(--ink); }
.iops-capability-grid > div { padding: 23px 20px 28px 0; border-bottom: 1px solid var(--rule); }
.iops-capability-grid > div + div { padding-left: 20px; border-left: 1px solid var(--rule); }
.iops-capability-grid .cap-no { color: var(--accent); font: 20px var(--mono); }
.iops-capability-grid h3 { margin-top: 15px; font-size: 31px; }
.iops-capability-grid p { margin-top: 10px; color: var(--ink-2); font-size: 15px; }

.iops-security-detail { color: #F6F2EB; background: #0E1820; }
.iops-security-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px 96px; align-items: start; }
.iops-security-grid h2 { margin-top: 12px; font-size: clamp(43px,5.4vw,70px); }
.iops-security-grid p { margin-top: 18px; color: #D7E1E5; max-width: 48ch; }
.iops-security-grid ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid #687985; }
.iops-security-grid li { padding: 15px 0; border-bottom: 1px solid #687985; }
.iops-security-grid li::before { content: "✓"; color: #F0B18D; margin-right: 10px; }
.iops-final { text-align: center; }
.iops-final h2 { max-width: 16ch; margin: 14px auto 0; font-size: clamp(48px,6vw,78px); }
.iops-final p { max-width: 60ch; margin: 20px auto 30px; color: var(--ink-2); }

@media (max-width: 980px) {
  .iops-draft-model { grid-template-columns: 1fr 1fr; }
  .iops-core { grid-column: span 2; order: -1; }
  .iops-loop-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .iops-loop-grid > div:nth-child(4), .iops-loop-grid > div:nth-child(7) { border-left: 0; }
  .iops-capability-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .iops-capability-grid > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 700px) {
  .iops-draft-hero { min-height: auto; background-position: 60% center; }
  .iops-draft-hero h1 { max-width: 12ch; }
  .iops-draft-model, .iops-intelligence-grid, .iops-why-grid, .iops-pump-grid, .iops-security-grid { grid-template-columns: 1fr; }
  .iops-core { grid-column: auto; order: 0; }
  .iops-why-grid > div + div, .iops-capability-grid > div + div { border-left: 0; padding-left: 0; }
  .iops-loop-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .iops-loop-grid > div:nth-child(4), .iops-loop-grid > div:nth-child(7) { border-left: 1px solid var(--rule); }
  .iops-loop-grid > div:nth-child(3), .iops-loop-grid > div:nth-child(5), .iops-loop-grid > div:nth-child(7), .iops-loop-grid > div:nth-child(9) { border-left: 0; }
  .iops-capability-grid { grid-template-columns: 1fr; }
  .iops-capability-grid > div:nth-child(3) { padding-left: 0; }
}