/* ==========================================================================
   prompts-page.css — "Prompt to Save"
   The page is one conversation, so it is one object: a centred 720 column,
   a single card that holds the ledger of answers, the current question, the
   answer (chips, a field, or the finished controls) and, once something is
   chosen, the prompt itself growing on a warm inset at the bottom. Stores are
   one quiet line beneath. Two type registers only: Gelica for the headline
   and the question, Inter for everything else (17 / 15 / 13).
   Live tokens via var(--color-*); the sheet's cream is the live sunshine value.
   ========================================================================== */
:root {
  --c3-page: light-dark(#fffcf4, #000);            /* the cream page (marketing's --cream) / black by night */
  --c3-sheet: light-dark(#fbf8f0, #171812);        /* the prompt box: a shade warmer than the cream page; a warm near-black by night */
  --c3-sheet-line: light-dark(#efe9da, #2b2c22);   /* its hairline */
  --c3-blank: light-dark(#f5eea9, #4a4520);        /* a blank in the prompt: mustard-50 */
  --c3-blank-empty: light-dark(#faf5cf, #3a3720);
  --c3-line: var(--color-pikachu-200);
  /* type scale (display / section / question-sub / body / ui / meta) */
  --c3-fs-1: 34px; --c3-fs-2: 26px; --c3-fs-3: 20px; --c3-fs-body: 17px; --c3-fs-ui: 14px; --c3-fs-meta: 13px;
  /* three inks: text, secondary text, meta */
  --c3-ink: var(--color-pikachu-1000); --c3-ink-2: var(--color-pikachu-700); --c3-ink-3: var(--color-pikachu-500);
  /* two radii: the card, and the blocks inside it */
  --c3-r-card: 22px; --c3-r-block: 14px;
  /* spacing: the card's padding, the gap between sections, the page's foot — everything else is 8/12/16/20/24 */
  --c3-card-pad: 36px; --c3-section: 64px; --c3-foot: 48px;
  --c3-ease: cubic-bezier(.2, .7, .2, 1);
}

body[data-page="prompts"], body[data-page="prompts"] header.bg-white, body[data-page="prompts"] main.bg-white, body[data-page="prompts"] footer.bg-white, body[data-page="prompts"] .bg-gray-50 { background-color: var(--c3-page) !important; }

/* ---- the page column --------------------------------------------------------- */
.c3 {
  position: relative; z-index: 0;
  width: min(720px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0 0 var(--c3-foot);
  font-family: var(--font-inter);
  color: var(--color-pikachu-1000);
  -webkit-font-smoothing: antialiased;
}
.c3 a { text-decoration: none; color: inherit; }
.c3 button { font: inherit; color: inherit; cursor: pointer; background: transparent; border: 0; padding: 0; margin: 0; -webkit-tap-highlight-color: transparent; }
.c3 :focus { outline: none; }
.c3 :focus-visible { outline: 2px solid var(--color-mint-1000); outline-offset: 2px; }

/* ---- the page title: one line above the card ------------------------------------------- */
/* the headline sits on a full-bleed Minty-green band; the card overlaps its foot */
/* ---- the hero: marketing's copy on the page itself, the dog beneath ---------------------------- */
.c3-top { position: relative; padding: 44px 0 0; text-align: center; }
.c3-top[hidden] { display: none; }
.c3-top[hidden] + .c3-cols, .c3-top[hidden] ~ .c3-cols { margin-top: 32px; }
.c3-eyebrow { margin: 0 0 12px; font-size: var(--c3-fs-ui); font-weight: 600; letter-spacing: .01em; color: var(--color-mint-1000); }
.c3-tm { font-size: .72em; font-weight: 500; margin-left: 1px; }   /* the glyph already sits at cap height; no superscript */
.c3-h1 { max-width: 20ch; margin: 0 auto; font-family: var(--font-gelica); font-weight: 600; font-size: 56px; line-height: 1.05; letter-spacing: -.02em; color: var(--c3-ink); text-wrap: balance; }
.c3-steps { margin: 0 0 16px; font-family: var(--font-gelica); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; color: var(--c3-ink); }
.c3-steps[hidden] { display: none; }
.c3-support { max-width: 32em; margin: 14px auto 0; font-size: 15px; line-height: 1.55; color: var(--c3-ink-2); }
.c3-hero-dog { display: block; width: 320px; max-width: 64%; height: auto; margin: 24px auto 0; }

/* ---- the install overlay: full screen, right after an action opens a new tab, so it's what they see coming back ---- */
.c3-pop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(20, 30, 24, .48);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .25s var(--c3-ease);
}
.c3-pop[data-shown="true"] { opacity: 1; }
.c3-pop[hidden] { display: none; }
.c3-pop-card {
  position: relative; width: min(440px, 100%); padding: 36px 36px 28px; text-align: center;
  border-radius: 24px; background: var(--minty-surface); border: 1px solid var(--c3-line);
  transform: translateY(10px) scale(.98); transition: transform .25s var(--c3-ease);
}
.c3-pop[data-shown="true"] .c3-pop-card { transform: none; }
.c3 .c3-pop-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 9999px; font-size: 20px; line-height: 1; color: var(--color-pikachu-500); }
.c3 .c3-pop-x:hover { color: var(--color-pikachu-1000); background: var(--color-pikachu-100); }
.c3-pop-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 6px 12px 6px 9px; border-radius: 9999px; background: var(--color-mint-100); font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--color-mint-1000); }
.c3-pop-eyebrow svg { width: 15px; height: 15px; }
.c3-pop-h { margin: 0 0 10px; font-family: var(--font-gelica); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -.005em; color: var(--color-pikachu-1000); text-wrap: balance; }
.c3-pop-p { margin: 0 auto 22px; max-width: 30em; font-size: 15px; line-height: 1.55; color: var(--color-pikachu-700); }
.c3 .c3-pop-later { display: inline-block; margin: 14px 0 0; font-size: 13px; font-weight: 500; color: var(--color-pikachu-500); }
.c3 .c3-pop-later:hover { color: var(--color-pikachu-1000); }
.c3-install { display: flex; align-items: center; justify-content: center; gap: 12px; }
.c3-install p { display: none; }
.c3-install-link { font-size: 14px; font-weight: 500; color: var(--color-mint-1000); }
.c3-install-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the footer's own badge, cloned at runtime: pixel-identical, recoloured to the page's ink */
.c3 .c3-badge { color: var(--color-pikachu-1000); border-color: var(--color-pikachu-1000) !important; transition: background-color .15s var(--c3-ease); }
.c3 .c3-badge:hover { background: var(--color-pikachu-100) !important; }

/* screen-reader status line for copy / share confirmations */
.c3-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the "Which store are we missing?" dialog */
.c3-req-card { text-align: left; }
.c3-req-card .c3-pop-h { text-align: left; font-size: 24px; }
.c3-req-card .c3-pop-p { text-align: left; margin: 0 0 16px; max-width: none; }
.c3-req-label { display: block; margin: 12px 0 6px; font-size: var(--c3-fs-meta); font-weight: 600; color: var(--c3-ink); }
.c3 .c3-req-field { width: 100%; height: 46px; font-size: 16px; }
.c3 .c3-req-go { display: block; width: 100%; height: 46px; margin-top: 18px; border-radius: 12px; background: var(--color-mint-1000); color: var(--color-mint-button-text); font-size: var(--c3-fs-ui); font-weight: 600; }
.c3 .c3-req-go:hover { background: var(--color-mint-1100); }
.c3-req-card .c3-pop-later { display: block; width: 100%; text-align: center; }
.c3-req-done { margin: 12px 0 0; font-size: var(--c3-fs-body); line-height: 1.5; color: var(--color-mint-1000); }

/* "Save the prompt. Earn the Cashback." */
.c3-join { margin-top: var(--c3-section); }
.c3-cols + .c3-join { margin-top: 24px; }
.c3-join-card { padding: 28px 32px; border-radius: var(--c3-r-card); background: light-dark(var(--color-mint-1000), #1b3f2f); color: #fff; }
.c3-join-card h2 { margin: 0 0 8px; font-family: var(--font-gelica); font-size: var(--c3-fs-2); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: #fff; }
.c3-join-card p { margin: 0 0 18px; max-width: 46em; font-size: var(--c3-fs-body); line-height: 1.5; color: #d7fbe6; }
.c3 .c3-join-btn { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 9999px; background: #fff; color: #246849; font-size: var(--c3-fs-ui); font-weight: 600; transition: background-color .15s var(--c3-ease); }
.c3 .c3-join-btn:hover { background: #d7fbe6; }

/* the page's H1 on a store / situation page: a small label above the card's content */
.c3-pagetitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the page's H1 for search and screen readers; not drawn */
.c3-pagetitle[hidden] { display: none; }
/* the 404 notice */
.c3-notice { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--c3-r-block); background: var(--color-mint-100); font-size: var(--c3-fs-ui); color: var(--c3-ink); text-align: center; }

/* a shared link's greeting */
.c3-shared { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 16px; font-size: var(--c3-fs-meta); font-weight: 500; color: var(--c3-ink-2); }
.c3-shared img { width: 18px; height: 18px; }

/* ---- the card: the whole conversation in one object ------------------------------ */
.c3-cols {
  display: block;
  margin-top: 24px;
  padding: var(--c3-card-pad);
  border: 1px solid var(--c3-line);
  border-radius: var(--c3-r-card);
  background: var(--minty-surface);
}
.c3-cols { display: flex; flex-direction: column; position: relative; }
/* top-right of the card: Share prompt · Start over, two matching quiet controls */
.c3-topactions { display: flex; align-items: center; margin: -8px 0 12px; }   /* ‹ All stores, top-left of the card */
.c3 .c3-topact { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 0; font-size: var(--c3-fs-ui); font-weight: 600; color: var(--color-mint-1000); transition: color .15s var(--c3-ease); }
.c3 .c3-topact:hover { color: var(--color-mint-1100); text-decoration: underline; text-underline-offset: 3px; }
.c3 .c3-topact[hidden] { display: none; }
.c3-topact-glyph { display: inline-flex; font-size: 18px; line-height: 1; }
.c3 .c3-topact[aria-expanded="true"] { color: var(--c3-ink); }
/* with a merchant: the logo left, Start over right, on one row above the chips */
.c3-ledgercell:has(.c3-storehead) { grid-template-columns: minmax(0, 1fr) auto; }
.c3-ledgercell:has(.c3-storehead) .c3-storehead { grid-column: 1 / -1; grid-row: 1; margin: 0 0 20px; }
.c3-ledgercell:has(.c3-storehead) .c3-ledger { grid-column: 1; grid-row: 2; }
.c3-storehead-domain { font-size: var(--c3-fs-meta); font-weight: 500; color: var(--c3-ink-3); letter-spacing: .02em; }
.c3 .c3-storehead-offers { margin-top: 2px; font-size: var(--c3-fs-meta); font-weight: 500; color: var(--c3-ink-3); transition: color .15s var(--c3-ease); }   /* a quiet line under the logo */
.c3 .c3-storehead-offers:hover { color: var(--color-mint-1000); text-decoration: underline; text-underline-offset: 3px; }

.c3-left { display: block; }
.c3-right { display: block; margin-top: 32px; }
/* complete: ledger → the prompt → sharpen / start over beneath it */
.c3-cols.is-complete .c3-right { order: 2; margin-top: 0; }
.c3-cols.is-complete .c3-left { order: 3; }
.c3-cols.is-complete .c3-ledger { margin-bottom: 24px; }
.c3-cols.is-complete .c3-qrow { margin-bottom: 0; }   /* the question is hidden; its row keeps no space */
.c3-cols.is-complete .c3-sharpen { margin-top: 22px; }
.c3-right[hidden] { display: none; }

/* the ledger: your answers as a trail of chips at the card's top; each chip edits its answer */
.c3-ledger { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; }
.c3-ledger[hidden] { display: none; }
.c3-ledger li { display: inline-flex; max-width: 100%; }
.c3 .c3-led-chip {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  height: 30px; padding: 0 10px 0 12px;
  border: 1px solid var(--c3-line); border-radius: 9999px; background: var(--minty-surface-2);
  font-size: 13px; font-weight: 500; line-height: 1; color: var(--color-pikachu-1000);
  transition: border-color .15s var(--c3-ease), background-color .15s var(--c3-ease);
}
.c3 .c3-led-chip:hover { border-color: var(--color-pikachu-500); background: var(--color-pikachu-100); }
.c3-led-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28ch; }
.c3-led-e { display: inline-flex; color: var(--color-pikachu-500); }
.c3-led-e svg { width: 12px; height: 12px; }
.c3 .c3-led-chip:hover .c3-led-e { color: var(--color-pikachu-1000); }

.c3-ledgercell { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
/* the merchant header: a large centred logo with the domain beneath */
.c3 .c3-storehead { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 56px; margin: 0 0 18px; padding: 0; }
.c3-storehead-img { display: block; max-height: 64px; max-width: 300px; width: auto; height: auto; object-fit: contain; }
.dark .c3-storehead-img { padding: 10px 16px; border-radius: 12px; background: var(--minty-logo-bg); }
.c3 .c3-storehead.is-icon .c3-storehead-img { height: 64px; border-radius: 16px; }
.c3-storehead-name { font-family: var(--font-gelica); font-weight: 500; font-size: 22px; line-height: 1.15; letter-spacing: -.008em; color: var(--c3-ink); }
.c3-cols:not(.is-pick) .c3-ledgercell { margin-bottom: 24px; }
.c3-cols:not(.is-pick) .c3-ledgercell:has(.c3-storehead):has(.c3-ledger[hidden]) { margin-bottom: 8px; }
.c3-cols:not(.is-pick) .c3-ledger { margin: 0; padding: 0; border-bottom: 0; grid-column: 1; }

/* the question row: the question left, "Surprise me" on its baseline at the right, only while choosing */
.c3-qrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.c3-qrow .c3-q { margin-bottom: 0; }
/* the home card: a full-width search bar leads, the chips follow */
.c3-cols.is-pick .c3-qrow { display: block; margin-bottom: 16px; }
.c3-cols.is-pick .c3-rowtools, .c3-cols.is-pick .c3-storesearch { display: block; width: 100%; }
.c3-cols.is-pick .c3-fieldwrap .c3-field--mini { height: 48px; padding-left: 40px; font-size: 16px; border-radius: 14px; }
.c3-cols.is-pick .c3-storesearch-glyph { left: 14px; }
.c3-storesearch .c3-field { min-width: 0; }
.c3-q {
  margin: 0 0 20px;
  font-family: var(--font-gelica);
  font-weight: 500;
  font-size: var(--c3-fs-2);
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--color-pikachu-1000);
}
.c3-q[hidden] { display: none; }
.c3 .c3-surprise { flex: none; font-size: 13px; line-height: 1.5; color: var(--color-pikachu-500); transition: color .15s var(--c3-ease); white-space: nowrap; }
.c3 .c3-surprise:hover { color: var(--color-pikachu-1000); }
.c3 .c3-surprise[hidden] { display: none; }
.c3-surprise-glyph { margin-right: 6px; }

/* sliders: one row, horizontal scroll, snap, the right edge fades to say "more" */
.c3-slider {
  display: flex; flex-wrap: nowrap; gap: 10px;
  width: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 56px), transparent);
}
.c3-slider::-webkit-scrollbar { display: none; }
.c3-slider > * { flex: none; scroll-snap-align: start; }
/* every row header ends the same way: [search box] [row action], flush to the content edge */
.c3-rowtools { display: inline-flex; align-items: center; gap: 16px; flex: none; min-width: 0; }
.c3-rowtools[hidden] { display: none; }
.c3 .c3-rowaction { min-width: 84px; text-align: right; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--color-pikachu-700); white-space: nowrap; transition: color .15s var(--c3-ease); }
.c3 .c3-rowaction:hover { color: var(--color-pikachu-1000); }
.c3 .c3-surprise { color: var(--color-pikachu-700); }
.c3 .c3-surprise[hidden] { display: none; }

/* "Shop by store": a second row under the situations */
/* the store search box, in the row header */
.c3-storesearch { position: relative; width: 240px; margin: 0; }
.c3-storesearch-glyph { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--color-pikachu-500); pointer-events: none; }
.c3-storesearch-glyph svg { width: 15px; height: 15px; display: block; }
.c3 .c3-fieldwrap .c3-field--mini { height: 36px; padding: 0 12px 0 32px; border-radius: 9999px; font-size: 14px; }   /* wins over the Next-button padding */
.c3-storesearch .c3-ta { top: calc(100% + 6px); left: auto; right: 0; width: 300px; text-align: left; }
/* the brand wall: category filter, 4 × 3 logo tiles, "See all" */
.c3-filter { gap: 8px; margin: 0 0 8px; }
.c3 .c3-fchip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 11px; border-radius: 9999px; border: 1px solid var(--c3-line); background: var(--minty-surface-2); font-size: 13px; font-weight: 500; line-height: 1; color: var(--color-pikachu-1000); white-space: nowrap; transition: color .15s var(--c3-ease), background-color .15s var(--c3-ease), border-color .15s var(--c3-ease); }
.c3 .c3-fchip:hover { border-color: var(--color-pikachu-500); background: var(--color-pikachu-100); }
.c3 .c3-fchip[aria-selected="true"] { color: var(--color-mint-1000); background: var(--color-mint-100); border-color: var(--color-mint-900); }
.c3-fchip-ico { display: inline-flex; width: 16px; height: 16px; color: var(--color-pikachu-700); }
.c3-fchip-ico svg { width: 16px; height: 16px; }
.c3 .c3-fchip[aria-selected="true"] .c3-fchip-ico { color: var(--color-mint-1000); }
.c3-fchip-n { font-size: 11px; font-weight: 400; color: var(--color-pikachu-500); }
.c3 .c3-fchip[aria-selected="true"] .c3-fchip-n { color: var(--color-mint-900); }
.c3-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; width: 100%; }
.c3-wall-foot[hidden] { display: none; }
.c3 .c3-wtile { position: relative; display: block; min-width: 0; padding: 0; }
/* the store's name: a label that rises over the plate on hover / focus; on touch screens a caption beneath it */
.c3-wname {
  position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 8px; border-radius: 8px;
  background: var(--c3-ink); color: var(--minty-surface);
  font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s var(--c3-ease), transform .15s var(--c3-ease);
}
.c3 .c3-wtile:hover .c3-wname, .c3 .c3-wtile:focus-visible .c3-wname { opacity: 1; transform: none; }
@media (hover: none) {
  .c3 .c3-wall-more, .c3 .c3-wall-ask, .c3 .c3-skip, .c3 .c3-surprise, .c3 .c3-pop-later { min-height: 44px; }   /* finger-sized text buttons */
  .c3-wname { position: static; display: block; padding: 6px 2px 0; background: transparent; color: var(--c3-ink-3); opacity: 1; transform: none; }
}
.c3-wlogo {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10;
  border: 1px solid var(--c3-line); border-radius: var(--c3-r-block); background: var(--minty-logo-bg); overflow: hidden;
  transition: border-color .15s var(--c3-ease), transform .15s var(--c3-ease), box-shadow .15s var(--c3-ease);
}
.c3-wlogo img { max-width: 86%; max-height: 68%; width: auto; height: auto; object-fit: contain; display: block; }   /* trimmed by tools/build_logos.py: wide marks fill the width, square ones the height */
.c3-wlogo.is-small img { border-radius: 12px; }
.c3-wmono { display: block; max-width: 86%; padding: 0 4px; font-family: var(--font-gelica); font-size: 17px; font-weight: 600; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #3d3c37; }   /* no art: the name as a wordmark, ink on the light plate in both themes */
.c3-wmono.is-long { font-size: 13px; letter-spacing: .05em; }
.c3-wlogo.is-fav { flex-direction: column; gap: 8px; }
.c3-wfav { width: 36px; height: 36px; border-radius: 9px; object-fit: contain; }
.c3-wfav-name { max-width: 88%; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; color: #3d3c37; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.c3 .c3-wtile:hover .c3-wlogo { border-color: var(--color-pikachu-400); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(20, 30, 20, .06); }
/* pills still used by the merchant header */
.c3-wall-foot { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; margin-top: 20px; padding: 16px 20px; border-radius: var(--c3-r-block); background: var(--color-mint-100); font-size: var(--c3-fs-ui); font-weight: 500; color: var(--c3-ink); }
.c3-wlogo--ask { border-style: dashed; background: transparent; }
.c3-wplus { font-family: var(--font-gelica); font-size: 30px; line-height: 1; color: var(--color-mint-1000); }
.c3 .c3-wtile--ask .c3-wname { position: static; display: block; padding: 6px 2px 0; background: transparent; color: var(--c3-ink-2); opacity: 1; transform: none; }
.c3-wall-empty { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px; text-align: center; color: var(--c3-ink-2); font-size: var(--c3-fs-body); }
.c3-wall-empty p { margin: 0; flex-basis: 100%; }
.c3 .c3-wall-anyway { height: 36px; padding: 0 14px; border-radius: 9999px; border: 1px solid var(--c3-line); background: var(--minty-surface-2); font-size: var(--c3-fs-ui); font-weight: 500; color: var(--c3-ink); }
.c3 .c3-wall-anyway:hover { border-color: var(--color-pikachu-500); background: var(--color-pikachu-100); }
.c3 .c3-wall-ask { font-size: var(--c3-fs-meta); font-weight: 500; color: var(--c3-ink-3); transition: color .15s var(--c3-ease); }
.c3 .c3-wall-ask:hover { color: var(--c3-ink); text-decoration: underline; text-underline-offset: 3px; }
.c3 .c3-wall-ask.c3-wall-ask--btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 9999px; background: var(--color-mint-1000); color: var(--color-mint-button-text); font-size: var(--c3-fs-ui); font-weight: 600; line-height: 1; }
.c3 .c3-wall-ask.c3-wall-ask--btn:hover { background: var(--color-mint-1100); color: var(--color-mint-button-text); text-decoration: none; }
.c3-ta-ask .c3-ta-name { color: var(--color-mint-1000); }
.c3-request { width: 100%; margin-top: 12px; padding: 18px; border: 1px dashed var(--color-pikachu-300); border-radius: var(--c3-r-block); }
.c3-request[hidden] { display: none; }
.c3-request-h { margin: 0 0 10px; font-size: var(--c3-fs-ui); font-weight: 500; color: var(--c3-ink); }
.c3-request-row { display: flex; gap: 8px; }
.c3-request-row[hidden] { display: none; }
.c3 .c3-request-field { height: 44px; font-size: 15px; }
.c3 .c3-request-go { flex: none; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--color-mint-1000); color: var(--color-mint-button-text); font-size: var(--c3-fs-ui); font-weight: 600; white-space: nowrap; }
.c3 .c3-request-go:hover { background: var(--color-mint-1100); }
.c3-request-done { margin: 0; font-size: var(--c3-fs-ui); line-height: 1.5; color: var(--color-mint-1000); }
.c3-request-done[hidden] { display: none; }

