/* ============================================================================================
   MP-TRUST-01 — the money-pages trust block.

   Every rule is scoped to the block's own .okt namespace. Nothing here redefines h2, img, details,
   article, button or any existing card grid, and nothing touches d3/d7/d8.css, the shell, the widget
   or consent. Colours, radii and fonts come from the tokens those sheets already define.
   ============================================================================================ */

/* The photo column drives the closed height, so it sits at the lower end of the agreed 260-320px band
   and the outer padding is trimmed: measured 388px before, inside the 360px budget after. No font was
   reduced and the photograph is not cropped. */
.okt{padding:18px 0 22px}
.okt__h{font-size:24px;line-height:1.25;font-weight:800;color:var(--gs-navy,#0c1e3c);margin:0 0 14px}

/* desktop: a calm horizontal block — the photograph on the left, the facts on the right */
.okt__row{display:grid;grid-template-columns:minmax(260px,280px) minmax(0,1fr);gap:22px;align-items:center}
.okt__media{margin:0}
.okt__pic{display:block}
.okt__pic img{display:block;width:100%;height:auto;border-radius:14px}
.okt__body{min-width:0}
.okt__facts{margin:0;padding-left:20px;display:grid;gap:6px}
.okt__facts li{font-size:16px;line-height:1.45;color:var(--ok-ink,#1d2530)}
.okt__date{font-size:13px;line-height:1.4;color:var(--ok-muted,#5b6472);margin:10px 0 0}

/* the reviews live behind one closed disclosure, full width under the row */
.okt__rev{margin-top:16px;border:1px solid var(--ok-card-line,#e7ecf3);border-radius:14px;
  background:var(--ok-card-surface,#fff);overflow:hidden}
.okt__revsum{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:12px 16px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:800;color:var(--gs-navy,#0c1e3c)}
.okt__revsum::-webkit-details-marker{display:none}
.okt__revsum::after{content:"";flex:0 0 auto;width:10px;height:10px;margin-right:4px;
  border-right:2px solid var(--gs-teal,#0d7c6b);border-bottom:2px solid var(--gs-teal,#0d7c6b);
  transform:rotate(45deg);transition:transform .15s ease}
.okt__rev[open] .okt__revsum::after{transform:rotate(225deg)}
.okt__revsum:hover{background:var(--ok-card-surface-quiet,#f5f8fb)}
.okt__revsum:focus-visible{outline:2px solid var(--gs-teal,#0d7c6b);outline-offset:-2px}
.okt__revb{padding:4px 16px 16px;border-top:1px solid var(--ok-card-line,#e7ecf3)}
.okt__status{font-size:14px;color:var(--ok-muted,#5b6472);margin:10px 0}
.okt__slot{min-width:0}
.okt__glink{margin:12px 0 0}
.okt__glink a{display:inline-flex;align-items:center;min-height:44px;
  font-size:16px;font-weight:700;color:var(--gs-teal,#0d7c6b)}

/* the embed must never push the page sideways */
.okt__slot,.okt__slot *{max-width:100%}
.okt__rev{contain:paint}

@media(max-width:900px){
  .okt__row{grid-template-columns:1fr;gap:14px;align-items:start}
  /* the wide composition stays wide: the whole team is shown, nobody is cropped out */
  .okt__media{max-width:520px}
}
@media(max-width:640px){
  .okt{padding:14px 0 16px}
  .okt__h{font-size:21px;margin-bottom:10px}
  .okt__media{max-width:none}
  .okt__facts li{font-size:16px}
  .okt__revsum{min-height:44px;padding:11px 14px;font-size:15px}
  .okt__revb{padding:4px 14px 14px}
}
