/* Buy Me a Matcha — the site's one shared look (v1.1 relaunch).
   Every page links this LAST, so it sets what must be identical everywhere:
   palette, type, the top bar, the footer, buttons and the phone frame.
   Page layouts (guides, legal, partners, home) keep their own rules.
   Classes here are prefixed site- so they never collide with a page's own. */
:root {
  --cream: #FAF6E9; --paper: #FFFDF6; --matcha: #7FB03F; --matcha-2: #6FA331; --deep: #2E4A22;
  --leaf: #C9DDA6; --pale: #EAF3D8; --pill-fg: #3F6B2B; --muted: #6B7C5C; --hair: #E6DFC9;
  --gold: #F0B429; --gold-icon: #D99A0B; --gold-wash: #FFF3CF; --gold-ink: #8A6408;
  --sakura: #F9C4D6; --ink: #8E3358;
  --site-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --site-wrap: 1120px;
  color-scheme: light;
}
html { background: var(--cream); }
body { background: var(--cream); color: var(--deep); font-family: var(--site-font); -webkit-font-smoothing: antialiased; }
h1 { font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
h2 { text-wrap: balance; }
:lang(ja) h1, :lang(ja) h2 { letter-spacing: -.01em; line-height: 1.25; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--matcha); outline-offset: 2px; }

/* --- top bar --------------------------------------------------------------- */
.site-bar { display: block; position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--cream) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-in { width: min(var(--site-wrap), 100%); margin-inline: auto; padding-inline: 20px; }
.site-bar .site-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--deep); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }
.site-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--matcha); display: grid; place-items: center; flex: none; }
.site-mark img { height: 22px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; }
.site-nav a { color: var(--deep); text-decoration: none; opacity: .8; }
.site-nav a:hover { opacity: 1; }
.site-nav .site-cta { opacity: 1; background: var(--deep); color: #fff; padding: 8px 16px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.site-lang { display: inline-flex; background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 3px; opacity: 1 !important; }
.site-lang a { font-size: 13.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; color: var(--muted); opacity: 1; white-space: nowrap; }
.site-lang a[aria-current="true"] { background: var(--deep); color: #fff; }
@media (max-width: 720px) { .site-nav .site-hide { display: none; } .site-nav { gap: 10px; } }
/* Phones, on pages with the EN / 日本語 switch: logo only, so the bar stays one line. */
@media (max-width: 460px) { .site-bar:has(.site-lang) .site-brand { font-size: 0; gap: 0; } .site-lang a { padding: 4px 9px; } }

/* --- footer ---------------------------------------------------------------- */
.site-foot { display: block; margin-top: 40px; border-top: 1px solid var(--hair); padding-block: 76px 56px; font-size: 14px; color: var(--muted); }
.site-foot .site-in { display: grid; gap: 30px; }
.site-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 32px; }
.site-cols nav { display: grid; gap: 7px; align-content: start; }
.site-cols h3 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--deep); }
.site-cols a { color: var(--muted); text-decoration: none; }
.site-cols a:hover { color: var(--deep); }
.site-cols a.site-all { color: var(--pill-fg); font-weight: 600; }
.site-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: center; }
@media (max-width: 760px) { .site-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .site-foot { padding-top: 56px; } }

/* --- shared parts ---------------------------------------------------------- */
.site-btn { display: inline-block; background: var(--deep); color: #fff; text-decoration: none; font-weight: 600; font-size: 16px; padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer; font-family: inherit; }
.site-btn.green { background: var(--matcha); }

/* An iPhone-shaped frame around a real iPhone Simulator screenshot (1320×2868,
   own status bar and Dynamic Island included). The screen keeps the shot's exact
   ratio and the device's corner curve, so nothing is cropped or squeezed.
   The bezel is a shadow spread around the screen, so it follows the screen's
   corners exactly (even thickness all round) and scales with the phone (cqw). */
.site-phone { position: relative; width: 100%; max-width: 300px; container-type: inline-size; }
.site-phone .site-screen { position: relative; margin: 3.2cqw; aspect-ratio: 1320 / 2868; border-radius: 14% / 6.45%; overflow: hidden; background: var(--sb, var(--cream));
  box-shadow: 0 0 0 2.6cqw #141A10, 0 0 0 3.2cqw #3B4534, 0 30px 60px -16px rgba(46,74,34,.4), 0 12px 24px -10px rgba(46,74,34,.28); }
.site-phone .site-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; max-width: none; }
.site-phone .site-sb { position: absolute; inset: 0 0 auto 0; height: 5.2%; background: var(--sb, var(--cream)); display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; font: 600 12px var(--site-font); color: var(--sbfg, #111); z-index: 2; }
.site-phone .site-sb::after { content: ""; width: 44px; height: 11px; background:
  linear-gradient(currentColor,currentColor) 0 7px/3px 4px no-repeat,
  linear-gradient(currentColor,currentColor) 5px 5px/3px 6px no-repeat,
  linear-gradient(currentColor,currentColor) 10px 3px/3px 8px no-repeat,
  linear-gradient(currentColor,currentColor) 15px 1px/3px 10px no-repeat,
  linear-gradient(currentColor,currentColor) 24px 1px/18px 10px no-repeat; }
.site-phone .site-island { position: absolute; top: 1.6%; left: 50%; transform: translateX(-50%); width: 31%; height: 3.2%; background: #000; border-radius: 999px; z-index: 3; }