/* Conncise — vendor/source page styles (loaded after style.css). Shared by the four source pages. */

/* ---------- page hero (shared idiom) ---------- */
.page-hero { padding: 108px 0 88px; }
.page-hero h1 { font-family: var(--serif); font-weight: 500; font-size: 62px; line-height: 1.08; letter-spacing: -0.012em; color: var(--ink); max-width: 860px; text-wrap: balance; margin-top: 22px; }
.page-hero h1 em { font-style: italic; color: var(--accent); }
.page-lede { margin-top: 26px; font-size: 19px; line-height: 1.65; color: var(--ink2); max-width: 620px; text-wrap: pretty; }
.page-ctas { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: fit-content; gap: 14px; margin-top: 36px; }
@media (max-width: 560px) { .page-ctas { grid-auto-flow: row; grid-auto-columns: unset; } }

/* logo pairing (used in connector card) */
.vp-pbi { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--ink); opacity: 0.82; white-space: nowrap; }
.vp-pbi img { width: 20px; height: 20px; display: block; }

/* ---------- connector / core section ---------- */
.sec-title em { font-style: italic; color: var(--accent); }
.conn-wrap { max-width: 700px; }
.conn-wrap .sec-sub { max-width: 640px; }
.conn-close { margin-top: 26px; font-size: 18.5px; line-height: 1.6; color: var(--ink2); max-width: 640px; }

/* ---------- architecture diagram (verbatim from solution.css; source card = vendor logo) ---------- */
.arch-panel { margin-top: 56px; padding: 44px 36px 48px; }
.arch2 { display: flex; align-items: flex-start; justify-content: center; }
.arch2 > .a2-node { margin-top: 158px; }
.arch2 > .a2-arrow { margin-top: 213px; }
.a2-node { position: relative; display: grid; place-items: center; isolation: isolate; }
.a2-lb { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.4; text-align: center; white-space: nowrap; }
.a2-toplb { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.4; text-align: center; white-space: nowrap; }
.a2-epm { width: 186px; height: 122px; border: 1.5px solid var(--hairp); border-radius: 11px; background: var(--paper); display: grid; place-items: center; position: relative; font-weight: 500; font-size: 15px; color: var(--ink); }
.a2-epm::before { content: ""; position: absolute; left: -21px; top: 21px; width: 100%; height: 100%; border: 1.5px solid var(--hair); border-radius: 11px; background: #fff; z-index: -1; }
.a2-epm img { height: 20px; width: auto; opacity: 0.82; display: block; }
.a2-arrow { flex: 0 0 auto; color: var(--indigo); }
.a2-azure .a2-arrow { margin: 0 9px 0 12px; }
.a2-azure > .a2-arrow:not(.a2-cont) { margin-right: 4px; }
.a2-azure .a2-cont { margin-left: 0; }
.arch2 > .a2-line { margin-left: 12px; margin-right: -44px; }
.a2-arrow svg { display: block; }
.a2-azure { display: flex; align-items: center; border-radius: 6px; padding: 156px 138px 108px 44px; position: relative; }
.a2-dash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.a2-dash rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); rx: 6px; fill: none; stroke: var(--hairp); stroke-width: 1.5; stroke-dasharray: 7 7; }
.a2-azlb { position: absolute; bottom: 10px; right: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3); display: inline-flex; align-items: center; gap: 8px; }
.a2-azlogo { width: 15px; height: 15px; display: block; }
.a2-tile { width: 126px; height: 126px; border-radius: 13px; background: var(--indigo); display: grid; place-items: center; }
.a2-tile img { width: 62px; height: 62px; display: block; }
.a2-dots { width: 126px; height: 126px; border-radius: 13px; border: 2px solid rgba(101, 98, 128, 0.7); background: #fff; display: grid; grid-template-columns: repeat(3, 14px); grid-template-rows: repeat(2, 14px); gap: 21px; place-content: center; }
.a2-dots i { width: 14px; height: 14px; border-radius: 99px; background: var(--indigo); }
.a2-flow { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.a2-miniwrap { position: relative; isolation: isolate; }
.a2-mini { width: 62px; height: 62px; border-radius: 10px; border: 1.5px solid var(--hairp); background: var(--paper); display: grid; grid-template-columns: repeat(3, 7px); grid-template-rows: repeat(2, 7px); gap: 9px; place-content: center; position: relative; }
.a2-mini::before { content: ""; position: absolute; left: 10px; top: -10px; width: 100%; height: 100%; border: 1.5px solid var(--hair); border-radius: 10px; background: #fff; z-index: -1; }
.a2-mini i { width: 7px; height: 7px; border-radius: 99px; background: var(--ink3); }
.a2-minilb { position: absolute; left: calc(100% + 20px); top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--ink2); line-height: 1.45; width: max-content; text-align: center; }
.a2-minilb strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; white-space: nowrap; }
.a2-varrow { color: var(--indigo); }
.a2-varrow svg { display: block; }
.a2-sidelb { position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%); font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 9px; }
.a2-pbilogo { width: 22px; height: 22px; display: block; }
.arch-rep { display: block; }
.arch-rep .rp-doc { fill: #fff; stroke: rgba(101, 98, 128, 0.7); stroke-width: 2; }
.arch-rep .rp-fold { fill: none; stroke: rgba(101, 98, 128, 0.7); stroke-width: 2; }
.arch-rep .rp-pie { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arch-rep .rp-line { fill: none; stroke: var(--indigo); stroke-width: 2; stroke-linecap: round; opacity: 0.55; }
.arch-rep .rp-bar { fill: rgba(101, 98, 128, 0.5); }
.vf-legend { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--hairp); }
.vf-legend span { font-size: 14px; color: var(--ink2); white-space: nowrap; }
.vf-legend strong { font-weight: 600; color: var(--ink); }
.vf-legend .arr { color: var(--accent); padding: 0 3px; }

/* steps under the diagram */
.vsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 56px; }
.vstep { border-top: 1px solid var(--hair); padding-top: 18px; }
.vstep .n { font-family: var(--mono); font-size: 13px; color: var(--accent); }
.vstep h3 { margin-top: 10px; font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1.35; }
.vstep p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink2); text-wrap: pretty; }

