/* Layout: Caricotto デザインシステム。アイボリーの紙に、四角く裁った商品写真とリボンを一本。ポップアップ告知だけ黒ベルベットの帯 */
:root {
  /* brand pigments (both themes) */
  --noir: #17161b; --ivory: #f7f3ec; --ribbon: #d8c6a2; --ribbon-shade: #a38f71;
  --rose: #d4657b; --rose-ink: #a33a52; --velvet-ink: #a9a5ad; --blush: #f1c9d4;
  --rouge: #b3172f; --bleu: #4a7cab; --lilac: #c9aed4; --moutarde: #9c7a2c;
  --mauve: #b8979b; --wicker: #b5884f; --mist: #e4e5e2;
  /* Atelier (light) */
  --surface: #f7f3ec; --surface-raised: #fffdf8; --surface-sunk: #ece7de;
  --ink: #17161b; --ink-muted: #5f5a62; --line: #d6cfc2; --line-strong: #8f877c;
  --accent: #a33a52; --action: #17161b; --on-action: #f7f3ec; --on-ribbon: #17161b; --focus: #a33a52;
  --shadow-soft: 0 1px 2px rgba(23,22,27,0.06), 0 8px 24px rgba(23,22,27,0.08);
  /* type */
  --font-serif: "Cormorant Garamond", "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* 英字と数字は EB Garamond、和文は Zen Kaku Gothic New（EB Garamond に和文の字形がないため自動で切り替わる） */
  --font-sans: "EB Garamond", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-accent: "EB Garamond", "Cormorant Garamond", "Zen Old Mincho", serif;
  /* space & radius */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-none: 0; --radius-sm: 2px; --radius-md: 6px; --radius-round: 50%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #131217; --surface-raised: #1d1b22; --surface-sunk: #0c0b0f;
    --ink: #f3ede2; --ink-muted: #b3adb6; --line: #38353e; --line-strong: #6f6a75;
    --accent: #f1c9d4; --action: #f7f3ec; --on-action: #17161b; --focus: #f1c9d4;
    --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --surface: #131217; --surface-raised: #1d1b22; --surface-sunk: #0c0b0f;
  --ink: #f3ede2; --ink-muted: #b3adb6; --line: #38353e; --line-strong: #6f6a75;
  --accent: #f1c9d4; --action: #f7f3ec; --on-action: #17161b; --focus: #f1c9d4;
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* hidden 属性を付けた要素は、display を指定したクラスより優先して必ず隠す（作品の絞り込み、出展の帯など） */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 27px; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.wrap {
  max-width: 1120px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 900px) { .wrap { padding-left: max(48px, env(safe-area-inset-left, 0px)); padding-right: max(48px, env(safe-area-inset-right, 0px)); } }

/* ── Design system components (bundle.css) ─────────────── */
.cc-ribbon {
  --cc-notch: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 600; font-size: 15px; line-height: 20px;
  letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap;
  background: var(--ribbon); color: var(--on-ribbon);
  padding: var(--space-2) calc(var(--space-6) + var(--cc-notch)) var(--space-2) var(--space-4);
  border-radius: var(--radius-none);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cc-notch)) 50%, 100% 100%, 0 100%);
  box-shadow: inset 0 -1px 0 var(--ribbon-shade);
}
.cc-ribbon--vertical {
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: var(--space-4) var(--space-2) calc(var(--space-6) + var(--cc-notch));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - var(--cc-notch)), 0 100%);
  box-shadow: inset -1px 0 0 var(--ribbon-shade);
}
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  padding: var(--space-3) var(--space-6); min-height: 44px;
  border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cc-btn--primary { background: var(--action); color: var(--on-action); }
