@font-face{font-family:"Koma Display";src:url("fonts/koma-display-70a7485908.woff2") format("woff2");font-display:swap}
/* Koma landing page. Paper, ink and one print blue from the extension; sakura is
   decoration only. Manga devices: ink panels with gutters, screentone, speed lines. */
:root {
  color-scheme: light;
  --paper: #fbf7ef;
  --paper-2: #f4ede1;
  --surface: #fffdf9;
  --surface-2: #f1ebe0;
  --ink: #2b2622;
  --ink-2: #3d3631;
  --muted: #6f665d;
  --line: #e6ded1;
  --brand: #465bb9;
  --brand-ink: #3f53ab;
  --brand-soft: #e9ebf7;
  --sakura: #ff6fa5;
  --sakura-ink: #c2185b;
  --sakura-soft: #ffe3ee;
  --on-ink: #fbf7ef;
  --on-ink-muted: #cfc5b8;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: "Koma Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Arial Black", system-ui, sans-serif;

  --wrap: 1200px;
  --gutter: 24px;
  --koma-gap: 14px;
  --stroke: 3px;
  --r-panel: 6px;
  --shadow-pop: 0 18px 40px rgb(60 40 20 / .18), 0 3px 10px rgb(60 40 20 / .1);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
.locale-zh-cn {
  --font-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Welcome-only languages. Each CJK language names its own fonts first so shared Han
   characters get that region's glyph shapes. The display subset also holds Japanese,
   Latin and Cyrillic headings; Chinese, Korean and Thai headings skip it and use the bold
   system font, so kanji from the Japanese headings never show up in a Chinese title. */
.locale-ja {
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Koma Display", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans JP", "Arial Black", system-ui, sans-serif;
}
.locale-ko {
  --font-body: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Koma Display", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Arial Black", system-ui, sans-serif;
}
.locale-zh-tw {
  --font-body: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Koma Display", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Arial Black", system-ui, sans-serif;
}
.locale-th {
  --font-body: Thonburi, "Leelawadee UI", "Noto Sans Thai", "Noto Sans Thai UI", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Koma Display", Thonburi, "Leelawadee UI", "Noto Sans Thai", "Arial Black", system-ui, sans-serif;
}
.locale-zh-hk {
  --font-body: "PingFang HK", "PingFang TC", "Microsoft JhengHei", "Noto Sans HK", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Koma Display", "PingFang HK", "PingFang TC", "Microsoft JhengHei", "Noto Sans HK", "Arial Black", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand-ink); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Buttons and chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px; border-radius: 999px;
  font: 800 15px/1.2 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s;
}
.btn .icon { width: 18px; height: 18px; flex: none; }
.btn-ink { background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 0 var(--sakura); }
.btn-ink:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--sakura); }
.btn-ink:active { transform: none; box-shadow: 0 0 0 0 var(--sakura); }
.btn-ghost { color: var(--ink); border: 2px solid var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--surface); }
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 16px; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 34px; padding: 5px 13px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--surface);
  font-size: 14px; font-weight: 700; line-height: 1.2; color: var(--ink);
}
.chips-sm { gap: 6px; }
.chips-sm .chip { min-height: 30px; padding: 4px 11px; font-size: 13px; border-width: 1.5px; }
.chip-more { background: var(--ink); color: var(--on-ink); text-decoration: none; }
.chip-more:hover { background: var(--ink-2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(251 247 239 / .88);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mascot { width: 38px; height: 38px; }
.brand-word { font: 400 24px/1 var(--font-display); letter-spacing: .02em; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a { padding: 8px 12px; border-radius: 999px; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav a:hover { background: var(--surface-2); }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lang-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.lang-switch a { min-width: 44px; padding: 6px 10px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; }
.lang-switch a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(60 40 20 / .16); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 56px 0 72px;
  background:
    radial-gradient(rgb(43 38 34 / .07) 1px, transparent 1.4px) 0 0 / 7px 7px,
    var(--paper);
}
.hero::after { /* ink rule like the bottom edge of a manga page */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--surface);
  font: 800 13px/1.2 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
}
.locale-zh-cn .eyebrow, .locale-ja .eyebrow, .locale-ko .eyebrow, .locale-zh-tw .eyebrow, .locale-zh-hk .eyebrow, .locale-th .eyebrow { text-transform: none; letter-spacing: .08em; }
.eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--sakura); box-shadow: 0 0 0 3px var(--sakura-soft); }
.hero h1 {
  font: 400 clamp(2.6rem, 1.4rem + 4.2vw, 4.6rem)/1.06 var(--font-display);
  font-synthesis: none; letter-spacing: -.005em;
}
.locale-zh-cn .hero h1 { font-family: var(--font-body); font-weight: 800; line-height: 1.16; letter-spacing: .02em; font-size: clamp(2.7rem, 1.4rem + 4.6vw, 4.9rem); }
.hero h1 mark { position: relative; z-index: 0; background: none; color: var(--brand); white-space: nowrap; }
.hero h1 mark::after { /* brush underline */
  content: ""; position: absolute; z-index: -1; left: -2%; right: -2%; bottom: .02em; height: .32em;
  background: var(--sakura-soft); border-radius: 999px; transform: rotate(-1.5deg);
}
.hero-sub { max-width: 34em; margin-top: 22px; color: var(--ink-2); font-size: clamp(1.03rem, .96rem + .3vw, 1.18rem); line-height: 1.7; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 14px; color: var(--muted); font-size: 14px; }
.works-on { display: flex; align-items: flex-start; gap: 12px; margin-top: 30px; padding-top: 22px; border-top: 2px dashed var(--line); }
.works-label { flex: none; padding-top: 5px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* Hero composition: a reading page, the Koma panel, the mascot. Sized in cqw so it scales as one picture. */
.hero-visual { position: relative; margin: 0; aspect-ratio: 1 / .92; container-type: inline-size; }
.burst {
  position: absolute; inset: 4% 0 6% 6%;
  border: var(--stroke) solid var(--ink); border-radius: var(--r-panel);
  transform: rotate(1.6deg);
  background:
    radial-gradient(circle at 62% 46%, var(--brand-soft) 0 22%, transparent 48%),
    repeating-conic-gradient(from 3deg at 62% 46%, rgb(43 38 34 / .82) 0deg .55deg, transparent .55deg 5.2deg),
    var(--brand-soft);
}
.tone-corner {
  position: absolute; left: 6%; bottom: 6%; width: 46%; height: 34%;
  background: radial-gradient(var(--ink) 1.3px, transparent 1.7px) 0 0 / 8px 8px;
  -webkit-mask-image: linear-gradient(35deg, #000 10%, transparent 70%); mask-image: linear-gradient(35deg, #000 10%, transparent 70%);
  opacity: .5; transform: rotate(1.6deg);
}
.reading { position: absolute; left: 0; top: 18%; width: 40%; }
.drawn-page { width: 100%; height: auto; }
.reading .drawn-page { position: absolute; left: 0; top: 0; border: 2px solid var(--ink); border-radius: 3px; box-shadow: 0 10px 24px rgb(60 40 20 / .18); }
.page-back { transform: translate(14%, 6%) rotate(7deg); }
.page-front { transform: rotate(-6deg); }
.mock {
  position: absolute; right: 2%; top: 8%; width: 54%;
  padding: 3.2cqw; border: var(--stroke) solid var(--ink); border-radius: 4.4cqw;
  background: var(--surface); box-shadow: var(--shadow-pop);
  font-size: 2.6cqw; line-height: 1.3;
}
.mock-bar { display: flex; align-items: center; gap: 1.6cqw; }
.mock-mascot { width: 6.4cqw; height: 6.4cqw; }
.mock-bar b { font: 400 3.6cqw/1 var(--font-display); }
.mock-pill { display: inline-flex; align-items: center; gap: .8cqw; margin-left: auto; padding: 1cqw 2cqw; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; font-size: 2.3cqw; }
.mock-pill .icon { width: 2.6cqw; height: 2.6cqw; stroke-width: 3; }
.mock-title { display: grid; gap: .4cqw; margin: 2.6cqw 0 2.2cqw; }
.mock-title strong { font-size: 3.3cqw; }
.mock-title span { color: var(--muted); font-size: 2.3cqw; }
.mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.mock-card { position: relative; border-radius: 1.4cqw; overflow: hidden; outline: .6cqw solid var(--brand); outline-offset: -.6cqw; background: #fff; }
.mock-card svg { width: 100%; height: auto; }
.mock-check { position: absolute; top: 1cqw; right: 1cqw; display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 0 0 .5cqw #fff; }
.mock-check .icon { width: 2.8cqw; height: 2.8cqw; stroke-width: 3.4; }
.mock-num { position: absolute; left: 1cqw; bottom: 1cqw; min-width: 3.8cqw; padding: .2cqw .8cqw; border-radius: 999px; background: rgb(43 38 34 / .78); color: #fff; font-size: 2cqw; font-weight: 800; text-align: center; }
.mock-save { display: flex; justify-content: center; margin-top: 2.6cqw; }
.mock-save-btn { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 2cqw 4cqw; border-radius: 999px; background: var(--ink); color: var(--on-ink); font-weight: 800; font-size: 2.8cqw; box-shadow: 0 1.2cqw 2.4cqw rgb(43 38 34 / .25); }
.mock-save-btn .icon { width: 3cqw; height: 3cqw; stroke-width: 3; }
.hero-mascot { position: absolute; left: 30%; top: -1%; width: 19%; animation: bob 4.8s var(--ease) infinite; }
.hero-mascot-svg { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgb(43 38 34 / .2)); }
.speech {
  position: absolute; bottom: 92%; left: -36%; z-index: 1;
  padding: 1.6cqw 2.6cqw; border: .5cqw solid var(--ink); border-radius: 999px; background: #fff;
  font-weight: 800; font-size: 2.7cqw; line-height: 1.2; white-space: nowrap;
}
.speech::after { /* bubble tail toward the mascot */
  content: ""; position: absolute; right: 22%; bottom: -1.7cqw; width: 2.6cqw; height: 2.6cqw;
  background: #fff; border-right: .5cqw solid var(--ink); border-bottom: .5cqw solid var(--ink);
  transform: rotate(35deg) skew(-10deg);
}
.sfx::before {
  content: attr(data-sfx);
  font: 400 1em/1 var(--font-display); white-space: nowrap;
  color: var(--sakura); -webkit-text-stroke: .09em var(--ink); paint-order: stroke fill;
  text-shadow: .05em .06em 0 var(--ink);
}
.sfx { position: absolute; pointer-events: none; }
.sfx-hero { right: -2%; top: -3%; font-size: 9.4cqw; transform: rotate(-12deg); animation: pop 4.8s var(--ease) infinite; }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 112px) 0; }
.section-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head::before { /* decorative Japanese label, like a chapter tab */
  content: attr(data-jp);
  display: inline-block; margin-bottom: 16px; padding: 6px 12px 7px;
  background: var(--ink); color: var(--on-ink);
  font: 400 15px/1 var(--font-display); letter-spacing: .14em;
  transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--sakura);
}
.section-head h2 { font: 400 clamp(2rem, 1.3rem + 2.4vw, 3.2rem)/1.12 var(--font-display); font-synthesis: none; }
.locale-zh-cn .section-head h2 { font-family: var(--font-body); font-weight: 800; line-height: 1.25; letter-spacing: .02em; }
.lead { margin-top: 14px; color: var(--muted); font-size: clamp(1.02rem, .97rem + .25vw, 1.14rem); }
.koma { position: relative; background: var(--surface); border: var(--stroke) solid var(--ink); border-radius: var(--r-panel); }
.fine { margin-top: 18px; color: var(--muted); font-size: 13px; }

/* Supported sites: a manga page of panels. */
.sites { background: var(--paper); }
.sites-grid {
  display: grid; gap: var(--koma-gap);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-areas: "jp kr" "jp global" "any any";
}
.site-group { padding: 26px; }
.group-jp { grid-area: jp; background: radial-gradient(rgb(43 38 34 / .06) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--surface); }
.group-global { grid-area: global; }
.group-kr { grid-area: kr; }
.group-any { grid-area: any; display: flex; align-items: center; gap: 20px; border-style: dashed; background: var(--paper-2); }
.group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.group-head h3 { font-size: 21px; font-weight: 800; line-height: 1.3; }
.stamp {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 7px;
  border: 2px solid var(--ink); border-radius: 999px; background: var(--surface);
  font-size: 13px; font-weight: 800; line-height: 1;
}
.flag { flex: none; width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(43 38 34 / .28); }
.flag-globe { width: 18px; height: 18px; margin-inline: 3px; box-shadow: none; color: var(--brand); }
.group-count { margin-left: auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.site-group > p { margin: 8px 0 18px; color: var(--muted); }
.chips-logo .chip { gap: 8px; padding-left: 6px; }
.chips-logo img { flex: none; width: 22px; height: 22px; border-radius: 6px; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgb(43 38 34 / .12); }
.group-any h3 { font-size: 19px; font-weight: 800; }
.group-any p { margin-top: 4px; color: var(--muted); }
.group-any .any-note { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgb(43 38 34 / .22); font-size: 13px; line-height: 1.6; }
.group-any .any-note::before { content: "※"; flex: none; color: var(--sakura-ink); font-weight: 800; }
.any-icon { flex: none; width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); color: var(--ink); }

/* How it works */
.how { background: var(--surface); border-block: var(--stroke) solid var(--ink); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--koma-gap); counter-reset: step; }
.step { padding: 22px 24px 26px; background: var(--paper); }
.step-figure { margin: -4px -6px 18px; padding: 10px; border-radius: 4px; background: radial-gradient(rgb(43 38 34 / .07) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--surface); border: 2px solid var(--line); }
.step-art { width: 100%; height: auto; }
.step-num {
  position: absolute; top: -18px; left: -12px; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--on-ink);
  font: 400 22px/1 var(--font-display); box-shadow: 3px 3px 0 var(--sakura);
}
.step .step-title { color: var(--ink); font-size: 21px; font-weight: 800; line-height: 1.3; }
.step p { margin-top: 6px; color: var(--muted); }
.formats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.formats li { padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: 13px; font-weight: 800; }
.step:not(:last-child)::after { /* reading-order arrow across the gutter */
  content: ""; position: absolute; z-index: 1; top: 50%; right: -21px; width: 28px; height: 28px;
  border-radius: 50%; background: var(--sakura) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 16px no-repeat;
  border: 2px solid var(--ink);
}