/* steps foot */
.vsteps-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair); }
.vsteps-foot span { font-size: 15px; color: var(--ink2); }

/* ---------- what comes through list ---------- */
.comes { list-style: none; max-width: 500px; margin-left: auto; }
.comes li { display: grid; grid-template-columns: 146px 1fr; gap: 18px; padding: 16px 4px; border-top: 1px solid var(--hair); align-items: baseline; }
.comes li:last-child { border-bottom: 1px solid var(--hair); }
.comes strong { font-weight: 600; font-size: 15px; color: var(--accent); }
.comes span { font-size: 14.5px; line-height: 1.55; color: var(--ink2); }

/* ---------- connector visual: same rows, with and without structure ---------- */
.cvis { padding: 0; max-width: 460px; margin-left: auto; overflow: hidden; }
.cvis-bar { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--hairp); background: var(--paper); }
.cvis-bar .lg-onestream { height: 17px; width: auto; display: block; opacity: 0.82; }
.cvis-bar .vp-pbi { font-size: 13.5px; margin-left: -2px; gap: 7px; }
.cvis-bar .vp-pbi img { width: 18px; height: 18px; filter: grayscale(1); opacity: 0.9; }
.cvis-bar .arr { color: var(--ink3); font-size: 0; line-height: 1; }
.cvis-bar .arr::before { content: ""; display: block; width: 17px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12' fill='none'%3E%3Cpath d='M0 6h15M10.5 1.5 15.5 6l-5 4.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 12' fill='none'%3E%3Cpath d='M0 6h15M10.5 1.5 15.5 6l-5 4.5' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.cvis-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cvis-col { padding: 16px 20px 10px; }
.cvis-col:first-child { border-right: 1px solid var(--hairp); }
.cvis .cap { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink3); display: block; margin-bottom: 10px; }
.cr { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: var(--pbi-font); font-size: 12.5px; color: var(--pbi-text); padding: 7.5px 0; border-bottom: 1px solid var(--pbi-linesoft); }
.cr:last-child { border-bottom: 0; }
.cr .nm { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr.b { font-weight: 600; }
.cr.ind { padding-left: 19px; color: var(--pbi-text2); }
.cr.mut { color: var(--ink3); border-bottom: 0; }
.ct { flex: 0 0 auto; width: 14px; height: 14px; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px #c8c6c4; border-radius: 2px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7h7' stroke='%23605e5c' stroke-width='1.1'/%3E%3C/svg%3E") center/14px 14px no-repeat; }
.ct.clpsd { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7h7M7 3.5v7' stroke='%23605e5c' stroke-width='1.1'/%3E%3C/svg%3E"); }
.cr.ind { max-height: 40px; overflow: hidden; transition: max-height 0.3s ease, opacity 0.24s ease, padding 0.3s ease, border-color 0.3s ease; }
.cr.ind.hidden { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; border-bottom-color: transparent; }
.cvis-foot { display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-top: 1px solid var(--hairp); background: var(--paper); }
.cvis-foot .ok { width: 16px; height: 16px; border-radius: 99px; background: rgba(95, 169, 95, 0.16); color: #5FA95F; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 0; }
.cvis-foot .ok::before { content: ""; width: 8px; height: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.7 5.5 4 7.7 8.3 2.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.7 5.5 4 7.7 8.3 2.4' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.cvis-foot span:last-child { font-weight: 500; font-size: 13.5px; color: var(--ink2); }

/* ---------- Oracle: logo sizing ---------- */
.cvis-bar .lg-oracle { height: 10.5px; width: auto; display: block; opacity: 0.82; }
.a2-epm-ora .lg-oracle { height: 15px; }

/* ---------- HFM: Oracle logo + product label ---------- */
.lg-pair { display: inline-flex; align-items: center; gap: 9px; }
.lg-prodlb { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink2); }
.epm-stack { display: grid; place-items: center; gap: 8px; }
.epm-stack .lg-prodlb { font-size: 11.5px; }
.epm-lockup { display: grid; justify-items: center; gap: 8px; }
.epm-lockup .lk-rule { width: 118px; height: 1.5px; background: var(--ink); opacity: 0.82; }
.epm-lockup .lk-name { font-weight: 600; font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); text-align: center; line-height: 1.4; opacity: 0.82; }

/* ---------- product cards (Planning / FCCS) ---------- */
.prod2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(450px, 100%), 1fr)); gap: 28px; margin-top: 52px; }
.prod-card { padding: 30px 32px 34px; }
.prod-card .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--indigo); }
.prod-card h3 { margin-top: 12px; font-weight: 600; font-size: 19px; color: var(--ink); line-height: 1.3; }
.prod-card p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--ink2); text-wrap: pretty; max-width: 480px; }

