/* HITP website v6 — clean product-page style: white and light grey tiles, near-black type, one blue for links. */
:root {
  --ink: #1D1D1F;
  --ink-2: #424245;
  --mute: #6E6E73;
  --bg: #FFFFFF;
  --tile: #F5F5F7;
  --line: #D2D2D7;
  --blue: #0071E3;
  --link: #0066CC;
  --dark: #000000;
  --sans: 'Inter v6', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC v6', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; font-feature-settings: 'cv11' 1, 'ss03' 1; text-rendering: optimizeLegibility; font-synthesis: none }

.facts b, .num { font-variant-numeric: tabular-nums }
img, svg { max-width: 100% }
a { color: var(--link); text-decoration: none }
a:hover { text-decoration: underline }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px }
.w { max-width: 1024px; margin: 0 auto; padding-left: max(22px, env(safe-area-inset-left, 0px)); padding-right: max(22px, env(safe-area-inset-right, 0px)) }

/* global nav: thin, translucent */
.gn { position: sticky; top: 0; z-index: 20; background: rgba(251,251,253,.8); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); border-bottom: 1px solid rgba(0,0,0,.06) }
.gn .w { display: flex; align-items: center; justify-content: space-between; height: 48px; font-size: 13px }
.gn a { color: rgba(29,29,31,.82) }
.gn a:hover { color: var(--ink); text-decoration: none }
.gn .logo { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink) }
.gn .logo svg { width: 22px; height: 22px }
.gn nav { display: flex; gap: 30px }
.gn .menu { display: none; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); padding: 6px 0 }

/* tiles */
.tile { background: var(--tile); text-align: center; padding: 64px 0 0; overflow: hidden }
.tile.white { background: var(--bg) }
.tile.dark { background: var(--dark); color: #F5F5F7 }
.tile.dark .sub { color: #A1A1A6 }
.tile h1, .tile h2 { margin: 0; font-weight: 600; line-height: 1.2 }
.tile h1 { font-size: clamp(40px, 6vw, 64px) }
.tile h2 { font-size: clamp(34px, 4.6vw, 52px) }
.tile .sub { margin: 10px auto 0; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.3; color: var(--ink); max-width: 30em; font-weight: 400 }
.tile .note { margin: 14px auto 0; font-size: 15px; color: var(--mute); max-width: 36em }
.links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 20px }
.pill { display: inline-block; padding: 10px 21px; border-radius: 980px; font-size: 17px; background: var(--blue); color: #fff }
.pill:hover { background: #0077ED; text-decoration: none }
.pill.ghost { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue) }
.pill.ghost:hover { background: var(--blue); color: #fff }
.more::after { content: ' ›'; }
.tile .art { display: block; margin: 36px auto 0; width: min(100%, 640px) }
.tile .skyline { display: block; width: 100%; height: auto; margin-top: 44px }
.tile.hero { padding-top: 72px }

/* two-up grid of tiles */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; background: var(--bg) }
.grid .tile { border-radius: 0; padding: 52px 24px 0; min-height: 580px; display: flex; flex-direction: column }
.grid .tile h2 { font-size: clamp(28px, 3.2vw, 40px) }
.grid .tile .sub { font-size: clamp(17px, 1.7vw, 21px) }
.grid .tile .art { margin-top: auto; padding-top: 28px; width: min(100%, 460px) }

/* facts */
.facts { padding: 88px 0; text-align: center }
.facts h2 { margin: 0 0 48px; font-size: clamp(30px, 4vw, 48px); font-weight: 600; line-height: 1.15 }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.facts li { padding: 0 8px }
.facts b { display: block; font-size: clamp(40px, 5vw, 56px); font-weight: 600; line-height: 1.1 }
.facts span { display: block; margin-top: 6px; color: var(--mute); font-size: 17px }

/* rules: what is in every contract */
.rules { background: var(--tile); padding: 88px 0 }
.rules h2 { margin: 0; text-align: center; font-size: clamp(30px, 4vw, 48px); font-weight: 600; line-height: 1.15 }
.rules .sub { text-align: center; color: var(--mute); margin: 12px auto 44px; max-width: 34em; font-size: 19px }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.card { background: #fff; border-radius: 18px; padding: 28px 24px; text-align: left }
.card b { display: block; font-size: 19px; margin-bottom: 8px; }
.card span { color: var(--ink-2); font-size: 15px; line-height: 1.55 }

/* guides */
.reads { padding: 88px 0 }
.reads h2 { margin: 0 0 32px; font-size: clamp(30px, 4vw, 48px); font-weight: 600; }
.reads .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.reads a { display: block; background: var(--tile); border-radius: 18px; padding: 26px 24px; color: var(--ink) }
.reads a:hover { text-decoration: none; background: #EDEDF0 }
.reads small { color: var(--mute); font-size: 13px }
.reads h3 { margin: 8px 0 10px; font-size: 19px; line-height: 1.4; font-weight: 600 }
.reads p { margin: 0; color: var(--link); font-size: 15px }
.reads p::after { content: ' ›' }

/* contact */
.contact { background: var(--tile); padding: 80px 0; text-align: center }
.contact h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); font-weight: 600; }
.contact .sub { margin: 12px auto 0; color: var(--ink-2); max-width: 32em; font-size: 19px }
.contact .phone { display: block; margin: 28px 0 6px; font-size: clamp(32px, 4.4vw, 48px); font-weight: 600; color: var(--ink) }
.contact .hours { color: var(--mute); font-size: 15px; margin: 0 0 24px }

/* footer */
.ft { background: var(--tile); color: var(--mute); font-size: 12px; line-height: 1.6; padding: 0 0 calc(24px + env(safe-area-inset-bottom, 0px)) }
.ft .w { border-top: 1px solid var(--line); padding-top: 18px }
.ft .note { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin: 0 0 18px }
.ft .cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding-bottom: 18px }
.ft b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 8px }
.ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px }
.ft a { color: var(--ink-2) }
.ft .fine { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 20px }

