/* Stitch · Brand Identity (Heartline) — dựng từ frame bMKZH trong Design/version2.pen.
   Nền kem, thẻ trắng bo 32px, logo Heartline + wordmark Nunito Black, tiêu đề Unbounded, nội dung Manrope. */

@font-face { font-family: "Nunito"; src: url("/assets/fonts/Nunito-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/Unbounded-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/Unbounded-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/Manrope-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/Manrope-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/Manrope-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/Manrope-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/Manrope-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --cream: #fbf7f4;
  --card: #ffffff;
  --ink: #16141a;
  --ink-2: #5b5866;
  --ink-3: #6f6b79; /* khớp ink3 của app sau rà UI 02/11 (#9a97a3 chỉ 2,9:1) */
  --line: #ede6e0;
  --accent: #f0365a;
  --accent-soft: #ffe3ea;
  --wine: #4a1526;
  --blush: #fbdce3;
  --danger: #e0322f;

  --f-wm: "Nunito", ui-rounded, system-ui, sans-serif;
  --f-display: "Unbounded", ui-rounded, system-ui, sans-serif;
  --f-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-label: "Inter", system-ui, sans-serif;

  --pad: clamp(16px, 5vw, 96px);
  --r: 32px;
  --gap: clamp(14px, 1.4vw, 24px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 16px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.blooms {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse 25% 35% at 10% 10%, #ffc29e40 0%, #ffc29e00 100%),
    radial-gradient(ellipse 30% 40% at 2% 95%, #c9b6ff59 0%, #c9b6ff00 100%),
    radial-gradient(ellipse 35% 45% at 95% 5%, #ff8fb066 0%, #ff8fb000 100%);
}

/* ---------- Logo pieces ---------- */
.mk { height: auto; fill: currentColor; color: var(--accent); flex: none; }

.wm {
  display: inline-flex; flex-direction: column; align-items: center; gap: .16em;
  font: 900 var(--wm, 100px)/1 var(--f-wm);
  letter-spacing: -.035em;
  color: var(--accent);
}
.wm-w { display: block; padding-inline: .02em; }
.wm-t { display: flex; gap: .13em; color: var(--thread, currentColor); }
.wm-t i { display: block; width: .207em; height: .076em; border-radius: .04em; background: currentColor; transform: rotate(-6deg); }
.wm-t i:nth-child(even) { transform: rotate(6deg); }

.lk { display: inline-flex; align-items: center; gap: .26em; font-size: var(--wm, 100px); color: var(--accent); }
.lk > .mk { width: 1.21em; color: inherit; }
.lk .wm { --wm: 1em; }
.lk-v { display: inline-flex; flex-direction: column; align-items: center; gap: .24em; font-size: var(--wm, 92px); color: var(--accent); }
.lk-v > .mk { width: 1.93em; color: inherit; }
.lk-v .wm { --wm: 1em; }

.thread-line { display: block; width: 100%; height: 8px; overflow: visible; }
.thread-line line { stroke-linecap: round; }

/* ---------- Layout ---------- */
.page { max-width: 2000px; margin: 0 auto; }
.sec { padding: clamp(56px, 6.4vw, 96px) var(--pad); display: flex; flex-direction: column; gap: clamp(32px, 3.2vw, 48px); scroll-margin-top: 12px; }
.sh { display: grid; grid-template-columns: 80px minmax(0, 820px); column-gap: 40px; align-items: start; }
.sh-n { font: 700 16px/1 var(--f-label); letter-spacing: 2px; color: var(--accent); padding-top: .6em; }
.sh h2 { font: 700 clamp(28px, 3.2vw, 44px)/1.15 var(--f-display); letter-spacing: -.02em; margin-bottom: 14px; text-wrap: balance; }
.sh p { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.52; color: var(--ink-2); }

.card { background: var(--card); border-radius: var(--r); }
.cap { font: 600 13px/1.2 var(--f-label); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
figure { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }

/* ---------- 00 Cover ---------- */
.cover {
  min-height: min(100svh, 1080px);
  padding: clamp(28px, 4.6vw, 72px) var(--pad);
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
}
.cover-top, .cover-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.cover-top .l { font: 700 15px/1.2 var(--f-label); letter-spacing: 3px; color: var(--ink-2); }
.cover-top .r { font: 600 15px/1.2 var(--f-label); letter-spacing: 1px; color: var(--ink-3); text-decoration: none; }
.cover-top .r:hover { color: var(--accent); }
.cover-hero { display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 2.8vw, 44px); text-align: center; }
.cover-hero .lk { --wm: clamp(54px, 9.9vw, 198px); }
.cover-hero .tag-en { font: 600 clamp(20px, 1.9vw, 34px)/1.2 var(--f-display); letter-spacing: -.03em; color: var(--ink); }
.cover-hero .tag-vi { font: 600 clamp(16px, 1.3vw, 22px)/1.4 var(--f-body); color: var(--ink-2); margin-top: 8px; }
.cover-nav { display: flex; flex-wrap: wrap; gap: 4px 0; font: 600 16px/1.4 var(--f-body); color: var(--ink-2); }
.cover-nav a { text-decoration: none; }
.cover-nav a:hover { color: var(--accent); }
.cover-nav a + a::before { content: "·"; margin: 0 6px; color: var(--ink-3); }
.cover-bottom .wm-t { font-size: 140px; color: var(--accent); }

/* ---------- 01 Story ---------- */
.story { display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 1024fr); gap: var(--gap); }
.story-hero { border-radius: var(--r); aspect-ratio: 760 / 640; }
.story-hero .mk { width: 52%; }
.meanings { display: flex; flex-direction: column; gap: var(--gap); }
.meaning { flex: 1; display: flex; align-items: center; gap: 24px; padding: 28px 36px; }
.ico { width: 64px; height: 64px; border-radius: 20px; background: var(--accent-soft); color: var(--accent); flex: none; }
.ico svg { width: 26px; height: 26px; }
.meaning h3 { font: 700 clamp(20px, 1.6vw, 24px)/1.25 var(--f-display); letter-spacing: -.02em; margin-bottom: 6px; }
.meaning p { color: var(--ink-2); }

/* ---------- 02 Versions ---------- */
.versions { display: grid; gap: var(--gap); }
.versions.r1 { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); }
.versions.r2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.versions .card { min-height: clamp(260px, 25vw, 460px); padding: 32px; }
.versions.r2 .card { min-height: clamp(220px, 20vw, 360px); }
.v-primary .lk { --wm: clamp(56px, 6.4vw, 129px); }
.v-vertical .lk-v { --wm: clamp(48px, 4.6vw, 92px); }
.v-symbol .mk { width: clamp(150px, 11.5vw, 208px); }
.v-word .wm { --wm: clamp(64px, 6vw, 120px); }
.v-tag { flex-direction: column; gap: 22px; }
.v-tag .lk { --wm: clamp(46px, 4.2vw, 83px); }
.v-tag .tag { font: 600 clamp(15px, 1.15vw, 22px)/1.2 var(--f-display); letter-spacing: -.03em; color: var(--ink-2); }

/* ---------- 03 Clear space & min size ---------- */
.rules { display: grid; grid-template-columns: minmax(0, 1100fr) minmax(0, 684fr); gap: var(--gap); }
.clear { padding: clamp(64px, 7vw, 120px) clamp(56px, 7vw, 150px); }
.zone {
  position: relative; width: 100%;
  padding: clamp(28px, 4vw, 64px) clamp(20px, 3.4vw, 64px);
  background: #ffe3ea59; border-radius: 8px; outline: 2px solid #f0365a80; outline-offset: -1px;
}
.zone .lk { --wm: clamp(40px, 6.4vw, 129px); }
.x {
  position: absolute; width: 40px; height: 30px; border-radius: 8px; background: var(--accent);
  color: #fff; font: 700 15px/30px var(--f-label); text-align: center;
}
.x.t { top: -50px; left: calc(50% - 20px); }
.x.b { bottom: -50px; left: calc(50% - 20px); }
.x.l { left: -60px; top: calc(50% - 15px); }
.x.r { right: -60px; top: calc(50% - 15px); }
.min { display: flex; flex-direction: column; gap: var(--gap); }
.min .card { flex: 1; min-height: 248px; flex-direction: column; gap: 18px; padding: 32px; text-align: center; }
.min .lk { --wm: 21px; gap: 5px; }
.min .lk .wm { gap: 3px; }
.min .lk .wm-t { gap: 3px; }
.rule { font: 700 16px/1.4 var(--f-body); color: var(--ink); }
.sizes { display: flex; align-items: flex-end; gap: 28px; }
.sizes .mk:nth-child(1) { width: 67px; }
.sizes .mk:nth-child(2) { width: 42px; }
.sizes .mk:nth-child(3) { width: 25px; }
.sizes .mk:nth-child(4) { width: 17px; }

/* ---------- 04 Colour versions ---------- */
.colours { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.colours .card { aspect-ratio: 345 / 300; border-radius: var(--r); }
.colours .lk-v { --wm: clamp(38px, 2.6vw, 52px); gap: .3em; }
.colours .lk-v > .mk { width: 2.2em; }
.c-cream { background: var(--cream); outline: 1px solid var(--line); outline-offset: -1px; }
.c-red { background: var(--accent); }
.c-red .lk-v, .c-wine .lk-v, .c-red .wm, .c-wine .wm { color: #fff; }
.c-wine { background: var(--wine); }
.c-blush { background: var(--blush); }
.c-blush .lk-v, .c-blush .wm { color: var(--wine); --thread: var(--accent); }
.c-mono { background: #fff; outline: 1px solid var(--line); outline-offset: -1px; }
.c-mono .lk-v, .c-mono .wm { color: var(--ink); --thread: var(--accent); }

/* ---------- 05 App icon ---------- */
.icons { display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.icons figure { align-items: center; text-align: center; }
.tile {
  width: 220px; aspect-ratio: 1; border-radius: 22.5%; overflow: hidden;
  outline: 1px solid #16141a0f; outline-offset: -.5px;
}
.tile .mk { width: 62.7%; }
.tile.big { width: clamp(220px, 20vw, 400px); box-shadow: 0 24px 56px #f0365a33; outline: 0; }
.tile.big img { width: 100%; height: 100%; }
.tile.light { background: #fff; }
.tile.dark { background: var(--wine); }
.tile.dark .mk { color: #fff; }
.tile.tinted { background: #f6d9de; }
.tile.tinted .mk { color: #a3445a; }
.home { flex: 1 1 440px; }
.home .home-screen { align-self: stretch; }
.home-screen {
  border-radius: 40px; padding: 48px 36px; min-height: 300px;
  background: linear-gradient(144.5deg, #2b1a33 20%, #120c18 80%);
  display: grid; grid-template-columns: repeat(5, 60px); justify-content: space-between; row-gap: 18px; align-content: center;
}
.app { display: flex; flex-direction: column; align-items: center; gap: 8px; font: 600 12px/1.3 var(--f-body); color: #fff; }
.app .ai { width: 60px; height: 60px; border-radius: 13.5px; background: #ffffff1f; color: #fff; overflow: hidden; }
.app .ai svg { width: 24px; height: 24px; }
.app img { width: 60px; height: 60px; border-radius: 13.5px; }
.app-empty { width: 60px; height: 60px; border-radius: 13.5px; background: #ffffff14; }

/* ---------- 06 Colours ---------- */
.swatches { display: grid; gap: 20px; }
.swatches.p { grid-template-columns: minmax(0, 640fr) repeat(3, minmax(0, 369fr)); }
.swatches.s { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sw { border-radius: 28px; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; color: #fff; }
.swatches.p .sw { min-height: clamp(200px, 17.7vw, 320px); }
.swatches.s .sw { min-height: clamp(170px, 14.4vw, 260px); color: var(--ink); }
.sw b { font: 700 clamp(19px, 1.4vw, 24px)/1.25 var(--f-display); letter-spacing: -.02em; }
.sw span { font: 600 14px/1.3 var(--f-label); letter-spacing: .3px; }
.sw.light { color: var(--ink); outline: 1px solid var(--line); outline-offset: -1px; }
.threads { display: flex; align-items: center; gap: 24px 32px; padding: 28px 32px; border-radius: 28px; flex-wrap: wrap; }
.threads h3 { font: 700 20px/1.25 var(--f-display); letter-spacing: -.02em; flex: 0 0 auto; margin-right: 8px; }
.th-list { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(110px, 1fr)); gap: 20px; }
.th { display: flex; flex-direction: column; gap: 6px; }
.th .dash { display: flex; gap: 6px; }
.th .dash i { width: 18px; height: 5px; border-radius: 2.5px; background: var(--c); }
.th b { font: 700 15px/1.3 var(--f-body); margin-top: 4px; }
.th span { font: 400 12px/1.2 var(--f-label); color: var(--ink-3); }

/* ---------- 07 Type ---------- */
.types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.type { padding: 40px; min-height: clamp(380px, 28vw, 500px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.type .font { font: 700 clamp(22px, 1.6vw, 28px)/1.2 var(--f-display); letter-spacing: -.02em; margin-top: 6px; }
.type .aa { font-size: clamp(110px, 8.4vw, 150px); line-height: 1; color: var(--accent); }
.type.nunito .aa { font-family: var(--f-wm); font-weight: 900; letter-spacing: -.03em; }
.type.nunito .sample { font: 900 40px/1 var(--f-wm); letter-spacing: -.02em; }
.type.unb .aa { font-family: var(--f-display); font-weight: 700; letter-spacing: -.04em; }
.type.unb .sample { font: 700 26px/1.2 var(--f-display); letter-spacing: -.02em; }
.type.man .aa { font-family: var(--f-body); font-weight: 500; }
.type.man .sample { font: 500 19px/1.35 var(--f-body); }

/* ---------- 08 Elements ---------- */
.el-row { display: grid; gap: 20px; }
.el-row.r1 { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); }
.el-row.r2 { grid-template-columns: minmax(0, 2.9fr) minmax(0, 1fr); }
.el { border-radius: var(--r); padding: 40px; min-height: 380px; display: flex; flex-direction: column; }
.el h3 { font: 700 clamp(20px, 1.4vw, 24px)/1.25 var(--f-display); letter-spacing: -.02em; margin-top: 6px; }
.el-stitch { justify-content: space-between; gap: 40px; }
.lines { display: flex; flex-direction: column; gap: 22px; }
.lines .prog { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.lines .prog b { font: 700 15px/1.3 var(--f-body); }
.track { display: flex; gap: 6px; }
.track i { flex: 1; height: 8px; border-radius: 4px; background: var(--accent); }
.track i.off { background: var(--accent-soft); }
.el-button { background: #fdf0da; align-items: center; justify-content: center; text-align: center; gap: 20px; }
.el-button img { width: 240px; margin: -50px -50px -46px; max-width: none; }
.el-button h3 { font-size: clamp(19px, 1.25vw, 22px); }
.el-button p { font: 400 15px/1.4 var(--f-body); color: var(--ink-2); }
.el-bloom {
  justify-content: flex-end; padding: 36px;
  background-color: #fff;
  background-image:
    radial-gradient(ellipse 55% 55% at 70% 100%, #ffc29eb3 0%, #ffc29e00 70%),
    radial-gradient(ellipse 60% 60% at 0% 40%, #c9b6ffb3 0%, #c9b6ff00 70%),
    radial-gradient(ellipse 65% 65% at 100% 0%, #ff8fb0b3 0%, #ff8fb000 70%);
}
.el-bloom h3 { font-size: clamp(19px, 1.25vw, 22px); }
.el-chibi { min-height: 320px; gap: 28px; }
.chibis { display: grid; grid-template-columns: repeat(9, minmax(0, 96px)); justify-content: space-between; gap: 12px; }
.chibis img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.el-mascot { min-height: 320px; background: var(--accent-soft); align-items: center; justify-content: center; gap: 12px; text-align: center; }
.el-mascot img { width: 170px; border-radius: 60px; }
.el-mascot h3 { font-size: 20px; }

/* ---------- 09 Applications ---------- */
.apps { display: grid; grid-template-columns: minmax(0, 390px) minmax(0, 1fr) minmax(0, 440px); gap: var(--gap); align-items: start; }
.col { display: flex; flex-direction: column; gap: var(--gap); }
.splash {
  aspect-ratio: 390 / 844; border-radius: 48px; overflow: hidden;
  outline: 1px solid var(--line); outline-offset: -1px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 14% 0 6.6%;
}
.splash-c { display: flex; flex-direction: column; align-items: center; gap: 26px; margin-top: auto; }
.splash-c img { width: 174px; margin: -20px; }
.splash .wm { --wm: 58px; gap: 9px; }
.splash .wm-t { gap: 8px; }
.splash .tag { font: 600 17px/1.2 var(--f-display); letter-spacing: -.03em; color: var(--ink-2); }
.splash .url { font: 600 14px/1.2 var(--f-label); color: var(--ink-3); margin-top: auto; padding-top: 40px; }
.lock {
  border-radius: 40px; overflow: hidden; padding: 48px 28px; min-height: 470px;
  display: flex; flex-direction: column; align-items: center; gap: 36px; color: #fff;
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, #ff8fb066 0%, #ff8fb000 100%),
    linear-gradient(144.2deg, #6b2340 20.5%, #2a0f1c 79.5%);
}
.lock .date { font: 600 17px/1.3 var(--f-body); color: #ffffffcc; text-align: center; }
.lock .clock { font: 600 clamp(64px, 5.2vw, 92px)/1 var(--f-display); letter-spacing: -.03em; text-align: center; margin-top: 2px; }
.notif {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 26px;
  background: #ffffff2e; outline: 1px solid #ffffff33; outline-offset: -.5px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.notif img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.notif .txt { flex: 1; min-width: 0; }
.notif .head { display: flex; justify-content: space-between; gap: 12px; }
.notif .head b { font: 800 15px/1.35 var(--f-body); }
.notif .head span { font: 400 13px/1.35 var(--f-body); color: #ffffffb3; }
.notif p { font: 400 15px/1.35 var(--f-body); }
.widgets {
  border-radius: 40px; padding: 28px; min-height: 330px;
  display: flex; align-items: center; gap: 24px;
  background: linear-gradient(134.3deg, #ffd9e3 25%, #e6dcff 55%, #ffe7d6 75%);
}
.w-photo {
  width: 170px; height: 170px; flex: none; border-radius: 30px; padding: 14px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(180deg, #0000 50%, #0009 100%), url("/assets/brand/landscape.webp") center / cover;
}
.w-photo .mk { width: 23px; color: #fff; }
.w-photo span { font: 700 13px/1.2 var(--f-body); }
.w-count { flex: 1; min-width: 0; height: 170px; border-radius: 30px; background: #fff; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.w-count .head { display: flex; justify-content: space-between; align-items: center; font: 700 14px/1.2 var(--f-body); color: var(--ink-2); }
.w-count .head .mk { width: 23px; }
.w-count .val { display: flex; align-items: flex-end; gap: 8px; }
.w-count .val b { font: 700 54px/1 var(--f-display); letter-spacing: -.04em; color: var(--accent); }
.w-count .val span { font: 800 17px/1.4 var(--f-body); }
.w-count .track { max-width: 166px; gap: 4px; }
.w-count .track i { height: 5px; border-radius: 2.5px; }
.social {
  aspect-ratio: 1; border-radius: 28px; padding: 9%; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(ellipse 50% 50% at 100% 0%, #ff8fb099 0%, #ff8fb000 100%), var(--accent);
}
.social .mk { width: 36%; color: #fff; }
.social h3 { font: 700 clamp(24px, 1.8vw, 32px)/1.12 var(--f-display); letter-spacing: -.04em; }
.social .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.social .foot .handle { font: 700 15px/1.2 var(--f-label); color: #ffffffcc; }
.social .wm-t { font-size: 82px; color: #fff; gap: 6px; }
.namecard {
  aspect-ratio: 440 / 250; border-radius: 22px; background: var(--wine); box-shadow: 0 16px 30px #4a15264d;
}
.namecard .lk { --wm: clamp(44px, 3vw, 55px); color: #fff; gap: 14px; }
.namecard .wm { color: #fff; gap: 13px; }

/* ---------- 10 Don'ts ---------- */
.donts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.donts .card { aspect-ratio: 346 / 260; overflow: hidden; }
.donts .mk { width: 125px; }
.d-stretch .mk { transform: scale(1.52, .92); }
.d-rotate .mk { transform: rotate(18deg); }
.d-blue .mk { color: #3b82f6; }
.d-outline img { width: 186px; }
.d-photo .card { background: url("/assets/brand/landscape.webp") center / cover; }
.d-photo .mk { color: #e58a7a; }
.no { display: flex; align-items: center; gap: 8px; font: 700 15px/1.35 var(--f-body); }
.no i { width: 22px; height: 22px; border-radius: 50%; background: var(--danger); color: #fff; flex: none; display: grid; place-items: center; }
.no i svg { width: 14px; height: 14px; }

/* ---------- Footer ---------- */
.foot-page { padding: 32px var(--pad) 48px; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font: 600 14px/1.4 var(--f-body); color: var(--ink-3); border-top: 1px solid var(--line); }
.foot-page a { color: var(--ink-2); text-decoration: none; }
.foot-page a:hover { color: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 1520px) {
  .apps { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
  .apps .col3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .el-row.r1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .el-row.r1 .el-stitch { grid-column: 1 / -1; }
  .th-list { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}
@media (max-width: 1100px) {
  .story, .rules { grid-template-columns: minmax(0, 1fr); }
  .versions.r1 { grid-template-columns: minmax(0, 1fr); }
  .colours, .donts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .swatches.p { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches.s { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .types { grid-template-columns: minmax(0, 1fr); }
  .type { min-height: 0; }
  .min { flex-direction: row; }
}
@media (max-width: 760px) {
  :root { --r: 24px; }
  .sh { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .sh-n { padding-top: 0; }
  .cover-hero .lk { gap: .2em; }
  .cover-bottom .wm-t { font-size: 90px; }
  .versions.r2, .colours, .donts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .versions.r2 figure:first-child { grid-column: 1 / -1; }
  .versions .card { padding: 24px 16px; }
  .meaning { padding: 22px; gap: 18px; }
  .ico { width: 52px; height: 52px; border-radius: 16px; }
  .clear { padding: 70px 56px; }
  .min { flex-direction: column; }
  .icons { gap: 24px; justify-content: center; }
  .icons .tile:not(.big) { width: 140px; }
  .home { flex-basis: 100%; }
  .home-screen { padding: 32px 20px; grid-template-columns: repeat(5, 48px); }
  .app .ai, .app img, .app-empty { width: 48px; height: 48px; border-radius: 11px; }
  .app { font-size: 11px; }
  .swatches.p, .swatches.s { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches.p .sw:first-child { grid-column: 1 / -1; }
  .sw { padding: 20px; border-radius: 22px; }
  .th-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chibis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .type, .el { padding: 28px; }
  .el-row.r1, .el-row.r2 { grid-template-columns: minmax(0, 1fr); }
  .el { min-height: 300px; }
  .apps, .apps .col3 { grid-template-columns: minmax(0, 1fr); }
  .splash { max-width: 340px; width: 100%; margin: 0 auto; }
  .lock { min-height: 0; padding: 36px 16px; gap: 28px; }
  .widgets { flex-direction: column; align-items: stretch; padding: 20px; }
  .w-photo { width: 100%; }
  .w-count { flex: none; }
  .donts .mk { width: 90px; }
  .d-outline img { width: 134px; }
}
@media (max-width: 420px) {
  .colours, .donts, .versions.r2 { grid-template-columns: minmax(0, 1fr); }
  .swatches.s { grid-template-columns: minmax(0, 1fr); }
  .clear { padding: 70px 50px; }
  .zone .lk { --wm: 34px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }