/* ============================================================
   Mikata LP — "Daylight Ally" design tokens (mockup v0.4/v0.5 が正)
   紙地 #F7F5F0 / ミカタグリーン #2E7D5B / アプリコット #E8833A
   最大ウェイト 800・大文字シャウト禁止（ワードマーク MIKATA のみ例外）
   ============================================================ */
:root {
  /* Brand */
  --color-primary: #2E7D5B;
  --color-primary-pressed: #256649;
  --color-primary-tint: rgba(46, 125, 91, 0.10);
  --color-primary-border: rgba(46, 125, 91, 0.35);
  --color-on-primary: #FFFFFF;
  --color-glow: rgba(46, 125, 91, 0.18);
  /* Warmth（感情的ハイライト専用 — CTA には使わない） */
  --color-accent: #E8833A;
  --color-accent-tint: rgba(232, 131, 58, 0.14);
  --color-accent-border: rgba(232, 131, 58, 0.35);
  /* Neutrals */
  --color-bg: #F7F5F0;
  --color-surface: #FFFFFF;
  --color-surface-2: #EFECE4;
  --color-text-primary: #20241F;
  --color-text-secondary: #5F685E;
  --color-border: rgba(32, 36, 31, 0.10);
  --color-hero-ink: #1B4332;            /* hero catchcopy ink — deep brand green */
  /* Feedback */
  --color-success: #2E7D5B;
  --color-error: #C0453C;
  --color-error-tint: rgba(192, 69, 60, 0.10);
  /* PFC */
  --color-pfc-p: #2E7D5B;
  --color-pfc-f: #E8A13A;
  --color-pfc-c: #5B7DB1;
  /* Spacing 4/8 scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  /* Type scale（w800 が上限） */
  --fs-hero: clamp(30px, 6vw, 52px);
  --fs-title: clamp(22px, 3.6vw, 30px);
  --fs-headline: 17px;
  --fs-body: 16px;
  --fs-subhead: 15px;
  --fs-caption: 13px;
  /* Shape & motion */
  --radius-card: 16px;
  --radius-control: 12px;
  --ease-nav: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Noto Sans JP", Meiryo, sans-serif;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-text-primary);
  background: var(--color-bg);
  overflow-wrap: anywhere;
}
img, svg { vertical-align: middle; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--radius-control) 0; z-index: 99;
}
.skip-link:focus { inset-inline-start: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: var(--sp-5); }
.wrap--narrow { max-width: 760px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 245, 240, 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4); /* Liquid Glass */
  border-bottom: 1px solid var(--color-border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 60px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text-primary); }
.brand:hover { text-decoration: none; }
.brand__logo { width: 32px; height: 32px; border-radius: 8px; }
.brand__wordmark { font-size: 17px; font-weight: 800; letter-spacing: 0.14em; } /* ワードマークのみ大文字可 */
.brand__plus { color: var(--color-accent); margin-inline-start: 0.04em; } /* MIKATA+ の + はアプリコット */
.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-2); }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding: 4px 14px;
  border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface); color: var(--color-text-primary);
  font-size: var(--fs-caption); font-weight: 600;
}
.lang-switch:hover { text-decoration: none; border-color: var(--color-primary-border); }
.header-cta {
  display: none;
  min-height: 36px; padding: 4px 16px; align-items: center;
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: 999px; font-size: var(--fs-caption); font-weight: 700;
}
.header-cta:hover { background: var(--color-primary-pressed); text-decoration: none; }
@media (min-width: 600px) { .header-cta { display: inline-flex; } }

/* ---------- Hero ---------- */
.hero { padding-block: var(--sp-7) var(--sp-8); position: relative; overflow: hidden; }
.hero .wrap {
  display: grid; gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 880px) {
  .hero .wrap { grid-template-columns: 1.1fr 0.9fr; }
}
/* On a phone the download block belongs BELOW the app shot, not above it
   (founder 2026-08-17: 「i want the download is bottom than the image but the
   safari is good for now」) — side by side, the desktop layout is right as it is.
   The copy column dissolves into the grid (display: contents) so the shot and the
   block can be ordered independently of it; row-gap drops to 0 because those
   children carry the very margins they use inside the div on desktop, and the two
   ordered items get that gap back explicitly. Wider screens are untouched. */