@media (max-width: 833px) {
  .gn nav { display: none }
  .gn nav.open { display: flex; position: absolute; top: 48px; left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(251,251,253,.98); padding: 8px max(22px, env(safe-area-inset-left, 0px)) 20px; border-bottom: 1px solid var(--line) }
  .gn nav.open a { padding: 12px 0; font-size: 20px; font-weight: 600; color: var(--ink) }
  .gn .menu { display: block }
  .grid { grid-template-columns: minmax(0, 1fr); padding: 12px 0; gap: 12px }
  .grid .tile { min-height: 0 }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .reads .row, .facts ul { grid-template-columns: minmax(0, 1fr) }
  .ft .cols { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 480px) {
  .cards { grid-template-columns: minmax(0, 1fr) }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/* photo tiles */
.photo { position: relative; color: #fff; text-align: center; overflow: hidden; background: #000 }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0 }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.45) 30%, rgba(0,0,0,0) 58%) }
.photo .cap { position: relative; z-index: 1; padding: 58px 22px 0 }
.photo h2 { margin: 0; font-weight: 600; line-height: 1.2; font-size: clamp(34px, 4.6vw, 52px) }
.photo .sub { margin: 10px auto 0; font-size: clamp(19px, 2.1vw, 25px); line-height: 1.3; max-width: 30em; color: #fff }
.photo .links a { color: #fff }
.photo .links .more { color: #8CC4FF }
.photo.big { height: clamp(560px, 62vw, 760px) }
.grid .photo { min-height: 580px; display: block; padding: 0 }
.grid .photo .cap { padding: 52px 24px 0 }
.grid .photo h2 { font-size: clamp(28px, 3.2vw, 40px) }
.grid .photo .sub { font-size: clamp(17px, 1.7vw, 21px) }
.photo.light::after { background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 34%, rgba(255,255,255,0) 60%) }
.photo.light { color: var(--ink) }
.photo.light .sub { color: var(--ink) }
.photo.light .links .more { color: var(--link) }
.hero-photo { display: block; width: 100%; height: clamp(280px, 38vw, 520px); object-fit: cover; margin-top: 48px }
.credit { font-size: 11px; color: var(--mute) }
.tags { list-style: none; margin: 28px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 30em }
.tags li { background: #fff; border-radius: 980px; padding: 8px 16px; font-size: 15px; color: var(--ink-2) }
.tile.white .tags li { background: var(--tile) }
.grid .tile:not(.photo) { min-height: 0; padding-bottom: 56px; justify-content: center }
.tile.white:not(.hero) { padding-bottom: 80px }
.photo.light img { object-position: center 20% }
#hitp-wa-float { background: #1D1D1F !important; box-shadow: 0 6px 24px rgba(0,0,0,.18) !important }

/* large Chinese headings read best one step lighter than Latin semibold */
h1, h2, .tile h1, .tile h2, .photo h2, .facts h2, .facts b, .rules h2, .reads h2, .contact h2, .contact .phone { font-weight: 500 }