/*
 * Papayal app UI tokens, 1:1 with papayal-mobile/src/ui/theme.ts (see SOURCE for the commit),
 * plus every hard-coded value the app's screens use, named here so nothing else in brand/ui
 * carries a raw color.
 *
 * Units: 1 app point (pt) = 1 CSS px at --ui-scale: 1. A screen is 393 × 852.
 * These colors are the APP's. Outside the phone, films use the CLAUDE.md palette only.
 */
.pui {
  /* Screen scale. .pui-screen applies it with `zoom`, so layout, text and hairlines re-render
     crisply at any size. Films set it per shot (e.g. 2.4 for a 943 px-wide screen). */

  /* ---- theme.colors ------------------------------------------------------------------ */
  --color-primary: #FCA50F;
  --color-secondary: #0D2F32;
  --color-background: #FDF1E1;
  --color-lightText: #545353;
  --color-card: #FFFFFF;
  --color-cardBorder: #F1E2CB;
  --color-text: #2C3A43;
  --color-muted: #6A7780;
  --color-captionMuted: #5E7D80;
  --color-border: #D7DBD9;
  --color-subtleTealBorder: rgba(13, 47, 50, 0.06);
  --color-mutedTeal42: rgba(13, 47, 50, 0.42);
  --color-mutedTeal55: rgba(13, 47, 50, 0.55);
  --color-navbar: #0D2F32;
  --color-navbarMuted: #6A848A;
  --color-success: #39B66E;
  --color-danger: #E15555;

  /* ---- hard-coded colors (named by role; source file in the comment) ------------------ */
  --hc-orange-tint: #FFF7E6;          /* merchantProfileUi step/coverage discs, Banner info, contacts icon, ClaimLanding badge, selected rows */
  --hc-orange-tint-2: #FFF8EC;        /* StateViews empty badge, CheckoutHeader summary strip */
  --hc-orange-tint-3: #FFF3DC;        /* ListRow accent chip */
  --hc-orange-chip-border: #F5DCA9;   /* ListRow accent chip border */
  --hc-orange-42: rgba(252, 165, 15, 0.42); /* CheckoutHeader summary border */
  --hc-orange-45: rgba(252, 165, 15, 0.45); /* contacts icon, empty badge, ClaimLanding badge borders */
  --hc-orange-55: rgba(252, 165, 15, 0.55); /* Banner info border, min/max badge */
  --hc-cool-white: #F8FAFB;           /* merchant logo wells, hint card, interests idle */
  --hc-white: #FFFFFF;                /* labels on teal/red buttons, monogram initials (written as "#FFFFFF"/"#fff" in source) */
  --hc-white-55: rgba(255, 255, 255, 0.55); /* Welcome chips */
  --hc-white-58: rgba(255, 255, 255, 0.58); /* AppHeader icon badge */
  --hc-white-68: rgba(255, 255, 255, 0.68); /* skeletons, merchant-profile steps strip */
  --hc-white-93: rgba(255, 255, 255, 0.93); /* redemption code overlay */
  --hc-white-95: rgba(255, 255, 255, 0.95); /* payment processing overlay */
  --hc-teal-06: rgba(13, 47, 50, 0.06);     /* Welcome explore pill pressed */
  --hc-teal-08: rgba(13, 47, 50, 0.08);     /* BackButton pressed, skeleton + badge borders */
  --hc-teal-20: rgba(13, 47, 50, 0.2);      /* Avatar fallback border, Welcome chip border */
  --hc-amber-bg: #FEF3C7;             /* Banner warning, held/frozen pills */
  --hc-amber-border: #F59E0B;
  --hc-amber-text: #78350F;
  --hc-amber-icon: #B45309;
  --hc-amber-55: rgba(245, 158, 11, 0.55); /* held gift-card border */
  --hc-error-bg: #FFEBEE;             /* StripePayment error card */
  --hc-error-border: #EF5350;
  --hc-error-text: #C62828;
  --hc-ok-bg: #E6F4EC;                /* WalletList "Reclamada" pill */
  --hc-ok-border: #CDE7D8;
  --hc-danger-chip-bg: #FFF5F5;       /* ListRow danger chip */
  --hc-danger-chip-border: #F4C7C7;
  --hc-pressed-row: #F8F2E6;          /* ListRow / Profile pill pressed */
  --hc-wallet-card-bg: #F5EEDC;       /* WalletList "Comercios" tile */
  --hc-wallet-heading: #2D3E50;       /* WalletList summary ink */
  --hc-scrim: rgba(0, 0, 0, 0.5);     /* Contact/Country picker scrim */
  --hc-black: #000000;                /* tab indicator shadow; tab rail shadow ("#00000" in source is invalid → iOS default black) */

  /* ---- category marks (film brand art, marks/*.svg) standing in for merchant logos ------- */
  --mark-tile: #FDF1E1;               /* .u-tile in papayal-story categories.html */
  --mark-ink: #0D2F32;                /* .u-ico stroke */

  /* ---- iOS system chrome (not app code) ---------------------------------------------- */
  --ios-ink: #000000;                 /* status bar glyphs + home indicator on a light screen */
  --ios-nav-hairline: rgba(0, 0, 0, 0.3); /* native-stack header bottom hairline (UINavigationBar default shadow) */
  /* Text caret. The app's TextField sets no cursorColor/selectionColor (checked in papayal-mobile),
     so iOS draws it in the default tint: systemBlue. 2 pt wide, full line height. */
  --ios-caret: #007AFF;
  /* UINavigationController push (platform, approx.): the outgoing screen dims slightly, the
     incoming screen casts a soft shadow from its left edge. See motion.js screenPush. */
  --ios-push-dim: rgba(0, 0, 0, 0.1);
  --ios-push-edge-shadow: -3px 0 20px rgba(0, 0, 0, 0.16);
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; /* iOS system font; renders need Apple's SF Pro installed (see README) */

  /* ---- theme.spacing(n) = 8 × n ---------------------------------------------------------- */
  --spacing: 8px;

  /* ---- theme.radius + the radii the app actually hard-codes --------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-10: 10px;   /* ListRow icon chip */
  --radius-14: 14px;   /* buy-flow chips, merchant rows, logo fallback tile (56), wallet tile, Welcome CTA */
  --radius-18: 18px;   /* Card, ListGroup, MerchantGridCard, section bodies, steps strip, checkout CTAs, tab indicator */
  --radius-21: 21px;   /* merchant-profile amount chips (pill at 42 h) */
  --radius-22: 22px;   /* tab-bar rail top corners */
  --radius-pill: 999px;

  /* StyleSheet.hairlineWidth on a 3x iPhone = 1 device pixel = 1/3 pt */
  --hairline: 0.3333px;

  /* ---- typography ---------------------------------------------------------------------- */
  --font-family: "Raleway", sans-serif;   /* static Raleway cuts, fonts.css */
  /* theme.fonts.* → CSS weight (+ italic) */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semiBold: 600;
  --font-bold: 700;          /* = theme.fonts.brand */
  --font-extraBold: 800;
  --font-black: 900;         /* = theme.fonts.brandBlack */
  /* theme.typography */
  --typography-heading: 24px;
  --typography-subheading: 20px;
  --typography-body: 18px;
  --typography-small: 14px;
  /* The size ladder the screens actually use (hard-coded fontSize values) */
  --fs-8: 8px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;    /* also RN's default Text size */
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-34: 34px;
  --fs-44: 44px;
  --fs-64: 64px;
  /* RN leaves lineHeight unset almost everywhere: the font's natural line height.
     Raleway hhea: (940 + 234) / 1000 = 1.174, which CSS `normal` reproduces. */
  --lh-natural: normal;
  /* Feather icon font line box: (457 + 69 + 46) / 512 = 1.117 × size; glyph top at 9/512. */
  --icon-line: 1.1172;
  --icon-top: 0.0176;

  /* ---- shadows ------------------------------------------------------------------------
     iOS layer shadow → CSS box-shadow:
       shadowOffset {width: x, height: y}  → x y
       shadowRadius r                      → blur 2r   (CALayer radius ≈ half the CSS blur)
       shadowOpacity o + shadowColor c     → rgba(c, o)
     Android `elevation` is ignored (iOS only). Tune against a device capture if one differs. */
  --shadow-sm: 0 8px 24px rgba(13, 47, 50, 0.10);          /* theme.shadow.sm  (8, .10, 12) */
  --shadow-md: 0 12px 48px rgba(13, 47, 50, 0.10);         /* theme.shadow.md  (12, .10, 24) */
  --shadow-card: 0 10px 28px rgba(13, 47, 50, 0.08);       /* Card / ListGroup (10, .08, 14) */
  --shadow-button: 0 6px 12px rgba(13, 47, 50, 0.08);      /* Button base (6, .08, 6) */
  --shadow-cta-bar: 0 -8px 28px rgba(13, 47, 50, 0.10);    /* sticky CTA bars (-8, .10, 14) */
  --shadow-tab-rail: 0 8px 24px rgba(0, 0, 0, 0.08);       /* AnimatedTabBar rail (8, .08, 12) */
  --shadow-tab-indicator: 0 6px 20px rgba(0, 0, 0, 0.06);  /* AnimatedTabBar indicator (6, .06, 10) */
  --shadow-success: 0 10px 32px rgba(57, 182, 110, 0.25);  /* PurchaseSuccess check disc (10, .25, 16) */

  /* ---- review gallery / sheets only (index.html, sheets/) — never used inside a screen -- */
  --sheet-bg: #E9E4DC;
  --sheet-ink: #2A2A2A;
  --sheet-ink-muted: #5A5A5A;
}
/*
 * papayal-mobile components as CSS. Every rule cites its source StyleSheet; values come from
 * tokens.css. Layout mirrors React Native's Yoga defaults: every view is a flex column with
 * flex-shrink 0 and border-box sizing.
 *
 * Text fonts, faithfully: React 19 ignores Text.defaultProps, so the app's global default
 * (BootGate.tsx: Raleway 400 / theme.colors.text) never applies. Text whose style sets no
 * fontFamily renders in the iOS system font (SF Pro) and, with no color, in black.
 * Those are marked `.sys` / `.ink` below.
 */