@media (max-width: 879px) {
  .hero__copy-col { display: contents; }
  .hero .wrap { row-gap: 0; }
  .phone-stage { order: 1; margin-top: var(--sp-7); }
  .hero__download { order: 2; }
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-accent-tint); color: #9A5113;
  border: 1px solid var(--color-accent-border);
  border-radius: 999px; padding: 4px 14px;
  font-size: var(--fs-caption); font-weight: 700;
}
.hero h1 {
  font-size: var(--fs-hero); font-weight: 800; line-height: 1.3;
  letter-spacing: -0.01em; margin: var(--sp-4) 0 var(--sp-4);
}
.hero h1 .accent-line { color: var(--color-primary); }
/* Hero catchcopy — rounded gothic key visual (image #6). */
.hero__copy {
  font-family: "Zen Maru Gothic", var(--font-stack);
  font-weight: 900;
  color: var(--color-hero-ink);
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1.28;
  letter-spacing: 0.01em;
}
.hero__copy-accent { color: var(--color-accent); }
.hero__copy-gloss { /* （ミカタ）読みグロス — 小さく・アプリコット・少し持ち上げる */
  color: var(--color-accent);
  font-size: 0.46em; font-weight: 700;
  vertical-align: 0.5em; letter-spacing: 0.04em;
}
.hero__sub { color: var(--color-text-secondary); font-size: var(--fs-headline); max-width: 34em; margin: 0 0 var(--sp-5); }
.hero__sub--lead { font-family: "Zen Maru Gothic", var(--font-stack); font-weight: 500; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 32px;
  background: var(--color-primary); color: var(--color-on-primary);
  border: none; border-radius: var(--radius-control);
  font-family: inherit; font-size: var(--fs-headline); font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px var(--color-glow);
  transition: transform 0.15s var(--ease-spring), background 0.15s;
}
.btn-primary:hover { background: var(--color-primary-pressed); text-decoration: none; }
.btn-primary:active { transform: scale(0.97); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 24px;
  background: transparent; color: var(--color-primary);
  border: 1.5px solid var(--color-primary-border); border-radius: var(--radius-control);
  font-size: var(--fs-headline); font-weight: 700;
}
.btn-ghost:hover { background: var(--color-primary-tint); text-decoration: none; }
.hero__note { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--color-text-secondary); }
/* The download block that used to be its own section at the foot of the page
   (founder 2026-08-17). Its inner rhythm is the section one — kicker sp-2, lead
   sp-6 — so it reads identically; only the gap that separates it from the hero
   copy above belongs here. */
.hero__download { margin-top: var(--sp-7); }
.hero__download .section__lead { margin-bottom: var(--sp-5); }

/* ---------- Phone presentation（実機 iOS スクリーンショット） ---------- */
.phone-stage { display: flex; justify-content: center; }
.phone {
  /* Dark bezel frame around the real screenshot. The screenshot itself carries
     the iOS status bar / Dynamic Island, so we only add a thin device edge. */
  width: 300px; max-width: 100%;
  background: #1C1C1E; border-radius: 46px; padding: 10px;
  box-shadow: 0 30px 60px rgba(32, 36, 31, 0.22), 0 4px 12px rgba(32, 36, 31, 0.12);
  flex-shrink: 0;
  overflow: hidden; /* clip the screenshot to the bezel — guard against spill */
}
/* The <picture> defaults to inline, which makes the inner img's width:100%
   resolve to its intrinsic (560px) and overflow the bezel. Force block so the
   screenshot scales down to the frame width. */
.phone picture { display: block; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .phone { animation: phone-float 7s ease-in-out infinite alternate; }
  @keyframes phone-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
}
.phone__shot {
  display: block; width: 100%; height: auto; max-width: 100%;
  border-radius: 37px;
}

/* ---------- Sections ---------- */
.section { padding-block: var(--sp-8); }
.section--alt { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.section__kicker {
  color: var(--color-primary); font-weight: 800; font-size: var(--fs-subhead);
  letter-spacing: 0.04em; margin: 0 0 var(--sp-2);
}
.section h2 { font-size: var(--fs-title); font-weight: 800; line-height: 1.4; margin: 0 0 var(--sp-3); }
.section__lead { color: var(--color-text-secondary); max-width: 38em; margin: 0 0 var(--sp-6); }

/* Feature grid */
.features { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.section--alt .feature { background: var(--color-bg); }
.feature__icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--color-primary-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.feature--warm .feature__icon { background: var(--color-accent-tint); }
.feature h3 { font-size: var(--fs-headline); font-weight: 800; margin: var(--sp-2) 0 0; }
.feature p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-subhead); }
.feature__tag {
  align-self: flex-start; margin-top: auto;
  font-size: 11px; font-weight: 700; padding: 2px 10px;
  border-radius: 999px; background: var(--color-primary-tint); color: var(--color-primary);
}