/* ---------- for IT ---------- */
.vp-it-foot { margin-top: 36px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 48px; max-width: 780px; }
.faq details { border-top: 1px solid var(--hair); }
.faq details:last-child { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; align-items: baseline; gap: 16px; padding: 21px 4px; cursor: pointer; font-weight: 600; font-size: 17px; color: var(--ink); line-height: 1.4; list-style: none; transition: color 0.2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary::before { content: "+"; font-family: var(--mono); font-weight: 400; font-size: 19px; line-height: 1; color: var(--accent); flex: 0 0 auto; width: 16px; text-align: center; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: center; align-self: center; }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details p { padding: 0 4px 24px 36px; font-size: 15px; line-height: 1.65; color: var(--ink2); max-width: 640px; text-wrap: pretty; }

/* inline links (site rule: periwinkle, hover graphite) */
.conn-wrap a, .faq a, .page-lede a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
.conn-wrap a:hover, .faq a:hover, .page-lede a:hover { color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .arch2, .a2-azure { flex-direction: column; align-items: center; }
  .arch2 { position: relative; z-index: 0; }
  .arch2 > .a2-node { margin-top: 0; }
  .a2-azure { padding: 44px 24px 60px; gap: 0; z-index: 0; }
  /* diagram: blocks on a left vertical rail, labels to the right */
  .arch2, .a2-azure { flex-direction: column; align-items: flex-start; }
  .arch2 { position: relative; z-index: 0; max-width: 320px; margin: 0 auto; }
  .arch2 .a2-node { width: 186px; }
  .arch2 > .a2-node { margin-top: 0; margin-left: 12px; }
  .a2-azure { width: 100%; padding: 40px 12px 52px; gap: 0; z-index: 0; }
  .arch2 > .a2-arrow, .a2-azure .a2-arrow { margin: 0; transform: none; position: relative; z-index: -1; width: 12px; align-self: flex-start; }
  .arch2 > .a2-arrow svg, .a2-azure .a2-arrow svg { display: none; }
  .arch2 > .a2-arrow::before, .a2-azure .a2-arrow::before { content: ""; display: block; width: 2px; height: 56px; margin: 0 auto; background: var(--indigo); }
  .arch2 > .a2-line { margin-top: 9px; margin-right: 0; margin-left: 99px; margin-bottom: -52px; }
  .a2-azure > .a2-arrow:not(.a2-cont) { margin-top: 9px; margin-bottom: 7px; margin-right: 0; }
  .a2-azure .a2-cont { margin-bottom: 9px; }
  .arch2 > .a2-line::before { height: 108px; }
  .a2-epm::before { left: 21px; top: -21px; }
  .a2-mini::before { left: 10px; top: 10px; }
  .a2-azure .a2-arrow { margin-left: 87px; }
  .a2-azure .a2-arrow::before { height: 50px; }
  .a2-azure .a2-arrow::after { content: ""; display: block; width: 12px; height: 8px; margin: -1px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1.5 1 6 7l4.5-6' stroke='%23656280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 8px no-repeat; }
  .a2-lb { position: absolute; left: calc(50% + 77px); top: 50%; transform: translateY(-50%); margin: 0; text-align: left; white-space: normal; width: max-content; max-width: 96px; }
  .a2-toplb { position: absolute; left: calc(50% + 77px); bottom: calc(50% + 4px); transform: none; margin: 0; text-align: left; white-space: normal; width: 96px; }
  .a2-toplb + .a2-tile + .a2-lb { top: calc(50% + 4px); transform: none; }
  .a2-sidelb { position: absolute; left: calc(50% + 49px); top: 43px; transform: translateY(-50%); margin: 0; }
  .a2-sidelb { margin-top: 12px; }
  .a2-flow { display: flex; position: static; bottom: auto; left: auto; transform: none; flex-direction: column-reverse; align-items: center; gap: 9px; order: 3; margin: 6px 0 0; }
  .a2-flow .a2-varrow { position: static; transform: rotate(180deg); }
  .vf-legend { margin-top: 20px; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
}
@media (max-width: 900px) {
  .page-hero { padding: 72px 0 64px; }
  .page-hero h1 { font-size: 42px; }
  .arch-panel { padding: 36px 20px; }
  .vsteps { grid-template-columns: 1fr; gap: 24px; margin-top: 44px; }
  .vstep p br { display: none; }
  .comes { max-width: 100%; margin-left: 0; }
  .comes li { grid-template-columns: 1fr; gap: 4px; }
  .cvis { max-width: 100%; margin-left: 0; }
  .prod2 { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
}
@media (max-width: 560px) {
  .cvis-col { padding: 14px 14px 8px; }
  .cvis-bar, .cvis-foot { padding: 12px 14px; }
  .cvis .cr { font-size: 11.5px; gap: 8px; }
  .cvis .cr .nm { white-space: normal; line-height: 1.35; }
  .cr.ind { padding-left: 14px; }
}

/* ---------- interlinks under FAQ ---------- */
.also-running { margin-top: 44px; }
.also-running span { font-size: 15px; color: var(--ink2); }
.also-running a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
.also-running a:hover { color: var(--ink); }