/* ============ HOW IT WORKS ============
   Plateful's scroll-scrubbed "How it works" (landing-templates/mealbox), in Ojafi's colours and with
   three steps (Plan, Shop, Cook; no delivery). Layout and sizes follow Plateful at 1440 / tablet / phone.
   Everything is scoped under .ohw. The pinned stage sits under the sticky nav (--navh, set by main.js);
   .ohw-run is the scroll length the sequence plays over (see how.js for the frame mapping). */
.ohw {
  --ohw-or: #F2711E; --ohw-tint: #FFE7D6; --ohw-ink: #191C1F; --ohw-bg: #F7F2E8; --ohw-pin: var(--navh, 60px);
  position: relative; background: var(--ohw-bg); color: var(--ohw-ink); padding: 48px 40px 0;
  font-family: "Inter", system-ui, sans-serif; overflow-x: clip;
}
.ohw *, .ohw *::before, .ohw *::after { box-sizing: border-box; }
.ohw h2, .ohw h3, .ohw p { margin: 0; }
.ohw-wrap { position: relative; max-width: 1360px; margin: 80px auto 0; }
.ohw-h { text-align: center; font-size: 70px; color: var(--ohw-ink); }
.ohw-mark { display: block; height: 0; }
.ohw-stage {
  position: sticky; top: var(--ohw-pin); height: calc(100vh - var(--ohw-pin)); margin-top: -32px;
  display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center;
}
.ohw-run { height: 680vh; }
.ohw-col { display: flex; flex-direction: column; gap: 48px; }
.ohw-left { margin-top: -10vh; }
.ohw-right { margin-top: -10vh; } /* one step: level with the gap between Plan and Cook, so the list reads 1, 2, 3 */
.ohw-card { display: flex; gap: 16px; align-items: flex-start; opacity: .2; transition: opacity .4s ease; }
.ohw-card.is-on { opacity: 1; }
.ohw-num {
  flex: none; width: 43px; height: 43px; border-radius: 50%; background: var(--ohw-or); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 900 26px/1 "Phudu", "Arial Narrow", sans-serif;
}
.ohw-card h3 { font: 900 44px/44px "Phudu", "Arial Narrow", sans-serif; text-transform: uppercase; color: var(--ohw-ink); }
.ohw-card p { font-size: 19px; line-height: 26px; margin-top: 14px; color: #3D3A36; letter-spacing: -.01em; max-width: 300px; }
.ohw-mob { display: none; }
.ohw-mid { position: relative; height: 630px; }

/* Keyframed stage (how-rig-engine.js): the rig canvas is 2500 x 2600 units, scaled into the middle column in JS. */
.ohw .hr { position: absolute; left: 0; top: 0; width: 2500px; height: 2600px; transform-origin: 0 0; pointer-events: none; }
.ohw .lt { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; display: block; }
.ohw .lt-tx { font-family: "Inter", system-ui, sans-serif; white-space: pre; letter-spacing: -.01em; }
.ohw .lt-d { font-family: "Inter", system-ui, sans-serif; font-weight: 700 !important; letter-spacing: -.035em; }
.ohw [data-key="main:1"] .lt-d { font-family: "Phudu", "Arial Narrow", sans-serif; font-weight: 900 !important; letter-spacing: 0; }
.ohw img.lt-ph { border-radius: 16px; object-fit: cover; }
.ohw .lt-av { border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ohw-tint); overflow: hidden; }
.ohw .lt-av img { width: 62%; height: 62%; object-fit: contain; }
.ohw .lt-tag { position: absolute; transform: translateX(-50%); white-space: nowrap; border-radius: 40px; display: flex; align-items: center; font-family: "Inter", system-ui, sans-serif; font-weight: 600; letter-spacing: -.01em; }

/* Shopping list phone ("Shop"): built in the animation's own units (phone layer 1920 x 1920, row list
   1920 x 2450, each row 1220 x 301) and scaled to the stage in JS. */