/* ---------------------------------------------------------------- base ------------------ */
.pui {
  font-family: var(--ios-font);          /* RN iOS default when fontFamily is unset */
  font-size: var(--fs-14);               /* RN default fontSize */
  font-weight: 400;
  line-height: var(--lh-natural);
  color: var(--ios-ink);                 /* RN default Text color: black */
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  box-sizing: border-box;
}
.pui .v { display: flex; flex-direction: column; position: relative; flex-shrink: 0; box-sizing: border-box; min-width: 0; }
.pui .r { flex-direction: row; }
.pui .t { display: block; flex-shrink: 0; margin: 0; white-space: pre-wrap; box-sizing: border-box; }
.pui .nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pui .ral { font-family: var(--font-family); }
.pui .sys { font-family: var(--ios-font); }
.pui img { display: block; }

/* Feather glyph in the icon font's line box (height 1.117 × size, glyph 1:1 at the top) */
.pui .pui-icon { display: block; position: relative; flex-shrink: 0; width: var(--s); height: calc(var(--s) * var(--icon-line)); }
.pui .pui-icon > svg { position: absolute; left: 0; top: calc(var(--s) * var(--icon-top)); width: var(--s); height: var(--s); }

/* ---------------------------------------------------------------- screen shell ----------- */
.pui-screen {
  zoom: var(--ui-scale);
  width: 393px;
  height: 852px;
  position: relative;
  overflow: hidden;
  background: var(--color-background);
}
.pui .pui-body { position: absolute; inset: 0; }
.pui .pui-scroll { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.pui .pui-scroll-content { width: 100%; }

/* iOS status bar (neutral, 9:41) — system chrome, not app code */
.pui .pui-statusbar { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 50; pointer-events: none; color: var(--ios-ink); }
.pui .pui-statusbar-time { position: absolute; left: 0; width: 131px; top: 17px; text-align: center; font: 600 17px/22px var(--ios-font); letter-spacing: -0.4px; }
.pui .pui-statusbar-icons { position: absolute; right: 26px; top: 21px; display: flex; flex-direction: row; align-items: center; gap: 6px; }
.pui .pui-statusbar-icons svg { display: block; }
.pui .pui-home-indicator { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 100px; background: var(--ios-ink); z-index: 50; }

/* Native-stack header (Wallet stack): 44 pt UINavigationBar under the status bar */
.pui .pui-navbar { position: absolute; top: 59px; left: 0; right: 0; height: 44px; background: var(--color-background); border-bottom: var(--hairline) solid var(--ios-nav-hairline); flex-direction: row; align-items: center; justify-content: center; z-index: 5; }
.pui .pui-navbar-title { font: var(--font-semiBold) 17px var(--font-family); color: var(--color-text); }
.pui .pui-navbar-left { position: absolute; left: 16px; top: 2px; }

/* ---------------------------------------------------------------- Card.tsx -------------- */
.pui .pui-card {
  background: var(--color-card);
  border-radius: var(--radius-18);
  padding: calc(var(--spacing) * 2);
  box-shadow: var(--shadow-card);
  border: var(--hairline) solid var(--color-border);
}

/* ---------------------------------------------------------------- ListRow.tsx ----------- */
.pui .pui-group { background: var(--color-card); border-radius: var(--radius-18); border: var(--hairline) solid var(--color-border); box-shadow: var(--shadow-card); }
.pui .pui-group-clip { border-radius: var(--radius-18); overflow: hidden; }
.pui .pui-row { align-items: center; gap: var(--spacing); min-height: 56px; padding: calc(var(--spacing) * 1.25); background: var(--color-card); }
.pui .pui-row.is-pressed { background: var(--hc-pressed-row); }
.pui .pui-row.is-disabled { opacity: 0.55; }
.pui .pui-row-icon { width: 34px; height: 34px; border-radius: var(--radius-10); align-items: center; justify-content: center; background: var(--color-background); border: var(--hairline) solid var(--color-border); color: var(--color-text); }
.pui .pui-row-icon.is-accent { background: var(--hc-orange-tint-3); border-color: var(--hc-orange-chip-border); color: var(--color-primary); }
.pui .pui-row-icon.is-danger { background: var(--hc-danger-chip-bg); border-color: var(--hc-danger-chip-border); color: var(--color-danger); }
.pui .pui-row-text { flex: 1 1 0; gap: 2px; }
.pui .pui-row-title { font: var(--font-bold) var(--fs-16) var(--font-family); color: var(--color-text); }
.pui .pui-row-title.is-danger { color: var(--color-danger); }
.pui .pui-row-subtitle { color: var(--color-muted); font-size: var(--typography-small); line-height: 18px; } /* .sys */
.pui .pui-row-chevron { color: var(--color-muted); }
.pui .pui-row-divider { height: var(--hairline); background: var(--color-border); margin-left: calc(var(--spacing) * 6.5); }

/* ---------------------------------------------------------------- Button.tsx ------------ */
.pui .pui-btn {
  padding: calc(var(--spacing) * 1.2) calc(var(--spacing) * 2);
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: calc(var(--spacing) * 0.25);
  box-shadow: var(--shadow-button);
}
.pui .pui-btn--primary { background: var(--color-primary); }
.pui .pui-btn--secondary { background: var(--color-secondary); }
.pui .pui-btn--danger { background: var(--color-danger); }
.pui .pui-btn--ghost { background: transparent; border: var(--hairline) solid var(--color-border); box-shadow: none; }
.pui .pui-btn.is-pressed { opacity: 0.9; }
.pui .pui-btn.is-disabled { opacity: 0.5; }
.pui .pui-btn-label {
  font: var(--font-bold) var(--typography-body) var(--font-family);
  letter-spacing: 0.1px;
  text-align: center;
  flex-shrink: 1;
  color: var(--color-secondary);
}
.pui .pui-btn--secondary .pui-btn-label, .pui .pui-btn--danger .pui-btn-label { color: var(--hc-white); }
/* checkout / success overrides (PurchaseSuccessScreen, DeliveryProfileScreen styles) */
.pui .pui-btn--tall { padding-top: calc(var(--spacing) * 1.4); padding-bottom: calc(var(--spacing) * 1.4); border-radius: var(--radius-18); }
.pui .pui-btn--outline { padding-top: calc(var(--spacing) * 1.2); padding-bottom: calc(var(--spacing) * 1.2); border-radius: var(--radius-18); border: 1px solid var(--color-secondary); }
/* ActivityIndicator (iOS, small 20 pt) */
.pui .pui-spinner { width: 20px; height: 20px; display: block; }

/* ---------------------------------------------------------------- BackButton.tsx -------- */
.pui .pui-back { min-width: 40px; height: 40px; border-radius: 20px; flex-direction: row; align-items: center; justify-content: center; gap: calc(var(--spacing) * 0.5); align-self: flex-start; background: transparent; }
.pui .pui-back.is-pressed { background: var(--hc-teal-08); }
.pui .pui-back { color: var(--color-text); }

/* ---------------------------------------------------------------- TopNavBar.tsx --------- */
.pui .pui-topnav { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: calc(var(--spacing) * 1.5); padding-top: 59px; }
.pui .pui-topnav-btn { padding: var(--spacing); border-radius: var(--radius-md); color: var(--color-text); }
.pui .pui-topnav-logo { width: 36px; height: 36px; object-fit: contain; }

/* ---------------------------------------------------------------- HomeScreen.tsx -------- */
.pui .pui-home-header { padding: calc(var(--spacing) * 2) 20px calc(var(--spacing) * 2); }
.pui .pui-home-title { font: var(--font-bold) var(--fs-28) var(--font-family); color: var(--color-text); }
.pui .pui-home-subtitle { color: var(--color-muted); }                               /* .sys */
.pui .pui-home-footer { padding: calc(var(--spacing) * 2) 20px 0; }
.pui .pui-home-card { margin-top: calc(var(--spacing) * 1.5); }
.pui .pui-home-section-title { font: var(--font-semiBold) var(--typography-subheading) var(--font-family); color: var(--color-text); margin-bottom: var(--spacing); }
.pui .pui-home-userinfo { gap: calc(var(--spacing) * 0.5); }
.pui .pui-home-name { font: var(--font-semiBold) var(--typography-subheading) var(--font-family); color: var(--color-text); }
.pui .pui-home-muted { color: var(--color-muted); }                                  /* .sys */
.pui .pui-home-button { margin-top: var(--spacing); }
.pui .pui-home-list-end { height: calc(var(--spacing) * 18); }

/* HomeHeroCard.tsx */
.pui .pui-hero { gap: calc(var(--spacing) * 2); margin-bottom: var(--spacing); }
.pui .pui-hero-title { font: var(--font-extraBold) var(--fs-28) / 36px var(--font-family); color: var(--color-text); }
.pui .pui-hero-sub { gap: calc(var(--spacing) * 0.4); }
.pui .pui-hero-subtitle { font: var(--font-bold) var(--fs-20) var(--font-family); color: var(--color-text); }
.pui .pui-hero-action-row { flex-direction: row; align-items: center; justify-content: space-between; gap: calc(var(--spacing) * 0.75); }
.pui .pui-hero-image-wrap { flex: 1 1 0; align-items: center; justify-content: center; margin-top: calc(var(--spacing) * 1.5); margin-bottom: calc(var(--spacing) * -5); }
.pui .pui-hero-image { width: 220px; height: 180px; object-fit: contain; }
.pui .pui-flow { gap: var(--spacing); }
.pui .pui-flow-title { font: var(--font-bold) var(--typography-subheading) var(--font-family); color: var(--color-text); }
.pui .pui-flow-steps { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pui .pui-flow-step { align-items: center; gap: calc(var(--spacing) * 0.5); flex-grow: 1; min-width: 90px; color: var(--color-secondary); }
.pui .pui-flow-arrow { color: var(--color-navbarMuted); }
.pui .pui-flow-label { color: var(--color-text); text-align: center; font-size: var(--typography-small); } /* .sys */
.pui .pui-hero-cta { margin-top: var(--spacing); }

/* Merchant shelves (HomeScreen MerchantShelf) */
.pui .pui-shelf { width: 100%; }
.pui .pui-shelf + .pui-shelf { margin-top: calc(var(--spacing) * 3); }
.pui .pui-shelf-header { flex-direction: row; align-items: center; gap: calc(var(--spacing) * 0.75); margin-bottom: calc(var(--spacing) * 1.5); padding: 0 20px; color: var(--color-primary); }
.pui .pui-shelf-title { font: var(--font-extraBold) var(--fs-16) var(--font-family); color: var(--color-secondary); }
.pui .pui-shelf-row { flex-direction: row; gap: 14px; padding: 0 20px calc(var(--spacing) * 0.75); }

/* ---------------------------------------------------------------- MerchantGridCard.tsx -- */
.pui .pui-tile { align-self: flex-start; transform-origin: 50% 50%; }
.pui .pui-tile.is-pressed { transform: scale(0.97); }
.pui .pui-tile-card {
  background: var(--color-card);
  border-radius: var(--radius-18);
  border: 1px solid var(--color-cardBorder);
  align-items: center;
  justify-content: center;
  padding: calc(var(--spacing) * 2);
  box-shadow: var(--shadow-sm);
}
.pui .pui-tile-logo-area { width: 100%; height: 100%; align-items: center; justify-content: center; }
/* Category mark in a logo slot (Image resizeMode "contain" geometry) */
.pui .pui-mark { display: block; width: 100%; height: 100%; }
.pui .pui-mark-tile { fill: var(--mark-tile); }
.pui .pui-mark-ico { fill: none; stroke: var(--mark-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pui .pui-logo-image { width: 100%; height: 100%; }
.pui .pui-monogram { align-items: center; justify-content: center; background: var(--color-secondary); }
.pui .pui-monogram-initial { font-family: var(--font-family); font-weight: var(--font-black); color: var(--hc-white); }
.pui .pui-tile-monogram { width: 56px; height: 56px; border-radius: var(--radius-14); }
.pui .pui-tile-monogram .pui-monogram-initial { font-size: 26px; }
.pui .pui-tile-labels { margin-top: 10px; padding-left: 2px; }
.pui .pui-tile-name { font: var(--font-extraBold) var(--typography-small) / 18px var(--font-family); color: var(--color-secondary); }
.pui .pui-tile-category { font: var(--font-semiBold) var(--fs-11) / 14px var(--font-family); color: var(--color-captionMuted); margin-top: 1px; }

/* ---------------------------------------------------------------- AnimatedTabBar.tsx ---- */
.pui .pui-tabbar { position: absolute; left: 0; right: 0; bottom: 0; align-items: center; background: var(--color-background); z-index: 20; }
.pui .pui-tabbar-rail {
  width: 393px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background: var(--color-card);
  border-top-left-radius: var(--radius-22);
  border-top-right-radius: var(--radius-22);
  padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 0.5) 50px; /* bottom = max(inset 34, 8) + spacing(2) */
  box-shadow: var(--shadow-tab-rail);
}
.pui .pui-tab-indicator { position: absolute; top: 6px; left: calc(var(--spacing) * 0.5); height: 55px; width: 120.333px; background: var(--color-background); border-radius: var(--radius-18); box-shadow: var(--shadow-tab-indicator); }
.pui .pui-tab { width: 128.333px; border-radius: var(--radius-lg); align-items: center; justify-content: center; padding: calc(var(--spacing) * 0.1) 0; min-height: 54px; }
.pui .pui-tab .pui-icon { color: var(--color-navbarMuted); opacity: 0.5; transform: scale(0.94); }
.pui .pui-tab-label { font: var(--font-bold) var(--fs-12) var(--font-family); letter-spacing: 0.15px; color: var(--color-navbarMuted); opacity: 0.7; white-space: nowrap; }
.pui .pui-tab.is-focused .pui-icon { color: var(--color-secondary); opacity: 1; transform: scale(1.2); }
.pui .pui-tab.is-focused .pui-tab-label { color: var(--color-primary); opacity: 1; }

/* ---------------------------------------------------------------- AppHeader.tsx --------- */
.pui .pui-appheader { gap: calc(var(--spacing) * 0.5); padding: var(--spacing) calc(var(--spacing) * 2) calc(var(--spacing) * 0.5); }
.pui .pui-appheader-top { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: calc(var(--spacing) * 0.5); }

/* ---------------------------------------------------------------- MerchantGiftCardHero -- */
.pui .pui-giftcard {
  width: 90%;
  align-self: center;
  aspect-ratio: 1.86;
  border-radius: var(--radius-xl);
  background: var(--color-card);
  border: var(--hairline) solid var(--color-subtleTealBorder);
  padding: calc(var(--spacing) * 2);
  justify-content: space-between;
  box-shadow: var(--shadow-md);
}
.pui .pui-giftcard.is-held { border: 1px solid var(--hc-amber-55); }
.pui .pui-giftcard-top { flex-direction: row; align-items: flex-start; justify-content: space-between; }
.pui .pui-giftcard-logo-area { width: 58%; height: 40px; align-items: flex-start; justify-content: center; }
.pui .pui-giftcard-logo-area.is-auto { height: auto; min-height: 40px; }   /* merchantLogoAreaAuto */
.pui .pui-giftcard-logo-img { width: 54px; height: 54px; }                /* bandedLogoHeight(1) = 54 */
.pui .pui-giftcard-monogram { width: 40px; height: 40px; border-radius: var(--radius-md); }
.pui .pui-giftcard-monogram .pui-monogram-initial { font-size: var(--fs-20); color: var(--color-card); }
.pui .pui-giftcard-ring { width: 30px; height: 30px; object-fit: contain; }
.pui .pui-giftcard-contactless { position: absolute; right: calc(var(--spacing) * 2.25); top: 50%; transform: translateY(-11px); color: var(--color-mutedTeal42); }
.pui .pui-giftcard-contactless svg { display: block; width: 28px; height: 22px; }
.pui .pui-giftcard-bottom { gap: calc(var(--spacing) * 1.1); }
.pui .pui-giftcard-number { font: var(--font-bold) var(--fs-18) var(--font-family); letter-spacing: 2px; color: var(--color-secondary); }
.pui .pui-giftcard-balance-row { flex-direction: row; align-items: baseline; gap: calc(var(--spacing) * 0.75); }
.pui .pui-giftcard-balance-label { font: var(--font-bold) var(--fs-11) var(--font-family); letter-spacing: 1.1px; text-transform: uppercase; color: var(--color-mutedTeal55); }
.pui .pui-giftcard-balance-value { font: var(--font-extraBold) var(--fs-24) var(--font-family); letter-spacing: 0.5px; color: var(--color-secondary); }
.pui .pui-giftcard-meta { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--spacing); }
.pui .pui-giftcard-caption { flex-shrink: 1; font: var(--font-bold) var(--fs-11) var(--font-family); letter-spacing: 1.2px; color: var(--color-mutedTeal55); }
.pui .pui-giftcard-valid { align-items: flex-end; }
.pui .pui-giftcard-valid-label { font: var(--font-bold) var(--fs-8) var(--font-family); letter-spacing: 0.7px; color: var(--color-mutedTeal55); }
.pui .pui-giftcard-valid-date { font: var(--font-bold) var(--fs-12) var(--font-family); color: var(--color-secondary); margin-top: 1px; }

/* ---------------------------------------------------------------- merchantProfileUi.tsx - */
.pui .pui-mp-header { padding: var(--spacing) calc(var(--spacing) * 2) calc(var(--spacing) * 0.5); gap: calc(var(--spacing) * 0.5); }
.pui .pui-mp-hero-band { padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2) calc(var(--spacing) * 1.75); background: var(--color-background); }
.pui .pui-mp-title-block { padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2) 0; gap: calc(var(--spacing) * 0.35); }
.pui .pui-mp-store { font: var(--font-black) var(--fs-28) / 34px var(--font-family); color: var(--color-secondary); }
.pui .pui-mp-category { font: var(--font-semiBold) var(--fs-15) / 21px var(--font-family); color: var(--color-captionMuted); }
.pui .pui-mp-brandline { font: var(--font-bold) var(--fs-17) / 23px var(--font-family); color: var(--color-text); margin-top: var(--spacing); }
.pui .pui-mp-section { padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2) 0; }
.pui .pui-mp-section-title { font: var(--font-extraBold) var(--fs-18) var(--font-family); color: var(--color-secondary); margin-bottom: calc(var(--spacing) * 1.25); }
.pui .pui-mp-amount-row { flex-direction: row; flex-wrap: wrap; gap: var(--spacing); }
.pui .pui-chip {
  min-height: 42px;
  min-width: 66px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-21);
  border: 1px solid var(--color-cardBorder);
  background: var(--color-background);
  padding: 0 calc(var(--spacing) * 1.6);
}
.pui .pui-chip.is-selected { background: var(--color-primary); border-color: var(--color-primary); }
.pui .pui-chip-label { font: var(--font-extraBold) var(--fs-16) var(--font-family); color: var(--color-secondary); }
.pui .pui-mp-steps {
  margin: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2) 0;
  border-radius: var(--radius-18);
  background: var(--hc-white-68);
  border: var(--hairline) solid var(--color-cardBorder);
  padding: calc(var(--spacing) * 1.25);
  gap: var(--spacing);
}
.pui .pui-mp-step { flex-direction: row; align-items: center; gap: var(--spacing); min-height: 48px; }
.pui .pui-mp-step-icon { width: 34px; height: 34px; border-radius: 17px; align-items: center; justify-content: center; background: var(--hc-orange-tint); color: var(--color-secondary); }
.pui .pui-mp-step-title { flex: 0.95 1 0; font: var(--font-extraBold) var(--fs-14) / 18px var(--font-family); color: var(--color-secondary); }
.pui .pui-mp-step-text { flex: 1.1 1 0; font: var(--font-medium) var(--fs-13) / 18px var(--font-family); color: var(--color-captionMuted); }
.pui .pui-mp-trust { flex-direction: row; flex-wrap: wrap; gap: calc(var(--spacing) * 0.75); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2) 0; }
.pui .pui-mp-pill { flex-direction: row; align-items: center; gap: calc(var(--spacing) * 0.45); border-radius: var(--radius-pill); background: var(--hc-white); border: var(--hairline) solid var(--color-cardBorder); padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.1); color: var(--color-secondary); }
.pui .pui-mp-pill-label { font: var(--font-bold) var(--fs-13) var(--font-family); color: var(--color-secondary); }
.pui .pui-mp-coverage { padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2) 0; }
.pui .pui-mp-coverage-row { flex-direction: row; align-items: center; gap: var(--spacing); padding: calc(var(--spacing) * 1.25) 0; border-top: var(--hairline) solid var(--color-cardBorder); border-bottom: var(--hairline) solid var(--color-cardBorder); }
.pui .pui-mp-coverage-icon { width: 36px; height: 36px; border-radius: 18px; align-items: center; justify-content: center; background: var(--hc-orange-tint); color: var(--color-primary); }
.pui .pui-mp-coverage-text { flex: 1 1 0; font: var(--font-semiBold) var(--fs-15) / 21px var(--font-family); color: var(--color-text); }