/* Features: bento of panels */
.bento {
  display: grid; gap: var(--koma-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "order order webtoon"
    "batch free webtoon"
    "languages languages languages";
}
.feature { display: flex; flex-direction: column; gap: 14px; padding: 24px; overflow: hidden; }
.feature-order { grid-area: order; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-areas: "icon art" "copy art"; align-content: start; gap: 14px 28px; }
.feature-order .feature-icon { grid-area: icon; }
.feature-order .feature-copy { grid-area: copy; }
.feature-order .order-art { grid-area: art; align-self: center; }
.feature-webtoon { grid-area: webtoon; background: var(--brand-soft); }
.feature-batch { grid-area: batch; }
.feature-free { grid-area: free; }
.feature-languages { grid-area: languages; flex-direction: row; align-items: center; background: var(--ink); color: var(--on-ink); }
.feature.feature-languages p { color: var(--on-ink-muted); }
.feature-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-soft); color: var(--brand); border: 2px solid var(--ink); }
.feature-icon .icon { width: 24px; height: 24px; }
.feature-webtoon .feature-icon { background: var(--surface); }
.feature-languages .feature-icon { background: var(--sakura-soft); color: var(--sakura-ink); border-color: var(--on-ink); }
.feature h3 { font-size: 19px; font-weight: 800; line-height: 1.35; }
.feature p { margin-top: 6px; color: var(--muted); }
.order-art { display: flex; justify-content: center; padding: 8px 0 18px; }
.order-page { position: relative; width: 24%; margin-left: -4%; border: 2px solid var(--ink); border-radius: 3px; background: #fff; box-shadow: 0 6px 14px rgb(60 40 20 / .14); }
.order-page:nth-child(1) { transform: rotate(-7deg); margin-left: 0; }
.order-page:nth-child(2) { transform: rotate(-2deg) translateY(-6px); }
.order-page:nth-child(3) { transform: rotate(3deg) translateY(-4px); }
.order-page:nth-child(4) { transform: rotate(8deg); }
.order-page b { position: absolute; left: 50%; bottom: -14px; translate: -50% 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font: 400 14px/1 var(--font-display); border: 2px solid var(--ink); }
.strip-art {
  position: relative; flex: none; height: 300px; margin: auto auto -26px; width: min(62%, 210px);
  border: var(--stroke) solid var(--ink); border-bottom: 0; border-radius: 26px 26px 0 0;
  background: #fff; overflow: hidden;
}
.strip-art::before { content: ""; position: absolute; z-index: 1; top: 8px; left: 50%; width: 34%; height: 6px; translate: -50% 0; border-radius: 999px; background: var(--ink); }
.strip-scroll { position: absolute; inset: 0 0 auto; animation: strip 18s linear infinite; }
.drawn-strip { width: 100%; height: auto; }

/* Respect: a black page, like a manga flashback. */
.respect {
  background:
    radial-gradient(rgb(251 247 239 / .07) 1px, transparent 1.4px) 0 0 / 7px 7px,
    var(--ink);
  color: var(--on-ink);
}
.respect .section-head::before { background: var(--on-ink); color: var(--ink); }
.respect .lead { color: var(--on-ink-muted); }
.respect-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--koma-gap); }
.respect-points li { padding: 24px; border: 2px solid rgb(251 247 239 / .28); border-radius: var(--r-panel); }
.respect-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 50%; background: var(--sakura); color: var(--ink); }
.respect-icon .icon { width: 22px; height: 22px; }
.respect-points h3 { font-size: 18px; font-weight: 800; }
.respect-points p { margin-top: 6px; color: var(--on-ink-muted); font-size: 15px; }
.support { display: flex; align-items: center; gap: 10px; margin-top: 28px; color: var(--on-ink); font-weight: 600; }
.support::before { content: "♥"; color: var(--sakura); font-size: 20px; line-height: 1; }

