:root {
  --green: #079b73;
  --green-dark: #075b57;
  --green-ink: #083f3c;
  --green-soft: #dff7ed;
  --mint: #bfeadf;
  --orange: #ef9212;
  --orange-dark: #b76508;
  --orange-soft: #fff3d9;
  --blue: #24a8c5;
  --ink: #142a2b;
  --muted: #607270;
  --line: rgba(26, 91, 82, .12);
  --paper: rgba(255, 255, 255, .94);
  --shadow: 0 8px 24px rgba(24, 94, 84, .09);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #dfeee9; }
body {
  margin: 0;
  min-height: 100%;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: #dfeee9;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.app-shell {
  position: relative;
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 0 0 max(0px, calc(50vw - 240px));
  padding: 0 14px 96px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(96, 220, 207, .30), transparent 30%),
    linear-gradient(180deg, #effcf8 0, #f7fbfa 42%, #f2f8f6 100%);
  box-shadow: 0 0 45px rgba(15, 65, 59, .12);
}
.app-shell::before {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  left: -120px;
  top: 100px;
  border-radius: 50%;
  background: rgba(139, 224, 209, .13);
  pointer-events: none;
}
.page-header {
  position: relative;
  z-index: 5;
  height: 58px;
  display: grid;
  grid-template-columns: 42px 1fr 58px;
  align-items: center;
  padding-top: 4px;
}
.page-header h1 { margin: 0; text-align: center; font-size: 23px; letter-spacing: 1px; color: var(--green-dark); }
.back-button, .mini-program {
  border: 0;
  background: transparent;
  cursor: pointer;
  min-height: 38px;
}
.back-button { font-size: 30px; color: #164f4a; padding: 0; text-align: left; }
.mini-program {
  justify-self: end;
  width: 57px;
  border: 1px solid rgba(20, 50, 48, .08);
  border-radius: 22px;
  background: rgba(255,255,255,.70);
  font-weight: 900;
  letter-spacing: 2px;
}
.home-page .back-button { visibility: hidden; }

.stack { display: grid; gap: 11px; position: relative; z-index: 1; }
.card {
  position: relative;
  border: 1px solid rgba(21, 112, 95, .10);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.section { margin-top: 17px; }
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 5px 10px;
}
.section-heading h2 { margin: 0; font-size: 21px; color: #153735; }
.section-heading h2::before { content: ""; display: inline-block; width: 4px; height: 22px; margin-right: 9px; border-radius: 4px; background: var(--green); vertical-align: -3px; }
.section-heading a { color: #6d7c7a; font-size: 13px; }
.eyebrow { color: var(--green); font-weight: 700; font-size: 13px; }
.muted { color: var(--muted); }
.strong { font-weight: 800; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: var(--green-soft); color: var(--green-dark); font-size: 12px; font-weight: 700; }
.pill.orange { background: var(--orange); color: #fff; }
.icon-disc {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #35caa2, #008b69);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.65);
  font-size: 21px;
}
.asset { display: block; max-width: 100%; object-fit: contain; }

.hero {
  min-height: 215px;
  padding: 23px 21px;
  overflow: hidden;
  border-radius: 24px;
  color: var(--green-ink);
  background:
    radial-gradient(circle at 78% 24%, rgba(255,255,255,.8), transparent 24%),
    linear-gradient(135deg, #c9f5ec 0, #9de2dc 46%, #8bd2e8 100%);
  box-shadow: 0 11px 25px rgba(18, 119, 104, .15);
}
.hero h2 { position: relative; z-index: 3; margin: 0; font-size: 29px; line-height: 1.18; letter-spacing: 1px; white-space: nowrap; }
.hero h2 span { color: var(--green); }
.hero p { position: relative; z-index: 3; margin: 10px 0 0; font-size: 15px; }
.hero .hero-cta { position: relative; z-index: 3; display: inline-flex; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: rgba(0,147,109,.88); color: #fff; font-weight: 700; }
.hero-truck { display: none; }
.hero-scene { position: absolute; z-index: 1; right: -12px; bottom: -4px; width: 72%; max-height: 150px; filter: drop-shadow(0 7px 8px rgba(10,75,69,.12)); -webkit-mask-image: linear-gradient(to right, transparent, #000 18%); mask-image: linear-gradient(to right, transparent, #000 18%); }
.hero-shield {
  position: absolute;
  z-index: 0;
  right: 30px;
  top: 18px;
  width: 102px;
  height: 118px;
  clip-path: polygon(50% 0, 92% 17%, 83% 76%, 50% 100%, 17% 76%, 8% 17%);
  background: linear-gradient(145deg, #8ef8dc, #05a988 66%, #007c68);
  border: 5px solid rgba(255,255,255,.7);
  box-shadow: 0 8px 16px rgba(0,88,75,.20);
}
.hero-shield::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 54px; font-weight: 900; }
.dots { position: absolute; left: 50%; bottom: 9px; display: flex; gap: 7px; transform: translateX(-50%); }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.85); }
.dots i:first-child { background: var(--green); }

.notice { min-height: 44px; padding: 7px 13px; display: flex; align-items: center; gap: 9px; overflow: hidden; }
.notice strong { color: var(--green); white-space: nowrap; }
.notice > span:nth-child(3) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.notice .chevron { margin-left: auto; font-size: 26px; color: #82908e; }

.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.service-card { min-width: 0; min-height: 176px; padding: 16px 11px 11px; overflow: hidden; cursor: pointer; transition: transform .18s ease; }
.service-card:active { transform: scale(.98); }
.service-card h3 { margin: 0; color: var(--green-dark); font-size: 18px; }
.service-card p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #5f716e; }
.service-card img { position: absolute; right: -5px; bottom: 8px; width: 86%; height: 90px; object-fit: contain; }
.service-card.featured { border-color: #f1b651; background: linear-gradient(145deg,#fffaf0,#fff2d4); }
.service-card.featured h3 { color: #513018; }
.recommend { position: absolute; right: 0; top: 0; padding: 5px 10px; border-radius: 0 17px 0 17px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; }

.address-card { min-height: 82px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.address-card .pin { width: 54px; height: 65px; object-fit: contain; }
.address-card > div { min-width: 0; flex: 1; }
.address-card h3 { margin: 0 0 4px; font-size: 17px; }
.address-card p { margin: 0; font-size: 12px; line-height: 1.45; color: #566865; }
.primary-button, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 43px;
  padding: 0 19px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 800;
}
.primary-button { color: #fff; background: linear-gradient(100deg,#0eb686,#008b6a); box-shadow: 0 7px 15px rgba(0,144,107,.2); }
.primary-button.orange { background: linear-gradient(100deg,#f6ab21,#e47b00); box-shadow: 0 7px 15px rgba(228,123,0,.22); }
.secondary-button { color: var(--green-dark); border: 1px solid rgba(0,150,111,.22); background: #effbf7; }
.address-card .primary-button { margin-left: auto; padding: 0 12px; min-width: 105px; }

.benefit-panel { padding: 15px; background: linear-gradient(135deg,rgba(255,252,244,.98),rgba(255,255,255,.95)); border-color: rgba(225,170,77,.3); }
.benefit-panel .panel-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.benefit-panel .panel-title h2 { margin: 0; font-size: 20px; color: #49301a; }
.plate { display: inline-flex; padding: 6px 12px; border-radius: 8px; border: 1px solid #d7a34f; background: #ffe0a7; color: #754307; font-weight: 800; letter-spacing: 1px; box-shadow: inset 0 2px 6px rgba(177,112,18,.15); }
.benefit-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 16px; }
.benefit-item { min-height: 47px; display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid rgba(158,122,71,.16); font-size: 12px; line-height: 1.35; }
.benefit-item .check { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#34ba93,#008364); color: #fff; font-weight: 900; }

.bottom-nav {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: 0;
  width: min(100%, 480px);
  height: 76px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px 26px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(31,100,89,.1);
  background: rgba(255,255,255,.96);
  box-shadow: 0 -8px 22px rgba(29,87,78,.08);
  backdrop-filter: blur(14px);
}
.nav-item { display: grid; justify-items: center; align-content: center; gap: 2px; color: #909b99; font-size: 12px; cursor: pointer; }
.nav-item .nav-icon { width: 27px; height: 27px; display: grid; place-items: center; font-size: 24px; filter: grayscale(1); opacity: .72; }
.nav-item.active { color: var(--green); font-weight: 700; }
.nav-item.active .nav-icon { filter: none; opacity: 1; transform: translateY(-1px); }

/* detail page hero */
.detail-hero { min-height: 222px; padding: 25px 22px; overflow: hidden; }
.detail-hero h2 { margin: 0; color: var(--green-dark); font-size: 32px; }
.detail-hero p { width: 55%; margin: 10px 0 0; line-height: 1.55; color: #456663; font-size: 14px; }
.detail-hero .asset { position: absolute; right: -2px; bottom: 5px; width: 55%; max-height: 160px; }
.tag-row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 5px; width: 62%; margin-top: 18px; }
.tag { padding: 5px 8px; border-radius: 99px; color: var(--green-dark); background: rgba(255,255,255,.76); font-size: 10px; }

.vehicle-card { padding: 14px 16px; display: flex; align-items: center; gap: 13px; }
.car-silhouette { width: 86px; height: 56px; object-fit: contain; }
.vehicle-card h3 { margin: 0 0 5px; font-size: 17px; }
.vehicle-card p { margin: 0; font-size: 12px; color: #687775; }
.vehicle-card .plate { margin-left: auto; font-size: 12px; }

.steps { padding: 17px 13px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.step { position: relative; text-align: center; }
.step:not(:last-child)::after { content: ""; position: absolute; right: -18%; top: 19px; width: 37%; height: 2px; background: #b6ded4; }
.step-num { width: 39px; height: 39px; display: grid; place-items: center; margin: 0 auto 7px; border-radius: 50%; background: linear-gradient(145deg,#28b992,#007d61); color: #fff; font-weight: 900; }
.step h3 { margin: 0; font-size: 14px; }
.step p { margin: 4px 0 0; font-size: 10px; color: #71817e; }

.hotline { padding: 16px; display: flex; align-items: center; gap: 12px; }
.hotline h3 { margin: 0; font-size: 17px; color: var(--green-dark); }
.hotline p { margin: 3px 0 0; color: #4e615e; font-size: 13px; }
.hotline .primary-button { margin-left: auto; }
.tip { padding: 13px 15px; display: flex; gap: 9px; border-radius: 14px; background: #eaf8f3; color: #48635e; font-size: 12px; line-height: 1.55; }

/* membership */
.gold-hero { min-height: 205px; padding: 23px; overflow: hidden; color: #60390e; background: linear-gradient(135deg,#fff9e8,#ffe6a8); border-color: rgba(226,154,36,.38); }
.gold-hero h2 { margin: 0; font-size: 28px; }
.gold-hero p { margin: 8px 0; color: #845f27; }
.gold-card-art { position: absolute; right: 20px; bottom: 16px; width: 157px; height: 96px; padding: 16px; border-radius: 14px; transform: rotate(-7deg); background: linear-gradient(145deg,#ffc34e,#d78505); box-shadow: 0 12px 22px rgba(162,94,0,.22); color: #fff; }
.gold-card-art::before { content: "♛"; font-size: 37px; }
.gold-card-art::after { content: "会员卡 VIP"; display: block; margin-top: 5px; font-weight: 800; letter-spacing: 1px; }
.plans { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.plan { position: relative; padding: 14px 12px; min-height: 116px; cursor: pointer; }
.plan.selected { border: 2px solid var(--orange); background: #fffaf0; }
.plan h3 { margin: 0; font-size: 17px; }
.plan .price { margin-top: 10px; font-size: 28px; color: var(--green); font-weight: 900; }
.plan.selected .price { color: var(--orange-dark); }
.plan .price small { font-size: 11px; font-weight: 600; }
.plan p { margin: 4px 0 0; font-size: 11px; color: #71817e; }
.plan .recommend { border-radius: 0 15px 0 13px; }
.wide-action { width: 100%; min-height: 52px; margin-top: 14px; border-radius: 14px; font-size: 17px; }

/* benefits page */
.benefits-hero { min-height: 170px; padding: 22px; overflow: hidden; background: linear-gradient(135deg,#e2fbf3,#b6ebdf); }
.benefits-hero h2 { margin: 0; color: var(--green-dark); font-size: 29px; }
.benefits-hero p { margin: 8px 0; width: 48%; color: #4e6f69; font-size: 13px; }
.benefits-hero img { position: absolute; right: -4px; bottom: -5px; width: 56%; }
.benefit-list { padding: 3px 16px; }
.benefit-row { display: flex; gap: 12px; align-items: center; min-height: 61px; border-bottom: 1px solid var(--line); }
.benefit-row:last-child { border-bottom: 0; }
.benefit-row .number { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font-weight: 900; }
.benefit-row p { margin: 0; font-size: 13px; line-height: 1.5; }

/* map */
.map-card { min-height: 330px; overflow: hidden; background: #dff2ec; }
.map-lines { position: absolute; inset: 0; opacity: .65; background: linear-gradient(24deg, transparent 47%, #fff 48%, #fff 52%, transparent 53%), linear-gradient(147deg, transparent 45%, #fff 46%, #fff 51%, transparent 52%), linear-gradient(90deg, transparent 31%, #fff 32%, #fff 35%, transparent 36%); }
.map-block { position: absolute; border-radius: 8px; background: rgba(150,205,190,.42); border: 1px solid rgba(84,159,140,.15); }
.map-block.one { width: 120px; height: 75px; left: 25px; top: 30px; transform: rotate(-8deg); }
.map-block.two { width: 150px; height: 70px; right: 10px; top: 42px; transform: rotate(12deg); }
.map-block.three { width: 145px; height: 80px; left: 24px; bottom: 35px; transform: rotate(7deg); }
.map-block.four { width: 130px; height: 90px; right: 23px; bottom: 27px; transform: rotate(-10deg); }
.store-pin { position: absolute; z-index: 2; left: 50%; top: 43%; transform: translate(-50%,-50%); text-align: center; }
.store-pin img { width: 69px; height: 82px; object-fit: contain; filter: drop-shadow(0 6px 7px rgba(0,83,64,.2)); }
.store-pin strong { display: block; margin-top: -3px; padding: 5px 10px; border-radius: 10px; background: #fff; box-shadow: var(--shadow); color: var(--green-dark); font-size: 12px; white-space: nowrap; }
.store-thumb { position: absolute; left: 16px; bottom: 16px; width: 128px; height: 92px; object-fit: contain; z-index: 3; }
.location-info { padding: 17px; }
.location-info h2 { margin: 0 0 9px; color: var(--green-dark); font-size: 20px; }
.info-line { display: flex; gap: 9px; margin: 8px 0; color: #506460; font-size: 13px; line-height: 1.4; }
.button-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 13px; }

/* maintenance */
.maintenance-hero { min-height: 213px; padding: 22px; overflow: hidden; background: linear-gradient(135deg,#d8f9ee,#b7e7e1); }
.maintenance-hero h2 { width: 60%; margin: 0; color: var(--green-dark); font-size: 26px; }
.maintenance-hero p { width: 50%; margin: 10px 0 0; color: #55736e; font-size: 13px; }
.maintenance-hero img { position: absolute; right: -2px; bottom: 4px; width: 55%; max-height: 145px; object-fit: contain; }
.maintenance-services { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.maintenance-service { min-height: 118px; padding: 13px 10px; text-align: center; }
.maintenance-service img { height: 57px; width: 100%; object-fit: contain; }
.maintenance-service h3 { margin: 6px 0 2px; font-size: 14px; }
.maintenance-service p { margin: 0; font-size: 10px; color: #71817e; }
.store-list { padding: 0 15px; }
.store-row { min-height: 78px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.store-row:last-child { border: 0; }
.store-row h3 { margin: 0 0 4px; font-size: 15px; }
.store-row p { margin: 0; color: #70807d; font-size: 11px; }
.store-row .distance { margin-left: auto; color: var(--green); font-size: 12px; }

/* profile */
.profile-head { min-height: 166px; padding: 20px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg,#e4fbf4,#b5e8df); }
.avatar { position: relative; width: 76px; height: 76px; flex: 0 0 76px; overflow: hidden; border: 4px solid rgba(255,255,255,.8); border-radius: 50%; background: #f8fffd; }
.avatar .portrait { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 25%; transform: scale(1.18); }
.profile-copy { margin-left: 14px; position: relative; z-index: 2; }
.profile-copy h2 { margin: 0; font-size: 24px; }
.profile-copy p { margin: 6px 0 0; color: #496b65; font-size: 12px; }
.profile-head .profile-art { position: absolute; right: -10px; bottom: 1px; width: 52%; opacity: .96; }
.membership-card { padding: 16px; overflow: hidden; background: linear-gradient(135deg,#fff9ea,#ffe4ac); border-color: rgba(230,166,53,.32); }
.membership-card h2 { margin: 0; color: #5c390e; font-size: 20px; }
.membership-card p { margin: 8px 0 0; color: #86632c; font-size: 12px; }
.membership-card .plate { margin-top: 12px; }
.membership-card .crown { position: absolute; right: 22px; top: 18px; width: 69px; }
.quick-links { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.quick-link { min-height: 78px; padding: 13px; display: flex; align-items: center; gap: 10px; }
.quick-link h3 { margin: 0 0 4px; font-size: 14px; }
.quick-link p { margin: 0; color: #73817f; font-size: 10px; }

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 90px;
  transform: translate(-50%, 14px);
  max-width: 330px;
  padding: 10px 15px;
  border-radius: 12px;
  background: rgba(7,45,42,.92);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: .22s ease;
}
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 390px) {
  .hero h2 { font-size: 31px; }
  .service-card { min-height: 160px; padding-left: 9px; padding-right: 9px; }
  .service-card h3 { font-size: 16px; }
  .benefit-grid { grid-template-columns: 1fr; }
  .address-card { flex-wrap: wrap; }
  .address-card .primary-button { width: 100%; }
}

@media (max-width: 430px) {
  .app-shell { padding-left: 10px; padding-right: 10px; }
  .hero { padding-left: 20px; padding-right: 16px; }
  .hero h2 { font-size: 25px; }
  .service-card { padding-left: 9px; padding-right: 9px; }
  .service-card h3 { font-size: 16px; white-space: nowrap; }
  .service-card p { font-size: 11px; }
  .address-card .pin { width: 47px; height: 58px; }
  .address-card h3 { font-size: 16px; }
  .address-card p { font-size: 11px; }
  .benefit-panel { padding-left: 12px; padding-right: 12px; }
  .benefit-panel .panel-title h2 { font-size: 18px; white-space: nowrap; }
  .benefit-panel .panel-title .pill { padding-left: 8px; padding-right: 8px; }
  .benefit-panel .panel-title .plate { padding-left: 9px; padding-right: 9px; font-size: 13px; white-space: nowrap; }
}

@media (min-width: 700px) {
  body { padding: 18px 0; }
  .app-shell { min-height: calc(100vh - 36px); border-radius: 28px; }
  .bottom-nav { bottom: 18px; border-radius: 0 0 28px 28px; }
}

/* home page source-matched refinement */
.home-page .app-shell {
  container-type: inline-size;
  padding: 0 clamp(11px, 3vw, 14px) clamp(42px, 10.5vw, 50px);
  background:
    radial-gradient(circle at 100% 0, rgba(116, 225, 211, .34), transparent 28%),
    linear-gradient(180deg, #eefbf7 0, #f8fcfb 63%, #f4faf8 100%);
}
.home-page .app-shell::before { display: none; }
.home-header { height: 11.5cqw; display: grid; place-items: center; }
.home-header h1 { margin: 0; color: #075a57; font-size: 5.22cqw; line-height: 1; font-weight: 900; letter-spacing: .42cqw; }
.home-stack { display: grid; gap: 2.84cqw; }
.home-hero { height: 46.2cqw; overflow: hidden; border: 2px solid rgba(255,255,255,.92); border-radius: 3.75cqw; box-shadow: 0 1.75cqw 3.75cqw rgba(25,109,98,.14); }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(229,251,248,.62) 0, rgba(225,248,247,.22) 39%, transparent 66%); pointer-events: none; }
.home-hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; transform: scale(.94); }
.home-hero-copy { position: relative; z-index: 2; padding: 9cqw 0 0 9cqw; color: #075451; text-shadow: 0 1px 0 rgba(255,255,255,.88); }
.home-hero-copy h2 { margin: 0; font-size: 5.42cqw; line-height: 1.08; font-weight: 900; letter-spacing: -.28cqw; white-space: nowrap; }
.home-hero-copy h2 span { color: #087f70; }
.home-hero-copy p { display: inline-flex; margin: 2cqw 0 0; padding: 1cqw 2.25cqw; border-radius: 999px; color: #fff; background: rgba(1,120,105,.91); font-size: 2.75cqw; line-height: 1.1; font-weight: 700; text-shadow: none; }
.home-shield-label { position: absolute; z-index: 2; left: 60.7%; top: 14.2cqw; width: 10cqw; transform: translateX(-50%); color: #fff0ba; font-size: 4.5cqw; line-height: 1; font-weight: 900; text-align: center; text-shadow: 0 .5cqw .5cqw rgba(0,66,66,.55); }
.home-dots { position: absolute; z-index: 3; left: 50%; bottom: 1.5cqw; display: flex; gap: 1.75cqw; transform: translateX(-50%); }
.home-dots i { width: 1.5cqw; height: 1.5cqw; border: 1px solid rgba(255,255,255,.95); border-radius: 50%; background: rgba(7,63,60,.42); }
.home-dots i:first-child { background: #fff; }
.home-notice { height: 8.85cqw; min-height: 8.85cqw; padding: 0 2.5cqw; display: flex; align-items: center; gap: 2cqw; border-radius: 3.5cqw; }
.home-notice-icon { width: 6cqw; height: 6cqw; display: grid; place-items: center; flex: 0 0 6cqw; color: #079b73; }
.home-notice-icon svg { width: 5.2cqw; height: 5.2cqw; overflow: visible; }
.home-notice-icon svg path:first-child { fill: currentColor; }
.home-notice-icon svg path:last-child { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.home-notice strong { color: #06896d; font-size: 3.25cqw; white-space: nowrap; }
.home-notice-copy { min-width: 0; overflow: hidden; color: #253c3a; font-size: 3cqw; text-overflow: ellipsis; white-space: nowrap; }
.home-chevron { margin-left: auto; color: #72807f; font-size: 6.25cqw; line-height: 1; }

.home-section { margin-top: 2.84cqw; }
.home-section-heading { height: 4cqw; display: flex; align-items: center; margin: 0 .5cqw 1.75cqw; }
.home-section-heading h2 { margin: 0; color: #0a3433; font-size: 4.72cqw; line-height: 1; }
.home-section-heading h2::before { content: ""; display: inline-block; width: .75cqw; height: 4.72cqw; margin-right: 2cqw; border-radius: .75cqw; background: #06a37a; vertical-align: -.75cqw; }
.home-service-grid { display: grid; grid-template-columns: 1.08fr .96fr .96fr; gap: 1.5cqw; }
.home-service-card { min-width: 0; height: 44.8cqw; overflow: hidden; padding: 3.5cqw 2.5cqw; border-radius: 3.5cqw; box-shadow: 0 1.25cqw 3cqw rgba(28,87,79,.08); }
.home-service-card h3 { position: relative; z-index: 3; margin: 0; color: #064f4c; font-size: 4.22cqw; line-height: 1.15; font-weight: 900; white-space: nowrap; }
.home-service-card p { position: relative; z-index: 3; margin: 1.25cqw 0 0; color: #526865; font-size: 2.5cqw; line-height: 1.45; }
.home-service-featured { border-color: #f0a62f; background: linear-gradient(145deg,#fffaf0,#fff2d4); }
.home-service-card:nth-child(2) { background: linear-gradient(145deg,#fff,#eef9fd); }
.home-service-card:nth-child(3) { background: linear-gradient(145deg,#fff,#f1faf5); }
.home-service-featured h3 { color: #4d2c12; }
.home-recommend { position: absolute; z-index: 5; right: 0; top: 0; padding: 1.25cqw 2.25cqw; border-radius: 0 3.25cqw 0 3.25cqw; background: linear-gradient(135deg,#ff9d24,#f07b05); color: #fff; font-size: 2.5cqw; font-weight: 800; }
.home-gold-card { position: absolute; z-index: 2; left: 3.25cqw; right: 2.25cqw; bottom: 10.5cqw; height: 14.7cqw; padding: 2.25cqw; overflow: hidden; border: 1px solid rgba(255,226,148,.7); border-radius: 2.25cqw; transform: rotate(-8deg); color: #fff8d9; background: linear-gradient(145deg,#ffc84f,#df8a09 70%,#bf6c00); box-shadow: 0 1.75cqw 2.75cqw rgba(168,94,0,.19); }
.home-gold-card::after { content: ""; position: absolute; right: -10px; bottom: -20px; width: 70px; height: 70px; border: 1px solid rgba(255,242,188,.22); border-radius: 50%; }
.home-gold-card small { display: block; font-size: 1.75cqw; letter-spacing: .25cqw; }
.home-gold-card b { position: absolute; left: 3cqw; bottom: 2.25cqw; font-size: 2.75cqw; }
.home-gold-card img { position: absolute; z-index: 2; right: 2cqw; bottom: 1.75cqw; width: 7.2cqw; height: 7.2cqw; object-fit: contain; }
.home-card-action { position: absolute; z-index: 4; left: 2.25cqw; right: 2.25cqw; bottom: 2cqw; height: 6.75cqw; display: flex; align-items: center; justify-content: center; gap: 1.5cqw; border-radius: 999px; color: #fff; background: linear-gradient(100deg,#f4ad23,#e48100); box-shadow: 0 1.25cqw 2.25cqw rgba(198,111,0,.22); font-size: 3.25cqw; font-weight: 900; }
.home-card-action i { width: 4.5cqw; height: 4.5cqw; display: grid; place-items: center; border-radius: 50%; color: #d47c00; background: #fff7db; font-style: normal; font-size: 4.5cqw; }
.home-card-action i::before { content: ""; width: 1.25cqw; height: 1.25cqw; border-top: .48cqw solid currentColor; border-right: .48cqw solid currentColor; transform: translateX(-.28cqw) rotate(45deg); }
.home-service-art { position: absolute; z-index: 2; left: .75cqw; right: .75cqw; bottom: 1cqw; width: calc(100% - 1.5cqw); height: 22.5cqw; object-fit: contain; }
.home-rescue-art { height: 21.8cqw; bottom: 1.4cqw; }
.home-maintenance-art { height: 24.2cqw; bottom: .8cqw; }

.home-address-section { margin-top: 2cqw; }
.home-address-card { height: 17.4cqw; display: flex; align-items: center; overflow: hidden; padding: 0 3cqw 0 0; border-radius: 3.5cqw; }
.home-pin-tile { width: 15.2cqw; height: 17.4cqw; flex: 0 0 15.2cqw; display: grid; place-items: center; background: linear-gradient(135deg,#effbf8,#dff3ee); }
.home-pin-tile::before, .home-pin-tile::after { content: ""; position: absolute; width: 90px; height: 1px; background: rgba(120,183,170,.22); transform: rotate(-38deg); }
.home-pin-tile::after { transform: rotate(41deg); }
.home-pin-tile img { width: 10.7cqw; height: 13cqw; object-fit: contain; }
.home-address-copy { min-width: 0; flex: 1; padding-left: 2.25cqw; }
.home-address-copy h3 { margin: 0 0 .75cqw; color: #132e2d; font-size: 4cqw; line-height: 1; }
.home-address-copy p { margin: 0; color: #334b49; font-size: 2.5cqw; line-height: 1.4; white-space: nowrap; }
.home-nav-button { min-width: 27cqw; height: 9.2cqw; display: flex; align-items: center; justify-content: center; gap: 1.75cqw; border-radius: 999px; color: #fff; background: linear-gradient(100deg,#18b88c,#008f6e); box-shadow: 0 1.5cqw 2.5cqw rgba(0,142,107,.18); font-size: 3.5cqw; font-weight: 800; white-space: nowrap; }
.home-nav-button b { width: 5.7cqw; height: 5.7cqw; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; font-size: 3cqw; }

.home-benefit-panel { height: 49cqw; margin-top: 2cqw; overflow: hidden; padding: 0 3cqw 2.25cqw; border-color: rgba(227,169,76,.42); border-radius: 3.5cqw; background: linear-gradient(145deg,#fffaf0,#fff); }
.home-benefit-title { height: 9cqw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(174,129,63,.16); }
.home-benefit-title h2 { margin: 0; color: #4c2d15; font-size: 4.5cqw; white-space: nowrap; }
.home-benefit-title h2 > span { width: 6cqw; height: 6cqw; display: inline-grid; place-items: center; border-radius: 50%; color: #fff7df; background: linear-gradient(145deg,#dfab4e,#bd7515); font-size: 3.25cqw; vertical-align: -.75cqw; }
.home-benefit-crown svg { width: 4.2cqw; height: 4.2cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-plate-binding { height: 7.7cqw; display: flex; align-items: center; overflow: hidden; border-radius: 2.5cqw; box-shadow: 0 .75cqw 2cqw rgba(161,103,22,.12); }
.home-plate-binding span { height: 7.7cqw; display: grid; place-items: center; padding: 0 2.5cqw; color: #754307; background: #fff; font-size: 2.75cqw; }
.home-plate-binding b { height: 7.7cqw; display: grid; place-items: center; padding: 0 2.5cqw; border: 1px solid #dda84d; border-radius: 2cqw; color: #7c4809; background: #ffe2ad; font-size: 3.25cqw; letter-spacing: .1cqw; }
.home-benefit-grid { height: calc(100% - 9cqw); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4,minmax(0,1fr)); column-gap: 3.5cqw; }
.home-benefit-item { min-width: 0; min-height: 0; display: flex; align-items: center; gap: 1.75cqw; border-bottom: 1px solid rgba(168,128,78,.14); color: #273b39; font-size: 2.5cqw; line-height: 1.25; }
.home-benefit-icon { width: 5.5cqw; height: 5.5cqw; flex: 0 0 5.5cqw; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#32ba90,#058567); font-size: 2.5cqw; font-weight: 900; }
.home-benefit-icon svg { width: 3.55cqw; height: 3.55cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-benefit-item > span:last-child { min-width: 0; }

@media (max-width: 390px) {
  .home-hero-copy { padding-left: 28px; }
  .home-hero-copy h2 { font-size: 21px; }
  .home-service-card { padding-left: 8px; padding-right: 8px; }
  .home-service-card h3 { font-size: 15px; }
  .home-nav-button { min-width: 99px; font-size: 13px; }
  .home-plate-binding span { display: none; }
}

/* benefits page source-matched refinement */
.benefits-page .app-shell {
  container-type: inline-size;
  padding: 0 clamp(11px, 3vw, 14px) clamp(48px, 12vw, 58px);
  background:
    radial-gradient(circle at 100% 0, rgba(116,225,211,.32), transparent 28%),
    linear-gradient(180deg,#f0fbf8 0,#f8fcfb 62%,#f2f9f7 100%);
}
.benefits-page .app-shell::before { display: none; }
.benefits-header { height: 10.5cqw; display: grid; place-items: center; }
.benefits-header h1 { margin: 0; color: #083f3c; font-size: 5.3cqw; line-height: 1; font-weight: 900; letter-spacing: .45cqw; }
.benefits-main-hero { height: 51.4cqw; overflow: hidden; border: 2px solid rgba(255,255,255,.94); border-radius: 3.8cqw; box-shadow: 0 1.8cqw 4cqw rgba(20,98,88,.13); }
.benefits-main-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg,rgba(224,249,247,.62),rgba(222,247,247,.12) 47%,transparent 67%); pointer-events: none; }
.benefits-hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.benefits-hero-copy { position: relative; z-index: 3; padding: 6.3cqw 0 0 6.5cqw; color: #075b57; }
.benefits-hero-copy h2 { margin: 0; font-size: 7.1cqw; line-height: 1; font-weight: 900; letter-spacing: -.25cqw; white-space: nowrap; text-shadow: 0 1px 0 rgba(255,255,255,.85); }
.benefits-hero-copy p { display: inline-flex; margin: 2.3cqw 0 0; padding: 1.1cqw 2cqw; border-radius: 999px; color: #fff; background: rgba(0,123,106,.92); font-size: 2.7cqw; line-height: 1; font-weight: 700; }
.benefits-shield-label { position: absolute; z-index: 3; left: 71.7%; top: 19.8cqw; width: 12cqw; transform: translateX(-50%); color: #ffeab0; font-size: 5cqw; line-height: 1; font-weight: 900; text-align: center; text-shadow: 0 .5cqw .6cqw rgba(0,58,58,.58); }
.benefits-plate-card { position: absolute; z-index: 3; left: 5.5cqw; bottom: 5.2cqw; width: 37.5cqw; height: 22cqw; padding: 2.1cqw 3.2cqw; border: .35cqw solid rgba(7,123,107,.55); border-radius: 2.8cqw; color: #164c48; background: rgba(249,255,254,.89); box-shadow: inset 0 0 0 .8cqw rgba(255,255,255,.6), 0 1cqw 2cqw rgba(17,87,79,.12); backdrop-filter: blur(4px); }
.benefits-plate-card > span { display: block; font-size: 3cqw; }
.benefits-plate-card > strong { display: block; margin-top: 1.4cqw; font-size: 4.9cqw; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.benefits-plate-card > i { position: absolute; left: 3.2cqw; right: 3.2cqw; bottom: 1.8cqw; display: flex; align-items: center; gap: 1.4cqw; padding-top: 1.4cqw; border-top: 1px solid rgba(29,113,101,.18); font-size: 2.5cqw; font-style: normal; white-space: nowrap; }
.benefits-plate-card svg { width: 4cqw; height: 4cqw; fill: none; stroke: #078a70; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.benefits-content-card { height: 51.8cqw; margin-top: 2.7cqw; padding: 2.5cqw 3.2cqw 2.2cqw; border-radius: 3.8cqw; }
.benefits-card-title { height: 7.8cqw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2.2cqw; }
.benefits-card-title > span { height: 1px; background: linear-gradient(90deg,transparent,#079b73); }
.benefits-card-title > span:last-child { background: linear-gradient(90deg,#079b73,transparent); }
.benefits-card-title h2 { display: flex; align-items: center; gap: 1.4cqw; margin: 0; color: #123f3b; font-size: 4.3cqw; white-space: nowrap; }
.benefits-card-title h2 svg { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: #079b73; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.benefits-list { display: grid; gap: .65cqw; }
.benefits-row { min-height: 7.75cqw; display: grid; grid-template-columns: 7cqw 1fr 4cqw; align-items: center; gap: 1.6cqw; padding: 0 2.2cqw 0 0; border: 1px solid rgba(16,117,99,.06); border-radius: 2.1cqw; background: rgba(255,255,255,.9); box-shadow: 0 .8cqw 1.8cqw rgba(20,92,83,.06); }
.benefits-row > span:nth-child(2) { color: #263d3b; font-size: 2.85cqw; line-height: 1.25; }
.benefits-row strong { color: #ed7410; font-size: 3.2cqw; }
.benefits-row-icon { width: 7cqw; height: 7cqw; display: grid; place-items: center; transform: translateX(-.4cqw); border-radius: 50%; color: #fff; background: linear-gradient(145deg,#31ba91,#018569); box-shadow: inset 0 1px 1px rgba(255,255,255,.42); }
.benefits-row-icon svg { width: 4.5cqw; height: 4.5cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.benefits-row-car-icon svg { transform: translateY(-.7cqw); }
.benefits-row > i { width: 2cqw; height: 2cqw; justify-self: end; border-top: .45cqw solid #71807e; border-right: .45cqw solid #71807e; transform: rotate(45deg); }

.benefits-usage { height: 29cqw; margin-top: 2cqw; padding: 1.5cqw 4cqw 2cqw; border-radius: 3.8cqw; }
.benefits-usage-title { height: 6.8cqw; }
.benefits-steps { display: grid; grid-template-columns: 1fr 4.8cqw 1fr 4.8cqw 1fr; align-items: center; }
.benefits-step { min-width: 0; text-align: center; }
.benefits-step > span { width: 13.5cqw; height: 13.5cqw; display: grid; place-items: center; margin: 0 auto; border-radius: 50%; color: #078f72; background: radial-gradient(circle,#f8fffd 28%,#e7f6f1 72%); }
.benefits-step svg { width: 9cqw; height: 9cqw; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.benefits-step-repair svg { width: 8.6cqw; height: 8.6cqw; stroke-width: 2; }
.benefits-step p { display: flex; justify-content: center; align-items: center; gap: 1.2cqw; margin: 1cqw 0 0; color: #243a38; font-size: 2.75cqw; white-space: nowrap; }
.benefits-step p b { width: 3.4cqw; height: 3.4cqw; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #079b73; font-size: 2.2cqw; }
.benefits-step-arrow { position: relative; height: 2px; background: linear-gradient(90deg,transparent,#8bdac6); }
.benefits-step-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: 2.6cqw; height: 2.6cqw; border-top: .8cqw solid #8bdac6; border-right: .8cqw solid #8bdac6; transform: translateY(-50%) rotate(45deg); }

.benefits-hotline { height: 25.3cqw; margin-top: 2cqw; overflow: hidden; padding: 2.8cqw 3.5cqw; border-radius: 3.8cqw; background: linear-gradient(145deg,#dff5fc,#eaf9f5); }
.benefits-hotline::before { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(90deg,rgba(148,207,218,.25),rgba(255,255,255,.05)); clip-path: polygon(0 65%,8% 42%,15% 55%,21% 22%,28% 50%,35% 28%,42% 58%,50% 20%,57% 46%,66% 25%,73% 54%,82% 18%,89% 47%,100% 26%,100% 100%,0 100%); }
.benefits-hotline-copy { position: relative; z-index: 3; display: flex; align-items: center; gap: 2.8cqw; }
.benefits-24 { width: 10.2cqw; height: 10.2cqw; display: grid; place-items: center; border: 1.2cqw solid #0b9b78; border-right-color: transparent; border-radius: 50%; color: #078c70; font-size: 4cqw; font-weight: 900; }
.benefits-hotline-copy h2 { margin: 0; color: #07524e; font-size: 4.8cqw; line-height: 1; }
.benefits-hotline-copy p { margin: 1.2cqw 0 0; color: #345b57; font-size: 2.8cqw; }
.benefits-call-button { position: absolute; z-index: 4; left: 3.5cqw; bottom: 2.1cqw; width: 36cqw; height: 7.5cqw; display: flex; align-items: center; justify-content: center; gap: 2cqw; border: 0; border-radius: 999px; color: #fff; background: linear-gradient(100deg,#20b88e,#008b6a); box-shadow: 0 1.2cqw 2.2cqw rgba(0,137,103,.2); font-size: 3.8cqw; font-weight: 900; }
.benefits-call-button svg { width: 4.5cqw; height: 4.5cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.benefits-hotline > img { position: absolute; z-index: 2; right: 1.5cqw; bottom: -.8cqw; width: 49cqw; height: 22cqw; object-fit: contain; }

@media (max-width:390px) {
  .benefits-hero-copy h2 { font-size: 6.7cqw; }
  .benefits-hero-copy p { font-size: 2.45cqw; }
  .benefits-row > span:nth-child(2) { font-size: 2.45cqw; }
  .benefits-step p { font-size: 2.45cqw; }
}

/* profile page source-aligned reconstruction */
.profile-page .app-shell {
  container-type: inline-size;
  padding: 0 3.1cqw 14cqw;
  background:
    radial-gradient(circle at 100% 0, rgba(128,226,226,.35), transparent 26%),
    linear-gradient(180deg,#f0fbf8 0,#f8fcfb 58%,#f3f9f7 100%);
}
.profile-page .app-shell::before { display: none; }
.profile-page svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-topbar { position: relative; height: 13cqw; display: grid; place-items: center; }
.profile-topbar h1 { margin: 0; color: #080d0c; font-size: 4.9cqw; line-height: 1; font-weight: 900; letter-spacing: .35cqw; }
.profile-mini-program { position: absolute; right: .3cqw; top: 2.3cqw; width: 20cqw; height: 7cqw; display: grid; grid-template-columns: 1fr 1px 1fr; align-items: center; justify-items: center; padding: 0 1.5cqw; border: 1px solid rgba(21,73,69,.08); border-radius: 999px; background: rgba(255,255,255,.78); box-shadow: 0 .5cqw 1.3cqw rgba(28,100,92,.05); }
.profile-mini-program span { transform: translateY(-.6cqw); color: #030605; font-size: 4.2cqw; font-weight: 900; letter-spacing: .15cqw; }
.profile-mini-program i { width: 1px; height: 4.2cqw; background: rgba(35,70,67,.12); }
.profile-mini-program b { width: 4.8cqw; height: 4.8cqw; border: .85cqw solid #050807; border-radius: 50%; box-shadow: inset 0 0 0 .7cqw #fff, inset 0 0 0 1.3cqw #050807; }

.profile-identity-card { height: 22cqw; overflow: hidden; border-radius: 3.8cqw; background: linear-gradient(110deg,rgba(248,255,252,.95),rgba(218,249,244,.86)); }
.profile-avatar { position: absolute; z-index: 3; left: 5cqw; top: 3.5cqw; width: 13.5cqw; height: 13.5cqw; display: grid; place-items: center; overflow: hidden; border: .9cqw solid rgba(255,255,255,.95); border-radius: 50%; background: #eafaf7; box-shadow: 0 1cqw 2cqw rgba(25,109,97,.12); }
.profile-avatar img { width: 116%; height: 116%; object-fit: contain; }
.profile-identity-copy { position: absolute; z-index: 4; left: 21.5cqw; top: 5cqw; }
.profile-name-row { display: flex; align-items: center; gap: 2cqw; white-space: nowrap; }
.profile-name-row h2 { margin: 0; color: #090d0c; font-size: 5cqw; line-height: 1; font-weight: 900; }
.profile-name-row span { display: inline-flex; align-items: center; gap: .8cqw; padding: .85cqw 1.8cqw; border-radius: 999px; color: #9d5f11; background: #fff0d4; font-size: 2.8cqw; }
.profile-name-row span svg { width: 4cqw; height: 4cqw; color: #d88b14; }
.profile-identity-copy p { margin: 2.6cqw 0 0; color: #324946; font-size: 3cqw; }
.profile-identity-scene { position: absolute; z-index: 2; right: -1.2cqw; bottom: -.2cqw; width: 49cqw; height: 21.8cqw; object-fit: contain; object-position: right bottom; }

.profile-rights-card { height: 35.2cqw; display: grid; grid-template-columns: 40% 60%; margin-top: 2.5cqw; overflow: hidden; border-radius: 3.8cqw; }
.profile-plate-summary { position: relative; padding: 4.3cqw 3.5cqw; border-right: 1px solid rgba(31,124,106,.08); background: radial-gradient(circle at 25% 60%,rgba(185,241,224,.3),transparent 60%); }
.profile-plate-summary h2 { margin: 0; color: #07835f; font-size: 3.7cqw; line-height: 1.2; white-space: nowrap; }
.profile-plate-summary strong { display: block; width: max-content; margin-top: 4.2cqw; padding: 1.7cqw 2.2cqw; border-radius: 1.8cqw; color: #07835f; background: rgba(231,249,241,.75); box-shadow: 0 1cqw 2.5cqw rgba(5,132,96,.08); font-size: 6cqw; line-height: 1; letter-spacing: .2cqw; white-space: nowrap; }
.profile-plate-summary p { display: flex; align-items: center; gap: 1.6cqw; margin: 4.8cqw 0 0; color: #697673; font-size: 2.7cqw; white-space: nowrap; }
.profile-plate-summary p svg { width: 4.3cqw; height: 4.3cqw; color: #08936c; }
.profile-rights-list { display: grid; align-content: center; padding: 2.3cqw 2.7cqw; }
.profile-rights-list > div { min-height: 5.8cqw; display: grid; grid-template-columns: 5cqw 1fr; align-items: center; gap: 1.8cqw; }
.profile-rights-list span { width: 5cqw; height: 5cqw; display: grid; place-items: center; color: #0a956c; }
.profile-rights-list svg { width: 4.5cqw; height: 4.5cqw; }
.profile-rights-list p { margin: 0; color: #1d2b2a; font-size: 2.65cqw; line-height: 1.2; }

.profile-settings-card { height: 45.5cqw; margin-top: 2.5cqw; overflow: hidden; border-radius: 3.8cqw; }
.profile-setting-list { height: 29cqw; padding: .4cqw 2.6cqw 0; }
.profile-setting-list > button, .profile-setting-list > a { width: 100%; height: 7.1cqw; display: grid; grid-template-columns: 7cqw 1fr 3cqw; align-items: center; gap: 1.5cqw; padding: 0 1cqw; border: 0; border-bottom: 1px solid rgba(28,84,77,.08); background: transparent; text-align: left; cursor: pointer; }
.profile-setting-list > :last-child { border-bottom: 0; }
.profile-setting-list b { font-size: 3.2cqw; font-weight: 500; }
.profile-setting-icon { width: 5.3cqw; height: 5.3cqw; display: grid; place-items: center; border-radius: 1.2cqw; color: #fff; }
.profile-setting-icon.cyan { background: linear-gradient(145deg,#2bd7ce,#00a5a0); }
.profile-setting-icon.blue { background: linear-gradient(145deg,#70c5ff,#3c80dc); }
.profile-setting-icon.green { background: linear-gradient(145deg,#25b98c,#008a66); }
.profile-setting-icon.orange { background: linear-gradient(145deg,#ffc44d,#ef8612); }
.profile-setting-icon svg { width: 4.1cqw; height: 4.1cqw; }
.profile-setting-list > button > i, .profile-setting-list > a > i, .profile-chevron, .profile-tools-grid a > i, .profile-section-heading a > i { width: 1.7cqw; height: 1.7cqw; justify-self: end; border-top: .35cqw solid #7f8a88; border-right: .35cqw solid #7f8a88; transform: rotate(45deg); }
.profile-vehicle-row { height: 16.5cqw; display: grid; grid-template-columns: 26cqw 1fr auto 3cqw; align-items: center; gap: 2cqw; padding: 0 2.3cqw; background: linear-gradient(90deg,#f2f7f7,#f8fbfb); }
.profile-vehicle-visual { position: relative; width: 26cqw; height: 13.5cqw; overflow: hidden; }
.profile-vehicle-visual img { position: absolute; left: -1.5cqw; top: -2.6cqw; width: 29cqw; height: 19.3cqw; max-width: none; object-fit: contain; }
.profile-vehicle-copy { min-width: 0; }
.profile-vehicle-copy strong { display: block; overflow: hidden; color: #182322; font-size: 2.8cqw; text-overflow: ellipsis; white-space: nowrap; }
.profile-vehicle-copy small { display: flex; align-items: center; gap: 2cqw; margin-top: 2cqw; color: #465553; font-size: 2.55cqw; white-space: nowrap; }
.profile-vehicle-copy em { padding: .6cqw 1.2cqw; border-radius: 1cqw; color: #278360; background: #ddf5e7; font-style: normal; }
.profile-vehicle-review { display: flex; align-items: center; gap: 1.5cqw; color: #677371; font-size: 2.25cqw; white-space: nowrap; }
.profile-vehicle-review u { width: 4cqw; height: 4cqw; display: grid; place-items: center; border: .3cqw solid #0c8b6b; border-radius: 50%; color: #0c8b6b; text-decoration: none; font-family: Georgia,serif; }

.profile-plans-section { margin-top: 2.6cqw; }
.profile-section-heading { height: 7cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 3.4cqw; }
.profile-section-heading h2 { margin: 0; color: #121a19; font-size: 4cqw; }
.profile-section-heading a { display: flex; align-items: center; gap: 1.2cqw; color: #6d7977; font-size: 2.6cqw; }
.profile-section-heading a > i { justify-self: auto; }
.profile-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5cqw; padding: 0 1.1cqw; }
.profile-plan { position: relative; height: 19.7cqw; min-height: 0; overflow: hidden; padding: 2.2cqw 2.4cqw; border: 1px solid rgba(27,101,91,.08); border-radius: 2.4cqw; background: rgba(250,253,253,.94); box-shadow: 0 1cqw 2.4cqw rgba(35,93,86,.06); text-align: left; }
.profile-plan.selected { border: .35cqw solid #efa11b; background: #fffbf4; }
.profile-plan h3 { position: relative; z-index: 2; margin: 0; color: #141d1c; font-size: 3cqw; font-weight: 500; }
.profile-plan .price { position: relative; z-index: 2; margin: 2.3cqw 0 0; color: #07835f; font-size: 5.5cqw; line-height: 1; font-weight: 800; }
.profile-plan.selected .price { color: #07835f; }
.profile-plan .price small { margin-left: .5cqw; color: #1d2928; font-size: 2.6cqw; font-weight: 500; }
.profile-plan > span { position: relative; z-index: 2; display: block; margin-top: 1.7cqw; color: #6c7775; font-size: 2.3cqw; }
.profile-plan > svg { position: absolute; right: .5cqw; bottom: .4cqw; width: 13cqw; height: 13cqw; color: rgba(116,220,189,.25); stroke-width: 1.8; }
.profile-plan.selected > svg { color: rgba(72,187,143,.56); }
.profile-recommend { position: absolute; z-index: 3; right: 0; top: 0; padding: .7cqw 1.8cqw; border-radius: 0 2cqw 0 2cqw; color: #fff; background: #f39a0b; font-size: 2.4cqw; }

.profile-tools-card { height: 21.6cqw; margin-top: 1.9cqw; padding: 1.2cqw 2.6cqw; border-radius: 3.5cqw; }
.profile-tools-grid { height: 100%; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,1fr); }
.profile-tools-grid a { min-width: 0; display: grid; grid-template-columns: 5cqw 1fr 2cqw; align-items: center; gap: 1cqw; padding: 0 .7cqw; color: #202a29; font-size: 2.7cqw; white-space: nowrap; }
.profile-tools-grid a > svg { width: 5cqw; height: 5cqw; color: #078b65; stroke-width: 1.8; }
.profile-tools-grid a > i { width: 1.3cqw; height: 1.3cqw; border-width: .3cqw; }

@media (max-width:390px) {
  .profile-rights-list p { font-size: 2.35cqw; }
  .profile-vehicle-copy strong { font-size: 2.55cqw; }
  .profile-vehicle-review { font-size: 2.05cqw; }
  .profile-tools-grid a { font-size: 2.35cqw; }
}

/* profile page 鈥?verified reference reconstruction */
.profile-reference-page .app-shell { container-type: inline-size; padding: 0 3.2cqw 10cqw; background: radial-gradient(circle at 100% 0,rgba(115,222,218,.32),transparent 30%),linear-gradient(180deg,#f1fbf9,#f8fbfb 57%,#f3f9f7); }
.profile-reference-page .app-shell::before { display:none; }
.profile-ref-header { height: 12.5cqw; display:grid; place-items:center; }
.profile-ref-header h1 { margin:0; color:#083f3c; font-size:5.2cqw; line-height:1; letter-spacing:.2cqw; }
.profile-reference-page .card { border-color:rgba(87,156,151,.17); border-radius:3.9cqw; box-shadow:0 1.3cqw 3.1cqw rgba(30,94,88,.10); }

.profile-ref-hero { height:35.8cqw; overflow:hidden; background:linear-gradient(100deg,#effdf9 0,#e8faf6 43%,#bfe9f8 100%); }
.profile-ref-hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(241,253,250,.99) 0,rgba(235,252,248,.94) 34%,rgba(235,252,248,.45) 48%,transparent 66%); }
.profile-ref-hero-scene { position:absolute; z-index:0; top:0; bottom:0; left:16%; width:88%; height:100%; object-fit:cover; object-position:51% 52%; }
.profile-ref-city,.profile-ref-shield,.profile-ref-sedan { display:none; }
.profile-ref-avatar { position:absolute; z-index:4; left:3.7cqw; top:8cqw; width:18.5cqw; height:18.5cqw; overflow:hidden; border:.85cqw solid rgba(255,255,255,.92); border-radius:50%; background:#f2fffc; box-shadow:0 1cqw 2cqw rgba(25,102,93,.15); }
.profile-ref-avatar svg { width:100%; height:100%; }
.profile-ref-copy { position:absolute; z-index:4; left:25.5cqw; top:10cqw; }
.profile-ref-copy h2 { margin:0; font-size:5.5cqw; line-height:1; color:#073d3c; }
.profile-ref-copy span { display:inline-flex; align-items:center; gap:1.2cqw; margin-top:2.4cqw; padding:1cqw 2.4cqw; border:1px solid #d6a14a; border-radius:999px; color:#8a5718; background:#fff3d9; font-size:2.9cqw; }
.profile-ref-copy span b { color:#b87416; font-size:3.5cqw; }
.profile-ref-copy p { margin:2.1cqw 0 0; color:#3a5c59; font-size:2.8cqw; white-space:nowrap; }

.profile-ref-member { height:35cqw; margin-top:2.6cqw; overflow:hidden; background:rgba(255,255,255,.94); }
.profile-ref-member > h2 { position:absolute; left:3cqw; top:2.6cqw; display:flex; align-items:center; gap:2cqw; margin:0; color:#123f3e; font-size:4.7cqw; }
.profile-ref-member > h2 span { width:5cqw; height:4cqw; display:grid; place-items:center; color:#0d8d72; }
.profile-ref-member > h2 svg { width:5cqw; height:4cqw; fill:none; stroke:currentColor; stroke-width:1.8; }
.profile-ref-green-card { position:absolute; left:6.5cqw; bottom:2.7cqw; width:34cqw; height:21.5cqw; overflow:hidden; border:1px solid #177d63; border-radius:2.5cqw; transform:rotate(-8deg); color:#fff5c9; background:linear-gradient(145deg,#67c5a3,#078766 70%,#047253); box-shadow:0 1.4cqw 2.1cqw rgba(5,102,77,.2); }
.profile-ref-green-card::before { content:""; position:absolute; right:-4cqw; bottom:-4cqw; width:15cqw; height:15cqw; border:1px solid rgba(255,255,255,.16); border-radius:50%; }
.profile-ref-green-card small { position:absolute; left:2.2cqw; top:2.1cqw; font-size:2.4cqw; font-weight:800; }
.profile-ref-green-card strong { position:absolute; left:4.2cqw; bottom:4.5cqw; font-size:3.2cqw; }
.profile-ref-green-card svg { position:absolute; right:1.5cqw; bottom:2.1cqw; width:11cqw; height:10cqw; }
.profile-ref-member::after { content:""; position:absolute; left:42.5%; top:8.2cqw; bottom:3cqw; width:1px; background:rgba(37,101,93,.12); }
.profile-ref-member-copy { position:absolute; left:48.5%; top:8.2cqw; }
.profile-ref-member-copy p { margin:0; color:#385351; font-size:3.1cqw; }
.profile-ref-member-copy strong { display:block; margin-top:2.5cqw; padding:2cqw 3cqw; border:1px solid #73c5b0; border-radius:2cqw; color:#073f3d; background:#f1fcf9; font-size:6cqw; letter-spacing:.25cqw; white-space:nowrap; }
.profile-ref-member-copy span { display:block; margin-top:2.3cqw; color:#405654; font-size:2.8cqw; }

.profile-ref-rescue { height:36.6cqw; display:block; margin-top:2.6cqw; overflow:hidden; background:radial-gradient(circle at 86% 23%,rgba(255,255,255,.9),transparent 19%),linear-gradient(115deg,#effdff,#cceeff 72%,#e8f9ff); }
.profile-ref-rescue > div { position:absolute; z-index:3; left:5.2cqw; top:5cqw; }
.profile-ref-rescue h2 { margin:0; color:#064a48; font-size:5.7cqw; line-height:1; }
.profile-ref-rescue p { margin:2.2cqw 0 0; color:#3d5b59; font-size:3cqw; line-height:1.5; }
.profile-ref-rescue div > span { width:26.5cqw; height:7.2cqw; display:flex; align-items:center; justify-content:center; gap:2.2cqw; margin-top:2.8cqw; border-radius:999px; color:#fff; background:linear-gradient(110deg,#20b98d,#00836a); box-shadow:0 1.3cqw 2cqw rgba(0,127,96,.2); font-size:3.3cqw; font-weight:800; }
.profile-ref-rescue div > span b { font-size:4.8cqw; transform:rotate(-45deg); }
.profile-ref-rescue > img { position:absolute; z-index:2; right:-2.5cqw; bottom:-3.5cqw; width:61cqw; height:37cqw; object-fit:contain; }
.profile-ref-benefits { height:34cqw; margin-top:2.6cqw; overflow:hidden; border-color:rgba(223,167,73,.45)!important; background:linear-gradient(180deg,#fff6e9 0,#fff 35%); }
.profile-ref-benefits > h2 { height:7.8cqw; display:flex; align-items:center; gap:2cqw; margin:0; padding:0 3cqw; color:#563718; font-size:4.8cqw; }
.profile-ref-benefits > h2 span { width:5.5cqw; height:5.5cqw; display:grid; place-items:center; border-radius:50%; color:#fff5da; background:linear-gradient(145deg,#e4ad4d,#bd7518); font-size:3.5cqw; }
.profile-ref-benefit-grid { height:26.2cqw; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); grid-auto-flow:column; padding:1cqw 3.2cqw 1.2cqw; border-radius:3cqw 3cqw 0 0; background:#fff; }
.profile-ref-benefit-grid > div { min-width:0; display:grid; grid-template-columns:6.5cqw 1fr; align-items:center; border-bottom:1px solid rgba(141,108,67,.13); }
.profile-ref-benefit-grid > div:nth-child(3),.profile-ref-benefit-grid > div:nth-child(5) { border-bottom:0; }
.profile-ref-benefit-grid > div:nth-child(n+4) { padding-left:4cqw; border-left:1px solid rgba(49,105,97,.1); }
.profile-ref-benefit-grid i { width:5.4cqw; height:5.4cqw; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#39bb92,#078669); font-size:2.7cqw; font-style:normal; font-weight:800; }
.profile-ref-benefit-grid i svg { width:3.4cqw; height:3.4cqw; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.profile-ref-benefit-grid p { margin:0; color:#314441; font-size:2.8cqw; line-height:1.25; }

.profile-ref-maintenance { height:14.8cqw; display:block; margin-top:2.6cqw; overflow:hidden; background:linear-gradient(95deg,#effbf8,#f8fffd); }
.profile-ref-maintenance > img { position:absolute; left:2.5cqw; bottom:-1.8cqw; width:31cqw; height:15cqw; object-fit:contain; }
.profile-ref-maintenance > div { position:absolute; left:38cqw; top:3.4cqw; }
.profile-ref-maintenance h2 { margin:0; color:#0b4644; font-size:4cqw; line-height:1; }
.profile-ref-maintenance p { margin:1.7cqw 0 0; color:#45605d; font-size:2.7cqw; }
.profile-ref-maintenance > span { position:absolute; right:4.5cqw; top:3.5cqw; width:6.7cqw; height:6.7cqw; display:grid; place-items:center; border:1px solid #078a6c; border-radius:50%; color:#078a6c; }
.profile-ref-maintenance > span svg { display:block; width:3.2cqw; height:3.2cqw; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

/* Three-page shared dock 鈥?benefits page is the visual baseline. */
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .bottom-nav {
  left: max(0px, calc(50vw - 240px));
  right: auto;
  height: min(11.75vw,56.4px);
  grid-template-columns: repeat(3,1fr);
  margin-inline: 0;
  padding: min(.66vw,3.2px) min(8.93vw,42.9px) max(min(.66vw,3.2px),env(safe-area-inset-bottom));
  transform: none;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item {
  grid-template-rows: min(6vw,28.8px) min(3.2vw,15.4px);
  align-content: center;
  gap: 0;
  color: #a9aeac;
  font-size: min(2.63vw,12.6px);
  font-weight: 400;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item .nav-icon {
  width: min(6vw,28.8px);
  height: min(6vw,28.8px);
  font-size: 0;
  filter: none;
  opacity: 1;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item > span:last-child {
  line-height: 1.2;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item.active {
  color: var(--green);
  font-weight: 700;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item.active .nav-icon {
  transform: none;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item.active[data-route="home"] .nav-icon svg,
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item.active[data-route="profile"] .nav-icon svg {
  fill: currentColor;
  stroke: currentColor;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item.active .nav-shield {
  fill: currentColor;
  stroke: currentColor;
}
:is(.home-page,.benefits-page,.profile-page,.profile-reference-page,.rescue-page,.navigation-page,.membership-page) .nav-item.active .nav-crown {
  fill: none;
  stroke: #fff;
  stroke-width: 1.7;
}

/* Membership activation page — reconstructed from its dedicated source. */
.membership-page .app-shell {
  container-type:inline-size;
  padding:0 3cqw 17cqw;
  background:
    radial-gradient(circle at 100% 0,rgba(125,229,211,.36),transparent 28%),
    linear-gradient(180deg,#f4fbfa 0,#fbfdfd 78%,#f4f8f7 100%);
}
.membership-page .app-shell::before { display:none; }
.membership-page svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.membership-page .card { border-color:rgba(47,121,112,.1); border-radius:3.7cqw; box-shadow:0 1.4cqw 3cqw rgba(27,84,77,.1); }
.membership-header { position:relative; height:12.4cqw; display:grid; place-items:center; }
.membership-header h1 { margin:0; color:#074b47; font-size:5.35cqw; line-height:1; font-weight:900; letter-spacing:.3cqw; }
.membership-back { position:absolute; left:.5cqw; top:3.1cqw; width:6cqw; height:6cqw; display:grid; place-items:center; padding:0; border:0; color:#153c41; background:transparent; cursor:pointer; }
.membership-back svg { width:5cqw; height:5cqw; stroke-width:2.7; }

.membership-hero { height:36.8cqw; overflow:hidden; border:1.1cqw solid rgba(255,255,255,.96)!important; background:linear-gradient(110deg,#fffdf8 0,#fff9ee 50%,#fff4da 100%); }
.membership-hero-copy { position:absolute; z-index:4; left:5.2cqw; top:8.1cqw; }
.membership-hero-copy h2 { margin:0; color:#086157; font-size:6.2cqw; line-height:1.24; font-weight:950; letter-spacing:-.15cqw; }
.membership-hero-copy p { margin:4cqw 0 0; color:#667174; font-size:3.1cqw; letter-spacing:.7cqw; }
.membership-gold-visual { position:absolute; z-index:2; right:2cqw; top:3.3cqw; width:46cqw; height:31.5cqw; }
.membership-gold-card { position:absolute; z-index:4; right:2.6cqw; top:1.4cqw; width:33cqw; height:24cqw; padding:2.4cqw 3.1cqw; border:1px solid rgba(227,150,26,.6); border-radius:2.2cqw; transform:rotate(1.5deg); color:#fff; background:linear-gradient(145deg,#ffc35a,#d68409); box-shadow:0 1.1cqw 2.4cqw rgba(176,105,8,.28),inset 0 .45cqw 1.3cqw rgba(255,255,255,.28); }
.membership-gold-card::after { content:""; position:absolute; inset:1cqw; border:1px solid rgba(255,235,181,.3); border-radius:1.6cqw; }
.gold-vib { position:relative; z-index:2; display:block; font-size:2.5cqw; font-style:italic; font-weight:900; }
.membership-gold-card strong { position:absolute; z-index:2; left:4.2cqw; top:9.5cqw; font-size:3.5cqw; letter-spacing:.2cqw; }
.gold-crown { position:absolute; z-index:2; right:3.4cqw; top:7.4cqw; color:#fff2bf; font-size:8.2cqw; line-height:1; text-shadow:0 .55cqw .45cqw rgba(122,67,2,.3); }
.membership-gold-card small { position:absolute; z-index:2; left:3cqw; bottom:2.2cqw; padding:.4cqw 1cqw; border:1px solid rgba(255,255,255,.24); font-size:1.7cqw; }
.membership-gold-card em { position:absolute; z-index:2; right:3cqw; bottom:2.1cqw; font-size:2cqw; font-style:normal; }
.membership-leaves { position:absolute; z-index:1; top:7cqw; width:16cqw; height:18cqw; opacity:.7; background:linear-gradient(120deg,transparent 44%,#efb038 45% 51%,transparent 52%); }
.membership-leaves::before,.membership-leaves::after { content:""; position:absolute; width:5.2cqw; height:2.4cqw; border-radius:100% 0 100% 0; transform:rotate(26deg); background:#efb038; box-shadow:3.8cqw 3.8cqw #e7a52d,6.9cqw 7cqw #e9ad3e; }
.leaves-left { left:0; transform:rotate(-12deg); }
.leaves-right { right:0; transform:scaleX(-1) rotate(-12deg); }
.membership-pedestal { position:absolute; z-index:3; right:0; bottom:0; width:42cqw; height:5.2cqw; border-radius:50%; border:1px solid rgba(228,169,71,.35); background:linear-gradient(180deg,#fff8e8,#f0c77e); box-shadow:0 1cqw 1.8cqw rgba(185,118,18,.14); }

.membership-rights { height:40.3cqw; margin-top:2.4cqw; padding:3.2cqw 3.6cqw; }
.membership-rights h2,.membership-plate h2,.membership-plans h2 { display:flex; align-items:center; gap:2cqw; margin:0; color:#07554f; font-size:4.25cqw; line-height:1; }
.membership-shield-icon { width:4.8cqw; height:5.2cqw; display:grid; place-items:center; clip-path:polygon(50% 0,93% 17%,84% 76%,50% 100%,16% 76%,7% 17%); color:#fff; background:#079678; font-size:2.7cqw; }
.membership-rights-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:9.2cqw; column-gap:5.2cqw; margin-top:3.2cqw; }
.membership-rights-grid::before { content:""; position:absolute; left:50%; top:1cqw; bottom:1cqw; width:1px; background:rgba(21,91,83,.1); }
.membership-right { display:grid; grid-template-columns:6.3cqw minmax(0,1fr); align-items:center; gap:1.7cqw; min-width:0; }
.membership-right-icon { position:relative; width:5.5cqw; height:5.5cqw; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#2ebb96,#00866a); box-shadow:inset 0 .45cqw .6cqw rgba(255,255,255,.34); font-size:2.9cqw; font-weight:800; }
.membership-right p { min-width:0; margin:0; color:#203235; font-size:2.78cqw; line-height:1.35; overflow-wrap:anywhere; }
.icon-clock::before { content:""; width:2.9cqw; height:2.9cqw; border:1px solid #fff; border-radius:50%; }
.icon-clock::after { content:""; position:absolute; left:2.7cqw; top:1.4cqw; width:1.3cqw; height:1.5cqw; border-left:1px solid #fff; border-bottom:1px solid #fff; }
.icon-car::before,.membership-car-icon::before { content:""; width:3.4cqw; height:1.8cqw; border:1px solid currentColor; border-radius:.8cqw .8cqw .4cqw .4cqw; box-shadow:-1.1cqw 1.8cqw 0 -1cqw currentColor,1.1cqw 1.8cqw 0 -1cqw currentColor; }
.icon-rise::before { content:"↗"; font-size:3.2cqw; }
.icon-tools::before { content:"×"; font-size:3.8cqw; transform:rotate(45deg); }

.membership-plate { height:24.2cqw; margin-top:2cqw; padding:3.7cqw 3.6cqw; }
.membership-car-icon { width:4.8cqw; height:4.8cqw; display:grid; place-items:center; color:#079678; }
.membership-plate-row { height:10.6cqw; display:grid; grid-template-columns:41% 59%; align-items:center; margin-top:2.8cqw; border:1px solid rgba(41,144,130,.2); border-radius:2cqw; background:linear-gradient(90deg,#effbf8,#f4faf9); }
.membership-plate-row strong { display:flex; align-items:center; justify-content:center; height:8.3cqw; margin-left:1.6cqw; border:1px solid rgba(19,134,120,.23); border-radius:1.1cqw; color:#07564f; font-size:4.3cqw; letter-spacing:.25cqw; }
.membership-plate-row span { padding-left:4.3cqw; color:#5e686a; font-size:3cqw; }

.membership-plans { height:32.9cqw; margin-top:2cqw; padding:3.5cqw 3.2cqw 2.3cqw; }
.membership-tag-icon { width:4.3cqw; height:4.3cqw; display:block; border-radius:.5cqw 1.7cqw 1.7cqw .5cqw; transform:rotate(-45deg); background:#079678; }
.membership-tag-icon::after { content:""; position:absolute; width:.8cqw; height:.8cqw; margin:1cqw 0 0 1cqw; border-radius:50%; background:#fff; }
.membership-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2cqw; margin-top:2.6cqw; }
.membership-plan { position:relative; width:100%; min-width:0; min-height:0; height:17.5cqw; padding:2cqw 1cqw; overflow:hidden; border:1px solid rgba(27,96,88,.11); border-radius:2.7cqw; color:#07544e; background:#fff; box-shadow:0 1cqw 2.3cqw rgba(30,82,75,.07); cursor:pointer; }
.membership-plan h3 { margin:0 0 1.2cqw; font-size:4cqw; }
.membership-plan .price { color:#e88900; font-size:5.4cqw; font-weight:800; line-height:1; }
.membership-plan .price small { margin-left:.4cqw; color:#26383b; font-size:2.6cqw; font-weight:500; }
.membership-plan.selected { border:.35cqw solid #f5a11b; background:linear-gradient(145deg,#fffdf8,#fff6e7); }
.membership-plan.selected .price { color:#e88900; }
.membership-plan .recommend { position:absolute; right:0; top:0; min-width:8.7cqw; padding:1cqw 1.3cqw; border-radius:0 0 0 2.2cqw; color:#fff; background:#ff8e13; font-size:2.5cqw; font-weight:800; }
.membership-open { width:calc(100% - 4cqw); height:11.6cqw; display:flex; align-items:center; justify-content:center; gap:3.4cqw; margin:1.7cqw auto 0; border:0; border-radius:999px; color:#fff; background:linear-gradient(100deg,#ffb633,#df7c00); box-shadow:0 1.4cqw 2.8cqw rgba(200,112,0,.24); font-size:4.6cqw; font-weight:900; cursor:pointer; }
.membership-open span { color:#fff1bd; font-size:5.8cqw; text-shadow:0 .5cqw .45cqw rgba(130,70,0,.25); }

@media (max-width:390px) {
  .membership-right p { font-size:2.6cqw; }
  .membership-plate-row span { font-size:2.75cqw; }
}

/* Rescue page 鈥?reconstructed against the dedicated 24-hour rescue reference. */
.rescue-page .app-shell {
  container-type: inline-size;
  padding: 0 3cqw 15cqw;
  background:
    radial-gradient(circle at 100% 0,rgba(116,224,211,.34),transparent 27%),
    linear-gradient(180deg,#f1fbf9 0,#f9fcfb 67%,#f2f8f6 100%);
}
.rescue-page .app-shell::before { display: none; }
.rescue-page svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.rescue-header { position:relative; z-index:2; height:12.8cqw; display:grid; place-items:center; }
.rescue-header h1 { margin:0; color:#083f3c; font-size:5.2cqw; line-height:1; font-weight:900; letter-spacing:.25cqw; }
.rescue-back { position:absolute; left:.5cqw; top:3.2cqw; width:6cqw; height:6cqw; display:grid; place-items:center; padding:0; border:0; color:#0a4845; background:transparent; cursor:pointer; }
.rescue-back svg { width:4.8cqw; height:4.8cqw; stroke-width:2.6; }

.rescue-page .card { border-color:rgba(62,142,133,.14); border-radius:3.8cqw; box-shadow:0 1.4cqw 3.3cqw rgba(24,87,80,.10); }
.rescue-hero { height:39.8cqw; overflow:hidden; border:2px solid rgba(255,255,255,.94); background:
    linear-gradient(90deg,rgba(225,253,248,.78),rgba(224,250,248,.13) 47%,rgba(255,255,255,0) 70%),
    url("../assets/rescue-road-city-bg.png") center 63% / cover no-repeat,
    linear-gradient(180deg,#7fd0f4 0,#d8f1ec 66%,#dbe7e0 100%); }
.rescue-hero::before { content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 88% 18%,rgba(255,255,255,.95) 0 5%,transparent 16%),
    linear-gradient(177deg,transparent 0 61%,rgba(58,127,111,.13) 61.3% 62%,rgba(255,255,255,.35) 62.4% 64%,rgba(42,92,86,.12) 64.5% 65.2%,transparent 65.5%); pointer-events:none; }
.rescue-hero-copy { position:absolute; z-index:4; left:6.2cqw; top:7cqw; color:#07534f; }
.rescue-hero-copy h2 { margin:0; font-size:7.2cqw; line-height:1; font-weight:950; letter-spacing:-.25cqw; }
.rescue-hero-copy p { margin:2.1cqw 0 0; padding:1cqw 2.4cqw; border-radius:999px; color:#fff; background:linear-gradient(90deg,#078d73,#006b61); box-shadow:0 .5cqw 1.3cqw rgba(0,107,86,.16); font-size:2.65cqw; font-weight:800; white-space:nowrap; }
.rescue-hero-truck { position:absolute; z-index:3; right:1.4cqw; bottom:1.7cqw; width:48cqw; height:28cqw; object-fit:contain; filter:drop-shadow(0 1.1cqw 1.3cqw rgba(13,71,65,.18)); }
.rescue-assurances { position:absolute; z-index:5; left:4.5cqw; bottom:3.5cqw; width:42cqw; display:grid; grid-template-columns:repeat(3,1fr); gap:.6cqw; }
.rescue-assurances div { min-width:0; display:grid; justify-items:center; gap:.3cqw; color:#087866; }
.rescue-assurances span { width:5.4cqw; height:5.4cqw; display:grid; place-items:center; }
.rescue-assurances svg { width:100%; height:100%; stroke-width:2.2; }
.rescue-assurances svg text { fill:currentColor; stroke:none; font-size:10px; font-weight:900; }
.rescue-assurances b { font-size:2cqw; font-weight:500; white-space:nowrap; }

.rescue-vehicle { height:31.8cqw; margin-top:3cqw; padding:3.4cqw 3.2cqw 2.6cqw; }
.rescue-vehicle-heading { height:6.8cqw; display:flex; align-items:flex-start; justify-content:space-between; }
.rescue-vehicle-heading h2 { margin:0; color:#102629; font-size:4.1cqw; line-height:1; }
.rescue-vehicle-heading > div { display:flex; align-items:center; gap:2.3cqw; margin-top:-.7cqw; color:#714014; font-size:2.7cqw; }
.rescue-vehicle-heading b { padding:1.4cqw 2.4cqw; border:1px solid #dfa74f; border-radius:1.9cqw; background:#ffe4b5; box-shadow:inset 0 .5cqw 1cqw rgba(184,112,16,.12); font-size:3cqw; letter-spacing:.15cqw; }
.rescue-vehicle-body { height:18.6cqw; display:grid; grid-template-columns:39% 61%; align-items:center; border:1px solid rgba(62,142,133,.11); border-radius:2.7cqw; background:linear-gradient(90deg,rgba(239,249,247,.3),rgba(255,255,255,.7)); }
.rescue-vehicle-body > img { width:35cqw; height:16cqw; margin-left:1.3cqw; object-fit:contain; opacity:.22; }
.rescue-vehicle-copy { padding-left:1.5cqw; }
.rescue-vehicle-copy > div { display:flex; align-items:center; gap:2.3cqw; }
.rescue-vehicle-copy strong { color:#092c2d; font-size:4.6cqw; line-height:1; letter-spacing:.1cqw; }
.rescue-vehicle-copy span { display:flex; align-items:center; gap:.7cqw; padding:.9cqw 1.6cqw; border-radius:999px; color:#088169; background:#e7f7f1; font-size:2.7cqw; white-space:nowrap; }
.rescue-vehicle-copy i { width:3.6cqw; height:3.6cqw; display:grid; place-items:center; clip-path:polygon(50% 0,92% 18%,83% 78%,50% 100%,17% 78%,8% 18%); color:#fff; background:#079672; font-style:normal; font-weight:900; }
.rescue-vehicle-copy p { margin:2.3cqw 0 0; color:#4d585b; font-size:2.8cqw; white-space:nowrap; }

.rescue-process { height:37.7cqw; margin-top:3cqw; padding:3.6cqw 3.3cqw 2.3cqw; }
.rescue-process h2 { margin:0 0 3.7cqw; color:#102629; font-size:4.1cqw; line-height:1; }
.rescue-process-grid { display:grid; grid-template-columns:1fr 7cqw 1fr 7cqw 1fr; align-items:center; }
.rescue-process-step { min-width:0; text-align:center; }
.rescue-process-icon { position:relative; width:12.8cqw; height:12.8cqw; display:grid; place-items:center; margin:0 auto 1.6cqw; border:1px solid rgba(17,150,119,.1); border-radius:50%; color:#078d6d; background:radial-gradient(circle,#f8fffd 18%,#e6f7f1 75%); }
.rescue-process-icon svg { width:9cqw; height:9cqw; stroke-width:2.3; }
.rescue-process-icon .rescue-process-tow { width:10.4cqw; height:10.4cqw; transform:translateY(.2cqw); stroke-width:2.15; }
.rescue-process-icon .rescue-process-crash { width:10.8cqw; height:10.8cqw; transform:translateY(.15cqw); }
.rescue-process-icon .rescue-process-phone { width:9.4cqw; height:9.4cqw; }
.rescue-process-icon .process-solid { fill:#078d6d; stroke:none; }
.rescue-process-icon .process-wheel { fill:#08765f; stroke:none; }
.rescue-process-icon .process-hub { fill:#eaf9f4; stroke:none; }
.rescue-process-tow .tow-solid { fill:#078d6d; stroke:none; }
.rescue-process-tow .tow-wheel { fill:#08765f; stroke:#08765f; stroke-width:1; }
.rescue-process-tow .tow-hub { fill:#eaf9f4; stroke:none; }
.rescue-process-icon em { position:absolute; z-index:2; left:-1.5cqw; top:-1.4cqw; width:4cqw; height:4cqw; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#23b58c,#008065); font-size:2.3cqw; font-style:normal; font-weight:900; }
.rescue-process-step h3 { margin:0; color:#102629; font-size:3cqw; }
.rescue-process-step p { margin:.9cqw 0 0; color:#65706f; font-size:2.25cqw; line-height:1.4; }
.rescue-process-arrow { position:relative; height:2px; background:linear-gradient(90deg,transparent,#8bdac6); }
.rescue-process-arrow::after { content:""; position:absolute; right:0; top:50%; width:2cqw; height:2cqw; border-top:.65cqw solid #79cbb6; border-right:.65cqw solid #79cbb6; transform:translateY(-50%) rotate(45deg); }

.rescue-hotline { height:18.6cqw; margin-top:3cqw; display:flex; align-items:center; justify-content:space-between; padding:3cqw 3.2cqw; }
.rescue-hotline-copy h2 { margin:0 0 1.6cqw; color:#075b57; font-size:3.9cqw; line-height:1; }
.rescue-hotline-copy > div { display:flex; align-items:center; gap:1.7cqw; }
.rescue-hotline-copy span { width:6.3cqw; height:6.3cqw; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,#2ab991,#008164); }
.rescue-hotline-copy svg { width:3.8cqw; height:3.8cqw; stroke-width:2.4; }
.rescue-hotline-copy strong { color:#08242c; font-size:5.2cqw; line-height:1; letter-spacing:.12cqw; }
.rescue-hotline > button { width:31.5cqw; height:9.6cqw; border:0; border-radius:999px; color:#fff; background:linear-gradient(100deg,#20b88e,#008b6a); box-shadow:0 1.2cqw 2.2cqw rgba(0,137,103,.2); font-size:4cqw; font-weight:900; cursor:pointer; }
.rescue-tip { height:6.5cqw; margin-top:2.3cqw; display:flex; align-items:center; gap:1.6cqw; padding:0 2.3cqw; border:1px solid rgba(48,179,146,.14); border-radius:2.6cqw; color:#536966; background:rgba(232,249,244,.72); font-size:2.45cqw; white-space:nowrap; }
.rescue-tip > span { width:3.7cqw; height:3.7cqw; display:grid; place-items:center; color:#149779; border-radius:50%; background:#e0f5ee; }
.rescue-tip svg { width:2.8cqw; height:2.8cqw; }

@media (max-width:390px) {
  .rescue-hero-copy p { font-size:2.5cqw; }
  .rescue-vehicle-copy p { font-size:2.6cqw; }
  .rescue-tip { font-size:2.25cqw; }
}

/* Store navigation page - reconstructed against its dedicated source. */
.navigation-page .app-shell {
  container-type:inline-size;
  padding:0 4cqw 14cqw;
  background:
    radial-gradient(circle at 100% 0,rgba(130,231,211,.38),transparent 28%),
    linear-gradient(180deg,#f4fbfa 0,#fbfdfd 75%,#f4f8f7 100%);
}
.navigation-page .app-shell::before { display:none; }
.navigation-page svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.navigation-page .card { border-color:rgba(70,132,124,.1); border-radius:4.4cqw; box-shadow:0 1.5cqw 3.4cqw rgba(28,83,76,.11); }
.navigation-header { position:relative; height:19.8cqw; display:grid; place-items:center; }
.navigation-header h1 { margin:0; color:#064a47; font-size:5.3cqw; line-height:1; font-weight:900; letter-spacing:.3cqw; }
.navigation-back { position:absolute; left:.6cqw; top:6.5cqw; width:6cqw; height:6cqw; display:grid; place-items:center; padding:0; border:0; color:#123e3c; background:transparent; cursor:pointer; }
.navigation-back svg { width:5cqw; height:5cqw; stroke-width:2.7; }

.navigation-map { height:71.8cqw; overflow:hidden; border:1.1cqw solid rgba(255,255,255,.95)!important; background:linear-gradient(135deg,#dbeaec,#e3f3ee 50%,#d2eee0); }
.navigation-map::before { content:""; position:absolute; inset:-5%; opacity:.68; background:
  linear-gradient(118deg,transparent 0 15%,rgba(255,255,255,.92) 15.3% 18%,transparent 18.3% 46%,rgba(255,255,255,.92) 46.3% 48.8%,transparent 49.1%),
  linear-gradient(8deg,transparent 0 34%,rgba(255,255,255,.96) 34.3% 37.1%,transparent 37.4% 63%,rgba(255,255,255,.86) 63.3% 65.3%,transparent 65.6%),
  repeating-linear-gradient(77deg,transparent 0 12cqw,rgba(255,255,255,.68) 12.3cqw 13.2cqw,transparent 13.5cqw 22cqw); }
.navigation-map-land { position:absolute; z-index:0; border-radius:45%; background:rgba(168,222,180,.35); filter:blur(.3px); }
.navigation-map-land.land-one { right:-6cqw; top:-7cqw; width:48cqw; height:36cqw; transform:rotate(-9deg); }
.navigation-map-land.land-two { left:6cqw; bottom:4cqw; width:36cqw; height:25cqw; transform:rotate(11deg); }
.navigation-map-lake { position:absolute; z-index:1; right:-5cqw; bottom:-5cqw; width:49cqw; height:22cqw; border-radius:48% 0 0 0; transform:rotate(-9deg); color:#308aa2; background:linear-gradient(135deg,#c0e4f3,#84c9ee); }
.navigation-map-lake span { position:absolute; left:18cqw; top:6cqw; font-size:2.9cqw; transform:rotate(9deg); }
.navigation-road { position:absolute; z-index:2; display:block; height:1.4cqw; border:.45cqw solid #fff; background:#d4e1e2; box-shadow:0 .2cqw .35cqw rgba(86,137,135,.1); }
.navigation-road.road-main-a { left:-4cqw; top:34cqw; width:108cqw; transform:rotate(6deg); }
.navigation-road.road-main-b { left:-5cqw; top:42cqw; width:108cqw; transform:rotate(8deg); }
.navigation-road.road-cross-a { left:15cqw; top:26cqw; width:82cqw; transform:rotate(92deg); }
.navigation-road.road-cross-b { left:50cqw; top:19cqw; width:63cqw; transform:rotate(78deg); }
.navigation-road.road-diagonal-a { left:8cqw; top:15cqw; width:75cqw; transform:rotate(26deg); }
.navigation-road.road-diagonal-b { left:18cqw; top:48cqw; width:66cqw; transform:rotate(-36deg); }
.navigation-map-label { position:absolute; z-index:3; color:#31545a; font-size:2.8cqw; white-space:nowrap; }
.label-park { right:8cqw; top:10cqw; color:#278269; }
.label-minzu-a { left:20cqw; top:33cqw; transform:rotate(6deg); }
.label-minzu-b { right:8cqw; top:40cqw; transform:rotate(8deg); }
.label-qingxiu { right:22cqw; top:20cqw; transform:rotate(78deg); }
.label-niuwan { left:12cqw; bottom:12cqw; transform:rotate(-62deg); }
.navigation-map-pin { position:absolute; z-index:5; left:50%; top:45%; width:11.8cqw; height:16.5cqw; transform:translate(-50%,-50%); }
.navigation-map-pin img { position:relative; z-index:2; display:block; width:100%; height:14cqw; object-fit:contain; filter:drop-shadow(0 1cqw 1cqw rgba(0,121,101,.2)); }
.navigation-map-pin span { position:absolute; z-index:1; left:50%; bottom:.2cqw; width:12cqw; height:3.2cqw; border-radius:50%; transform:translateX(-50%); background:rgba(255,255,255,.9); box-shadow:0 .5cqw 1.4cqw rgba(25,106,98,.12); }

.navigation-store { height:41cqw; margin-top:3.7cqw; overflow:hidden; padding:4.8cqw 4.3cqw; }
.navigation-store-copy { position:relative; z-index:3; }
.navigation-store-copy h2 { margin:0 0 4.1cqw; color:#102c32; font-size:4.7cqw; line-height:1; }
.navigation-store-copy p { display:flex; align-items:center; gap:2.2cqw; margin:2.8cqw 0 0; color:#374d53; font-size:3cqw; white-space:nowrap; }
.navigation-store-copy p > span { width:4cqw; height:4cqw; display:grid; place-items:center; color:#0b9a78; }
.navigation-store-copy p svg { width:3.7cqw; height:3.7cqw; stroke-width:2; }
.navigation-store-building { position:absolute; z-index:2; right:-1.2cqw; bottom:.4cqw; width:49cqw; height:36.5cqw; object-fit:contain; object-position:right bottom; }
.navigation-store::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0) 49%,rgba(255,255,255,.06) 62%); }

.navigation-call { width:100%; height:13.2cqw; margin-top:3.3cqw; display:grid; grid-template-columns:8cqw 1fr 4cqw; align-items:center; gap:2cqw; padding:0 4.2cqw; border:1px solid rgba(55,124,114,.1); color:#153b3e; background:rgba(255,255,255,.96); cursor:pointer; }
.navigation-call > svg { width:5.5cqw; height:5.5cqw; color:#08a07a; fill:#08a07a; stroke:none; }
.navigation-call strong { justify-self:start; font-size:4cqw; }
.navigation-call i { width:2.5cqw; height:2.5cqw; justify-self:end; border-top:.55cqw solid #737b7d; border-right:.55cqw solid #737b7d; transform:rotate(45deg); }
.navigation-start { width:100%; height:14cqw; display:flex; align-items:center; justify-content:center; gap:3cqw; margin-top:4.3cqw; border:0; border-radius:999px; color:#fff; background:linear-gradient(100deg,#28b899,#008d76); box-shadow:0 1.7cqw 3.2cqw rgba(0,137,104,.22); font-size:4.6cqw; font-weight:900; cursor:pointer; }
.navigation-start span { width:6.3cqw; height:6.3cqw; display:grid; place-items:center; border-radius:50%; color:#079779; background:#fff; }
.navigation-start svg { width:4cqw; height:4cqw; fill:#079779; stroke:none; }

@media (max-width:390px) {
  .navigation-store-copy p { font-size:2.75cqw; }
}

/* Maintenance page — dedicated source reconstruction (2026-08-12). */
.maintenance-page .app-shell {
  container-type:inline-size;
  min-height:100vh;
  padding:0 3.65cqw 13.6cqw;
  background:
    radial-gradient(circle at 100% 0,rgba(108,223,207,.28),transparent 25%),
    linear-gradient(180deg,#f2fbf9 0,#fbfdfd 74%,#f3f8f7 100%);
}
.maintenance-page .app-shell::before { display:none; }
.maintenance-page svg { display:block; fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.maintenance-page .card { border:1px solid rgba(37,141,118,.08); border-radius:3.65cqw; box-shadow:0 1.45cqw 3.1cqw rgba(35,89,81,.10); }

.maintenance-ref-header { position:relative; height:19.6cqw; display:grid; place-items:end center; padding-bottom:4.1cqw; }
.maintenance-ref-header h1 { margin:0; color:#064d49; font-size:4.8cqw; line-height:1; font-weight:900; letter-spacing:.2cqw; }
.maintenance-ref-back { position:absolute; left:.35cqw; top:8.2cqw; width:6cqw; height:6cqw; display:grid; place-items:center; padding:0; border:0; color:#164d4d; background:transparent; cursor:pointer; }
.maintenance-ref-back svg { width:4.2cqw; height:4.2cqw; stroke-width:2.55; }
.maintenance-ref-stack { display:grid; gap:2.65cqw; }

.maintenance-ref-hero { height:37.2cqw; overflow:hidden; border:1.1cqw solid rgba(255,255,255,.95)!important; background:linear-gradient(103deg,#f7fdfb 0,#e9f8f4 51%,#d7f0ea 100%); }
.maintenance-ref-hero::before { content:""; position:absolute; right:10cqw; top:-11cqw; width:34cqw; height:34cqw; border-radius:50%; background:rgba(255,255,255,.35); }
.maintenance-ref-hero-copy { position:absolute; z-index:3; left:5.1cqw; top:11.6cqw; }
.maintenance-ref-hero-copy h2 { margin:0; color:#064c48; font-size:5.7cqw; line-height:1; font-weight:950; letter-spacing:-.1cqw; white-space:nowrap; }
.maintenance-ref-hero-copy p { margin:4.3cqw 0 0; color:#456b68; font-size:3.1cqw; line-height:1; letter-spacing:.08cqw; }
.maintenance-ref-hero-art { position:absolute; z-index:2; right:-.8cqw; bottom:-.3cqw; width:57.4cqw; height:36.3cqw; object-fit:cover; object-position:center; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 17%); mask-image:linear-gradient(to right,transparent 0,#000 17%); }

.maintenance-ref-vehicle { height:32.9cqw; overflow:hidden; background:linear-gradient(100deg,#fff 0,#fff 49%,#eff9f8 100%); }
.maintenance-ref-vehicle-copy { position:absolute; z-index:3; left:3.5cqw; top:4.1cqw; }
.maintenance-ref-vehicle-copy h2 { display:flex; align-items:center; gap:2.2cqw; margin:0; color:#084f4b; font-size:4.05cqw; line-height:1; font-weight:900; }
.maintenance-ref-vehicle-copy h2 svg { width:5.4cqw; height:5.4cqw; color:#52af91; stroke-width:2.35; }
.maintenance-ref-plate { display:inline-flex; margin-top:3.8cqw; padding:1.2cqw 2.4cqw 1.3cqw; border:1px solid rgba(39,151,126,.38); border-radius:1.8cqw; color:#064b48; background:rgba(240,251,248,.82); box-shadow:inset 0 .4cqw 1.2cqw rgba(48,150,129,.06); font-size:6.35cqw; line-height:1; font-weight:950; letter-spacing:.28cqw; white-space:nowrap; }
.maintenance-ref-vehicle-copy p { margin:2.2cqw 0 0; color:#354d4f; font-size:3.05cqw; line-height:1; white-space:nowrap; }
.maintenance-ref-car { position:absolute; z-index:2; right:-.1cqw; top:0; width:51.5cqw; height:32.9cqw; object-fit:cover; object-position:center; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%); mask-image:linear-gradient(to right,transparent 0,#000 16%); }

.maintenance-ref-services { height:32.85cqw; padding:3.3cqw 3.5cqw 2.2cqw; background:rgba(255,255,255,.96); }
.maintenance-ref-section-title { display:flex; align-items:center; gap:2.2cqw; margin:0; color:#064e4a; font-size:4.2cqw; line-height:1; font-weight:900; }
.maintenance-ref-section-title svg { width:5.2cqw; height:5.2cqw; color:#29a883; stroke-width:2.6; }
.maintenance-ref-service-grid { height:21.3cqw; margin-top:2cqw; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.maintenance-ref-service { position:relative; display:grid; grid-template-rows:16.4cqw 4.9cqw; justify-items:center; min-width:0; text-align:center; }
.maintenance-ref-service + .maintenance-ref-service { border-left:1px solid rgba(42,102,94,.14); }
.maintenance-ref-service-visual { width:17.6cqw; height:16.4cqw; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#eff9f7,#e1f1ed); }
.maintenance-ref-service-visual img { display:block; width:13cqw; height:11.8cqw; object-fit:contain; }
.maintenance-ref-service:nth-child(2) .maintenance-ref-service-visual img { width:15.8cqw; height:10.8cqw; }
.maintenance-ref-checklist svg { width:10.6cqw; height:11.8cqw; color:#31a987; fill:#f7fffc; stroke-width:4.7; filter:drop-shadow(0 .7cqw .7cqw rgba(13,104,80,.18)); }
.maintenance-ref-service h3 { align-self:end; margin:0; color:#172f31; font-size:3.35cqw; line-height:1; font-weight:500; white-space:nowrap; }

.maintenance-ref-stores { height:32.65cqw; padding:2.65cqw 3cqw 1.35cqw; background:rgba(255,255,255,.96); }
.maintenance-ref-store-heading { height:8.1cqw; display:flex; align-items:flex-start; gap:1.8cqw; }
.maintenance-ref-store-heading > svg { width:5.2cqw; height:5.2cqw; flex:0 0 5.2cqw; color:#2ba884; fill:#2ba884; stroke:none; }
.maintenance-ref-store-heading h2 { margin:0; color:#064f4b; font-size:3.9cqw; line-height:1; font-weight:900; }
.maintenance-ref-store-heading p { margin:1.25cqw 0 0; color:#627a78; font-size:2.3cqw; line-height:1; white-space:nowrap; }
.maintenance-ref-store-list { display:grid; grid-template-rows:repeat(3,7.15cqw); }
.maintenance-ref-store-row { display:grid; grid-template-columns:4cqw minmax(0,1fr) 10cqw 19.1cqw; align-items:center; min-width:0; border:1px solid rgba(34,119,105,.14); border-radius:1.1cqw; padding:0 2.2cqw; color:#152f31; background:linear-gradient(90deg,rgba(251,255,254,.98),rgba(247,252,251,.96)); }
.maintenance-ref-store-row + .maintenance-ref-store-row { margin-top:.55cqw; }
.maintenance-ref-row-pin { width:3.2cqw; height:3.2cqw; color:#41ab8b; fill:#41ab8b; stroke:none!important; }
.maintenance-ref-store-row h3 { overflow:hidden; margin:0; font-size:3.05cqw; line-height:1; font-weight:500; white-space:nowrap; text-overflow:ellipsis; }
.maintenance-ref-distance { justify-self:center; color:#263e40; font-size:2.75cqw; white-space:nowrap; }
.maintenance-ref-contact { height:4.7cqw; display:flex; align-items:center; justify-content:center; gap:1.1cqw; padding:0 1.2cqw; border:1px solid rgba(29,162,126,.28); border-radius:999px; color:#15946f; background:rgba(255,255,255,.88); font-size:2.7cqw; line-height:1; white-space:nowrap; cursor:pointer; }
.maintenance-ref-contact svg { width:3cqw; height:3cqw; fill:#28a77f; stroke:none!important; }
.maintenance-ref-book { width:100%; height:8.55cqw; border:0; border-radius:4.4cqw; color:#fff; background:linear-gradient(100deg,#1ca985,#078768); box-shadow:0 1.4cqw 2.8cqw rgba(7,126,97,.2); font-size:4.2cqw; line-height:1; font-weight:900; letter-spacing:.2cqw; cursor:pointer; }

.maintenance-page .bottom-nav {
  left:max(0px,calc(50vw - 240px));
  right:auto;
  width:min(100%,480px);
  height:min(11.75vw,56.4px);
  grid-template-columns:repeat(3,1fr);
  padding:min(.66vw,3.2px) min(8.93vw,42.9px) max(min(.66vw,3.2px),env(safe-area-inset-bottom));
  transform:none;
}
.maintenance-page .nav-item { grid-template-rows:min(6vw,28.8px) min(3.2vw,15.4px); align-content:center; gap:0; color:#a9aeac; font-size:min(2.63vw,12.6px); font-weight:400; }
.maintenance-page .nav-item .nav-icon { width:min(6vw,28.8px); height:min(6vw,28.8px); font-size:0; filter:none; opacity:1; }
.maintenance-page .nav-item > span:last-child { line-height:1.2; }
.maintenance-page .nav-icon svg { width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.maintenance-page .nav-item.active { color:var(--green); font-weight:700; }
.maintenance-page .nav-item.active .nav-icon { transform:none; }
.maintenance-page .nav-item.active[data-route="profile"] .nav-icon svg { fill:currentColor; stroke:currentColor; }

@media (max-width:430px) {
  .maintenance-page .app-shell { padding-left:3.65cqw; padding-right:3.65cqw; }
}
/* Rescue page vertical rhythm: match the 941x1672 source composition at phone widths. */
.rescue-header { height:15cqw; }
.rescue-header h1 { font-size:5.45cqw; }
.rescue-back { top:4.3cqw; }

.rescue-hero { height:43cqw; }
.rescue-hero::after { content:none; }
.rescue-hero-copy { top:8.2cqw; }
.rescue-hero-copy h2 { font-size:8.1cqw; }
.rescue-hero-copy p { margin-top:2.4cqw; padding:1.15cqw 2.6cqw; font-size:2.8cqw; }
.rescue-hero-truck { right:.7cqw; bottom:1.5cqw; width:51cqw; height:32cqw; }
.rescue-assurances { left:4.4cqw; bottom:3.6cqw; width:45cqw; }
.rescue-assurances span { width:6.3cqw; height:6.3cqw; }
.rescue-assurances b { font-size:2.2cqw; }

.rescue-vehicle { height:34.8cqw; margin-top:3.2cqw; padding:3.7cqw 3.2cqw 2.8cqw; }
.rescue-vehicle-heading { height:7.5cqw; }
.rescue-vehicle-heading h2 { font-size:4.35cqw; }
.rescue-vehicle-heading > div { font-size:2.85cqw; }
.rescue-vehicle-heading b { padding:1.5cqw 2.5cqw; font-size:3.15cqw; }
.rescue-vehicle-body { height:20.4cqw; }
.rescue-vehicle-body > img { width:42cqw; height:19cqw; margin-left:-.7cqw; }
.rescue-vehicle-copy { padding-left:2cqw; }
.rescue-vehicle-copy strong { font-size:4.85cqw; }
.rescue-vehicle-copy span { font-size:2.75cqw; }
.rescue-vehicle-copy p { margin-top:2.5cqw; font-size:2.95cqw; }

.rescue-process { height:41.8cqw; margin-top:3.2cqw; padding:3.8cqw 3.3cqw 2.5cqw; }
.rescue-process h2 { margin-bottom:3.9cqw; font-size:4.35cqw; }
.rescue-process-icon { width:15.2cqw; height:15.2cqw; margin-bottom:1.8cqw; }
.rescue-process-icon svg { width:10.2cqw; height:10.2cqw; }
.rescue-process-icon em { left:-1.2cqw; top:-1.2cqw; width:4.2cqw; height:4.2cqw; }
.rescue-process-step h3 { font-size:3.25cqw; }
.rescue-process-step p { font-size:2.4cqw; }

.rescue-hotline { height:20.2cqw; margin-top:3.2cqw; padding:3.2cqw; }
.rescue-hotline-copy h2 { margin-bottom:1.7cqw; font-size:4.15cqw; }
.rescue-hotline-copy span { width:6.8cqw; height:6.8cqw; }
.rescue-hotline-copy strong { font-size:5.6cqw; }
.rescue-hotline > button { width:33cqw; height:10.8cqw; font-size:4.2cqw; }
.rescue-tip { height:6.7cqw; margin-top:2.5cqw; font-size:2.55cqw; }