/* Platform group: platform.html (overview) and the eight module pages built from one template.
   Loaded after pages.css. Uses only the tokens in raisan.css. */

/* ---------- Product screen inside a cut-out card (colour kept, unlike r-photo) ---------- */
.pl-shot {
  position: relative; overflow: hidden; display: block;
  padding: 10px; border-radius: var(--r-card);
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(11, 26, 92, 0.08), 0 40px 80px -48px rgba(11, 26, 92, 0.55);
}
.pl-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-card) - 10px); background: var(--cream-3); }
.p-band--dark .pl-shot { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.r-page-hero--split .pl-shot { aspect-ratio: 4 / 3.4; }

/* ---------- Page hero: two-line headline beside the screen ---------- */
.r-page-hero--split .r-h-page { font-size: clamp(36px, 3.9vw, 58px); line-height: 1.38; }

/* ---------- Flow diagram: donation → entry → budget and statements → board report ---------- */
.pl-flow__stage { padding-block: clamp(88px, 9vw, 128px) clamp(96px, 10vw, 136px); }
.pl-flow .r-head { margin-bottom: clamp(40px, 5vw, 72px); }
.pl-flow__chain {
  display: grid; align-items: stretch;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
}
.pl-node { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--r-card); color: var(--white); }
.pl-node::before, .pl-node::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.pl-node::before { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.24); }
.pl-node::after { background: var(--r-blue); box-shadow: 0 36px 70px -40px rgba(3, 10, 40, 0.9); }
.pl-node__step { align-self: flex-start; font-size: 15px; line-height: 1; opacity: 0.7; }
.pl-node h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(22px, 2vw, 28px); line-height: 1.35; }
.pl-node p { font-size: 15px; line-height: 1.7; color: var(--on-dark-strong); }

/* The artifact each step produces: schematic, no invented figures */
.pl-doc { margin-top: auto; display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); }
.pl-doc i { display: block; height: 8px; border-radius: 9999px; background: currentColor; opacity: 0.4; }
.pl-doc i:nth-child(1) { width: 72%; opacity: 0.85; }
.pl-doc i:nth-child(2) { width: 54%; }
.pl-doc i:nth-child(3) { width: 38%; }
.pl-doc--entry { gap: 10px; }
.pl-doc--entry i:nth-child(n) { width: 100%; opacity: 0.6; }
.pl-doc--entry i:nth-child(2) { width: 76%; justify-self: end; }
.pl-doc--bars { grid-auto-flow: column; align-items: end; height: 76px; gap: 8px; }
.pl-doc--bars i { width: auto !important; height: auto; border-radius: 6px 6px 3px 3px; opacity: 0.85; }
.pl-doc--bars i:nth-child(1) { height: 42%; }
.pl-doc--bars i:nth-child(2) { height: 68%; }
.pl-doc--bars i:nth-child(3) { height: 54%; }
.pl-doc--bars i:nth-child(4) { height: 88%; }

.pl-doc--report { gap: 10px; }
.pl-doc--report > span { display: grid; grid-auto-flow: column; align-items: end; gap: 6px; height: 34px; }
.pl-doc--report > span i { width: auto !important; border-radius: 4px 4px 2px 2px; opacity: 0.85; }
.pl-doc--report > span i:nth-child(1) { height: 50%; }
.pl-doc--report > span i:nth-child(2) { height: 80%; }
.pl-doc--report > span i:nth-child(3) { height: 64%; }
.pl-doc--report > i:last-child { width: 46%; }

/* Connector between two steps; the fill and the dot run from right to left, with the reading */
.pl-link { position: relative; align-self: center; height: 4px; margin-inline: 6px; border-radius: 9999px; background: rgba(255, 255, 255, 0.18); container-type: inline-size; }
.pl-link__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--white); transform-origin: 100% 50%; }
.pl-link__dot { position: absolute; top: 50%; right: -6px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18); translate: calc(-100cqi) 0; }