/* FAQ */
.faq-wrap { max-width: 920px; }
.faq-list { display: grid; gap: 12px; }
.faq-item { padding: 0; }
.faq-item summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; border-radius: var(--r-panel); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--paper-2); }
.faq-item h3 { flex: 1; font-size: 17px; font-weight: 800; line-height: 1.45; }
.q-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font: 400 16px/1 var(--font-display); border: 2px solid var(--ink); }
.faq-toggle { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); transition: transform .3s var(--ease); }
.faq-toggle .icon { width: 18px; height: 18px; }
.faq-item[open]:not(.closing) .faq-toggle { transform: rotate(45deg); }
.faq-answer { overflow: hidden; }
.faq-item p { padding: 0 24px 22px 68px; color: var(--ink-2); }

/* Final call to action */
.final { padding: 0 0 clamp(64px, 9vw, 112px); }
.final-panel {
  position: relative; display: grid; justify-items: center; gap: 14px;
  padding: clamp(96px, 12vw, 132px) 24px clamp(48px, 6vw, 72px);
  border: var(--stroke) solid var(--ink); border-radius: var(--r-panel); text-align: center;
  background:
    radial-gradient(ellipse at 50% 52%, var(--sakura-soft) 0 30%, transparent 62%),
    repeating-conic-gradient(from 0deg at 50% 52%, rgb(43 38 34 / .6) 0deg .5deg, transparent .5deg 5deg),
    var(--sakura-soft);
}
.final-panel h2 { font: 400 clamp(2rem, 1.3rem + 2.6vw, 3.4rem)/1.12 var(--font-display); font-synthesis: none; }
.locale-zh-cn .final-panel h2 { font-family: var(--font-body); font-weight: 800; letter-spacing: .02em; }
.final-panel p { max-width: 32em; color: var(--ink-2); font-size: 1.1rem; }
.final-panel .btn { margin-top: 10px; }
.final-mascot { position: absolute; top: -46px; left: 50%; width: 120px; translate: -50% 0; animation: bob 4.8s var(--ease) infinite; }
.final-mascot-svg { width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgb(43 38 34 / .22)); }
.final-mascot .speech { bottom: 64%; left: 96%; font-size: 15px; padding: 8px 14px; border-width: 2.5px; }
.final-mascot .speech::after { left: 10px; right: auto; bottom: -9px; width: 14px; height: 14px; border-width: 2.5px; transform: rotate(80deg) skew(-10deg); }
.sfx-final { right: 5%; top: 6%; font-size: clamp(36px, 4.4vw, 60px); transform: rotate(12deg); }