/* Privacy highlight band */
.privacy-band {
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: var(--radius-card); padding: var(--sp-6);
  display: grid; gap: var(--sp-4);
}
@media (min-width: 760px) { .privacy-band { grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-6); } }
.privacy-band__icon { font-size: 44px; }
.privacy-band h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-title); font-weight: 800; }
.privacy-band p { margin: 0; opacity: 0.92; }
.privacy-band a { color: var(--color-on-primary); text-decoration: underline; font-weight: 700; }

/* ---------- Download / waitlist ---------- */
/* No margin of its own — the line above sets the gap, nothing needs one below
   (founder 2026-08-17: 「the padding make it more nicer」; the old stacked
   margins left a hole above the badges and dead space under them). */
.store-badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block: 0; }
.store-badge {
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 20px 8px 16px;
  background: #1C1C1E; color: #FFFFFF; border-radius: 12px;
  opacity: 0.92; cursor: default;
}
.store-badge:hover { text-decoration: none; }
.store-badge--active { opacity: 1; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.store-badge--active:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); }
.store-badge--active:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .store-badge--active { transition: none; }
  .store-badge--active:hover { transform: none; }
}
.store-badge svg { width: 28px; height: 28px; flex-shrink: 0; }
.store-badge__lines { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.store-badge__pre { font-size: 10px; opacity: 0.8; }
.store-badge__name { font-size: 19px; font-weight: 600; letter-spacing: 0.01em; }
.store-badge__soon {
  position: absolute; top: -10px; inset-inline-end: -8px;
  background: var(--color-accent); color: #FFFFFF;
  font-size: 10px; font-weight: 800; padding: 2px 10px; border-radius: 999px;
  letter-spacing: 0.03em;
}
.waitlist {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--sp-5);
  max-width: 560px;
}
.waitlist h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-headline); font-weight: 800; }
.waitlist p { margin: 0 0 var(--sp-4); color: var(--color-text-secondary); font-size: var(--fs-subhead); }
.waitlist__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.waitlist input[type="email"] {
  flex: 1 1 220px; min-height: 52px; padding: 10px 16px;
  font-family: inherit; font-size: var(--fs-body);
  color: var(--color-text-primary);
  background: var(--color-bg); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-control);
}
.waitlist input[type="email"]:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 3px var(--color-primary-tint); }
.waitlist .btn-primary { flex-shrink: 0; }
.waitlist__msg { margin-top: var(--sp-3); font-size: var(--fs-subhead); display: none; border-radius: var(--radius-control); padding: var(--sp-3) var(--sp-4); }
.waitlist__msg--ok { display: block; background: var(--color-primary-tint); color: var(--color-primary); font-weight: 700; }
.waitlist__msg--err { display: block; background: var(--color-error-tint); color: var(--color-error); font-weight: 700; }
.waitlist__privacy { margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--color-text-secondary); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-block: var(--sp-6);
  font-size: var(--fs-subhead); color: var(--color-text-secondary);
}
.site-footer .wrap { display: grid; gap: var(--sp-4); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); padding: 0; margin: 0; list-style: none; }
.footer-nav a { color: var(--color-text-secondary); }
.footer-nav a:hover { color: var(--color-primary); }
.footer-disclaimer { font-size: var(--fs-caption); }
.footer-copy { font-size: var(--fs-caption); }

