/* KamiCarte landing page (/lp) styles.
   Standalone file — this page has no Angular/SCSS build step, so it cannot
   reference frontend/src/styles/_tokens.scss or _fonts.scss directly. Values
   below are copied from those files; keep them in sync if the brand palette
   or font set changes. Kept in an external file (not inline <style>) because
   the site's CSP is style-src 'self' with no 'unsafe-inline' — see
   deploy/Caddyfile's CSP block for why that's non-negotiable. */

/* Same latin-range split as _fonts.scss: JP face first (full glyph coverage,
   no unicode-range), Latin face declared after with a range so ASCII text
   ("KamiCarte", "iPad", "PWA") resolves to the ~15-20KB latin file instead of
   the ~1MB JP file. Only the two weights this page actually uses. */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-japanese-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/noto-sans-jp-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/noto-serif-jp-japanese-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/noto-serif-jp-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #14110f;
  --washi-bg: #e9e4d9;
  --washi-surface: #f4f1ea;
  --washi-white: #ffffff;
  --stone-border: #ded6c7;
  --stone-600: #6e6558;
  --stone-700: #5c544a;
  --brass-500: #a8875a;
  --brass-700: #6e572f;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--washi-bg);
  color: var(--ink);
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  line-height: 1.7;
}

h1,
h2 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  line-height: 1.4;
}

/* Synthetic (browser-faked) bold for <strong>/700 text rather than shipping a
   third weight subset — acceptable on a single low-traffic marketing page.
   Add a real 700 face pair (mirroring the 400 pair above) if that ever reads
   as too thin for CJK glyphs. */
strong {
  font-weight: 700;
}

a {
  color: var(--brass-700);
}

header,
main,
footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem;
}

header {
  text-align: center;
  padding-top: 3rem;
}

h1 {
  font-size: 1.9rem;
  margin: 0 0 0.75rem;
}

.lede {
  color: var(--stone-700);
  font-size: 1.05rem;
  margin: 0 0 1.5rem;
}

.cta {
  display: inline-block;
  background: var(--ink);
  color: var(--washi-white);
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-weight: 700;
}

section {
  margin: 2.5rem 0;
}

h2 {
  font-size: 1.3rem;
  color: var(--ink);
  border-left: 4px solid var(--brass-500);
  padding-left: 0.75rem;
}

ul {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.6rem;
}

.card {
  background: var(--washi-surface);
  border: 1px solid var(--stone-border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.plan-note {
  color: var(--stone-600);
  font-size: 0.85rem;
  margin: 0.75rem 0 0;
}

footer {
  text-align: center;
  color: var(--stone-600);
  font-size: 0.85rem;
}