/* =========================================================
   PriceCheck SuperMarket – landing page
   Site: white mode, PriceCheck red. App mock-ups: the app's own
   palette (orange #e67e22, navy scan card, teal "best" colour).
   ========================================================= */

/* The app's icon fonts (subset to the glyphs used on this page) */
@font-face { font-family: "Ionicons"; src: url(data:font/woff;base64,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) format("woff"); font-display: block; }
@font-face { font-family: "MDI"; src: url(data:font/woff;base64,d09GRgABAAAAAAKMAAsAAAAAAnAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAACYAAAACkAAAAquPq49E9TLzIAAAHcAAAAQQAAAFZPs1vTY21hcAAAAiAAAAAnAAAAMAAtDwJnbHlmAAABCAAAAEwAAABMjiMn+mhlYWQAAAF8AAAANgAAADZZbXwAaGhlYQAAAbwAAAAgAAAAJAPGAb9obXR4AAABtAAAAAgAAAAIAgAAAGxvY2EAAAF0AAAABgAAAAYAJgAAbWF4cAAAAVQAAAAfAAAAIAE5AYVuYW1lAAACSAAAAAYAAAAGAAYAAHBvc3QAAAJQAAAAEAAAACAACAAAAAUAAAAAAcABVgADAAcACwAPABUAABMzFSM3FTM1OwEVIxUzFSMHJzcXNxdAgIArKlbV1dXVgEseLWIeAVWAVisrK4ArQEseLGEeAHicY2BkYGBgYqxk0GUAASYg5gJCBob/YD4DABh2AcAAAAAAAAAmAAAAAQAAAAEAAG8GrylfDzz1AAsCAAAAAAB8JZ3AAAAAAHwlncD///++AgQBxQAAAAgAAgAAAAAAAAAAAAACAAAAeJxjYGRgYDzw/wADAxPD/////zCxMABFUAATAKVrBoZ4nGNgZGJgnMDAysDA6MKYxsDA4A6lvzJIMrQwMDAxsDIzYAUBaa4pDA7/gYDxwP8DDHqMRxmcgMKMIDkAsjsNJwAAAHicY2BgYGJgYGABYhEGZgYuMM3DAAIyDBDAyMDPHgbGQDYAEdkBPgAAAAAAAAYAAHicY2BmgABWBqwAAADwAAl4nGNgZGBg4GJQY9BgYHJx8wlh4MtJLMljkGBgAYoz/P/PAAcAbZcFXQAAAA==) format("woff"); font-display: block; }

:root {
  color-scheme: light;
  --red: #d9190d;
  --red-grad: linear-gradient(135deg, #ee3a26 0%, #c90503 100%);
  --red-tint: #fff1ef;
  --green: #17a34a;
  --green-tint: #e8f8ee;

  --ink: #14161a;
  --ink-2: #2b2f36;
  --muted: #5b6370;
  --faint: #8b93a0;
  --line: #eceef1;
  --soft: #faf7f6;
  --bg: #ffffff;

  --r-lg: 28px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 26, .05), 0 4px 14px rgba(20, 22, 26, .05);
  --shadow-md: 0 2px 6px rgba(20, 22, 26, .05), 0 18px 40px rgba(20, 22, 26, .08);
  --shadow-red: 0 12px 30px rgba(217, 25, 13, .28);

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-app: -apple-system, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wrap: 1160px;

  /* App palette (from the app source) */
  --a-orange: #e67e22;
  --a-orange-dark: #c8660f;
  --a-orange-tint: #fff1e2;
  --a-orange-soft: #fdf1e5;
  --a-teal: #14a08f;
  --a-teal-soft: #e6f6f3;
  --a-teal-line: #bfe6df;
  --a-teal-ink: #0f766e;
  --a-navy: #16213a;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
svg { width: 1em; height: 1em; }
:focus-visible { outline: 3px solid rgba(217, 25, 13, .45); outline-offset: 3px; border-radius: 8px; }

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.wrap--narrow { width: min(800px, 100% - 40px); }
.grad { background: var(--red-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ---------- Buttons ---------- */
.btn {
  white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font: 700 16px/1 var(--font);
  border: 2px solid transparent; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s;
}
.btn--sm { padding: 11px 20px; font-size: 14.5px; }
.btn--block { width: 100%; }
.btn--red { background: var(--red-grad); color: #fff; box-shadow: var(--shadow-red); }
.btn--red:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(217, 25, 13, .36); }
.btn--teal { background: var(--a-teal); color: #fff; box-shadow: 0 10px 24px rgba(20, 160, 143, .3); }
.btn--teal:hover { background: #0f8b7c; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 160, 143, .38); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--red); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.btn--white:hover { transform: translateY(-2px); }
.ic-s { width: 18px; height: 18px; }

.stores-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.stores-cta--center { justify-content: center; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 11px 22px 11px 18px; border-radius: 16px;
  background: var(--ink); color: #fff; box-shadow: 0 10px 26px rgba(20, 22, 26, .22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.store-btn:hover { transform: translateY(-3px); background: #000; box-shadow: 0 16px 34px rgba(20, 22, 26, .3); }
.store-btn .ic { width: 30px; height: 30px; flex: none; }
.store-btn span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.store-btn small { font-size: 11.5px; font-weight: 500; opacity: .8; }
.store-btn b { font-size: 19px; font-weight: 700; letter-spacing: -.01em; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.nav.is-stuck { border-color: var(--line); box-shadow: 0 6px 24px rgba(20, 22, 26, .05); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 70px; }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.burger { display: none; position: relative; width: 44px; height: 44px; padding: 0; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; box-shadow: var(--shadow-sm); }
.burger span { position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .22s ease, top .22s ease, opacity .15s ease; }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.mmenu { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 6px 20px 16px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(20, 22, 26, .08); }
.mmenu[hidden] { display: none; }
.mmenu a { padding: 15px 4px; font-size: 17px; font-weight: 700; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.mmenu a:last-child { border-bottom: 0; }
.mmenu a:hover { color: var(--red); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -.01em; }
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand b { font-weight: 800; color: var(--red); }
.nav__links { display: flex; gap: 30px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.nav__links a { position: relative; padding: 6px 0; transition: color .15s; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .22s; }
.nav__links a:hover { color: var(--red); }
.nav__links a:hover::after { transform: scaleX(1); }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--red); }
.eyebrow--center { justify-content: center; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(217, 25, 13, .14); }
h1 { font-size: clamp(2.5rem, 4.7vw, 4rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.03em; font-weight: 800; }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); max-width: 33em; }
.sub { color: var(--muted); font-size: 1.1rem; max-width: 38em; margin: 16px auto 0; }

.section { padding-block: clamp(72px, 9vw, 120px); }
.section--soft { background: var(--soft); }
.head { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.head h2 { margin-top: 14px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 80px) 0 28px; overflow: hidden; }
.hero__glow { position: absolute; top: -10%; right: -10%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(232, 51, 32, .16), transparent 70%); transform: translate(20%, -25%); pointer-events: none; }
.hero::before { content: ""; position: absolute; left: -12%; bottom: -30%; width: 55vw; height: 55vw; max-width: 700px; max-height: 700px; background: radial-gradient(closest-side, rgba(23, 163, 74, .08), transparent 70%); pointer-events: none; }
.hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; }
.hero__copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; min-width: 0; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.hero__proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero__proof svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--green-tint); color: var(--green); }
.hero__note { position: relative; margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--faint); }
.hero__visual { position: relative; display: flex; justify-content: center; padding: 20px 0; }

.float { white-space: nowrap; position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: #fff; box-shadow: var(--shadow-md); border: 1px solid var(--line); animation: bob 6s ease-in-out infinite; }
.float b { display: block; font-size: 14.5px; line-height: 1.2; }
.float small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.float__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.float__ic svg { width: 22px; height: 22px; }
.float__ic--red { background: var(--red-grad); }
.float__ic--green { background: linear-gradient(135deg, #2ecc71, #17a34a); }
.float--a { top: 20%; right: calc(50% + 150px); }
.float--b { bottom: 6%; left: calc(50% + 110px); animation-delay: -3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* =========================================================
   Phone frame + app screens.
   Each .app is laid out at the iPhone's real 390×844 points
   using the app's own StyleSheet values, then scaled to fit.
   ========================================================= */
.phone {
  --k: calc((var(--pw) - 22) / 390);
  position: relative; flex: none; max-width: 100%;
  width: calc(var(--pw) * 1px); padding: 11px; border-radius: 48px;
  background: linear-gradient(145deg, #2a2d33, #0d0e10);
  box-shadow: 0 0 0 2px #3a3d44 inset, 0 40px 70px rgba(20, 22, 26, .25), 0 12px 24px rgba(20, 22, 26, .15);
}
.phone--hero { transform: rotate(3deg); }
.phone__island { position: absolute; z-index: 5; top: 20px; left: 50%; translate: -50% 0; width: calc(var(--pw) * .27px); height: calc(var(--pw) * .078px); border-radius: 99px; background: #050506; }
.screen { position: relative; overflow: hidden; border-radius: 38px; width: calc((var(--pw) - 22) * 1px); height: calc((var(--pw) - 22) / 390 * 844px); background: #fff; }
/* A real screenshot can replace a mock-up: <div class="screen"><img src="images/screen-1.png" alt=""></div> */
.screen > img:only-child { width: 100%; height: 100%; object-fit: cover; }

.app {
  position: absolute; top: 0; left: 0; width: 390px; height: 844px;
  transform: scale(var(--k)); transform-origin: 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  font-family: var(--font-app); color: #111; line-height: 1.3; text-align: left;
  -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
}
.app p { text-wrap: wrap; }
.ion, .mdi { font-style: normal; font-weight: normal; line-height: 1; display: inline-block; speak: never; }
.ion { font-family: "Ionicons"; }
.mdi { font-family: "MDI"; }

/* status bar + home indicator */
.sb { height: 54px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 8px 30px 0 50px; font: 600 17px/1 var(--font-app); color: #000; background: #fff; }
.sb--grey { background: #f8f9fa; }
.sb__r { display: flex; gap: 6px; font-size: 17px; }
.homebar { position: absolute; left: 50%; bottom: 8px; translate: -50% 0; width: 134px; height: 5px; border-radius: 3px; background: #111; }

/* native tab bar (black, orange active) */
.tabbar { flex: none; height: 83px; padding: 7px 18px 0; background: #000; display: flex; position: relative; }
.tabbar::after { content: ""; position: absolute; left: 50%; bottom: 8px; translate: -50% 0; width: 134px; height: 5px; border-radius: 3px; background: #fff; }
.tabbar span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: #999; }
.tabbar span i { font-size: 25px; }
.tabbar .on { color: var(--a-orange); }

/* MainNav */
.mnav { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #fff; }
.mnav img { width: 34px; height: 34px; }
.mnav b { font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: #111; }

/* HomeListScanCard */
.scancard { position: relative; overflow: hidden; flex: none; margin: 18px 16px 6px; padding: 18px; border-radius: 22px; background: var(--a-navy); text-align: center; }
.decor { position: absolute; border-radius: 50%; }
.decor--l { width: 150px; height: 150px; background: #26385f; right: -55px; top: -72px; }
.decor--s { width: 70px; height: 70px; background: var(--a-orange); opacity: .35; right: 34px; bottom: -48px; }
.scancard__t { position: relative; display: block; color: #fff; font-size: 21px; font-weight: 800; line-height: 26px; }
.scancard__s { position: relative; color: #bdc6d8; font-size: 13px; line-height: 19px; margin-top: 8px; }
.scancard__row { position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.btn-red, .btn-grey { height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 800; }
.btn-red { background: #e41f2b; color: #fff; padding: 0 19px; }
.btn-grey { background: #e5e7eb; color: #4b5563; padding: 0 17px; }
.btn-grey i { font-size: 15px; }

/* HomeChat */
.chat-head { flex: none; display: flex; align-items: center; gap: 11px; padding: 20px 18px 14px; background: #fff; }
.chat-head__ic { width: 36px; height: 36px; border-radius: 12px; background: var(--a-orange); color: #fff; display: grid; place-items: center; font-size: 17px; box-shadow: 0 4px 8px rgba(230, 126, 34, .35); }
.chat-head b { display: block; font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -.2px; }
.chat-head small { display: block; font-size: 11.5px; color: #9aa4b2; margin-top: 1px; }
.chat-head small.clear { color: var(--a-orange-dark); font-weight: 700; }
.intro { flex: none; padding: 4px 20px 22px; background: #fff; }
.intro p { font-size: 13.5px; color: #7b8695; line-height: 20px; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.starters span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--a-orange-tint); color: var(--a-orange-dark); font-size: 12.5px; font-weight: 700; }
.starters i { font-size: 14px; }
.composer-tall { flex: 1; display: flex; flex-direction: column; margin: 0 20px 14px; padding: 14px; border-radius: 20px; background: #f4f5f7; }
.composer-tall p { flex: 1; font-size: 14.5px; color: #a3adbb; line-height: 20px; }
.send { width: 40px; height: 40px; border-radius: 20px; background: var(--a-orange); color: #fff; display: grid; place-items: center; font-size: 19px; align-self: flex-end; flex: none; }
.send--off { background: #d7dde4; }
.thread { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 14px; background: #fff; }
.bub { border-radius: 20px; padding: 11px 14px; font-size: 14.5px; line-height: 20px; }
.bub--me { align-self: flex-end; max-width: 86%; background: var(--a-orange); color: #fff; border-bottom-right-radius: 6px; box-shadow: 0 5px 10px rgba(230, 126, 34, .25); }
.botrow { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.avatar { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--a-orange-tint); color: var(--a-orange); display: grid; place-items: center; font-size: 12px; margin-bottom: 2px; }
.bub--bot { background: #fff; color: #1f2937; line-height: 20.5px; border: 1px solid #eef0f3; border-bottom-left-radius: 6px; box-shadow: 0 4px 10px rgba(15, 23, 42, .05); }
.openlist { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-top: 6px; border-radius: 999px; background: var(--a-orange-tint); color: var(--a-orange-dark); font-size: 12.5px; font-weight: 800; }
.openlist i { font-size: 14px; }
.composer-row { flex: none; padding: 8px 12px 10px; background: #fff; box-shadow: 0 -3px 12px rgba(15, 23, 42, .06); }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: 24px; background: #f4f5f7; }
.composer p { flex: 1; min-width: 0; padding: 10px; font-size: 14.5px; color: #a3adbb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Shopping Lists tab */
.app--lists { background: #f4f5f7; }
.lhead { flex: none; padding: 14px 16px; background: #fff; border-bottom: 1px solid #eef0f2; font-size: 22px; font-weight: 800; color: #111; }
.lbody { flex: 1; padding: 16px; }
.actions { display: flex; gap: 8px; margin-bottom: 16px; }
.act { flex: 1; height: 40px; border-radius: 12px; background: #fff; border: 1.5px solid var(--a-orange); color: var(--a-orange); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 800; }
.act i { font-size: 17px; }
.act--pri { background: var(--a-orange); color: #fff; }
.lcard { display: flex; align-items: center; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 14px; background: #fff; }
.lcard__ic { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--a-orange-soft); color: var(--a-orange); display: grid; place-items: center; font-size: 22px; }
.lcard__i { flex: 1; min-width: 0; }
.lcard__i b { display: block; font-size: 16px; font-weight: 600; color: #111; }
.lcard__i small { display: block; font-size: 13px; color: #8a94a3; margin-top: 2px; }
.prog { padding: 3px 8px; border-radius: 10px; background: #f1f5f9; color: #64748b; font-size: 12px; font-weight: 700; }
.trash { flex: none; width: 34px; height: 34px; border-radius: 17px; background: #fef2f2; color: #dc2626; display: grid; place-items: center; font-size: 20px; }

/* List summary (SecondaryNav + OptimalCard + store grid) */
.app--summary { background: #f4f5f7; }
.snav { flex: none; display: flex; align-items: center; min-height: 56px; padding: 12px 16px; background: #f8f9fa; }
.snav__back { font-size: 24px; color: #333; padding-right: 12px; }
.snav__title { font-size: 20px; font-weight: 700; color: #000; }
.snav__edit { width: 44px; text-align: center; font-size: 18px; color: #6b7280; }
.snav__trash { margin-left: auto; padding: 8px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; font-size: 20px; display: grid; place-items: center; }
.subh { flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px 8px; background: #f8f9fa; }
.subh > div { flex: 1; min-width: 0; }
.sub__t { font-size: 13px; color: #64748b; }
.sub__s { display: flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: var(--a-teal-ink); }
.sub__s i { font-size: 14px; color: var(--a-teal); }
.edit-pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 16px; background: #fff; border: 1px solid #e2e8f0; color: #334155; font-size: 12px; font-weight: 600; }
.edit-pill i { font-size: 15px; }
.sum-body { flex: 1; padding: 16px; }

.opt { background: #fff; border-radius: 18px; padding: 14px; border: 1.5px solid var(--a-teal-line); }
.opt__head { display: flex; align-items: center; gap: 8px; }
.opt__head > b { flex: 1; font-size: 16px; font-weight: 800; color: #0f172a; }
.star { flex: none; width: 22px; height: 22px; border-radius: 11px; background: var(--a-teal); color: #fff; display: grid; place-items: center; font-size: 12px; }
.savebadge { padding: 4px 8px; border-radius: 8px; background: var(--a-teal-soft); color: var(--a-teal-ink); font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.opt__blurb { font-size: 12.5px; line-height: 18px; color: #64748b; margin: 8px 0 6px; }
.leg { margin-top: 8px; padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px solid #eef2f6; }
.leg__head { display: flex; align-items: center; gap: 6px; }
.leg__head b { font-size: 14px; font-weight: 700; color: #0f172a; }
.leg__n { font-size: 12px; color: #94a3b8; margin-left: -6px; white-space: pre; }
.leg__t { margin-left: auto; font-size: 15px; font-weight: 800; color: #0f172a; }
.leg__items { font-size: 12.5px; color: #475569; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.leg__fee { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }
.opt__total { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eef2f6; }
.opt__total span { font-size: 13px; font-weight: 600; color: #475569; }
.opt__total b { font-size: 22px; font-weight: 800; color: #0f172a; }
.teal-btn { margin-top: 12px; min-height: 50px; border-radius: 12px; background: var(--a-teal); color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 800; }
.teal-btn i { font-size: 18px; }
.lbl-plain { margin: 20px 0 10px; font-size: 13.5px; font-weight: 700; color: #64748b; }
.sgrid { display: flex; gap: 10px; }
.scard { flex: 1; padding: 12px; border-radius: 14px; background: #fff; border: 1.5px solid #eef0f3; }
.scard--best { border-color: var(--a-teal); }
.scard__h { display: flex; align-items: center; gap: 6px; }
.scard__h span:not(.badge) { flex: 1; font-size: 12.5px; font-weight: 600; color: #334155; }
.scard__h i { font-size: 16px; color: #b6bec8; }
.scard--best .scard__h i { color: var(--a-teal); }
.scard > b { display: block; margin-top: 8px; font-size: 20px; font-weight: 800; color: #0f172a; }
.scard small { display: block; margin-top: 2px; font-size: 11px; color: #94a3b8; }

/* Store letter badge (StoreBadge in the app) */
.badge { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--c); color: #fff; font: 800 10px/1 var(--font-app); }

/* ---------- Store strip ---------- */
.strip { padding: 44px 0 48px; border-block: 1px solid var(--line); background: #fff; }
.strip__label { text-align: center; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 28px; }
.strip__logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; }
.strip__logos li { display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-weight: 700; font-size: 14.5px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.strip__logos li:hover { transform: translateY(-3px); border-color: rgba(217, 25, 13, .3); box-shadow: var(--shadow-md); }
.strip__logos img { height: 40px; width: auto; max-width: 64px; object-fit: contain; border-radius: 8px; }

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 16px 30px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.step__n { position: absolute; z-index: 2; top: -14px; left: 50%; translate: -50% 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.step h3 { margin-bottom: 10px; padding-inline: 12px; }
.step p { color: var(--muted); font-size: 15.5px; padding-inline: 12px; }

.ill { position: relative; height: 200px; margin-bottom: 24px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #fff4f2 0%, #fbf8f7 60%, #f7f3f2 100%); border: 1px solid #f1e9e7; }

/* 1 · connect */
.ill__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.ill__lines path { fill: none; stroke: rgba(217, 25, 13, .4); stroke-width: 2; stroke-dasharray: 5 6; vector-effect: non-scaling-stroke; animation: dash 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }
.hub { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 78px; height: 78px; border-radius: 24px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(20, 22, 26, .12); border: 1px solid var(--line); }
.hub img { width: 56px; height: 56px; }
.node { position: absolute; translate: -50% -50%; width: 56px; height: 56px; border-radius: 16px; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.node img { width: 40px; height: 36px; object-fit: contain; border-radius: 6px; }
.n1 { left: 20%; top: 24%; } .n2 { left: 80%; top: 24%; } .n3 { left: 20%; top: 76%; } .n4 { left: 80%; top: 76%; }
.tick { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.tick svg { width: 12px; height: 12px; }

/* 2 · scan */
.frame {
  position: absolute; left: 50%; top: 16px; translate: -50% 0; width: 178px; height: 168px; padding: 9px;
  --c: var(--red);
  background:
    linear-gradient(var(--c), var(--c)) left top / 22px 3px, linear-gradient(var(--c), var(--c)) left top / 3px 22px,
    linear-gradient(var(--c), var(--c)) right top / 22px 3px, linear-gradient(var(--c), var(--c)) right top / 3px 22px,
    linear-gradient(var(--c), var(--c)) left bottom / 22px 3px, linear-gradient(var(--c), var(--c)) left bottom / 3px 22px,
    linear-gradient(var(--c), var(--c)) right bottom / 22px 3px, linear-gradient(var(--c), var(--c)) right bottom / 3px 22px;
  background-repeat: no-repeat;
}
.slip {
  height: 100%; padding: 10px 12px 14px; background: #fff; color: #3b3f46;
  font: 500 10px/1.6 var(--font-mono); box-shadow: 0 6px 16px rgba(20, 22, 26, .1);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
}
.ill p { font-size: inherit; color: inherit; padding: 0; }
.slip p { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.slip__h { justify-content: center !important; font-weight: 600; letter-spacing: .2em; margin-bottom: 6px; }
.slip__t { margin-top: 5px; padding-top: 4px; border-top: 1px dashed #c9ccd2; font-weight: 600; }
.beam { position: absolute; left: 4px; right: 4px; top: 12px; height: 2px; border-radius: 2px; background: var(--red); box-shadow: 0 0 12px 3px rgba(217, 25, 13, .35); animation: beam 2.4s ease-in-out infinite alternate; }
@keyframes beam { to { top: 152px; } }
.matched { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 7px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); font-size: 12.5px; font-weight: 700; }
.matched svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--green); color: #fff; }

/* 3 · compare */
.cmp { position: absolute; inset: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 7px; text-align: left; }
.cmp__row { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.cmp__row .badge { width: 20px; height: 20px; font-size: 11px; }
.cmp__s { flex: 1; font-weight: 600; }
.cmp__row b { font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp__row--best { border: 1.5px solid var(--a-teal); background: #f2fbf9; }
.cmp__tag { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--a-teal-ink); background: #d7f2ec; padding: 2px 6px; border-radius: 6px; }
.cmp__btn { margin-top: 3px; height: 38px; border-radius: 12px; background: var(--red-grad); color: #fff; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 800; box-shadow: 0 8px 18px rgba(217, 25, 13, .28); }
.cmp__btn svg { width: 17px; height: 17px; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.card { grid-column: span 2; position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(217, 25, 13, .22); }
.card h3 { margin: 18px 0 8px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card__ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--red-tint); color: var(--red); }
.card__ic svg { width: 26px; height: 26px; }
.card--xl { grid-column: span 4; display: grid; grid-template-columns: 1fr minmax(0, 330px); gap: 24px; align-items: center; }
.card--xl h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); letter-spacing: -.025em; }
.card--red { background: var(--red-grad); color: #fff; border: 0; box-shadow: var(--shadow-red); }
.card--red:hover { border: 0; box-shadow: 0 20px 44px rgba(217, 25, 13, .38); }
.card--red p { color: rgba(255, 255, 255, .9); }
.card--red::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; font-weight: 700; font-size: 12.5px; }
.chip svg { width: 16px; height: 16px; }
.chip--w { background: rgba(255, 255, 255, .18); color: #fff; }
.mini { position: relative; z-index: 1; transform: rotate(-2deg); filter: drop-shadow(0 18px 30px rgba(110, 0, 0, .3)); }
.mini .leg__fee { font-size: 11.5px; color: #94a3b8; }
.app--inline { position: static; width: auto; height: auto; transform: none; display: block; overflow: visible; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags span { font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 99px; background: var(--soft); border: 1px solid var(--line); color: var(--ink-2); }

/* ---------- Showcase ---------- */
.show { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; }
.show__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.show__item--mid { margin-top: 56px; }
.show figcaption { text-align: center; }
.show figcaption b { display: block; font-size: 1.12rem; letter-spacing: -.01em; }
.show figcaption span { color: var(--muted); font-size: 15px; }

/* ---------- Band ---------- */
.band { position: relative; overflow: hidden; background: var(--red-grad); color: #fff; padding-block: clamp(56px, 7vw, 88px); }
.band__glow { position: absolute; inset: 0; background: radial-gradient(60% 120% at 85% 0%, rgba(255, 255, 255, .22), transparent 60%), radial-gradient(40% 80% at 0% 100%, rgba(0, 0, 0, .18), transparent 70%); pointer-events: none; }
.band__in { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px, 4vw, 48px); }
.band__mark { background: #fff; border-radius: 30px; padding: 10px; box-shadow: 0 16px 40px rgba(80, 0, 0, .35); width: 120px; height: 120px; }
.band__kick { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; }
.band h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); max-width: 18em; }
.band p:not(.band__kick) { margin-top: 14px; opacity: .92; max-width: 40em; }

/* ---------- Plans ---------- */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); }
.plan h3 { font-size: 1.15rem; font-weight: 800; color: var(--ink-2); }
.plan__price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan ul { display: grid; gap: 11px; margin: 10px 0 0; flex: 1; align-content: start; font-weight: 600; font-size: 14.5px; line-height: 1.4; }
.plan li { display: flex; align-items: flex-start; gap: 10px; }
.plan li svg { width: 21px; height: 21px; padding: 4px; border-radius: 50%; background: var(--green-tint); color: var(--green); flex: none; }
.plan li.no { color: var(--muted); font-weight: 500; }
.plan li.no svg { background: #f1f2f4; color: #9aa1ad; }
.plan--pop { border: 2px solid var(--red); box-shadow: var(--shadow-red); }
.plan--pop h3 { color: var(--red); }
.plan__flag { position: absolute; top: -14px; left: 26px; background: var(--red-grad); color: #fff; font-weight: 700; font-size: 12.5px; padding: 6px 14px; border-radius: 99px; box-shadow: 0 6px 16px rgba(217, 25, 13, .35); }
.plans__how { display: flex; align-items: center; gap: 14px; max-width: 640px; margin: 36px auto 0; padding: 16px 20px; border-radius: 18px; background: #f2fbf9; border: 1.5px solid var(--a-teal-line); font-size: 15.5px; color: var(--ink-2); }
.plans__how b { color: var(--ink); }
.plans__how-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--a-teal); color: #fff; display: grid; place-items: center; }
.plans__how-ic svg { width: 18px; height: 18px; }
.plans__fine { text-align: center; max-width: 680px; margin: 18px auto 0; font-size: 13px; color: var(--faint); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: rgba(217, 25, 13, .35); box-shadow: var(--shadow-md); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--red-tint); color: var(--red); flex: none; transition: transform .25s, background .25s, color .25s; }
.faq details[open] summary svg { transform: rotate(180deg); background: var(--red); color: #fff; }
.faq summary:hover { color: var(--red); }
.faq p { padding: 0 24px 22px; color: var(--muted); font-size: 16px; max-width: 42em; }
.faq p a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Final CTA ---------- */
.final { position: relative; padding-block: clamp(72px, 9vw, 120px); text-align: center; overflow: hidden; background: #fff; }
.final::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% -40%; width: 900px; max-width: 100%; height: 700px; background: radial-gradient(closest-side, rgba(232, 51, 32, .13), transparent 70%); pointer-events: none; }
.final__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.final__icon { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 18px 40px rgba(23, 163, 74, .35); margin-bottom: 6px; }
.final p { color: var(--muted); font-size: 1.15rem; margin-bottom: 8px; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--soft); padding-block: 44px; }
.foot__in { display: grid; gap: 16px; justify-items: center; text-align: center; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; font-weight: 600; font-size: 14.5px; color: var(--ink-2); }
.foot nav a:hover { color: var(--red); }
.foot p { font-size: 12.5px; color: var(--faint); max-width: 620px; }

/* ---------- Reveal (content is visible at rest; JS only adds a gentle settle) ---------- */
.js .reveal { opacity: .001; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .steps .reveal:nth-child(2), .js .bento .reveal:nth-child(3n+2), .js .show .reveal:nth-child(2), .js .plans .reveal:nth-child(2) { transition-delay: .08s; }
.js .steps .reveal:nth-child(3), .js .bento .reveal:nth-child(3n), .js .show .reveal:nth-child(3), .js .plans .reveal:nth-child(3) { transition-delay: .16s; }
.js .plans .reveal:nth-child(4) { transition-delay: .24s; }

@media (min-width: 981px) { .mmenu { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
}
@media (max-width: 980px) {
  .nav__links { display: none; }
  .burger { display: block; }
  .hero__grid { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .hero__copy { align-items: center; }
  .stores-cta, .hero__proof { justify-content: center; }
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 34px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--xl { grid-column: span 2; }
  .card:not(.card--xl) { grid-column: span 1; }
  .band__in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .show__item--mid { margin-top: 0; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  h1 { font-size: 2.3rem; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .card, .card--xl, .card:not(.card--xl) { grid-column: span 1; }
  .card--xl { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
  .float { display: none; }
  .phone--hero { transform: none; --pw: 280 !important; }
  .store-btn { padding: 10px 18px 10px 14px; }
  .nav__in .btn { padding: 11px 15px; font-size: 14px; }
  .nav__actions { gap: 8px; }
  .brand { min-width: 0; }
  .brand span { max-width: 100px; }
  .brand span { font-size: 14px; line-height: 1.15; }
  .brand img { width: 34px; height: 34px; }
  .strip { padding: 34px 0 40px; }
  .strip__logos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .strip__logos li { padding: 8px 10px; gap: 8px; font-size: 12.5px; line-height: 1.2; }
  .strip__logos img { height: 30px; max-width: 46px; }
  .faq summary { padding: 18px; }
  .faq p { padding: 0 18px 20px; }
}