/*
  Homesick China Landing UI refresh
  70% calm & trustworthy · 20% young & playful · 10% premium
*/

html:root {
  --bg: #f5f1eb;
  --bg2: #eee7f1;
  --panel: rgba(255,255,255,.9);
  --panelSolid: #fffdf9;
  --text: #251b2b;
  --muted: #6f6673;
  --line: rgba(48,32,55,.12);
  --purple: #7850a6;
  --purple2: #34213f;
  --lav: #76519c;
  --gold: #ad792c;
  --red: #b45465;
  --green: #2b8b60;
  --shadow: 0 24px 65px rgba(62,44,70,.12);
  --nav: rgba(248,245,239,.9);
}

html body {
  color: var(--text);
  background:
    radial-gradient(circle at 11% 8%, rgba(154,111,196,.15), transparent 27rem),
    radial-gradient(circle at 92% 18%, rgba(219,175,91,.12), transparent 25rem),
    linear-gradient(180deg,#f8f5ef 0,#f3efe9 48%,#f7f4ef 100%);
}

body .noise { opacity: .018; mix-blend-mode: multiply; }

body .nav {
  background: var(--nav);
  border-bottom-color: rgba(48,32,55,.1);
  box-shadow: 0 8px 32px rgba(58,41,65,.05);
}

body .logo img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(15%) saturate(1640%) hue-rotate(236deg) brightness(92%) contrast(96%);
}