/* Sticky CTA bar (merchantProfileUi ctaBar, GiftCardScreen ctaBar) */
.pui .pui-ctabar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-card);
  border-top: var(--hairline) solid var(--color-cardBorder);
  padding: var(--spacing) calc(var(--spacing) * 2) calc(34px + var(--spacing));
  box-shadow: var(--shadow-cta-bar);
  z-index: 10;
}
.pui .pui-ctabar--stack { gap: calc(var(--spacing) * 0.75); }
/* With the tab bar showing, the CTA bar sits on top of it (the tab bar owns the home-indicator inset).
   Landing fix: brand/ui pinned both to bottom: 0, so the tab bar covered the buttons. */
.pui .pui-ctabar--over-tabs { bottom: 110px; padding-bottom: var(--spacing); }

/* ---------------------------------------------------------------- Screen.tsx (scrollable) */
.pui .pui-screen-inner { padding: calc(var(--spacing) * 2); }
.pui .pui-screen-center { flex: 1 1 0; justify-content: center; align-items: center; }

/* ---------------------------------------------------------------- CheckoutHeader.tsx ---- */
.pui .pui-ch { margin-bottom: calc(var(--spacing) * 1.5); }
.pui .pui-ch-top { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: var(--spacing); }
.pui .pui-ch-stepcount { font: var(--font-semiBold) var(--typography-small) var(--font-family); color: var(--color-muted); }
.pui .pui-ch-title { font: var(--font-extraBold) var(--fs-26) var(--font-family); color: var(--color-text); }
.pui .pui-ch-subtitle { color: var(--color-muted); margin-top: calc(var(--spacing) * 0.5); line-height: 20px; } /* .sys */
.pui .pui-ch-progress { flex-direction: row; gap: calc(var(--spacing) * 0.75); margin-top: calc(var(--spacing) * 1.5); }
.pui .pui-ch-step { flex: 1 1 0; min-width: 0; gap: calc(var(--spacing) * 0.45); }
.pui .pui-ch-dot { height: 5px; border-radius: 99px; background: var(--color-border); align-items: center; justify-content: center; color: var(--hc-white); }
.pui .pui-ch-dot.is-active { background: var(--color-primary); }
.pui .pui-ch-dot.is-complete { height: 16px; background: var(--color-secondary); }
.pui .pui-ch-label { font: var(--font-semiBold) var(--fs-11) var(--font-family); color: var(--color-muted); text-align: center; }
.pui .pui-ch-label.is-on { color: var(--color-secondary); }
.pui .pui-ch-summary { flex-direction: row; flex-wrap: wrap; gap: calc(var(--spacing) * 0.75); margin-top: calc(var(--spacing) * 1.25); padding: var(--spacing); border-radius: var(--radius-md); background: var(--hc-orange-tint-2); border: var(--hairline) solid var(--hc-orange-42); }
.pui .pui-ch-summary-item { min-width: 30%; flex: 1 1 0; gap: 2px; }
.pui .pui-ch-summary-label { font: var(--font-semiBold) var(--fs-11) var(--font-family); color: var(--color-muted); }
.pui .pui-ch-summary-value { font: var(--font-bold) var(--typography-small) var(--font-family); color: var(--color-text); }

