/* Proof group: customers.html, customer-story.html, trust.html, integrations.html.
   Loaded after pages.css. Only v4 tokens from raisan.css; same 32/20 radii and shared curves. */

/* ---------- Split hero on proof pages: a longer headline needs a wider text column ---------- */
.pf-hero.r-page-hero--split .container { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.pf-hero .r-h-page { font-size: clamp(36px, 3.6vw, 52px); }
.pf-meta { font-size: 15px; font-weight: 700; line-height: 1.8; color: var(--ink-soft); }
.pf-hero-logo { position: absolute; top: clamp(20px, 2.2vw, 30px); inset-inline-start: clamp(20px, 2.2vw, 30px); display: grid; place-items: center; width: 170px; aspect-ratio: 250 / 96; padding: 10px 14px; border-radius: var(--r-inner); background: var(--white); }
.pf-hero-logo img { width: 100%; height: auto; }

/* ---------- Status badges: solid for available, outline for coming soon ---------- */
.pf-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 30px; padding: 3px 12px; border-radius: 9999px; font-family: var(--f-sans); font-size: 13px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.pf-badge--on { background: var(--r-blue); color: var(--white); }
.pf-badge--on::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.4L10 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.4L10 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.pf-badge--soon { background: transparent; color: var(--r-deep); box-shadow: inset 0 0 0 1.5px currentColor; }
.p-band--dark .pf-int--soon .pf-badge--soon { color: var(--white); }

/* ---------- Customers: card grid ---------- */
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 10px 10px 26px; border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.pf-card__logo { display: grid; place-items: center; aspect-ratio: 16 / 8; border-radius: var(--r-inner); background: var(--cream-2); }
.pf-card__logo img { width: 72%; height: auto; transition: transform 500ms var(--ease-lux); }
.pf-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding-inline: 16px; }
.pf-card__meta { font-size: 14px; font-weight: 700; color: var(--r-blue); }
.pf-card h3 { font-family: var(--f-display); font-weight: 900; font-size: 21px; line-height: 1.45; }
.pf-card p { font-family: var(--f-text); font-size: 16px; line-height: 1.7; color: var(--graphite); }
/* The one card with a story: the whole card is the link */
.pf-card__link { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; margin-inline: 16px; padding-top: 14px; border-top: 1px solid var(--ash); font-size: 15px; font-weight: 700; color: var(--r-blue); }
.pf-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.pf-card__link .round-arrow { width: 36px; height: 36px; background: var(--r-blue); color: var(--white); }
.pf-card__link .round-arrow svg { width: 16px; height: 16px; }
.pf-card__link:focus-visible { outline: none; }
.pf-card--story { box-shadow: inset 0 0 0 2px var(--r-blue); transition: box-shadow 300ms var(--ease-out), transform var(--t-press) var(--ease-out); }
.pf-card--story:has(.pf-card__link:focus-visible) { outline: 2px solid var(--white); outline-offset: 4px; }
.pf-card--story:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .pf-card--story:hover { box-shadow: inset 0 0 0 2px var(--r-blue), 0 30px 60px -34px rgba(3, 10, 40, 0.8); }
  .pf-card--story:hover .pf-card__logo img { transform: scale(1.04); }
  .pf-card--story:hover .round-arrow { transform: rotate(-45deg); }
}

/* ---------- Story: challenge, then solution ---------- */
.pf-cs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.pf-cs__item { display: flex; flex-direction: column; gap: 18px; }
.pf-cs__item > p { font-size: 18px; line-height: 1.8; }
.pf-cs ul { display: grid; gap: 12px; margin-top: 4px; }
.pf-cs li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.7; }
.pf-cs li::before { content: ""; width: 20px; height: 20px; margin-top: 5px; background: currentColor; -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTQyLjAwIDI0LjAwTDYuMDAgMjQuMDAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMzYuNzMgMzYuNzNMMTEuMjcgMTEuMjciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMjQuMDAgNDIuMDBMMjQuMDAgNi4wMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMS4yNyAzNi43M0wzNi43MyAxMS4yNyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPgo=") no-repeat center / contain; mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTQyLjAwIDI0LjAwTDYuMDAgMjQuMDAiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMzYuNzMgMzYuNzNMMTEuMjcgMTEuMjciIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSI2IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48cGF0aCBkPSJNMjQuMDAgNDIuMDBMMjQuMDAgNi4wMCIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMS4yNyAzNi43M0wzNi43MyAxMS4yNyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPgo=") no-repeat center / contain; }
.r-card--glass.pf-cs__item li { color: var(--on-dark-strong); }
.r-card--white.pf-cs__item li { color: var(--graphite); }
.r-card--white.pf-cs__item li::before { background: var(--r-blue); }
.pf-arrow-link { position: absolute; z-index: 3; top: 50%; left: 50%; width: 56px; height: 56px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; background: var(--r-blue); color: var(--white); box-shadow: 0 0 0 8px var(--r-deep); }
.pf-arrow-link svg { width: 22px; height: 22px; }

