/* Patteurn — shared styles for patteurn.com */

:root {
  --ink-950: #1b2044;
  --ink-900: #23284a;
  --ink-700: #454b70;
  --ink-500: #6d7395;
  --ink-300: #a7abc3;
  --paper: #f7f6fc;
  --white: #ffffff;
  --lav: #7263d8;
  --lav-2: #a89af4;
  --lav-soft: #ece9ff;
  --pink: #dd7ab0;
  --pink-ink: #b04d82;
  --pink-soft: #fcebf4;
  --blue: #5f8fe6;
  --green: #3f8a67;
  --green-soft: #e4f3eb;
  --night: #131538;
  --night-2: #1b1d4a;
  --on-night: #c7cce9;
  --on-night-2: #9aa2c6;
  --line: rgba(57, 61, 103, .12);
  --line-night: rgba(255, 255, 255, .12);
  --shadow: 0 24px 70px rgba(49, 44, 99, .14);
  --shadow-soft: 0 10px 30px rgba(49, 44, 99, .07);
  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --max: 1120px;
  --gutter: 16px;
  --sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
}
@media (min-width: 760px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font: 500 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--lav); text-underline-offset: .18em; }
a:hover { color: var(--ink-950); }
:focus-visible { outline: 3px solid var(--lav-2); outline-offset: 3px; border-radius: 6px; }
[lang="ja"] { font-family: var(--jp); }
h1, h2, h3 { margin: 0; color: var(--ink-950); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--lav); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--ink-950); color: #fff; }
.skip:focus { top: 12px; color: #fff; }

/* ── Top bar ───────────────────────────────────────────── */
.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 246, 252, .84);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
}
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink-950); text-decoration: none; }
.brand:hover { color: var(--ink-950); }
.brand b { font-size: 21px; font-weight: 800; letter-spacing: -.05em; }
.brand span { color: var(--pink); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.bar nav { display: flex; align-items: center; gap: 22px; }
.bar nav a { color: var(--ink-700); font-size: 14px; font-weight: 700; text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink-950); }
.bar .wide { display: none; }
@media (min-width: 760px) { .bar .wide { display: inline; } }