/* Footer */
.site-footer { padding: 48px 0 36px; border-top: var(--stroke) solid var(--ink); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin-top: 12px; max-width: 26em; color: var(--muted); }
.footer-title { margin-bottom: 10px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.footer-mail { display: flex; align-items: center; gap: 8px; font-weight: 700; overflow-wrap: anywhere; }
.footer-mail .icon { width: 18px; height: 18px; flex: none; color: var(--muted); }
.footer-langs { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer-langs a { color: var(--ink); font-weight: 700; text-decoration: none; }
.footer-langs a:hover { text-decoration: underline; }
.footer-langs a[aria-current="page"] { color: var(--brand-ink); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

.footer-policies { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.footer-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-left: auto; }
.footer-policies a { color: inherit; text-decoration: none; }
.footer-policies a:hover { text-decoration: underline; }

/* Policy pages: a single readable column on the same paper. */
.legal { max-width: calc(760px + var(--gutter) * 2); padding-block: clamp(48px, 7vw, 88px); }
.legal-head { margin-bottom: 36px; padding-bottom: 24px; border-bottom: var(--stroke) solid var(--ink); }
.legal-head h1 { font: 400 clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem)/1.1 var(--font-display); font-synthesis: none; }
.legal-updated { margin-top: 12px; color: var(--muted); font-size: 14px; }
.prose { color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 44px; color: var(--ink); font-size: 23px; font-weight: 800; line-height: 1.3; scroll-margin-top: 90px; }
.prose h3 { margin-top: 28px; color: var(--ink); font-size: 18px; font-weight: 800; scroll-margin-top: 90px; }
.prose ul { padding-left: 1.3em; list-style: disc; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--sakura); }
.prose strong { color: var(--ink); }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font-size: .92em; }
.table-wrap { overflow-x: auto; border: 2px solid var(--ink); border-radius: var(--r-panel); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--surface-2); color: var(--ink); font-weight: 800; }
.prose tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.prose tr:last-child > * { border-bottom: 0; }

