/*
 * bloatie.app — tokens from the Figma frame "Bloatie design system · Light"
 * (file JfV3XV2lWHl6y3RCyNg71B, node 464:2420). Same values as the app's
 * src/constants/theme.ts. Pink and sunshine always carry navy text.
 */
:root {
  --navy: #061331;
  --white: #ffffff;
  --pink: #f6aece;
  --sunshine: #ffc733;
  --neutral: #eef1f5;
  --gray: #525252;
  --pale: #e2e8f0;
  --midnight: #0b132c;

  --success-ink: #00693b;
  --success-surface: #d1fae5;
  --success-marker: #00d370;
  --warning-ink: #8a5a00;
  --warning-surface: #ffefd1;
  --warning-marker: #fdae00;
  --danger-ink: #b30000;
  --danger-surface: #fee2e2;
  --danger-marker: #ff0000;

  --radius-card: 24px;
  --radius-field: 16px;
  --stroke: 1.5px;
  --shadow-hard: 0 4px 0 #000;

  --gutter: 20px;
  --max: 1040px;
  --prose: 680px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--prose); }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--navy); color: var(--white); padding: 8px 16px; border-radius: 999px; z-index: 10;
}
.skip:focus { left: 8px; }

/* ---- header: the floating pill from the Figma website frame (488:562) ---- */
/* Stays in view while scrolling; only the pill takes clicks, not the clear strip around it. */
.site-header { position: sticky; top: 0; z-index: 5; display: flex; justify-content: center; padding: 14px var(--gutter) 0; pointer-events: none; }
.site-header-overlay { position: fixed; left: 0; right: 0; }
.nav-pill { pointer-events: auto; }
/* Anchor jumps (#pricing, #download, legal sections) land below the pill. */
[id] { scroll-margin-top: 96px; }
.nav-pill {
  display: flex; align-items: center; gap: 6px; padding: 8px 30px; border-radius: 999px;
  background: rgba(255, 254, 252, 0.9); box-shadow: 0 10px 30px rgba(51, 20, 12, 0.35);
}
.brand { display: block; flex: none; padding-right: 7px; }
.brand img { width: 48px; height: auto; }
.site-nav { display: flex; gap: 2px; }
.site-nav a { padding: 10px 14px; border-radius: 999px; font-weight: 500; font-size: 16px; line-height: 1.2; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current='page'] { text-decoration: underline; }
.nav-cta { margin-left: 10px; min-height: 44px; padding: 0 20px; border: 0; box-shadow: 0 15px 7px -7px rgba(0, 0, 0, 0.15); }
@media (max-width: 560px) {
  .nav-pill { padding: 6px 16px; }
  .site-nav { display: none; }
  .nav-cta { margin-left: auto; }
  .brand img { width: 40px; }
}


/* ---- type ---- */
h1, h2, h3 { margin: 0; line-height: 1.15; }
.display { font-size: clamp(30px, 6vw, 38px); line-height: 1.21; font-weight: 900; letter-spacing: -0.48px; }
h1 { font-size: clamp(28px, 5vw, 32px); font-weight: 900; }
h2 { font-size: clamp(22px, 4vw, 28px); font-weight: 700; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0; }
.lede { font-size: 18px; font-weight: 500; }
.muted { color: var(--gray); }
.caption { font-size: 13px; font-weight: 500; color: var(--gray); }

.stack > * + * { margin-top: 16px; }
.stack-lg > * + * { margin-top: 32px; }

main { padding: 48px 0 72px; }

