/* Colours, fonts and sizes taken from the Foodly Framer project (Footer component, Body 2 / Heading 5 text styles). */
:root {
  --cream: #fcf4e1;
  --orange: rgb(242, 163, 43);
  --ink: rgb(26, 26, 26);
  --body: "Karla", system-ui, sans-serif;
  --head: "General Sans", "Karla", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* empty page area until sections are added */
.content { min-height: 380px; }
/* borrowed sections bring their own backgrounds; let them span the full width */
.content > div { width: 100%; }

/* ---------- hero: Ojafi video shrinks into a phone and becomes the app ---------- */
.ohero { position: relative; height: 100vh; margin-top: calc(-1 * var(--navh, 60px)); background: #F7F2E8; }
.ohero-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
/* phase 1 is the wellness "focus" animation: full-bleed media, a cream frame scales in, two phrases slide in */
.hv { position: absolute; left: 0; top: 0; width: 100%; height: 105%; object-fit: cover; will-change: transform; }
.frame { position: absolute; left: 50%; top: 50%; width: 440px; height: 453px; translate: -50% -50%; opacity: 0; z-index: 2; will-change: width, height, transform; }
/* the frame is the Ojafi mark drawn as a white outline; the video stays sharp inside the letter (mask set in heroFrame) */
.frame-icon { display: block; width: 100%; height: 100%; overflow: visible; }
.hv-focus { -webkit-mask-image: url("./images/mark-mask.svg"), linear-gradient(#000 0 0); mask-image: url("./images/mark-mask.svg"), linear-gradient(#000 0 0); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-composite: exclude; }
.fw { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; font-family: "Lora", Georgia, serif; font-size: 72px; line-height: 70px; letter-spacing: -3.5px; color: #F7F2E8; opacity: 0; white-space: nowrap; }
.fw.l { right: calc(50% + 250px); text-align: right; } .fw.r { left: calc(50% + 250px); }
@media (max-width: 1199px) { .fw { font-size: 48px; line-height: 48px; } .fw.l { right: calc(50% + 190px); } .fw.r { left: calc(50% + 190px); } }

/* hero copy + paywall laurels (from the Repwise hero), shown over the video before the frame animation */
.hcopy { position: absolute; z-index: 3; left: 40px; bottom: max(80px, 11vh); width: 640px; color: #fff; }
.hcopy h1 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 56px; line-height: 1.04; letter-spacing: -1px; margin: 0 0 24px; }
.hcopy p { font-family: "Inter", system-ui, sans-serif; font-size: 18px; line-height: 1.4; max-width: 470px; margin: 0 0 24px; }
.hcopy-btn { display: inline-block; background: #c3ee5e; color: #0e0e0e; font-family: "Inter", system-ui, sans-serif; font-size: 16px; padding: 12px 20px; border-radius: 4px; }
/* focus: outside the frame the video blurs and dims; the frame's inside stays sharp (hole cut in heroFrame) */
.hv-focus { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; backdrop-filter: blur(var(--fb, 0px)) brightness(var(--fd, 1)); -webkit-backdrop-filter: blur(var(--fb, 0px)) brightness(var(--fd, 1)); }
.hv-dim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05) 40%, rgba(0,0,0,.5)); pointer-events: none; }
.hlaurels { position: absolute; z-index: 3; right: 40px; bottom: max(73px, calc(11vh - 7px)); display: flex; gap: 24px; }
.lb { display: flex; align-items: center; gap: 4px; color: #fff; }
.lb-sprig { width: 49.5px; height: 72px; overflow: visible; }
.lb-claim { display: flex; flex-direction: column; align-items: center; max-width: 150px; text-align: center; font-family: "Inter", system-ui, sans-serif; }
.lb-claim b { font-size: 18px; font-weight: 600; letter-spacing: -.72px; line-height: 22px; }
.lb-claim span { font-size: 13px; line-height: 17px; opacity: .85; letter-spacing: 1px; }
@media (max-width: 809px) {
  .hcopy { left: 20px; right: 20px; width: auto; bottom: 150px; } .hcopy h1 { font-size: 38px; } .hcopy p { font-size: 16px; }
  .hlaurels { left: 20px; right: 20px; bottom: 40px; justify-content: center; } .lb-sprig { width: 37px; height: 54px; }
}

@media (max-width: 809px) {
  .fw { font-size: 30px; line-height: 32px; letter-spacing: -1px; top: auto; bottom: 100px; translate: none; }
  .fw.l { right: auto; left: 16px; text-align: left; } .fw.r { left: auto; right: 16px; text-align: right; }
}

/* the Ojafi download banner waits until the hero has scrolled past, so it never covers the hero copy */
@media (max-width: 809px) { #oj-banner.oj-end { opacity: 0 !important; pointer-events: none; transform: translateY(16px); transition: opacity .3s, transform .3s; } }
#oj-banner.oj-wait { opacity: 0 !important; pointer-events: none; transform: translateY(16px); transition: opacity .3s, transform .3s; }

/* ===== reel: say it, snap it, ask it (layout from alma.food, chat UI from the Ojafi app) ===== */
.rl { --ink: #1C1C1C; background: #F7F2E8; color: #2A2320; padding: 112px 0 72px; font-family: "Inter", system-ui, sans-serif; }
.rl-head { max-width: 1080px; margin: 0 auto 28px; padding: 0 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.rl-head h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 64px; line-height: 1.05; letter-spacing: -.01em; margin: 0; }
.rl-head p { max-width: 340px; margin: 0 0 8px; font-size: 17px; line-height: 25px; letter-spacing: -.2px; color: #4F4F4F; }
.rl-people { display: flex; gap: 16px; padding: 8px max(16px, calc(50% - 540px)) 32px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.rl-people::-webkit-scrollbar { display: none; }
.rl-people.drag { cursor: grabbing; }
.rl-card { position: relative; flex: 0 0 clamp(290px, 28vw, 350px); aspect-ratio: 2 / 3; margin: 0; border-radius: 32px; overflow: hidden; user-select: none;
  box-shadow: 0 18px 28px -20px rgba(42, 35, 32, .5), inset 0 0 0 1px rgba(42, 35, 32, .06);
  opacity: 0; transform: translateY(32px) scale(.97); transition: opacity .6s ease var(--d), transform .9s cubic-bezier(.23, 1, .32, 1) var(--d); }
.rl-card.in { opacity: 1; transform: none; }
.rl-card > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transform-origin: 50% 0; transition: transform 1.2s cubic-bezier(.23, 1, .32, 1); pointer-events: none; }
.rl-card.in > img { transform: none; }
/* a soft scrim so the thread reads on any photo */
.rl-card::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(20, 16, 14, .45)); pointer-events: none; }
.rl-label { position: absolute; z-index: 2; top: 16px; left: 16px; background: #FFFEFC; border-radius: 16px; padding: 8px 14px; font-family: "Instrument Serif", Georgia, serif; font-size: 24px; line-height: 1; box-shadow: 0 10px 20px -12px rgba(42, 35, 32, .4); }

/* the thread: newest at the bottom, older lines slide up and fade under the label.
   Everything inside is the Ojafi app's own UI, set in app points: 1pt = --u, the thread
   standing in for a 380pt wide chat column. */
.rl-thread { position: absolute; z-index: 1; left: 4px; right: 4px; padding: 0 10px 2px; bottom: 14px; top: 72px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; container-type: inline-size;
  mask-image: linear-gradient(transparent, #000 48px); -webkit-mask-image: linear-gradient(transparent, #000 48px); }
.rl-thread > * { --u: calc(100cqw / 380); font-family: "Inter", system-ui, sans-serif; letter-spacing: -.03em; }
.rl-step { flex: none; }
.rl-step + .rl-step { margin-top: 4px; }
/* Bubbles at the app's absolute size (TextBubble: radius 18, padding 6 x 12, 22pt lines), not scaled with the card. Scaled
   down they became full pills under 36px tall, and a pill swallows the tail's curl. */
.rl-b { position: relative; max-width: 84%; padding: 6px 12px; border-radius: 18px; font-size: 15px; line-height: 22px; letter-spacing: -.2px; }
.rl-b.me { max-width: 78%; align-self: flex-end; background: #FF751F; color: #fff; }
.rl-b.them { align-self: flex-start; background: #EBEBEB; color: #1C1C1C; }
/* The tail at the app's own size (16 x 21pt, 6pt out, 1pt below), not scaled down with the card, so it reads as it does
   in the app and in the sign-up popup. */
.rl-tail { position: absolute; bottom: -1px; width: 16px; height: 21px; }
.rl-b.me .rl-tail { right: -6px; fill: #FF751F; }
.rl-b.them .rl-tail { left: -6px; transform: scaleX(-1); fill: #EBEBEB; }
.rl-b > span { position: relative; }
.rl-b .w { opacity: 0; transition: opacity .25s ease; }
.rl-b .w.on { opacity: 1; }
/* TypingBubble: three 8pt dots, 5pt apart, 22pt tall */
.rl-typing { display: flex; gap: calc(5 * var(--u)); align-items: center; height: calc(22 * var(--u)); padding: 0 calc(4 * var(--u)); }
.rl-typing i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #767676; opacity: .4; animation: rl-dot .8s ease-in-out infinite; }
.rl-typing i:nth-child(2) { animation-delay: .16s; } .rl-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes rl-dot { 40% { opacity: 1; transform: translateY(-2.5px); } 80%, 100% { opacity: .4; transform: none; } }
/* SentPhoto.tsx: at most 200pt wide, radius 12 */
.rl-photo { align-self: flex-end; width: calc(200 * var(--u)); aspect-ratio: 1064 / 1100; border-radius: calc(12 * var(--u)); overflow: hidden; }
.rl-photo img { width: 100%; height: 100%; object-fit: cover; }

/* entrances, as BubbleEntrance: theirs grows out of the tail's corner, yours pops in place */
.rl-step:not(.on) { display: none; }
.rl-step.on { animation: rl-in .5s cubic-bezier(.34, 1.4, .64, 1) both; transform-origin: left bottom; }
.rl-step.on.me, .rl-photo.on, .rl-chips.on { animation-name: rl-pop; animation-duration: .35s; transform-origin: right bottom; }
.rl-card-ui.on { transform-origin: 50% 100%; }
@keyframes rl-in { from { opacity: 0; transform: translateY(10px) scale(.86); } 60% { opacity: 1; } }
@keyframes rl-pop { from { transform: scale(.94); } }

/* app surfaces. Colours from theme/colors.ts lightColors, type from theme/typography.ts,
   and elevation.ts onImage (the app's container treatment over a photograph) */
.rl-card-ui { align-self: stretch; background: #fff; color: #1C1C1C; border-radius: calc(22 * var(--u)); transform-origin: 50% 100%;
  box-shadow: inset 0 3px 1.5px -3px rgba(255, 255, 255, .34), inset 0 -3px 1.5px -3px rgba(255, 255, 255, .16), 0 2px 10px rgba(26, 22, 18, .16); }
.rl-card-ui svg { display: block; flex: none; fill: currentColor; }
.rl-card-ui b { font-weight: 600; }
.rl-card-ui small { display: block; font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); color: #767676; white-space: nowrap; }
/* MealArtwork: radius 16 tile on bg, the meal's photo when there is one */
.rl-art { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(16 * var(--u)); overflow: hidden; background: #F5F5F5; }
.rl-art.lg { width: calc(60 * var(--u)); height: calc(60 * var(--u)); }
.rl-art img { width: 100%; height: 100%; object-fit: cover; }
/* MealReviewGroup: one card, a sitting heading with AddFoodControl, food rows, GlassActionFAB */
.rl-grp { padding-top: calc(8 * var(--u)); }
.rl-sit { padding: calc(12 * var(--u)) calc(18 * var(--u)) 0; }
.rl-sit-h { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.rl-sit-h b, .rl-food-t b { font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u)); }
.rl-add { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #FF751F; color: #fff; }
.rl-add svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.rl-food { position: relative; display: flex; align-items: center; gap: calc(14 * var(--u)); min-height: calc(60 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); }
.rl-food:not(.last)::after { content: ""; position: absolute; left: calc(72 * var(--u)); right: calc(18 * var(--u)); bottom: 0; height: 1px; background: rgba(28, 28, 28, .063); }
.rl-food-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.rl-food-t b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rl-food-t small { white-space: normal; }
.rl-glass { flex: none; display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: rgba(255, 117, 31, .92); color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -1px 1px rgba(255, 255, 255, .18); }
.rl-glass svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.rl-act { flex: none; font-style: normal; font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 600; color: #FF751F; padding: 0 calc(12 * var(--u)); }
.rl-fab-w { padding: calc(2 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); }
.rl-fab { display: flex; align-items: center; justify-content: center; height: calc(56 * var(--u)); border-radius: calc(28 * var(--u)); background: rgba(255, 117, 31, .92); color: #fff;
  font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: calc(-.6 * var(--u));
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, .5), inset 0 -1px 1.5px rgba(255, 255, 255, .2); }
/* FoodDraftCard: the single meal a reply produced */
.rl-draft { display: flex; flex-direction: column; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); }
.rl-draft-h { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.rl-draft-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.rl-draft-t b { font-size: calc(18 * var(--u)); line-height: calc(23 * var(--u)); }
.rl-pen { flex: none; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); color: #767676; }
.rl-pen svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.rl-draft-a { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.rl-del { flex: none; display: grid; place-items: center; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: #F5F5F5; color: #767676; }
.rl-del svg { width: calc(20 * var(--u)); height: calc(22 * var(--u)); }
.rl-log { flex: 1; display: flex; align-items: center; justify-content: center; min-height: calc(48 * var(--u)); border-radius: calc(28 * var(--u)); background: #FF751F; color: #fff;
  font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u)); font-weight: 600; }
/* MacroRow (compact): MACRO_TINT dot, caption figure */
.rl-macros { display: flex; align-items: center; gap: calc(12 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(18 * var(--u)); }
.rl-macros > span { display: flex; align-items: center; gap: calc(4 * var(--u)); }
.rl-macros i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; }
.rl-macros .p { background: #4C8DF6; } .rl-macros .c { background: #E8A33D; } .rl-macros .f { background: #E86A9A; }
/* NutritionOrange, layout "rows" (Home's Nutrition): total, then the orange beside three MacroTile rows */
.rl-nut { border-radius: calc(28 * var(--u)); padding: calc(18 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.rl-nut-t { display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.rl-nut-t b { font-size: calc(24 * var(--u)); line-height: calc(29 * var(--u)); font-weight: 700; letter-spacing: calc(-1.1 * var(--u)); }
.rl-nut-b { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.rl-wheel { width: calc(150 * var(--u)); height: calc(150 * var(--u)); color: #4F4F4F; }
.rl-wheel .sl { fill: rgba(28, 28, 28, .1); }
/* the app's selected slice (a finger on it): accent fill, icon in onAccent, and its row lit to match. Carbs, as the reply is about carbs. */
.rl-wheel .sl.on { fill: #F2711E; } .rl-wheel use.on { color: #fff; }
.rl-mrow.on::before { background: #B8541A; } .rl-mrow.on > span { background: #F2711E; } .rl-mrow.on svg, .rl-mrow.on em, .rl-mrow.on b, .rl-mrow.on b small { color: #fff; }
.rl-mrows { flex: 1; min-width: 0; height: calc(150 * var(--u)); display: flex; flex-direction: column; gap: calc(5 * var(--u)); }
.rl-mrow { position: relative; flex: 1; padding-bottom: calc(3 * var(--u)); }
.rl-mrow::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: calc(3 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(28, 28, 28, .12); }
.rl-mrow > span { position: relative; height: 100%; display: flex; align-items: center; gap: calc(7 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: #F6F6F6; }
.rl-mrow svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #767676; }
.rl-mrow em { flex: 1; min-width: 0; font-style: normal; font-size: calc(14 * var(--u)); font-weight: 500; color: #4F4F4F; white-space: nowrap; }
.rl-mrow b { font-size: calc(16 * var(--u)); line-height: calc(21 * var(--u)); white-space: nowrap; }
.rl-mrow b small { display: inline; color: #767676; font-weight: 500; font-size: calc(13 * var(--u)); }
/* ReplyChips: right-aligned, sunk ground, full radius, 10/16 padding, meta 16/22 in ink */
.rl-chips { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: calc(8 * var(--u)); width: 100%; }
.rl-chips span { max-width: 88%; background: #EBEBEB; border-radius: 999px; padding: calc(10 * var(--u)) calc(16 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 * var(--u)); color: #1C1C1C; }
@media (max-width: 809px) {
  .rl { padding: 72px 0 48px; }
  .rl-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rl-head h2 { font-size: 44px; }
  .rl-people { gap: 12px; padding-inline: 16px; mask-image: none; -webkit-mask-image: none; }
  .rl-card { flex-basis: min(80vw, 330px); border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-card, .rl-card > img { opacity: 1; transform: none; transition: none; }
  .rl-step.on { animation: none; }
  .rl-b .w { opacity: 1; }
  .rl-typing i { animation: none; }
}

/* ===== works with what you already wear (layout from alma.food) ===== */
.gw { background: #F7F2E8; color: #2A2320; padding: 64px 0 96px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; font-family: "Inter", system-ui, sans-serif; }
.gw-head { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 920px; margin: 0 auto 28px; padding: 0 16px; }
.gw-head p { max-width: 680px; }
.gw-health { width: 84px; height: 84px; border-radius: 20px; background: #fff; }
.gw-head h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -.01em; margin: 18px 0 10px; }
.gw-head p { margin: 6px 0 0; font-size: 18px; line-height: 27px; color: #6F6A64; }
.gw-row { display: flex; gap: 14px; width: max-content; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.gw-row[data-dir="1"] { margin-left: -900px; }
.gw-tile { flex: none; display: flex; align-items: center; gap: 16px; height: 96px; padding: 0 30px 0 18px; border-radius: 28px; color: #1C1C1C; font-size: 24px; font-weight: 500; letter-spacing: -.01em;  }
.gw-icon { width: 60px; height: 60px; border-radius: 14px; object-fit: cover; }
.gw-note { margin: 18px 16px 0; text-align: center; font-size: 14px; color: #6F6A64; }
@media (max-width: 760px) {
  .gw, .gw-row { gap: 10px; }
  .gw-tile { height: 72px; gap: 12px; padding: 0 22px 0 14px; border-radius: 22px; font-size: 18px; }
  .gw-icon { width: 44px; height: 44px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) { .gw-row { transform: none; } }

/* ===== one page ground: every borrowed template sits on the same Ojafi cream ===== */
:root { --oj-ground: #F7F2E8; }
body, .ohero, .rl, .gw,
.s-ojafi, .s-ojzoom, .s-ojzoom .oz-one, .s-ojzoom .oz-und, .s-ojzoom .oz-faq, .s-ojcode, .s-coach, .s-wellness, .s-yoga, .s-delivery, .s-burger, .s-coachapp,
.s-ojafi .oj-hero, .s-delivery .reels, .s-burger .app, .s-wellness .testi { background-color: var(--oj-ground); }

/* hero calls to action */
.hcopy-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hcopy-link { color: #fff; font: 600 16px/1 "Inter", system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.hcopy-link:hover { text-decoration-thickness: 2.5px; }

/* section CTAs: reel and wearables */
.rl-cta, .gw-cta { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; padding: 0 16px; }
.rl-cta span { font: 500 14px/1.3 "Inter", system-ui, sans-serif; color: #6F6A64; }
.rl-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 999px; background: #FF751F; color: #fff; font: 600 16px/1 "Inter", system-ui, sans-serif; letter-spacing: -.2px; box-shadow: 0 10px 22px -12px rgba(255, 117, 31, .8); transition: transform .2s, box-shadow .2s; }
.rl-btn:hover { box-shadow: 0 14px 26px -12px rgba(255, 117, 31, .9); }
.gw-cta { margin-top: 26px; }
.hcopy-btn { background: #FF751F; color: #fff; font-weight: 600; border-radius: 999px; padding: 14px 24px; box-shadow: 0 10px 22px -12px rgba(255, 117, 31, .8); }
.hcopy-btn:hover { background: #ff8436; }

/* hero: where the products and prices come from (replaces "No card needed") */
.hcopy-retail { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.hcopy-retail small { font-size: 13px; line-height: 1.3; letter-spacing: -.02em; color: rgba(255, 255, 255, .78); }
.hcopy-retail span { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hcopy-retail[hidden] { display: none; }
.hcopy-retail img { display: block; width: auto; opacity: .92; filter: brightness(0) invert(1); }
@media (max-width: 809px) { .hcopy-retail { margin-top: 18px; } .hcopy-retail span { gap: 20px; } .hcopy-retail img { transform: scale(.88); transform-origin: left center; } }