/* Sign up / Log in popup.
   Desktop follows Julienne's split modal: an inset visual panel (~44%) beside a centred form column on cream. Phones
   get Cal AI's bottom sheet. Controls are one family: white pills on the cream panel with a 1px drop line, 56px tall
   (the email pill on the phone step and the search are 52), fully round; cards (the weekly email switch, the country
   groups, the dropdown) are 20 to 24px round. The only filled buttons are Apple's black pill (Apple's rule) and the
   orange call to action, which sits on a 3px ledge and sinks when pressed. Spacing runs on 8px: 8 inside a pair,
   16 between groups, 24 between the heading block and the form. No hover lift anywhere. */
.au {
  --ink: #191C1F; --ink-2: #3A3631; --mute: #635E57; --mute-2: #8A837A; --cream: #F7F2E8; --panel: #F5F1EB;
  --orange: #F2711E; --ledge: #BC5717; --halo: rgba(242, 113, 30, .16); --bad: #C2410C; --bad-halo: rgba(194, 65, 12, .12);
  --sh: 0 1px 0 rgba(28, 28, 28, .08); --rim: inset 0 0 0 1px rgba(28, 28, 28, .1);
  --pill: 52px; --ease: cubic-bezier(.22, .8, .24, 1);
  --au-kb: 0px; /* phones: on-screen keyboard height, set by auth.js */
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0;
  background: transparent; display: grid; place-items: center; color: var(--ink); opacity: 0;
  transition: opacity .25s ease, overlay .25s allow-discrete, display .25s allow-discrete;
}
.au:not([open]) { display: none; }
.au[open] { opacity: 1; }
@starting-style { .au[open] { opacity: 0; } }
.au::backdrop { background: rgba(14, 12, 10, .52); backdrop-filter: blur(10px) saturate(.9); }

.au-card {
  position: relative; display: grid; grid-template-columns: 44fr 56fr; width: min(1000px, 100%); height: min(704px, calc(100dvh - 48px));
  overflow: hidden; border-radius: 32px; background: var(--panel); font-family: "Inter", system-ui, sans-serif;
  box-shadow: 0 40px 100px rgba(14, 12, 10, .3), 0 2px 8px rgba(14, 12, 10, .1);
  transform: translateY(12px) scale(.98); transition: transform .45s var(--ease);
}
.au[open] .au-card { transform: none; }
@starting-style { .au[open] .au-card { transform: translateY(12px) scale(.98); } }

