/* Existing how-it-works content, restyled with the purple design tokens. */
.how {
  position: relative;
  /* Pale lemon wash, deeper than the cream page — the cards sit a touch lighter */
  background: color-mix(in srgb, var(--lemon) 20%, var(--cream));
  padding-bottom: 0;   /* the forest base band closes the section instead */
  /* One frame size shared by all four previews so the phones (cards 1-3) and
     the cook photo (card 4) match in width and height. */
  --frame-w: min(224px, 96%);
  --frame-h: clamp(432px, 32vw, 480px);
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
  align-items: stretch;
  margin: 0 0 clamp(36px, 6vw, 72px);
  padding: 0;
}

.how-card {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--lemon) 26%, var(--white));
  border: 2px solid color-mix(in srgb, var(--lemon) 60%, var(--white));
  border-radius: 26px;
  padding: clamp(16px, 1.5vw, 22px);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.how-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.how-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s3); }
.how-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%;
  background: var(--lemon);
  color: var(--forest);
  font-weight: 700; font-size: 18px;
}
.how-card-title {
  margin: 0;
  font-size: clamp(19px, 1.4vw, 23px);
  font-weight: 700;
  color: var(--forest);
  letter-spacing: -.01em;
}

/* Shared preview viewport — clips previews that intentionally bleed/overflow.
   The floor (400px) is tall enough to show the whole Select-Portion card at
   every width; the phone screen is sized a touch taller so it always bleeds. */
.how-preview {
  position: relative;
  flex: 1 1 auto;
  min-height: clamp(400px, 27vw, 420px);
  overflow: hidden;
}

/* ----- 1 · Browse Dishes — phone mockup ----- */
.mock--phone { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; }
.phone {
  position: relative;
  width: var(--frame-w);
  padding: 9px 9px 0;
  background: #101010;
  border-radius: 34px 34px 22px 22px;
  box-shadow: 0 14px 34px rgba(17,17,17,.22);
}
.phone-notch {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  width: 80px; height: 17px;
  background: #101010; border-radius: 0 0 12px 12px;
}
.phone-screen {
  /* Neomorphism tokens — a bright white surface; the soft grey shadow
     carries the depth (the white highlight is imperceptible on white,
     which is expected for white-on-white neomorphism). */
  --neo-surface: #ffffff;
  --neo-dark: #e4e0d3;
  --neo-light: #ffffff;
  --neo-raise-sm: -2px -2px 4px var(--neo-light), 2px 2px 4px var(--neo-dark);
  --neo-raise: -3px -3px 6px var(--neo-light), 3px 3px 6px var(--neo-dark);
  --neo-inset: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 3px var(--neo-light);
  --neo-inset-sm: inset 1.5px 1.5px 3px var(--neo-dark), inset -1.5px -1.5px 2px var(--neo-light);
  position: relative;
  display: flex; flex-direction: column;
  height: var(--frame-h);   /* always a touch taller than the preview → bleeds off the bottom */
  background: var(--neo-surface);
  border-radius: 26px 26px 14px 14px;
  overflow: hidden;
}
.ps-status { display: flex; justify-content: space-between; align-items: center; padding: 5px 12px 2px; font-size: 9px; font-weight: 700; color: var(--ink); }
.ps-status-ic { width: 22px; height: 9px; border: 1.4px solid var(--ink); border-radius: 3px; position: relative; }
.ps-status-ic::after { content: ""; position: absolute; inset: 1.5px; right: 40%; background: var(--ink); border-radius: 1px; }
/* 1fr · auto · 1fr keeps the title optically centred in the app view no
   matter the width of the leading back button or trailing kebab. */