/* ── Buttons ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 14px;
  font: 800 15px/1 var(--sans);
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-light { background: #fff; color: var(--ink-950); box-shadow: 0 16px 36px rgba(4, 6, 24, .35); }
.btn-light:hover { color: var(--ink-950); box-shadow: 0 20px 44px rgba(4, 6, 24, .45); }
.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .26); }
.btn-ghost:hover { background: rgba(255, 255, 255, .15); color: #fff; }

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(900px 520px at 80% 28%, rgba(114, 99, 216, .34), transparent 62%),
    radial-gradient(700px 520px at 100% 100%, rgba(221, 122, 176, .2), transparent 60%),
    linear-gradient(180deg, #171a45 0%, var(--night) 100%);
}
.hero .sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-grid { position: relative; display: grid; gap: 44px; padding: 64px 0 76px; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.12fr .88fr; align-items: center; gap: 56px; padding: 100px 0 112px; }
}
.hero h1 { color: #fff; font-size: clamp(42px, 6vw, 72px); line-height: 1; letter-spacing: -.055em; }
.hook {
  display: inline-block;
  margin-bottom: .16em;
  padding: .1em .28em .16em;
  border-radius: .22em;
  background: linear-gradient(135deg, #6754d7 0%, #9270e6 55%, #d36fa9 100%);
  box-shadow: 0 18px 40px rgba(103, 84, 215, .35);
  transform: rotate(-1.4deg);
}
.lead { margin-top: 24px; max-width: 30em; color: var(--on-night); font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; color: var(--on-night-2); font-size: 13px; font-weight: 700; list-style: none; }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lav-2); }

/* Recall card demo */
.demo { display: grid; justify-items: center; gap: 14px; }
@media (min-width: 1024px) { .demo { justify-items: end; } }
.recall {
  width: 100%;
  max-width: 470px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 28px;
  background: rgba(255, 255, 255, .95);
  color: var(--ink-900);
  box-shadow: 0 30px 80px rgba(5, 6, 30, .45);
}
.recall-top { display: flex; justify-content: space-between; gap: 12px; color: var(--lav); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.recall-top span + span { color: var(--ink-500); font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.recall .en { margin-top: 18px; color: var(--ink-700); font-size: 15px; }
.recall .ja { margin-top: 4px; color: var(--ink-950); font-size: clamp(32px, 7vw, 42px); font-weight: 700; line-height: 1.3; letter-spacing: .02em; }
.slot {
  display: inline-block;
  min-width: 2.1em;
  border-bottom: 3px dashed var(--lav-2);
  color: var(--lav);
  line-height: 1.1;
  text-align: center;
  vertical-align: baseline;
}
.slot.filled { border-bottom-style: solid; }
.slot.right { color: var(--green); border-color: #8fcaa9; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.choice {
  min-height: 52px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink-900);
  font: 700 19px/1 var(--jp);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.choice:hover { border-color: var(--lav-2); background: var(--lav-soft); }
.choice.is-right { border-color: #8fcaa9; background: var(--green-soft); color: var(--green); }
.choice.is-wrong { border-color: #efb6d3; background: var(--pink-soft); color: var(--pink-ink); animation: nudge .35s ease; }
.choice:disabled { cursor: default; }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.feedback { min-height: 92px; margin-top: 16px; }
.hint { color: var(--ink-700); font-size: 14.5px; line-height: 1.5; }
.hint b { color: var(--ink-950); }
.spine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 14px; border-radius: 14px; background: var(--lav-soft); }
.spine .chunk { display: grid; gap: 2px; }
.spine .chunk b { color: var(--ink-950); font-family: var(--jp); font-size: 18px; font-weight: 700; }
.spine .chunk small { color: var(--ink-500); font-size: 12px; font-weight: 700; }
.spine .arrow { color: var(--lav); font-weight: 800; }
.spine .chunk.key b { color: var(--lav); }
.teru-says { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.teru-says img { width: 38px; height: 38px; filter: drop-shadow(0 8px 14px rgba(86, 72, 173, .2)); }
.teru-says span { white-space: nowrap; padding: 7px 12px; border-radius: 12px 12px 12px 4px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); font-family: var(--jp); font-size: 14px; font-weight: 700; color: var(--ink-900); }
.reset { margin-left: auto; white-space: nowrap; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-500); font: 700 13px/1 var(--sans); cursor: pointer; }
.reset:hover { background: var(--paper); color: var(--ink-950); }
.demo-note { color: var(--on-night-2); font-size: 13px; font-weight: 700; }
.pop { animation: pop .35s ease both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

/* ── Sections ──────────────────────────────────────────── */
.section { padding: 76px 0; }
@media (min-width: 760px) { .section { padding: 112px 0; } }
.head { max-width: 640px; margin-bottom: 40px; }
.head h2 { margin-top: 12px; font-size: clamp(34px, 4.8vw, 54px); }
.head p { margin-top: 14px; color: var(--ink-500); font-size: 18px; }

/* How it works */
.steps { display: grid; gap: 16px; list-style: none; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.step { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-soft); }
.viz { display: grid; place-items: center; height: 104px; margin-bottom: 22px; border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.viz .mini-ja { color: var(--ink-950); font-family: var(--jp); font-size: 28px; font-weight: 700; }
.viz .mini-ja .slot { min-width: 1.8em; }
.viz .spine { background: transparent; padding: 0; }
.viz svg { width: 88%; height: 80px; }
.step .num { color: var(--lav); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.step h3 { margin-top: 8px; font-size: 22px; }
.step p { margin-top: 6px; color: var(--ink-500); font-size: 15.5px; }

/* Grammar map */
.map { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); color: #fff; }
.map-grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .map-grid { grid-template-columns: .9fr 1.1fr; align-items: center; gap: 64px; } }
.map .head { margin-bottom: 0; }
.map h2 { color: #fff; }
.map .eyebrow { color: var(--lav-2); }
.map .head p { color: var(--on-night); }
.stats { display: flex; flex-wrap: wrap; gap: 20px 36px; margin-top: 34px; list-style: none; }
.stats b { display: block; color: #fff; font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.stats span { color: var(--on-night-2); font-size: 13px; font-weight: 700; }
.sky-card { position: relative; border: 1px solid var(--line-night); border-radius: var(--r-xl); background: radial-gradient(circle at 50% 45%, rgba(114, 99, 216, .22), transparent 65%), rgba(255, 255, 255, .02); overflow: hidden; }
.sky-card svg { width: 100%; height: auto; }
.sky-card text { font-family: var(--jp); font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 22px 18px; color: var(--on-night-2); font-size: 12.5px; font-weight: 700; list-style: none; }
.legend li { display: flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.legend .lit { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.legend .near { background: #f0a6cf; }
.legend .dim { border: 1.5px solid rgba(255, 255, 255, .4); }
.twinkle { animation: twinkle 3.6s ease-in-out infinite; }
.twinkle.d2 { animation-delay: 1.2s; }
.twinkle.d3 { animation-delay: 2.4s; }
@keyframes twinkle { 50% { opacity: .35; } }

/* Pricing */
.free { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-700); font-size: 14px; font-weight: 700; }
.free b { padding: 4px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.decks { display: grid; gap: 28px; list-style: none; }
@media (min-width: 860px) { .decks { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.deck { display: flex; flex-direction: column; }
.deck-card { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 236px; padding: 24px; border-radius: var(--r-lg); color: #fff; box-shadow: var(--shadow); }
.deck:nth-child(1) .deck-card { background: linear-gradient(150deg, #d97db6 0%, #a56ad8 100%); }
.deck:nth-child(2) .deck-card { background: linear-gradient(150deg, #9a7ae8 0%, #6c6fe0 100%); }
.deck:nth-child(3) .deck-card { background: linear-gradient(150deg, #7187ec 0%, #4f8fe0 100%); }
.deck-card small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.deck-card b { margin-top: 12px; font-size: 56px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.deck-card h3 { margin-top: 4px; color: #fff; font-size: 19px; letter-spacing: -.015em; }
.deck-card p { margin-top: auto; padding-top: 22px; font-size: 14.5px; line-height: 1.5; opacity: .94; }
.deck-extra { margin: -14px 12px 0; padding: 22px 14px 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 16px 16px; background: #fff; color: var(--ink-700); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-align: center; text-transform: uppercase; }

/* Closing call to action */
.cta { padding: 0 0 76px; }
@media (min-width: 760px) { .cta { padding-bottom: 112px; } }
.cta-panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 56px 24px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(420px 260px at 10% 0%, rgba(114, 99, 216, .45), transparent 70%),
    radial-gradient(420px 260px at 100% 100%, rgba(221, 122, 176, .3), transparent 70%),
    var(--night-2);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.cta-panel img { width: 64px; height: 64px; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .3)); }
.cta-panel h2 { color: #fff; font-size: clamp(34px, 5vw, 56px); }
.cta-panel p { max-width: 32em; color: var(--on-night); font-size: 18px; }
.cta-panel .small { color: var(--on-night-2); font-size: 14px; }
.cta-panel .small a { color: #fff; }

/* ── Footer ────────────────────────────────────────────── */
.foot { padding: 36px 0 44px; border-top: 1px solid var(--line); color: var(--ink-500); font-size: 14px; }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot nav a { color: var(--ink-700); font-weight: 700; text-decoration: none; }
.foot nav a:hover { color: var(--ink-950); }
.legal { margin-top: 20px; max-width: 62em; color: var(--ink-500); font-size: 12.5px; line-height: 1.6; }

/* ── Documents (privacy, terms, support) ───────────────── */
.doc { width: min(100% - 2 * var(--gutter), 740px); margin-inline: auto; padding: 56px 0 88px; }
.doc h1 { margin-top: 12px; font-size: clamp(36px, 5.4vw, 52px); }
.doc .meta { margin-top: 12px; color: var(--ink-500); font-size: 14px; }
.doc .summary { margin-top: 32px; padding: 20px 22px; border-radius: var(--r-md); background: var(--lav-soft); color: var(--ink-900); font-size: 17px; line-height: 1.65; }
.doc h2 { margin: 48px 0 12px; font-size: 24px; letter-spacing: -.025em; }
.doc h3 { margin: 28px 0 6px; font-size: 18px; letter-spacing: -.015em; line-height: 1.3; }
.doc p, .doc li { color: var(--ink-700); font-size: 16.5px; line-height: 1.7; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 10px 0 0; padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--ink-950); }
.doc code { padding: 1px 6px; border-radius: 6px; background: var(--lav-soft); font-size: .88em; }
.doc .table { margin: 18px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.doc table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14.5px; }
.doc th, .doc td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-700); line-height: 1.55; }
.doc th { background: var(--paper); color: var(--ink-950); font-weight: 800; }
.doc tr:last-child td { border-bottom: 0; }
.doc .box { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.doc .box p { margin: 0; }
.doc .contact { margin: 32px 0 8px; padding: 22px 24px; border: 2px solid var(--lav); border-radius: var(--r-lg); background: #fff; }
.doc .contact h2 { margin-top: 0; }
.doc .contact .mail { margin-top: 4px; font-size: 20px; font-weight: 800; }
.doc .contact .mail a { text-decoration: none; }

/* ── 404 ───────────────────────────────────────────────── */
.lost { display: grid; justify-items: center; gap: 14px; padding: 120px 0; text-align: center; }
.lost img { width: 72px; height: 72px; }
.lost h1 { font-size: clamp(34px, 5vw, 48px); }
.lost p { color: var(--ink-500); }

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