/* ---------------------------------------------------------------- DeliveryProfileScreen - */
.pui .pui-dp-card { gap: calc(var(--spacing) * 2); margin-bottom: calc(var(--spacing) * 1.5); }
.pui .pui-dp-form { gap: calc(var(--spacing) * 2); }
.pui .pui-dp-contacts { flex-direction: row; align-items: center; gap: var(--spacing); padding: calc(var(--spacing) * 1.25); border-radius: var(--radius-md); border: var(--hairline) solid var(--color-border); background: var(--color-background); color: var(--color-muted); }
.pui .pui-dp-contacts.is-pressed { opacity: 0.85; }
.pui .pui-dp-contacts-icon { width: 32px; height: 32px; border-radius: 16px; align-items: center; justify-content: center; background: var(--hc-orange-tint); border: var(--hairline) solid var(--hc-orange-45); color: var(--color-secondary); }
.pui .pui-dp-contacts-text { flex: 1 1 0; font: var(--font-semiBold) var(--fs-17) var(--font-family); color: var(--color-text); }
.pui .pui-dp-helper { color: var(--color-muted); font-size: var(--typography-small); } /* .sys */

/* TextField.tsx / PhoneInput.tsx (filled; no focus style in TextField) */
.pui .pui-field { width: 100%; }
.pui .pui-field-label { font: var(--font-regular) var(--typography-small) var(--font-family); color: var(--color-muted); margin-bottom: calc(var(--spacing) * 0.5); }
.pui .pui-field-input { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-border); padding: calc(var(--spacing) * 1.25) calc(var(--spacing) * 1.5); background: var(--color-card); font: var(--font-light) var(--typography-body) var(--font-family); color: var(--color-text); }
.pui .pui-field-input.is-multiline { min-height: 96px; }
.pui .pui-field-placeholder { color: var(--color-lightText); }   /* placeholderTextColor */
/* iOS chrome (not app code): the text caret, and the push-transition dim layer. */
.pui .pui-caret { display: inline-block; width: 2px; height: 1.17em; margin: 0 1px 0 0; vertical-align: -0.24em; border-radius: 1px; background: var(--ios-caret); }
.pui .pui-caret.is-lead { margin: 0 1px 0 -1px; }
.pui-push-dim { position: absolute; inset: 0; background: var(--ios-push-dim); opacity: 0; pointer-events: none; z-index: 100; }
.pui .pui-field-input.is-error, .pui .pui-phone-box.is-error { border-color: var(--color-danger); }
.pui .pui-field-error { color: var(--color-danger); margin-top: calc(var(--spacing) * 0.5); font: var(--font-regular) var(--typography-small) var(--font-family); }
.pui .pui-phone-box { flex-direction: row; align-items: center; width: 100%; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-card); min-height: 48px; }
.pui .pui-phone-box.is-focused { border-color: var(--color-primary); }
.pui .pui-phone-chip { padding: calc(var(--spacing) * 0.75) var(--spacing); flex-direction: row; align-items: center; gap: calc(var(--spacing) * 0.5); color: var(--color-muted); }
.pui .pui-phone-flag { font-size: var(--fs-20); font-family: "Apple Color Emoji", var(--ios-font); }
.pui .pui-phone-code { font: var(--font-semiBold) var(--typography-body) var(--font-family); color: var(--color-text); }
.pui .pui-phone-divider { width: 1px; height: 24px; background: var(--color-border); margin: 0 calc(var(--spacing) * 0.5); }
.pui .pui-phone-input { flex: 1 1 0; padding: calc(var(--spacing) * 1.25) calc(var(--spacing) * 1.5); font: var(--font-light) var(--typography-body) var(--font-family); color: var(--color-text); }

