/* melb.si 的内页：业务页、价格、问答、预约（2026-10-21，Mei）。依赖 tokens.css、sf.css。
   还是布告栏上那张彩纸告示，只是写长了：桌面上斜贴在桌上，手机上铺满。
   每页底下一条撕下来的青纸条，就是唯一的出口（预约）；预约页的出口是表单的「提交」。 */

body { min-height: 100svh; display: grid; justify-items: center; align-content: start; padding: 48px 24px 32px; }
.notice { position: relative; width: min(760px, 100%); padding: 40px 56px 0; background: var(--sf-copy-paper); transform: rotate(-.4deg);
          translate: var(--px, 0px) var(--py, 0px); transition: translate .6s var(--sf-ease); }
.notice::before { display: none; }  /* 彩纸单独一张，不压第二联（同首页） */

.head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--sf-ink); }
.head a { text-decoration: none; }
.head a:hover { color: var(--sf-carbon); }
.head .no { color: var(--sf-ink); }
.head .lang { color: var(--sf-ink); border-bottom: 1px solid var(--sf-ink-3); }

/* 章在大标题右边（页眉右边是语言切换，章不压能点的东西） */
.notice > .sf-stamp { position: absolute; top: 84px; right: 40px; --r: 7deg; padding: 9px 14px 8px; }
.notice > .sf-stamp b { font-size: 24px; }

h1 { margin: 30px 0 12px; padding-right: 120px; text-wrap: balance; }
:lang(zh) h1 { font: 700 clamp(28px, 3.4vw, 38px)/1.3 var(--sf-serif-zh); letter-spacing: .02em; word-break: keep-all; }  /* 中文标题只在标点和空格处折行，不把词拆开 */
:lang(en) h1 { font: 500 clamp(32px, 3.8vw, 44px)/1.1 var(--sf-serif); letter-spacing: -.015em; }
.lead { margin: 0 0 32px; max-width: 34em; padding-right: 120px; color: var(--sf-ink-2); }  /* 标题和导语右边给章留位置 */
:lang(zh) .lead { font: 500 17px/1.8 var(--sf-serif-zh); }
:lang(en) .lead { font: 400 19px/1.5 var(--sf-serif); }

/* 正文 */
.body { padding-bottom: 8px; }
.body section { padding: 22px 0 6px; border-top: var(--sf-hair); }
.body h2 { margin: 0 0 12px; }
:lang(zh) .body h2 { font: 700 20px/1.4 var(--sf-serif-zh); letter-spacing: .02em; }
:lang(en) .body h2 { font: 500 24px/1.25 var(--sf-serif); letter-spacing: -.01em; }
.body p, .body li { max-width: 36em; }
:lang(zh) .body p, :lang(zh) .body li { font: 400 16px/1.85 var(--sf-serif-zh); }
:lang(en) .body p, :lang(en) .body li { font-size: 17.5px; line-height: 1.6; }
.body p { margin: 0 0 14px; }
.body b, .body strong { font-weight: 500; }
:lang(zh) .body b, :lang(zh) .body strong { font-weight: 700; }
.body a { text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--sf-ink-3); }
.body a:hover { color: var(--sf-carbon); text-decoration-color: var(--sf-carbon); }

/* 走的时候店里有的四样：编号一行一条，跟告示上的栏位一样 */
.things { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: t; border-top: 1px solid var(--sf-ink); }
.things li { counter-increment: t; display: grid; grid-template-columns: 44px 1fr; padding: 14px 0; border-bottom: var(--sf-hair); max-width: none; }
.things li::before { content: "0" counter(t); font: 500 13px/2 var(--sf-mono); color: var(--sf-carbon); }

/* 价格：栏位 + 大数字 */
.prices { margin: 0 0 22px; border-top: 1px solid var(--sf-ink); }
.prices + section { border-top: 0; padding-top: 4px; }
.price { display: grid; grid-template-columns: 1fr auto; column-gap: 24px; padding: 16px 0 14px; border-bottom: var(--sf-hair); }
.price h3 { margin: 0; align-self: baseline; }
:lang(zh) .price h3 { font: 700 18px/1.5 var(--sf-serif-zh); }
:lang(en) .price h3 { font: 500 21px/1.3 var(--sf-serif); }
.price .n { font: 500 30px/1 var(--sf-mono); letter-spacing: -.02em; align-self: baseline; white-space: nowrap; }
.price .n small { font-size: 14px; margin-right: 2px; vertical-align: 9px; }
.price .n i { font: 400 13px/1 var(--sf-mono); font-style: normal; color: var(--sf-ink-2); margin-left: 4px; letter-spacing: 0; }
.price p { grid-column: 1 / -1; margin: 8px 0 0 !important; color: var(--sf-ink-2); }
.price.main .n { font-size: 40px; }