/* ---- hero: photo with the lockup, white type (488:302) ---- */
.hero { position: relative; overflow: hidden; background: var(--sunshine); padding: 190px 0 162px; color: var(--white); }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero .wrap { position: relative; display: grid; gap: 32px; align-items: center; }
.hero-copy .lede { margin-top: 16px; max-width: 460px; line-height: 1.55; }
/* On a phone the lede reads poorly over the photo, so it opens the navy band instead. */
.band-lede { display: none; }
.hero-copy .btn { margin-top: 24px; }
.hero-lockup { width: min(100%, 461px); height: auto; }
@media (min-width: 820px) {
  .hero .wrap { grid-template-columns: 507fr 461fr; min-height: 280px; }
}
@media (max-width: 819px) {
  .hero { padding: 120px 0 140px; }
  /* The photo crops tighter on a phone, so darken it enough for white text. */
  .hero::before { content: ''; position: absolute; inset: 0; background: rgba(6, 19, 49, 0.45); }
  .hero-lockup { width: min(80%, 340px); justify-self: center; order: -1; }
  .hero-lede { display: none; }
  .hero-copy { text-align: center; }
  .hero-copy .display { font-size: 25px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
  .band-lede { display: block; margin-bottom: 40px; font-size: 16px; font-weight: 400; line-height: 24.8px; }
}
.hero + main { padding: 0 0 72px; }

/* ---- buttons ---- */
[hidden] { display: none !important; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 45px; padding: 0 28px; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
  border: 2px solid var(--navy);
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-secondary { background: var(--pink); color: var(--navy); }
.btn-sunshine { background: var(--sunshine); color: var(--navy); }
.btn-glow { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)); }
.btn-glow:hover { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)) brightness(0.96); }
.btn-outline { background: var(--white); color: var(--navy); }
.btn:hover { text-decoration: none; filter: brightness(0.96); }

/* ---- home bands (Figma website frame 486:789) ---- */
.band { padding: 72px 0; }
.band h2 { line-height: 1.15; }
.band-intro { margin-top: 16px; }
.band-navy { background: var(--navy); color: var(--white); }
.band-sunshine { background: var(--sunshine); }
.band-neutral { background: var(--neutral); border-top: var(--stroke) solid var(--navy); border-bottom: var(--stroke) solid var(--navy); padding: 64px 0 72px; }
/* The first band rides up over the hero photo with rounded shoulders. */
.band-rounded { position: relative; margin-top: -98px; border-radius: 80px 80px 0 0; }
@media (max-width: 819px) { .band-rounded { border-radius: 40px 40px 0 0; padding-top: 62px; } }

.title-icon { display: flex; align-items: center; gap: 16px; }
.title-icon img { flex: none; }