/* ---- visual side: the reel's "Say it" exchange on cream ---- */
.au-art { position: relative; display: flex; flex-direction: column; margin: 10px 0 10px 10px; padding: 30px 30px 32px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 70% at 85% 30%, #FFE3CC 0%, rgba(255, 227, 204, 0) 60%), var(--cream); }
.au-art::before { content: ""; position: absolute; inset: auto -30% -18% -30%; height: 60%; background: url("./images/food-pattern.svg") center / cover no-repeat;
  opacity: .05; filter: invert(1); pointer-events: none; }
.au-logo, .au-mark { display: flex; align-items: center; gap: 7px; font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.au-logo img, .au-mark img { width: 21px; height: 24px; object-fit: contain; }
.au-chat { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px 0; }
/* Bubble metrics from the app's onboarding Bubble (components/onboarding/TextBubble.tsx): radius 18, padding 6 x 12,
   tail 6pt out and 1pt below the corner, mirrored for the other side. */
.au-b { position: relative; max-width: 82%; padding: 6px 12px; border-radius: 18px; font-size: 15px; line-height: 22px; letter-spacing: -.2px; }
.au-b.me { align-self: flex-end; background: #FF751F; color: #fff; }
.au-b.them { align-self: flex-start; background: #fff; color: #1C1C1C; box-shadow: 0 1px 2px rgba(42, 35, 32, .06); }
.au-tail { position: absolute; bottom: -1px; width: 16px; height: 21px; }
.au-b.me .au-tail { right: -6px; fill: #FF751F; }
.au-b.them .au-tail { left: -6px; transform: scaleX(-1); fill: #fff; }
.au-ui { margin-top: 6px; border-radius: 22px; background: #fff; color: #1C1C1C; padding: 6px 0 8px; box-shadow: 0 18px 40px rgba(110, 60, 20, .14), 0 2px 6px rgba(42, 35, 32, .06); }
.au-ui-h { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 10px 16px 8px; }
.au-ui-h b { font-size: 16px; font-weight: 600; }
.au-ui-h small { grid-row: 2; font-size: 14px; color: #767676; }
.au-ui-add { grid-row: 1 / 3; grid-column: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #FF751F; color: #fff; }
.au-ui-add svg { width: 18px; height: 18px; fill: currentColor; }
.au-ui-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 16px; }
.au-ui-row + .au-ui-row::before { content: ""; position: absolute; left: 68px; right: 16px; top: 0; height: 1px; background: rgba(28, 28, 28, .07); }
.au-ui-row img { width: 40px; height: 40px; border-radius: 14px; object-fit: cover; flex: none; }
.au-ui-row span { display: grid; gap: 1px; min-width: 0; }
.au-ui-row b { font-size: 15px; font-weight: 600; line-height: 20px; }
.au-ui-row small { font-size: 13.5px; color: #767676; line-height: 18px; }
.au-ui-mac { display: flex; gap: 12px; padding: 8px 16px 6px; font-size: 12.5px; color: #4F4F4F; }
.au-ui-mac span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.au-ui-mac i { width: 7px; height: 7px; border-radius: 50%; }
.au-ui-mac .p i { background: #4C8DF6; } .au-ui-mac .c i { background: #E8A33D; } .au-ui-mac .f i { background: #E86A9A; }
.au-art-copy { position: relative; display: grid; gap: 6px; }
.au-art-copy b { font-size: 22px; line-height: 27px; font-weight: 600; letter-spacing: -.5px; }
.au-art-copy span { font-size: 14.5px; line-height: 21px; color: var(--mute); max-width: 300px; }
/* the exchange plays in once each time the popup opens */
.au[open] .au-b, .au[open] .au-ui { animation: au-pop .5s var(--ease) both; }
.au[open] .au-b.me { animation-delay: .15s; }
.au[open] .au-b.them { animation-delay: .5s; }
.au[open] .au-ui { animation-delay: .85s; }
@keyframes au-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }

/* ---- form side ---- */
.au-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 24px 32px; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.au-main::-webkit-scrollbar { display: none; }
.au-grab { display: none; }
.au-head { position: relative; display: flex; align-items: center; justify-content: space-between; height: 40px; flex: none; }
.au-back, .au-x { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--ink);
  box-shadow: var(--sh); cursor: pointer; transition: box-shadow .15s ease; }
.au-back:hover, .au-x:hover { box-shadow: var(--sh), var(--rim); }
.au-back svg { width: 20px; height: 20px; } .au-x svg { width: 16px; height: 16px; }
.au-back[hidden] { display: grid; visibility: hidden; }
.au-x { margin-left: auto; }
.au-mark { display: none; }
.au-prog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 6px; transition: opacity .25s ease; }
.au-prog i { width: 24px; height: 4px; border-radius: 4px; background: #E4DDD3; transition: background-color .35s ease; }
.au-prog i.on { background: var(--orange); }
.au[data-mode="signin"] .au-prog, .au[data-step="choose"] .au-prog { opacity: 0; }

.au-stage { position: relative; width: 100%; max-width: 384px; margin: auto; padding: 16px 0 8px; flex: none; }
.au-step { width: 100%; }
.au-step[hidden] { display: none; }
.au-h { margin: 0; text-align: center; font: 600 30px/36px "Inter", system-ui, sans-serif; letter-spacing: -.8px; color: var(--ink); outline: none; text-wrap: balance; }
.au-sub { margin: 8px auto 24px; max-width: 336px; text-align: center; font-size: 15px; line-height: 22px; color: var(--mute); text-wrap: balance; hyphens: none; -webkit-hyphens: none; }
.au-sub strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }

.au-form { display: grid; gap: 16px; }
.au-apple + .au-google { margin-top: -6px; } /* the two social pills are one pair */

/* buttons: white pill, Apple's black pill, the orange call to action on its ledge */
.au-social, .au-mail a { display: flex; align-items: center; justify-content: center; gap: 10px; height: var(--pill); padding: 0 24px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); box-shadow: var(--sh); font: 600 16px/1 "Inter", system-ui, sans-serif; letter-spacing: -.16px; text-decoration: none;
  cursor: pointer; transition: box-shadow .15s ease, transform .12s ease, background-color .15s ease; -webkit-tap-highlight-color: transparent; }
.au-social svg, .au-mail svg { width: 18px; height: 18px; flex: none; }
.au-social:hover, .au-mail a:hover { box-shadow: var(--sh), var(--rim); }
.au-apple { background: #000; color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.au-apple svg { width: 18px; height: 18px; margin-top: -2px; }
.au-apple:hover { background: #1C1C1E; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.au-social:active, .au-mail a:active { transform: translateY(1px); box-shadow: none; }
.au .oj-cta { height: var(--pill) !important; border: 0 !important; border-radius: 999px !important; background: var(--orange) !important; color: #fff !important;
  box-shadow: 0 1px 0 rgba(150, 60, 10, .3), 0 6px 16px -8px rgba(242, 113, 30, .55) !important; filter: none !important; font: 600 16px/1 "Inter", system-ui, sans-serif !important; letter-spacing: -.16px !important;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease !important; -webkit-tap-highlight-color: transparent; }
.au .oj-cta:hover { background: #F47D2E !important; }
.au .oj-cta:active { transform: translateY(1px) !important; box-shadow: none !important; }
.au .oj-cta[disabled], .au-social[disabled] { opacity: .5; cursor: default; transform: none !important; }
.au-cta { margin-bottom: 3px; } /* room for the ledge */

.au-or { display: flex; align-items: center; justify-content: center; height: 16px; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--mute-2); }

/* floating-label pill field */
.au-fl { position: relative; }
.au-fl input { width: 100%; height: var(--pill); padding: 22px 22px 6px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--sh);
  font: 400 16px/22px "Inter", system-ui, sans-serif; outline: none; -webkit-appearance: none; appearance: none;
  transition: box-shadow .15s ease; -webkit-user-select: text; user-select: text; }
.au-fl label { position: absolute; left: 23px; top: 17px; font-size: 16px; line-height: 22px; color: var(--mute); pointer-events: none; transform-origin: 0 0;
  transition: transform .2s var(--ease), color .2s ease; }
.au-fl input:focus + label, .au-fl input:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.75); }
.au-fl input::placeholder { color: transparent; transition: color .15s ease; }
.au-fl input:focus::placeholder { color: #ADA69C; }
.au-fl input:hover { box-shadow: var(--sh), var(--rim); }
.au-fl input:focus, .au-group:focus-within { box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 4px var(--halo); }
.au-fl input[aria-invalid="true"], .au-group[data-invalid="true"] { box-shadow: inset 0 0 0 2px var(--bad), 0 0 0 4px var(--bad-halo); }

/* phone step: the email in a pill, then flag + code and the number as one pill */
.au-via { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 18px; border-radius: 999px; background: #fff; box-shadow: var(--sh);
  font-size: 15px; color: var(--ink-2); }
.au-via:empty { display: none; }
.au-via svg { width: 18px; height: 18px; flex: none; color: var(--mute); }
.au-via span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-via b { font-weight: 600; color: var(--ink); }
.au-via button { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--panel); color: var(--ink);
  font: 600 14px/1 "Inter", system-ui, sans-serif; cursor: pointer; transition: background-color .15s ease; }
.au-via button:hover { background: #ECE6DE; }

.au-group { display: flex; align-items: stretch; height: var(--pill); border-radius: 999px; background: #fff; box-shadow: var(--sh); transition: box-shadow .15s ease; }
.au-group:hover { box-shadow: var(--sh), var(--rim); }
.au-region { position: relative; display: flex; align-items: center; gap: 8px; flex: none; padding: 0 12px 0 16px; border: 0; border-radius: 999px 0 0 999px;
  background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s ease; }
.au-region::after { content: ""; position: absolute; right: 0; top: 14px; bottom: 14px; width: 1px; background: rgba(28, 28, 28, .1); }
.au-region:hover, .au-region[aria-expanded="true"] { background: #FAF7F3; }
.au-region-v { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.au-region > svg { width: 16px; height: 16px; color: var(--mute); transition: transform .2s var(--ease); }
.au-region[aria-expanded="true"] > svg { transform: rotate(180deg); }
.au-group .au-fl { flex: 1; min-width: 0; }
.au-group .au-fl input, .au-group .au-fl input:hover, .au-group .au-fl input:focus, .au-group .au-fl input[aria-invalid="true"] {
  height: 100%; padding: 22px 22px 6px 14px; border-radius: 0 999px 999px 0; background: transparent; box-shadow: none; }
.au-group .au-fl label { left: 15px; }
.au-flag { width: 22px; height: 22px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #E9E4DC;
  box-shadow: 0 0 0 1px rgba(28, 28, 28, .06); font-size: 8.5px; font-weight: 700; letter-spacing: .2px; color: var(--mute); }
.au-flag img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.au-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: -8px 0 0; font-size: 13px; line-height: 18px; color: var(--mute); }
.au-hint svg { width: 14px; height: 14px; flex: none; }

/* weekly email: a switch card (unticked by default) */
.au-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px; background: #fff; box-shadow: var(--sh);
  cursor: pointer; transition: box-shadow .15s ease; -webkit-tap-highlight-color: transparent; }
.au-opt:hover { box-shadow: var(--sh), var(--rim); }
.au-opt:has(input:focus-visible) { box-shadow: var(--sh), inset 0 0 0 2px var(--ink); }
.au-opt-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FFF0E5; color: #E8661A; }
.au-opt-ic svg { width: 20px; height: 20px; }
.au-opt-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.au-opt-t b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.au-opt-t small { font-size: 13px; line-height: 18px; color: var(--mute); }
.au-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.au-toggle { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: #E2DCD3; transition: background-color .2s ease; }
.au-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .22s cubic-bezier(.3, .7, .3, 1); }
.au-opt input:checked ~ .au-toggle { background: var(--orange); }
.au-opt input:checked ~ .au-toggle::after { transform: translateX(18px); }
.au-skip { justify-self: center; border: 0; background: none; padding: 8px 12px; color: var(--mute); font: 600 14px/1 "Inter", system-ui, sans-serif; cursor: pointer; }
.au-skip:hover { color: var(--ink); }
.au-skip[hidden] { display: none; }

/* ---- country code dropdown: anchored to the number pill (auth.js sets --pop-x/y/w and data-place) ---- */
.au-pop { position: absolute; z-index: 2; left: var(--pop-x, 50%); top: var(--pop-y, 50%); width: var(--pop-w, 384px); padding: 8px; border-radius: 24px;
  background: #F8F5F0; box-shadow: 0 0 0 1px rgba(28, 28, 28, .06), 0 2px 6px rgba(40, 28, 14, .08), 0 20px 48px rgba(40, 28, 14, .2);
  font-family: "Inter", system-ui, sans-serif; color: var(--ink); transform-origin: 50% 0; }
/* while it is open, the rest of the form steps back so only the number pill and the list read as active */
.au-step[data-step="choose"] > *, .au-form > *, .au-signup > *, .au-foot, .au-err { transition: opacity .2s ease; }
.au[data-pop="open"] .au-step[data-step="choose"] > :not(.au-form), .au[data-pop="open"] .au-form > :not(.au-signup), .au[data-pop="open"] .au-signup > :not(#auTelBox),
.au[data-pop="open"] .au-foot, .au[data-pop="open"] .au-err { opacity: .4; }
.au-pop[data-place="above"] { translate: 0 -100%; transform-origin: 50% 100%; }
.au-pop[hidden] { display: none; }
.au-search { position: relative; }
.au-search svg { position: absolute; left: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--mute); pointer-events: none; }
.au-search input { width: 100%; height: 52px; padding: 0 16px 0 46px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: var(--sh);
  font: 400 16px/1 "Inter", system-ui, sans-serif; outline: none; -webkit-appearance: none; appearance: none; -webkit-user-select: text; user-select: text;
  transition: box-shadow .15s ease; }
.au-search input::placeholder { color: var(--mute-2); }
.au-search input:focus { box-shadow: var(--sh), inset 0 0 0 1.5px rgba(28, 28, 28, .16); }
.au-list { margin: 0; padding: 0 0 4px; list-style: none; max-height: var(--pop-list, 300px); overflow: auto; overscroll-behavior: contain; scrollbar-width: none;
  --ft: 0px; --fb: 0px; transition: --ft .2s ease, --fb .2s ease;
  -webkit-mask-image: linear-gradient(transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent); }
@property --ft { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fb { syntax: "<length>"; inherits: false; initial-value: 0px; }
.au-list[data-fade-top="true"] { --ft: 16px; }
.au-list[data-fade-end="true"] { --fb: 32px; }
.au-list::-webkit-scrollbar { display: none; }
.au-list .au-list-h { padding: 16px 8px 8px; font-size: 12.5px; line-height: 16px; font-weight: 600; letter-spacing: .01em; color: var(--mute-2); }
.au-list .au-list-g > ul { list-style: none; margin: 0; padding: 4px; border-radius: 20px; background: #fff; box-shadow: var(--sh); }
.au-list .au-list-g li { position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 14px;
  font-size: 15px; font-weight: 500; color: var(--ink); cursor: pointer; }
.au-list .au-list-g li > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-list .au-list-g li + li::before { content: ""; position: absolute; left: 50px; right: 12px; top: 0; height: 1px; background: rgba(28, 28, 28, .06); }
.au-list .au-list-g li.is-active { background: #F8F5F1; }
.au-list .au-list-g li.is-active::before, .au-list .au-list-g li.is-active + li::before,
.au-list .au-list-g li[aria-selected="true"]::before, .au-list .au-list-g li[aria-selected="true"] + li::before { opacity: 0; }
.au-list .au-list-g li[aria-selected="true"] { background: #FFF0E5; font-weight: 600; }
.au-list .au-flag { width: 26px; height: 26px; }
.au-list li small { padding: 4px 8px; border-radius: 999px; background: var(--panel); font-size: 13px; line-height: 16px; font-weight: 600; color: #6A655E; font-variant-numeric: tabular-nums; }
.au-list li[aria-selected="true"] small { background: #fff; color: #C2560F; }
.au-list li .au-tick { width: 18px; height: 18px; flex: none; color: var(--orange); display: none; }
.au-list li[aria-selected="true"] .au-tick { display: block; }
.au-list .au-list-none { padding: 24px 16px; text-align: center; font-size: 14px; line-height: 20px; color: var(--mute); }

/* ---- sent ---- */
.au-step--sent { text-align: center; }
.au-env { position: relative; display: grid; place-items: center; width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 24px;
  background: linear-gradient(#FF8A3D, #F06A14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 var(--ledge), 0 14px 30px rgba(240, 106, 20, .25); }
.au-env > svg { width: 48px; height: 48px; }
.au-env i { position: absolute; right: -6px; bottom: -6px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #1F9D55; border: 3px solid var(--panel); }
.au-env i svg { width: 16px; height: 16px; }
.au-step--sent:not([hidden]) .au-env { animation: au-env .6s var(--ease) both; }
.au-step--sent:not([hidden]) .au-env i { animation: au-tick .4s .35s var(--ease) both; }
@keyframes au-env { from { transform: translateY(8px) scale(.85); opacity: 0; } }
@keyframes au-tick { from { transform: scale(0); } }
.au-step--sent .au-sub { margin-bottom: 8px; }
.au-sent-note { margin: 0 auto 24px; max-width: 320px; font-size: 14px; line-height: 20px; color: var(--mute); }
.au-mail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.au-mail:empty { display: none; }
.au-mail a { font-size: 15px; padding: 0 16px; }
.au-sent-row { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 16px; }

/* text buttons and links: ink, a quiet underline */
.au-link, .au-switch button, .au-legal a { border: 0; background: none; padding: 0; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(25, 28, 31, .35); text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.au-link:hover, .au-switch button:hover, .au-legal a:hover { text-decoration-color: currentColor; }
.au-link { padding: 8px 4px; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.au-link[disabled] { color: var(--mute); text-decoration: none; cursor: default; }

/* ---- messages and footer ---- */
.au-err { width: 100%; max-width: 384px; margin: 16px auto 0; padding: 12px 16px; border-radius: 16px; background: #FFF1E9; box-shadow: inset 0 0 0 1px rgba(194, 65, 12, .1);
  font-size: 14px; line-height: 20px; color: #9A330A; flex: none; text-align: center; text-wrap: pretty; }
.au-err[hidden] { display: none; }
.au-err a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.au-foot { width: 100%; max-width: 384px; margin: 0 auto; padding-top: 16px; text-align: center; flex: none; }
.au-switch { margin: 0; font-size: 15px; line-height: 22px; color: var(--mute); }
.au-legal { margin: 10px auto 0; max-width: 300px; text-align: center; text-wrap: balance; font-size: 13px; line-height: 19px; color: var(--mute); }
.au-legal a { font-weight: 500; }
.au-legal[hidden], .au-switch[hidden], .au-foot[hidden] { display: none; }

/* keyboard focus: one ink ring; fields show the orange ring instead */
.au :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.au .oj-cta:focus-visible { outline: 2px solid var(--ink) !important; outline-offset: 3px; }
.au-fl input:focus-visible, .au-search input:focus-visible, .au-h:focus-visible, .au-opt input:focus-visible { outline: none; }
.au-region:focus-visible { outline-offset: -4px; border-radius: 999px; }

/* Autofill: paint the field white from the inside, which the browser's tint cannot override, and keep ink text. */
.au input:-webkit-autofill, .au input:-webkit-autofill:hover, .au input:-webkit-autofill:focus, .au input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: #191C1F !important; caret-color: #191C1F; background-color: #fff !important;
  transition: background-color 600000s 0s, color 600000s 0s !important; }
.au input:autofill { background-color: #fff !important; box-shadow: 0 0 0 1000px #fff inset !important; }

/* tablet: one column, no visual */
@media (max-width: 860px) {
  .au-card { grid-template-columns: 1fr; width: min(480px, 100%); height: auto; max-height: calc(100dvh - 48px); }
  .au-art { display: none; }
  .au-stage { padding-top: 8px; }
}
/* phone: bottom sheet above the keyboard; the country dropdown becomes a sheet over the sheet */
@media (max-width: 560px) {
  .au { place-items: end center; padding: 0 0 var(--au-kb); }
  .au-card { width: 100%; max-height: calc(100dvh - var(--au-kb) - 8px); border-radius: 28px 28px 0 0; transform: translateY(100%); transition-duration: .5s; }
  @starting-style { .au[open] .au-card { transform: translateY(100%); } }
  .au-main { padding: 8px 20px calc(24px + env(safe-area-inset-bottom)); }
  .au-grab { display: block; width: 36px; height: 5px; margin: 0 auto 8px; border-radius: 5px; background: #DCD5CC; flex: none; }
  .au-mark { display: flex; position: absolute; left: 2px; font-size: 17px; }
  .au:not([data-step="choose"]) .au-mark { display: none; }
  .au-back[hidden] { display: none; }
  .au-stage { padding: 16px 0 0; margin: 0 auto; }
  .au-h { font-size: 26px; line-height: 32px; letter-spacing: -.6px; }
  .au-env { width: 72px; height: 72px; border-radius: 22px; }
  .au-env > svg { width: 42px; height: 42px; }
  .au-mail { grid-auto-flow: row; }
  .au-pop { left: 8px; right: 8px; top: auto; bottom: calc(8px + var(--au-kb) + env(safe-area-inset-bottom)); width: auto; translate: none; padding: 20px 8px 8px; border-radius: 28px;
    background: var(--panel); transform-origin: 50% 100%;
    box-shadow: 0 0 0 100vmax rgba(14, 12, 10, .3), 0 -8px 32px rgba(14, 12, 10, .16); }
  .au-pop::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 5px; background: #DCD5CC; }
  .au-list { max-height: min(300px, calc(100dvh - var(--au-kb) - 180px)); }
}
@media (hover: none) { .au-list .au-list-g li.is-active:not([aria-selected="true"]) { background: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .au, .au-card, .au-fl label, .au-toggle, .au-toggle::after, .au-region > svg { transition: none; }
  .au[open] .au-b, .au[open] .au-ui, .au-step--sent:not([hidden]) .au-env, .au-step--sent:not([hidden]) .au-env i { animation: none; }
}

/* No text selection inside the popup (as on the rest of Home); fields stay selectable. */
.au, .au * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.au input, .au textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Owner: no focus rings on fields; the country dropdown flat (no shadows, borders or edge fade), one white panel
   with the rows on it and a quiet hover. */
.au-fl input:focus, .au-group:focus-within, .au-search input:focus { box-shadow: var(--sh) !important; outline: none !important; }
.au-group .au-fl input:focus { box-shadow: none !important; }
.au-fl input:focus-visible, .au-search input:focus-visible, .au-region:focus-visible { outline: none !important; }
.au-pop { background: #fff !important; box-shadow: none !important; border: 0 !important; }
.au-pop .au-search input, .au-pop .au-search input:focus { background: #F5F1EB !important; box-shadow: none !important; }
.au-list { -webkit-mask-image: none !important; mask-image: none !important; }
.au-list .au-list-g > ul { background: transparent !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
.au-list .au-list-g li + li::before { display: none; }
.au-list .au-list-g li.is-active { background: #F7F4F0; }
.au-list li small { background: #F5F1EB; }

/* Dropdown type: tighter tracking and proportional figures, so names and codes read like the rest of the popup. */
.au-pop, .au-pop * { font-variant-numeric: normal !important; font-feature-settings: normal !important; }
.au-list .au-list-g li { letter-spacing: -.02em; }
.au-list li small { letter-spacing: -.01em; }
.au-list .au-list-h { letter-spacing: -.01em !important; }
.au-pop .au-search input { letter-spacing: -.015em; }
.au-group#auTelBox .au-region-v, .au-group#auTelBox .au-fl--in input { letter-spacing: -.015em; font-variant-numeric: normal; }


/* ===== Fourth take (owner: "can look a lot better", no "or"). =====
   Left: a full-bleed warm panel with the logo and the line up top, and the chat inside an app screen that rises from
   the bottom edge. Right: one tight column, the social pair, a breath, then email and its button as one group. */
.au-art { margin: 0 !important; border-radius: 0 !important; padding: 36px 36px 0 !important; gap: 0; justify-content: flex-start !important;
  background: radial-gradient(90% 60% at 70% 100%, #FFB98A 0%, rgba(255, 185, 138, 0) 70%), linear-gradient(180deg, #FFF3E8 0%, #FFE2CB 100%) !important; }
.au-art::before { inset: 0 !important; height: auto !important; background: url("./images/food-pattern.svg") 0 0 / 520px auto repeat !important; opacity: .07 !important; filter: none !important; }
.au-art .au-logo { margin-bottom: 40px; }
.au-art .au-logo span { font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.au-art-copy { gap: 10px !important; max-width: 340px; }
.au-art-copy b { font-size: 30px !important; line-height: 34px !important; letter-spacing: -.9px !important; color: #1C1714; }
.au-art-copy span { font-size: 15.5px !important; line-height: 23px !important; color: #6B5A4C !important; }
.au-screen { position: relative; margin: auto -2px -36px; padding: 0 14px 52px; border-radius: 38px 38px 0 0; background: #F5F1EB;
  border: 8px solid #fff; border-bottom: 0; box-shadow: 0 30px 70px rgba(140, 70, 20, .22), 0 2px 8px rgba(140, 70, 20, .08); }
.au-screen-bar { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 12px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; color: #1C1C1C; }
.au-screen-bar i { width: 64px; height: 20px; border-radius: 999px; background: #1C1C1C; position: absolute; left: 50%; top: 8px; translate: -50% 0; }
.au-screen .au-chat { flex: none; padding: 10px 0 0; gap: 8px; }
.au-screen .au-ui { box-shadow: 0 1px 2px rgba(42, 35, 32, .06) !important; }

.au-h { font-size: 28px !important; line-height: 34px !important; letter-spacing: -.7px !important; }
.au-sub { margin-bottom: 28px !important; }
.au-apple + .au-google { margin-top: -6px !important; }
.au-google + .au-fl, .au-social + .au-fl { margin-top: 12px; }
.au-fl + .oj-cta, .au-fl + .au-cta { margin-top: -6px; }
@media (max-width: 809px) { .au-art { display: none !important; } }

/* Email first (owner), then the Apple and Google pair after a breath. The food artwork stays and reads a bit stronger. */
.au-google + .au-fl, .au-social + .au-fl { margin-top: 0 !important; }
.au-fl + .oj-cta, .au-fl + .au-cta { margin-top: -6px !important; }
.au-cta + .au-apple { margin-top: 12px !important; }
.au-apple + .au-google { margin-top: -6px !important; }
.au-art::before { opacity: .09 !important; filter: invert(1) !important; z-index: 0; }

/* The reply's attachment: the app's menu-scan feature image (assets/features/menu-scan-wide.jpg), as a photo bubble. */
.au-shot { align-self: flex-start; width: 92%; margin-top: 2px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(42, 35, 32, .08); animation: au-pop .5s var(--ease) .85s both; }
.au-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .au-shot { animation: none; } }

/* The art headline in the site's heading face (Phudu Black, uppercase), as Home's headings. */
.au-art-copy b { font-family: "Phudu", "Arial Narrow", sans-serif !important; font-weight: 900 !important; text-transform: uppercase; font-size: 40px !important; line-height: 38px !important; letter-spacing: 0 !important; }

/* one step: the number and the weekly email sit in the first screen's form, sign up only */
.au-signup { display: contents; }
.au-signup[hidden] { display: none; }
/* the weekly email: a plain checkbox under the number, unticked by default */
.au-check { display: flex; align-items: center; white-space: nowrap; gap: 10px; padding: 0 4px; font: 500 14px/20px "Inter", system-ui, sans-serif; color: var(--mute); cursor: pointer; }
.au-check input { appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #CFC6BB; cursor: pointer;
  display: grid; place-items: center; transition: background-color .15s ease, box-shadow .15s ease; }
.au-check input::after { content: ""; width: 10px; height: 6px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); opacity: 0; }
.au-check input:checked { background: var(--orange); box-shadow: none; }
.au-check input:checked::after { opacity: 1; }
.au-check input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.au-sub[hidden] { display: none; }

/* One rhythm for the sign-up screen, replacing the stacked -6px / 12px / 3px nudges above: 20px under the heading,
   12px between every control, and the footer sits 20px under the last button. Heading, form and footer centre as one
   block, so the spare height goes above and below it rather than into a gap before the footer. */
.au-h:has(+ .au-sub[hidden]) { margin-bottom: 20px !important; }
.au-form { gap: 12px !important; }
.au .au-form > *, .au .au-form > .au-social, .au .au-signup > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.au-check { padding: 2px 4px; }
.au-stage { margin: auto auto 0 !important; padding-bottom: 0 !important; }
.au-foot { margin: 0 auto auto !important; padding-top: 16px !important; }

/* Country list, second pass: flat as before (no shadows or edge fade), but quieter rows. The dial code is plain grey
   text on the right instead of a chip, the chosen row is a soft orange tint with the tick, rows are 44px, and the
   controls under the number hide while the list is open, so nothing pokes out around it. */
.au-pop { padding: 6px !important; border-radius: 22px !important; }
.au-pop .au-search input { height: 44px !important; font-size: 15px !important; padding-left: 42px !important; }
.au-pop .au-search svg { left: 16px; width: 16px; height: 16px; }
.au-list .au-list-h { padding: 14px 10px 6px !important; font-size: 12.5px; font-weight: 600; color: var(--mute-2); }
.au-list .au-list-g li { min-height: 44px !important; gap: 12px !important; padding: 0 12px 0 10px !important; border-radius: 12px !important; font-size: 15px; cursor: pointer; }
.au-list .au-flag { width: 22px !important; height: 22px !important; }
.au-list li small, .au-list li[aria-selected="true"] small { padding: 0 !important; background: none !important; font-size: 14px; font-weight: 500; color: var(--mute-2) !important; }
.au-list .au-list-g li.is-active { background: #F6F2ED !important; }
.au-list .au-list-g li[aria-selected="true"] { background: #FFF1E7 !important; font-weight: 600; }
.au-list .au-list-g li[aria-selected="true"] small { color: #C2560F !important; }
.au-list li .au-tick { width: 16px !important; height: 16px !important; margin-left: -4px; }
.au[data-pop="open"] .au-signup > .au-check, .au[data-pop="open"] .au-form > :not(.au-signup):not(.au-fl), .au[data-pop="open"] .au-foot { opacity: 0 !important; pointer-events: none; }
.au-list .au-list-g:first-child > ul { padding-top: 6px !important; }
/* search: no fill, just a hairline under it separating it from the list */
.au-pop .au-search { border-bottom: 1px solid rgba(28, 28, 28, .08); margin: 0 -6px; padding: 0 6px 6px; }
.au-pop .au-search input, .au-pop .au-search input:focus { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.au-pop .au-search svg { top: calc(50% - 3px); }
/* the checkbox line is shorter than the pills, so it gets a little air either side to sit evenly between them */
.au .au-signup > .au-check { margin: 2px 0 !important; }