/* ---------- Story: results ---------- */
.pf-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-result { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.6vw, 34px); border-radius: var(--r-card); background: var(--white); box-shadow: inset 0 0 0 1.5px rgba(37, 99, 234, 0.3); }
.pf-result h3 { margin-top: 12px; font-family: var(--f-display); font-weight: 900; font-size: clamp(22px, 2vw, 27px); line-height: 1.4; }
.pf-result p { font-family: var(--f-text); font-size: 17px; line-height: 1.75; color: var(--graphite); }
.pf-result--blue { background: var(--r-blue); color: var(--white); box-shadow: none; }
.pf-result--blue .r-index { color: var(--white); }
.pf-result--blue p { color: var(--on-dark-strong); }

/* ---------- Trust: four pillars, the first one carries the photo ---------- */
.pf-pillars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.pf-pillars > :first-child { grid-row: span 3; }
.pf-pillars .r-photo { min-height: 100%; }
.pf-pillars .r-photo h3 { margin-top: auto; }
.pf-pillars .r-photo .r-card__lead { font-family: var(--f-text); font-size: 17px; line-height: 1.7; color: var(--on-dark-strong); }
.pf-pillars .r-card h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.4; }
.pf-pillar { flex-direction: row; align-items: flex-start; gap: 24px; }
.pf-pillar > div { display: grid; gap: 8px; }
.pf-pillar .r-index { flex: none; min-width: 48px; }

/* ---------- Trust: short compliance ---------- */
.pf-comply { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.pf-comply .r-head { margin-bottom: 0; }
.pf-comply__list { display: grid; gap: 12px; }
.pf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: center; padding: 22px 24px; border-radius: var(--r-inner); background: var(--white); box-shadow: inset 0 0 0 1px var(--ash); }
.pf-row h3 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.pf-row p { grid-column: 1 / -1; font-family: var(--f-text); font-size: 16px; line-height: 1.7; color: var(--graphite); }
.pf-contact-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--ink-strong); }
.pf-contact-line .p-underline { font-weight: 700; color: var(--r-blue); }
.pf-contact-line--dark { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--on-dark-line); color: var(--on-dark-strong); }
.pf-contact-line--dark .p-underline { color: var(--white); }

/* ---------- Integrations: nine cards, each names its category ---------- */
.pf-ints { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-int__cat { font-size: 14px; font-weight: 700; color: var(--r-blue); }
.pf-int--soon .pf-int__cat { color: var(--on-dark-soft); }
.pf-int { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-card); background: var(--white); color: var(--ink); }
.pf-int__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pf-int__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--r-deep); color: var(--white); font-family: var(--f-sans); font-weight: 900; font-size: 20px; line-height: 1; }
.pf-int h3 { font-family: var(--f-display); font-weight: 900; font-size: 21px; line-height: 1.4; }
.pf-int p { font-family: var(--f-text); font-size: 16px; line-height: 1.7; color: var(--graphite); }
.pf-int--soon { background: rgba(255, 255, 255, 0.06); color: var(--white); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }
.pf-int--soon p { color: var(--on-dark-strong); }
.pf-int--soon .pf-int__mark { background: var(--white); color: var(--r-deep); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-pillars { grid-template-columns: minmax(0, 1fr); }
  .pf-pillars > :first-child { grid-row: auto; }
  .pf-pillars .r-photo { min-height: 420px; }
  .pf-ints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pf-hero.r-page-hero--split .container { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .pf-cs, .pf-comply, .pf-results { grid-template-columns: minmax(0, 1fr); }
  .pf-arrow-link { display: none; }
}
@media (max-width: 640px) {
  .pf-grid, .pf-ints { grid-template-columns: minmax(0, 1fr); }
  .pf-hero-logo { width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-card--story { transition: none; }
  .pf-card--story:active { transform: none; }
}