.c3-answer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; position: relative; }
.c3-fieldwrap { position: relative; width: 100%; }
.c3-field {
  display: block;
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 18px;
  border: 1.5px solid var(--color-pikachu-300);
  border-radius: var(--c3-r-block);
  background: var(--minty-surface-2);
  font: 400 17px/1 var(--font-inter);
  color: var(--color-pikachu-1000);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s var(--c3-ease), background-color .15s var(--c3-ease);
}
.c3-field::placeholder { color: var(--color-pikachu-500); opacity: 1; }
.c3-field:hover { border-color: var(--color-pikachu-400); }
.c3-field:focus { outline: 0; border-color: var(--color-mint-900); background: var(--color-mint-100); }
.c3-field::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.c3-answer-row { display: flex; align-items: baseline; gap: 18px; margin-top: 2px; }
/* Next: a send button inside the field. Quiet outline until the blank has text, then filled mint. */
.c3-fieldwrap .c3-field { padding-right: 116px; }
.c3 .c3-next {
  position: absolute; right: 8px; top: 8px;
  height: 40px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 16px 0 18px;
  border-radius: 9999px;
  border: 1px solid var(--color-pikachu-300);
  background: var(--minty-surface-2);
  font-size: 15px; font-weight: 500; line-height: 1;
  color: var(--color-pikachu-700);
  transition: background-color .15s var(--c3-ease), border-color .15s var(--c3-ease), color .15s var(--c3-ease), transform .15s var(--c3-ease);
}
.c3-next-arrow { display: inline-block; transition: transform .15s var(--c3-ease); }
.c3 .c3-next:hover { border-color: var(--color-pikachu-500); color: var(--color-pikachu-1000); }
.c3 .c3-next.is-armed { background: var(--color-mint-1000); border-color: var(--color-mint-1000); color: var(--color-mint-button-text); font-weight: 600; }
.c3-next-spark { display: inline-flex; } .c3-next-spark svg { width: 14px; height: 14px; }
.c3 .c3-next.is-generate { padding-left: 14px; }
.c3 .c3-next.is-armed:hover { background: var(--color-mint-1100); border-color: var(--color-mint-1100); }
.c3 .c3-next.is-armed:hover .c3-next-arrow { transform: translateX(2px); }
.c3 .c3-next:active { transform: scale(.98); }
.c3 .c3-skip { font-size: 13px; line-height: 1.4; color: var(--color-pikachu-500); padding: 6px 2px; transition: color .15s var(--c3-ease); }
.c3 .c3-skip:hover { color: var(--color-pikachu-1000); }

