:root {
  --color-primary: #e91d2a;
  --color-on-primary: #ffffff;
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-frame-ink: #000000;
  --color-yellow-sticker: #fcc20f;
  --color-purple-stripe: #6a26a4;
  --color-link: #0000ee;
  --color-tint-olive: #8e8a25;
  --color-tint-sage: #b3bd95;
  --color-tint-salmon: #d77a7a;
  --color-tint-peach: #e6915d;
  --color-tint-sky: #9ab6c8;
  --rounded-none: 0px;
  --font-display: "Arial Black", Arial, Helvetica, system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-ui: Helvetica, Arial, system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Times New Roman", Times, Georgia, system-ui, "Segoe UI", "PingFang SC", "Microsoft YaHei", serif;
}

* { box-sizing: border-box; }
html { background: #6e6e6e; }
body {
  margin: 0 auto;
  max-width: 390px;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-canvas);
  line-height: 1.4;
  padding-bottom: 64px;
  border-left: 4px solid #000;
  border-right: 4px solid #000;
}
a { color: var(--color-link); }

.top {
  background: #000;
  color: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.logo {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
.phone { color: var(--color-primary); font-family: var(--font-ui); font-weight: 700; font-size: 12px; text-decoration: none; }
.back { font-size: 11px; color: #ccc; font-family: var(--font-body); }

.hero {
  background: var(--color-tint-olive);
  padding: 20px 12px;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.hero p { margin: 0 0 10px; font-size: 13px; }
.sticker {
  display: inline-block;
  background: var(--color-yellow-sticker);
  border: 1px solid #000;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  box-shadow: 2px 2px 0 #000;
}

.cta-red {
  background: var(--color-primary);
  color: #fff;
  padding: 12px;
  font-size: 13px;
  border-bottom: 1px solid #000;
}
.cta-red p { margin: 0; color: #fff; }

.block { padding: 12px; border-bottom: 1px solid #000; }
.block h2 {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.cell {
  display: block;
  border: 1px solid #000;
  padding: 8px 10px;
  margin-bottom: 8px;
  color: #000;
  text-decoration: none;
  background: var(--color-tint-sage);
}
.cell:nth-child(3) { background: var(--color-tint-salmon); }
.cell:nth-child(4) { background: var(--color-tint-peach); }
.cell:nth-child(5) { background: var(--color-tint-sky); }
.cell h3 {
  margin: 0 0 2px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}
.cell p { margin: 0; font-size: 13px; }

.row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #000;
  font-size: 13px;
}
.row:last-child { border-bottom: 0; }
.row b { font-family: var(--font-ui); }

.ph {
  background: #c8c8c8;
  color: #444;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-bottom: 8px;
  border: 1px solid #000;
  box-shadow: 2px 2px 0 #000;
}

form label { display: block; margin: 0 0 4px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; text-transform: uppercase; }
form input, form textarea {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #000;
  font-family: var(--font-body);
  margin-bottom: 8px;
}
form button {
  width: 100%;
  padding: 8px;
  border: 1px solid #000;
  background: #000;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 700;
  text-transform: uppercase;
}

.tab {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 390px;
  display: flex;
  background: #fff;
  border-top: 3px solid #3d7a3d;
  height: 56px;
}
.tab a {
  flex: 1;
  text-align: center;
  padding: 10px 0 0;
  font-size: 10px;
  font-family: var(--font-ui);
  font-weight: 700;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
}
.tab a.on { color: var(--color-primary); }

.ph { overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; }