.cc-btn--primary:hover { background: var(--rouge); color: var(--ivory); }
.cc-btn--outline { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.cc-btn--outline:hover { border-color: var(--ink); }
.cc-btn--sm { min-height: 36px; padding: var(--space-2) var(--space-4); }
.cc-cat { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.cc-cat__brand { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 400; letter-spacing: 0.01em; color: var(--ink); margin: 0; }
.cc-cat__word { font-family: var(--font-accent); font-size: 44px; line-height: 52px; font-weight: 600; color: var(--accent); margin: 0; white-space: nowrap; }
.cc-card { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: box-shadow .2s ease; }
.cc-card:hover { box-shadow: var(--shadow-soft); }
.cc-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--mist); border-radius: var(--radius-none); overflow: hidden; }
.cc-card__media img { width: 100%; height: 100%; object-fit: cover; }
.cc-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.cc-card__name { font-family: var(--font-serif); font-size: 20px; line-height: 28px; font-weight: 600; margin: 0; }
.cc-card__note { font-size: 12px; line-height: 19px; color: var(--ink-muted); margin: 0; }
.cc-card__foot { margin-top: auto; padding-top: var(--space-2); }
.cc-swatches { display: flex; gap: var(--space-1); }
.cc-swatch { width: 16px; height: 16px; border-radius: var(--radius-round); border: 1px solid var(--line-strong); }
.cc-gingham {
  background-color: var(--ivory);
  background-image:
    linear-gradient(90deg, rgba(212,101,123,.55) 50%, transparent 50%),
    linear-gradient(rgba(212,101,123,.55) 50%, transparent 50%);
  background-size: 24px 24px;
}

/* ── Page ─────────────────────────────────────────────── */
.label { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); }
.caption { font-size: 12px; line-height: 19px; color: var(--ink-muted); }
.ph { color: var(--accent); }

.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-head .wrap { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-3); }
.brand { font-family: var(--font-sans); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; flex: none; }
.nav { display: flex; gap: var(--space-6); overflow-x: auto; min-width: 0; flex: 1; justify-content: flex-end; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; white-space: nowrap; padding-block: var(--space-2); }
.nav a:hover { color: var(--accent); }
.nav .shop { color: var(--accent); }

.hero { padding-block: var(--space-12) var(--space-16); }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; }
.hero-text { min-width: 0; display: grid; gap: var(--space-6); justify-items: start; }
.hero h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.25; letter-spacing: 0.02em; margin: 0; text-wrap: balance; }
.lead { font-size: 17px; line-height: 30px; margin: 0; max-width: 30em; }
.btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-photo { position: relative; margin: 0; min-width: 0; }
.hero-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 50%; background: var(--mist); }
.hero-photo .cc-ribbon { position: absolute; top: 0; right: var(--space-6); }
.hero-photo figcaption { margin-top: var(--space-2); }

section.block { padding-block: var(--space-16); }
section.block--head { padding-bottom: var(--space-8); }
.sec-head { display: grid; gap: 0; margin-bottom: var(--space-8); }
.kicker { font-family: var(--font-accent); font-weight: 600; font-size: 24px; line-height: 30px; color: var(--accent); }
.sec-head h1, .sec-head h2 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 34px; margin: 0; }
.sec-head p { margin: var(--space-2) 0 0; color: var(--ink-muted); max-width: 40em; }

/* ルックブック */
.strip-box { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
.strip { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-6); width: max-content; }
.strip li { width: 220px; scroll-snap-align: start; }
.strip img { width: 100%; aspect-ratio: 1523 / 2154; object-fit: cover; border: 1px solid var(--line); background: var(--ivory); }
.lb-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lb-open img { display: block; transition: opacity .2s; }
.lb-open:hover img { opacity: .88; }
.strip .hw { display: block; margin-top: var(--space-2); font-family: var(--font-accent); font-weight: 600; font-size: 22px; line-height: 28px; color: var(--ink); }

/* ルックブックの拡大表示 */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--noir); color: var(--ivory); }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-16); max-width: 100%; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; }
.lightbox figcaption { font-family: var(--font-accent); font-weight: 600; font-size: 22px; line-height: 28px; color: var(--blush); }
.lightbox button { position: absolute; border: 0; background: none; color: var(--ivory); font-family: var(--font-serif); font-size: 40px; line-height: 1; width: 56px; height: 56px; cursor: pointer; }
.lightbox button:hover { color: var(--blush); }
.lb-close { top: var(--space-3); right: var(--space-3); }
.lb-prev { left: var(--space-3); top: 50%; transform: translateY(-50%); }
.lb-next { right: var(--space-3); top: 50%; transform: translateY(-50%); }
@media (max-width: 760px) {
  .lightbox figure { padding: var(--space-16) var(--space-4); }
  .lb-prev, .lb-next { top: auto; bottom: var(--space-3); transform: none; }
}