/* the store typeahead under the field */
.c3-ta {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 6px);
  z-index: 5;
  list-style: none;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--color-pikachu-200);
  border-radius: 14px;
  background: var(--minty-surface-2);
}
.c3-ta[hidden] { display: none; }
.c3-ta-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; font-size: 15px; line-height: 1.4; color: var(--color-pikachu-1000); cursor: pointer; }
.c3-ta-item.is-active, .c3-ta-item:hover { background: var(--color-mint-100); color: var(--color-mint-1000); }
.c3-ta-meta { font-size: 13px; color: var(--color-pikachu-700); white-space: nowrap; }
.c3-ta-item.is-active .c3-ta-meta { color: var(--color-mint-1000); }

/* situations: a quiet category strip. All ten in one row, in marketing's order: a line icon over a one-word label,
   grey until hovered, the chosen one green with a short rule beneath. On phones, five across in two rows. */
.c3-tiles.c3-slider { display: grid; grid-template-columns: repeat(var(--c3-tcols, 10), minmax(0, 1fr)); gap: 4px; overflow: visible; padding: 0; -webkit-mask-image: none; mask-image: none; }
.c3 .c3-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0; padding: 8px 0 0;
  border-radius: 10px;
  font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: -.005em; text-align: center;
  color: var(--c3-ink-2);
  transition: color .15s var(--c3-ease);
}
.c3-tile-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: inherit; transition: transform .15s var(--c3-ease); }
.c3-tile svg { width: 26px; height: 26px; display: block; }
.c3-tile-label { padding-bottom: 8px; border-bottom: 2px solid transparent; white-space: nowrap; transition: border-color .15s var(--c3-ease); }
.c3 .c3-tile:hover { color: var(--c3-ink); }
.c3 .c3-tile:hover .c3-tile-ico { transform: translateY(-2px); }
.c3 .c3-tile:hover .c3-tile-label { border-color: var(--c3-line); }
.c3 .c3-tile[aria-checked="true"], .c3 .c3-tile[aria-checked="true"]:hover { color: var(--color-mint-1000); }
.c3 .c3-tile[aria-checked="true"] .c3-tile-label { border-color: var(--color-mint-1000); }
@media (max-width: 720px) {
  .c3-tiles.c3-slider { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 4px; }
}