/* ---------------------------------------------------------------- Banner.tsx ------------ */
.pui .pui-banner { flex-direction: row; align-items: flex-start; gap: var(--spacing); padding: calc(var(--spacing) * 1.5); border-radius: var(--radius-md); border: 1px solid var(--hc-orange-55); background: var(--hc-orange-tint); color: var(--color-primary); }
.pui .pui-banner .pui-icon { margin-top: 1px; }
.pui .pui-banner-body { flex: 1 1 0; gap: calc(var(--spacing) * 0.4); }
.pui .pui-banner-title { font: var(--font-bold) 15px var(--font-family); color: var(--color-secondary); }
.pui .pui-banner-message { font-size: var(--typography-small); line-height: 19px; color: var(--color-text); } /* .sys */

/* ---------------------------------------------------------------- PurchaseSuccessScreen - */
.pui .pui-ps-nav { width: 100%; flex-direction: row; align-items: center; justify-content: flex-end; margin-bottom: var(--spacing); }
.pui .pui-ps-close { width: 36px; height: 36px; border-radius: 18px; align-items: center; justify-content: center; color: var(--color-text); }
.pui .pui-ps-card { width: 100%; gap: calc(var(--spacing) * 1.2); align-items: center; }
.pui .pui-success-disc { width: 72px; height: 72px; border-radius: 36px; background: var(--color-success); align-items: center; justify-content: center; box-shadow: var(--shadow-success); color: var(--hc-white); }
.pui .pui-ps-title { font: var(--font-extraBold) var(--fs-28) var(--font-family); color: var(--color-text); }
.pui .pui-ps-subtitle { text-align: center; color: var(--color-muted); line-height: 20px; } /* .sys */
.pui .pui-ps-summary { width: 100%; gap: calc(var(--spacing) * 0.5); align-items: center; margin-top: calc(var(--spacing) * 0.5); }
.pui .pui-ps-merchant { font: var(--font-bold) var(--typography-subheading) var(--font-family); color: var(--color-text); }
.pui .pui-ps-amount { font: var(--font-extraBold) var(--fs-22) var(--font-family); color: var(--color-text); }
.pui .pui-ps-balance { color: var(--color-muted); } /* .sys */
.pui .pui-ps-actions { width: 100%; gap: var(--spacing); margin-top: var(--spacing); }

/* ---------------------------------------------------------------- ClaimLandingScreen ---- */
.pui .pui-cl-card { align-items: center; padding-top: calc(var(--spacing) * 3); padding-bottom: calc(var(--spacing) * 3); gap: calc(var(--spacing) * 1.5); }
.pui .pui-cl-badge { width: 72px; height: 72px; border-radius: 36px; align-items: center; justify-content: center; background: var(--hc-orange-tint); border: var(--hairline) solid var(--hc-orange-45); }
.pui .pui-cl-emoji { font-size: 34px; font-family: "Apple Color Emoji", var(--ios-font); }
.pui .pui-cl-title { font: var(--font-bold) var(--typography-heading) var(--font-family); color: var(--color-text); text-align: center; }
.pui .pui-cl-merchant-row { flex-direction: row; align-items: center; gap: var(--spacing); }
.pui .pui-cl-logo { width: 36px; height: 36px; border-radius: 18px; overflow: hidden; background: var(--color-card); border: var(--hairline) solid var(--color-border); align-items: center; justify-content: center; }
.pui .pui-cl-logo img, .pui .pui-cl-logo .pui-mark { width: 100%; height: 100%; object-fit: contain; }
.pui .pui-cl-merchant { font: var(--font-semiBold) var(--typography-body) var(--font-family); color: var(--color-text); }
.pui .pui-cl-amount { font: var(--font-black) var(--fs-44) var(--font-family); color: var(--color-secondary); }
.pui .pui-note-box { align-self: stretch; background: var(--color-background); border-radius: var(--radius-sm); padding: calc(var(--spacing) * 1.5); }
.pui .pui-cl-note { font: italic var(--font-regular) var(--typography-body) / 24px var(--font-family); color: var(--color-text); text-align: center; }
.pui .pui-cl-banner { align-self: stretch; }
.pui .pui-cl-actions { align-self: stretch; gap: var(--spacing); margin-top: calc(var(--spacing) * 0.5); }

/* ---------------------------------------------------------------- GiftCardScreen -------- */
.pui .pui-gc-content { padding-top: calc(var(--spacing) * 1.5); }
.pui .pui-gc-headblock { padding: 0 calc(var(--spacing) * 2) calc(var(--spacing) * 2); gap: calc(var(--spacing) * 0.35); }
.pui .pui-gc-total-label { font: var(--font-semiBold) var(--fs-16) var(--font-family); color: var(--color-captionMuted); }
.pui .pui-gc-total-value { font: var(--font-extraBold) var(--fs-34) var(--font-family); color: var(--color-secondary); letter-spacing: -0.6px; }
.pui .pui-gc-strips { margin: calc(var(--spacing) * 2) calc(var(--spacing) * 2) 0; gap: var(--spacing); }
.pui .pui-gc-section { margin: calc(var(--spacing) * 2.5) calc(var(--spacing) * 2) 0; gap: var(--spacing); }
.pui .pui-gc-section-title { font: var(--font-bold) var(--typography-subheading) var(--font-family); color: var(--color-text); }
.pui .pui-gc-section-body { background: var(--color-card); border-radius: var(--radius-18); border: var(--hairline) solid var(--color-cardBorder); padding: calc(var(--spacing) * 1.5); gap: calc(var(--spacing) * 1.5); box-shadow: var(--shadow-sm); }
.pui .pui-load { gap: calc(var(--spacing) * 0.75); }
.pui .pui-load-top { flex-direction: row; align-items: center; gap: calc(var(--spacing) * 1.25); }
.pui .pui-avatar { overflow: hidden; align-items: center; justify-content: center; background: var(--color-secondary); border: var(--hairline) solid var(--hc-teal-20); }
.pui .pui-avatar-initials { font-family: var(--font-family); font-weight: var(--font-bold); color: var(--color-background); letter-spacing: 1px; }
.pui .pui-load-text { flex: 1 1 0; min-width: 0; }
.pui .pui-load-who { font: var(--font-semiBold) var(--typography-body) var(--font-family); color: var(--color-text); }
.pui .pui-load-meta { color: var(--color-muted); font-size: var(--typography-small); margin-top: 2px; } /* .sys */
.pui .pui-load-amount-col { align-items: flex-end; gap: calc(var(--spacing) * 0.35); }
.pui .pui-load-amount { font: var(--font-extraBold) calc(var(--typography-body) + 2px) var(--font-family); color: var(--color-text); }
.pui .pui-load-note { font: italic var(--font-regular) var(--fs-14) / 22px var(--font-family); color: var(--color-text); background: var(--color-background); border-radius: var(--radius-sm); padding: calc(var(--spacing) * 1.25); }

/* ---------------------------------------------------------------- RedemptionTokenScreen - */
.pui .pui-rt-title { font: var(--font-bold) var(--typography-subheading) var(--font-family); margin-bottom: calc(var(--spacing) * 0.25); } /* no color in source → .ink */
.pui .pui-rt-subtitle { font: var(--font-semiBold) var(--fs-14) var(--font-family); color: var(--color-muted); margin-bottom: var(--spacing); }
.pui .pui-rt-token-container { align-items: center; gap: calc(var(--spacing) * 1.25); }
.pui .pui-rt-code-area { align-self: stretch; align-items: center; gap: calc(var(--spacing) * 1.25); }
.pui .pui-rt-well { padding: var(--spacing); background: var(--color-card); border-radius: var(--radius-md); border: var(--hairline) solid var(--color-border); overflow: hidden; }
.pui .pui-rt-qr { width: 180px; height: 180px; }
.pui .pui-rt-barcode { width: 310px; height: 90px; }
.pui .pui-rt-token { font: var(--font-bold) var(--fs-22) var(--font-family); letter-spacing: 1.1px; color: var(--color-text); }
.pui .pui-rt-muted { color: var(--color-muted); } /* .sys */
.pui .pui-rt-countdown { font: var(--font-semiBold) var(--fs-14) var(--font-family); color: var(--color-secondary); }
.pui .pui-rt-button { margin-top: calc(var(--spacing) * 2); }
.pui .pui-rt-overlay { position: absolute; inset: 0; align-items: center; justify-content: center; gap: var(--spacing); background: var(--hc-white-93); border-radius: var(--radius-md); z-index: 1; color: var(--color-success); }
.pui .pui-rt-celebrate { font: var(--font-bold) var(--typography-subheading) var(--font-family); color: var(--color-success); }
.pui .pui-rt-finished { align-items: center; gap: var(--spacing); }
.pui .pui-rt-finished-icon { margin-bottom: calc(var(--spacing) * 0.5); color: var(--color-success); }
.pui .pui-rt-finished-title { font: var(--font-bold) var(--typography-subheading) var(--font-family); color: var(--color-text); }
.pui .pui-rt-finished-sub { color: var(--color-muted); text-align: center; line-height: 21px; } /* .sys */
.pui .pui-rt-finished-button { align-self: stretch; margin-top: var(--spacing); }