/* 作品 */
.works-head { margin-bottom: var(--space-6); }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.filters button[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-color: var(--action); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.note { margin-top: var(--space-8); max-width: 44em; }

/* ブランドについて */
.about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; }
.about > div { min-width: 0; }
.story p { font-size: 17px; line-height: 30px; margin: 0 0 var(--space-4); max-width: 30em; }
.emblem { margin: 0; }
.emblem img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.emblem figcaption { margin-top: var(--space-2); }
/* デザイナー紹介は 2 列の下に横長で置き、右側に空きが出ないようにする */
.profile { margin-top: var(--space-12); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-2) var(--space-12); align-items: start; }
.profile > h2, .profile > p { grid-column: 1; }
.profile > dl { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.profile h2 { font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 28px; margin: 0; }
.profile-role { margin-right: 0.75em; }
.profile p { margin: 0; }
.profile dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-6); margin: 0; font-size: 14px; }
.profile dt { color: var(--ink-muted); }
.profile dd { margin: 0; min-width: 0; }
.making { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.making figure, .gallery figure { margin: 0; min-width: 0; }
.making img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--mist); }
.making figcaption, .gallery figcaption { margin-top: var(--space-2); }

/* ポップアップ（黒ベルベットの帯） */
.velvet { background: var(--noir); color: var(--ivory); border-block: 1px solid var(--line); }
.velvet .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); align-items: center; padding-block: var(--space-16); }
.velvet .script { width: min(360px, 100%); }
.velvet .hw { font-family: var(--font-accent); font-weight: 600; font-size: 44px; line-height: 52px; color: var(--blush); display: inline-block; margin-top: var(--space-4); }
.velvet .label { color: var(--velvet-ink); }
.velvet h3 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; line-height: 34px; margin: var(--space-2) 0; }
.velvet .date { font-family: var(--font-serif); font-size: clamp(36px, 5vw, 56px); line-height: 1.1; font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.velvet p { margin: var(--space-3) 0 0; color: var(--velvet-ink); }
.velvet .ph { color: var(--blush); }

.events { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.events > div { min-width: 0; }
.events h2, .events h3 { font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 28px; margin: 0 0 var(--space-3); }
.history, .stockists { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.history li, .stockists li { display: grid; grid-template-columns: 7em 1fr; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--line); }
.stockists li { grid-template-columns: 1fr; gap: 0; }
.history time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.history li { grid-template-columns: 8.5em 1fr; padding-inline: var(--space-3); }
.history:empty { display: none; }
.events .history-past { margin-top: var(--space-10, 40px); }
.popup-head h2 { margin: 0; font-weight: normal; }
.popup-head .script { display: block; }
.popup-lead { margin: var(--space-2) 0 0; color: var(--velvet-ink); font-size: 13px; letter-spacing: 0.08em; }
/* 枠で囲んで、帯の見出し（Caricotto popup!）と、次の出展の中身を分ける */
.next-panel { position: relative; border: 1px solid var(--velvet-ink); padding: var(--space-8) var(--space-6) var(--space-6); }
.next-panel .next-tag-band { position: absolute; top: -0.8em; left: var(--space-4); padding: 0 var(--space-2); background: var(--noir); color: var(--blush); }
.next-panel h3 { margin-top: 0; }
.next-after { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--velvet-ink) 40%, transparent); font-size: 13px; }
.next-after-label { color: var(--ivory); }
/* 「これからの出展」のうち、帯に出している次の出展 */
.history li.is-next { background: var(--surface-raised); box-shadow: inset 3px 0 0 var(--accent); }
.history li.is-next time { color: var(--ink); }
.next-tag { display: inline-block; margin-right: var(--space-2); padding: 0 6px; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; line-height: 18px; letter-spacing: 0.08em; vertical-align: 1px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); }

/* お問い合わせ */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); }
.contact > div { min-width: 0; }
.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.channels b { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 18px; line-height: 26px; }
form { display: grid; gap: var(--space-4); }
label { display: grid; gap: var(--space-1); font-size: 13px; color: var(--ink-muted); }
input, select, textarea {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-sunk);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%;
}
textarea { min-height: 128px; resize: vertical; }
form .cc-btn { justify-self: start; }
.form-msg { margin: 0; color: var(--accent); font-size: 13px; }
.form-msg.is-done { color: var(--ink); }
/* 迷惑メール対策の入力欄（人には見えない） */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Instagram の公式アイコン（グリフ）を、リンクの文字色・文字の大きさに合わせて前に置く */
.ig { white-space: nowrap; }
.ig::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.3em; vertical-align: -0.14em; background-color: currentColor; -webkit-mask: url(/img/instagram.png) center / contain no-repeat; mask: url(/img/instagram.png) center / contain no-repeat; }