/* ---------- Legal pages ---------- */
.legal { padding-block: var(--sp-7) var(--sp-8); }
.legal h1 { font-size: var(--fs-title); font-weight: 800; line-height: 1.4; margin: 0 0 var(--sp-2); }
.legal__meta { color: var(--color-text-secondary); font-size: var(--fs-subhead); margin-bottom: var(--sp-5); }
.legal h2 {
  font-size: 19px; font-weight: 800; line-height: 1.5;
  margin: var(--sp-7) 0 var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--color-border);
}
.legal h3 { font-size: var(--fs-headline); font-weight: 700; margin: var(--sp-5) 0 var(--sp-2); }
.legal p, .legal li { color: var(--color-text-primary); }
.legal ul { padding-inline-start: 1.4em; }
.legal table {
  width: 100%; border-collapse: collapse; margin-block: var(--sp-4);
  font-size: var(--fs-subhead);
}
.legal th, .legal td {
  text-align: start; vertical-align: top;
  padding: var(--sp-3); border: 1px solid var(--color-border);
}
.legal th { background: var(--color-surface-2); font-weight: 700; white-space: nowrap; }
.legal td { background: var(--color-surface); }
.legal-summary {
  background: var(--color-primary-tint); border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-card); padding: var(--sp-4) var(--sp-5); margin-block: var(--sp-5);
}
.legal-summary ul { margin: 0; }
.legal-summary li { margin-block: var(--sp-1); }
/* [PLACEHOLDER] は公開前に必ず差し替える — 視認できるようハイライト */
mark.ph {
  background: var(--color-accent-tint); color: #9A5113;
  border: 1px dashed var(--color-accent-border);
  border-radius: 4px; padding: 0 4px; font-weight: 700;
}
.legal-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--sp-5); font-weight: 700; }

/* ---------- FAQ accordion ---------- */
.faq { margin-block: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.faq details {
  border: 1px solid var(--color-border); border-radius: var(--radius-card);
  background: var(--color-surface); overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-headline); font-weight: 700; line-height: 1.5;
  color: var(--color-text-primary);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "＋"; flex: none; font-weight: 700;
  color: var(--color-text-secondary); transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: "−"; }
.faq details[open] summary { border-bottom: 1px solid var(--color-border); }
.faq .faq__body { padding: var(--sp-4) var(--sp-5); }
.faq .faq__body > :first-child { margin-top: 0; }
.faq .faq__body > :last-child { margin-bottom: 0; }

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Dark mode — "Daylight Ally" after dark (mirrors MikataTokens.dark)
   Warm charcoal base #15171A / surfaces #1E2125; brand green & apricot
   are brightened (#4FB286 / #F0985A) exactly like the app so brand color
   keeps WCAG AA contrast on dark. Light mode stays pixel-identical:
   every rule below lives inside this media query and only remaps tokens
   + the few literals that the token system can't reach.
   SFSafariViewController follows the system appearance automatically.
   ============================================================ */
:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Brand — brightened on dark (matches app dark theme) */
    --color-primary: #4FB286;
    --color-primary-pressed: #3F9C74;
    --color-primary-tint: rgba(79, 178, 134, 0.15);
    --color-primary-border: rgba(79, 178, 134, 0.40);
    --color-on-primary: #0C1410;          /* near-black ink on bright green (a11y) */
    --color-glow: rgba(79, 178, 134, 0.20);
    /* Warmth */
    --color-accent: #F0985A;
    --color-accent-tint: rgba(240, 152, 90, 0.16);
    --color-accent-border: rgba(240, 152, 90, 0.40);
    /* Neutrals — warm charcoal */
    --color-bg: #15171A;
    --color-surface: #1E2125;
    --color-surface-2: #272B30;
    --color-text-primary: #ECEEEA;
    --color-text-secondary: #A1A89E;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-hero-ink: #ECEEEA;            /* hero catchcopy ink on dark */
    /* Feedback */
    --color-success: #4FB286;
    --color-error: #E66A60;
    --color-error-tint: rgba(230, 106, 96, 0.16);
    /* PFC */
    --color-pfc-p: #4FB286;
    --color-pfc-f: #E8B45C;
    --color-pfc-c: #7E9FD4;
  }

  /* --- Hardcoded literals the token swap can't reach --- */

  /* Sticky header glass — warm charcoal translucent (was paper-white glass) */
  .site-header {
    background: rgba(21, 23, 26, 0.80);  /* #15171A @ 80% = glassBarFill */
  }

  /* Hero badge / placeholder used a baked dark-amber ink that
     would vanish on a dark tint — lift to the bright accent for AA contrast. */
  .hero__badge,
  mark.ph { color: var(--color-accent); }

  /* Store badge & phone bezel are already near-black; on a charcoal bg they
     read as a flat blob, so give them a hairline edge to separate. */
  .store-badge { border: 1px solid rgba(255, 255, 255, 0.12); }
  .phone {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.40);
  }

  /* Legal tables: header cells lean on surface-2; cells on surface — already
     token-driven, but force borders to the lighter dark border for legibility. */

  /* Soften the hero phone float shadow already handled above; brand glow on
     primary buttons keeps its token (--color-glow) which is now the dark glow. */
}