/* complete: the optional answers as "+ …" pills under the prompt */
.c3-sharpen { margin: 22px 0 0; }
.c3-sharpen[hidden] { display: none; }
.c3-sharpen-label { margin: 0 0 8px; font-size: var(--c3-fs-meta); line-height: 1.5; color: var(--c3-ink-2); }
.c3-sharpen-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 0; }
.c3 .c3-sharpen-link { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px dashed var(--color-pikachu-300); border-radius: 9999px; background: var(--minty-surface-2); font-size: var(--c3-fs-meta); font-weight: 500; line-height: 1; color: var(--c3-ink); white-space: nowrap; transition: border-color .15s var(--c3-ease), background-color .15s var(--c3-ease), color .15s var(--c3-ease); }
.c3 .c3-sharpen-link:hover { border-style: solid; border-color: var(--color-mint-900); background: var(--color-mint-100); color: var(--color-mint-1000); }

/* ---- the prompt: a warm inset at the foot of the card ------------------------- */
.c3-sheet-eyebrow { margin: 0 0 4px; font-size: var(--c3-fs-meta); font-weight: 600; color: var(--color-mint-1000); }
.c3-sheet-sub { margin: 0 0 14px; font-size: var(--c3-fs-meta); line-height: 1.5; color: var(--c3-ink-2); }
.c3-sheet {
  background: var(--c3-sheet);
  border: 1px solid var(--c3-sheet-line);
  border-radius: var(--c3-r-block);
  padding: 28px;
}
.c3-prompt {
  margin: 0;
  max-width: 30em;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -.003em;
  color: var(--color-pikachu-1000);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.c3-tail { color: var(--color-pikachu-700); }
/* what the prompt will say once the current blank is answered: present, but stepped back */
.c3-ghost { color: var(--color-pikachu-500); }
.c3-pill.c3-ghost.is-empty { border-color: var(--color-pikachu-300); color: var(--color-pikachu-400); }
.c3-pill.c3-ghost:not(.is-empty) { background: transparent; box-shadow: inset 0 0 0 1px var(--color-pikachu-200); color: var(--color-pikachu-500); }
.c3-pill {
  display: inline-block;
  vertical-align: baseline;
  background: var(--c3-blank);
  color: var(--c3-ink);
  font-weight: 500;
  line-height: 1.35;
  padding: 2px 10px;
  margin: 0 1px;
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px var(--color-mint-200);
  white-space: nowrap;
  transition: background-color .2s var(--c3-ease), color .2s var(--c3-ease), box-shadow .2s var(--c3-ease);
}
.c3-pill.is-tight { margin-right: -3px; }
.c3-pill[data-slot="store"] { background: var(--color-mint-100); color: var(--color-mint-1000); }
/* the editable blank: type into the prompt itself */
.c3-pill.c3-pill--edit { min-width: 9ch; cursor: text; outline: none; -webkit-user-modify: read-write-plaintext-only; }
.c3-pill.c3-pill--edit.is-empty::before { content: attr(data-ph); color: var(--c3-ink-2); font-style: normal; }
.c3-pill.c3-pill--edit.is-empty { background: var(--c3-blank-empty); box-shadow: none; }
.c3-pill.c3-pill--edit:focus { box-shadow: inset 0 0 0 2px var(--color-mint-900); background: var(--c3-blank); }
.c3-pill.c3-pill--edit:focus::before { content: none; }
.c3-unit { white-space: nowrap; }
/* a long answer flows with the text, each line fragment its own rounded pill */
.c3-pill.is-long { display: inline; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.c3-unit:has(.c3-pill.is-long) { white-space: normal; }
.c3-pill.is-empty {
  background: transparent;
  color: var(--color-pikachu-500);
  font-weight: 400;
  box-shadow: none;
  border: 1.5px dotted var(--color-pikachu-500);
  padding: 0.5px 12px;
  min-width: 5em;
  text-align: center;
}
.c3-pill.is-active { animation: c3-pulse 1.6s ease-in-out infinite; }
.c3-pill.is-live { box-shadow: inset 0 0 0 1.5px var(--color-mint-900); }
@keyframes c3-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.c3-fade { opacity: 0; transform: translateY(2px); animation: c3-in .35s var(--c3-ease) forwards; }
@keyframes c3-in { to { opacity: 1; transform: none; } }
.c3-rise { animation: c3-rise .26s var(--c3-ease) both; }
@keyframes c3-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* the four actions in one row: Copy filled, Ask Minty / Ask ChatGPT / Share outlined with their marks */
.c3-actions { position: relative; display: flex; flex-wrap: nowrap; gap: 8px; margin: 24px 0 0; }
.c3-actions[hidden] { display: none; }
.c3-actions > .c3-act { flex: 1 1 0; min-width: 0; }
.c3-actions > .c3-act.is-fill { flex: 1.6 1 0; }
.c3-actions > .c3-act--share { flex: 0 0 auto; padding: 0 18px; }
.c3 .c3-act {
  height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 12px;
  border: 1px solid light-dark(#dcd5c4, #33332f); border-radius: 9999px;
  background: light-dark(#fff, #1e1e1c);
  font-size: var(--c3-fs-ui); font-weight: 500; line-height: 1;
  color: var(--c3-ink);
  white-space: nowrap;
  transition: background-color .15s var(--c3-ease), border-color .15s var(--c3-ease), color .15s var(--c3-ease), transform .15s var(--c3-ease);
}
.c3 .c3-act:hover { background: light-dark(#fbf8f0, #292926); border-color: light-dark(#c9c1ac, #47463f); }
/* Ask Minty: the brand's light mint with deep-pine text; Ask ChatGPT and Share: white on the cream, a latte hairline */
.c3 #c3-ask { background: light-dark(#d7fbe6, #1d4734); border-color: light-dark(#b9efd1, #2a6a4c); color: light-dark(#0a4830, #c3f9dc); }
.c3 #c3-ask:hover { background: light-dark(#c3f9dc, #245a40); border-color: light-dark(#9fe3bd, #2f7a57); }
.c3 .c3-act:active { transform: scale(.98); }
.c3 .c3-act.is-fill { background: light-dark(#00754a, #c3f9dc); border-color: light-dark(#00754a, #c3f9dc); color: light-dark(#fff, #0a4830); font-weight: 600; padding: 0 14px; }
.c3 .c3-act.is-fill:hover { background: light-dark(#0a4830, #dcfce9); border-color: light-dark(#0a4830, #dcfce9); }
.c3 .c3-act[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.c3 .c3-act--share.is-copied { color: var(--color-mint-1000); }
.c3-act svg { width: 16px; height: 16px; flex: none; }
.c3-act-ico { width: 18px; height: 18px; flex: none; border-radius: 5px; display: inline-flex; }
.c3-act-ico--svg svg { width: 18px; height: 18px; color: var(--c3-ink); }
.c3-act-ico--minty { width: 22px; height: 22px; border-radius: 0; }   /* the companion mark, sized to the button's text */


/* ---- situations: their own card between the hero and the store card (same surface, so the hero ends where the cards begin) ---- */
.c3-sits { margin-top: 40px; padding: var(--c3-card-pad); border: 1px solid var(--c3-line); border-radius: var(--c3-r-card); background: var(--minty-surface); }
.c3-sits .c3-stores-row { margin-bottom: 16px; }
.c3-sits + .c3-cols { margin-top: 16px; }
.c3-sits[hidden] { display: none; }
.c3-stores { margin-top: var(--c3-section); }
.c3-stores[hidden] { display: none; }
.c3-stores.is-pick { margin-top: 0; }
.c3-stores.is-pick .c3-stores-row, .c3-stores.is-pick .c3-marks { display: none; }
.c3-stores-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 0 20px; }
.c3-sits h2, .c3-stores h2 { margin: 0; font-family: var(--font-gelica); font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--c3-ink); }   /* one size for every section heading, the card's sub-headline included */
.c3-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.c3-marks .c3-wtile:nth-child(n+9) { display: none; }
.c3 .c3-mark { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 72px; }
.c3-mark-ico {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--c3-line);
  border-radius: 9999px;
  background: var(--minty-logo-bg);
  overflow: hidden;
  transition: border-color .15s var(--c3-ease);
}
.c3-mark-ico img { width: 24px; height: 24px; border-radius: 6px; display: block; object-fit: contain; }
.c3-mark-mono { font-family: var(--font-gelica); font-size: 18px; line-height: 1; color: var(--color-pikachu-700); }
.c3 .c3-mark:hover .c3-mark-ico { border-color: var(--color-pikachu-500); }
.c3-mark-name { font-size: 12px; line-height: 1.3; color: var(--color-pikachu-700); text-align: center; white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis; }

/* ---- reduced motion: state changes still happen, they just do not animate -------- */
@media (prefers-reduced-motion: reduce) {
  .c3 *, .c3 *::after { transition: none !important; animation: none !important; }
  .c3-fade, .c3-rise { opacity: 1; transform: none; }
  .c3-pill.is-active { opacity: 1; }
}

/* ---- responsive: one column already; only sizes and wraps change ------------------- */
.c3-field, .c3-fieldwrap { max-width: 100%; }
.c3-prompt { max-width: 100%; }

@media (max-width: 900px) {
  :root { --c3-card-pad: 24px; --c3-section: 56px; --c3-foot: 40px; }
  .c3-h1 { font-size: 42px; }
  .c3-q { font-size: 25px; }
  .c3-cols { border-radius: 20px; }
  .c3-marks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  :root { --c3-card-pad: 20px; --c3-section: 48px; --c3-foot: 32px; }
  .c3 { width: 100%; }   /* the shell's wrapper already gives a 16px gutter */
  .c3-h1 { font-size: 34px; }
  .c3-top { padding: 28px 0 0; }
  .c3-steps { font-size: 19px; margin-bottom: 14px; }
  .c3-sits { margin-top: 28px; }
  .c3-sits h2, .c3-stores h2, .c3-trend h2 { font-size: 19px; }
  .c3-support { font-size: 14px; }
  .c3-hero-dog { width: 240px; margin-top: 18px; }
  .c3-q { font-size: 22px; }
  .c3-prompt { font-size: 18px; }
  .c3-sheet { padding: 20px; border-radius: 14px; }
  .c3-stores-row { align-items: flex-start; gap: 16px; }
  .c3-marks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

@media (max-width: 560px) {
  .c3-cols.is-complete .c3-actions { position: sticky; bottom: 12px; z-index: 3; background: var(--c3-sheet); padding: 8px 0; border-radius: 12px; }
  .c3-pop { padding: 0; align-items: flex-end; }
  .c3-pop-card { width: 100%; border-radius: 22px 22px 0 0; padding: 30px 22px 26px; }
}

/* ---- larger monitors: the column steps up and the type with it; the sliders show more; nothing stretches ---- */
@media (min-width: 1440px) {
  .c3 { width: min(840px, calc(100% - 48px)); }
  :root { --c3-fs-1: 38px; --c3-fs-2: 28px; }
  :root { --c3-card-pad: 40px; }
  .c3-cols { border-radius: 26px; }
  .c3-prompt { font-size: 20px; }
}
@media (min-width: 1920px) {
  .c3 { width: min(920px, calc(100% - 48px)); }
  :root { --c3-fs-1: 40px; --c3-fs-2: 30px; }
  .c3-prompt { font-size: 21px; }
}

/* ---- phone pass ------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* the ledger: Start over sits above the chips at the right; chips wrap the full width */
  .c3-cols:not(.is-pick) .c3-ledger { padding-right: 0; }
  .c3-ledgercell { grid-template-columns: minmax(0, 1fr); }
  .c3 .c3-storehead { order: -2; }
  .c3-storehead-img { max-height: 56px; max-width: 240px; }
  .c3 .c3-storehead.is-icon .c3-storehead-img { height: 56px; }
  .c3-ledgercell:has(.c3-storehead) .c3-ledger { grid-column: 1; grid-row: auto; justify-content: center; }
  .c3-led-v { max-width: 22ch; }
  /* row headers: title on its own line; search box and action share the next */
  .c3 .c3-rowaction { min-width: 0; }
  /* actions: a 2-column grid — Copy prompt and Share prompt full width, the two assistants side by side */
  .c3-cols.is-complete .c3-actions { position: static; background: transparent; padding: 0; }
  .c3-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .c3 .c3-act.is-fill, .c3 .c3-act--share { grid-column: 1 / -1; }
  .c3-sheet { padding: 16px; }
  .c3-prompt { font-size: 17px; }
}

/* ---- this page's nav: the logo only (the live header's search, Log In, Join and menu are hidden here) ---- */
body[data-page="prompts"] header button[aria-label="Open search"],
body[data-page="prompts"] header button[aria-label="Menu"],
body[data-page="prompts"] header div[aria-label="Search stores"],
body[data-page="prompts"] header div[aria-label="Open search"] { display: none !important; }

@media (max-width: 900px) { .c3-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c3-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .c3-wlogo { border-radius: 12px; } }

/* this page's header: the logo alone, centred */
/* the header keeps the live site's shape: logo left, Log In + Join right, at every width; search and menu stay hidden */
body[data-page="prompts"] header .hidden.lg\:flex.items-center.gap-2 { display: flex !important; }
body[data-page="prompts"] header .hidden.lg\:flex.items-center.gap-2 a { white-space: nowrap; }
@media (max-width: 560px) {
  body[data-page="prompts"] header .hidden.lg\:flex.items-center.gap-2 { gap: 4px; }
  body[data-page="prompts"] header .hidden.lg\:flex.items-center.gap-2 a { height: 38px; padding: 0 10px; font-size: 13px; }
  body[data-page="prompts"] header [aria-label="Minty"] { transform: scale(.86); transform-origin: left center; }
}

/* ---- trending prompts: a wall of prompt cards ------------------------------------------- */
.c3-trend { margin-top: var(--c3-section); }
.c3-trend-row { align-items: center; }
.c3-trend h2 { margin: 0; font-family: var(--font-gelica); font-size: 22px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--c3-ink); }
/* a carousel: cards snap as you swipe; the arrows scroll a screen at a time (the data-scroll handler) */
.c3-trendgrid { display: flex; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 6px; -webkit-overflow-scrolling: touch; }
.c3-trendgrid::-webkit-scrollbar { display: none; }
.c3-trendgrid > .c3-tcard { flex: 0 0 300px; scroll-snap-align: start; }
.c3-trend-nav { display: flex; gap: 8px; }
.c3 .c3-snav { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid light-dark(#dcd5c4, #33332f); background: var(--minty-surface-2); color: var(--c3-ink); font-size: 22px; line-height: 1; transition: background-color .15s var(--c3-ease), border-color .15s var(--c3-ease); }
.c3 .c3-snav:hover { background: light-dark(#fbf8f0, #292926); border-color: light-dark(#c9c1ac, #47463f); }
.c3 .c3-tcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; text-align: left;
  padding: 20px 20px 18px; border: 1px solid var(--c3-line); border-radius: var(--c3-r-block); background: var(--minty-surface-2);
  transition: border-color .15s var(--c3-ease), transform .15s var(--c3-ease), box-shadow .15s var(--c3-ease);
}
.c3 .c3-tcard:hover { border-color: var(--color-mint-900); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 30, 20, .08); }
.c3-tcard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.c3-tcard-num { font-family: var(--font-gelica); font-size: 15px; font-weight: 500; color: var(--color-mint-1000); letter-spacing: .02em; }
.c3-tcard-src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--c3-ink-3); }
.c3-tcard-src .c3-mark-ico { width: 18px; height: 18px; }
.c3-tcard-src .c3-mark-ico img { width: 12px; height: 12px; border-radius: 3px; }
.c3-tcard-src .c3-mark-mono { font-size: 10px; }
.c3-tcard-ico { display: inline-flex; width: 15px; height: 15px; color: var(--c3-ink-3); }
.c3-tcard-ico svg { width: 15px; height: 15px; }
.c3-tcard-q { margin-top: 6px; font-family: var(--font-gelica); font-size: var(--c3-fs-3); font-weight: 500; line-height: 1.2; letter-spacing: -.008em; color: var(--c3-ink); text-wrap: balance; }
.c3-tcard-out { font-size: var(--c3-fs-ui); line-height: 1.5; color: var(--c3-ink-2); }
.c3-tcard-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px 10px; width: 100%; margin-top: auto; padding-top: 12px; font-size: 12px; }
.c3-tcard-go { font-weight: 500; color: var(--color-mint-1000); white-space: nowrap; }
.c3 .c3-tcard:hover .c3-tcard-go { text-decoration: underline; text-underline-offset: 3px; }

/* phone: headings may wrap; the search box takes its own line */
@media (max-width: 560px) {
  .c3-cols.is-pick .c3-q { white-space: normal; }
  .c3-cols.is-pick .c3-storesearch { width: 100%; }
  .c3-qrow { flex-wrap: wrap; }
  .c3-qrow .c3-rowtools { width: 100%; }
  .c3-trendgrid > .c3-tcard { flex-basis: min(82vw, 320px); }
  .c3-trend-nav { display: none; }   /* phones swipe */
  .c3-trend-row { flex-direction: row; }
}
@media (min-width: 561px) and (max-width: 900px) { .c3-trendgrid > .c3-tcard { flex-basis: 280px; } }

/* tablets: the heading keeps its line; the search box drops to its own full-width line */
@media (max-width: 900px) {
  .c3-qrow { flex-wrap: wrap; }
  .c3-qrow .c3-rowtools { width: 100%; }
  .c3-cols.is-pick .c3-storesearch { width: 100%; flex: 1 1 auto; }
}

/* ---- the share sheet: the link with its own Copy, then the destinations ---- */
.c3-share-card { text-align: left; }
.c3-share-h { text-align: left; font-size: 24px; }
.c3-pop--share .c3-pop-p { margin: 0 0 18px; text-align: left; max-width: none; }
.c3-share-link { display: flex; gap: 8px; margin: 0 0 18px; }
.c3 .c3-share-field { height: 44px; font-size: 14px; color: var(--c3-ink-2); background: var(--color-pikachu-100); border-color: transparent; }
.c3 .c3-share-field:focus { border-color: var(--color-mint-900); background: var(--color-mint-100); color: var(--c3-ink); }
.c3 .c3-share-copy { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; background: var(--color-mint-1000); color: var(--color-mint-button-text); font-size: var(--c3-fs-ui); font-weight: 600; white-space: nowrap; transition: background-color .15s var(--c3-ease); }
.c3 .c3-share-copy:hover { background: var(--color-mint-1100); }
.c3 .c3-share-copy svg { width: 16px; height: 16px; }
.c3-share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.c3 .c3-share-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border: 1px solid var(--c3-line); border-radius: var(--c3-r-block); background: var(--minty-surface-2); font-size: 12px; font-weight: 500; color: var(--c3-ink); text-decoration: none; transition: border-color .15s var(--c3-ease), background-color .15s var(--c3-ease); }
.c3 .c3-share-item:hover { border-color: var(--color-pikachu-500); background: var(--color-pikachu-100); }
.c3-share-ico { display: inline-flex; width: 22px; height: 22px; color: var(--c3-ink); }
.c3-share-ico svg { width: 22px; height: 22px; }
@media (max-width: 560px) { .c3-share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c3-share-link { flex-direction: column; } }

/* Phones: the Next button drops below the field, full width; the wall footer stacks. */
@media (max-width: 560px) {
  .c3-fieldwrap:has(.c3-next) .c3-field { padding-right: 16px; }
  .c3 .c3-field, .c3 .c3-fieldwrap .c3-field--mini, .c3 .c3-share-field, .c3 .c3-request-field { font-size: 16px; }   /* 16px+ so iOS does not zoom the page on focus */
  .c3-pop-card { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .c3 .c3-fieldwrap .c3-next { position: static; width: 100%; justify-content: center; height: 48px; margin-top: 10px; }
  .c3-wall-foot { flex-direction: column; gap: 10px; text-align: center; }
}