/* Option-gated imagery approved for release. Keep original photo colors as
   requested by the owner, with the neutral and sage palette on the interface.
   Attachment originals, instructional previews and product artwork stay intact. */

.oki-preview .oki-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  min-height: 0;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.oki-preview .oki-hero-copy { min-width: 0; }
.oki-preview .okh-h1 { font-size: clamp(40px, 4.9vw, 68px); max-width: 14ch; }
.oki-preview .okh-sub { font-size: 18px; }
.oki-preview .okh-proof { margin-top: 36px; font-size: 11px; line-height: 1.7; letter-spacing: .1em; }
.oki-preview .okh-ctas { gap: 12px; margin-top: 28px; }
.oki-preview .okh-ctas .okh-btn { white-space: normal; padding: 14px 20px; font-size: 15px; text-align: center; }
.oki-preview .oki-hero-photo { position: relative; margin: 0; min-width: 0; align-self: stretch; }
.oki-preview .oki-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: 44% center;
  filter: none;
  border-radius: var(--ok-radius);
}
.oki-preview .oki-hero-photo figcaption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  margin: 0;
  padding: 7px 10px;
  background: #1E1E21;
  color: #FAF6EF;
  font: 500 11px/1.4 var(--ok-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.oki-preview .oki-explore-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.oki-preview .oki-explore-card,
.oki-preview .oki-article-card { min-width: 0; display: flex; flex-direction: column; color: var(--ok-text); text-decoration: none; }
.oki-preview .oki-explore-card img,
.oki-preview .oki-article-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--ok-border); border-radius: var(--ok-radius); }
.oki-preview .oki-explore-card img,
.oki-preview .oki-article-card img { filter: none; }
.oki-preview .oki-explore-title { font: 600 22px/1.3 var(--ok-serif); margin-top: 16px; }
.oki-preview .oki-explore-description { color: var(--ok-text-muted); font: 400 14px/1.6 var(--ok-sans); margin-top: 6px; }
.oki-preview .oki-explore-card:hover .oki-explore-title,
.oki-preview .oki-article-card:hover .oki-article-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.oki-preview .oki-article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.oki-preview .oki-article-title { font: 600 clamp(20px, 2vw, 25px)/1.3 var(--ok-serif); margin: 18px 0 12px; text-wrap: pretty; }
.oki-preview .oki-text-link { font: 600 14px/1.6 var(--ok-sans); color: var(--ok-link); text-decoration: underline; text-underline-offset: 4px; }
.oki-preview .oki-article-card > .oki-text-link { margin-top: auto; padding-top: 4px; }
.oki-preview .okh-sechead > .oki-text-link { flex: 0 0 auto; }
.oki-preview .oki-about { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: center; border-top: 1px solid var(--ok-border); border-bottom: 1px solid var(--ok-border); padding: 36px 0; }
.oki-preview .oki-about > img { display: block; width: 220px; height: 220px; object-fit: cover; border-radius: var(--ok-radius); }
.oki-preview .oki-about h2 { font: 700 clamp(30px, 3.5vw, 42px)/1.2 var(--ok-serif); color: var(--ok-text); margin: 10px 0 12px; }
.oki-preview .oki-about p { color: var(--ok-text-muted); font-size: 18px; line-height: 1.65; max-width: 58ch; margin: 0 0 20px; }

/* Resources uses real captures from the tested tools, not illustrative mockups. */
.oki-preview .oki-tool-preview { display: block; aspect-ratio: 4 / 3; margin: -12px -12px 24px; border: 1px solid var(--ok-border); border-radius: 6px; overflow: hidden; background: #FAF6EF; }
.oki-preview .oki-tool-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.oki-preview .ok-resources-cards-section .ok-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oki-preview .oki-download-feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 40px; align-items: center; box-shadow: none; }
.oki-preview .oki-download-copy { min-width: 0; }
.oki-preview .oki-download-preview { margin: 0; min-width: 0; }
.oki-preview .oki-download-preview a { display: block; color: var(--ok-link); }
.oki-preview .oki-download-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border: 1px solid var(--ok-border); border-radius: 6px; }
.oki-preview .oki-download-preview figcaption { margin-top: 12px; color: var(--ok-text-muted); font: 400 13px/1.6 var(--ok-sans); }
.oki-preview .oki-download-preview figcaption a { display: inline; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1000px) {
  .oki-preview .oki-explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .oki-preview .oki-download-feature { gap: 28px; }
}
@media (max-width: 860px) {
  .oki-preview .oki-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .oki-preview .okh-h1 { font-size: clamp(40px, 7.8vw, 64px); max-width: 16ch; }
  .oki-preview .oki-hero-photo { height: auto; }
  .oki-preview .oki-hero-photo img { min-height: 0; height: auto; max-height: none; aspect-ratio: 16 / 9; }
  .oki-preview .oki-download-feature { grid-template-columns: minmax(0, 1fr); }
  .oki-preview .oki-download-preview { max-width: 560px; width: 100%; }
}
@media (max-width: 640px) {
  .oki-preview .oki-article-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .oki-preview .oki-about { grid-template-columns: 112px minmax(0, 1fr); gap: 24px; align-items: start; }
  .oki-preview .oki-about > img { width: 112px; height: 140px; object-position: center; }
  .oki-preview .oki-about p { font-size: 16px; }
  .oki-preview .okh-sechead { gap: 16px; flex-wrap: wrap; }
  .oki-preview .okh-sechead h2 { white-space: normal; }
  .oki-preview .ok-resources-cards-section .ok-resources-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
  .oki-preview .oki-explore-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
  .oki-preview .oki-about { grid-template-columns: minmax(0, 1fr); }
  .oki-preview .oki-about > img { width: 140px; height: 140px; }
  .oki-preview .oki-hero-photo figcaption { left: 12px; bottom: 12px; }
}