/* Shared product-led inner-page system */

.inner-system-page { background: var(--surface-page); }

.ip-overline,
.ip-product-index {
  display: block;
  margin-bottom: 15px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ip-product-row { padding: 96px 0; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.ip-product-row--alt { background: var(--surface-secondary); }
.ip-product-grid { display: grid; grid-template-columns: minmax(330px, 0.78fr) minmax(560px, 1.22fr); align-items: center; gap: 80px; }
.ip-product-grid--reverse .ip-product-copy { order: 2; }
.ip-product-grid--reverse .ip-product-visual { order: 1; }
.ip-product-copy h2 { margin: 0 0 10px; color: var(--navy); font-size: 1.15rem; font-weight: 750; }
.ip-product-copy h3 { margin: 0 0 20px; color: var(--navy); font-size: 3rem; font-weight: 680; line-height: 1.08; letter-spacing: 0; }
.ip-product-copy > p { margin: 0; color: var(--slate-600); font-size: 1rem; line-height: 1.75; }
.ip-checks { display: grid; gap: 9px; margin: 25px 0 27px; padding: 0; list-style: none; }
.ip-checks li { display: flex; align-items: center; gap: 9px; color: var(--slate-700); font-size: 0.86rem; }
.ip-checks i { color: #16875b; }
.ip-link { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 0.86rem; font-weight: 750; }
.ip-link i { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ip-link:hover i { transform: translateX(4px); } }

.ip-product-visual { min-width: 0; padding: 28px; border: 1px solid #ccd5e0; border-radius: 8px; background: var(--surface-primary); box-shadow: 0 22px 54px rgba(20,38,66,0.11); }
.ip-window-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid var(--border-subtle); color: var(--navy); font-size: 0.76rem; font-weight: 750; }
.ip-window-bar em { padding: 5px 8px; border-radius: 4px; color: #176649; background: #eaf7f1; font-size: 0.62rem; font-style: normal; }
.ip-window-bar small { color: var(--slate-500); font-weight: 500; }
.ip-invoice-meta { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; padding: 24px 0; }
.ip-invoice-meta span { display: flex; flex-direction: column; gap: 5px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface-ui); }
.ip-product-visual small { color: var(--slate-500); font-size: 0.62rem; }
.ip-product-visual strong { color: var(--navy); font-size: 0.78rem; }
.ip-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ip-check-grid span { display: flex; align-items: center; gap: 8px; padding: 11px; border-radius: 5px; color: #176649; background: #eaf7f1; font-size: 0.68rem; font-weight: 700; }

.ip-step-visual { display: grid; gap: 9px; padding-top: 20px; }
.ip-step-visual > span { display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; padding: 13px; border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--slate-500); background: var(--surface-ui); }
.ip-step-visual > span > i { grid-row: 1 / 3; align-self: center; }
.ip-step-visual b { color: var(--slate-700); font-size: 0.75rem; }
.ip-step-visual small { margin-top: 2px; }
.ip-step-visual .is-done { color: #176649; border-color: #b8dccc; background: #eff8f4; }
.ip-step-visual .is-current { color: var(--blue); border-color: var(--brand-blue-border); background: var(--brand-blue-soft); }

.ip-bid-list { display: grid; padding-top: 12px; }
.ip-bid-list > span { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 14px; padding: 19px 0; border-bottom: 1px solid var(--border-subtle); }
.ip-bid-list b { color: var(--navy); font-size: 0.75rem; }
.ip-bid-list > span > i { height: 7px; border-radius: 4px; background: #e1e5eb; overflow: hidden; }
.ip-bid-list em { display: block; width: var(--score); height: 100%; background: var(--blue); }
.ip-bid-list strong { text-align: right; }
.ip-product-visual--image { padding: 0; overflow: hidden; }
.ip-product-visual--image img { width: 100%; min-height: 390px; display: block; object-fit: cover; object-position: top left; }
.ip-product-row--spotlight .ip-product-grid { grid-template-columns: minmax(0, 0.68fr) minmax(620px, 1.32fr); }
.ip-product-row--spotlight .ip-product-copy { max-width: 560px; }
@keyframes ip-check-pulse { 0%, 18%, 100% { border-color: var(--border-subtle); background: #eaf7f1; } 7% { border-color: #79b89d; background: #dff3e9; } }
.ip-dynapay-visual .ip-check-grid span { border: 1px solid var(--border-subtle); animation: ip-check-pulse 5.6s var(--ease-out) infinite; }
.ip-dynapay-visual .ip-check-grid span:nth-child(2) { animation-delay: 0.7s; }
.ip-dynapay-visual .ip-check-grid span:nth-child(3) { animation-delay: 1.4s; }
.ip-dynapay-visual .ip-check-grid span:nth-child(4) { animation-delay: 2.1s; }
.ip-catalogue-search { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; padding: 12px 14px; border: 1px solid #bdc8d5; border-radius: 6px; color: var(--slate-500); background: #fff; font-size: 0.72rem; }
.ip-catalogue-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 20px; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); }
.ip-catalogue-item > i:first-child { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--blue); background: var(--brand-blue-soft); }
.ip-catalogue-item > span { display: flex; flex-direction: column; }
.ip-catalogue-item b { color: var(--navy); font-size: 0.75rem; }
.ip-catalogue-item > i:last-child { color: var(--blue); }

.ip-final-cta { padding: 72px 0; color: #fff; background: var(--navy); }
.ip-final-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 42px; }
.ip-final-cta span { display: block; margin-bottom: 8px; color: #91a7c2; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.ip-final-cta h2 { max-width: 820px; margin: 0; color: #fff; font-size: 2.7rem; font-weight: 650; line-height: 1.1; letter-spacing: 0; }
.ip-final-cta .btn { flex: 0 0 auto; border-radius: 6px; }

.ip-service-intro { padding: 82px 0; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.ip-intro-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(340px,0.85fr); align-items: end; gap: 76px; }
.ip-intro-grid h2 { margin: 0; color: var(--navy); font-size: 3.2rem; font-weight: 680; line-height: 1.08; letter-spacing: 0; }
.ip-intro-grid > p { margin: 0 0 4px; color: var(--slate-600); line-height: 1.75; }
.ip-service-cluster { padding: 78px 0; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.ip-service-cluster--alt { background: var(--surface-secondary); }
.ip-service-grid { display: grid; grid-template-columns: minmax(300px,0.7fr) minmax(520px,1.3fr); gap: 96px; }
.ip-service-heading > span { color: var(--blue); font-size: 0.7rem; font-weight: 750; }
.ip-service-heading > i { display: block; margin: 22px 0 16px; color: var(--blue); font-size: 1.8rem; }
.ip-service-heading h2 { margin: 0 0 12px; color: var(--navy); font-size: 2.1rem; font-weight: 680; }
.ip-service-heading p { margin: 0; color: var(--slate-600); line-height: 1.65; }
.ip-service-links { border-top: 1px solid var(--border-subtle); }
.ip-service-links a { display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--border-subtle); }
.ip-service-links a > span { display: flex; flex-direction: column; gap: 5px; }
.ip-service-links b { color: var(--navy); font-size: 1rem; }
.ip-service-links small { color: var(--slate-600); font-size: 0.84rem; line-height: 1.5; }
.ip-service-links i { color: var(--blue); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ip-service-links a:hover i { transform: translateX(4px); } }
.ip-service-proof { padding: 38px 0; background: var(--surface-secondary); }
.ip-service-proof .container { display: grid; grid-template-columns: repeat(3,1fr); }
.ip-service-proof .container > div { display: flex; flex-direction: column; padding: 0 30px; border-right: 1px solid var(--border-subtle); }
.ip-service-proof .container > div:first-child { padding-left: 0; }
.ip-service-proof .container > div:last-child { border-right: 0; }
.ip-service-proof strong { color: var(--navy); font-size: 1.7rem; }
.ip-service-proof span { color: var(--slate-600); font-size: 0.76rem; }

.ip-about-story { padding: 94px 0; background: var(--surface-page); }
.ip-about-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(420px,0.85fr); align-items: start; gap: 92px; }
.ip-about-grid h2 { max-width: 760px; margin: 0 0 27px; color: var(--navy); font-size: 3.3rem; font-weight: 680; line-height: 1.08; letter-spacing: 0; }
.ip-about-grid p { max-width: 740px; color: var(--slate-600); line-height: 1.75; }
.ip-about-proof { display: grid; border-top: 1px solid var(--border-subtle); }
.ip-about-proof > span { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; padding: 21px 0; border-bottom: 1px solid var(--border-subtle); }
.ip-about-proof i { grid-row: 1 / 3; align-self: center; color: var(--blue); font-size: 1.35rem; }
.ip-about-proof b { color: var(--navy); font-size: 0.9rem; }
.ip-about-proof small { color: var(--slate-600); line-height: 1.5; }
.ip-principles { padding: 92px 0; background: var(--surface-secondary); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.ip-principles .container { display: grid; grid-template-columns: minmax(340px,0.75fr) minmax(520px,1.25fr); gap: 96px; }
.ip-principles-heading h2 { margin: 0; color: var(--navy); font-size: 2.8rem; font-weight: 680; line-height: 1.1; }
.ip-principles-list { border-top: 1px solid var(--border-subtle); }
.ip-principles-list article { display: grid; grid-template-columns: 36px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--border-subtle); }
.ip-principles-list article > b { color: var(--blue); font-size: 0.7rem; }
.ip-principles-list h3 { margin: 0 0 7px; color: var(--navy); font-size: 1.05rem; }
.ip-principles-list p { margin: 0; color: var(--slate-600); font-size: 0.88rem; line-height: 1.6; }
.ip-about-model { padding: 92px 0; background: var(--surface-page); }
.ip-about-model .ip-intro-grid { margin-bottom: 50px; }
.ip-domain-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.ip-domain-grid > a { padding: 35px 36px; border-right: 1px solid var(--border-subtle); }
.ip-domain-grid > a:last-child { border-right: 0; }
.ip-domain-grid > a > span { display: flex; align-items: center; gap: 9px; color: var(--blue); font-size: 0.72rem; font-weight: 750; text-transform: uppercase; }
.ip-domain-grid h3 { margin: 22px 0 10px; color: var(--navy); font-size: 2rem; }
.ip-domain-grid p { color: var(--slate-600); line-height: 1.65; }
.ip-domain-grid em { display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-size: 0.8rem; font-style: normal; font-weight: 750; }

.security-intro { padding: 88px 0; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.security-intro-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr); gap: 88px; }
.security-intro h2 { max-width: 720px; margin: 0; color: var(--navy); font-size: 3rem; font-weight: 680; line-height: 1.08; letter-spacing: 0; }
.security-intro p { margin: 0 0 16px; color: var(--slate-600); line-height: 1.75; }
.security-controls { padding: 92px 0; background: var(--surface-secondary); }
.security-section-head { margin-bottom: 48px; }
.security-section-head h2 { margin: 0; color: var(--navy); font-size: 2.8rem; font-weight: 680; }
.security-control-list { border-top: 1px solid var(--border-subtle); }
.security-control-list article { display: grid; grid-template-columns: 42px 48px minmax(0, 1fr); align-items: start; gap: 20px; padding: 27px 0; border-bottom: 1px solid var(--border-subtle); }
.security-control-list article > span { padding-top: 6px; color: var(--blue); font-size: 0.68rem; font-weight: 750; }
.security-control-list article > i { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--blue); background: var(--brand-blue-soft); font-size: 1.2rem; }
.security-control-list h3 { margin: 0 0 7px; color: var(--navy); font-size: 1.08rem; }
.security-control-list p { max-width: 780px; margin: 0; color: var(--slate-600); font-size: 0.88rem; line-height: 1.6; }
.security-review { padding: 92px 0; background: var(--surface-page); }
.security-review-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 0.75fr); gap: 88px; }
.security-review h2 { max-width: 720px; margin: 0; color: var(--navy); font-size: 2.8rem; font-weight: 680; line-height: 1.1; }
.security-review-items { display: grid; border-top: 1px solid var(--border-subtle); }
.security-review-items span { display: flex; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--border-subtle); color: var(--slate-700); font-size: 0.84rem; }
.security-review-items i { color: #16875b; }

@media (max-width: 991.98px) {
  .ip-product-grid,
  .ip-intro-grid,
  .ip-service-grid,
  .ip-about-grid,
  .ip-principles .container { grid-template-columns: 1fr; gap: 44px; }
  .security-intro-grid,
  .security-review-grid { grid-template-columns: 1fr; gap: 44px; }
  .ip-product-grid--reverse .ip-product-copy { order: 1; }
  .ip-product-grid--reverse .ip-product-visual { order: 2; }
  .ip-product-row--spotlight .ip-product-grid { grid-template-columns: 1fr; }
  .ip-product-copy h3 { font-size: 2.65rem; }
  .ip-service-grid { gap: 36px; }
  .ip-about-grid { gap: 54px; }
}
@media (prefers-reduced-motion: reduce) { .ip-dynapay-visual .ip-check-grid span { animation: none; } }

@media (max-width: 767.98px) {
  .ip-product-row { padding: 70px 0; }
  .ip-product-copy h3 { font-size: 2.25rem; }
  .ip-product-visual { padding: 20px 16px; }
  .ip-invoice-meta { grid-template-columns: 1fr 1fr; }
  .ip-invoice-meta span:last-child { grid-column: 1 / -1; }
  .ip-check-grid { grid-template-columns: 1fr; }
  .ip-product-visual--image { padding: 0; }
  .ip-product-visual--image img { min-height: 260px; }
  .ip-final-cta { padding: 56px 0; }
  .ip-final-cta .container { align-items: flex-start; flex-direction: column; }
  .ip-final-cta h2 { font-size: 2.2rem; }
  .ip-service-intro,
  .ip-about-story,
  .ip-principles,
  .ip-about-model { padding: 70px 0; }
  .ip-intro-grid h2,
  .ip-about-grid h2 { font-size: 2.5rem; }
  .ip-service-cluster { padding: 62px 0; }
  .ip-service-proof .container { grid-template-columns: 1fr; }
  .ip-service-proof .container > div { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .ip-service-proof .container > div:last-child { border-bottom: 0; }
  .ip-principles-heading h2 { font-size: 2.35rem; }
  .ip-domain-grid { grid-template-columns: 1fr; }
  .ip-domain-grid > a { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .ip-domain-grid > a:last-child { border-bottom: 0; }
  .security-intro,
  .security-controls,
  .security-review { padding: 70px 0; }
  .security-intro h2,
  .security-review h2 { font-size: 2.4rem; }
  .security-control-list article { grid-template-columns: 28px 42px minmax(0, 1fr); gap: 12px; }
  .security-control-list article > i { width: 40px; height: 40px; }
}