/* ---------------------------------------------------------------- DeviceFrame --------- */
/* The standard film device (device/SOURCE.md): iPhone 18 Pro Max, Black. Sizes in device px
   (1470 × 3000); scale the whole .pui-device with a transform. The 393 × 852 UI fills the
   screen rect (x 75, y 66, 1320 × 2868) and is masked to the screen's real corner shape. */
.pui-device { position: relative; width: 1470px; height: 3000px; transform-origin: 0 0; }
.pui-device-screen {
  position: absolute;
  left: 75px;
  top: 66px;
  width: 1320px;
  height: 2868px;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background: var(--color-background);
}
.pui-device-ui { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform-origin: 0 0; transform: translateX(-1.458px) scale(3.36620); }
.pui-device-bezel { position: absolute; left: 0; top: 0; width: 1470px; height: 3000px; display: block; pointer-events: none; }
/* Status bar around the measured Dynamic Island (x 154.9–238.4 pt, centre y ~29 pt). */
.pui-device .pui-statusbar-time { left: 0; width: 154.9px; top: 18px; }
.pui-device .pui-statusbar-icons { right: 40.8px; top: 22.5px; }
/* Public landing (marketing/landing.html.erb). Loaded only on that page, after application.css.
   These rules are unlayered, so they win over Tailwind's layers: keep every selector scoped to
   .lp (the landing nav + content) so the shared footer keeps its own styles.
   The phone screens use landing/tokens.css + landing/ui.css (the app's own look, under .pui). */

:root {
  --teal: #0D2F32;
  --teal-2: #14403F;
  --teal-3: #082023;
  --orange: #FCA50F;
  --orange-2: #FFB838;
  --orange-deep: #E98A00;
  --cream: #FDF1E1;
  --cream-2: #FFF8EE;
  --white: #FFFFFF;
  --ink: #0D2F32;
  --ink-2: rgba(13, 47, 50, 0.74);
  --ink-3: rgba(13, 47, 50, 0.5);
  --on-dark: #FDF1E1;
  --on-dark-2: rgba(253, 241, 225, 0.72);
  --on-dark-3: rgba(253, 241, 225, 0.36);

  --nav-h: 64px;
  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --radius: 18px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --out: cubic-bezier(0.16, 1, 0.3, 1);
}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
.marketing-body { background: var(--cream); color: var(--ink); overflow-x: clip; }
.lp { font: 500 16px/1.6 "Raleway", system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: var(--ink); }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }
.lp img, .lp svg { display: block; }
.lp a { color: inherit; }
.lp button { font: inherit; color: inherit; }
/* application.css colors and fonts every heading globally; here they follow their section. */
.lp :is(h1, h2, h3, p) { margin: 0; }
.lp :is(h1, h2, h3) { color: inherit; font-family: inherit; }

.lp .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.lp .display { font-weight: 900; letter-spacing: -0.035em; line-height: 0.98; text-wrap: balance; }
.lp .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange-deep); }
.lp .lead { font-size: clamp(16px, 0.9rem + 0.35vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.lp :focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 6px; }

.lp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 0;
  background: var(--orange); color: var(--teal); font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 8px 20px -8px rgba(233, 138, 0, 0.6);
  transition: transform 0.35s var(--spring), background-color 0.2s;
}
.lp .btn:hover { background: var(--orange-2); transform: translateY(-2px); }
.lp .btn-sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.lp .text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; font-size: 15px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--orange); }

/* Store badges (marketing/_store_badges): black artwork, same height, Google's trimmed of its padding. */
.lp .landing-store-badges { --badge-h: clamp(44px, 34px + 3vw, 52px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.lp .landing-store-badge { display: inline-flex; min-height: 0; padding: 0; border-radius: calc(var(--badge-h) * 0.2); transition: transform 0.35s var(--spring), box-shadow 0.35s; }
.lp .landing-store-badge:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(13, 47, 50, 0.45); }
.lp .landing-store-badge img { height: var(--badge-h); width: auto; }

/* ------------------------------------------------------------------ nav ------------- */
.lp.nav { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h); display: flex; align-items: center; transition: background-color 0.35s, box-shadow 0.35s, color 0.35s; }
.lp.nav.is-scrolled { background: rgba(253, 241, 225, 0.8); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); box-shadow: 0 1px 0 rgba(13, 47, 50, 0.08); }
.lp.nav.is-dark { color: var(--on-dark); background: rgba(13, 47, 50, 0.72); box-shadow: 0 1px 0 rgba(253, 241, 225, 0.08); }
.lp .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lp .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 22px; letter-spacing: -0.03em; text-decoration: none; min-height: 44px; }
.lp .brand-logo { width: 30px; height: 30px; color: var(--orange); }
.lp .nav-links { display: none; gap: 4px; }
.lp .nav-links a { padding: 10px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; transition: background-color 0.2s; }
.lp .nav-links a:hover { background: rgba(13, 47, 50, 0.07); }
.lp.nav.is-dark .nav-links a:hover { background: rgba(253, 241, 225, 0.1); }
.lp .nav-actions { display: flex; align-items: center; gap: 8px; }
/* shared/_language_toggle, restyled as the prototype's pill. */
.lp .locale-toggle { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(127, 127, 127, 0.3); background: transparent; box-shadow: none; }
.lp .locale-toggle-btn { height: auto; min-width: 0; min-height: 30px; border: 0; background: none; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: inherit; cursor: pointer; opacity: 0.6; box-shadow: none; }
.lp .locale-toggle-btn.is-active { background: var(--teal); color: var(--cream); opacity: 1; }
.lp.nav.is-dark .locale-toggle-btn.is-active { background: var(--cream); color: var(--teal); }
@media (max-width: 379px) { .lp .brand span { display: none; } }
@media (min-width: 900px) { .lp .nav-links { display: flex; } .lp .nav-row { gap: 16px; } }

