/* Dooboo's site: the landing page and the policy pages. Phone first; the app's own palette
   (apps/mobile/src/constants/theme.ts) and type: Jua for display and Korean, a rounded sans for
   reading. Nunito stands in for the app's NanumSquareRound, which isn't on Google Fonts. */

:root {
  --bg: #FFF7F0;
  --card: #FFFFFF;
  --text: #2F2734;
  --text-2: #776B7A;
  --text-3: #A89CA6;
  --body: #4A4050;
  --surface: #F7ECE3;
  --border: #F1E3D8;
  --ink: #3B3340;
  --accent: #EC5B33;
  --accent-deep: #C4441F;
  --accent-soft: #FFE3D8;
  --accent-text: #B5401F;
  --blue-soft: #DDE8FF;
  --blue-text: #2F55C4;
  --green: #2F8A6E;
  --green-text: #23725A;
  --celadon: #D5F0E3;
  --gold: #F2BD2C;
  --gold-text: #8A5D00;
  --sign-blue: #CFE0FF;
  --sign-red: #FFD3C6;
  --sign-gold: #FFE7A1;
  --sign-green: #C7EDD9;
  --sign-pink: #FFD2E1;
  --sign-orange: #FFDDBF;
  --sign-ink: #E2DAFF;
  --wall: #FBE8D8;
  --wall-dots: #F6DCC6;
  --floor: #EBC49E;
  --plank: #DDB38B;
  --display: "Jua", "Apple SD Gothic Neo", system-ui, sans-serif;
  --reading: "Nunito", "Apple SD Gothic Neo", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 64px);
  --shadow-card: 0 1px 0 var(--border), 0 10px 28px rgba(120, 70, 60, 0.06);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--reading);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 3px; border-radius: 6px; }

.ko { font-family: var(--display); font-weight: 400; }
.display { font-family: var(--display); font-weight: 400; }
.muted { color: var(--text-2); }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.line { display: block; text-wrap: balance; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: 1040px; margin: 0 auto; }
.wrap-wide { max-width: 1120px; margin: 0 auto; }
.wrap-narrow { max-width: 720px; margin: 0 auto; }
.section { padding: clamp(80px, 9vw, 128px) var(--gutter) 0; }

.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.15;
  text-align: center;
}
.lede-center {
  margin: 12px auto 0;
  max-width: 580px;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: balance;
}

/* The brand mark: the app icon and the name. */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 2px 6px rgba(120, 70, 60, 0.18); }
.brand span { font-family: var(--display); font-size: 26px; line-height: 1; }

/* Where the App Store badge goes at launch. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 15px 26px 14px;
  font-family: var(--display);
  font-size: 20px;
  line-height: 1;
}
.soon svg { flex: none; }

/* ---------- The cat's room ---------- */

.room {
  position: relative;
  height: clamp(370px, 36vw, 460px);
  background-color: var(--wall);
  background-image:
    radial-gradient(circle, var(--wall-dots) 2.4px, transparent 2.9px),
    radial-gradient(circle, var(--wall-dots) 2.4px, transparent 2.9px);
  background-size: 32px 34px, 32px 34px;
  background-position: 4px 6px, 20px 23px;
  overflow: hidden;
}
.room__bar { position: relative; z-index: 2; display: flex; align-items: center; padding: 16px var(--gutter); }
.room__poster {
  position: absolute;
  left: clamp(16px, 9vw, 150px);
  top: clamp(172px, 14vw, 190px);
  width: clamp(56px, 6.5vw, 88px);
  height: auto;
  filter: drop-shadow(0 3px 4px rgba(120, 70, 60, 0.12));
}
.room__window { position: absolute; right: clamp(12px, 9vw, 150px); top: clamp(64px, 6.5vw, 84px); width: clamp(96px, 20vw, 260px); height: auto; }
.room__floor {
  position: absolute;
  inset: auto 0 0 0;
  height: clamp(110px, 11vw, 140px);
  background: repeating-linear-gradient(to bottom, var(--floor) 0, var(--floor) 46px, var(--plank) 46px, var(--plank) 49px);
  border-top: 6px solid #F3D5BA;
}
.room__rug { position: absolute; left: 50%; bottom: clamp(18px, 1.8vw, 24px); width: clamp(210px, 24vw, 320px); height: auto; transform: translateX(-50%); }
.room__cat {
  position: absolute;
  left: 50%;
  bottom: clamp(32px, 3vw, 40px);
  height: clamp(180px, 17.5vw, 230px);
  width: auto;
  /* The raised paw sits left of the body, so the body is what's centered. */
  transform: translateX(-57%);
}