@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 901px) and (min-height: 760px) {
    /* The section pins while the four steps light up one after another */
    .pl-flow__track { height: 280vh; view-timeline: --pl-flow block; }
    .pl-flow__stage { position: sticky; top: 0; min-height: 100dvh; display: grid; align-content: center; padding-block: 88px 40px; }
    .pl-flow .r-head { gap: 14px; margin-bottom: 36px; }
    .pl-flow .p-h-lg { font-size: clamp(34px, 3.4vw, 50px); }
    .pl-flow .p-sub { font-size: 18px; }
    .pl-node { animation: pl-node-dim linear both; animation-timeline: --pl-flow; }
    .pl-node::after { animation: pl-node-fill linear both; animation-timeline: --pl-flow; }
    .pl-node > * { animation: pl-node-ink linear both; animation-timeline: --pl-flow; }
    .pl-node:nth-child(1), .pl-node:nth-child(1)::after, .pl-node:nth-child(1) > * { animation-range: contain 0% contain 8%; }
    .pl-node:nth-child(3), .pl-node:nth-child(3)::after, .pl-node:nth-child(3) > * { animation-range: contain 26% contain 34%; }
    .pl-node:nth-child(5), .pl-node:nth-child(5)::after, .pl-node:nth-child(5) > * { animation-range: contain 52% contain 60%; }
    .pl-node:nth-child(7), .pl-node:nth-child(7)::after, .pl-node:nth-child(7) > * { animation-range: contain 78% contain 86%; }
    .pl-link__fill { animation: pl-fill linear both; animation-timeline: --pl-flow; }
    .pl-link__dot { animation: pl-dot linear both; animation-timeline: --pl-flow; }
    .pl-link:nth-child(2) > * { animation-range: contain 8% contain 26%; }
    .pl-link:nth-child(4) > * { animation-range: contain 34% contain 52%; }
    .pl-link:nth-child(6) > * { animation-range: contain 60% contain 78%; }
  }
  @media (prefers-reduced-motion: no-preference) and ((max-width: 900px) or (max-height: 759px)) {
    .pl-node::after { animation: pl-node-fill linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
    .pl-node > * { animation: pl-node-ink linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
    .pl-link__fill { animation: pl-fill-y linear both; animation-timeline: view(); animation-range: entry 100% cover 60%; }
  }
  @keyframes pl-node-dim { from { transform: scale(0.96); } }
  @keyframes pl-node-fill { from { opacity: 0; transform: scale(0.94); } }
  @keyframes pl-node-ink { from { opacity: 0.55; } }
  @keyframes pl-fill { from { transform: scaleX(0); } }
  @keyframes pl-fill-y { from { transform: scaleY(0); } }
  @keyframes pl-dot { from { translate: 0 0; opacity: 0; } 12% { opacity: 1; } }
}

/* ---------- Module bento on the overview ---------- */
.pl-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(270px, auto); gap: 16px; }
.pl-bento > .r-cut { min-width: 0; }
.pl-bento .is-wide { grid-column: span 2; }
.pl-bento .is-big { grid-column: span 2; grid-row: span 2; }
.pl-bento .r-cut__body { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 32px); }
.pl-bento .r-card { gap: 12px; }
.pl-bento .r-card .r-card__title, .pl-bento .r-photo strong { font-family: var(--f-display); font-weight: 900; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.4; }
.pl-bento .r-card--white .r-card__title { color: var(--ink); }
.pl-bento .r-card__title { margin-top: auto; }
.pl-bento .r-card__text, .pl-bento .r-photo span:not(.r-pill) { font-size: 16px; line-height: 1.65; }
.pl-bento .r-photo span:not(.r-pill) { color: var(--on-dark-strong); font-family: var(--f-text); }
.pl-bento .is-big .r-card__title, .pl-bento .is-big strong { font-size: clamp(28px, 2.8vw, 38px); }
.pl-bento .is-big .p-pills { margin-top: 6px; }
.pl-bento .r-photo .p-pills li { background: rgba(255, 255, 255, 0.14); color: var(--white); font-family: var(--f-sans); }
.pl-bento .r-cut__body .r-pill { margin-bottom: auto; }
.pl-bento .r-card--white { box-shadow: inset 0 0 0 1px rgba(11, 26, 92, 0.08); }
.pl-bento a.r-cut { transition: transform 300ms var(--ease-out); }
.pl-bento a.r-cut:active { transform: scale(0.985); }

/* ---------- Module page: capabilities as sticky storytelling ---------- */
.pl-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.pl-story__media { position: sticky; top: 112px; }
.pl-story__media .pl-shot { aspect-ratio: 4 / 3.3; padding: 10px; }
.pl-story__media .pl-shot img {
  position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  opacity: 0; transform: scale(1.03);
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out);
}
.pl-story__media .pl-shot img.is-active { opacity: 1; transform: none; }
.pl-story__badge { display: grid; }
.pl-story__badge > span { grid-area: 1 / 1; opacity: 0; transform: scale(0.9); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.pl-story__badge > span.is-active { opacity: 1; transform: none; }
.pl-story__steps { counter-reset: none; }
.pl-step { display: flex; flex-direction: column; gap: 14px; padding-block: clamp(36px, 7vh, 72px); border-top: 1px solid var(--on-dark-line); opacity: 0.38; transition: opacity 400ms var(--ease-out); }
.pl-step:first-child { border-top: 0; padding-top: 8px; }
.pl-step.is-active { opacity: 1; }
.pl-step .num { align-self: flex-start; font-size: 15px; line-height: 1; padding: 8px 12px; border-radius: 9999px; box-shadow: inset 0 0 0 1.5px currentColor; }
.pl-step h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.4; }
.pl-step p { max-width: 30em; font-size: 18px; color: var(--on-dark-strong); }
.pl-step .pl-shot { display: none; aspect-ratio: 4 / 3; margin-top: 8px; }