/* ---------- Welcome page (opened once after installation) ---------- */
.pin-callout {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 10px 6px 6px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--sakura-soft); font-size: 14px; font-weight: 800; white-space: nowrap;
  animation: nudge 1.6s var(--ease) infinite;
}
.pin-callout-mascot { width: 26px; height: 26px; }
.pin-callout-arrow { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lang-menu { position: relative; flex: none; }
.pin-callout { flex: none; }
.lang-menu summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.2; list-style: none; cursor: pointer; white-space: nowrap;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary .icon { width: 16px; height: 16px; }
.lang-menu .lang-menu-caret { width: 14px; height: 14px; transition: rotate .2s var(--ease); }
.lang-menu[open] .lang-menu-caret { rotate: 180deg; }
.lang-menu ul {
  position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; min-width: 200px; max-height: calc(100vh - 90px); overflow-y: auto; margin: 0; padding: 6px; list-style: none;
  border: 2px solid var(--ink); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop);
}
/* Each language name in its own script's font, whatever the page language is. */
.lang-menu a, .footer-langs a { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.lang-menu a:lang(ja), .footer-langs a:lang(ja) { font-family: "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", sans-serif; }
.lang-menu a:lang(ko), .footer-langs a:lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }
.lang-menu a:lang(zh-Hans), .footer-langs a:lang(zh-Hans) { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; }
.lang-menu a:lang(zh-Hant), .footer-langs a:lang(zh-Hant) { font-family: "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif; }
.lang-menu a:lang(th), .footer-langs a:lang(th) { font-family: Thonburi, "Leelawadee UI", "Noto Sans Thai", sans-serif; }
.lang-menu a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lang-menu a:hover { background: var(--surface-2); }
.lang-menu a[aria-current="page"] { background: var(--brand-soft); }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 4px -4px; } }

