/* Home: styles added during the Ojafi rewrite for this group of sections (see src/COPY.md). */

/* 04 bento: four cards, one system (32px radius, 32px padding, Inter sentence-case titles), each showing a moment
   from the Ojafi app: the plan funnel's goal question, library recipes, a chat about a menu, the app itself. */
.s-ojafi .oj-bento { width: min(1296px, 100% - 40px); margin: 43px auto 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.s-ojafi .oj-card { position: relative; display: flex; flex-direction: column; gap: 28px; min-width: 0; padding: 32px; border-radius: 32px; overflow: hidden;
  background: #fff; color: #191C1F; box-shadow: 0 0 0 1px rgba(25, 28, 31, .05), 0 1px 2px rgba(25, 28, 31, .04); }
.s-ojafi .oj-card--quiz { grid-column: span 5; }
.s-ojafi .oj-card--recipes { grid-column: span 7; background: #F2711E; color: #fff; box-shadow: none; }
.s-ojafi .oj-card--ask { grid-column: span 7; background: #191C1F; color: #fff; box-shadow: none; }
.s-ojafi .oj-card--app { grid-column: span 5; padding-bottom: 0; }
.s-ojafi .oj-card-copy { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.s-ojafi .oj-card-title { font: 600 30px/1.1 "Inter", system-ui, sans-serif; letter-spacing: -.03em; text-transform: none; margin: 0; }
.s-ojafi .oj-card-title a { color: inherit; border-radius: 6px; }
.s-ojafi .oj-card-title a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.s-ojafi .oj-card-text { font: 400 16px/24px "Inter", system-ui, sans-serif; letter-spacing: -.01em; color: #5A5F66; }
.s-ojafi .oj-card--recipes .oj-card-text { color: rgba(255, 255, 255, .9); }
.s-ojafi .oj-card--ask .oj-card-text { color: rgba(255, 255, 255, .68); }

/* quiz: the funnel's goal question on the app's cream ground; answers are the onboarding AnswerOption slab
   (white face, 3px side in `border`, the chosen one in accent with its accentEdge side, radio mark at the end) */
.s-ojafi .oj-q { display: flex; flex-direction: column; gap: 16px; padding: 22px 20px 20px; border-radius: 24px; background: #F7F2E8; }
.s-ojafi .oj-q-h { font: 600 20px/26px "Inter", system-ui, sans-serif; letter-spacing: -.03em; color: #1C1C1C; }
.s-ojafi .oj-q-h span { color: #F2711E; }
.s-ojafi .oj-q-opts { display: flex; flex-direction: column; gap: 9px; }
.s-ojafi .oj-opt { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; border-radius: 16px; background: #fff; color: #1C1C1C;
  box-shadow: 0 3px 0 #E3E3E3; font: 500 16px/22px "Inter", system-ui, sans-serif; letter-spacing: -.03em; transition: transform .09s ease-out, box-shadow .09s ease-out; }
.s-ojafi .oj-opt span { flex: 1; min-width: 0; }
.s-ojafi .oj-opt i { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(28, 28, 28, .22); }
.s-ojafi .oj-opt:hover i { box-shadow: inset 0 0 0 1.5px #F2711E; }
.s-ojafi .oj-opt.on { background: #F2711E; color: #fff; box-shadow: 0 3px 0 #C2510A; }
.s-ojafi .oj-opt.on i { box-shadow: inset 0 0 0 1.5px #fff, inset 0 0 0 5px #F2711E, inset 0 0 0 9px #fff; }
.s-ojafi .oj-opt:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.s-ojafi .oj-opt:focus-visible { outline: 2px solid #191C1F; outline-offset: 3px; }
.s-ojafi .oj-card-cta { align-self: flex-start; margin-top: auto; }

/* recipes: library cards (photo, title, protein / kcal / minutes from the recipe's own figures). Three across when
   the card is wide, a list with thumbnails when it is not. */
.s-ojafi .oj-rcs-w { margin-top: auto; container-type: inline-size; }
.s-ojafi .oj-rcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.s-ojafi .oj-rc { display: flex; flex-direction: column; min-width: 0; border-radius: 22px; overflow: hidden; background: #fff; color: #1C1C1C;
  box-shadow: 0 2px 10px rgba(120, 48, 0, .16); }
.s-ojafi .oj-rc-img { position: relative; flex: none; }
.s-ojafi .oj-rc img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; background: #F5F5F5; }
.s-ojafi .oj-rc-time { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px;
  background: rgba(25, 28, 31, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: 500 13px/1 "Inter", system-ui, sans-serif; letter-spacing: -.02em; }
.s-ojafi .oj-rc-time svg { width: 11px; height: 11px; }
.s-ojafi .oj-rc-t { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 16px; }
.s-ojafi .oj-rc-t b { font: 600 16px/21px "Inter", system-ui, sans-serif; letter-spacing: -.03em; min-height: 42px; }
.s-ojafi .oj-rc-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.s-ojafi .oj-rc-meta span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 999px; background: #F5F5F5;
  font: 500 13px/1 "Inter", system-ui, sans-serif; letter-spacing: -.02em; color: #4F4F4F; white-space: nowrap; }
.s-ojafi .oj-rc-meta span.pro { background: #FFEBDD; color: #B8541A; }
.s-ojafi .oj-rc-meta svg { width: 12px; height: 12px; flex: none; fill: currentColor; }
@container (max-width: 559px) {
  .s-ojafi .oj-rcs { grid-template-columns: 1fr; gap: 10px; }
  .s-ojafi .oj-rc { flex-direction: row; align-items: center; gap: 14px; padding: 10px; border-radius: 20px; }
  .s-ojafi .oj-rc img { width: 84px; height: 84px; border-radius: 14px; }
  .s-ojafi .oj-rc-time { left: 4px; top: auto; bottom: 4px; height: 22px; padding: 0 7px; font-size: 12px; }
  .s-ojafi .oj-rc-t { flex: 1; min-width: 0; gap: 8px; padding: 0 4px 0 0; }
  .s-ojafi .oj-rc-t b { min-height: 0; }
}

/* ask: an app thread on ink, reusing the reel's bubbles (.rl-b, .rl-tail) and reply chips (.rl-chips) */
.s-ojafi .oj-chat { --u: 1px; margin-top: auto; display: flex; flex-direction: column; gap: 10px; font-family: "Inter", system-ui, sans-serif; letter-spacing: -.03em; }
.s-ojafi .oj-chat .rl-b { max-width: min(84%, 440px); letter-spacing: -.02em; }
.s-ojafi .oj-chat-photo { align-self: flex-start; width: min(78%, 380px); aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: #2A2D31; }
.s-ojafi .oj-chat-photo img { width: 100%; height: 100%; object-fit: cover; }
.s-ojafi .oj-chat .rl-chips { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.s-ojafi .oj-chat .rl-chips span { max-width: none; font-size: 15px; line-height: 20px; }

/* app: footer-style "Coming soon" pills, then the phone rising from the card's bottom edge */
.s-ojafi .oj-soon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: -8px; }
.s-ojafi .oj-soon span { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px; background: #191C1F; color: #fff;
  font: 500 14px/1 "Inter", system-ui, sans-serif; letter-spacing: -.02em; }
.s-ojafi .oj-soon span.android { background: #fff; color: #191C1F; box-shadow: inset 0 0 0 1px rgba(25, 28, 31, .14); }
.s-ojafi .oj-soon svg { width: 16px; height: 16px; flex: none; }
.s-ojafi .oj-soon em { font: 500 14px/1 "Inter", system-ui, sans-serif; font-style: normal; color: #7A7F86; margin-left: 4px; }
.s-ojafi .oj-phone { position: relative; flex: 1 0 280px; align-self: center; width: 280px; max-height: 420px; margin-top: auto; overflow: hidden; }
.s-ojafi .oj-phone img { position: absolute; left: 0; top: 0; max-width: none; }
.s-ojafi .oj-phone-frame { width: 280px; height: 571px; }
.s-ojafi .oj-phone-screen { left: 12px !important; top: 12px !important; width: 256px; height: 547px; border-radius: 44px; object-fit: cover; object-position: 50% 0; }

@media (max-width: 1199px) {
  .s-ojafi .oj-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .s-ojafi .oj-card--quiz, .s-ojafi .oj-card--recipes, .s-ojafi .oj-card--ask, .s-ojafi .oj-card--app { grid-column: auto; }
  .s-ojafi .oj-card-title { font-size: 28px; }
}
@media (max-width: 809px) {
  .s-ojafi .oj-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
  .s-ojafi .oj-card { padding: 24px; gap: 24px; border-radius: 28px; }
  .s-ojafi .oj-card-title { font-size: 26px; }
  .s-ojafi .oj-card-cta { align-self: stretch; }
  .s-ojafi .oj-phone { flex: none; height: 300px; }
  .s-ojafi .oj-chat .rl-b { max-width: 90%; }
  .s-ojafi .oj-chat-photo { width: 88%; }
}
@media (prefers-reduced-motion: reduce) {
  .s-ojafi .oj-opt { transition: none; }
  .s-ojafi .oj-opt:active { transform: none; }
}

/* 05 FAQ: closing next step under the chat thread, reusing .oz-btn */
.s-ojzoom .oz-faq-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 56px; }
.s-ojzoom .oz-faq-cta .oz-btn { padding: 0 32px; }
.s-ojzoom .oz-faq-alt { font: 600 15px/20px var(--oz-inter); letter-spacing: -.4px; color: #121010; text-decoration: underline; text-underline-offset: 3px; }
.s-ojzoom .oz-find a { color: inherit; }

/* 07 about, 09 reviews: closing next step, reusing .pill */
.s-coach .about-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: 48px; }
.s-coach .about-link { font-weight: 500; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.s-coach .tests-cta { display: flex; justify-content: center; margin-top: 48px; }

/* banner: the liquid-glass refraction filter painted a star-shaped highlight; a plain frosted blur instead */
.s-ojafi .oj-glass { backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; }