body .links { color: #6f6673; }
body .links a:hover { color: #251b2b; }

body .btn,
body .nextBtn {
  color: #fff;
  background: linear-gradient(135deg,#34213f,#67408b);
  box-shadow: 0 13px 30px rgba(76,48,91,.18);
}

body .btn2,
body .backBtn {
  color: #302438;
  background: rgba(255,255,255,.68);
  border-color: rgba(48,32,55,.16);
}

body .btn:hover,
body .btn2:hover,
body .nextBtn:hover,
body .backBtn:hover {
  box-shadow: 0 14px 28px rgba(66,45,75,.14);
}

body .eyebrow {
  color: #6e4a94;
  background: rgba(242,235,247,.86);
  border-color: rgba(111,76,147,.17);
}

body .dotGold {
  background: #d1a247;
  box-shadow: 0 0 15px rgba(209,162,71,.36);
}

body .pill {
  color: #675d6b;
  background: rgba(255,255,255,.66);
  border-color: rgba(48,32,55,.12);
}

body .kicker { color: #76519c; }
body .lav { color: #76519c; }
body .gold { color: #a46e20; }
body .muted { color: #6f6673; }

body .section {
  border-top-color: rgba(48,32,55,.1);
}

body main > .section:nth-of-type(even) {
  background: rgba(255,255,255,.47);
}

body .head p,
body .lead,
body .micro,
body .footer,
body .pageHero p,
body .portalTop p {
  color: #6f6673;
}

body .footer {
  background: rgba(255,255,255,.4);
  border-top-color: rgba(48,32,55,.1);
}

/* Product page */
body .heroHello { color: #44364a; }

body .halo {
  background: radial-gradient(circle,rgba(139,91,182,.16),rgba(219,195,233,.07) 46%,transparent 69%);
}

body .readyCard {
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(249,245,250,.92));
  border-color: rgba(80,51,93,.14);
  box-shadow: 0 30px 75px rgba(76,53,86,.14);
}

body .readyCity,
body .scoreBig span { color: #817685; }

body .scoreBig { color: #76519c; }

body .readinessBar { background: #e9e2ea; }
body .readinessBar i { background: linear-gradient(90deg,#7850a6,#b286ce); }

body .checkRow {
  color: #302438;
  background: #f8f5f8;
  border-color: rgba(48,32,55,.09);
}

body .state.good { color: #28865b; }
body .state.warn { color: #a87522; }

body .speech {
  color: #36263d;
  background: #fff1c9;
  border: 1px solid rgba(177,125,39,.15);
  box-shadow: 0 18px 45px rgba(92,64,49,.13);
}

body .float {
  color: #302438;
  background: rgba(255,255,255,.9);
  border-color: rgba(48,32,55,.12);
  box-shadow: 0 18px 42px rgba(62,44,70,.12);
}

body .float span { color: #756b78; }

body .signal {
  background: rgba(255,255,255,.76);
  border-color: rgba(48,32,55,.1);
  box-shadow: 0 10px 28px rgba(61,43,69,.045);
}

body .signal:nth-child(1) { border-top: 3px solid #8c61b5; }
body .signal:nth-child(2) { border-top: 3px solid #49a67a; }
body .signal:nth-child(3) { border-top: 3px solid #d0a34d; }
body .signal span { color: #716775; }

body .processCard,
body .scopeCard,
body .faq details,
body .planCard,
body .compareWrap {
  background: rgba(255,255,255,.82);
  border-color: rgba(48,32,55,.11);
  box-shadow: 0 18px 48px rgba(62,44,70,.065);
}

body .processCard p,
body .promiseMain p,
body .scopeCard ul,
body .faq p,
body .planDesc,
body .scopeNote { color: #6f6673; }

body .processCard:hover {
  border-color: rgba(120,80,166,.32);
  box-shadow: 0 23px 52px rgba(75,49,87,.1);
}

body .promiseMain {
  background: linear-gradient(135deg,rgba(232,220,242,.84),rgba(255,255,255,.88));
  border-color: rgba(112,76,149,.16);
  box-shadow: 0 18px 48px rgba(62,44,70,.07);
}

body .promiseOutcome {
  background: linear-gradient(145deg,#fff9eb,#fffdf8);
  border-color: rgba(177,124,39,.2);
  box-shadow: 0 18px 48px rgba(86,62,44,.06);
}

body .outcomeItem { border-bottom-color: rgba(48,32,55,.1); }

body .planCard.featured {
  color: #f8f3eb;
  background: linear-gradient(145deg,#2c1d35,#1f1725);
  border-color: rgba(196,155,91,.34);
  box-shadow: 0 28px 70px rgba(37,23,44,.22);
}

body .planCard.featured:before { background: rgba(201,161,96,.2); }
body .planCard.featured .planName { color: #d8b77f; }
body .planCard.featured .planDesc,
body .planCard.featured .price small { color: #c8bdc9; }
body .planCard.featured .features li { border-top-color: rgba(255,255,255,.11); }
body .planCard.featured .features li:before { color: #d9b873; }
body .planCard.featured .btn {
  color: #251b2b;
  background: #d3ad6d;
  box-shadow: 0 13px 30px rgba(0,0,0,.18);
}

body .best {
  color: #895e1c;
  background: #fff1cf;
  border-color: rgba(181,126,38,.22);
}

body table { background: rgba(255,255,255,.58); }
body th,
body td { border-bottom-color: rgba(48,32,55,.1); }
body th { color: #756b78; }
body .dash { color: #a39aa6; }

body .scopeCard.ok { border-color: rgba(43,139,96,.2); }
body .scopeCard.limit { border-color: rgba(173,121,44,.2); }

body .finalBox {
  color: #f8f3eb;
  background: radial-gradient(circle at 50% 0,rgba(177,127,205,.24),transparent 25rem),#25192d;
  border-color: rgba(196,155,91,.26);
  box-shadow: 0 28px 75px rgba(37,23,44,.2);
}

body .finalBox .lav { color: #d2b3ea; }
body .finalBox p { color: #c6bbc8; }
body .finalBox .btn { background: #d3ad6d; color: #251b2b; }
body .finalBox .btn2 { color: #f5edf6; background: transparent; border-color: rgba(255,255,255,.2); }

body .finalWithMascot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  align-items: center;
  gap: clamp(32px, 5vw, 70px);
  padding: clamp(42px, 5vw, 65px);
  overflow: hidden;
  text-align: left;
}

body .finalWithMascot .finalCopy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

body .finalWithMascot h2 {
  max-width: 680px;
  margin-right: 0;
  margin-left: 0;
}

body .finalWithMascot p {
  max-width: 590px;
  margin-right: 0;
  margin-left: 0;
}

body .finalWithMascot .finalContact { justify-content: flex-start; }

body .finalMascot {
  position: relative;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 31px;
  background: rgba(255,255,255,.08);
  box-shadow: 0 24px 55px rgba(10,6,13,.28);
  transform: rotate(1.25deg);
}

body .finalMascot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 22px;
}

@media (max-width: 820px) {
  body .finalWithMascot {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 38px 24px 24px;
    text-align: center;
  }

  body .finalWithMascot h2,
  body .finalWithMascot p {
    margin-right: auto;
    margin-left: auto;
  }

  body .finalWithMascot .finalContact { justify-content: center; }

  body .finalMascot {
    width: min(100%, 520px);
    margin: 0 auto;
    transform: none;
  }
}

/* China Ready Check */
body .pageHero { position: relative; }
body .pageHero:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 170px;
  height: 170px;
  right: 3%;
  top: 38px;
  border: 1px solid rgba(120,80,166,.15);
  border-radius: 50%;
  box-shadow: inset 0 0 0 28px rgba(225,210,238,.16);
}

body .sideCard,
body .quizPanel,
body .scoreCard,
body .resultCard {
  background: rgba(255,255,255,.88);
  border-color: rgba(48,32,55,.11);
  box-shadow: 0 22px 58px rgba(62,44,70,.09);
}

body .sideCard p,
body .q p,
body .summaryText,
body .ctaBox p { color: #6f6673; }

body .sideList div,
body .status,
body .issue {
  background: #f8f5f8;
  border-color: rgba(48,32,55,.09);
}

body .sideList i {
  background: #8c61b5;
  box-shadow: 0 0 12px rgba(140,97,181,.3);
}

body .quizPanel { background: linear-gradient(145deg,#fff,#faf7fb); }
body .progress { background: #e9e2ea; }
body .progress div { background: linear-gradient(90deg,#7850a6,#b286ce); }
body .counter { color: #7b7180; }

body .fieldText,
body .opt {
  color: #302438;
  background: #fbf9fb;
  border-color: rgba(48,32,55,.12);
}

body .fieldText::placeholder { color: #9a909d; }

body .opt:hover { border-color: rgba(120,80,166,.34); }
body .opt.selected {
  border-color: rgba(120,80,166,.58);
  background: linear-gradient(90deg,rgba(225,210,238,.68),#fbf9fb);
  box-shadow: inset 4px 0 0 #7850a6;
}

body .actions { border-top-color: rgba(48,32,55,.1); }
body .scoreRing { background-color: #eee8ef; }
body .scoreRing:after { background: #fffdf9; border: 1px solid rgba(48,32,55,.08); }

body .resultMascot {
  width: min(100%, 310px);
  margin: 22px auto 0;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(48,32,55,.09);
  border-radius: 25px;
  background: #fffdf9;
  box-shadow: 0 16px 38px rgba(62,40,73,.1);
  transform: rotate(-.65deg);
}

body .resultMascot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}
body .status { color: #716775; }
body .status b { color: #251b2b; }
body .issue span { color: #716775; }

body .ctaBox {
  background: linear-gradient(135deg,#eee3f5,#fff);
  border-color: rgba(120,80,166,.2);
}

body .small { color: #8a808e; }

/* Customer portal */
body .planBadge {
  color: #69458e;
  background: #ede3f4;
  border-color: rgba(120,80,166,.2);
}

body .tab {
  color: #6f6673;
  background: rgba(255,255,255,.58);
  border-color: rgba(48,32,55,.11);
}

body .tab.active {
  color: #fff;
  background: #34213f;
  border-color: #34213f;
  box-shadow: 0 10px 24px rgba(52,33,63,.14);
}

body .card,
body .formCard {
  background: rgba(255,255,255,.86);
  border-color: rgba(48,32,55,.11);
  box-shadow: 0 20px 55px rgba(62,44,70,.075);
}

body .card p,
body .formLead,
body .scope ul { color: #6f6673; }

body .phase,
body .metric,
body .check {
  color: #6f6673;
  background: #f8f5f8;
  border-color: rgba(48,32,55,.09);
}

body .phase.active {
  color: #4d3560;
  background: #e9dcf2;
  border-color: rgba(120,80,166,.25);
}

body .metric label,
body .check small { color: #756b78; }

body .note {
  color: #715526;
  background: #fff7e4;
  border-color: rgba(173,121,44,.18);
}

body .help {
  background: linear-gradient(145deg,#eadff2,#fff);
  border-color: rgba(120,80,166,.17);
}

body #plusCard {
  color: #f8f3eb;
  background: linear-gradient(145deg,#2c1d35,#1f1725);
  border-color: rgba(196,155,91,.3);
}

body #plusCard .gold { color: #d8b77f; }
body #plusCard .tiny { color: #c8bdc9 !important; }
body #plusCard .plusbox {
  background: rgba(211,173,109,.1);
  border-color: rgba(211,173,109,.22);
}
body #plusCard .plusbox strong { color: #e0c48f; }
body #plusCard .btn2 { color: #f8f3eb; background: transparent; border-color: rgba(255,255,255,.2); }

body .sectiontitle { color: #76519c; }
body .field label { color: #6f6673; }
body .field input,
body .field select,
body .field textarea {
  color: #302438;
  background: #fbf9f7;
  border-color: rgba(48,32,55,.13);
}

body .field select option { color: #302438; background: #fffdf9; }
body .field input:focus,
body .field select:focus,
body .field textarea:focus {
  border-color: rgba(120,80,166,.48);
  box-shadow: 0 0 0 3px rgba(120,80,166,.09);
}

body .savebar { border-top-color: rgba(48,32,55,.1); }
body .saved { color: #756b78; }

/* Keep the WhatsApp entry visible and distinct from the calmer palette. */
body .whatsappContact {
  color: #fff;
  background: rgba(37,27,43,.94);
  border-color: rgba(255,255,255,.14);
}

@media (max-width: 620px) {
  body .pageHero:after { width: 100px; height: 100px; right: -25px; top: 70px; }
  body .finalBox { border-radius: 29px; }
  body .planCard.featured { box-shadow: 0 22px 52px rgba(37,23,44,.18); }
}

/* Official Phosphor icon system: one visual language, no emoji or symbol tiles. */
body .brandIcon {
  --icon: none;
  flex: 0 0 auto;
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: #68458c;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  opacity: .88;
  transition: transform .2s ease, opacity .2s ease;
}

body .brandIcon.tone-purple { background-color: #68458c; }
body .brandIcon.tone-green { background-color: #267b55; }
body .brandIcon.tone-gold { background-color: #9a6a24; }

body .brandIcon.compactIcon {
  width: 24px;
  height: 24px;
}

body .signal .brandIcon {
  width: 28px;
  height: 28px;
  margin-bottom: 13px;
}

body .signal:hover .brandIcon,
body .processCard:hover > .brandIcon,
body .scopeCard:hover > .brandIcon {
  transform: translateY(-2px);
  opacity: 1;
}

body .processCard { position: relative; }

body .processCard > .brandIcon {
  width: 38px;
  height: 38px;
  margin-top: 35px;
}

body .processCard > .brandIcon + h3 { margin-top: 17px; }

body .planName {
  display: flex;
  align-items: center;
  gap: 8px;
}

body .planName > .brandIcon {
  width: 20px;
  height: 20px;
}

body .planCard.featured .brandIcon { background-color: #d8b77f; }

body .scopeCard > .brandIcon {
  width: 34px;
  height: 34px;
  margin: 20px 0 3px;
}

body .scopeCard > .brandIcon + h3 { margin-top: 10px; }

body .sideList > div.hasBrandIcon { align-items: center; }
body .sideList > div.hasBrandIcon > i { display: none; }

body .sideList .brandIcon {
  width: 22px;
  height: 22px;
}

body .metric > .brandIcon {
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
}

body .card > .brandIcon {
  width: 34px;
  height: 34px;
  margin-bottom: 13px;
}

body #plusCard > .brandIcon { background-color: #d8b77f; }

body .faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}

body .faq summary::-webkit-details-marker { display: none; }

body .faq summary:after {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-color: #68458c;
  -webkit-mask: url("assets/icons/caret-down.svg") center / contain no-repeat;
  mask: url("assets/icons/caret-down.svg") center / contain no-repeat;
  transition: transform .2s ease;
}

body .faq details[open] summary:after { transform: rotate(180deg); }

@media (max-width: 560px) {
  body .processCard > .brandIcon { width: 34px; height: 34px; }
  body .signal .brandIcon { width: 25px; height: 25px; }
  body .brandIcon.compactIcon { width: 22px; height: 22px; }
}

body .finalContact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
  color: #b8adb9;
  font-size: 12px;
}

body .finalContact a,
body .finalBox .footerLinks a {
  color: #eadcf1;
  text-decoration: none;
  text-underline-offset: 3px;
}

body .footerLinks a {
  color: #4f365e;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  text-underline-offset: 3px;
}

body .finalContact a:hover {
  color: #d2b3ea;
  text-decoration: underline;
}

body .footerLinks a:hover {
  color: #68458c;
  text-decoration: none;
}

body .footerDetails {
  align-items: flex-start;
}

body .footerBrand {
  display: grid;
  gap: 5px;
  max-width: 590px;
}

body .footerBrand strong {
  color: #302438;
  font-size: 14px;
}

body .footerBrand small {
  color: #6f6673;
  font-size: 12px;
  line-height: 1.45;
}

body .footerLinks {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

body .footerLinks .footerContact {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 6px 10px 6px 7px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body .footerLinks .footerContact:hover {
  color: #4f365e;
  background: rgba(255,255,255,.7);
  border-color: rgba(77,52,90,.1);
  box-shadow: 0 9px 25px rgba(62,40,73,.08);
  transform: translateY(-1px);
}

body .footerLinks .footerContact:focus-visible {
  outline: 3px solid rgba(125,75,216,.22);
  outline-offset: 2px;
}

body .footerContactIcon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eee6f2;
}

body .footerContactIcon img {
  display: block;
  width: 17px;
  height: 17px;
}

body .footerContact[data-platform="whatsapp"] .footerContactIcon { background: #dff4e8; }
body .footerContact[data-platform="email"] .footerContactIcon { background: #eee6f2; }
body .footerContact[data-platform="instagram"] .footerContactIcon { background: #f4e3eb; }

@media (max-width: 820px) {
  body .footerDetails { display: grid; gap: 20px; }
  body .footerLinks { justify-content: flex-start; }
}

body .compareHint {
  display: none;
  margin: 18px 2px -10px;
  color: #6f6673;
  font-size: 12px;
  font-weight: 750;
}

body .result:focus { outline: none; }

@media (max-width: 560px) {
  body .compareHint { display: block; }

  body .footerLinks {
    display: grid;
    justify-items: start;
    gap: 4px;
  }

  body .footerLinks .footerContact {
    width: 100%;
  }

  body .finalContact {
    display: grid;
    gap: 8px;
    justify-items: center;
  }

  body .finalContact [aria-hidden="true"] { display: none; }

  body.readyCheckPage .pageHero {
    padding-top: 38px;
    padding-bottom: 16px;
  }

  body.readyCheckPage .pageHero h1 {
    margin-top: 17px;
    font-size: 46px;
  }

  body.readyCheckPage .pageHero p {
    font-size: 15px;
    line-height: 1.55;
  }

  body.readyCheckPage .pageHero:after {
    width: 110px;
    height: 110px;
    top: 52px;
  }

  body.readyCheckPage .quizWrap {
    display: block;
    padding-top: 8px;
  }

  body.readyCheckPage .sideCard { display: none; }
}