.ps-appbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 8px 14px 9px; background: var(--neo-surface); box-shadow: 0 3px 7px color-mix(in srgb, var(--neo-dark) 65%, transparent); position: relative; z-index: 2; }
.ps-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); flex: none; }
/* Leading back control — a soft raised neomorphic circle. */
.ps-appbar > .ps-ic { box-sizing: border-box; justify-self: start; width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.ps-title { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.15; margin: 0; }
.ps-title strong { font-size: 12px; font-weight: 700; color: var(--ink); }
.ps-title small { font-size: 8.5px; color: var(--ink-70); }
/* Trailing kebab — matching raised circle, dots drawn via box-shadow. */
.ps-kebab { position: relative; justify-self: end; width: 24px; height: 24px; border-radius: 50%; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); margin: 0; }
.ps-kebab::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.6px; height: 2.6px; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }
.ps-kebab::after { display: none; }
.ps-body { flex: 1; display: grid; grid-template-columns: 48px 1fr; min-height: 0; }
.ps-rail { display: flex; flex-direction: column; gap: 7px; padding: 9px 3px; background: color-mix(in srgb, var(--lemon) 9%, var(--white)); border-right: 1px solid color-mix(in srgb, var(--ink) 6%, var(--white)); }
.ps-cat { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7.5px; font-weight: 600; color: var(--ink-70); text-align: center; }
.ps-cat i { width: 24px; height: 24px; border-radius: 8px; background: color-mix(in srgb, var(--lemon) 28%, var(--white)); display: grid; place-items: center; color: var(--leaf); }
.ps-cat i svg { width: 15px; height: 15px; display: block; }
.ps-cat.is-active { color: var(--forest); }
.ps-cat.is-active i { background: var(--lemon); box-shadow: inset 0 0 0 1.5px var(--leaf); color: var(--forest); }
.ps-main { padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.ps-h { font-size: 12px; font-weight: 700; color: var(--ink); }
.ps-tabs { display: inline-flex; gap: 6px; }
.ps-tabs span { font-size: 9px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-70); }
.ps-tabs .is-active { background: var(--lemon); border-color: var(--leaf); color: var(--forest); }
.ps-sub { font-size: 9px; font-weight: 600; color: var(--ink-70); }
.ps-dishes { display: flex; flex-direction: column; gap: 9px; }
.ps-dish { display: flex; align-items: center; gap: 8px; }
.ps-thumb { width: 40px; height: 40px; border-radius: 10px; flex: none; overflow: hidden; }
.ps-thumb svg { width: 100%; height: 100%; display: block; }
.ps-dish-meta { display: flex; flex-direction: column; margin-right: auto; line-height: 1.2; }
.ps-dish-meta strong { font-size: 10px; font-weight: 700; color: var(--ink); }
.ps-dish-meta small { font-size: 8.5px; color: var(--ink-70); }
.ps-add { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; color: var(--forest); border: 1.5px solid var(--leaf); border-radius: 999px; padding: 4px 10px; }
.ps-add.is-added { background: var(--leaf); color: var(--cream); border-color: var(--leaf); }
.ps-add.is-added .ps-ic { width: 10px; height: 10px; color: var(--cream); }

/* ----- Shared app-screen body for the dish + schedule phones -----
   Cards 2 and 3 now sit inside the same .phone frame as card 1; .ps-screen
   holds their existing portion and schedule content inside the phone
   screen, and the soft bottom mask hints the screen scrolls on into the band. */
.ps-screen {
  flex: 1; min-height: 0;
  overflow: hidden;
  padding: 12px 15px;   /* generous side inset so content sits clear of the phone frame, like card 1 */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
}

/* ----- 2 · Select portion — dish detail -----
   Name + price share the top row; the description spans the full width on
   its own row so its line-wrapping never depends on the price width — the
   card height stays stable as the price changes with the people count. */
.pcard-top { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 4px; align-items: baseline; }
.pcard-head { display: contents; }
.pcard-name { grid-column: 1; grid-row: 1; font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.pcard-price { grid-column: 2; grid-row: 1; font-size: 13px; font-weight: 700; color: var(--ink); }
.pcard-desc { grid-column: 1 / -1; grid-row: 2; font-size: 9.5px; color: var(--ink-70); line-height: 1.35; }
.pcard-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.pc-ic { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--leaf); flex: none; }
.pcard-row { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--leaf); }
.pcard-drop { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 10px; font-weight: 700; color: var(--ink); }
.pcard-drop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard-drop-head > span { display: inline-flex; align-items: center; gap: 6px; }
.pcard-drop em { font-style: normal; font-weight: 600; color: var(--ink-70); }
.pcard-drop .pc-ic--chev { color: var(--ink-70); transition: transform .28s ease; }
.pcard-drop.is-open .pc-ic--chev { transform: rotate(180deg); }
.pcard-people {
  position: relative; z-index: 2;
  margin-top: 12px;
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--ink) 9%, var(--white));
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 11px;
}
.pcard-people-title { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.pcard-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pcard-chips span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 10px; font-size: 11px; font-weight: 700; color: var(--ink); }
.pcard-chips .is-sel { background: var(--lemon); border-color: var(--leaf); color: var(--forest); box-shadow: inset 0 0 0 1px var(--leaf); }
.pcard-addons { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.pcard-addons-h { font-size: 10.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.pcard-addons-h em { font-style: normal; font-weight: 500; font-size: 9px; color: var(--ink-70); margin-left: 6px; }
.addon { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; font-size: 10.5px; font-weight: 600; color: var(--ink); }
.addon em { font-style: normal; font-weight: 700; color: var(--ink-70); margin-left: auto; }
.addon.is-on { background: color-mix(in srgb, var(--lemon) 26%, var(--white)); }
.addon-check { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; flex: none; border: 1.5px solid var(--line); border-radius: 50%; background: var(--white); }
.addon-check .pc-ic { display: none; }
.addon.is-on .addon-check { background: var(--leaf); border-color: var(--leaf); }
.addon.is-on .addon-check .pc-ic { display: block; width: 10px; height: 10px; color: var(--cream); }

/* ----- 3 · Pick a time — schedule (shares the .ps-screen body above) ----- */
.scard-dates { display: flex; gap: 6px; margin-bottom: 13px; }
.scard-dates span { flex: 1; text-align: center; font-size: 9.5px; font-weight: 600; padding: 6px 4px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-70); }
.scard-dates .is-sel { background: var(--leaf); border-color: var(--leaf); color: var(--cream); }
.scard-label { font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-70); margin-bottom: 9px; }
.scard-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.scard-slots span { text-align: center; font-size: 8px; font-weight: 600; white-space: nowrap; padding: 7px 1px; border-radius: 9px; border: 1px solid var(--line); color: var(--ink); }
.scard-slots .is-sel { background: var(--lemon); border-color: var(--leaf); color: var(--forest); box-shadow: inset 0 0 0 1px var(--leaf); }