/* ---------- Before / after comparison ---------- */
.pl-ba { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.pl-ba::before, .pl-ba::after { content: ""; grid-row: 1 / span var(--rows, 6); border-radius: var(--r-card); }
.pl-ba::before { grid-column: 1; background: var(--white); box-shadow: inset 0 0 0 1px rgba(11, 26, 92, 0.08); }
.pl-ba::after { grid-column: 2; background: var(--r-deep); }
.pl-ba__head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: clamp(24px, 2.6vw, 36px) clamp(24px, 2.8vw, 40px) 8px; font-family: var(--f-display); font-weight: 900; font-size: clamp(22px, 2vw, 28px); line-height: 1.4; }
.pl-ba__head--before { grid-column: 1; grid-row: 1; color: var(--ink-soft); }
.pl-ba__head--after { grid-column: 2; grid-row: 1; color: var(--white); }
.pl-ba__head--after img { height: 34px; width: auto; }
.pl-ba__row { display: contents; }
.pl-ba__cell { grid-row: var(--r); position: relative; z-index: 1; padding: 18px clamp(24px, 2.8vw, 40px); font-size: 17px; line-height: 1.7; }
.pl-ba__row:last-child .pl-ba__cell { padding-bottom: clamp(28px, 3vw, 40px); }
.pl-ba__cell + .pl-ba__cell { border: 0; }
.pl-ba__cell--before { grid-column: 1; color: var(--graphite); }
.pl-ba__cell--after { grid-column: 2; color: var(--white); font-family: var(--f-display); font-weight: 700; }
.pl-ba__cell--before::after { content: ""; position: absolute; inset-inline: clamp(24px, 2.8vw, 40px); bottom: 0; height: 1px; background: var(--ash); }
.pl-ba__cell--after::after { content: ""; position: absolute; inset-inline: clamp(24px, 2.8vw, 40px); bottom: 0; height: 1px; background: var(--on-dark-line); }
.pl-ba__row:last-child .pl-ba__cell::after { display: none; }
/* The arrow sits on the seam between the two cards, one per row */
.pl-ba__cell--after > .pl-ba__arrow {
  position: absolute; top: 50%; right: -36px; z-index: 2; width: 40px; height: 40px; margin-top: -20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--r-blue); color: var(--white); box-shadow: 0 0 0 6px var(--cream-2);
}
.pl-ba__arrow svg { width: 18px; height: 18px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pl-ba__cell--after { animation: pl-ba-in linear both; animation-timeline: view(); animation-range: entry 40% cover 35%; }
    .pl-ba__arrow { animation: pl-ba-arrow linear both; animation-timeline: view(); animation-range: entry 50% cover 40%; }
  }
  @keyframes pl-ba-in { from { opacity: 0.15; transform: translateX(-16px); } }
  @keyframes pl-ba-arrow { from { opacity: 0; transform: scale(0.6) rotate(-45deg); } }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .pl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-bento .is-big { grid-row: span 1; }
  .pl-bento .is-big .r-cut__body { min-height: 420px; }
}
@media (max-width: 900px) {
  .pl-flow__chain { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 520px; }
  .pl-link { width: 4px; height: 44px; margin: 6px auto; container-type: normal; }
  .pl-link__fill { transform-origin: 50% 0; }
  .pl-link__dot { display: none; }
  .pl-node { padding: 22px; }
  .pl-doc { max-width: 260px; }
  .pl-story__media { display: none; }
  .pl-step { opacity: 1; }
  .pl-step .pl-shot { display: block; }
}
@media (max-width: 760px) {
  .pl-ba { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pl-ba::before, .pl-ba::after { display: none; }
  .pl-ba__row:first-child { display: flex; gap: 12px; align-items: center; background: none; }
  .pl-ba__head { padding: 0 0 4px; font-size: 20px; }
  .pl-ba__head--after { color: var(--r-blue); }
  .pl-ba__head--before::after { content: "←"; margin-inline-start: 12px; font-family: var(--f-sans); color: var(--ink-soft); }
  .pl-ba__row { display: grid; margin-bottom: 14px; border-radius: var(--r-inner); overflow: hidden; }
  .pl-ba__cell { grid-column: 1; grid-row: auto; padding: 18px 20px; }
  .pl-ba__cell--before { background: var(--white); }
  .pl-ba__cell--after { background: var(--r-deep); padding-top: 26px; }
  .pl-ba__cell::after { display: none; }
  .pl-ba__row:last-child .pl-ba__cell { padding-bottom: 18px; }
  .pl-ba__cell--after > .pl-ba__arrow { top: -18px; right: 20px; margin-top: 0; width: 36px; height: 36px; transform: rotate(-90deg); box-shadow: none; }
  @supports (animation-timeline: view()) { .pl-ba__arrow { animation: none !important; } }
}
@media (max-width: 640px) {
  .r-page-hero--split .r-h-page { font-size: 31px; }
  .r .p-band:not(.b-cta) .p-h-lg { font-size: 30px; }
  .pl-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(210px, auto); }
  .pl-bento .is-wide, .pl-bento .is-big { grid-column: auto; }
  .pl-bento .is-big .r-cut__body { min-height: 380px; }
}