/* ---------- The sheet under the room ---------- */

.hero {
  position: relative;
  margin-top: -32px;
  padding: clamp(28px, 3.6vw, 48px) var(--gutter) 0;
  background: var(--bg);
  border-radius: 32px 32px 0 0;
  text-align: center;
}
.hero h1 {
  margin: 0 auto;
  max-width: 900px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.5px;
}
.hero h1 .accent { color: var(--accent); }
.hero p { margin: 14px auto 0; max-width: 540px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--text-2); text-wrap: balance; }
.hero .soon { margin-top: 22px; }

/* ---------- Open it. Tap Start. Done. ---------- */

.steps__row { margin-top: clamp(28px, 3.4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(32px, 5vw, 80px); }
.steps__list { flex: 1 1 340px; min-width: 0; max-width: 460px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.step { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--card); border-radius: 22px; box-shadow: var(--shadow-card); }
.step__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--display);
  font-size: 21px;
}
.step__title { font-weight: 800; font-size: 18px; line-height: 1.35; }
.step__text { margin-top: 2px; font-size: 16px; color: var(--text-2); }

.phone {
  flex: 0 1 auto;
  width: clamp(240px, 24vw, 290px);
  padding: 8px;
  background: #2F2734;
  border-radius: 44px;
  box-shadow: 0 24px 48px rgba(80, 50, 40, 0.18);
}
.phone img { width: 100%; height: auto; border-radius: 36px; }

/* ---------- Real grammar ---------- */

.grammar__row { margin-top: clamp(28px, 3.4vw, 44px); display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 16px; }
.card { background: var(--card); border-radius: 26px; box-shadow: var(--shadow-card); }
.path { flex: 1 1 340px; min-width: 0; max-width: 520px; padding: 20px; }
.path__label { font-weight: 700; font-size: 13px; color: var(--text-2); }
.path ol { margin-top: 12px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.path li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; }
.path .ko { font-size: 19px; line-height: 1.2; }
.path .gloss { font-size: 14px; color: var(--text-2); }
.path li.is-next { opacity: 0.6; }
.path li.is-now { display: block; padding: 10px; border-radius: 16px; background: var(--blue-soft); }
.path li.is-now .path__head { display: flex; align-items: center; gap: 12px; }
.path li.is-now .ko { font-size: 21px; color: var(--blue-text); }
.path li.is-now .gloss { color: var(--text); }
.path__now { margin-left: auto; font-weight: 800; font-size: 12px; color: var(--blue-text); }
.builds { margin: 10px 0 2px 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.builds__label { font-size: 12px; font-weight: 700; }
.chip-known { background: var(--card); color: var(--green-text); border-radius: 9px; padding: 4px 8px 3px; font-family: var(--display); font-size: 15px; line-height: 1.2; }

/* Status marks, as in the app's lists (components/status-mark.tsx). */
.mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 11px; }
.mark--done { background: var(--green); }
.mark--now { border: 2.5px solid var(--blue-text); }
.mark--now::after { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--blue-text); }
.mark--new { border: 2px dashed var(--text-3); }
.mark--learning { width: 16px; height: 16px; border: 2.5px solid var(--gold); }
.mark--learning::after { content: ""; width: 4px; height: 4px; border-radius: 2px; background: var(--gold); }
.mark--small { width: 16px; height: 16px; border-radius: 8px; }