.welcome {
  position: relative; padding: 48px 0 64px;
  background: radial-gradient(rgb(43 38 34 / .07) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--paper);
  border-bottom: var(--stroke) solid var(--ink);
}
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.eyebrow-done { gap: 6px; padding-left: 8px; }
.eyebrow-done::before { display: none; }
.eyebrow-done .icon { width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: #1c7550; color: #fff; stroke-width: 3.4; }
.welcome h1 { font: 400 clamp(2.4rem, 1.5rem + 3vw, 3.8rem)/1.08 var(--font-display); font-synthesis: none; }
.locale-zh-cn .welcome h1, .locale-ko .welcome h1, .locale-zh-tw .welcome h1, .locale-zh-hk .welcome h1, .locale-th .welcome h1 { font-family: var(--font-body); font-weight: 800; line-height: 1.2; letter-spacing: .02em; }
.locale-ja .welcome h1 { line-height: 1.2; }
.welcome-sub { max-width: 32em; margin-top: 16px; color: var(--ink-2); font-size: 1.08rem; }
.pin-guide { margin-top: 28px; padding: 22px 24px; border: var(--stroke) solid var(--ink); border-radius: var(--r-panel); background: var(--surface); }
.pin-guide h2 { font-size: 21px; font-weight: 800; line-height: 1.3; }
.pin-lead { margin-top: 4px; color: var(--muted); }
.pin-steps { display: grid; gap: 8px; margin-top: 16px; }
.pin-step { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 12px; animation: step-1 8s linear infinite; }
.pin-step-2 { animation-name: step-2; }
.pin-step-3 { animation-name: step-3; }
.pin-num { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sakura); color: var(--ink); font: 400 13px/1 var(--font-display); border: 2px solid var(--ink); }
@keyframes step-1 { 0%, 29% { background: var(--brand-soft); } 31%, 100% { background: transparent; } }
@keyframes step-2 { 0%, 30% { background: transparent; } 32%, 44% { background: var(--brand-soft); } 46%, 100% { background: transparent; } }
@keyframes step-3 { 0%, 45% { background: transparent; } 47%, 92% { background: var(--brand-soft); } 94%, 100% { background: transparent; } }

.welcome-visual { position: relative; }
.welcome-mascot { position: absolute; left: -4%; bottom: -8%; width: 18%; animation: bob 4.8s var(--ease) infinite; }
.welcome-mascot-svg { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgb(43 38 34 / .22)); }