/* ------------------------------------------------------------------ hero ------------ */
.lp .hero {
  position: relative; overflow: clip;
  padding-top: calc(var(--nav-h) + clamp(20px, 4vw, 48px));
  padding-bottom: clamp(40px, 6vw, 96px);
  background:
    radial-gradient(55% 60% at 80% 48%, rgba(252, 165, 15, 0.32) 0%, rgba(252, 165, 15, 0) 70%),
    radial-gradient(50% 50% at 0% 0%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
}
.lp .hero-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
.lp .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; position: relative; z-index: 2; min-width: 0; }
.lp .hero-title { font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.4rem); }
.lp .hero-title .hl { white-space: nowrap; }
.lp .hero-title .line { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lp .hero-title .line > span { display: inline-block; }
.lp .hl {
  display: inline; padding: 0 0.1em; margin: 0 -0.04em;
  background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 82% / 100% 78%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lp .hero-copy .landing-store-badges { margin-top: 4px; }

.lp .hero-art { --card-w: clamp(260px, 80vw, 480px); position: relative; display: grid; place-items: center; padding-block: 8px 4px; }
.lp .hero-stack { position: relative; z-index: 2; width: var(--card-w); display: flex; flex-direction: column; gap: clamp(34px, 3vw, 36px); }
.lp .hero-card-wrap { position: relative; }
.lp .hero-glow { position: absolute; inset: 6% 2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }
.lp .hero-card { position: relative; z-index: 2; display: block; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1600px; -webkit-tap-highlight-color: transparent; border-radius: 6%; }
.lp .hero-hint { margin-top: -8px; text-align: center; font-size: 13px; font-weight: 700; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .lp .hero-hint { display: none; } }

.lp .shock { position: absolute; left: 50%; top: 50%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; z-index: 1; }
.lp .shock circle { fill: none; stroke: var(--orange); stroke-width: 0; opacity: 0; }

.lp .notif {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px 12px 12px; border-radius: 18px; max-width: min(360px, 88%);
  background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 18px 40px -14px rgba(13, 47, 50, 0.35), 0 0 0 1px rgba(13, 47, 50, 0.05);
}
/* The card tilts −5°: its top-left and bottom-right corners are the low ones, so the
   notification sits off the top-left and the pill off the bottom-right, clear of both. */
.lp .hero-art .notif { position: relative; align-self: flex-start; margin-left: -4%; max-width: 88%; }
.lp .notif-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--cream); }
.lp .notif-icon svg { width: 26px; height: 26px; color: var(--orange); }
.lp .notif-text { display: flex; flex-direction: column; line-height: 1.25; }
.lp .notif-text small { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.lp .notif-text strong { font-size: 14px; font-weight: 800; color: var(--ink); }

.lp .pill { position: relative; z-index: 3; align-self: flex-end; margin-right: 2%; padding: 8px 18px; border-radius: 999px; background: var(--orange); color: var(--teal); font-weight: 800; font-size: 16px; box-shadow: 0 14px 30px -12px rgba(233, 138, 0, 0.7); }

@media (min-width: 1024px) {
  .lp .hero { min-height: 100svh; display: flex; align-items: center; }
  .lp .hero > .wrap { width: 100%; }
  .lp .hero-grid { grid-template-columns: 1.08fr 0.92fr; }
  .lp .hero-art .notif { margin-left: -10%; }
}

/* ------------------------------------------------------------------ gift card --------
   brand/card.html ported verbatim, scoped under .gc (1em = 1 % of the card width). */
.lp .gc-tilt { display: block; transform-style: preserve-3d; }
.lp .gc {
  --papayal-orange: #FCA50F; --surface-orange: #FFA306; --surface-amber: #F3AF40; --surface-sand: #E0BD80; --surface-mist: #D8D6D0;
  --ink-front: #EDEBE6; --ink-bright: #FFFCF3; --edge-light: rgba(255, 226, 170, 0.95);
  --edge-light-back: rgba(253, 241, 225, 0.22); --back-tone: rgba(253, 241, 225, 0.07);
  position: relative; display: block; font-size: calc(var(--card-w) / 100); width: 100em; aspect-ratio: 1.586 / 1;
  transform-style: preserve-3d; font-family: "Raleway", sans-serif; text-align: left;
}
.lp .gc-shadow { position: absolute; left: 8%; right: 8%; top: 22%; bottom: -6%; border-radius: 30px; background: rgba(13, 47, 50, 0.42); filter: blur(28px); transform: translateY(8%); }
.lp .gc .card-front, .lp .gc .card-back { position: absolute; inset: 0; border-radius: 5.5em; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lp .gc .card-back { transform: rotateY(180deg); }
.lp .gc .card-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0.28em -0.28em 0.18em -0.08em var(--edge-light), inset 0.1em -0.1em 0 0 rgba(255, 244, 222, 0.55); }
.lp .gc .card-back .card-edge { box-shadow: inset 0.22em -0.22em 0.16em -0.08em var(--edge-light-back), inset 0.08em -0.08em 0 0 rgba(253, 241, 225, 0.14); }
.lp .gc .card-front {
  background:
    radial-gradient(42% 55% at 100% 100%, rgba(216, 218, 218, 0.9) 0%, rgba(216, 218, 218, 0) 100%),
    linear-gradient(118deg, var(--surface-orange) 0%, var(--surface-orange) 30%, var(--surface-amber) 56%, var(--surface-sand) 80%, var(--surface-mist) 100%);
  color: var(--ink-front);
}
.lp .gc .card-sheen { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(38% 46% at 58% 42%, rgba(255, 236, 190, 0.14) 0%, rgba(255, 236, 190, 0) 100%), radial-gradient(22% 30% at 96% 98%, rgba(236, 240, 244, 0.35) 0%, rgba(236, 240, 244, 0) 100%), linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 40%); }
.lp .gc .card-sweep { position: absolute; inset: -20% -60%; pointer-events: none; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 62%); mix-blend-mode: soft-light; transform: translateX(-70%); }
.lp .gc .card-wordmark { position: absolute; left: 6.78%; top: 10.05%; font: 900 11.57em/1 "Raleway", sans-serif; letter-spacing: -0.005em; white-space: nowrap; }
.lp .gc .card-emblem { position: absolute; left: 86.8%; top: 19.1%; width: 11.48em; height: 11.48em; transform: translate(-50%, -50%); filter: drop-shadow(0 0 0.9em rgba(255, 244, 222, 0.85)) drop-shadow(0 0 2.8em rgba(255, 236, 200, 0.6)); }
.lp .gc .card-emblem svg, .lp .gc .card-back-logo svg { width: 100%; height: 100%; overflow: visible; }
.lp .gc .card-number { position: absolute; left: 6.47%; bottom: 21.9%; font: 500 5.72em/1 "Raleway", sans-serif; font-feature-settings: "lnum" 1; white-space: nowrap; color: var(--ink-bright); }
.lp .gc .card-number-group { display: inline-block; }
.lp .gc .card-number-group + .card-number-group { margin-left: 0.55em; }
.lp .gc .card-number-group > span { display: inline-block; width: 0.66em; text-align: center; }
.lp .gc .card-label { position: absolute; left: 7.3%; bottom: 10.07%; font: 700 4.04em/1 "Raleway", sans-serif; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; color: var(--ink-bright); }
.lp .gc .card-back { background: var(--teal); color: var(--cream); font-weight: 700; }
.lp .gc .card-back-pattern { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp .gc .card-back-pattern use { fill: none; stroke: var(--back-tone); }
.lp .gc .card-back-title { position: absolute; left: 6.8%; top: 10.6%; font-size: 2.3em; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.lp .gc .card-back-logo { position: absolute; right: 6.8%; top: 6.4%; width: 7em; height: 7em; color: var(--papayal-orange); }
.lp .gc .card-back-cats { position: absolute; left: 0; right: 0; top: 25.5%; display: flex; justify-content: center; gap: 5em; }
.lp .gc .card-back-cat { width: 21em; display: flex; flex-direction: column; align-items: center; gap: 1.5em; }
.lp .gc .card-back-icon { width: 8.4em; height: 8.4em; overflow: visible; }
.lp .gc .card-back-icon path { fill: none; stroke: var(--cream); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lp .gc .card-back-icon-pill path { stroke-width: 1.136; }
.lp .gc .card-back-cat-label { font-size: 2.6em; line-height: 1; letter-spacing: 0.01em; white-space: nowrap; }
.lp .gc .card-back-code { position: absolute; left: 0; right: 0; top: 56.6%; width: max-content; margin: 0 auto; padding: 1.9em 4em; border-radius: 2.4em; background: rgba(253, 241, 225, 0.1); display: flex; flex-direction: column; align-items: center; gap: 1.3em; }
.lp .gc .card-back-code-label { font-size: 2.1em; line-height: 1; letter-spacing: 0.04em; opacity: 0.7; }
.lp .gc .card-back-code-value { font-size: 4em; font-weight: 500; line-height: 1; letter-spacing: 0.12em; margin-right: -0.12em; font-feature-settings: "lnum" 1; white-space: nowrap; }
.lp .gc .card-back-redeem { position: absolute; left: 0; right: 0; bottom: 10.4%; font-size: 2.3em; line-height: 1; letter-spacing: 0.03em; text-align: center; white-space: nowrap; opacity: 0.7; }

/* ------------------------------------------------------------------ phone -----------
   Device art (brand/ui/device, unaltered: never tilted or put in perspective) with the
   app screens behind its transparent screen. */
.lp .phone { position: relative; height: 100%; aspect-ratio: 1470 / 3000; max-width: 100%; }
.lp .phone-screen {
  position: absolute; left: 5.102%; top: 2.2%; width: 89.796%; height: 95.6%;
  display: flex; justify-content: center; overflow: hidden; background: var(--cream);
  -webkit-mask: url(/marketing/landing/device/screen-mask.png) 0 0 / 100% 100% no-repeat; mask: url(/marketing/landing/device/screen-mask.png) 0 0 / 100% 100% no-repeat;
}
.lp .phone-stack { position: relative; flex: none; width: 393px; height: 852px; zoom: var(--ui-scale, 1); }
.lp .phone-stack .pui-screen { position: absolute; inset: 0; zoom: 1; }
.lp .phone-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lp .tap { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(13, 47, 50, 0.16); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(13, 47, 50, 0.25); pointer-events: none; z-index: 80; opacity: 0; }

/* ------------------------------------------------------------------ pinned stories -- */
.lp .story { position: relative; }
.lp .stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; display: flex; }
.lp .story-send .stage, .lp .trip, .lp .story-receive .stage {
  background:
    radial-gradient(40% 50% at 72% 52%, rgba(253, 241, 225, 0.08) 0%, rgba(253, 241, 225, 0) 70%),
    radial-gradient(60% 60% at 100% 100%, rgba(252, 165, 15, 0.12) 0%, rgba(252, 165, 15, 0) 65%),
    var(--teal);
  color: var(--on-dark);
}
.lp .stage-grid { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; padding-top: calc(var(--nav-h) + 14px); padding-bottom: 16px; }
.lp .stage-copy { position: relative; z-index: 3; }
.lp .stage-title { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4.4rem); margin-top: 6px; }
.lp .story-send .eyebrow, .lp .story-receive .eyebrow { color: var(--orange); }
.lp .stage-phone { position: relative; flex: 1 1 0; min-height: 0; display: flex; justify-content: center; }
.lp .studio-glow { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(253, 241, 225, 0.12), rgba(253, 241, 225, 0)); pointer-events: none; }
.lp .stage-phone .phone { position: relative; z-index: 2; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.35)); }
.lp .stage-phone .shock { width: 170%; }

.lp .steps { list-style: none; margin: 0; padding: 0; position: relative; }
.lp .step { display: flex; gap: 14px; }
.lp .step-num { flex: none; font-weight: 900; font-size: 14px; letter-spacing: 0.06em; color: var(--orange); padding-top: 4px; min-width: 24px; }
.lp .step h3 { font-size: clamp(18px, 1rem + 0.6vw, 24px); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }
.lp .step p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--on-dark-2); max-width: 36ch; }

/* Small screens: one caption at a time above the phone. */
@media (max-width: 899px) {
  .lp .stage-grid { width: 100%; }
  .lp .stage-title { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.6rem); }
  .lp .steps { height: 96px; margin-top: 12px; }
  .lp .step { position: absolute; inset: 0 0 auto; }
  .lp .step + .step { opacity: 0; visibility: hidden; }
  .lp .stage-phone .notif-phone { top: 6%; }
}
/* Large screens: copy left, phone right; every step listed, the active one lit. */
@media (min-width: 900px) {
  .lp .stage-grid { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 32px; }
  .lp .stage-grid.is-reversed { flex-direction: row-reverse; }
  .lp .stage-copy { flex: 1 1 0; max-width: 520px; }
  .lp .stage-phone { flex: 0 0 auto; height: min(80svh, 800px); align-self: center; width: min(42vw, 520px); }
  .lp .steps { margin-top: 32px; display: grid; gap: 22px; padding-left: 22px; }
  .lp .steps::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--on-dark-3); }
  .lp .steps::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--orange); transform-origin: top; transform: scaleY(var(--fill, 0)); }
  .lp .step { opacity: 0.32; }
  .lp .step:first-child { opacity: 1; }
}