/* ----- Neomorphism — soft, tactile depth across the app view -----
   Raised surfaces get paired light/dark shadows; the selected / pressed
   state flips to an inset shadow so it reads as physically pushed in.
   Everything is scoped under .phone-screen so it only touches the mock. */
.phone-screen .ps-rail { background: var(--neo-surface); border-right: 0; }
.phone-screen .ps-cat i { background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .ps-cat.is-active i { background: color-mix(in srgb, var(--lemon) 20%, var(--neo-surface)); box-shadow: var(--neo-inset-sm); color: var(--forest); }

.phone-screen .ps-tabs span { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .ps-tabs .is-active { background: color-mix(in srgb, var(--lemon) 22%, var(--neo-surface)); color: var(--forest); box-shadow: var(--neo-inset-sm); }

.phone-screen .ps-thumb { box-shadow: var(--neo-raise-sm); }
.phone-screen .ps-add { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .ps-add.is-added { background: var(--leaf); color: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 15%, var(--leaf)), 0 1px 3px color-mix(in srgb, var(--leaf) 40%, transparent); }

.phone-screen .pcard-drop { border: 0; background: var(--neo-surface); box-shadow: var(--neo-inset-sm); }
.phone-screen .pcard-people { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise); }
.phone-screen .pcard-chips span { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .pcard-chips .is-sel { background: color-mix(in srgb, var(--lemon) 22%, var(--neo-surface)); color: var(--forest); box-shadow: var(--neo-inset-sm); }
.phone-screen .addon { background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .addon.is-on { background: color-mix(in srgb, var(--lemon) 20%, var(--neo-surface)); box-shadow: var(--neo-inset-sm); }
.phone-screen .addon-check { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .addon.is-on .addon-check { background: var(--leaf); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 16%, var(--leaf)); }

.phone-screen .scard-dates span { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .scard-dates .is-sel { background: var(--leaf); color: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 15%, var(--leaf)), 0 1px 3px color-mix(in srgb, var(--leaf) 40%, transparent); }
.phone-screen .scard-slots span { border: 0; background: var(--neo-surface); box-shadow: var(--neo-raise-sm); }
.phone-screen .scard-slots .is-sel { background: color-mix(in srgb, var(--lemon) 22%, var(--neo-surface)); color: var(--forest); box-shadow: var(--neo-inset-sm); }

/* ----- Interactive phone demos (cards 1-3) -----
   The mockups are decorative (aria-hidden) but respond to pointer taps so a
   visitor can try a mini version of the app. Pointer-only by intent: the
   mocks stay hidden from assistive tech, where each card's .visually-hidden
   step sentence is the single accessible label. */
.ps-cat, .ps-tabs span, .ps-add,
.pcard-chips span, .addon, .pcard-drop-head,
.scard-dates span, .scard-slots span { cursor: pointer; }

.ps-cat i, .ps-tabs span, .ps-add,
.pcard-chips span, .addon, .pcard-drop, .pcard-drop .pc-ic--chev,
.scard-dates span, .scard-slots span, .ps-thumb, .pcard-price {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
              box-shadow .18s ease, transform .12s ease;
}
.ps-tabs span:active, .ps-add:active,
.pcard-chips span:active, .addon:active,
.scard-dates span:active, .scard-slots span:active { transform: scale(.93); }
.ps-cat:active i { transform: scale(.9); }

@media (hover: hover) {
  .ps-tabs span:hover, .pcard-chips span:hover,
  .scard-dates span:hover, .scard-slots span:hover, .pcard-drop:hover { border-color: var(--leaf); }
  .ps-add:not(.is-added):hover { background: color-mix(in srgb, var(--leaf) 12%, var(--white)); }
  .addon:hover { background: color-mix(in srgb, var(--lemon) 16%, var(--white)); }
  .ps-cat:hover i { background: var(--lemon); }
  .mock--phone .phone { transition: transform .3s ease, box-shadow .3s ease; }
  .mock--phone:hover .phone { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(17,17,17,.26); }
}
@media (prefers-reduced-motion: reduce) { .mock--phone:hover .phone { transform: none; } }

/* freshly-added / price-change pop */
.ps-add.just-added, .pcard-price.bump { animation: ps-pop .3s ease; }
@keyframes ps-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ps-add.just-added, .pcard-price.bump { animation: none; } }

/* ingredients dropdown (screen 2) */
.pcard-drop .pc-ic--chev { transition: transform .22s ease; }
.pcard-drop.is-open .pc-ic--chev { transform: rotate(180deg); }
/* Two balanced columns via multicol so a wrapping item (e.g. "Ginger-garlic
   paste") keeps its own lines together and never knocks the neighbouring
   column out of vertical rhythm — bullets are top-aligned to the first line. */
.pcard-ings { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: 14px; overflow: hidden; max-height: 0; margin-top: 0; transition: max-height .28s ease, margin-top .28s ease; }
.pcard-ings.is-open { max-height: 170px; margin-top: 9px; }
.pcard-ings li { display: flex; align-items: flex-start; gap: 5px; font-size: 9px; font-weight: 600; color: var(--ink-70); line-height: 1.3; break-inside: avoid; margin-bottom: 6px; }
.pcard-ings li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--leaf); flex: none; margin-top: 3px; }
@media (prefers-reduced-motion: reduce) { .pcard-ings { transition: none; } }

/* ----- 4 · Cook arrives — Home Cook photo framed with no device bezel.
   Kept a touch shorter than the phone footprint so the whole photo (roti and
   all) fits inside the preview viewport rather than bleeding off the bottom
   and clipping the roti being cooked. Vertically centred in the preview. --- */
.mock--cook { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.how-cook {
  position: relative;
  width: var(--frame-w);
  height: clamp(356px, 25vw, 404px);     /* fits inside the preview so the roti stays visible */
  flex: none;
  border: 0;
  border-radius: 34px 34px 22px 22px;    /* mirror the phone frame's corners */
  box-shadow: 0 14px 34px rgba(17,17,17,.22);
}
.how-cook > img { border-radius: inherit; object-position: 50% 42%; }

/* Forest base band that closes the section, mirroring the reference */
.how-band { height: clamp(56px, 9vw, 120px); background: var(--forest); }

@media (prefers-reduced-motion: reduce) {
  .how-card { transition: none; }
  .how-card:hover { transform: none; }
}

/* ---------- Available areas (chips) ---------- */
.areas { background: var(--white); }
.area-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px;
  margin-bottom: var(--s3);
}
.area-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.area-chip .pin { width: 16px; height: 16px; color: var(--leaf); }


:root{--lemon:var(--lavender);--cream:var(--background);--white:var(--surface);--leaf:var(--primary);--forest:var(--primary-deep);--ink-70:var(--muted);--s3:24px;--shadow-md:none}
.how{background:var(--primary-soft);padding-bottom:72px}.how-band{display:none}.how-card{border:1px solid var(--line);background:var(--surface);border-radius:16px}.how-card:hover,.mock--phone:hover .phone{transform:none;box-shadow:none}.how-card-title{font-weight:600;color:var(--ink);font-size:19px}.how-num{background:var(--primary-soft);color:var(--primary-deep);font-weight:600}.how-steps{margin-bottom:0;list-style:none}.phone{box-shadow:none}.phone-screen{--neo-surface:var(--background);--neo-raise:none;--neo-raise-sm:none;--neo-inset:none;--neo-inset-sm:none;background:var(--background)}.phone-screen *{box-shadow:none!important}.phone-screen .ps-cat.is-active i,.phone-screen .ps-tabs .is-active,.phone-screen .pcard-chips .is-sel,.phone-screen .scard-slots .is-sel{background:var(--primary-deep);color:white}.ps-add,.scard-slots span,.scard-dates span,.pcard-chips span{border-radius:999px}.how-cook{border-radius:16px;box-shadow:none}.how-cook img{width:100%;height:100%;object-fit:cover}.how-card--cook .mock{width:100%}.how .section-head{justify-content:center}.ps-ic,.pc-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
@media(max-width:1000px){.how-steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.how-steps{grid-template-columns:1fr}.how{padding-bottom:56px}}

.how-swipe-hint{display:none}
.how-steps:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:600px){
  .how-swipe-hint{display:block;margin:-8px 0 16px;color:var(--muted);font-size:14px}
  .how-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:92%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;overscroll-behavior-inline:contain}
  .how-card{scroll-snap-align:start}
}