.ohw .bk { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1920px; margin: -960px 0 0 -960px; transform-origin: 960px 960px; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.ohw .bk-bg, .ohw .bk-scr { position: absolute; left: 588.37px; top: 179.44px; width: 743.26px; height: 1561.13px; border-radius: 74.05px; background: var(--ohw-bg); }
.ohw .bk-scr { background: none; overflow: hidden; color: var(--ohw-ink); }
.ohw .bk-list { position: absolute; left: 8.83px; top: -62.44px; width: 780px; height: 1100px; transform: scale(.92); transform-origin: 0 0; }
.ohw .bk-title { position: absolute; left: 36.9px; top: 160.2px; font: 700 80px/1 "Inter", system-ui, sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.ohw .bk-h { position: absolute; left: 32.8px; top: 398.7px; font: 700 49.6px/1 "Inter", system-ui, sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.ohw .bk-groc { left: 33.2px; top: 953px; }
.ohw .bk-search { position: absolute; left: 33.3px; top: 273px; width: 711.4px; height: 84px; border-radius: 42px; background: #fff; }
.ohw .bk-search svg { position: absolute; left: 32.2px; top: 27px; width: 28px; height: 28px; fill: none; stroke: var(--ohw-or); stroke-width: 3.2; stroke-linecap: round; }
.ohw .bk-search span { position: absolute; left: 79.1px; top: 25px; font: 400 31.8px/1 "Inter", system-ui, sans-serif; color: #6B6660; white-space: nowrap; }
.ohw .bk-rc { position: absolute; top: 478.45px; width: 293px; height: 421px; transform: scale(1.05); transform-origin: 0 0; border-radius: 16px; background: var(--ohw-tint); overflow: hidden; }
.ohw .bk-rc1 { left: 31px; } .ohw .bk-rc2 { left: 356.9px; background: #FFD3B3; } .ohw .bk-rc3 { left: 682.96px; background: #fff; }
.ohw .bk-rc img { position: absolute; left: 15.75px; top: 15.5px; width: 261.5px; height: 254px; object-fit: cover; border-radius: 10px; max-width: none; }
.ohw .bk-rc b { position: absolute; left: 18px; right: 14px; top: 282px; font: 700 24px/1.1 "Inter", system-ui, sans-serif; letter-spacing: -.03em; }
.ohw .bk-rc small { position: absolute; left: 18px; top: 360px; font: 500 15px/1 "Inter", system-ui, sans-serif; color: #6B6660; white-space: pre; }
.ohw .bk-frame { position: absolute; left: 571.37px; top: 162.44px; width: 777.26px; height: 1595.13px; border: 34px solid #fff; border-radius: 91.05px; }
.ohw .bk-frame-top { clip-path: inset(0 0 1503.67px 0); }
.ohw .bk-g { position: absolute; left: 0; top: -381.67px; width: 1920px; height: 2450px; transform: scale(.833333); transform-origin: 960px 1225px;
  clip-path: path("M1338.2 427.5 L577 427.5 C538.9 427.5 508 466.9 508 515.5 L26.1 478.8 L28 2118.5 L508 2207.9 C508 2256.5 538.9 2295.9 577 2295.9 L1338.2 2295.9 C1376.3 2295.9 1407.2 2256.5 1407.2 2207.9 L2047.2 1964.8 L2048.2 473.1 L1407.2 515.5 C1407.2 466.9 1376.3 427.5 1338.2 427.5Z"); }
.ohw .bk-row { position: absolute; left: 350px; top: 0; width: 1220px; height: 301px; transform-origin: 610px 150.5px; }
.ohw .bk-card { position: absolute; left: 8px; top: 0; width: 1203.8px; height: 300.4px; border-radius: 57.6px; background: #fff; }
.ohw .bk-row img { position: absolute; max-width: none; }
.ohw .bk-row > b { position: absolute; left: 342px; top: 125.8px; font: 600 47.3px/1 "Inter", system-ui, sans-serif; letter-spacing: -.02em; color: #4A4641; white-space: nowrap; }
.ohw .bk-pill { position: absolute; left: 894px; top: 100px; width: 232.7px; height: 100.5px; border: 2.28px solid var(--ohw-or); border-radius: 50px; }
.ohw .bk-pill svg { position: absolute; left: 32.6px; top: 27.1px; width: 36.6px; height: 41.8px; fill: var(--ohw-or); }
.ohw .bk-pill i { position: absolute; left: 92.6px; width: 40px; top: 26.6px; text-align: center; font: 500 43px/1 "Inter", system-ui, sans-serif; font-style: normal; color: var(--ohw-ink); }
.ohw .bk-pill em { position: absolute; left: 162.9px; top: 33px; width: 30px; height: 30px; }
.ohw .bk-pill em::before, .ohw .bk-pill em::after { content: ""; position: absolute; left: 0; top: 12.5px; width: 30px; height: 5px; border-radius: 3px; background: var(--ohw-or); }
.ohw .bk-pill em::after { transform: rotate(90deg); }

/* Tablet and phone: heading and the current step stay pinned above the animation (Plateful's layout). */
@media (max-width: 991px) {
  .ohw-wrap { margin-top: 48px; }
  .ohw-h { position: sticky; top: calc(var(--ohw-pin) + 12px); text-align: left; font-size: 56px; z-index: 3; }
  .ohw-stage { display: block; top: calc(var(--ohw-pin) + 12px + 56px); height: auto; margin-top: 0; z-index: 2; }
  .ohw-run { height: 680vh; }
  .ohw-left, .ohw-right { display: none; }
  .ohw-mob { display: block; height: 176px; overflow: hidden; position: relative; }
  .ohw-mob .ohw-card { position: absolute; inset: 0; opacity: 0; transform: translateY(30px); transition: opacity .4s, transform .4s; height: 176px; padding-top: 31px; }
  .ohw-mob .ohw-card.is-on { opacity: 1; transform: none; }
  .ohw-mob .ohw-card h3 { font-size: 34px; line-height: 36px; }
  .ohw-mob .ohw-card p { margin-top: 12px; font-size: 18px; line-height: 25px; max-width: 520px; }
  .ohw-mid { height: 520px; }
}
@media (max-width: 767px) {
  .ohw { padding: 32px 20px 0; }
  .ohw-h { font-size: 40px; }
  .ohw-stage { top: calc(var(--ohw-pin) + 12px + 40px); }
  .ohw-run { height: 550vh; }
  .ohw-mid { height: 430px; }
}
@media (max-width: 479px) {
  .ohw { padding: 24px 17.6px 0; }
  .ohw-wrap { margin-top: 32px; }
  .ohw-stage { background: var(--ohw-bg); }
  /* the pinned heading gets a backing, so as the stage leaves at the end it slides under the heading, not through it */
  .ohw-h::before { content: ""; position: absolute; inset: -12px -24px 0; z-index: -1; background: var(--ohw-bg); }
  .ohw-mob, .ohw-mob .ohw-card { height: 196px; }
  .ohw-mob .ohw-card p { font-size: 17px; line-height: 24px; }
  .ohw-num { width: 38.4px; height: 38.4px; font-size: 23px; }
}