/* receive: teal stage, cream iris opens with the thick orange ring at its edge */
.lp .iris { position: absolute; inset: 0; z-index: 1; clip-path: circle(0px at 50% 50%);
  background:
    radial-gradient(45% 55% at 30% 55%, rgba(252, 165, 15, 0.22) 0%, rgba(252, 165, 15, 0) 70%),
    radial-gradient(60% 60% at 100% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
    var(--cream); }
.lp .iris-ring { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; border-radius: 50%; border: solid var(--orange); border-width: 0; transform: translate(-50%, -50%); pointer-events: none; }
.lp .story-receive .stage-grid { color: var(--ink); }
.lp .story-receive .step p { color: var(--ink-2); }
.lp .story-receive .eyebrow { color: var(--orange-deep); }
.lp .story-receive .steps::before { background: rgba(13, 47, 50, 0.16); }
.lp .story-receive .studio-glow { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); }
.lp .story-receive .stage-phone .phone { filter: drop-shadow(0 30px 40px rgba(13, 47, 50, 0.28)); }
.lp .notif-phone { left: 50%; top: 9%; width: max-content; max-width: 92%; }

/* ------------------------------------------------------------------ trip ------------ */
.lp .trip { text-align: center; margin-top: -1px; }
.lp .trip-stage { height: 100vh; height: 100svh; display: flex; align-items: center; }
.lp .trip-board { font-weight: 900; letter-spacing: -0.035em; line-height: 1.26; font-size: clamp(2.8rem, 1.2rem + 7.5vw, 7.6rem); }
.lp .reel { height: 1.26em; overflow: hidden; color: var(--on-dark); }
.lp .reel-track { display: flex; flex-direction: column; }
/* Rows are taller than Raleway's content box (1.174em) so descenders and accents never bleed into the next row. */
.lp .reel-track > span { display: block; height: 1.26em; white-space: nowrap; }
.lp .reel-to { margin-top: -0.1em; color: var(--orange); }
.lp .reel-to .reel-track > span { display: flex; justify-content: center; align-items: center; gap: 0.16em; }
.lp .trip-arrow { width: 0.62em; height: 0.42em; flex: none; margin-top: 0.06em; fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.lp .trip-title { margin-top: clamp(28px, 5vw, 56px); font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); color: var(--on-dark-2); }

/* ------------------------------------------------------------------ merchants ------- */
.lp .merchants { background: linear-gradient(180deg, var(--white) 0%, var(--cream-2) 100%); padding-block: clamp(72px, 10vw, 140px) clamp(56px, 8vw, 110px); overflow: clip; }
.lp .section-intro { display: grid; gap: 16px; max-width: 720px; }
.lp .section-intro h2 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem); }
.lp .cats { list-style: none; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 2.4vw, 28px); }
.lp .cat { width: calc((100% - 2 * clamp(14px, 2.4vw, 28px)) / 3); max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lp .cat-mark { display: block; width: 100%; aspect-ratio: 1; border-radius: 10.4%; box-shadow: 0 18px 36px -18px rgba(13, 47, 50, 0.35), 0 0 0 1px rgba(13, 47, 50, 0.05); transition: transform 0.45s var(--spring), box-shadow 0.3s; }
.lp .cat-mark .pui-mark { width: 100%; height: 100%; }
.lp .cat:hover .cat-mark { transform: translateY(-8px) rotate(-3deg); box-shadow: 0 26px 40px -18px rgba(233, 138, 0, 0.55), 0 0 0 2px var(--orange); }
.lp .cat-label { font-weight: 800; font-size: clamp(15px, 0.8rem + 0.4vw, 18px); }
@media (min-width: 760px) { .lp .cat { width: calc((100% - 4 * clamp(14px, 2.4vw, 28px)) / 5); } }

.lp .marquee-head { margin-top: clamp(48px, 7vw, 88px); }
.lp .marquee-label { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.lp .marquee { overflow: hidden; margin-top: 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lp .marquee-track { display: flex; width: max-content; animation: lp-marquee 50s linear infinite; }
.lp .marquee:hover .marquee-track { animation-play-state: paused; }
.lp .marquee-list { display: flex; gap: 16px; padding: 14px 8px 22px; margin: 0; list-style: none; }
.lp .logo-tile { flex: none; width: clamp(150px, 12vw + 96px, 190px); aspect-ratio: 2 / 1; display: grid; place-items: center; border-radius: 20px; background: var(--white); box-shadow: 0 1px 0 rgba(13, 47, 50, 0.05), 0 14px 30px -20px rgba(13, 47, 50, 0.35); transition: transform 0.45s var(--spring), box-shadow 0.3s; }
.lp .logo-tile:hover { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--orange), 0 20px 34px -18px rgba(233, 138, 0, 0.55); }
.lp .logo-tile img { width: auto; max-width: 74%; max-height: 64%; object-fit: contain; }
.lp .logo-name { padding-inline: 12px; font-weight: 900; font-size: 17px; letter-spacing: -0.02em; text-align: center; line-height: 1.15; }
@keyframes lp-marquee { to { transform: translateX(-50%); } }
.lp .merchant-notes { margin-top: 12px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.lp .merchant-notes p { font-size: 14px; color: var(--ink-2); max-width: 60ch; }
.lp .merchant-empty { margin-top: 24px; text-align: center; color: var(--ink-2); }

/* ------------------------------------------------------------------ faq ------------- */
.lp .faq { background: var(--cream-2); padding-block: clamp(56px, 8vw, 120px); }
.lp .faq-grid { display: grid; gap: 32px; }
.lp .faq h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); max-width: 14ch; }
.lp .faq-list { display: grid; gap: 10px; }
.lp .faq details { background: var(--white); border-radius: var(--radius); box-shadow: 0 1px 0 rgba(13, 47, 50, 0.06), 0 10px 28px -20px rgba(13, 47, 50, 0.3); transition: box-shadow 0.3s; }
.lp .faq details[open] { box-shadow: 0 0 0 2px var(--orange), 0 16px 36px -22px rgba(233, 138, 0, 0.6); }
.lp .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-weight: 800; font-size: 17px; line-height: 1.4; }
.lp .faq summary::-webkit-details-marker { display: none; }
.lp .faq-icon { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--cream); position: relative; transition: transform 0.4s var(--spring), background-color 0.2s; }
.lp .faq-icon::before, .lp .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--teal); }
.lp .faq-icon::after { transform: rotate(90deg); }
.lp .faq details[open] .faq-icon { transform: rotate(45deg); background: var(--orange); }
.lp .faq-a { padding: 0 22px 20px; color: var(--ink-2); }
.lp .faq-a a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (min-width: 900px) { .lp .faq-grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; } }

/* ------------------------------------------------------------------ end card -------- */
.lp .end {
  position: relative; overflow: clip; text-align: center;
  padding-block: clamp(80px, 12vw, 160px);
  background:
    radial-gradient(70% 55% at 50% 115%, rgba(252, 165, 15, 0.5) 0%, rgba(252, 165, 15, 0) 70%),
    linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
}
.lp .end-inner { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.lp .end-logo { position: relative; width: clamp(120px, 22vw, 200px); aspect-ratio: 1; margin-bottom: 12px; }
.lp .end-mark { position: relative; z-index: 2; width: 100%; height: 100%; color: var(--orange); filter: drop-shadow(0 18px 30px rgba(233, 138, 0, 0.35)); }
.lp .end-logo .shock { width: 320%; }
.lp .end h2 { font-size: clamp(2.5rem, 1.4rem + 4.8vw, 5.6rem); max-width: 12ch; }
.lp .end .lead { margin-inline: auto; }
.lp .end-actions { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 8px; }
.lp .end .landing-store-badges { justify-content: center; }
.lp .end-qr { display: none; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 18px; background: var(--white); font-weight: 700; font-size: 14px; max-width: 280px; text-align: left; box-shadow: 0 12px 30px -18px rgba(13, 47, 50, 0.4); }
@media (min-width: 900px) and (hover: hover) { .lp .end-qr { display: inline-flex; } }

/* ------------------------------------------------------------------ reduced motion -- */
.lp .static-steps { display: grid; gap: 40px; margin-top: 32px; }
.lp .static-step { display: grid; justify-items: center; gap: 16px; text-align: center; }
.lp .static-step .phone { height: min(560px, 70svh); }
@media (min-width: 900px) { .lp .static-steps { grid-template-columns: repeat(4, 1fr); } .lp .static-step .phone { height: 420px; } }
.lp .is-static .stage { height: auto; display: block; }
.lp .is-static .stage-copy { max-width: none; }
.lp .static-step h3 { font-size: 20px; font-weight: 800; }
.lp .static-step p { margin-top: 4px; opacity: 0.75; }
.lp .is-static .stage-grid { display: block; padding-block: calc(var(--nav-h) + 40px) 64px; }
.lp .is-static .stage-phone, .lp .is-static .steps, .lp .is-static .iris-ring { display: none; }
.lp .is-static .iris { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .lp .marquee { -webkit-mask-image: none; mask-image: none; }
  .lp .marquee-track { animation: none; width: auto; justify-content: center; }
  .lp .marquee-list { flex-wrap: wrap; justify-content: center; }
  .lp .marquee-list[aria-hidden], .lp .logo-tile[aria-hidden] { display: none; }
}
/*
 * Public landing only (marketing/landing.html.erb). The phone screens' look comes from the
 * app kit (landing/tokens.css + landing/ui.css, copied from papayal-motion/brand/ui and scoped
 * under .pui); the page itself is landing/site.css.
 *



 */