/* Mellow / Qahwati / 꿀조합 landing pages — shared styles.
   Used by /index.html (ja), /en/, /ar/, /ko/.

   Tokens are lifted verbatim from the app's constants/theme.ts so every page
   reads as the product it advertises. What is deliberately ABSENT: #00704A
   "Siren green". That is Starbucks' trademark colour and has no place on a
   public page for a de-branded product — brand.anchor is the real one.

   The BRAND DIFFERS PER MARKET (constants/brand.ts): Mellow for JP/global,
   Qahwati for ME, 꿀조합 for KR. These are not translations of one page. */

:root{
  --forest:#1E3932;        /* brand.anchor      — headlines, primary CTA */
  --mint-pale:#D4E9E2;     /* brand.anchorLight — quiet fills           */
  --sage-line:#E2EBE6;     /* card.border       — hairlines             */
  --sage-text:#7B8E86;     /* text.secondary    — secondary copy        */
  --rose:#C9607A;          /* accent.primary    — the one warm accent   */
  --pink:#D4537E;          /* HEART_FILLED_PINK — likes, and only likes */
  --wash:#F4F5F7;          /* surface.secondary — soft-fill pills       */
  --paper:#fff;
  --ink:#1F2A24;
  --shadow:0 18px 40px -22px rgba(30,57,50,.34);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo','Apple SD Gothic Neo','Noto Sans KR','Helvetica Neue',Arial,sans-serif;
  --font-ar:-apple-system,BlinkMacSystemFont,'Segoe UI','Geeza Pro','Noto Naskh Arabic','Tahoma',sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 62% at 50% -14%,var(--mint-pale) 0%,rgba(212,233,226,0) 62%);
  background-repeat:no-repeat;
}
[dir=rtl] body{font-family:var(--font-ar)}

.wrap{max-width:660px;margin:0 auto;padding:0 22px}

/* ── Masthead + language switcher ─────────────────────────────────────── */
header{padding:34px 0 0;text-align:center}
.brand{
  font-size:23px;font-weight:640;letter-spacing:.14em;color:var(--forest);margin:0;
}
/* Only the Latin wordmarks are lowercased — doing this to Hangul or Arabic
   would be meaningless at best. */
.brand.latin{text-transform:lowercase}

.langs{margin:14px 0 0;display:flex;gap:2px;justify-content:center;flex-wrap:wrap}
.langs a{
  padding:5px 11px;border-radius:999px;text-decoration:none;
  color:var(--sage-text);font-size:12.5px;font-weight:600;
}
.langs a[aria-current=page]{background:var(--wash);color:var(--forest)}
.langs a:hover{color:var(--forest)}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{text-align:center;padding:40px 0 8px}
.eyebrow{
  display:inline-block;margin:0 0 20px;padding:6px 14px;border-radius:999px;
  background:var(--wash);color:var(--sage-text);
  font-size:12.5px;font-weight:600;letter-spacing:.11em;
}
h1{
  margin:0 0 16px;color:var(--forest);
  font-size:clamp(31px,7.4vw,46px);line-height:1.24;font-weight:680;letter-spacing:-.005em;
}
h1 em{font-style:normal;color:var(--rose)}
.sub{margin:0 auto;max-width:32em;color:var(--sage-text);font-size:16px}
.sub b{color:var(--ink);font-weight:640;font-variant-numeric:tabular-nums}

/* ── Store buttons ────────────────────────────────────────────────────── */
.stores{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin:28px 0 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 26px;border-radius:15px;
  font-size:15.5px;font-weight:640;text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease;
}
.btn-primary{background:var(--forest);color:#fff;box-shadow:var(--shadow)}
.btn-secondary{background:var(--paper);color:var(--forest);border:1.5px solid var(--sage-line)}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--rose);outline-offset:3px}

/* ── Cards: the order slip ─────────────────────────────────────────────
   Every app landing page reaches for a phone bezel. The characteristic
   artifact here is the list of customizations you read out at the counter,
   so the cards float exactly as the app draws them. */