/* The drawn toolbar. One 8s loop: open the menu (1), find Koma (2), pin it (3). */
.pin-demo { position: relative; margin: 0; aspect-ratio: 16 / 11; container-type: inline-size; }
.pd-window { position: absolute; inset: 0; overflow: hidden; border: var(--stroke) solid var(--ink); border-radius: 3cqw; background: #fff; box-shadow: var(--shadow-pop); }
.pd-bar { display: block; height: 1.4cqw; border-radius: 999px; background: #e3dcd0; }
.pd-tabs { display: flex; align-items: flex-end; height: 11%; padding-left: 3cqw; background: #ebe5da; }
.pd-tab { display: flex; align-items: center; gap: 1.4cqw; width: 34%; height: 76%; padding: 0 2cqw; border-radius: 1.8cqw 1.8cqw 0 0; background: #fff; }
.pd-tab .pd-bar { flex: 1; }
.pd-tab-icon { width: 3.4cqw; height: 3.4cqw; flex: none; }
.pd-toolbar { display: flex; align-items: center; gap: 1.6cqw; height: 12%; padding: 0 2.4cqw; border-bottom: 1px solid var(--line); }
.pd-nav { width: 3cqw; height: 3cqw; border-radius: 50%; background: #ddd6ca; flex: none; }
.pd-address { display: flex; align-items: center; flex: 1; height: 60%; padding: 0 2.4cqw; border-radius: 999px; background: #f3eee5; }
.pd-address .pd-bar { width: 42%; }
.pd-slot, .pd-puzzle { position: relative; display: grid; place-items: center; flex: none; width: 4.8cqw; height: 4.8cqw; border-radius: 50%; }
.pd-pinned { width: 82%; height: 82%; opacity: 0; scale: .3; animation: pinned 8s var(--ease) infinite; }
.pd-puzzle svg { width: 88%; height: 88%; fill: #6f665d; }
.pd-puzzle { animation: press 8s linear infinite; }
.pd-avatar { width: 4cqw; height: 4cqw; flex: none; border-radius: 50%; background: var(--sakura-soft); border: 1px solid #f3bcd2; }
.pd-menu { width: 1.4cqw; height: 4cqw; flex: none; background: radial-gradient(circle, #8a8178 .45cqw, transparent .5cqw) 0 0 / 1.4cqw 1.33cqw; }
.pd-page { display: grid; gap: 2.4cqw; padding: 5cqw 6cqw; }
.pd-page .pd-bar { height: 2cqw; }
.pd-page .short { width: 60%; }
.pd-dropdown {
  position: absolute; top: 24%; right: 5%; width: 63%; padding: 1.6cqw;
  border: 1px solid var(--line); border-radius: 2.4cqw; background: #fff;
  box-shadow: 0 2cqw 5cqw rgb(43 38 34 / .2);
  opacity: 0; transform-origin: top right; animation: menu 8s var(--ease) infinite;
}
.pd-head { padding: 1.2cqw 1.6cqw 2cqw; }
.pd-head .pd-bar { width: 40%; height: 1.8cqw; background: #cfc7ba; }
.pd-row { display: flex; align-items: center; gap: 1.8cqw; padding: 1.3cqw 1.6cqw; border-radius: 1.6cqw; }
.pd-row .pd-bar { flex: 1; max-width: 60%; }
.pd-row b { flex: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 2.6cqw; font-weight: 700; line-height: 1.25; }
.pd-mine { animation: row 8s linear infinite; }
.pd-ext-icon { width: 4cqw; height: 4cqw; flex: none; }
.pd-blank { border-radius: 1cqw; background: #e3dcd0; }
.pd-pin { display: grid; place-items: center; width: 4.4cqw; height: 4.4cqw; flex: none; margin-left: auto; border-radius: 50%; }
.pd-pin svg { width: 66%; height: 66%; fill: none; stroke: #8a8178; stroke-width: 2; stroke-linejoin: round; }
.pd-mine .pd-pin { animation: press-pin 8s linear infinite; }
.pd-mine .pd-pin svg { animation: pin-fill 8s linear infinite; }
.pd-badge {
  position: absolute; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw;
  border: .4cqw solid var(--ink); border-radius: 50%; background: var(--sakura); color: var(--ink);
  font: 400 1.9cqw/1 var(--font-display); font-style: normal;
}
.pd-puzzle .pd-badge { top: -2.6cqw; right: -2.6cqw; }
.pd-badge-2 { left: -1.8cqw; top: 46%; }
.pd-badge-3 { right: -1.8cqw; top: 46%; }
.pd-cursor { position: absolute; left: 40%; top: 70%; width: 5cqw; height: 5cqw; fill: var(--ink); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; animation: cursor 8s var(--ease) infinite; }
@keyframes cursor {
  0% { left: 40%; top: 72%; opacity: 0; }
  5% { opacity: 1; }
  17%, 24% { left: 85.2%; top: 15.4%; scale: 1; }
  20% { scale: .82; }
  40%, 52% { left: 87.4%; top: 44%; scale: 1; }
  46% { scale: .82; }
  70% { left: 62%; top: 72%; opacity: 1; }
  88%, 100% { left: 62%; top: 72%; opacity: 0; }
}
@keyframes press { 0%, 18%, 26%, 100% { background: transparent; } 19%, 25% { background: #e9e4da; } }
@keyframes menu { 0%, 21% { opacity: 0; transform: translateY(-2%) scale(.97); } 24%, 60% { opacity: 1; transform: none; } 63%, 100% { opacity: 0; transform: translateY(-2%) scale(.97); } }
@keyframes row { 0%, 34% { background: transparent; } 38%, 58% { background: var(--brand-soft); } 61%, 100% { background: transparent; } }
@keyframes press-pin { 0%, 45%, 50%, 100% { background: transparent; } 46%, 49% { background: #d7dcf3; } }
@keyframes pin-fill { 0%, 47% { fill: none; stroke: #8a8178; } 48%, 100% { fill: var(--brand); stroke: var(--brand); } }
@keyframes pinned { 0%, 62% { opacity: 0; scale: .3; } 67% { opacity: 1; scale: 1.18; } 71%, 94% { opacity: 1; scale: 1; } 98%, 100% { opacity: 0; scale: .3; } }

.welcome-h2 { margin-bottom: 28px; font: 400 clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem)/1.15 var(--font-display); font-synthesis: none; }
.locale-zh-cn .welcome-h2, .locale-ko .welcome-h2, .locale-zh-tw .welcome-h2, .locale-zh-hk .welcome-h2, .locale-th .welcome-h2 { font-family: var(--font-body); font-weight: 800; letter-spacing: .02em; }
.try-panel {
  display: grid; gap: 20px; padding-block: 36px;
  border: var(--stroke) solid var(--ink); border-radius: var(--r-panel);
  background: radial-gradient(rgb(43 38 34 / .06) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--brand-soft);
  max-width: var(--wrap); width: calc(100% - var(--gutter) * 2); padding-inline: 32px;
}
.try-panel .welcome-h2 { margin-bottom: 0; }
.try-chips a.chip { gap: 8px; text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.try-chips a.chip:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.chip-go { width: 14px; height: 14px; color: var(--muted); }
.help { padding-top: 0; }
.help-list { display: grid; gap: 12px; margin: 0; }
.help-item { padding: 18px 22px; }
.help-item dt { font-size: 17px; font-weight: 800; }
.help-item dd { margin: 6px 0 0; color: var(--ink-2); }

@media (max-width: 1080px) {
  .welcome-grid { grid-template-columns: minmax(0, 1fr); }
  .welcome-visual { max-width: 620px; width: 100%; margin-inline: auto; }
}
@media (max-width: 600px) {
  /* Phones have no extension toolbar to point at. */
  .pin-callout { display: none; }
  .welcome { padding: 28px 0 44px; }
  .pin-guide { padding: 18px; }
  .try-panel { padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Without motion the demo shows its finished state, with all three numbered targets. */
  .pd-dropdown { opacity: 1; }
  .pd-pinned { opacity: 1; scale: 1; }
  .pd-mine { background: var(--brand-soft); }
  .pd-mine .pd-pin svg { fill: var(--brand); stroke: var(--brand); }
  .pd-cursor { display: none; }
}

/* ---------- Motion ---------- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pop { 0%, 72%, 100% { scale: 1; } 78% { scale: 1.12; } 84% { scale: .97; } }
@keyframes strip { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-visual { max-width: 640px; width: 100%; margin-inline: auto; }
}
@media (max-width: 860px) {
  .sites-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "jp" "kr" "global" "any"; }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .step:not(:last-child)::after { top: auto; right: auto; left: 50%; bottom: -33px; translate: -50% 0; rotate: 90deg; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "order order" "webtoon batch" "webtoon free" "languages languages"; }
  .respect-points { grid-template-columns: minmax(0, 1fr); }
  .feature-order { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "copy" "art"; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; --koma-gap: 12px; --stroke: 2.5px; }
  html { scroll-padding-top: 72px; }
  .header-inner { gap: 10px; min-height: 60px; }
  .brand-mascot { width: 32px; height: 32px; }
  .brand-word { font-size: 21px; }
  .header-actions { gap: 8px; }
  .lang-switch a { min-width: 38px; padding: 6px 8px; }
  .hero { padding: 32px 0 48px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .works-on { flex-direction: column; gap: 10px; }
  .site-group { padding: 20px; }
  .group-any { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "order" "webtoon" "batch" "free" "languages"; }
  .feature-languages { flex-direction: column; align-items: flex-start; }
  .strip-art { height: 240px; width: min(56%, 190px); }
  .respect-points { grid-template-columns: minmax(0, 1fr); }
  .faq-item summary { padding: 16px; gap: 12px; }
  .faq-item p { padding: 0 18px 20px 18px; }
  .final-mascot { width: 96px; top: -38px; }
  .final-mascot .speech { font-size: 13px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .prose tbody th { white-space: normal; }
}
@media (max-width: 380px) {
  .header-actions .btn-sm { display: none; }
}