:root{--paper:#f5f8fc;--ink:#142443;--muted:#64748b;--accent:#2357ad;--sky:#e8effb;--line:#dce3ee;--mint:#d6e7f8;--dark:#0c1b3b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang HK","Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #72a8f5;outline-offset:5px}p{line-height:1.8}button{color:inherit}.wrap{max-width:1240px;width:calc(100% - 112px);margin:auto}.preview-label{background:var(--dark);color:#d6d0e4;text-align:center;padding:9px 16px;font-size:11px;letter-spacing:1px}.preview-label b{color:#fff;font-weight:500}header{height:106px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:40px;height:43px;object-fit:contain;filter:brightness(0)}.brand-name{font-size:25px;font-weight:800;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:2.2px;margin-top:2px;font-weight:500}nav{display:flex;align-items:center;gap:31px;font-size:13px}nav a:hover{color:var(--accent)}.nav-action{background:var(--ink);color:white!important;border-radius:7px;padding:13px 19px}.arrow{margin-left:17px;font-family:Arial;font-size:19px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;padding:38px 0 66px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:1.8px;display:flex;align-items:center;gap:10px}.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}.hero h1{font-size:clamp(49px,5.2vw,77px);font-weight:800;line-height:1.19;letter-spacing:-3px;margin:30px 0 23px}.hero h1 em{font-style:normal;color:var(--accent);position:relative}.hero h1 em:after{content:"";position:absolute;bottom:-9px;height:3px;background:var(--accent);left:0;width:100%;transform:rotate(-2deg);opacity:.35}.intro{max-width:390px;font-size:15px;color:#64748b;line-height:1.95;margin-bottom:29px}.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:white;border:0;border-radius:7px;padding:17px 23px;font-size:14px;font-weight:600;transition:transform .2s,background .2s}.primary:hover{background:#183f84;transform:translateY(-2px)}.chrome{width:18px;height:18px}.text-link{font-size:13px;border-bottom:1px solid #bac8dc;padding:5px 0}.meta{font-size:10px;color:#718198;margin-top:16px;letter-spacing:.2px}.hero-price{display:flex;align-items:center;gap:13px;margin-top:36px;font-size:12px}.hero-price strong{font-family:Arial,sans-serif;font-size:25px;letter-spacing:-1px}.hero-price span{color:var(--muted)}.hero-price .divider{height:26px;width:1px;background:#d7e0ec}
.showcase{position:relative;background:var(--sky);border-radius:18px;min-height:557px;display:flex;align-items:center;justify-content:center;padding:45px 35px 43px;overflow:hidden}.track{position:absolute;width:600px;height:320px;border:1px solid #d3cbed;border-radius:50%;transform:rotate(-41deg);top:100px;left:-40px}.track:before,.track:after{content:"";position:absolute;inset:26px;border:1px solid #d3cbed;border-radius:50%}.track:after{inset:52px}.scene-label{position:absolute;top:22px;left:24px;font-size:9px;letter-spacing:1.5px;color:#8b7fa8}.scene-label:before{content:"✦";margin-right:7px}.sample{position:absolute;bottom:16px;font-size:9px;color:#756782;letter-spacing:.3px}
.support-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:24px 0;gap:20px;font-size:12px}.support-strip .label{font-size:10px;letter-spacing:1.5px;color:#738199}.support-strip span:not(.label){display:flex;align-items:center;gap:9px}.strip-icon{font-size:18px;font-weight:normal;color:#607b9d}.section{padding:87px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.kicker{font:10px Arial;letter-spacing:2px;color:var(--accent);margin-bottom:15px}.section h2{font-size:34px;letter-spacing:-1px;line-height:1.4;margin:0;font-weight:750}.section-head>p{font-size:13px;max-width:330px;color:var(--muted);margin:0}.features{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px}.feature{padding:26px 0 0;border-top:1px solid #cbd6e5}.feature-number{font:11px Arial;color:#7c8ba1}.feature h3{font-size:19px;font-weight:650;letter-spacing:-.5px;margin:23px 0 10px}.feature p{font-size:13px;color:var(--muted);margin:0;max-width:310px}.mini-art{height:90px;margin:29px 0 0;display:flex;align-items:center;gap:9px}.pair{height:48px;padding:0 18px;background:#e4edf9;border-radius:7px;display:flex;align-items:center;gap:14px;font-size:13px}.pair:last-child{background:#e2edf3}.bars{display:flex;gap:8px;align-items:end;height:60px}.bars span{display:block;width:30px;background:#bed1ed;border-radius:4px 4px 0 0}.bars span:nth-child(2){background:#93b2e0}.bars span:nth-child(3){background:#5b87c5}.bars span:nth-child(4){background:#28589c}.mini-button{display:flex;align-items:center;justify-content:space-between;gap:30px;background:#152c50;color:white;border-radius:6px;padding:13px 19px;font-size:12px}.mini-button span{color:#b3d0f5}
.workflow{background:#e8eef5;border-radius:17px;padding:40px;display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}.workflow h2{font-size:31px}.workflow p{font-size:13px;color:var(--muted);max-width:290px}.workflow .text-link{display:inline-block;margin-top:17px}.steps{list-style:none;padding:0;margin:0}.steps li{display:flex;gap:18px;border-bottom:1px solid #cfd9e6;padding:18px 0}.steps li:first-child{padding-top:0}.steps li:last-child{border:0;padding-bottom:0}.step-num{width:27px;height:27px;flex:none;border:1px solid #bdcadb;border-radius:50%;display:grid;place-items:center;font:11px Arial}.steps h3{margin:1px 0 5px;font-size:14px;font-weight:600}.steps p{margin:0;font-size:12px;max-width:none;line-height:1.7}
.price-section{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:89px 0}.price-section h2{font-size:40px;margin:0 0 18px;line-height:1.45;letter-spacing:-1px}.price-section p{font-size:14px;color:var(--muted);max-width:365px}.price-card{background:var(--dark);color:white;border-radius:15px;padding:34px 36px;position:relative;overflow:hidden}.price-card:after{content:"";position:absolute;width:190px;height:190px;right:-65px;top:-85px;border:1px solid #304869;border-radius:50%;box-shadow:0 0 0 20px #ffffff03,0 0 0 40px #ffffff03;pointer-events:none}.price-card-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}.badge{color:#c8dbf4;border:1px solid #496286;padding:6px 9px;border-radius:5px;font-size:9px}.price-value{font:72px Arial;letter-spacing:-3px;padding:22px 0 24px;display:flex;align-items:baseline;gap:6px}.price-value small{font-size:20px;letter-spacing:0}.price-value span{font-family:"PingFang HK",sans-serif;font-size:12px;letter-spacing:0;color:#a6bbd5;margin-left:6px}.included{border-top:1px solid #31486b;padding:18px 0 23px;display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:12px;color:#d2e1f5}.included span:before{content:"✓";color:#92b9ef;margin-right:9px}.price-card .primary{width:100%;background:#c4dafa;color:#142b4c}.price-card .caption{font-size:10px;color:#a8bbd4;text-align:left;margin:12px 0 0;max-width:none}.closing{border-top:1px solid var(--line);padding:31px 0 40px;display:flex;align-items:start;justify-content:space-between;gap:30px}.closing .brand-name{font-size:20px}.closing .brand-mark{width:30px}.closing p{font-size:10px;color:#76879e;max-width:465px;margin:0;line-height:1.85}.footer-bottom{border-top:1px solid #dfe6ef;display:flex;justify-content:space-between;padding:17px 0 24px;font:10px Arial;color:#7d8ea5;gap:15px}.footer-bottom div{display:flex;gap:20px}
@media(min-width:1500px){.hero{gap:74px;padding-top:52px;padding-bottom:75px}.showcase{min-height:585px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.hero{gap:28px}.hero h1{font-size:58px}.showcase{padding-inline:22px}.float-note{right:9px;padding:12px}.hero-price{gap:9px}.workflow{gap:35px}.price-section{gap:35px}nav{gap:21px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}header{height:86px}.brand-name{font-size:22px}.brand-mark{width:34px;height:37px}nav a:not(.nav-action){display:none}nav .nav-action{padding:11px 13px;font-size:12px}.nav-action .arrow{margin-left:9px}.hero{grid-template-columns:1fr;padding:24px 0 31px;gap:34px}.hero h1{font-size:57px;letter-spacing:-2px;margin-top:22px}.intro{font-size:14px;max-width:100%;margin-bottom:23px}.actions{gap:20px}.primary{padding:16px 20px;font-size:13px}.hero-price{margin-top:26px}.showcase{min-height:540px;padding:42px 20px}.tool{width:300px;max-width:100%;transform:rotate(-1.5deg)}.float-note{bottom:69px;right:6px;padding:11px 13px;font-size:10px}.float-note strong{font-size:11px}.floating-number{display:none}.support-strip{display:grid;grid-template-columns:1fr 1fr;font-size:10px;row-gap:20px;padding:22px 0}.support-strip .label{font-size:9px}.section{padding:52px 0}.section-head{display:block;margin-bottom:30px}.section h2{font-size:29px}.section-head>p{margin-top:15px}.features{grid-template-columns:1fr;gap:24px}.feature{display:grid;grid-template-columns:1fr 1fr;gap:0 15px;padding-top:22px}.feature-number{grid-column:1/-1}.feature h3{font-size:17px;margin:14px 0 9px}.feature p{grid-column:1;font-size:12px}.mini-art{grid-column:2;grid-row:2/4;justify-content:flex-end;margin:15px 0;height:auto}.pair{padding:0 10px;gap:7px;font-size:11px}.mini-button{gap:10px;font-size:10px;padding:13px 10px}.workflow{display:block;padding:26px;border-radius:12px}.workflow h2{font-size:27px}.workflow .text-link{margin-top:3px}.steps{margin-top:30px}.price-section{grid-template-columns:1fr;padding:54px 0;gap:24px}.price-section h2{font-size:32px}.price-card{padding:28px}.price-value{font-size:70px}.closing{display:block}.closing p{margin-top:20px}.footer-bottom{font-size:9px;flex-wrap:wrap}.preview-label{font-size:9px}.sample{font-size:8px}.hero-price strong{font-size:23px}}
@media(max-width:760px){.hero h1{font-size:clamp(30px,10vw,44px);letter-spacing:-1.5px}.hero h1 em{white-space:nowrap}.hero-price{flex-wrap:wrap}.included{font-size:11px}.price-card .primary{font-size:12px}.price-card .arrow{margin-left:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Hybrid preview: preserve the current product's visual language. */
.addon-window {
  width: min(410px, calc(100% - 42px));
  max-height: calc(100svh - 70px);
  overflow: hidden;
  border: 1px solid #101329;
  border-radius: 14px;
  background: #f7f8fb;
  color: #243047;
  box-shadow: 0 45px 90px rgb(10 9 43 / 48%), 0 8px 20px rgb(10 9 43 / 25%);
  transform: rotate(1.5deg) translateY(7px) scale(.95);
}
.addon-topbar {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10.5px;
  padding: 8.4px 9.8px 8.4px 14px;
  background: #23263a;
  color: #fff;
}
.addon-title {
  display: flex;
  align-items: center;
  gap: 7.7px;
  font-size: 18.9px;
  font-weight: 900;
}
.addon-logo {
  width: 23.1px;
  height: 23.1px;
  flex: none;
}
.addon-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.addon-actions {
  display: flex;
  align-items: center;
  gap: 4.9px;
}
.addon-actions span {
  min-width: 48px;
  min-height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #747d94;
  border-radius: 5px;
  background: #34384f;
  font-size: 10.5px;
  font-weight: 800;
}
.addon-actions .close {
  min-width: 34px;
  border-radius: 50%;
  background: transparent;
  font-size: 14px;
}
.addon-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9.8px;
  padding: 5.88px 9.1px;
  border-bottom: 1px solid #171b2e;
  background: #2d3045;
  color: #cbd2e2;
  font-size: 10.08px;
  line-height: 1.25;
}
.addon-connection {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6.3px;
  font-weight: 700;
}
.addon-status i {
  width: 7.28px;
  height: 7.28px;
  flex: none;
  border-radius: 50%;
  background: #39b96b;
  box-shadow: 0 0 0 2.8px rgb(57 185 107 / 16%);
}
.addon-version {
  flex: none;
  color: #dbe2f1;
  white-space: nowrap;
}
.addon-version span {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.addon-body {
  padding: 10.08px;
  background: #f7f8fb;
}
.mock-meeting-category {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-bottom: 1px solid #d5dbe5;
  background: #edf2f9;
  color: #203f78;
  font-size: 12px;
  line-height: 1.4;
}
.mock-meeting-category > span {
  flex: none;
  padding: 3px 5px;
  border: 1px solid #c0cede;
  border-radius: 3px;
  background: #fff;
  color: #536780;
  white-space: nowrap;
}
.mock-meeting-category > .active {
  background: #203f78;
  color: #fff;
  font-weight: 700;
}
.mock-meeting-category > strong {
  margin-left: auto;
  white-space: nowrap;
}
html:lang(en) .mock-meeting-category > span { font-size: 11px; padding: 3px; }
.mock-member-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-bottom: 7.7px;
  padding: 3.92px 7px;
  border: 1px solid #a6d8ba;
  border-radius: 4px;
  background: #edf9f2;
  color: #17643c;
  font-size: 10.08px;
  line-height: 1.15;
}
.mock-member-bar > span {
  flex: none;
  padding: 0.84px 5.32px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #d9f2e3;
  font-weight: 800;
}
.addon-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.9px;
  margin-bottom: 9.1px;
}
.addon-tabs span {
  min-height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #adb6c4;
  border-radius: 5px;
  background: #fff;
  color: #48566b;
  font-size: 12.04px;
  font-weight: 900;
}
.addon-tabs .active {
  border-color: #ce6666;
  background: #e98282;
  color: #531e25;
}
.mock-field {
  margin-bottom: 8.12px;
}
.mock-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.92px;
  color: #3b4557;
  font-size: 12.04px;
}
.mock-label small {
  color: #7a8495;
  font-size: 10.36px;
}
.mock-label-actions {
  display: inline-flex;
  align-items: center;
  gap: 6.3px;
}
.mock-select-all {
  padding: 1.12px 5.32px;
  border: 1px solid #c7ced9;
  border-radius: 4px;
  background: #f5f7fa;
  color: #536176;
  font-size: 9.52px;
  line-height: 1.2;
}
.mock-money {
  height: 31px;
  display: flex;
  align-items: center;
  gap: 4.9px;
  border: 1px solid #aeb7c5;
  border-radius: 5px;
  background: #fff;
  padding: 0 9.1px;
  font-size: 14px;
}
.horse-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3.92px;
}
.horse-grid span {
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid #aeb6c2;
  border-radius: 5px;
  background: linear-gradient(#fff, #edf0f4);
  color: #334052;
  font-size: 11.2px;
  font-weight: 800;
}
.horse-grid .banker {
  border-color: #ce6666;
  background: #ef8989;
  color: #4f1720;
}
.horse-grid .leg {
  border-color: #143b7c;
  background: #214d93;
  color: #fff;
}
.horse-grid .unavailable {
  opacity: .36;
}
.mock-selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin: 9.1px 0;
  border: 1px solid #c7ced9;
  border-radius: 5px;
  background: #eef2f7;
  padding: 6.3px;
  font-size: 10.92px;
}
.mock-selection div {
  display: grid;
  gap: 1.68px;
}
.mock-selection .mock-selection-picks {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  column-gap: .55em;
}
.mock-selection-banker {
  flex: none;
  white-space: nowrap;
}
.mock-selection-leg-group {
  min-width: 0;
  flex: 1 1 112px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
}
.mock-selection-leg-list {
  overflow-wrap: anywhere;
}
.mock-selection small {
  color: #596578;
}
.mock-selection > span {
  border: 1px solid #8d96a5;
  border-radius: 4px;
  background: #fff;
  padding: 5.88px 7.7px;
  font-weight: 800;
}
.mock-calculate {
  width: 100%;
  height: 34px;
  margin-bottom: 7.7px;
  border: 1px solid #a73d3d;
  border-radius: 4px;
  background: #e46f6f;
  color: #fff;
  font-size: 11.48px;
  font-weight: 900;
  pointer-events: none;
}
.mock-results {
  overflow: hidden;
  border: 1px solid #c7ced9;
  border-radius: 5px;
  background: #fff;
  font-size: 11.2px;
}
.mock-recommendation {
  display: grid;
  gap: 0.84px;
  padding: 5.6px 7px;
  border-bottom: 1px solid #b9d1f4;
  background: #eef5ff;
  color: #244f8f;
  line-height: 1.35;
}
.mock-recommendation strong {
  color: #173d76;
  font-size: 11.48px;
}
.mock-betslip-actions {
  display: grid;
  gap: 4.2px;
  padding: 5.88px;
  border-bottom: 1px solid #d5dbe5;
}
.mock-add,
.mock-clear-betslip {
  width: 100%;
  min-height: 27px;
  border-radius: 4px;
  font-size: 10.64px;
  font-weight: 900;
  pointer-events: none;
}
.mock-add {
  border: 1px solid #17643c;
  background: #238653;
  color: #fff;
}
.mock-clear-betslip {
  border: 1px solid #a32d2d;
  background: #fff5f5;
  color: #a32d2d;
}
.mock-result-section + .mock-result-section {
  border-top: 4px solid #d5dbe5;
}
.mock-result-section h3 {
  margin: 0;
  padding: 3.36px 6.3px;
  background: #e8edf5;
  color: #203f78;
  font-size: 10.36px;
}
.mock-results .result-head,
.mock-result-row {
  min-height: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 66px;
  align-items: center;
  gap: 5.6px;
  padding: 3.5px 7.7px;
  border-bottom: 1px solid #e1e5eb;
}
.mock-results .result-head {
  min-height: 24px;
  padding-block: 2.1px;
  background: #203f78;
  color: #fff;
  font-weight: 800;
}
.mock-results .result-head > :first-child,
.mock-result-row > :first-child {
  text-align: left;
}
.mock-results .result-head > :nth-child(2),
.mock-result-row > :nth-child(2) {
  text-align: center;
}
.mock-results .result-head > :last-child,
.mock-result-row > :last-child {
  text-align: right;
}
.mock-results strong {
  color: #193b75;
}
.mock-results b {
  color: #b45309;
}
.mock-result-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.68px 7px;
  padding: 4.2px 7px;
  background: #f5f7fa;
  color: #586477;
  font-size: 9.8px;
}
.mock-result-summary strong,
.mock-result-summary b {
  color: #193b75;
  text-align: right;
}
.mock-result-summary b {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  color: #238653;
}
.mock-approximation-mark {
  margin-right: 1px;
  font-size: 1.55em;
  line-height: .7;
  font-weight: 800;
  transform: translateY(.14em);
}
.mock-disclaimer {
  margin: 7.7px 0 0;
  color: #707b8d;
  font-size: 9.52px;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-align: center;
  white-space: nowrap;
}

.addon-display{width:350px;flex:none;position:relative;z-index:1;transform:rotate(-1deg);zoom:.82}
.addon-window{width:100%;max-height:none;transform:none;border-radius:10px;box-shadow:0 18px 45px #49377625}
.addon-topbar{gap:8px;padding:8px 10px}
.addon-actions span{min-width:40px;min-height:28px}
.addon-actions .close{min-width:28px}
.mock-disclaimer{white-space:normal}
.showcase{padding:50px 25px 42px;min-height:0}
.scene-label{font-size:11px;letter-spacing:1px}
.hero{padding-top:22px;gap:52px}
.hero h1{font-size:70px;line-height:1.06;margin:25px 0 28px;letter-spacing:-3px}
.hero h1 em{font-family:Arial,sans-serif;font-size:1.62em;line-height:1.15;letter-spacing:-5px}
.hero h1 em:after{display:none}
.currency{font-size:.58em;vertical-align:12%;margin-right:5px}
.exclamation{font-family:"PingFang HK",sans-serif;font-size:.72em}
.hero-question{font-size:25px;line-height:1.6;letter-spacing:-.6px;margin:0 0 15px;font-weight:650}
.hero .intro{max-width:440px;font-size:14px;margin:0 0 28px;line-height:1.95}
.hero-price{margin-top:28px}
@media(max-width:1100px) and (min-width:761px){.hero{gap:30px}.hero h1{font-size:58px}.hero-question{font-size:22px}.showcase{padding-inline:16px}.addon-display{zoom:.92}.desktop-break{display:none}}
@media(max-width:760px){.hero{gap:32px;padding-top:22px}.hero h1{font-size:54px;margin:22px 0}.hero h1 em{font-size:1.55em;letter-spacing:-3px}.hero-question{font-size:22px;line-height:1.55}.hero .intro{font-size:13px;margin-bottom:23px}.desktop-break{display:none}.showcase{padding:46px 28px 38px}.addon-display{transform:none}.scene-label{left:20px;font-size:10px}.sample{font-size:8px}.hero-price{margin-top:24px}}
@media(max-width:430px){.addon-display{zoom:.78}}
@media(max-width:370px){.addon-display{zoom:.64}.hero h1{font-size:48px}.hero-question{font-size:20px}.actions{gap:15px}.hero .primary{padding:15px}}


/* Product-in-context scene: the supplied screenshot stays unmodified. */
.hero{display:block;padding:24px 0 48px}
.hero-copy{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px;margin:0 0 40px}
.hero h1{font-size:66px;margin:20px 0 0}
.hero h1 br{display:none}
.hero h1 em{display:block;font-size:1.55em}
.hero-question{font-size:24px}
.hero .intro{font-size:13px;margin-bottom:20px}
.hero-price{margin-top:18px}
.product-scene{display:block;padding:0;min-height:0;background:radial-gradient(ellipse at 80% 39%,#355ab9a6,transparent 43%),linear-gradient(180deg,#080d26 0%,#152865 37%,#698aca 66%,#eaf0fb 92%,#f7f8fb 100%);border:1px solid #cfd6e3;border-radius:22px;isolation:isolate;overflow-x:clip;overflow-y:visible}
.scene-heading{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:28px 34px;color:#fff}
.scene-heading span{font:10px Arial,sans-serif;letter-spacing:2.4px;color:#a4b5d8}
.scene-heading strong{font-size:16px;font-weight:500;letter-spacing:.6px}
.scene-viewport{position:relative;width:100%;aspect-ratio:1100 / 755}
.scene-canvas{position:absolute;top:0;left:0;width:1100px;height:755px;transform:scale(var(--scene-scale,1));transform-origin:top left}
.desk-shadow{position:absolute;left:70px;bottom:25px;width:980px;height:50px;background:radial-gradient(ellipse,#18264f60,transparent 69%);filter:blur(12px)}
.monitor{position:absolute;left:175px;top:78px;width:866px;height:620px;perspective:1800px}
.monitor-shell{position:relative;z-index:2;width:100%;padding:13px 13px 25px;background:linear-gradient(115deg,#6d7485,#10121a 3%,#171b26 94%,#606879 99%,#242934);border:1px solid #727c91;border-radius:16px;box-shadow:-18px 22px 44px #02072150,5px 0 0 #6b7388;transform:rotateY(8deg) rotateZ(-2deg)}
.monitor-screen{height:497px;overflow:hidden;background:#e7e7e7;border:1px solid #000;border-radius:4px}
.browser-bar{height:27px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#e8ebf2;border-bottom:1px solid #c9d0df;color:#63718a;font:10px Arial,sans-serif}
.browser-dots{font-size:9px;letter-spacing:2px;color:#9199a8}
.browser-address{background:#f7f8fb;border-radius:4px;text-align:center;width:63%;padding:4px}
.hkjc-screen{width:100%;height:auto;display:block}
.monitor-led{position:absolute;bottom:10px;left:50%;width:5px;height:3px;border-radius:3px;background:#bbcfff;box-shadow:0 0 7px #aabfff}
.monitor-neck{position:absolute;z-index:1;left:40%;top:493px;width:190px;height:141px;background:linear-gradient(105deg,#181e2d,#596274 50%,#202839 70%);clip-path:polygon(22% 0,75% 0,87% 100%,0 100%);transform:skewX(-8deg)}
.monitor-foot{position:absolute;top:617px;left:27%;width:360px;height:28px;background:linear-gradient(#6a7383,#171d2b 65%);border-radius:50%;box-shadow:0 8px 8px #17274733;transform:skewX(-14deg)}
.product-scene .addon-display{position:absolute;left:62px;top:37px;width:350px;zoom:1;transform:perspective(1500px) rotateY(5deg) rotateZ(-1.3deg) scale(.79);transform-origin:top left;z-index:4}
.product-scene .addon-window{border:1px solid #b5c2ed;border-radius:11px;box-shadow:-22px 22px 45px #02062266,0 0 0 5px #ccdfff15,0 0 26px #b6d5ff30}
.addon-glow{position:absolute;z-index:3;left:332px;top:64px;width:17px;height:560px;border-radius:50%;background:#d9f3ff;filter:blur(12px);opacity:.6}
.addon-callout{position:absolute;z-index:5;left:92px;top:3px;color:#e5edff;font-size:12px;letter-spacing:1px}
.addon-callout span{display:inline-block;width:6px;height:6px;background:#b9ffd7;box-shadow:0 0 9px #b9ffd799;border-radius:50%;margin-right:7px}
.scene-disclaimer{position:relative;margin:0;padding:0 24px 22px;text-align:center;color:#647086;font-size:10px;line-height:1.7}
@media(max-width:1000px) and (min-width:761px){.hero-copy{gap:30px}.hero h1{font-size:58px}.hero-question{font-size:21px}.scene-heading{padding:25px}.scene-heading strong{font-size:14px}}
@media(max-width:760px){.hero{padding:18px 0 30px}.hero-copy{grid-template-columns:1fr;gap:25px;margin-bottom:28px}.hero h1{font-size:48px;margin-top:18px}.hero h1 br{display:none}.hero h1 em{display:inline;margin-left:12px;font-size:1.2em;letter-spacing:-2px}.hero-question{font-size:21px}.hero .intro{font-size:13px}.hero-price{margin-top:19px}.product-scene{border-radius:14px}.scene-heading{display:block;padding:20px 18px 15px}.scene-heading span{display:block;font-size:8px;letter-spacing:1.5px}.scene-heading strong{display:block;font-size:15px;margin-top:10px}.scene-viewport{aspect-ratio:1100 / 790}.scene-disclaimer{font-size:9px;padding:0 15px 17px}.product-scene .addon-display{zoom:1}.hero .hero-heading h1 .currency{font-size:.64em}}
@media(max-width:370px){.hero h1{font-size:39px}.hero h1 em{margin-left:7px}.scene-heading strong{font-size:13px}}


/* Full-bleed opening scene with navigation on the same background. */
body{background:var(--paper)}
.product-scene{width:100%;border:0;border-radius:0;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at 70% 38%,#355ab980,transparent 48%),linear-gradient(180deg,#080d26 0%,#152865 36%,#698aca 65%,#eaf0fb 89%,var(--paper) 100%)}
.scene-nav{position:relative;z-index:6;width:calc(100% - 96px);max-width:1320px;height:110px;flex:none;margin:0 auto;color:#fff}
.scene-nav .brand-mark{filter:none;width:46px;height:49px}
.scene-nav .brand-name{font-size:27px}
.scene-nav .brand small{color:#bbc6e1}
.scene-nav nav{gap:32px}
.scene-nav nav a:hover{color:#c4d5ff}
.scene-nav .nav-action{background:#ffffff0d;border:1px solid #ffffff4a;color:#fff!important;border-radius:7px}
.product-scene .scene-viewport{width:min(1320px,calc(100% - 64px),calc((100svh - 160px)*1100/755));margin:12px auto 0;flex:none;aspect-ratio:1100 / 755}
.scene-disclaimer{padding:12px 24px 20px;font-size:10px;color:#66718a}
.scene-preview-tag{font:8px Arial,sans-serif;letter-spacing:1.2px;display:inline-block;margin-right:15px;color:#8991a2}
.hero{padding:74px 0 64px}
.hero-copy{margin:0;gap:80px}
@media(min-width:1500px){.scene-nav{height:120px}.product-scene .scene-viewport{width:min(1450px,calc(100% - 100px),calc((100svh - 180px)*1100/755))}}
@media(max-width:1000px) and (min-width:761px){.scene-nav{width:calc(100% - 64px)}.scene-nav nav{gap:20px}.hero-copy{gap:35px}}
@media(max-width:760px){.product-scene{min-height:0;border-radius:0}.scene-nav{width:calc(100% - 40px);height:94px}.scene-nav .brand-mark{width:35px;height:38px}.scene-nav .brand-name{font-size:22px}.scene-nav nav{gap:0}.scene-nav .nav-action{font-size:11px;padding:11px 12px}.product-scene .scene-viewport{width:calc(100% - 12px);margin:20px auto 0;aspect-ratio:1100 / 755}.scene-disclaimer{padding:14px 22px 20px;font-size:9px;max-width:500px;align-self:center}.scene-preview-tag{display:block;margin:0 0 6px;font-size:7px}.hero{padding:36px 0 35px}.hero-copy{gap:26px;margin:0}}


/* Blue theme and a compact first screen: scene, headline, price and actions. */
.product-scene{min-height:0;justify-content:flex-start}
.scene-nav{height:82px}
.product-scene .scene-viewport{width:min(1160px,calc(100% - 60px),calc((100svh - 397px)*1100/720));aspect-ratio:1100 / 720;margin:32px auto 0}
.monitor{top:48px}
.product-scene .addon-display{top:-33px}
.addon-glow{top:34px}
.addon-callout{display:none}
.scene-canvas{height:720px}
.scene-disclaimer{padding:0 20px 8px;font-size:9px}
.scene-preview-tag{display:none}
.hero{padding:24px 0 30px}
.hero-copy{grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.hero .eyebrow{font-size:12px;letter-spacing:1.2px;color:#425a7b}
.hero h1{font-size:clamp(32px,3.8vw,49px);line-height:1.3;letter-spacing:-1.5px;margin:14px 0 0}
.hero h1 br{display:block}
.hero h1 em{display:inline;font-family:inherit;font-size:1em;line-height:inherit;letter-spacing:inherit;margin:0}
.hero .intro{font-size:13px;line-height:1.8;margin-bottom:15px;max-width:none}
.hero .primary{padding:14px 19px;font-size:13px}
.hero .actions{gap:23px}
.hero .meta{font-size:9px;margin:10px 0 0}
.hero-price{margin-top:14px}
@media(max-width:1000px) and (min-width:761px){.hero-copy{gap:30px}.hero h1{font-size:35px}.hero .primary{font-size:12px;padding:13px 15px}.hero .actions{gap:15px}.hero-price{flex-wrap:wrap}}
@media(max-width:760px){.scene-nav{height:75px}.product-scene .scene-viewport{width:calc(100% - 14px);aspect-ratio:1100 / 720;margin:24px auto 0}.addon-callout{top:-10px}.scene-disclaimer{font-size:8px;padding:0 20px 10px;line-height:1.5}.hero{padding:18px 0 28px}.hero-copy{grid-template-columns:1fr;gap:15px}.hero .eyebrow{font-size:11px;letter-spacing:.6px}.hero h1{font-size:32px;margin:10px 0 0;letter-spacing:-1px}.hero h1 em{display:inline;font-size:1em;margin:0;letter-spacing:inherit}.hero .intro{font-size:12px;margin-bottom:14px}.hero .actions{gap:18px}.hero .primary{font-size:12px;padding:13px 16px}.hero-price{margin-top:12px;font-size:11px}}
@media(max-width:370px){.hero h1{font-size:29px}.hero .actions{gap:13px}.hero .primary{padding:12px;font-size:11px}.hero .text-link{font-size:12px}.scene-nav .nav-action{font-size:10px;padding:10px}.scene-nav .brand-name{font-size:20px}}

.workflow .download-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;padding:17px 23px;min-height:54px;background:#2357ad;color:#fff;border:1px solid #1b4996;border-radius:8px;font-size:14px;font-weight:700;box-shadow:0 5px 14px #163e7e20;transition:background .2s,transform .2s}
.workflow .download-button:hover{background:#183f84;transform:translateY(-2px)}
.download-button>svg{width:20px;height:20px;flex:none}
.download-copy{display:grid;gap:4px;text-align:left}
.download-copy small{font-size:10px;font-weight:400;color:#dceaff;letter-spacing:.3px}
.download-button .arrow{margin-left:4px}
@media(max-width:760px){.workflow .download-button{width:100%;margin-top:13px;padding:16px 18px}}
/* Separate the introduction and features with whitespace rather than a rule. */
#features{border-top:0;padding-top:56px}
@media(max-width:760px){#features{padding-top:32px}}
/* Place the scene disclosure below the navigation, in the upper-right corner. */
.product-scene>.scene-disclaimer{position:absolute;z-index:5;top:106px;right:48px;width:440px;max-width:48%;margin:0;padding:0;text-align:right;font-size:10px;line-height:1.7;color:#c8d6ef}
@media(min-width:1500px){.product-scene>.scene-disclaimer{right:max(48px,calc((100% - 1320px)/2))}}
@media(max-width:760px){.scene-nav{order:0}.product-scene>.scene-disclaimer{position:relative;order:1;top:auto;right:auto;align-self:flex-end;width:calc(100% - 40px);max-width:360px;margin:0 20px;padding:0;font-size:8px;color:#c8d6ef;text-align:right}.product-scene .scene-viewport{order:2;margin-top:18px}}
.install-detail p+p{margin-top:10px}.install-detail strong{color:#304865;font-weight:650}.install-detail code{font:11px ui-monospace,SFMono-Regular,Consolas,monospace;background:#dce6f3;padding:2px 4px;border-radius:3px;overflow-wrap:anywhere}.install-detail .install-detail-note{margin-top:13px;padding:10px 12px;border-left:2px solid #8faacd;background:#f4f7fb;font-size:11px;color:#586b84}

/* Preserve the approved gradient while restoring the earlier scene composition. */
.product-scene{background:radial-gradient(ellipse at 46% 46%,#3280e777,transparent 43%),linear-gradient(180deg,#020719 0%,#071440 26%,#123d91 53%,#5d9ae1 76%,#dcecf9 92%,var(--paper) 100%)}
/* Refine the physical monitor: a single perspective, thin bezel and weighted metal stand. */
.monitor{perspective:none;transform:perspective(2200px) rotateY(-5deg) rotateZ(-1.2deg);transform-origin:50% 55%}
.monitor-shell{padding:9px 9px 20px;transform:none;border:1px solid #647080;border-radius:8px;background:linear-gradient(120deg,#303641 0%,#141820 34%,#191e27 90%,#343c49 100%);box-shadow:3px 1px 0 #87919d,6px 2px 0 #262e3a,0 20px 35px #05152d38,inset 0 1px 0 #9ba3b04a}
.monitor-screen{border:1px solid #080b10;border-radius:2px;box-shadow:0 0 0 1px #0008}
.monitor-led{left:auto;right:23px;bottom:8px;width:3px;height:2px;background:#c5d5de;box-shadow:none}
.monitor-neck{left:44%;top:514px;width:105px;height:113px;clip-path:polygon(17% 0,83% 0,100% 100%,0 100%);transform:none;background:linear-gradient(90deg,#657181 0%,#acb6c2 9%,#8895a5 32%,#717e90 78%,#c0c8d1 94%,#606c7d 100%);box-shadow:inset 0 15px 20px #15233770}
.monitor-neck:after{content:"";position:absolute;top:48px;left:44px;width:18px;height:32px;border-radius:10px;background:#202c3d;box-shadow:inset 1px 2px 3px #050b13,1px 1px 0 #c3cbd2}
.monitor-foot{left:32%;top:612px;width:305px;height:42px;border-radius:5px;transform:perspective(400px) rotateX(57deg);transform-origin:center;background:linear-gradient(180deg,#9eaab9,#b7c1cd 52%,#7c899b 93%,#4d5d73 94%);border:1px solid #bcc5d0;box-shadow:0 5px 0 #48576b,0 12px 12px #14274445}
.desk-shadow{left:310px;bottom:23px;width:650px;height:32px;background:radial-gradient(ellipse,#1a2e4966,transparent 68%);filter:blur(9px)}

.scene-nav .language-toggle{border:1px solid #ffffff4a;border-radius:6px;background:transparent;color:white;padding:10px 11px;font-size:12px;min-height:40px;flex:none}
.scene-nav .language-toggle:hover{background:#ffffff16}
html[lang="en"] .brand-name{font-size:21px;letter-spacing:-.6px;white-space:nowrap}
html[lang="en"] .brand small{display:none}
html[lang="en"] .hero h1{font-size:clamp(30px,3.4vw,45px);letter-spacing:-1.5px}
html[lang="en"] .hero .eyebrow{letter-spacing:.5px}
html[lang="en"] .hero h1 em{white-space:normal}
html[lang="en"] .addon-title{font-size:15px;gap:5px}
html[lang="en"] .addon-actions{gap:3px}
html[lang="en"] .addon-actions span{min-width:38px;font-size:10px}
html[lang="en"] .mock-selection-picks{font-size:10px}
html[lang="en"] .mock-betslip-actions button{font-size:10px}
html[lang="en"] .mock-result-summary{font-size:10px}
html[lang="en"] .download-button{gap:11px;padding-inline:18px}
html[lang="en"] .download-copy{font-size:13px}
html[lang="en"] .price-section h2{font-size:36px}
@media(min-width:761px){.scene-nav nav{gap:24px}}
@media(max-width:1000px) and (min-width:761px){.scene-nav nav{gap:15px}html[lang="en"] .scene-nav .nav-action{padding:12px;font-size:12px}}
@media(max-width:760px){.scene-nav{gap:10px}.scene-nav nav{gap:8px}.scene-nav .language-toggle{font-size:11px;padding:9px;min-height:36px}html[lang="en"] .scene-nav .brand-name{font-size:16px}html[lang="en"] .scene-nav .brand{gap:7px}html[lang="en"] .scene-nav .brand-mark{width:28px}html[lang="en"] .scene-nav .nav-action{font-size:10px;padding:10px}html[lang="en"] .scene-nav .nav-action .arrow{display:none}html[lang="en"] .hero h1{font-size:32px;line-height:1.25}html[lang="en"] .hero .eyebrow{font-size:10px}html[lang="en"] .hero .actions{gap:14px}html[lang="en"] .hero .text-link{font-size:12px}html[lang="en"] .hero .text-link .arrow{margin-left:6px}html[lang="en"] .hero-price{gap:9px}html[lang="en"] .feature{grid-template-columns:1fr}html[lang="en"] .feature .mini-art{grid-column:1;grid-row:auto;justify-content:flex-start;margin:20px 0 0}html[lang="en"] .feature p{max-width:none}html[lang="en"] .price-section h2{font-size:30px}html[lang="en"] .included{gap:14px 8px}html[lang="en"] .download-button{padding-inline:12px;gap:9px}html[lang="en"] .download-copy{font-size:12px}}
@media(max-width:370px){html[lang="en"] .scene-nav .brand-mark{display:none}html[lang="en"] .hero h1{font-size:29px}}
/* Emphasize the amount while keeping the per-day unit secondary. */
.price-card .price-value{font-weight:700}
.price-card .price-value small{font-weight:700}
.price-card .price-value>span{font-weight:400}
/* Give the race-day price more emphasis without enlarging its supporting copy. */
.hero-price strong{font-size:32px;line-height:1.1}
.price-card .price-value{font-size:84px}
.price-card .price-value small{font-size:24px}
@media(max-width:760px){
  .hero-price{flex-wrap:wrap;row-gap:8px}
  .hero-price strong{font-size:30px}
  .price-card .price-value{font-size:76px;flex-wrap:wrap}
  .price-card .price-value small{font-size:22px}
}
/* Compact installation action in desktop navigation. */
@media(min-width:761px){
  .scene-nav .nav-action,
  html[lang="en"] .scene-nav .nav-action{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:11px;line-height:1.2;padding:8px 12px;min-height:34px;border-radius:6px}
  .scene-nav .nav-action .arrow{font-size:14px;margin-left:8px}
}
/* Compact mobile navigation. */
@media(max-width:760px){
  .scene-nav .brand{flex-shrink:0}
  .scene-nav .brand-name{white-space:nowrap}
  .scene-nav nav{gap:7px;flex-shrink:0}
  .scene-nav .nav-action,
  html[lang="en"] .scene-nav .nav-action{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-size:10px;line-height:1.2;padding:8px 9px;min-height:32px;border-radius:6px}
  .scene-nav .nav-action .arrow{display:none}
  .scene-nav .language-toggle{padding:7px 8px;min-height:32px}
}

.desktop-install-notice{display:flex;align-items:flex-start;gap:10px;margin-top:20px;max-width:360px}
.desktop-install-notice svg{width:21px;height:21px;flex:none;color:#2357ad}
.desktop-install-notice strong{display:block;font-size:13px;line-height:1.5;color:#1d4582}
.desktop-install-notice span{display:block;font-size:11px;line-height:1.7;color:#64748b;margin-top:3px}
.install-visuals{grid-column:1/-1;border-top:1px solid #cbd8e9;padding-top:30px;min-width:0}
.install-video{grid-column:1/-1;min-width:0;border-top:1px solid #cbd8e9;padding-top:30px}
.install-video-link{color:#2357ad;font-size:12px;line-height:1.6;text-decoration:underline;text-underline-offset:3px}
.install-video-player{aspect-ratio:16/9;overflow:hidden;border:1px solid #c4d3e8;border-radius:10px;background:#152d50}
.install-video-player iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:760px){.install-video{margin-top:30px;padding-top:25px}}
.guide-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:22px}
.guide-heading h3{font-size:20px;margin:0;letter-spacing:-.4px}
.workflow .guide-heading p{font-size:10px;max-width:440px;margin:0;color:#6a7c93}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.guide-card{margin:0;min-width:0}
.guide-art{height:216px;background:#f9fbff;border:1px solid #c4d3e8;border-radius:10px;overflow:hidden;box-shadow:0 6px 15px #163e7e07;position:relative;color:#304865;font:11px Arial,"PingFang HK","Microsoft JhengHei",sans-serif}
.guide-window-bar{height:32px;border-bottom:1px solid #dce5f1;background:#edf2f9;display:flex;align-items:center;gap:12px;padding:0 12px;font-size:10px}
.guide-window-dots{font-size:6px;letter-spacing:2px;color:#a5b5ca;white-space:nowrap}
.unzip-flow{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);justify-items:center;align-items:center;padding:24px 12px 8px}
.zip-file{position:relative;width:48px;height:59px;border:1px solid #abc0dc;border-radius:5px;background:#fff;box-shadow:0 4px 10px #163e7e0c}
.zip-stitch{position:absolute;left:21px;top:0;height:30px;width:5px;background:repeating-linear-gradient(#91a9c9 0 3px,transparent 3px 5px)}
.zip-file b{position:absolute;bottom:7px;left:10px;font-size:12px;letter-spacing:1px;color:#2357ad}
.guide-folder{width:70px;height:59px}
.unzip-arrow{font-size:24px;color:#7b9cc7}
.unzip-names{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);justify-items:center;align-items:start;padding:0 12px;text-align:center;font-size:10px}
.unzip-names strong{grid-column:3}
.unzip-names strong{font-weight:500;color:#2357ad}
.guide-os-hint{position:absolute;bottom:15px;left:12px;right:12px;display:grid;gap:4px;text-align:center;font-size:10px;color:#657c9b}
.guide-address{font-size:10px;background:#fff;border-radius:20px;padding:4px 9px;flex:1}
.chrome-toolbar{display:flex;justify-content:space-between;align-items:center;padding:18px 12px 14px;gap:6px}
.chrome-toolbar>strong{font-size:12px}
.developer-setting{display:flex;gap:7px;align-items:center;font-size:9px;position:relative;padding:7px;border:1px dashed #5982c0;border-radius:5px}
.guide-switch{display:block;width:25px;height:14px;border-radius:15px;background:#2357ad;position:relative;flex:none}
.guide-switch:after{content:"";position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#fff}
.guide-pointer{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#2357ad;color:white;font-size:10px;position:absolute;right:-7px;top:-8px}
.load-unpacked{position:relative;width:max-content;max-width:calc(100% - 28px);margin-left:14px;border:1px solid #2357ad;border-radius:5px;background:#edf4ff;color:#2357ad;padding:9px 13px;font-weight:600;font-size:10px}
.load-unpacked .guide-pointer{left:-8px;right:auto}
.chrome-placeholder{display:flex;align-items:center;gap:10px;margin:14px;padding:10px;border:1px solid #e0e7f0;border-radius:6px;background:#fff}
.extension-puzzle{font-size:20px;color:#a3b8d5}
.chrome-placeholder div{flex:1}.chrome-placeholder i{display:block;height:4px;background:#e3eaf4;border-radius:5px;width:64%;margin:4px 0}.chrome-placeholder i+ i{width:40%}
.guide-ui-note{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;font-size:9px;color:#657c9b}
.folder-location{padding:14px 14px 10px;font-size:10px;color:#64748b}
.selected-folder{margin:0 11px;background:#dfebfc;border:1px solid #95b4e0;border-radius:4px;padding:10px 8px;display:flex;align-items:center;gap:7px;font-size:9px;color:#214d8d}
.selected-folder strong{font-size:9px;font-weight:500;overflow-wrap:anywhere}
.folder-glyph{color:#2357ad;font-size:16px}
.folder-contents{display:flex;align-items:center;gap:9px;margin:10px 24px;color:#7b8da5;font-size:10px}
.folder-contents code{font-size:10px;color:#405b7c}.file-indicator{color:#438067}
.folder-bottom{position:absolute;bottom:15px;right:15px}
.folder-bottom>span:first-child{display:inline-block;background:#2357ad;color:white;padding:8px 14px;border-radius:5px;font-size:10px}
.guide-cursor{font-size:25px;position:absolute;right:-7px;bottom:-14px;color:#142443;text-shadow:1px 1px #fff,-1px -1px #fff}
.guide-card figcaption{display:flex;gap:11px;margin-top:17px}
.guide-step{font:11px Arial;color:#2357ad;padding-top:3px;flex:none}
.guide-card h4{font-size:13px;line-height:1.5;margin:0 0 6px}
.workflow .guide-card p{font-size:11px;line-height:1.8;max-width:none;margin:0;color:#65758b;overflow-wrap:anywhere}
.workflow .guide-finish{max-width:none;font-size:12px;color:#3d5678;margin:24px 0 0;background:#f5f8fd;border-radius:7px;padding:13px 16px}
.guide-finish>span{color:#2357ad;margin-right:7px}
html[lang="en"] .developer-setting{font-size:8px;gap:4px;padding:6px 4px}
html[lang="en"] .chrome-toolbar>strong{font-size:10px}
@media(max-width:1100px) and (min-width:761px){.guide-grid{gap:12px}.guide-window-bar{padding-inline:8px;gap:6px}.chrome-toolbar{padding-inline:8px}.developer-setting{font-size:8px;gap:4px;padding:5px}.chrome-toolbar>strong{font-size:10px}.unzip-names{font-size:9px}.selected-folder{gap:4px;padding-inline:5px}}
@media(max-width:760px){.install-visuals{margin-top:30px;padding-top:25px}.guide-heading{display:block}.workflow .guide-heading p{margin-top:8px;max-width:none;line-height:1.7}.guide-grid{grid-template-columns:1fr;gap:26px}.guide-art{height:216px}.desktop-install-notice{margin-top:17px}.desktop-install-notice strong{font-size:12px}.guide-card figcaption{margin-top:13px}.workflow .guide-finish{font-size:11px}.guide-heading h3{font-size:19px}}

.art-style-1{height:54px}
.art-style-2{height:38px}
.art-style-3{height:28px}
.art-style-4{height:18px}
.art-style-5{font:11px Arial;color:#718198;margin-left:16px}
.art-style-6{font-size:21px;color:#264c7d;line-height:1.8}
/* Mobile close-up: keep the Addon in view and crop the monitor's right side.
   Desktop composition is deliberately unchanged. */
@media(max-width:760px){
  .product-scene .scene-viewport{aspect-ratio:1100 / 1080}
  .product-scene .scene-canvas{transform:scale(calc(var(--scene-scale,1)*1.5)) translateX(-40px)}
}
@media(max-width:480px){
  .product-scene .scene-viewport{aspect-ratio:1100 / 1420}
  .product-scene .scene-canvas{transform:scale(calc(var(--scene-scale,1)*2)) translateX(-40px)}
}

/* Existing utility content retained below the redesigned homepage. */
.direction-icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.125em}
.guide-cursor .direction-icon{filter:drop-shadow(1px 1px 0 white)}
.skip-link{position:absolute;left:20px;top:-100px;z-index:20;padding:12px;background:white;color:#142443}.skip-link:focus{top:12px}
.home-extras{margin:0 0 50px}.home-extras details{border-top:1px solid var(--line);padding:20px 0}.home-extras summary{cursor:pointer;font-size:16px;font-weight:600}.home-extras summary:focus-visible{outline:3px solid #72a8f5;outline-offset:5px}
.home-extras .section{padding:28px 0 8px}.home-extras h2{font-size:24px;margin:0 0 16px}.home-extras h3{font-size:20px}.home-extras p,.home-extras li{font-size:13px;color:var(--muted);line-height:1.8}.home-extras ol{padding-left:22px}
.demo-calculator{margin-top:28px}.demo-calculator input{padding:10px;border:1px solid #bdcce0;border-radius:6px;background:#fff;color:var(--ink);min-width:0;width:100%;font-size:16px}
.demo-budget-label{display:block;margin-bottom:8px;font-size:13px}.demo-row{display:grid;grid-template-columns:minmax(0,1fr) 130px 36px;gap:10px;align-items:center;margin-top:12px;font-size:12px}
.demo-row button,.demo-actions button{padding:10px;border:1px solid #b4c5dc;border-radius:6px;background:#e6eef9}.demo-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.demo-actions .demo-submit{background:var(--accent);color:white}.demo-calculator button:disabled{opacity:.4;cursor:not-allowed}
.guide-table-wrap{overflow-x:auto}.guide-table{width:100%;border-collapse:collapse;font-size:12px}.guide-table th,.guide-table td{text-align:left;border-bottom:1px solid var(--line);padding:10px}.version-status{padding:10px;background:#e8effb}
[hidden]{display:none!important}
@media(max-width:760px){.demo-row{grid-template-columns:minmax(0,1fr) 36px}.demo-row label{grid-column:1/-1}.home-extras h2{font-size:21px}.home-extras{margin-bottom:30px}}