/* 问答：一问一答，答案第一句就是答案 */
.qa { margin: 0; padding: 0; border-top: 1px solid var(--sf-ink); }
.qa > div { padding: 18px 0 6px; border-bottom: var(--sf-hair); }
.qa h2 { margin: 0 0 8px !important; }
:lang(zh) .qa h2 { font: 700 17px/1.6 var(--sf-serif-zh) !important; }
:lang(en) .qa h2 { font: 500 20px/1.35 var(--sf-serif) !important; }
.qa p { margin: 0 0 12px; }

/* 出口：撕下来的那一条（同首页手机上的 .strip） */
.strip {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px;
  margin: 34px -56px 0; padding: 30px 56px 26px;
  color: var(--sf-paper); background: var(--sf-carbon); text-decoration: none;
  clip-path: polygon(0 6px, 4% 0, 9% 5px, 14% 1px, 20% 6px, 26% 0, 31% 4px, 37% 1px, 43% 6px, 49% 0, 55% 5px, 61% 1px, 67% 6px, 73% 0, 79% 4px, 85% 1px, 91% 6px, 96% 0, 100% 5px, 100% 100%, 0 100%);
  transition: transform .25s var(--sf-ease);
}
.strip:hover, .strip:focus-visible { transform: translateY(3px) rotate(.5deg); outline: none; }
.strip .sf-label { grid-column: 1 / -1; color: color-mix(in srgb, var(--sf-paper) 72%, transparent); }
.strip .big { font: 500 26px/1.2 var(--sf-mono); letter-spacing: -.01em; white-space: nowrap; }
.strip .go { font: 700 17px/1.4 var(--sf-serif-zh); white-space: nowrap; }
.strip:lang(en) .go { font: 500 19px/1.3 var(--sf-serif); }
.strip .go span { margin-left: 10px; font-family: var(--sf-serif); }

/* 纸外面：别的几页（弱一点，不算出口）和经营主体 */
.below { width: min(760px, 100%); display: flex; justify-content: space-between; align-items: baseline; gap: 16px 24px; flex-wrap: wrap; margin-top: 30px; color: var(--sf-ink-3); }
.below nav { display: flex; gap: 16px; flex-wrap: wrap; }
.below a { text-decoration: none; color: var(--sf-ink-2); }
.below a:hover { color: var(--sf-carbon); }
.below a[aria-current] { color: var(--sf-ink-3); }

/* 预约表：表格的骨架。标签一行，写字的地方是一条线 */
.form { padding-bottom: 40px; }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
/* 写字的线就是分隔，栏位之间不再加线 */
.f { display: grid; gap: 6px; padding: 14px 0 12px; }
fieldset.f { display: block; padding-top: 18px; }
.f legend { float: left; width: 100%; margin: 0 0 8px; }
.f legend ~ * { clear: both; }
.f > .sf-label, .f legend { padding: 0; font: 500 11px/1.4 var(--sf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sf-ink-2); }
:lang(zh) .f > .sf-label, :lang(zh) .f legend { font: 500 14px/1.5 var(--sf-serif-zh); letter-spacing: .02em; text-transform: none; color: var(--sf-ink); }
:lang(en) .f > .sf-label, :lang(en) .f legend { font: 500 16px/1.4 var(--sf-serif); letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.f .req { color: var(--sf-carbon); margin-left: 4px; font-family: var(--sf-mono); }
.f .hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sf-ink-2); }
:lang(zh) .f .hint { font: 400 13.5px/1.7 var(--sf-serif-zh); }
.f input[type=text], .f input[type=email], .f input[type=tel], .f textarea {
  width: 100%; padding: 6px 0 5px; border: 0; border-bottom: 1px solid var(--sf-ink); border-radius: 0; background: transparent;
  color: var(--sf-ink); font: 400 18px/1.4 var(--sf-serif); outline: none; appearance: none;
}
:lang(zh) .f input, :lang(zh) .f textarea { font-family: var(--sf-serif-zh); font-size: 17px; }
.f textarea { resize: vertical; min-height: 2.6em; }
.f input::placeholder, .f textarea::placeholder { color: var(--sf-ink-3); font-style: italic; }
:lang(zh) .f input::placeholder { font-style: normal; }
.f input:focus, .f textarea:focus { border-bottom: 2px solid var(--sf-carbon); padding-bottom: 4px; }
.f input:user-invalid { border-bottom-color: var(--sf-alert); }
.pains { display: grid; gap: 4px; counter-reset: p; }
.pains label { display: grid; grid-template-columns: 24px 1fr; align-items: end; counter-increment: p; }
.pains label::before { content: counter(p) "."; font: 400 13px/2.4 var(--sf-mono); color: var(--sf-ink-3); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }

/* 勾选：方框，选中是复写青（同 .sf-check） */
.opts { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 4px; }
.opts label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 16px; line-height: 1.4; }
:lang(zh) .opts label { font: 400 15px/1.5 var(--sf-serif-zh); }
.opts input { appearance: none; flex: none; width: 14px; height: 14px; margin: 0; border: 1px solid var(--sf-ink); background: var(--sf-paper); cursor: pointer; }
.opts input[type=radio] { border-radius: 50%; }
.opts input:checked { background: var(--sf-carbon); border-color: var(--sf-carbon); box-shadow: inset 0 0 0 2px var(--sf-paper); }
.opts input:focus-visible { outline: 2px solid var(--sf-carbon); outline-offset: 2px; }
.opts .other { display: inline-flex; align-items: center; gap: 8px; }
.opts .other input[type=text] { width: 11em; padding: 2px 0; font-size: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

.send { display: flex; align-items: center; gap: 24px; padding-top: 28px; }
.send .sf-btn { flex: none; padding: 15px 26px; font-size: 14px; cursor: pointer; }
:lang(zh) .send .sf-btn { font: 700 16px/1 var(--sf-serif-zh); letter-spacing: .1em; }
.send p { margin: 0; max-width: 30em; font-size: 14px; line-height: 1.5; color: var(--sf-ink-2); }
:lang(zh) .send p { font: 400 13.5px/1.7 var(--sf-serif-zh); }
.sent, .failed { margin: 8px 0 40px; padding: 24px 0 8px; border-top: 1px solid var(--sf-ink); }
.sent h2, .failed h2 { margin: 0 0 8px; }
.sent .sf-label { color: var(--sf-carbon); }
.failed .sf-label { color: var(--sf-alert); }

@media (max-width: 640px) {
  body { padding: 20px 20px 32px; }
  .notice { width: 100%; padding: 0; transform: none; background: transparent; translate: none; border: 0; }
  .notice > .sf-stamp { display: none; }  /* 手机上不放章，同首页 */
  .head .site { display: none; }
  h1 { margin-top: 26px; padding-right: 0; }
  .lead { padding-right: 0; }
  :lang(zh) h1 { font-size: 27px; }
  :lang(en) h1 { font-size: 31px; }
  :lang(zh) .lead { font-size: 16px; }
  :lang(en) .lead { font-size: 18px; }
  :lang(en) .body p, :lang(en) .body li { font-size: 17px; }
  .price.main .n { font-size: 32px; }
  .price .n { font-size: 24px; }
  .strip { grid-template-columns: 1fr; margin: 30px 0 0; padding: 26px 22px 22px; transform: rotate(-1.2deg); }
  .strip:hover { transform: rotate(-1.2deg); }
  .strip .big { font-size: 21px; white-space: normal; }
  .strip .go { display: flex; justify-content: space-between; }
  .below { flex-direction: column; gap: 10px; margin-top: 28px; }
  .two-up { grid-template-columns: 1fr; }
  .send { flex-direction: column; align-items: stretch; gap: 14px; }
  .send .sf-btn { justify-content: center; }
}
.things li p { margin: 0 !important; }

/* 指南（Jian 10-22 起每天一篇）：索引是一列目录，出处是正文底下的小字脚注 */
.guides { list-style: none; margin: 0; padding: 0; }
.body .guides li { max-width: none; padding: 16px 0 18px; border-bottom: var(--sf-hair); color: var(--sf-ink-2); }
.guides li:first-child { padding-top: 2px; }
.guides a { font: 500 22px/1.3 var(--sf-serif); letter-spacing: -.01em; color: var(--sf-ink); text-decoration: none; }
:lang(zh) .guides a { font: 700 19px/1.5 var(--sf-serif-zh); letter-spacing: .02em; }
.guides a:hover { color: var(--sf-carbon); }
.guides .sf-label { margin-left: 10px; color: var(--sf-ink-3); white-space: nowrap; }
.sources { margin: 0 0 14px; padding-left: 2.4em; }
.body .sources li, :lang(zh) .body .sources li, :lang(en) .body .sources li { font: 400 14.5px/1.6 var(--sf-serif); color: var(--sf-ink-2); margin-bottom: 8px; overflow-wrap: anywhere; scroll-margin-top: 24px; }
.sources li::marker { font: 400 12px var(--sf-mono); color: var(--sf-ink-3); }
.sources li:target { color: var(--sf-ink); background: var(--sf-carbon-soft); box-shadow: 0 0 0 6px var(--sf-carbon-soft); }