.cards{display:grid;gap:18px;margin:56px 0 0;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--paper);border:1px solid var(--sage-line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--wash)}
.card-body{padding:15px 17px 17px}
.card-base{margin:0 0 3px;color:var(--sage-text);font-size:11.5px;font-weight:640;letter-spacing:.075em}
.card-name{margin:0;font-size:16.5px;font-weight:640;line-height:1.4;color:var(--ink)}
.likes{display:inline-flex;align-items:center;gap:5px;margin-top:9px;color:var(--sage-text);font-size:13px;font-variant-numeric:tabular-nums}
.likes svg{width:14px;height:14px;fill:var(--pink)}

.slip{margin:14px 0 0;padding:13px 0 0;border-top:1px solid var(--sage-line);list-style:none}
.slip li{display:flex;align-items:baseline;gap:9px;font-size:14px;padding:4px 0}
.slip .role{color:var(--sage-text);white-space:nowrap}
.slip .dots{flex:1;border-bottom:1px dotted var(--sage-line);transform:translateY(-3px)}
.slip .val{color:var(--ink);font-weight:620;white-space:nowrap}

/* ── KR pairing card ───────────────────────────────────────────────────
   A combo is two products, not one, so it gets its own shape: the drink and
   the food side by side with a plus between them. Reusing the single-photo
   recipe card would misrepresent what the KR app sells. */
.pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:16px 14px 4px}
/* KR catalogue shots are white-background product photos. Left transparent
   they'd float as hard white rectangles on the dark card, so give them an
   explicit white tile — deliberate in light mode, intentional in dark. */
.pair img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:12px;padding:7px}
.pair-plus{color:var(--sage-text);font-size:21px;font-weight:400}
.pair-names{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;padding:0 14px 4px;text-align:center}
.pair-names span{font-size:13.5px;font-weight:620;line-height:1.4}
.pair-names .sep{color:transparent}

/* ── Steps ─────────────────────────────────────────────────────────────
   A real sequence (find → check → order), so ordered markup is honest here
   rather than decorative. Rendered as words, not 01/02/03. */
.steps{margin:60px 0 0;padding:0;list-style:none}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:15px 0;border-top:1px solid var(--sage-line)}
.steps li:last-child{border-bottom:1px solid var(--sage-line)}
.step-k{color:var(--rose);font-size:13px;font-weight:680;letter-spacing:.07em;padding-top:2px;min-width:5.4em}
.step-t{margin:0;font-size:15.5px;color:var(--ink)}

/* ── Close + footer ───────────────────────────────────────────────────── */
.close{text-align:center;margin:58px 0 0;padding:34px 24px;background:var(--wash);border-radius:22px}
.close p{margin:0 0 20px;color:var(--forest);font-size:19px;font-weight:640}

footer{margin-top:56px;padding:22px;text-align:center;border-top:1px solid var(--sage-line);color:var(--sage-text);font-size:13px}
footer a{color:var(--sage-text);text-decoration:none;margin:0 9px}
footer a:hover{color:var(--forest)}
footer .co{display:block;margin-top:7px}

/* ── Motion ────────────────────────────────────────────────────────────
   One orchestrated entrance, then nothing. Scattered effects are what make
   a page feel machine-made. */
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .62s cubic-bezier(.22,.68,.35,1) both}
  .rise:nth-child(2){animation-delay:.07s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#12201C;--ink:#EAF1ED;--wash:#1B2C27;
    --sage-line:#2A3F38;--sage-text:#93A8A0;--forest:#D4E9E2;
    --shadow:0 18px 40px -22px rgba(0,0,0,.6);
  }
  body{background-image:radial-gradient(120% 62% at 50% -14%,#1B3B32 0%,rgba(27,59,50,0) 62%)}
  .btn-primary{background:var(--forest);color:#12201C}
  .btn-secondary{background:transparent;color:var(--forest)}
}