/* フッター */
.gingham-band { height: 24px; }
footer { background: var(--surface-sunk); padding-block: var(--space-12); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); font-size: 13px; }
footer small { flex-basis: 100%; }

@media (max-width: 960px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero { padding-block: var(--space-8) var(--space-12); }
  .hero .wrap, .about, .events, .contact, .velvet .wrap { grid-template-columns: 1fr; gap: var(--space-8); }
  .profile { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-2); }
  .profile > dl { grid-column: 1; grid-row: auto; margin-top: var(--space-3); }
  .hero-photo { order: -1; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .cc-card__body { padding: var(--space-3); }
  .cc-card__name { font-size: 17px; line-height: 24px; }
  .cc-cat__brand { font-size: 20px; line-height: 26px; }
  .cc-cat__word { font-size: 32px; line-height: 40px; }
  .making, .gallery { gap: var(--space-2); }
  .strip li { width: 180px; }
  section.block { padding-block: var(--space-12); }
  .velvet .wrap { padding-block: var(--space-12); }
  .velvet .hw { font-size: 34px; line-height: 42px; }
  .nav { justify-content: flex-start; gap: var(--space-4); }
  .site-head .wrap { gap: var(--space-4); }
  .brand { font-size: 20px; line-height: 24px; }
}
/* ページ切り替え */
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.more { margin-top: var(--space-8); }
.velvet .onvelvet { display: inline-block; margin-top: var(--space-4); color: var(--blush); }
.entries { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.entry { display: grid; gap: var(--space-1); align-content: start; color: var(--ink); text-decoration: none; min-width: 0; }
.entry img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); margin-bottom: var(--space-2); }
.entry b { font-family: var(--font-serif); font-size: 20px; line-height: 28px; font-weight: 600; }
.entry span { font-size: 13px; line-height: 22px; color: var(--ink-muted); }
.entry:hover b { color: var(--accent); }
@media (max-width: 760px) {
  .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* 猫アプリ「今日の窓」：紹介ページとトップの案内 */
section.block--tight { padding-top: 0; }
.app-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.app-hero__img { margin: 0; }
.app-hero__img img, .app-promo__img img { display: block; width: 100%; height: auto; }
.app-hero__text p { margin: 0 0 var(--space-4); }
.app-lead { font-family: var(--font-serif); font-size: 22px; line-height: 1.7; }
.app-hero .btns { margin-top: var(--space-6); }
.app-qr { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.app-qr img { width: 96px; height: 96px; flex: none; padding: 6px; background: #fff; border: 1px solid var(--line); }
.app-qr p { margin: 0; max-width: 18em; }
.app-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); counter-reset: step; }
.app-steps li { counter-increment: step; border-top: 1px solid var(--ink); padding-top: var(--space-3); min-width: 0; }
.app-steps li::before { content: counter(step); display: block; font-family: var(--font-serif); font-size: 32px; line-height: 36px; font-weight: 500; }
.app-steps b { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 18px; line-height: 28px; }
.app-steps span { font-size: 14px; line-height: 24px; color: var(--ink-muted); }
.app-note { margin: var(--space-4) 0 0; }
.app-shots { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.app-shots figure { margin: 0; }
.app-shots img { display: block; width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--noir); }
.app-shots figcaption { margin-top: var(--space-2); text-align: center; }
.app-more { margin-top: var(--space-16); }
.app-features { margin: 0; padding-left: 1.2em; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-12); }
.app-features li { line-height: 28px; }
.app-cta { margin-top: var(--space-8); }
.app-promo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.app-promo p { margin: var(--space-4) 0 0; }
.app-promo .btns { margin-top: var(--space-6); }
@media (max-width: 760px) {
  .app-hero, .app-promo { grid-template-columns: 1fr; gap: var(--space-8); }
  .app-lead { font-size: 19px; }
  .app-qr { display: none; }
  .app-steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .app-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .app-features { grid-template-columns: 1fr; }
}