.facts { flex: 1 1 280px; min-width: 0; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.fact { flex: 1 1 auto; padding: 20px 22px; }
.fact__big { font-family: var(--display); font-size: 40px; line-height: 1.05; color: var(--blue-text); }
.fact__title { margin-top: 8px; font-weight: 800; font-size: 18px; line-height: 1.35; }
.fact__text { margin-top: 2px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.both-ways { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.both-ways .ko { background: var(--sign-green); border-radius: 10px; padding: 5px 10px 4px; font-size: 17px; line-height: 1.2; }
.both-ways .en { background: var(--surface); border-radius: 10px; padding: 6px 10px 5px; font-weight: 700; font-size: 15px; line-height: 1.2; }

/* ---------- Every skill ---------- */

.skills { margin-top: clamp(28px, 3.4vw, 44px); display: flex; flex-wrap: wrap; gap: 12px; padding: 0; list-style: none; }
.skill { flex: 1 1 290px; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: var(--card); border-radius: 22px; box-shadow: 0 1px 0 var(--border), 0 8px 22px rgba(120, 70, 60, 0.05); }
.sign {
  flex: none;
  min-width: 68px;
  padding: 7px 10px 6px;
  border-radius: 12px;
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}
.sign--red { background: var(--sign-red); }
.sign--blue { background: var(--sign-blue); }
.sign--gold { background: var(--sign-gold); }
.sign--pink { background: var(--sign-pink); }
.sign--orange { background: var(--sign-orange); }
.sign--green { background: var(--sign-green); }
.sign--ink { background: var(--sign-ink); }
.skill__title { font-weight: 800; font-size: 17px; line-height: 1.35; }
.skill__text { margin-top: 2px; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* ---------- It learns how you learn ---------- */

/* One column on phones, two on tablets, four when there's room: never three and a stretched one. */
.features { margin-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 600px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature { min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 22px; }
.feature__demo { min-height: 128px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 16px; background: var(--bg); border-radius: 18px; }
.feature__title { font-weight: 800; font-size: 18px; line-height: 1.3; }
.feature__text { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.demo-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--green-text); }
.demo-level { font-family: var(--display); font-size: 26px; line-height: 1.15; }
.demo-small { font-size: 14px; color: var(--text-2); }
.demo-small .ko { font-size: 16px; color: var(--blue-text); }
.demo-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.demo-steps .sign { min-width: 0; padding: 6px 12px 5px; font-size: 22px; }
.demo-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--text-2); }
.demo-legend span { display: inline-flex; align-items: center; gap: 4px; }
.demo-legend .faint { opacity: 0.55; }
.demo-legend .mark { width: 14px; height: 14px; }
.demo-legend .mark--new { border-width: 2px; }
.demo-tally { font-size: 15px; font-weight: 700; }
.demo-tally span { color: var(--gold-text); }
.word-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.word-row .ko { font-size: 18px; }
.word-row small { font-family: var(--reading); font-size: 13px; color: var(--text-2); }
.demo-signs { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-signs .sign { min-width: 0; padding: 5px 10px 4px; border-radius: 10px; font-size: 17px; }
.demo-said { font-family: var(--display); font-size: 17px; line-height: 1.3; }
.demo-said span { color: var(--accent-text); }

/* ---------- A friend, the founder, the community ---------- */

.friend { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 64px); padding: clamp(28px, 4vw, 52px); border-radius: 32px; }
.friend__art { flex: 0 1 auto; display: flex; flex-direction: column; align-items: center; }
.friend__art img { width: clamp(180px, 17vw, 220px); height: auto; }
.friend__text { flex: 1 1 320px; min-width: 0; max-width: 520px; }
.friend__text h2 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.15; text-wrap: balance; }
.friend__text p { margin-top: 14px; font-size: 18px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }

.bubble { position: relative; margin-bottom: 16px; padding: 10px 18px 11px; background: var(--bg); border-radius: 20px; text-align: center; }
.bubble .ko { font-size: 21px; line-height: 27px; }
.bubble .en { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--text-2); }
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  border: 11px solid transparent;
  border-bottom: 0;
  border-top-color: var(--bg);
  transform: translateX(-50%);
}

.founder { padding: clamp(24px, 4vw, 44px); border-radius: 32px; }
.founder__head { display: flex; align-items: center; gap: 16px; }
.founder__photo { flex: none; width: 84px; height: 84px; border-radius: 42px; object-fit: cover; }
.founder__photo--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 2px dashed #D9C6B8;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.founder__name { font-family: var(--display); font-size: 26px; line-height: 1.2; }
.founder__sub { margin-top: 2px; font-size: 14px; color: var(--text-2); }
.founder__story p { margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.founder__story p:first-child { margin-top: 20px; }
.founder__sign { margin-top: 16px; font-family: var(--display); font-size: 22px; line-height: 1; }

.community {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding: clamp(24px, 3.4vw, 36px);
  background: var(--ink);
  color: #FFFFFF;
  border-radius: 28px;
}
.community__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, 0.12); }
.community__text { flex: 1 1 260px; min-width: 0; }
.community__text h2 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.2; }
.community__text p { margin-top: 8px; font-size: 16px; line-height: 1.6; color: #E4DCEA; }
.community__join {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text);
  text-decoration: none;
  font-family: var(--display);
  font-size: 19px;
}

.closing { padding: clamp(88px, 9vw, 128px) var(--gutter) clamp(72px, 8vw, 104px); text-align: center; }
.closing .soon { margin-top: 26px; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--border); padding: 20px var(--gutter) 28px; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.site-footer__brand { display: flex; align-items: center; flex-wrap: wrap; }
.site-footer .brand { padding: 10px 0; }
.site-footer .brand img { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; }
.site-footer .brand span { font-size: 20px; }
.site-footer__copy { margin-left: 6px; font-size: 14px; color: var(--text-2); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.site-footer nav a { padding: 12px 0; font-weight: 700; font-size: 15px; color: var(--text-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--text); }

/* ---------- Policy pages (privacy, terms, support) ---------- */

.doc-bar { display: flex; align-items: center; padding: 16px var(--gutter); }
.doc { padding: clamp(24px, 4vw, 48px) var(--gutter) clamp(64px, 8vw, 96px); }
.doc article { max-width: 720px; margin: 0 auto; }
.doc h1 { font-family: var(--display); font-weight: 400; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.1; }
.doc h2 { margin-top: 44px; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.8vw, 32px); line-height: 1.2; }
.doc h3 { margin-top: 24px; font-weight: 800; font-size: 18px; line-height: 1.4; }
.doc h3 + p { margin-top: 4px; }
.doc p { margin-top: 14px; font-size: 17px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
.doc ul { margin-top: 10px; padding-left: 22px; }
.doc li { margin-top: 8px; font-size: 17px; line-height: 1.65; color: var(--body); }
.doc li::marker { color: var(--text-3); }
.doc strong { color: var(--text); }
.doc a { color: var(--accent-text); text-underline-offset: 3px; }
.doc .doc__meta { margin-top: 12px; font-size: 15px; color: var(--text-2); }
.doc .table-scroll { margin-top: 16px; overflow-x: auto; border-radius: 18px; box-shadow: var(--shadow-card); background: var(--card); }
.doc table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.doc th, .doc td { padding: 12px 14px; text-align: left; vertical-align: top; color: var(--body); }
.doc th { font-weight: 800; color: var(--text); background: var(--surface); }
.doc tr + tr td { border-top: 1px solid var(--border); }
@media (max-width: 639px) {
  .doc .table-scroll { overflow: visible; }
  .doc table { min-width: 0; }
  .doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; }
  .doc tr { padding: 14px 16px; }
  .doc tr + tr { border-top: 1px solid var(--border); }
  .doc td { padding: 0; }
  .doc td + td { margin-top: 8px; }
  .doc tr + tr td { border-top: 0; }
  .doc td::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 800; color: var(--text-2); }
  .doc td:first-child { font-weight: 800; color: var(--text); }
  .doc td:first-child::before { display: none; }
}
.doc .todo { background: #FFF0BF; color: var(--gold-text); border-radius: 4px; padding: 0 3px; }

@media (prefers-reduced-motion: no-preference) {
  .community__join, .site-footer nav a { transition: opacity 0.15s ease-out; }
  .community__join:hover { opacity: 0.9; }
}