.features { margin-top: 40px; }
.card-head { display: flex; align-items: center; gap: 12px; }
.card-head img { flex: none; }
.features .card p { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.band-navy .card { color: var(--navy); }

/* Phone mockup, cropped by the band's bottom edge. The image (exported at 2x on the yellow, cut where the band ends) carries 60px of
   shadow each side and 40px above the 470px phone. */
.phone-band { --pw: min(470px, 78vw); padding: 80px 0 0; }
.phone-crop { height: calc(var(--pw) * 1.419); overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
.phone-crop img { width: calc(var(--pw) * 1.2553); max-width: none; height: auto; margin-top: calc(var(--pw) * -0.0851); flex: none; }

/* Eating out accordion (Accordion Item, 94:175) */
.band-neutral .band-intro { padding-bottom: 32px; }
.cuisines { max-width: 360px; display: flex; flex-direction: column; gap: 10px; }
/* Desktop: heading and intro on the left, the cuisine pills on the right. */
@media (min-width: 820px) {
  .eating-out { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; }
  .eating-out .band-intro { padding-bottom: 0; }
  .eating-out .cuisines { max-width: none; }
}
/* Each cuisine is a pill: sunshine while closed, white once open. */
.cuisine summary {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none;
  min-height: 48px; padding: 8px 9px 8px 20px; border: var(--stroke) solid var(--navy); border-radius: 999px;
  background: var(--sunshine); font-weight: 800; font-size: 16px;
}
.cuisine[open] summary { background: var(--white); }
.cuisine[open] { padding-bottom: 8px; }
.cuisine p { padding: 0 8px; }
.cuisine summary::-webkit-details-marker { display: none; }
.cuisine summary::after { content: ''; width: 30px; height: 30px; flex: none; background: url('/assets/img/chevron-down.svg') center / contain no-repeat; transform: rotate(180deg); }
.cuisine[open] summary::after { background-image: url('/assets/img/chevron-up.svg'); transform: none; }
.cuisine p { display: flex; gap: 5px; align-items: flex-start; margin-top: 12px; font-size: 15px; line-height: 1.45; }
.cuisine p img { flex: none; margin-top: 1px; }
.cuisine p + p { margin-top: 12px; }

/* Pricing (494:5102) */
.pricing { padding: 80px 0; }
.pricing-head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pricing-head h2 { margin-top: 16px; font-size: 32px; font-weight: 900; line-height: 38px; }
.pricing-head p { margin-top: 12px; max-width: 500px; color: var(--pale); font-size: 15px; line-height: 22px; }
.plans { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: flex-start; padding-top: 48px; }
.plan { width: 310px; max-width: 100%; padding: 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.plan h3 { font-size: 22px; }
.card.plan-featured { background: var(--sunshine); border-width: 2px; }
.plan-tag { background: var(--navy); color: var(--white); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.plan-price { font-size: 48px; line-height: 52px; font-weight: 900; }
.plan-unit { margin-top: 4px; font-size: 14px; color: var(--gray); }
.plan-note { padding-top: 4px; font-size: 13px; line-height: 1.3; color: var(--gray); }
.plan-featured .plan-unit, .plan-featured .plan-note { color: var(--navy); }
.plan .btn { width: 100%; margin-top: 5px; }
.secure { display: flex; justify-content: center; align-items: center; gap: 8px; padding-top: 32px; font-size: 13px; color: var(--pale); }
.plan-links { padding-top: 12px; text-align: center; font-size: 12px; color: var(--pale); }
.plan-links a { color: var(--pale); }

.after-bands { padding-top: 72px; }
.get h2 { margin: 0; }
.get > * + * { margin-top: 20px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; list-style: none; }
.stores img { height: 51px; width: auto; cursor: not-allowed; }

/* ---- cards ---- */
.card {
  background: var(--white);
  border: var(--stroke) solid var(--navy);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
  padding: 24px;
}
.card-neutral { background: var(--neutral); box-shadow: none; }
.grid-3 { display: grid; gap: 20px; }
@media (min-width: 820px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }


/* ---- serving status chips (Bloatie/Status/* in Figma) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 0 0; margin: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 12px; height: 36px; padding: 0 24px;
  border-radius: 999px; border: 0.6px solid #000; box-shadow: 1.2px 2.4px 0 #000;
  font-size: 14.5px; font-weight: 700;
}
.chip::before { content: ''; width: 9.6px; height: 9.6px; border-radius: 50%; }
.chip-easy { background: #dff9eb; color: var(--success-ink); }
.chip-easy::before { background: var(--success-marker); }
.chip-portion { background: var(--warning-surface); color: var(--warning-ink); font-weight: 600; }
.chip-portion::before { background: var(--warning-marker); }
.chip-watch { background: #ffe1e1; color: var(--danger-ink); }
.chip-watch::before { background: var(--danger-marker); }

/* ---- notices ---- */
.notice {
  border: var(--stroke) solid var(--navy); border-radius: var(--radius-field);
  background: var(--neutral); padding: 16px 20px; font-size: 15px;
}
.notice-draft { background: var(--warning-surface); color: var(--navy); margin-bottom: 24px; }

/* ---- legal / long text ---- */
.doc h2 { font-size: 22px; margin-top: 40px; }
.doc p { margin-top: 12px; }
.doc .meta { margin-top: 8px; }

/* ---- FAQ ---- */
.faq { border-top: var(--stroke) solid var(--navy); }
.faq details { border-bottom: var(--stroke) solid var(--navy); padding: 18px 0; }
.faq summary { font-weight: 700; font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 900; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin-top: 10px; }

/* ---- footer ---- */
.site-footer { background: var(--navy); color: var(--white); padding: 40px 0 48px; }
.site-footer a { color: var(--white); }
.site-footer .wrap { display: grid; gap: 20px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0; margin: 0; list-style: none; font-weight: 700; line-height: 24.8px; }
.site-footer .small { font-size: 13px; color: var(--pale); }