:root{--ink:#0b1e3a;--muted:#5e6d80;--weak:#8290a2;--blue:#075ed1;--blue-2:#039be5;--blue-soft:#edf5ff;--navy:#04152c;--ivory:#f8f6f1;--white:#fff;--line:#dce5ef;--green:#20b86a;--shadow:0 18px 50px rgba(8,31,61,.08);--radius:14px;--max:1240px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--ivory);font-family:"Manrope",sans-serif;line-height:1.65}body.menu-open{overflow:hidden}img{display:block;max-width:100%}a{color:inherit}button,input,select{font:inherit}.skip-link{position:fixed;left:16px;top:-70px;z-index:9999;padding:10px 14px;background:#fff;border:2px solid var(--blue);border-radius:8px}.skip-link:focus{top:16px}.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(214,225,236,.9);backdrop-filter:blur(16px)}.header-inner{width:min(var(--max),calc(100% - 48px));height:92px;margin:auto;display:flex;align-items:center;gap:34px}.brand{flex:0 0 auto}.brand img{width:224px;height:66px;object-fit:contain}.site-nav{margin-left:auto;display:flex;align-items:center;gap:32px}.site-nav a{text-decoration:none;font-size:14px;font-weight:700;color:#26364d}.site-nav a:hover{color:var(--blue)}.header-actions{display:flex;align-items:center;gap:10px}.language-control{position:relative}.language-button,.rules-link{min-height:43px;padding:0 13px;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#243550;text-decoration:none;font-size:13px;font-weight:700;cursor:pointer}.language-button:hover,.rules-link:hover{border-color:#aabed5;background:#f9fbfd}.language-menu{position:absolute;right:0;top:51px;width:220px;max-height:360px;overflow:auto;padding:8px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow)}.language-menu button{width:100%;padding:9px 10px;border:0;border-radius:7px;text-align:left;background:transparent;color:#33445c;cursor:pointer}.language-menu button:hover,.language-menu button[aria-current="true"]{background:var(--blue-soft);color:var(--blue)}.button{min-height:48px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:9px;text-decoration:none;font-size:14px;font-weight:800;transition:transform .18s,background .18s,border-color .18s}.button:hover{transform:translateY(-1px)}.button-primary{color:#fff;background:var(--blue)}.button-primary:hover{background:#064fae}.button-secondary{color:var(--ink);background:#fff;border-color:#cbd8e6}.header-contact{min-height:43px}.menu-toggle{display:none;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:9px;background:#fff}.menu-toggle span{display:block;height:2px;margin:5px;background:var(--ink)}.hero{min-height:560px;display:flex;align-items:center;position:relative;overflow:hidden;background:#03142b url("../images/hero-repair.jpg") center/cover no-repeat}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,17,37,.97) 0%,rgba(3,19,42,.88) 34%,rgba(3,18,38,.28) 67%,rgba(3,18,38,.06))}.hero-inner{width:min(var(--max),calc(100% - 48px));margin:auto;position:relative;z-index:1;color:#fff}.eyebrow{margin:0 0 12px;color:var(--blue-2);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.hero h1{max-width:690px;margin:0;font-size:clamp(46px,5.5vw,78px);line-height:1.04;letter-spacing:-.055em}.hero-copy{max-width:590px;margin:24px 0 0;color:#d7e2ef;font-size:18px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.button-whatsapp{color:#fff;background:#075ed1}.button-ghost{color:#fff;border-color:rgba(255,255,255,.65);background:rgba(6,22,45,.35)}.announcement-wrap{width:min(var(--max),calc(100% - 48px));margin:26px auto 0}.announcement-panel{display:grid;grid-template-columns:58px 1fr;gap:22px;padding:26px 30px;background:#fbfdff;border:1px solid #cad9ea;border-top:3px solid var(--blue);border-radius:8px}.announcement-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#e8f2ff;font-size:23px}.announcement-kicker{margin:0 0 6px;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.announcement-item+.announcement-item{margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}.announcement-item h2{margin:0 0 9px;font-size:22px}.announcement-meta{margin:0 0 7px;color:var(--weak);font-size:12px}.announcement-body>:first-child{margin-top:0}.announcement-body>:last-child{margin-bottom:0}.announcement-body a{color:var(--blue);font-weight:700}.section{width:min(var(--max),calc(100% - 48px));margin:0 auto;padding:100px 0}.section h2,.rules-page h1,.rules-page h2{letter-spacing:-.04em}.section-heading h2,.accessories-copy h2,.about-copy h2,.contact-card h2{margin:0;font-size:clamp(36px,4vw,58px);line-height:1.08}.section-heading>p:last-child,.accessories-copy>p,.about-copy>p,.contact-card>p{color:var(--muted)}.section-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(520px,1.2fr);gap:80px}.service-list{border-top:1px solid #cfd9e4}.service-row{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid #cfd9e4}.service-icon{width:38px;height:38px;display:grid;place-items:center;color:var(--blue);background:#eaf3ff;border-radius:10px;font-size:21px}.service-row h3{margin:0;font-size:22px}.service-row p{margin:5px 0 0;color:var(--muted)}.accessories-section{display:grid;grid-template-columns:1.18fr .82fr;gap:70px;align-items:center;padding-top:40px}.accessories-media{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}.accessories-media img{width:100%;aspect-ratio:4/3;object-fit:cover}.feature-list{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}.feature-list li{padding:14px 0;border-bottom:1px solid var(--line);font-weight:700}.feature-list li:nth-child(odd){padding-right:14px}.feature-list li:nth-child(even){padding-left:14px;border-left:1px solid var(--line)}.about-section{display:grid;grid-template-columns:260px 1fr;gap:68px;align-items:center;border-top:1px solid var(--line)}.about-mark{width:210px;height:210px;display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--blue),#03a9e9);font-size:58px;font-weight:800;letter-spacing:-.08em}.about-secondary{font-size:14px}.contact-section{display:grid;grid-template-columns:.86fr 1.14fr;gap:28px;padding-top:40px}.contact-card,.map-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}.contact-card{padding:40px}.contact-list{margin:28px 0}.contact-list>div{display:grid;grid-template-columns:120px 1fr;padding:12px 0;border-bottom:1px solid #edf1f5}.contact-list dt{color:var(--weak);font-size:12px;font-weight:800;text-transform:uppercase}.contact-list dd{margin:0;font-weight:700}.contact-list a{color:var(--blue)}.hours{margin-top:28px}.hours h3{font-size:17px}.hours-row{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid #edf1f5}.sunday-note{margin:12px 0;color:#6f7d8f;font-size:12px;font-style:italic}.holiday-note{padding:14px 16px;background:#f4f8fc;border-left:3px solid var(--blue);color:#55677e;font-size:12px}.holiday-note a{color:var(--blue);font-weight:800}.contact-actions{display:flex;gap:10px;margin-top:24px}.map-card{overflow:hidden;min-height:620px}.map-card iframe{width:100%;height:100%;min-height:620px;border:0}.site-footer{padding:28px 20px;color:#667386;background:#f3f4f5;border-top:1px solid #e0e4e8;text-align:center;font-size:13px}.rules-page{background:#f7f8fa}.rules-hero{padding:82px 0 76px;background:radial-gradient(circle at 85% 0,rgba(3,169,233,.18),transparent 34%),linear-gradient(125deg,#fafdff,#edf5ff)}.rules-hero-inner{width:min(1080px,calc(100% - 48px));margin:auto}.back-link{display:inline-flex;margin-bottom:34px;color:var(--blue);text-decoration:none;font-size:13px;font-weight:800}.rules-hero h1{margin:0;font-size:clamp(52px,7vw,88px);line-height:1}.rules-hero p:last-child{max-width:760px;margin:22px 0 0;color:var(--muted);font-size:18px}.rules-content{width:min(1180px,calc(100% - 48px));margin:auto;padding:70px 0 110px;display:grid;grid-template-columns:240px 1fr;gap:54px;align-items:start}.rules-index{position:sticky;top:120px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:12px}.rules-index p{margin:0 0 12px;color:var(--weak);font-size:11px;font-weight:800;text-transform:uppercase}.rules-index a{display:block;padding:9px 0;color:#42546b;border-bottom:1px solid #eef2f6;text-decoration:none;font-size:12px;font-weight:700}.rules-index a:hover{color:var(--blue)}.rules-articles{display:grid;gap:18px}.rule-block{padding:34px 38px;background:#fff;border:1px solid var(--line);border-radius:12px}.rule-block h2{margin:0 0 16px;font-size:30px}.rule-block h3{margin:26px 0 8px;font-size:17px}.rule-block p{color:var(--muted)}.rule-kicker{margin:0 0 7px!important;color:var(--blue)!important;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.13em}.rule-note{padding:14px 16px;background:#f2f7ff;border-left:3px solid var(--blue)}.rule-important{display:grid;grid-template-columns:52px 1fr;border-color:#b9cee5;border-top:3px solid var(--blue)}.rule-important-icon{font-size:28px}.rule-contact{padding:36px 38px;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#fff;background:var(--navy);border-radius:12px}.rule-contact h2{margin:0;font-size:31px}.rule-contact p:last-child{max-width:620px;color:#cad7e6}.reveal{animation:rise .55s ease both}@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{animation:none}.button{transition:none}}
@media(max-width:1080px){.header-inner{gap:16px}.site-nav{gap:18px}.rules-link span:last-child{display:none}.section-grid{gap:46px}.contact-section{grid-template-columns:1fr}.map-card,.map-card iframe{min-height:420px}}
@media(max-width:860px){.header-inner{height:78px;width:calc(100% - 30px)}.brand img{width:174px;height:56px}.menu-toggle{display:block;margin-left:auto}.site-nav{display:none;position:fixed;inset:78px 0 auto 0;padding:20px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch}.menu-open .site-nav{display:flex}.header-actions{gap:7px}.rules-link,.header-contact{display:none}.language-button{min-height:42px}.hero{min-height:590px;background-position:61% center}.hero:after{background:linear-gradient(90deg,rgba(2,17,37,.97),rgba(3,19,42,.72))}.section-grid,.accessories-section,.about-section{grid-template-columns:1fr;gap:42px}.about-mark{width:130px;height:130px;font-size:40px}.rules-content{grid-template-columns:1fr}.rules-index{position:static}.rule-contact{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.header-inner{width:calc(100% - 22px)}.brand img{width:150px}.hero{min-height:560px}.hero-inner,.section,.announcement-wrap,.rules-hero-inner,.rules-content{width:calc(100% - 30px)}.hero h1{font-size:48px}.hero-copy{font-size:16px}.hero-actions{align-items:stretch;flex-direction:column}.hero-actions .button{width:100%}.announcement-panel{grid-template-columns:1fr;padding:22px}.announcement-icon{width:42px;height:42px}.section{padding:72px 0}.section-heading h2,.accessories-copy h2,.about-copy h2,.contact-card h2{font-size:38px}.service-row{grid-template-columns:40px 1fr}.service-row h3{font-size:18px}.feature-list{grid-template-columns:1fr}.feature-list li:nth-child(even){padding-left:0;border-left:0}.contact-card{padding:26px 22px}.contact-list>div{grid-template-columns:1fr;gap:4px}.hours-row{align-items:flex-start;flex-direction:column;gap:2px}.map-card,.map-card iframe{min-height:340px}.rules-hero{padding:56px 0}.rules-content{padding:40px 0 70px}.rule-block{padding:26px 22px}.rule-important{grid-template-columns:1fr}.rule-contact{padding:28px 22px}.rule-contact .contact-actions{width:100%;flex-direction:column}.rule-contact .button{width:100%}.site-footer{font-size:11px}}
.whatsapp-dialog{width:min(390px,calc(100% - 32px));padding:34px;border:1px solid #dce5ef;border-radius:24px;color:#0b1e3a;background:#fff;box-shadow:0 28px 80px rgba(4,21,44,.24);text-align:center}.whatsapp-dialog::backdrop{background:rgba(4,21,44,.55);backdrop-filter:blur(5px)}.whatsapp-dialog[open]{animation:whatsapp-dialog-in .2s ease-out}.whatsapp-dialog-close{position:absolute;top:14px;right:14px;width:38px;height:38px;padding:0;border:1px solid #dce5ef;border-radius:50%;color:#45566d;background:#fff;font-size:24px;line-height:1;cursor:pointer}.whatsapp-dialog-close:hover{background:#f4f8fc}.whatsapp-dialog-mark{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:999px;color:#087c45;background:#e8f8ef;font-size:13px;font-weight:800}.whatsapp-dialog h2{margin:18px 0 8px;font-size:28px;line-height:1.2;letter-spacing:-.025em}.whatsapp-dialog-copy{max-width:300px;margin:0 auto 22px;color:#607086;font-size:14px;line-height:1.6}.whatsapp-qr-frame{width:260px;max-width:100%;margin:auto;padding:10px;border:1px solid #dce5ef;border-radius:20px;background:#fff}.whatsapp-qr-frame img{width:100%;height:auto}.whatsapp-dialog-number{display:block;margin-top:18px;font-size:15px}@keyframes whatsapp-dialog-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:520px){.whatsapp-dialog{padding:28px 22px}.whatsapp-dialog h2{font-size:24px}}
html[lang^="zh"] body,html:lang(yue) body{font-family:"Microsoft YaHei","Microsoft JhengHei","PingFang SC","Noto Sans CJK SC",sans-serif}html:lang(ja) body{font-family:"Yu Gothic","Meiryo","Noto Sans JP",sans-serif}html:lang(ar) body,html:lang(ur) body{font-family:"Segoe UI",Tahoma,Arial,sans-serif}html:lang(th) body,html:lang(hi) body,html:lang(bn) body{font-family:"Nirmala UI","Leelawadee UI","Segoe UI",sans-serif}html[lang^="zh"] :is(.rules-hero h1,.rule-block h2,.rule-contact h2),html:lang(yue) :is(.rules-hero h1,.rule-block h2,.rule-contact h2),html:lang(ja) :is(.rules-hero h1,.rule-block h2,.rule-contact h2){letter-spacing:-.015em}.rules-content{width:min(1240px,calc(100% - 48px));grid-template-columns:270px 1fr;gap:60px}.rules-index{padding:24px}.rules-index p{font-size:12px}.rules-index a{padding:11px 0;font-size:14px;line-height:1.45}.rule-block[id]{scroll-margin-top:112px}.rule-block{padding:40px 44px}.rule-block h2{margin-bottom:18px;font-size:34px;line-height:1.25}.rule-block h3{margin:30px 0 10px;font-size:19px;line-height:1.4}.rule-block p{font-size:17px;line-height:1.72}.rule-block .rule-kicker{font-size:12px;line-height:1.5}.rule-contact{padding:40px 44px}.rule-contact h2{font-size:34px;line-height:1.2}.rule-contact p:last-child{font-size:17px;line-height:1.7}.back-link{font-size:14px}.whatsapp-dialog{width:min(430px,calc(100% - 32px));max-height:calc(100vh - 32px);overflow:auto}.whatsapp-dialog-steps{display:grid;gap:11px;margin:0 0 22px;padding:0;list-style:none;text-align:left}.whatsapp-dialog-steps li{display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:start}.whatsapp-dialog-steps li>span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:#075ed1;background:#eaf3ff;font-size:12px;font-weight:800}.whatsapp-dialog-steps p{margin:2px 0 0;color:#3f5067;font-size:13px;line-height:1.55}@media(max-width:820px){.rule-block[id]{scroll-margin-top:96px}}@media(max-width:600px){.rules-content{width:calc(100% - 30px)}.rule-block{padding:28px 24px}.rule-block h2{font-size:28px}.rule-block h3{font-size:18px}.rule-block p{font-size:16px}.rule-contact{padding:30px 24px}.rule-contact h2{font-size:28px}.rule-contact p:last-child{font-size:16px}.whatsapp-dialog{padding:28px 22px}.whatsapp-dialog-steps p{font-size:12.5px}}

/* Rules page typography rhythm */
.rules-hero {
  padding: 64px 0 60px;
}

.rules-hero h1 {
  max-width: 820px;
  font-size: clamp(56px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.rules-hero p:last-child {
  max-width: 720px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.65;
}

.rules-content {
  padding-top: 56px;
  padding-bottom: 96px;
}

html[lang^="zh"] .rules-hero h1,
html:lang(yue) .rules-hero h1,
html:lang(ja) .rules-hero h1 {
  font-size: clamp(48px, 4vw, 64px);
  letter-spacing: -0.01em;
}

@media (max-width: 720px) {
  .rules-hero {
    padding: 48px 0 44px;
  }

  .rules-hero h1,
  html[lang^="zh"] .rules-hero h1,
  html:lang(yue) .rules-hero h1,
  html:lang(ja) .rules-hero h1 {
    font-size: clamp(42px, 11vw, 52px);
    line-height: 1.06;
  }

  .rules-hero p:last-child {
    font-size: 16px;
    line-height: 1.65;
  }

  .rules-content {
    padding-top: 38px;
    padding-bottom: 70px;
  }
}

/* Carry the same radius hierarchy into the long-form rules page. */
.rules-index {
  border-radius: 18px;
}

.rule-block,
.rule-contact {
  border-radius: 20px;
}

.rule-note {
  border-radius: 0 12px 12px 0;
}

/* Prioritize practical contact information in the desktop two-column layout. */
.info-layout > .contact-card {
  order: -1;
}

@media (max-width: 860px) {
  .info-layout > .contact-card {
    order: 0;
  }

  .rules-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .rules-index,
  .rules-articles {
    min-width: 0;
  }
}

/* Subtle motion for pointer devices only. */
.reveal {
  animation-fill-mode: backwards;
}

@media (hover: hover) and (pointer: fine) {
  .service-card,
  .info-card,
  .rule-block,
  .rule-contact {
    transition:
      transform 220ms cubic-bezier(.2, .7, .2, 1),
      border-color 220ms ease,
      box-shadow 220ms ease;
    will-change: transform;
  }

  .service-card:hover,
  .info-card:hover {
    transform: translateY(-4px);
    border-color: #b8cee7;
    box-shadow: 0 18px 44px rgba(8, 31, 61, .1);
  }

  .service-card .service-icon {
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
  }

  .service-card:hover .service-icon {
    transform: scale(1.06) rotate(-2deg);
  }

  .accessories-media {
    transition: transform 240ms cubic-bezier(.2, .7, .2, 1), box-shadow 240ms ease;
  }

  .accessories-media img {
    transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
  }

  .accessories-media:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 46px rgba(8, 31, 61, .11);
  }

  .accessories-media:hover img {
    transform: scale(1.02);
  }

  .rule-block:hover,
  .rule-contact:hover {
    transform: translateY(-2px);
    border-color: #a9c4e2;
    box-shadow: 0 14px 34px rgba(8, 31, 61, .08);
  }

  .rules-index a {
    transition: color 180ms ease, transform 180ms ease;
  }

  .rules-index a:hover {
    transform: translateX(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-card,
  .service-card .service-icon,
  .accessories-media,
  .accessories-media img,
  .info-card,
  .rule-block,
  .rule-contact,
  .rules-index a {
    transition: none;
  }

  .service-card:hover,
  .service-card:hover .service-icon,
  .accessories-media:hover,
  .accessories-media:hover img,
  .info-card:hover,
  .rule-block:hover,
  .rule-contact:hover,
  .rules-index a:hover {
    transform: none;
  }
}

/* Independent service cards replace the table-like divided panel. */
body[data-page="home"] main .service-grid {
  gap: 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-page="home"] main .service-card {
  position: relative;
  min-height: 146px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  overflow: hidden;
  padding: 26px 28px;
  border: 1px solid #dce5ef;
  border-radius: 20px;
  background: linear-gradient(135deg, #fff 0%, #f7faff 100%);
}

body[data-page="home"] main .service-card::after {
  content: "";
  position: absolute;
  top: -72px;
  right: -58px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7, 94, 209, .1), rgba(7, 94, 209, 0) 70%);
  pointer-events: none;
}

body[data-page="home"] main .service-card > * {
  position: relative;
  z-index: 1;
}

body[data-page="home"] main .service-card .service-icon {
  width: 58px;
  height: 58px;
  border-radius: 17px;
}

body[data-page="home"] main .service-card h3 {
  margin: 4px 0 7px;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

body[data-page="home"] main .service-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  body[data-page="home"] main .service-grid {
    gap: 14px;
  }

  body[data-page="home"] main .service-card {
    min-height: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    padding: 24px 22px;
    border-radius: 18px;
  }

  body[data-page="home"] main .service-card .service-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
  }

  body[data-page="home"] main .service-card h3 {
    margin-top: 2px;
    font-size: 18px;
  }

  body[data-page="home"] main .service-card p {
    font-size: 14.5px;
  }
}

/* Rules page refinement: UtuoTech hierarchy, locale typography and compact QR guidance. */
.rules-page { font-size: 17px; }
.rules-hero h1,.rule-block h2,.rule-contact h2 { font-family:"Newsreader",Georgia,serif; font-weight:600; }
.rules-hero { padding-top:58px; padding-bottom:54px; }
.rules-hero .eyebrow { display:none; }
.rules-content { padding-top:50px; }
.rule-contact { color:var(--ink); background:#fff; border:1px solid var(--line); }
.rule-contact .eyebrow { color:var(--blue); }
.rule-contact p:last-child { color:var(--muted); }
.rule-contact .contact-actions { flex:0 0 auto; }
.rule-contact .button-secondary { min-width:150px; flex:0 0 auto; white-space:nowrap; }
.rules-ui .site-nav,.rules-ui .header-contact,.rules-ui .rules-link,.rules-ui .menu-toggle { display:none!important; }
.rules-ui .header-actions { margin-left:auto; }
.theme-toggle { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; padding:0; border:1px solid #e2e9f1; border-radius:50%; color:var(--ink); background:#fff; line-height:1; cursor:pointer; transition:color 180ms ease,background 180ms ease,border-color 180ms ease,transform 180ms ease; }
.theme-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle:hover { color:var(--blue); border-color:#aec8e6; transform:translateY(-1px); }
.rules-index a { color:#516278; font-weight:650; }
.rules-index a:hover,.rules-index a:focus-visible,.rules-index a.is-active { color:var(--blue); }
.rules-index a.is-active { padding-left:8px; background:var(--blue-soft); border-radius:8px; }
.rule-block p,.rule-contact p:last-child { font-size:17px; line-height:1.72; }
.update-date,.rule-date { color:var(--weak); font-size:13px; font-weight:400; line-height:1.5; opacity:.8; }
.whatsapp-dialog { width:min(410px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; -ms-overflow-style:none; padding:26px 28px; }
.whatsapp-dialog::-webkit-scrollbar { width:0; height:0; display:none; }
.whatsapp-dialog h2 { margin-top:14px; font-size:27px; }
.whatsapp-dialog-copy { margin-bottom:17px; }
.whatsapp-dialog-steps { gap:9px; margin-bottom:17px; }
.whatsapp-dialog-steps p { font-size:14px; line-height:1.55; }
.whatsapp-qr-frame { width:180px; margin:0 auto 16px; padding:8px; border-radius:16px; }
.whatsapp-dialog-number { margin-top:13px; font-size:14px; }

@media (min-width:861px) {
  .rules-index { height:min(620px,calc(100vh - 150px)); min-height:520px; padding:24px; display:flex; flex-direction:column; }
  .rules-index p { flex:0 0 auto; margin-bottom:10px; }
  .rules-index a { min-height:0; padding-top:0; padding-bottom:0; display:flex; flex:1 1 0; align-items:center; border-bottom:1px solid #eef2f6; transition:color 180ms ease,padding-left 180ms ease,background 180ms ease; }
}

html[lang^="zh"] .rules-page :is(.rules-hero h1,.rule-block h2,.rule-contact h2),html:lang(yue) .rules-page :is(.rules-hero h1,.rule-block h2,.rule-contact h2) { font-family:"Microsoft YaHei","Microsoft JhengHei","PingFang SC","PingFang TC",sans-serif; font-weight:700; letter-spacing:-.01em; }
html:lang(ja) .rules-page :is(.rules-hero h1,.rule-block h2,.rule-contact h2) { font-family:"Yu Gothic",Meiryo,"Hiragino Kaku Gothic ProN",sans-serif; font-weight:700; letter-spacing:-.01em; }
html:lang(ar) .rules-page :is(.rules-hero h1,.rule-block h2,.rule-contact h2),html:lang(ur) .rules-page :is(.rules-hero h1,.rule-block h2,.rule-contact h2) { font-family:"Segoe UI",Tahoma,Arial,sans-serif; font-weight:700; line-height:1.32; letter-spacing:0; }
html:lang(ar) .rules-page :is(.rule-block p,.rule-contact p:last-child),html:lang(ur) .rules-page :is(.rule-block p,.rule-contact p:last-child) { line-height:1.82; }
html:lang(hi) .rules-page :is(.rules-hero h1,.rule-block h2,.rule-contact h2),html:lang(bn) .rules-page :is(.rules-hero h1,.rule-block h2,.rule-contact h2) { font-family:"Nirmala UI","Segoe UI",sans-serif; font-weight:700; line-height:1.3; letter-spacing:0; }
html:lang(th) .rules-page :is(.rules-hero h1,.rule-block h2,.rule-contact h2) { font-family:"Leelawadee UI",Tahoma,sans-serif; font-weight:700; line-height:1.3; letter-spacing:0; }
html:lang(de) .rules-hero h1,html:lang(ru) .rules-hero h1 { font-size:clamp(48px,4.2vw,66px); }

html[data-theme="dark"] body.rules-ui { color:#eaf1fa; background:#071426; }
html[data-theme="dark"] body.rules-ui .site-header { background:rgba(7,20,38,.97); border-bottom-color:#223854; }
html[data-theme="dark"] body.rules-ui .language-button,html[data-theme="dark"] body.rules-ui .theme-toggle { color:#eaf1fa; background:#0d2038; border-color:#2a425f; }
html[data-theme="dark"] body.rules-ui .language-menu { color:#eaf1fa; background:#0d2038; border-color:#2a425f; }
html[data-theme="dark"] body.rules-ui .language-menu button { color:#d7e2ef; }
html[data-theme="dark"] body.rules-ui .language-menu button:hover,html[data-theme="dark"] body.rules-ui .language-menu button[aria-current="true"] { color:#7eb8ff; background:#173456; }
html[data-theme="dark"] body.rules-ui .rules-page { background:#071426; }
html[data-theme="dark"] body.rules-ui .rules-hero { background:#0a1b31; }
html[data-theme="dark"] body.rules-ui .rules-hero p:last-child,html[data-theme="dark"] body.rules-ui .rule-block p,html[data-theme="dark"] body.rules-ui .rule-contact p:last-child { color:#b9c8da; }
html[data-theme="dark"] body.rules-ui .rules-index,html[data-theme="dark"] body.rules-ui .rule-block,html[data-theme="dark"] body.rules-ui .rule-contact { color:#eaf1fa; background:#0d2038; border-color:#2a425f; }
html[data-theme="dark"] body.rules-ui .rules-index a { color:#b9c8da; border-bottom-color:#263b57; }
html[data-theme="dark"] body.rules-ui .rules-index a:hover,html[data-theme="dark"] body.rules-ui .rules-index a:focus-visible,html[data-theme="dark"] body.rules-ui .rules-index a.is-active { color:#7eb8ff; background:#173456; }
html[data-theme="dark"] body.rules-ui .rule-note { color:#d7e2ef; background:#142d4d; }
html[data-theme="dark"] body.rules-ui .button-secondary { color:#eaf1fa; background:#132a46; border-color:#365273; }
html[data-theme="dark"] body.rules-ui .site-footer { color:#9fb0c4; background:#071426; border-top-color:#223854; }

@media (max-width:860px) {
  .rules-content { gap:22px; }
  .rules-index { padding:12px; display:flex; gap:8px; overflow-x:auto; border-radius:14px; scrollbar-width:thin; }
  .rules-index p { display:none; }
  .rules-index a,.rules-index a.is-active { flex:0 0 auto; padding:9px 12px; border:1px solid var(--line); border-radius:999px; white-space:nowrap; font-size:13px; line-height:1.35; }
  .rules-index a.is-active { border-color:#b8d2ef; }
}

@media (max-width:600px) {
  .rules-hero { padding-top:44px; padding-bottom:40px; }
  .rules-hero h1 { font-size:clamp(40px,10.8vw,50px); }
  .rule-block p,.rule-contact p:last-child { font-size:16px; }
  .whatsapp-dialog { padding:25px 20px; }
  .whatsapp-dialog-steps p { font-size:13.5px; }
  .whatsapp-qr-frame { width:176px; }
}

/* G.T.L. TechLab identity overrides for the Utuo-style rules layout. */
:root {
  --ink:#082d22;
  --muted:#60736c;
  --weak:#7d8d87;
  --blue:#075f46;
  --blue-2:#ad672e;
  --blue-soft:#eaf4ef;
  --navy:#07362b;
  --ivory:#f8f5ef;
  --line:#dbe4df;
  --green:#12855f;
  --shadow:0 18px 50px rgba(6,45,34,.08);
}
body { background:var(--ivory); }
.brand img { width:170px; height:72px; }
.rules-page { background:#f6f7f4; }
.rules-hero { background:#f8f5ef; }
.rule-note { background:#eef5f1; }
.rule-important { border-color:#b9d0c7; }
.rule-contact { background:var(--navy); }
.button-primary { background:var(--blue); }
.button-primary:hover { background:#064d3a; }
.language-menu button:hover,.language-menu button[aria-current="true"] { color:var(--blue); background:var(--blue-soft); }
.theme-toggle:hover { color:var(--blue); border-color:#b9d0c7; }
.rules-index a.is-active { background:var(--blue-soft); }
.whatsapp-dialog-mark { color:#087a52; background:#e8f5ef; }
.whatsapp-dialog-steps li>span { color:#087a52; background:#e8f5ef; }
.whatsapp-qr-frame {
  --gtl-qr-size:184px;
  position:relative;
  width:var(--gtl-qr-size);
  height:var(--gtl-qr-size);
  overflow:hidden;
  padding:0;
  background:#fff;
}
.whatsapp-qr-frame img {
  position:absolute;
  top:calc(var(--gtl-qr-size) * -0.749);
  left:calc(var(--gtl-qr-size) * -0.199);
  width:calc(var(--gtl-qr-size) * 1.394);
  max-width:none;
  height:auto;
}
html[data-theme="dark"] body.rules-ui { color:#edf5f1; background:#071a14; }
html[data-theme="dark"] body.rules-ui .site-header { background:rgba(7,26,20,.97); border-bottom-color:#24443a; }
html[data-theme="dark"] body.rules-ui .language-button,
html[data-theme="dark"] body.rules-ui .theme-toggle { color:#edf5f1; background:#0d2b22; border-color:#315246; }
html[data-theme="dark"] body.rules-ui .language-menu { color:#edf5f1; background:#0d2b22; border-color:#315246; }
html[data-theme="dark"] body.rules-ui .language-menu button { color:#d6e4df; }
html[data-theme="dark"] body.rules-ui .language-menu button:hover,
html[data-theme="dark"] body.rules-ui .language-menu button[aria-current="true"] { color:#9bd5bf; background:#173e31; }
html[data-theme="dark"] body.rules-ui .rules-page { background:#071a14; }
html[data-theme="dark"] body.rules-ui .rules-hero { background:#0a231b; }
html[data-theme="dark"] body.rules-ui .rules-index,
html[data-theme="dark"] body.rules-ui .rule-block,
html[data-theme="dark"] body.rules-ui .rule-contact { color:#edf5f1; background:#0d2b22; border-color:#315246; }
html[data-theme="dark"] body.rules-ui .rules-index a { color:#bed0ca; border-bottom-color:#29483e; }
html[data-theme="dark"] body.rules-ui .rules-index a:hover,
html[data-theme="dark"] body.rules-ui .rules-index a:focus-visible,
html[data-theme="dark"] body.rules-ui .rules-index a.is-active { color:#9bd5bf; background:#173e31; }
html[data-theme="dark"] body.rules-ui .rule-note { color:#d6e4df; background:#14382d; }
html[data-theme="dark"] body.rules-ui .button-secondary { color:#edf5f1; background:#15362c; border-color:#3c6054; }
html[data-theme="dark"] body.rules-ui .site-footer { color:#a8bbb5; background:#071a14; border-top-color:#24443a; }
@media(max-width:860px) {
  .brand img { width:150px; height:60px; }
}
@media(max-width:600px) {
  .brand img { width:132px; height:52px; }
  .whatsapp-qr-frame { --gtl-qr-size:168px; }
}

/* Match the contact callout to the white rules cards. */
html:not([data-theme="dark"]) body.rules-ui .rule-contact {
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line);
}

html:not([data-theme="dark"]) body.rules-ui .rule-contact .eyebrow {
    color: var(--blue);
}

html:not([data-theme="dark"]) body.rules-ui .rule-contact h2 {
    color: var(--ink);
}

html:not([data-theme="dark"]) body.rules-ui .rule-contact p:last-child {
    color: var(--muted);
}


/* Final G.T.L WhatsApp dialog: match the compact UtuoTech composition. */
dialog.whatsapp-dialog {
    position: fixed !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: min(512px, calc(100vw - 32px)) !important;
    max-width: 512px !important;
    max-height: calc(100dvh - 32px) !important;
    margin: auto !important;
    padding: 30px 36px 32px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid #dbe6e1 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    color: #082d22 !important;
    box-shadow: 0 30px 90px rgba(4, 34, 25, 0.3) !important;
    text-align: center !important;
    scrollbar-width: none !important;
}

dialog.whatsapp-dialog::-webkit-scrollbar {
    display: none !important;
}

dialog.whatsapp-dialog::backdrop {
    background: rgba(22, 42, 36, 0.56) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #dbe6e1 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #50675f !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-mark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    margin: 2px auto 22px !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    background: #e8f5ef !important;
    color: #087a52 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

dialog.whatsapp-dialog #whatsapp-dialog-title {
    max-width: 390px !important;
    margin: 0 auto 12px !important;
    color: #082d22 !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.035em !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-copy {
    max-width: 360px !important;
    margin: 0 auto 20px !important;
    color: #657a72 !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
}

dialog.whatsapp-dialog .whatsapp-qr-frame {
    --gtl-dialog-qr: 192px;
    position: relative !important;
    box-sizing: border-box !important;
    display: block !important;
    width: var(--gtl-dialog-qr) !important;
    height: var(--gtl-dialog-qr) !important;
    min-width: var(--gtl-dialog-qr) !important;
    min-height: var(--gtl-dialog-qr) !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #dbe6e1 !important;
    border-radius: 20px !important;
    background: #ffffff !important;
}

dialog.whatsapp-dialog .whatsapp-qr-frame img {
    position: absolute !important;
    top: calc(var(--gtl-dialog-qr) * -0.749) !important;
    left: calc(var(--gtl-dialog-qr) * -0.199) !important;
    display: block !important;
    width: calc(var(--gtl-dialog-qr) * 1.394) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-steps {
    display: grid !important;
    gap: 10px !important;
    max-width: 390px !important;
    margin: 0 auto 22px !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-steps li {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-steps li::marker {
    content: "" !important;
    font-size: 0 !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-steps li > span {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    background: #e8f5ef !important;
    color: #087a52 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-steps li > p {
    margin: 5px 0 0 !important;
    padding: 0 !important;
    color: #536b63 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

dialog.whatsapp-dialog .whatsapp-dialog-number {
    display: block !important;
    margin: 0 !important;
    color: #082d22 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

@media (max-height: 760px) {
    dialog.whatsapp-dialog {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    dialog.whatsapp-dialog .whatsapp-dialog-mark {
        margin-bottom: 14px !important;
    }

    dialog.whatsapp-dialog #whatsapp-dialog-title {
        font-size: 28px !important;
    }

    dialog.whatsapp-dialog .whatsapp-dialog-copy {
        margin-bottom: 14px !important;
    }

    dialog.whatsapp-dialog .whatsapp-qr-frame {
        --gtl-dialog-qr: 164px;
        margin-bottom: 16px !important;
    }

    dialog.whatsapp-dialog .whatsapp-dialog-steps {
        gap: 7px !important;
        margin-bottom: 14px !important;
    }
}


/* Use the same clean QR presentation as UtuoTech in both G.T.L dialogs. */
#whatsapp-modal .whatsapp-qr-code img,
dialog.whatsapp-dialog .whatsapp-qr-frame img {
    position: static !important;
    display: block !important;
    width: 158px !important;
    height: 158px !important;
    max-width: 158px !important;
    margin: 16px auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
}
#whatsapp-modal .whatsapp-qr-code,
dialog.whatsapp-dialog .whatsapp-qr-frame {
    width: 192px !important;
    height: 192px !important;
    min-width: 192px !important;
    min-height: 192px !important;
}

