.page-haikou {
  --hk-ink: #071f35;
  --hk-navy: #0a2e4d;
  --hk-blue: #0b73c9;
  --hk-sea: #0aa6a6;
  --hk-coral: #ed704d;
  --hk-amber: #e8ad4d;
  --hk-paper: #f4efe4;
  --hk-paper-deep: #e9dfca;
  --hk-line: rgba(7, 31, 53, .14);
  --accent: var(--hk-sea);
  background: var(--hk-paper);
  color: var(--hk-ink);
}

.page-haikou .city-main { background: var(--hk-paper); }
.page-haikou .city-shell { width: min(1240px, calc(100% - 48px)); }
.page-haikou .city-crumb { position: relative; z-index: 4; padding: 22px 0 18px; color: rgba(7, 31, 53, .57); }
.page-haikou .city-crumb strong { color: var(--hk-ink); }
.page-haikou .city-eyebrow { color: var(--hk-sea); }
.page-haikou .city-section h2 { font-size: clamp(43px, 4.2vw, 47px); line-height: 1.08; letter-spacing: -.045em; }

.page-haikou .hk-hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  border-bottom: 1px solid rgba(7, 31, 53, .09);
  background:
    radial-gradient(circle at 80% 18%, rgba(10, 166, 166, .18), transparent 26%),
    linear-gradient(114deg, #f7f2e8 0 52%, #e9f3f1 52% 100%);
}
.page-haikou .hk-hero::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(7, 31, 53, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 31, 53, .045) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, #000, transparent 70%);
  content: "";
  pointer-events: none;
}
.page-haikou .hk-hero::after {
  position: absolute;
  right: -130px;
  bottom: -245px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(10, 166, 166, .23);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(10, 166, 166, .04), 0 0 0 108px rgba(10, 166, 166, .025);
  content: "";
  pointer-events: none;
}
.page-haikou .hk-hero-command {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(410px, .9fr) 92px;
  grid-template-areas: "city copy rail";
  align-items: center;
  gap: 38px;
  padding: 18px 0 66px;
}
.page-haikou .hk-hero-city {
  grid-area: city;
  position: relative;
  min-width: 0;
  margin: 0;
  transform: rotate(-1.2deg);
  filter: drop-shadow(0 28px 34px rgba(6, 35, 55, .17));
}
.page-haikou .hk-hero-city::before,
.page-haikou .hk-hero-city::after {
  position: absolute;
  z-index: -1;
  border-radius: 4px 14px 14px 4px;
  content: "";
}
.page-haikou .hk-hero-city::before { inset: 22px -16px -18px 34px; background: #e3d7bf; transform: rotate(2.8deg); }
.page-haikou .hk-hero-city::after { inset: 8px -8px -9px 16px; background: #fffaf0; transform: rotate(.9deg); }
.page-haikou .hk-hero-city picture { display: block; overflow: hidden; border: 8px solid #fffaf0; border-left-width: 18px; border-radius: 4px 20px 20px 4px; background: #dbe9e7; }
.page-haikou .hk-hero-city img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transform: scale(1.02); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
.page-haikou .hk-hero-city:hover img { transform: scale(1.065); }
.page-haikou .hk-hero-city figcaption { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px 0; color: rgba(7, 31, 53, .7); font-size: 12px; letter-spacing: .08em; }
.page-haikou .hk-hero-city figcaption b { color: var(--hk-coral); font-size: 11px; letter-spacing: .16em; }

.page-haikou .hk-hero-copy { grid-area: copy; position: relative; padding: 18px 0; }
.page-haikou .hk-hero-copy h1 { margin: 0; max-width: 9.6em; color: var(--hk-ink); font-size: clamp(51px, 4.55vw, 58px); font-weight: 900; line-height: 1.02; letter-spacing: -.065em; }
.page-haikou .hk-hero-copy h1 em { display: block; margin-top: 10px; color: var(--hk-blue); font-style: normal; }
.page-haikou .hk-hero-copy > p:not(.city-eyebrow) { max-width: 620px; margin: 26px 0 0; color: #526578; font-size: 16px; line-height: 1.9; }
.page-haikou .hk-hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 30px; overflow: hidden; border: 1px solid var(--hk-line); border-radius: 4px 16px 16px 4px; background: var(--hk-line); }
.page-haikou .hk-hero-meta span { padding: 16px 13px; background: rgba(255, 252, 245, .84); color: #687786; font-size: 11px; }
.page-haikou .hk-hero-meta b { display: block; margin-bottom: 4px; color: var(--hk-ink); font-size: 18px; letter-spacing: -.02em; }
.page-haikou .hk-read-path { display: inline-flex; align-items: center; gap: 28px; margin-top: 24px; padding-bottom: 8px; border-bottom: 2px solid var(--hk-ink); color: var(--hk-ink); font-size: 13px; font-weight: 900; text-decoration: none; }
.page-haikou .hk-read-path i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--hk-coral); color: #fff; font-style: normal; transition: transform .3s ease; }
.page-haikou .hk-read-path:hover i { transform: translateY(4px); }

.page-haikou .hk-index-rail { grid-area: rail; align-self: stretch; display: grid; grid-template-rows: repeat(4, 1fr); border-left: 1px solid rgba(7, 31, 53, .18); }
.page-haikou .hk-index-rail div { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 112px; padding-left: 19px; border-bottom: 1px solid rgba(7, 31, 53, .11); transition: color .3s ease, background .3s ease; }
.page-haikou .hk-index-rail div::before { position: absolute; left: -3px; width: 5px; height: 0; border-radius: 5px; background: var(--hk-coral); content: ""; transition: height .35s ease; }
.page-haikou .hk-index-rail div.is-current::before,
.page-haikou .hk-index-rail div:hover::before { height: 44px; }
.page-haikou .hk-index-rail small { color: #7f8e99; font-size: 8px; letter-spacing: .15em; }
.page-haikou .hk-index-rail strong { color: rgba(7, 31, 53, .28); font-size: 28px; line-height: 1.2; }
.page-haikou .hk-index-rail span { color: var(--hk-ink); font-size: 11px; font-weight: 800; white-space: nowrap; }

.page-haikou .city-ad { position: relative; z-index: 3; background: #fffaf1; }
.page-haikou .city-ad-inner { border-radius: 12px; box-shadow: 0 22px 65px rgba(7, 31, 53, .12); }
.page-haikou .hk-first-ad { padding-top: 40px; padding-bottom: 40px; }

.page-haikou .hk-path { overflow: hidden; background: #f8f4eb; }
.page-haikou .hk-path::before { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.92%, rgba(7, 31, 53, .08) 50%, transparent 50.08%); content: ""; pointer-events: none; }
.page-haikou .hk-path-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .62fr); align-items: end; gap: 70px; max-width: 1080px; margin-bottom: 82px; }
.page-haikou .hk-path-head .city-eyebrow { grid-column: 1 / -1; margin-bottom: -48px; }
.page-haikou .hk-path-head h2 { max-width: 14em; }
.page-haikou .hk-path-head > p:last-child { margin: 0; color: #637384; font-size: 16px; line-height: 1.9; }
.page-haikou .hk-zigzag { position: relative; display: grid; gap: 92px; }
.page-haikou .hk-zigzag::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: repeating-linear-gradient(to bottom, var(--hk-sea) 0 9px, transparent 9px 18px); content: ""; opacity: .45; }
.page-haikou .hk-route { position: relative; display: grid; grid-template-columns: 82px minmax(0, 1.1fr) minmax(350px, .88fr); grid-template-areas: "num image copy" "num image price"; gap: 0 38px; align-items: center; width: min(1110px, 94%); padding: 30px; border: 1px solid var(--hk-line); border-radius: 5px 30px 30px 5px; background: rgba(255, 253, 247, .92); box-shadow: 0 26px 80px rgba(13, 41, 61, .08); }
.page-haikou .hk-route::after { position: absolute; right: -68px; top: 50%; width: 68px; height: 1px; background: var(--hk-sea); content: ""; }
.page-haikou .hk-route:nth-child(even) { justify-self: end; grid-template-columns: 82px minmax(350px, .88fr) minmax(0, 1.1fr); grid-template-areas: "num copy image" "num price image"; border-radius: 30px 5px 5px 30px; }
.page-haikou .hk-route:nth-child(even)::after { right: auto; left: -68px; }
.page-haikou .hk-route-number { grid-area: num; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 16px 10px 0; border-right: 1px solid var(--hk-line); }
.page-haikou .hk-route-number small { color: #86929d; font-size: 9px; font-weight: 900; letter-spacing: .16em; writing-mode: vertical-rl; }
.page-haikou .hk-route-number b { color: var(--hk-coral); font-size: 40px; line-height: 1; }
.page-haikou .hk-route figure { grid-area: image; position: relative; margin: 0; overflow: hidden; border-radius: 4px 20px 20px 4px; background: #dceae7; }
.page-haikou .hk-route figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.page-haikou .hk-route:hover figure img { transform: scale(1.045); }
.page-haikou .hk-route figure figcaption { position: absolute; right: 14px; bottom: 13px; padding: 7px 10px; border-radius: 999px; background: rgba(5, 30, 48, .78); color: #fff; font-size: 9px; letter-spacing: .12em; backdrop-filter: blur(8px); }
.page-haikou .hk-route-copy { grid-area: copy; padding: 12px 0; }
.page-haikou .hk-route-copy > span { color: var(--hk-sea); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.page-haikou .hk-route-copy h3 { margin: 12px 0 14px; color: var(--hk-ink); font-size: 30px; line-height: 1.18; letter-spacing: -.035em; }
.page-haikou .hk-route-copy p { margin: 0; color: #637384; font-size: 15px; line-height: 1.85; }
.page-haikou .hk-route-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.page-haikou .hk-route-copy ul li { padding: 10px 12px; border: 1px solid var(--hk-line); border-radius: 4px 12px 12px 4px; color: #30465a; font-size: 12px; font-weight: 800; }
.page-haikou .hk-route-copy ol { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.page-haikou .hk-route-copy ol li { display: grid; grid-template-columns: 30px 1fr; gap: 2px 8px; padding: 10px; border: 1px solid var(--hk-line); border-radius: 4px 12px 12px 4px; }
.page-haikou .hk-route-copy ol i { grid-row: 1 / 3; align-self: center; color: var(--hk-coral); font-size: 10px; font-style: normal; font-weight: 900; }
.page-haikou .hk-route-copy ol b { color: var(--hk-ink); font-size: 12px; }
.page-haikou .hk-route-copy ol small { color: #7b8995; font-size: 10px; }
.page-haikou .hk-price-tab { grid-area: price; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 18px; margin-top: 12px; padding-top: 15px; border-top: 1px solid var(--hk-line); }
.page-haikou .hk-price-tab > span { color: #5f7080; font-size: 12px; font-weight: 800; }
.page-haikou .hk-price-tab strong { color: var(--hk-coral); font-size: 30px; line-height: 1; }
.page-haikou .hk-price-tab strong i { font-size: 14px; font-style: normal; }
.page-haikou .hk-price-tab strong small { margin-left: 3px; color: #6a7987; font-size: 11px; }
.page-haikou .hk-price-tab p { grid-column: 1 / -1; margin: 7px 0 0; color: #86919a; font-size: 10px; line-height: 1.6; }
.page-haikou .hk-route--change { grid-template-areas: "num copy shelves" !important; grid-template-columns: 82px minmax(310px, .8fr) minmax(0, 1.2fr) !important; }
.page-haikou .hk-change-shelves { grid-area: shelves; display: grid; gap: 10px; }
.page-haikou .hk-change-shelves a { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; padding: 15px; border: 1px solid var(--hk-line); border-radius: 4px 16px 16px 4px; background: #fff; text-decoration: none; transition: transform .25s ease, border-color .25s ease; }
.page-haikou .hk-change-shelves a:hover { transform: translateX(6px); border-color: var(--hk-sea); }
.page-haikou .hk-change-shelves i { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 4px 10px 10px 4px; background: var(--hk-navy); color: #fff; font-style: normal; }
.page-haikou .hk-change-shelves b { font-size: 15px; }
.page-haikou .hk-change-shelves span { color: #748291; font-size: 11px; }

.page-haikou .hk-knowledge { background: #0a2e4d; color: #fff; }
.page-haikou .hk-knowledge::before { position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(10, 166, 166, .2), transparent 28%), linear-gradient(115deg, transparent 68%, rgba(255,255,255,.035) 68%); content: ""; pointer-events: none; }
.page-haikou .hk-knowledge .city-shell { position: relative; }
.page-haikou .hk-knowledge h2 { color: #fff; }
.page-haikou .hk-knowledge .city-section-copy { color: rgba(255, 255, 255, .62); }
.page-haikou .hk-bookshelf { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; border-bottom: 12px solid #d2a85e; box-shadow: 0 14px 0 rgba(0,0,0,.14); }
.page-haikou .hk-book { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 340px; padding: 24px 20px; border-right: 1px solid rgba(255,255,255,.18); background: #0e3d62; color: #fff; text-decoration: none; transform-origin: bottom; transition: transform .35s ease, background .35s ease; }
.page-haikou .hk-book:nth-child(2) { min-height: 390px; background: #0c8d91; }
.page-haikou .hk-book:nth-child(3) { min-height: 360px; background: #f5ecda; color: var(--hk-ink); }
.page-haikou .hk-book:nth-child(4) { min-height: 410px; background: #e96e4c; }
.page-haikou .hk-book:nth-child(5) { min-height: 375px; background: #125683; }
.page-haikou .hk-book:hover { z-index: 2; transform: translateY(-14px) rotate(-1deg); }
.page-haikou .hk-book > span { min-height: 28px; font-size: 9px; font-weight: 900; letter-spacing: .14em; opacity: .68; }
.page-haikou .hk-book > i { margin-top: 20px; color: var(--hk-amber); font-size: 38px; font-style: normal; font-weight: 300; }
.page-haikou .hk-book:nth-child(3) > i { color: var(--hk-coral); }
.page-haikou .hk-book h3 { margin: auto 0 28px; font-size: 20px; line-height: 1.48; letter-spacing: -.02em; }
.page-haikou .hk-book > b { font-size: 10px; letter-spacing: .04em; opacity: .7; }
.page-haikou .hk-official-note { display: grid; grid-template-columns: 150px 1fr 1fr; margin-top: 52px; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.page-haikou .hk-official-note > * { padding: 19px; border-right: 1px solid rgba(255,255,255,.15); }
.page-haikou .hk-official-note > *:last-child { border-right: 0; }
.page-haikou .hk-official-note > span { color: #71ddd8; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.page-haikou .hk-official-note div { color: rgba(255,255,255,.62); font-size: 12px; line-height: 1.6; }
.page-haikou .hk-official-note b { display: block; color: #fff; font-size: 14px; }

.page-haikou .hk-platform { background: #e8dfcf; }
.page-haikou .hk-platform-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .55fr); gap: 48px; align-items: end; margin-bottom: 50px; }
.page-haikou .hk-platform-head .city-eyebrow { grid-column: 1 / -1; margin-bottom: -30px; }
.page-haikou .hk-platform-head p:last-child { margin: 0; color: #637384; font-size: 15px; line-height: 1.85; }
.page-haikou .hk-open-book { position: relative; display: grid; grid-template-columns: .72fr 1.35fr .72fr; gap: 0; align-items: stretch; padding: 28px; border-radius: 8px 30px 30px 8px; background: #fffaf0; box-shadow: 0 35px 90px rgba(7,31,53,.14); }
.page-haikou .hk-open-book::before { position: absolute; top: 20px; bottom: 20px; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(7,31,53,.25), transparent); box-shadow: 0 0 16px rgba(7,31,53,.2); content: ""; }
.page-haikou .hk-open-book > figure { align-self: center; margin: 0; padding: 12px; border: 1px solid var(--hk-line); background: #fff; }
.page-haikou .hk-open-book > figure img { display: block; width: 100%; height: auto; }
.page-haikou .hk-open-book > figure figcaption { padding: 10px 2px 0; color: #748291; font-size: 10px; letter-spacing: .08em; }
.page-haikou .hk-book-page { display: grid; gap: 12px; align-content: center; padding: 18px; }
.page-haikou .hk-book-page article { min-height: 150px; padding: 20px; border: 1px solid var(--hk-line); border-radius: 4px 18px 18px 4px; background: #f8f3e9; }
.page-haikou .hk-book-page--right article { border-radius: 18px 4px 4px 18px; }
.page-haikou .hk-book-page i { color: var(--hk-coral); font-size: 11px; font-style: normal; font-weight: 900; }
.page-haikou .hk-book-page h3 { margin: 28px 0 8px; font-size: 20px; }
.page-haikou .hk-book-page p { margin: 0; color: #6a7885; font-size: 12px; line-height: 1.65; }

.page-haikou .hk-growth { background: #f8f4eb; }
.page-haikou .hk-growth-layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 72px; align-items: center; }
.page-haikou .hk-growth-copy > p:not(.city-eyebrow) { margin: 24px 0 0; color: #637384; font-size: 16px; line-height: 1.9; }
.page-haikou .hk-growth-tabs { display: grid; margin-top: 34px; border-top: 1px solid var(--hk-line); }
.page-haikou .hk-growth-tabs a { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 19px 0; border-bottom: 1px solid var(--hk-line); text-decoration: none; }
.page-haikou .hk-growth-tabs i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 4px 12px 12px 4px; background: var(--hk-navy); color: #fff; font-style: normal; transition: transform .25s ease; }
.page-haikou .hk-growth-tabs a:nth-child(2) i { background: var(--hk-sea); }
.page-haikou .hk-growth-tabs a:hover i { transform: rotate(-6deg) translateY(-2px); }
.page-haikou .hk-growth-tabs b { display: block; font-size: 14px; }
.page-haikou .hk-growth-tabs small { display: block; margin-top: 4px; color: #73818e; font-size: 11px; }
.page-haikou .hk-growth-tabs em { color: var(--hk-coral); font-style: normal; }
.page-haikou .hk-growth-visual { position: relative; margin: 0; padding: 16px 16px 48px; border: 1px solid var(--hk-line); border-radius: 4px 26px 26px 4px; background: #fffaf0; box-shadow: 0 26px 75px rgba(7,31,53,.1); transform: rotate(1.1deg); }
.page-haikou .hk-growth-visual::after { position: absolute; right: 24px; bottom: 17px; color: var(--hk-coral); font-size: 10px; font-weight: 900; letter-spacing: .18em; content: "HAIKOU · GROWTH FILE"; }
.page-haikou .hk-growth-visual img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px 14px 14px 3px; }
.page-haikou .hk-growth-visual figcaption { position: absolute; left: 26px; bottom: 17px; color: #72808c; font-size: 9px; letter-spacing: .12em; }

.page-haikou .hk-faq { background: #fffaf1; }
.page-haikou .hk-faq-layout { display: grid; grid-template-columns: minmax(330px, .68fr) minmax(0, 1.32fr); gap: 92px; align-items: start; }
.page-haikou .hk-faq-intro { position: sticky; top: 130px; }
.page-haikou .hk-faq-intro > p:last-of-type { margin: 24px 0 0; color: #6b7986; line-height: 1.85; }
.page-haikou .hk-faq-mark { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--hk-line); }
.page-haikou .hk-faq-mark span { color: var(--hk-sea); font-size: 13px; font-weight: 900; letter-spacing: .18em; }
.page-haikou .hk-faq-mark b { color: rgba(7,31,53,.12); font-size: 94px; line-height: .8; }
.page-haikou .faq-list details { border-color: var(--hk-line); }
.page-haikou .faq-list summary { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 16px; padding: 26px 4px; }
.page-haikou .faq-list summary i { color: var(--hk-coral); font-size: 11px; font-style: normal; }
.page-haikou .faq-list summary span { font-size: 18px; line-height: 1.5; }
.page-haikou .faq-list summary b { color: var(--hk-sea); font-size: 22px; transition: transform .25s ease; }
.page-haikou .faq-list details[open] summary b { transform: rotate(45deg); }
.page-haikou .faq-list details p { margin: -4px 46px 24px 62px; color: #657482; font-size: 15px; line-height: 1.9; }

.page-haikou .hk-final-ad { background: var(--hk-navy); }
.page-haikou .hk-final { padding: 88px 0; background: #061d31; }
.page-haikou .hk-final-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .55fr); gap: 80px; align-items: end; }
.page-haikou .hk-final small { color: #4ed2cb; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.page-haikou .hk-final h2 { margin: 18px 0 0; max-width: 15em; color: #fff; font-size: 44px; line-height: 1.12; letter-spacing: -.04em; }
.page-haikou .hk-final p { margin: 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.9; }

@media (max-width: 1120px) {
  .page-haikou .hk-hero-command { grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); grid-template-areas: "city copy" "rail rail"; }
  .page-haikou .hk-index-rail { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; border-top: 1px solid var(--hk-line); border-left: 0; }
  .page-haikou .hk-index-rail div { min-height: 78px; border-right: 1px solid var(--hk-line); border-bottom: 0; }
  .page-haikou .hk-index-rail div::before { top: -3px; left: 19px; width: 0; height: 5px; }
  .page-haikou .hk-index-rail div.is-current::before, .page-haikou .hk-index-rail div:hover::before { width: 44px; height: 5px; }
  .page-haikou .hk-route { width: 97%; }
  .page-haikou .hk-open-book { grid-template-columns: .8fr 1.25fr .8fr; padding: 18px; }
  .page-haikou .hk-book-page { padding: 10px; }
}

@media (max-width: 820px) {
  .page-haikou .city-shell { width: min(100% - 32px, 1240px); }
  .page-haikou .hk-hero { min-height: 0; background: linear-gradient(180deg, #f7f2e8 0 66%, #e9f3f1 66%); }
  .page-haikou .hk-hero-command { grid-template-columns: 1fr; grid-template-areas: "copy" "city" "rail"; gap: 26px; padding: 4px 0 42px; }
  .page-haikou .hk-hero-copy h1 { max-width: 12em; }
  .page-haikou .hk-hero-city { width: 90%; }
  .page-haikou .hk-path-head, .page-haikou .hk-platform-head { grid-template-columns: 1fr; gap: 22px; }
  .page-haikou .hk-path-head .city-eyebrow, .page-haikou .hk-platform-head .city-eyebrow { grid-column: auto; margin-bottom: 0; }
  .page-haikou .hk-zigzag::before, .page-haikou .hk-path::before { display: none; }
  .page-haikou .hk-route, .page-haikou .hk-route:nth-child(even), .page-haikou .hk-route--change { justify-self: stretch; width: 100%; grid-template-columns: 64px 1fr !important; grid-template-areas: "num image" "num copy" "num price" !important; gap: 0 22px; border-radius: 4px 24px 24px 4px; }
  .page-haikou .hk-route::after { display: none; }
  .page-haikou .hk-route--change { grid-template-areas: "num copy" "num shelves" !important; }
  .page-haikou .hk-bookshelf { grid-template-columns: repeat(2, 1fr); align-items: stretch; border-bottom-width: 8px; }
  .page-haikou .hk-book, .page-haikou .hk-book:nth-child(n) { min-height: 290px; }
  .page-haikou .hk-book:last-child { grid-column: 1 / -1; min-height: 220px; }
  .page-haikou .hk-official-note { grid-template-columns: 1fr 1fr; }
  .page-haikou .hk-official-note > span { grid-column: 1 / -1; }
  .page-haikou .hk-open-book { grid-template-columns: 1fr 1fr; }
  .page-haikou .hk-open-book > figure { grid-column: 1 / -1; grid-row: 1; }
  .page-haikou .hk-book-page { grid-row: 2; }
  .page-haikou .hk-open-book::before { display: none; }
  .page-haikou .hk-growth-layout, .page-haikou .hk-faq-layout, .page-haikou .hk-final-grid { grid-template-columns: 1fr; gap: 48px; }
  .page-haikou .hk-faq-intro { position: static; }
}

@media (max-width: 700px) {
  .page-haikou .city-shell { width: min(100% - 28px, 1240px); }
  .page-haikou .city-crumb { padding: 14px 0 12px; }
  .page-haikou .city-section { padding: 76px 0; }
  .page-haikou .city-section h2 { font-size: clamp(29px, 8.5vw, 33px); line-height: 1.12; }
  .page-haikou .hk-hero-copy { padding-top: 4px; }
  .page-haikou .hk-hero-copy .city-eyebrow { margin-bottom: 11px; font-size: 9px; }
  .page-haikou .hk-hero-copy h1 { font-size: clamp(36px, 10vw, 40px); line-height: 1.04; letter-spacing: -.055em; }
  .page-haikou .hk-hero-copy h1 em { margin-top: 5px; }
  .page-haikou .hk-hero-copy > p:not(.city-eyebrow) { margin-top: 18px; font-size: 14px; line-height: 1.75; }
  .page-haikou .hk-hero-meta { margin-top: 20px; }
  .page-haikou .hk-hero-meta span { padding: 12px 8px; font-size: 9px; }
  .page-haikou .hk-hero-meta b { font-size: 15px; }
  .page-haikou .hk-read-path { margin-top: 18px; }
  .page-haikou .hk-hero-city { width: 96%; margin: 0 auto; }
  .page-haikou .hk-hero-city picture { border-width: 6px 6px 6px 12px; }
  .page-haikou .hk-hero-city img { aspect-ratio: 3 / 4; }
  .page-haikou .hk-hero-city figcaption { padding: 11px 10px 0; font-size: 9px; }
  .page-haikou .hk-index-rail { overflow-x: auto; grid-template-columns: repeat(4, minmax(116px, 1fr)); }
  .page-haikou .hk-index-rail div { min-height: 68px; padding-left: 13px; }
  .page-haikou .hk-index-rail strong { font-size: 22px; }
  .page-haikou .hk-first-ad { padding-top: 18px; padding-bottom: 18px; }
  .page-haikou .hk-path-head { margin-bottom: 42px; }
  .page-haikou .hk-zigzag { gap: 42px; }
  .page-haikou .hk-route, .page-haikou .hk-route:nth-child(even), .page-haikou .hk-route--change { grid-template-columns: 42px minmax(0, 1fr) !important; gap: 0 14px; padding: 18px 16px 20px 10px; border-radius: 4px 20px 20px 4px; }
  .page-haikou .hk-route-number { padding-right: 8px; }
  .page-haikou .hk-route-number b { font-size: 26px; }
  .page-haikou .hk-route-copy h3 { font-size: 25px; }
  .page-haikou .hk-route-copy p { font-size: 13px; }
  .page-haikou .hk-route-copy ul, .page-haikou .hk-route-copy ol { grid-template-columns: 1fr; }
  .page-haikou .hk-price-tab strong { font-size: 25px; }
  .page-haikou .city-section-head { gap: 18px; margin-bottom: 28px; }
  .page-haikou .hk-bookshelf { display: grid; grid-template-columns: 1fr; gap: 10px; border: 0; box-shadow: none; }
  .page-haikou .hk-book, .page-haikou .hk-book:nth-child(n), .page-haikou .hk-book:last-child { grid-column: auto; min-height: 205px; border-radius: 4px 18px 18px 4px; }
  .page-haikou .hk-book h3 { margin: 28px 0 24px; font-size: 18px; }
  .page-haikou .hk-official-note { grid-template-columns: 1fr; margin-top: 34px; }
  .page-haikou .hk-official-note > span { grid-column: auto; }
  .page-haikou .hk-open-book { grid-template-columns: 1fr; padding: 14px; }
  .page-haikou .hk-open-book > figure, .page-haikou .hk-book-page { grid-column: 1; grid-row: auto; }
  .page-haikou .hk-book-page { padding: 0; }
  .page-haikou .hk-book-page article { min-height: 125px; }
  .page-haikou .hk-book-page h3 { margin-top: 18px; }
  .page-haikou .hk-growth-layout { gap: 36px; }
  .page-haikou .hk-growth-copy > p:not(.city-eyebrow) { font-size: 14px; }
  .page-haikou .hk-growth-tabs a { grid-template-columns: 42px 1fr auto; gap: 10px; }
  .page-haikou .hk-growth-tabs small { line-height: 1.5; }
  .page-haikou .hk-growth-visual { padding: 10px 10px 40px; transform: none; }
  .page-haikou .hk-faq-layout { gap: 34px; }
  .page-haikou .hk-faq-mark { margin-top: 28px; }
  .page-haikou .hk-faq-mark b { font-size: 68px; }
  .page-haikou .faq-list summary { grid-template-columns: 28px 1fr auto; gap: 8px; padding: 21px 2px; }
  .page-haikou .faq-list summary span { font-size: 16px; }
  .page-haikou .faq-list details p { margin: -2px 28px 20px 38px; font-size: 14px; }
  .page-haikou .hk-final { padding: 68px 0; }
  .page-haikou .hk-final-grid { gap: 26px; }
  .page-haikou .hk-final h2 { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .page-haikou .hk-hero-city img,
  .page-haikou .hk-route figure img,
  .page-haikou .hk-book,
  .page-haikou .hk-read-path i,
  .page-haikou .hk-growth-tabs i { transition: none; transform: none; }
}