/* Shared public-site finish. Loaded after the site, shop and language styles. */
:root {
  --navy: #102b46;
  --deep: #0c2238;
  --navy-deep: #0c2238;
  --ink: #102b46;
  --muted: #4b636e;
  --blue: #1d5779;
  --accent: #087f78;
  --accent-text: #08746d;
  --accent-light: #b8e6d9;
  --white: #f8faf9;
  --surface: #ffffff;
  --paper: #eaf4f1;
  --wash: #f1f6f4;
  --line: #dbe5e1;
  --radius: 14px;
  --premium-shadow: 0 8px 28px #102b4606;
  font-family: "Segoe UI", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  background: var(--white);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html { scroll-padding-top: 124px; }
body { background: var(--white); }
h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 4.3vw, 4rem); line-height: 1.38; letter-spacing: -.025em; }
h2 { font-size: clamp(1.85rem, 2.9vw, 2.7rem); line-height: 1.4; letter-spacing: -.02em; }
h3 { font-size: 1.25rem; line-height: 1.5; letter-spacing: -.01em; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { line-height: 1.24; overflow-wrap: anywhere; }
html[lang="zh-Hant"] h1, html[lang="zh-Hans"] h1,
html[lang="zh-Hant"] h2, html[lang="zh-Hans"] h2 { letter-spacing: .01em; }
.container, .wrap { width: min(1200px, calc(100% - 96px)); }
main, .container > *, .wrap > *, .brand-copy { min-width: 0; }
a, button { text-underline-offset: .23em; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid #12746c;
  outline-offset: 4px;
}
.panel-dark :focus-visible, .site-footer :focus-visible,
.shop-hero :focus-visible, .shop-preview :focus-visible { outline-color: #b8e6d9; }
.eyebrow, .kicker, .service-number, .step-number, .domain-index,
.principle-card > span {
  font-size: .875rem;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: .075em;
  color: var(--accent);
}
.eyebrow, .kicker { margin-bottom: 18px; }

/* The same restrained masthead appears throughout the company site and store. */
.public-demo-banner { background: var(--wash); border-color: var(--line); }
.public-demo-inner { padding-block: 10px; gap: 24px; }
.public-demo-inner strong, .public-demo-inner p { color: #45636f; font-size: .8125rem; line-height: 1.65; }
.public-demo-inner strong { letter-spacing: 0; }
.public-demo-inner strong::before { background: var(--accent); }
.motion-toggle { color: #315b6d; background: transparent; border-color: #b9ced1; border-radius: 6px; font-size: .8125rem; padding: 8px 13px; }
.site-header { background: #f8faf9f5; border-color: var(--line); }
.site-header .header-inner { min-height: 94px; gap: 32px; }
.brand { min-width: 0; max-width: 100%; flex-shrink: 1; gap: 14px; }
.brand-mark { width: 40px; height: 40px; border-color: var(--accent); }
.brand-mark::before { border-color: #397e98; }
.brand-copy { gap: 1px; }
.brand-copy strong { font-size: 1.0625rem; line-height: 1.5; letter-spacing: .045em; font-weight: 600; white-space: normal; overflow-wrap: anywhere; }
.brand-copy small { font-size: .6875rem; line-height: 1.6; letter-spacing: .1em; color: #266c6c; overflow-wrap: anywhere; }
html[lang="en"] .brand-copy strong { max-width: 300px; letter-spacing: -.015em; }
.site-header .header-inner nav { flex-shrink: 0; font-size: .9375rem; gap: 26px; }
html[lang="en"] .site-header .header-inner nav { gap: 22px; }
.site-header .header-inner nav > a { min-height: 46px; }
.header-inner nav > a:not(.nav-action)::after { bottom: 5px; height: 2px; }
.header-inner nav > a[aria-current="page"] { color: var(--accent); }
.nav-action { padding: 10px 19px; gap: 17px; border-radius: 8px; background: var(--accent); border-color: var(--accent); box-shadow: none; }
.nav-action:hover { background: #066b65; border-color: #066b65; text-decoration: none; }

/* Harbour composition: broad, quiet space around a clear message and artwork. */
.hero {
  background: linear-gradient(115deg, #f8faf9 12%, #f2f8f5 80%, #eaf4f1);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 80px); min-height: 620px; padding-block: 88px 76px; }
.hero-copy { max-width: 610px; }
.hero .eyebrow { color: var(--accent-text); font-size: .875rem; margin-bottom: 24px; }
.hero h1 { max-width: 15ch; color: var(--navy); font-size: clamp(2.6rem, 4.3vw, 3.875rem); line-height: 1.36; font-weight: 600; letter-spacing: -.025em; }
html[lang="en"] .hero h1 { font-size: clamp(2.5rem, 4.3vw, 3.8rem); line-height: 1.15; letter-spacing: -.04em; }
.hero-description { max-width: 33em; margin-top: 26px; color: var(--muted); font-size: 1.0625rem; line-height: 1.95; }
.hero .actions { gap: 14px; margin-top: 34px; }
.hero-art { margin: 0; min-width: 0; }
.hero-art::before { inset: 10% -5% 12%; background: radial-gradient(ellipse, #087f7812, transparent 66%); }
.hero-art img { aspect-ratio: 16 / 11; border-radius: 16px; border-color: #b7d1cb; box-shadow: 0 18px 48px #102b4610; object-position: center; }
.hero-art figcaption { max-width: none; font-size: .75rem; line-height: 1.75; color: var(--muted); letter-spacing: 0; margin-top: 15px; }
.hero-bottom { padding-block: 20px; font-size: .8125rem; line-height: 1.8; border-color: var(--line); color: var(--muted); }
.hero-bottom span:last-child { font-size: .75rem; letter-spacing: .075em; color: var(--accent-text); }
.button, .btn {
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  background: var(--navy);
  color: var(--white);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  gap: 16px;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.button::after { content: "\2197"; font-size: 1.0625rem; }
.button:hover, .btn:hover { background: #104c59; border-color: #104c59; color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 16px #0c223812; }
.button.secondary, .btn.secondary { background: transparent; color: var(--ink); border-color: #a9bfc5; }
.button.secondary:hover, .btn.secondary:hover { background: #e9f1ef; color: var(--ink); border-color: #789d9d; }
.hero .button { background: var(--accent); color: #fff; border-color: var(--accent); }
.hero .button:hover { background: #066b65; color: #fff; border-color: #066b65; }
.hero .button.secondary { background: transparent; color: var(--navy); border-color: #b2c6c4; }
.hero .button.secondary:hover { background: #eaf4f1; color: var(--navy); border-color: #789f98; }
.panel-dark .button, .shop-preview .button, .btn.gold { background: #b8e6d9; color: var(--deep); border-color: #b8e6d9; }
.panel-dark .button:hover, .shop-preview .button:hover, .btn.gold:hover { background: #cff0e5; color: var(--deep); border-color: #cff0e5; }
.panel-dark .button.secondary { background: transparent; color: #eff8f7; border-color: #88b6c28c; }
.panel-dark .button.secondary:hover { background: #205564; color: #fff; border-color: #b0d7db; }
.btn.small { min-height: 44px; padding: 10px 16px; font-size: .875rem; }
.inline-link, .text-link { color: #205e71; font-size: .9375rem; text-decoration-color: #8bb0b9; }
.inline-link:hover, .text-link:hover { color: var(--accent); }

/* A deliberate rhythm connects the three business lines and supporting pages. */
.section { padding-block: 88px; }
.section-small { padding-block: 36px; }
.section-tint { background: var(--paper); border-color: #dfe8e7; }
.section-heading, .section-head { gap: 60px; margin-bottom: 42px; }
.section-heading > p, .section-head > p { max-width: 420px; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.service-card { display: flex; flex-direction: column; min-width: 0; border-color: #d6e3e2; border-radius: var(--radius); background: #fff; box-shadow: var(--premium-shadow); }
.service-card:hover { transform: translateY(-3px); border-color: #9cbdba; box-shadow: 0 14px 34px #102b460a; }
.card-image { width: 100%; aspect-ratio: 16 / 10; min-height: 0; background: #e1edec; }
.card-image:not(.service-video)::after { font-size: .75rem; padding: 4px 9px; background: #082f45df; color: #f4fbfa; }
.card-body { padding: 30px 28px 27px; }
.service-number { margin-bottom: 18px; }
.service-number::after { background: #d7e4e1; }
.card-body h3 { font-size: 1.4rem; line-height: 1.45; margin-bottom: 16px; }
.card-body > p, .service-points { font-size: .9375rem; line-height: 1.9; }
.service-points { margin-block: 22px 26px; color: #466471; }
.service-points li { margin-block: 8px; }
.card-body .card-status { font-size: .8125rem; line-height: 1.8; padding: 13px 14px; background: #eef6f2; border-color: #d7e8df; color: #315f55; border-radius: 6px; }
.card-links { flex-wrap: wrap; gap: 9px 18px; margin-top: 25px; padding-top: 18px; font-size: .9375rem; border-color: #dce6e4; }
.card-links a { min-width: 0; overflow-wrap: anywhere; }
.card-links a::after { content: "\2197"; padding-left: 8px; color: var(--accent); }
.service-video__frame, .service-video__frame video, .service-video__frame .service-video__fallback { aspect-ratio: 16 / 9; }
.service-video__footer { background: #f5f8f6; border-color: var(--line); }
.service-video__badge { background: #102b46ed; color: #e5f3ee; border-color: #d3e7df66; border-radius: 5px; letter-spacing: .025em; }
.service-video__controls button, .service-video__retry { border-radius: 7px; }
.principle-grid, .readiness-grid { gap: 36px; }
.principle-card { border-color: #c4d8d5; padding-top: 27px; }
.principle-card h3 { font-size: 1.25rem; margin: 18px 0 13px; }
.principle-card p, .process-step p { font-size: .9375rem; line-height: 1.9; }
.split-feature, .preparation { gap: 80px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-feature figure img { border-radius: var(--radius); border-color: #cbdedc; }
.split-feature figcaption { font-size: .8125rem; line-height: 1.75; color: var(--muted); }
.split-feature > div > p:not(.eyebrow), .preparation-copy > p:not(.eyebrow) { font-size: 1rem; line-height: 1.9; }
.status-list { border-color: #c9dcd8; }
.status-list > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 25px; padding-block: 20px; font-size: .9375rem; border-color: #c9dcd8; }
.status-list dd { font-size: .9375rem; color: var(--muted); }
.status-pill, .status-list .status-pill { font-size: .8125rem; line-height: 1.7; padding: 5px 10px; border-radius: 5px; background: #f8fcfa; color: #315f55; border-color: #bfd7cb; }
.process-grid { gap: 38px; margin-top: 40px; }
.process-step { border-color: #c9dcd8; padding-top: 25px; }
.process-step h3 { font-size: 1.2rem; margin: 18px 0 14px; }
.cta-panel { padding: 48px 52px; gap: 40px; background: #edf4f2; border-color: #d2e2dd; border-radius: var(--radius); }
.cta-panel h2 { font-size: clamp(1.65rem, 2.5vw, 2.1rem); }
.cta-panel p:not(.eyebrow) { color: var(--muted); font-size: .9375rem; line-height: 1.9; }
.shop-preview { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 70px; padding: 56px; background: #102b46; border-radius: var(--radius); }
.shop-preview h2 { font-size: clamp(1.8rem, 2.8vw, 2.4rem); line-height: 1.4; }
.shop-preview p:not(.eyebrow), .preview-list ul { color: #c4d9df; font-size: .9375rem; line-height: 1.9; }
.preview-list h3 { font-size: 1.0625rem; color: #b8e6d9; }
.preview-list li::before { color: #b8e6d9; }

/* The public storefront remains part of the company website. */
.featured-products { padding-block: 88px; }
.featured-products .section-heading { margin-bottom: 36px; }
.featured-products .section-heading > div:last-child { max-width: 420px; }
.featured-products .section-heading > div:last-child > p { color: var(--muted); font-size: 1rem; line-height: 1.85; }
.featured-products .section-heading > div:last-child .inline-link { margin-top: 12px; }
.featured-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.featured-product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--premium-shadow); }
.featured-product-card > a { display: block; min-width: 0; }
.featured-product-card img, .featured-product-card .product-visual { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--wash); }
.featured-product-visual { position: relative; display: block; min-width: 0; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wash); }
.featured-product-visual img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.featured-product-placeholder { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(140deg, #eaf4f1, #edf3f7); color: #28576b; font-size: 3.2rem; font-weight: 500; letter-spacing: -.02em; }
.featured-product-placeholder::before { content: ""; position: absolute; width: 100px; height: 100px; border: 1px solid #087f7829; border-radius: 50%; }
.featured-product-placeholder .label { position: absolute; left: 18px; top: 16px; padding: 3px 8px; background: #f8faf9; border: 1px solid #cddfd7; border-radius: 4px; color: #486a69; font-size: .6875rem; font-weight: 600; line-height: 1.7; letter-spacing: .08em; }
.featured-product-placeholder small { margin-top: 8px; color: #4b636e; font-size: .6875rem; line-height: 1.7; letter-spacing: .12em; }
.featured-product-card__body, .featured-product-content { display: flex; flex: 1; flex-direction: column; gap: 13px; padding: 26px; min-width: 0; }
.featured-product-card__body h3, .featured-product-content h3 { font-size: 1.25rem; line-height: 1.5; overflow-wrap: anywhere; }
.featured-product-card__body > p, .featured-product-content > p { color: var(--muted); font-size: .9375rem; line-height: 1.85; }
.featured-product-card__body .kicker, .featured-product-content .kicker { color: var(--accent-text); margin: 0; font-size: .8125rem; }
.featured-product-content .eyebrow { margin: 0; color: var(--accent-text); font-size: .8125rem; line-height: 1.7; letter-spacing: .035em; }
.featured-product-card__body .product-price, .featured-product-content .product-price { margin-top: auto; padding-top: 10px; color: var(--navy); }
.featured-product-content .featured-product-price { color: var(--navy); font-size: 1.45rem; font-weight: 600; line-height: 1.5; letter-spacing: -.02em; }
.featured-product-content .featured-product-price small { color: var(--muted); font-size: .8125rem; font-weight: 400; line-height: 1.7; letter-spacing: 0; }
.featured-product-content small { color: var(--muted); font-size: .8125rem; line-height: 1.85; }
.featured-product-card__body .inline-link, .featured-product-content .inline-link { align-self: flex-start; margin-top: 2px; }
.featured-product-content .button { margin-top: auto; align-self: flex-start; }
.featured-products [role="status"] { color: var(--muted); font-size: .9375rem; }
.featured-products [data-home-products-retry] { min-height: 44px; padding: 10px 18px; border: 1px solid #9fbdb5; border-radius: 7px; background: #fff; color: var(--navy); font: inherit; font-size: .9375rem; }
.featured-products__empty { padding: 36px; border: 1px dashed #a8c9bf; border-radius: var(--radius); background: #f1f7f3; color: var(--muted); font-size: .9375rem; line-height: 1.9; }
.featured-products__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 28px; }
.featured-products__footer p { max-width: 650px; color: var(--muted); font-size: .875rem; line-height: 1.85; }
.about-harbour { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.about-harbour > * { min-width: 0; }
.about-harbour figure { min-width: 0; }
.about-harbour figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid #cbded8; border-radius: var(--radius); box-shadow: var(--premium-shadow); }
.about-harbour figcaption { margin-top: 14px; color: var(--muted); font-size: .8125rem; line-height: 1.8; }
.about-harbour > div > p:not(.eyebrow) { margin-top: 22px; color: var(--muted); font-size: 1rem; line-height: 1.95; }
.about-harbour .actions { margin-top: 28px; }
.home-process .process-step { position: relative; padding-top: 26px; }
.home-process .process-step .step-number { font-size: .875rem; letter-spacing: .08em; }

/* Inner pages share the same type scale, soft surfaces and precise rules. */
.page-intro { background: #eef4f3; border-color: #d9e5e1; padding-block: 58px 66px; }
.page-intro::after { border-color: #aacbc54d; width: 410px; height: 410px; top: -190px; right: -75px; }
.page-intro h1, .page-title h1 { font-size: clamp(2.2rem, 3.6vw, 3.25rem); line-height: 1.4; font-weight: 550; }
.intro-copy { max-width: 780px; color: var(--muted); font-size: 1rem; line-height: 1.95; margin-top: 24px; }
.breadcrumb { font-size: .875rem; line-height: 1.75; gap: 11px; margin-bottom: 28px; color: #456573; }
.breadcrumb > * { min-width: 0; overflow-wrap: anywhere; }
.service-jump { gap: 12px; margin-top: 32px; }
.service-jump a { border-color: #bfd5d0; color: #235c64; padding: 10px 17px; font-size: .9375rem; border-radius: 6px; }
.detail-section { padding-block: 80px; border-color: #dbe6e3; }
.detail-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 72px; }
.detail-visual { top: 132px; }
.detail-visual figure { border-radius: var(--radius); border-color: #cedfdd; box-shadow: var(--premium-shadow); }
.detail-visual img { aspect-ratio: 16 / 10; }
.detail-visual figcaption { font-size: .8125rem; line-height: 1.8; padding: 14px 18px; color: #c2d8df; }
.detail-visual h2 { font-size: 2rem; margin-block: 16px 20px; }
.detail-visual > p:not(.eyebrow) { font-size: 1rem; line-height: 1.9; }
.detail-block { border-color: #cbdcd8; padding-top: 27px; margin-top: 33px; }
.detail-block h2, .detail-block h3 { font-size: 1.2rem; line-height: 1.55; margin-bottom: 18px; }
.detail-block p, .detail-block ul, .detail-block ol { color: #466471; font-size: .9375rem; line-height: 1.95; }
.detail-note { background: #eef6f2; border-left-color: #458d79; color: #315f55; font-size: .9375rem; line-height: 1.9; border-radius: 0 6px 6px 0; padding: 21px 23px; }
.content-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 36px; }
.panel, .status-card, .domain-card { background: #fff; border-color: #d5e2df; border-radius: var(--radius); padding: 34px; box-shadow: var(--premium-shadow); }
.panel h2, .status-card h2 { font-size: 1.6rem; line-height: 1.4; margin-bottom: 22px; }
.panel h3, .status-card h3 { font-size: 1.15rem; margin: 26px 0 14px; }
.panel p, .panel ul, .panel ol, .status-card p, .status-card ul, .status-card ol,
.panel dt, .panel dd, .domain-card p { font-size: .9375rem; line-height: 1.9; }
.panel-dark { background: var(--navy); border-color: var(--navy); box-shadow: none; }
.panel-dark h2, .panel-dark h3, .panel-dark strong { color: #eff8f7; }
.panel-dark p, .panel-dark ul, .panel-dark ol { color: #c4d9df; }
.panel-dark .eyebrow, .shop-preview .eyebrow { color: #b8e6d9; }
.compact-steps { gap: 28px; }
.compact-steps > li { padding-left: 39px; }
.compact-steps > li::before { font-size: .875rem; color: #b8e6d9; }
.compact-steps strong { font-size: 1rem; }
.compact-steps p { font-size: .9375rem; }
.inquiry-panel { padding: 38px; }
.form-intro { padding-bottom: 26px; margin-bottom: 30px; }
.inquiry-panel form, .contact-form, .form-grid { gap: 18px; }
.inquiry-panel label { font-size: .9375rem; color: #295969; line-height: 1.7; }
.required-label { display: inline; font-size: .8125rem; color: var(--muted); }
.inquiry-panel input:not([type="checkbox"]):not([type="radio"]),
.inquiry-panel select, .inquiry-panel textarea, .field input, .field select {
  min-height: 50px; padding: 12px 14px; border-radius: 6px; border-color: #aec8c8; background: #fff; color: var(--ink); font-size: 16px; line-height: 1.6;
}
.inquiry-panel textarea { min-height: 180px; }
input[type="checkbox"], input[type="radio"] { min-height: 18px; max-height: 20px; padding: 0; flex-shrink: 0; accent-color: var(--accent); }
.field-note, .field-help, .help-text { font-size: .875rem !important; line-height: 1.8; color: #466471 !important; }
.checkbox-label, .checkbox { font-size: .9375rem; line-height: 1.8; }
.draft-result pre, .draft-output { background: #eef6f2; border-color: #cfdfd5; border-radius: 7px; font-size: .9375rem; }
.slim-note { padding: 26px 30px; gap: 28px; font-size: .9375rem; border-color: #d0e3d8; background: #eef6f2; border-radius: 8px; }
.readiness-grid > .panel { padding: 30px; }
.domain-grid { gap: 28px; }
.domain-card h3 { font-size: 1.6rem; color: #205770; }
.section-footnote { font-size: .9375rem; line-height: 1.9; }
.faq-list { gap: 15px; }
.faq-list details, details.faq-item { border-color: #d5e2df; border-radius: 8px; }
.faq-list summary, details.faq-item summary { padding: 20px 25px; font-size: 1rem; line-height: 1.7; color: #295969; }
.faq-list details[open] summary, details.faq-item[open] summary { background: #edf5f1; border-color: #d7e5dd; }
.faq-list details > div, .faq-list details > p, details.faq-item > div, details.faq-item > p { padding: 21px 25px; font-size: .9375rem; line-height: 1.9; }
.boundary-list { gap: 24px; }
.boundary-list li { background: #fff; border-color: #d5e2df; border-radius: 8px; padding: 26px; }
.boundary-list strong { font-size: 1rem; }
.privacy-content p, .privacy-content li { font-size: 1rem; line-height: 1.95; }

/* Store pages retain their functional controls with the company-site finish. */
.shop-subnav { background: #edf4f1; border-color: #d5e3de; }
.shop-subnav > .wrap { gap: 18px; padding-block: 13px; }
.shop-subnav p { color: #315f55; font-size: .8125rem; letter-spacing: .025em; }
.shop-subnav .shop-nav { font-size: .875rem; gap: 23px; min-width: 0; }
.shop-subnav .shop-nav a { white-space: normal; overflow-wrap: anywhere; }
.shop-nav a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
.reset-demo { color: #4f6772; font-size: .8125rem; }
.cart-count { min-width: 24px; height: 24px; font-size: .8125rem; color: #245c51; background: #daeae1; }
.shop-hero { background: radial-gradient(ellipse at 85% 10%, #285f5b3d, transparent 58%), #102b46; }
.shop-hero .hero-inner { padding-block: 78px 84px; }
.shop-hero .kicker { color: #b8e6d9; }
.shop-hero h1 { max-width: 710px; font-size: clamp(2.35rem, 4.2vw, 3.8rem); line-height: 1.35; }
html[lang="en"] .shop-hero h1 { line-height: 1.15; }
.shop-hero .intro { color: #c4d9df; font-size: 1rem; line-height: 1.95; max-width: 620px; }
.hero-note { gap: 12px; color: #c8dfe0; }
.hero-note span { padding: 6px 11px; font-size: .8125rem; border-color: #9fcac74d; border-radius: 5px; }
.harbour::after { font-size: .75rem; color: #bed6d8; letter-spacing: .05em; }
.demo-callout { background: #edf4f1; border-left-color: #458d79; color: #466471; font-size: .9375rem; padding: 20px 24px; }
.toolbar { grid-template-columns: minmax(0, 1fr) minmax(180px, 230px) auto; gap: 20px; margin-block: 35px 24px; }
.toolbar > *, .toolbar .field { min-width: 0; }
.field label { font-size: .9375rem; font-weight: 600; margin-bottom: 8px; }
.field select { min-width: 0; }
.category-tabs { gap: 10px; margin-bottom: 26px; }
.category-tabs button { min-height: 46px; padding: 10px 17px; color: #42636b; border-color: #c8d9d3; border-radius: 6px; font-size: .875rem; background: #fff; }
.category-tabs button[aria-pressed="true"] { color: #fff; background: #0b5b59; border-color: #0b5b59; }
.catalog-count { font-size: .875rem; color: #4f6772; margin-bottom: 20px; }
.product-grid { gap: 26px; }
.product-card { border-color: #d5e2df; border-radius: var(--radius); background: #fff; box-shadow: var(--premium-shadow); }
.product-card:hover { border-color: #9cbdba; box-shadow: 0 18px 38px #0c22380d; }
.product-card .product-visual { aspect-ratio: 16 / 10; min-height: 0; background-color: #e8f0ed; }
.product-visual::after { font-size: .75rem; line-height: 1.65; color: #4f6772; }
.product-content { padding: 28px; }
.product-content .kicker { font-size: .8125rem; margin-bottom: 10px; }
.product-content h3 { font-size: 1.25rem; line-height: 1.5; }
.product-content p { font-size: .9375rem; line-height: 1.85; }
.product-price { font-size: 1.65rem; line-height: 1.45; letter-spacing: -.025em; margin-top: 24px; }
.product-price small { font-size: .8125rem; line-height: 1.7; letter-spacing: 0; color: #4f6772; }
.product-content .actions { padding-top: 25px; gap: 10px; }
.product-content .actions .btn { min-width: 0; flex: 1 1 120px; }
.card-fineprint { font-size: .8125rem !important; color: #4f6772 !important; }
.page-title { padding-block: 52px 44px; border-color: #d9e5e1; background: #f0f5f4; }
.page-title p { font-size: 1rem; line-height: 1.9; max-width: 730px; }
.product-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.product-detail > * { min-width: 0; }
.product-detail > .product-visual { min-height: 0; aspect-ratio: 1; border-radius: var(--radius); border: 1px solid #d5e2df; }
.product-detail > .product-visual.uploaded img { max-height: none; }
.product-detail h1 { font-size: clamp(2rem, 3.3vw, 2.8rem); line-height: 1.4; }
.product-description { font-size: 1rem; line-height: 1.9; margin-block: 24px; }
.pill { font-size: .8125rem; color: #315f55; background: #edf5f1; border-color: #c8ddd1; border-radius: 5px; padding: 5px 10px; }
.detail-price { font-size: 2.25rem; line-height: 1.4; letter-spacing: -.03em; margin-top: 27px; }
.price-caption { font-size: .875rem; line-height: 1.8; margin-bottom: 27px; }
.quantity-field > label { font-size: .9375rem; }
.quantity-control { border-color: #afc7c4; border-radius: 6px; background: #fff; }
.quantity-control button { min-height: 46px; width: 44px; }
.quantity-control input { min-height: 46px; width: 54px; }
body[data-shop-page] .detail-note { background: transparent; border-left: 0; padding: 22px 0 0; border-radius: 0; color: #4f6772; font-size: .875rem; line-height: 1.85; }
.tab-bar { gap: 8px; margin-bottom: 28px; }
.tab-bar button { min-height: 48px; padding: 13px 20px; font-size: .9375rem; }
.tab-bar button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.info-panel { font-size: .9375rem; line-height: 1.9; }
.spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.spec-list > div { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 20px; padding-block: 17px; }
.spec-list dd, .fixture-box dd, .summary-lines dt, .summary-lines dd,
.mini-order-item span, .confirm-id { min-width: 0; overflow-wrap: anywhere; }
.cart-layout { grid-template-columns: minmax(0, 1fr) minmax(290px, 340px); gap: 42px; }
.checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 365px); gap: 42px; }
.cart-layout > *, .checkout-layout > * { min-width: 0; }
.cart-item { padding-block: 30px; gap: 24px; }
.cart-info h2 { font-size: 1.125rem; line-height: 1.5; }
.cart-meta { font-size: .875rem; line-height: 1.8; }
.cart-side .text-btn { font-size: .875rem; color: #27675e; }
.line-price { font-size: 1.2rem; }
.summary-card { padding: 30px; border-color: #ceded6; border-radius: var(--radius); background: #f3f7f4; top: 125px; box-shadow: var(--premium-shadow); }
.summary-card h2 { font-size: 1.4rem; line-height: 1.45; margin-bottom: 25px; }
.summary-lines { font-size: .9375rem; gap: 16px; }
.summary-lines > div { gap: 18px; }
.summary-total { padding-top: 22px; margin-top: 23px; gap: 15px; font-size: .9375rem; flex-wrap: wrap; }
.summary-total strong { font-size: 1.5rem; }
.summary-foot { font-size: .875rem; line-height: 1.9; margin-top: 18px; }
.empty-state { border-color: #b3cdc1; background: #f0f5f1; border-radius: 10px; padding: 64px 34px; }
.empty-state p { font-size: 1rem; line-height: 1.9; }
.checkout-block { padding: 34px; border-color: #d5e2df; border-radius: var(--radius); background: #fff; margin-bottom: 26px; }
.block-heading { gap: 15px; margin-bottom: 26px; }
.block-heading h2 { font-size: 1.3rem; line-height: 1.5; }
.block-heading span { width: 32px; height: 32px; font-size: .875rem; color: #315f55; background: #edf5f1; border-color: #b8d4c5; }
.fixture-box { padding: 22px; background: #f0f5f3; border-color: #d5e2dc; border-radius: 7px; }
.fixture-box .kicker { font-size: .8125rem; }
.fixture-box dl { font-size: .9375rem; gap: 13px; }
.fixture-box dl > div { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 18px; }
.checkout-block > p, .acknowledge { font-size: .9375rem; line-height: 1.85; }
.radio-card { padding: 18px; min-height: 76px; font-size: .9375rem; border-radius: 7px; border-color: #cbded5; }
.radio-card input, .acknowledge input { min-height: 18px; max-height: 18px; width: 18px; height: 18px; padding: 0; }
.radio-card small { font-size: .875rem; line-height: 1.75; color: #4f6772; }
.payment-off { padding: 24px; background: #f0f5f3; border-color: #b6cec1; border-radius: 7px; font-size: .9375rem; }
.payment-off strong { font-size: 1.125rem; }
.mini-order { gap: 18px; }
.mini-order-item { font-size: .9375rem; line-height: 1.75; }
.mini-order-item small { font-size: .8125rem; }
.confirm-top { padding: 50px; background: #f1f6f2; border-color: #ceded6; border-radius: var(--radius); }
.confirm-top h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1.4; }
.confirm-top p { font-size: 1rem; line-height: 1.9; }
.confirm-mark { background: #e5f1e9; border-color: #b6d4bf; color: #315f55; }
.confirm-id { font-size: .875rem; letter-spacing: .025em; max-width: 100%; }
.confirm-details { font-size: .9375rem; line-height: 1.9; }
.shop-footer { background: #edf4f1; border-color: #d2e2d9; font-size: .875rem; line-height: 1.9; padding-block: 40px; margin-top: 0; }
.shop-footer strong { font-size: 1.0625rem; line-height: 1.6; }
.shop-footer nav { min-width: 0; gap: 18px; }
.footer-fine { font-size: .8125rem; line-height: 1.85; border-color: #ceded6; }
.toast { background: #102b46; color: #fff; border-color: #6ba69d; border-radius: 8px; font-size: .9375rem; box-shadow: 0 12px 32px #0c223826; }

.site-footer { background: #0c2238; padding: 56px 0 28px; }
.footer-main { gap: 60px; padding-bottom: 40px; }
.footer-brand { min-width: 0; }
.footer-brand p { max-width: 530px; font-size: .875rem; line-height: 1.9; color: #b5cdd7; margin-top: 22px; }
.footer-brand .brand-copy strong { color: #eff8f7; }
.footer-brand .brand-copy small { color: #b8e6d9; }
.footer-links { gap: 16px 25px; font-size: .9375rem; color: #d2e2e8; }
.footer-meta { font-size: .8125rem; line-height: 1.85; color: #afc9d3; padding-top: 24px; border-color: #98c5d12e; }
.footer-meta > * { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .container, .wrap { width: calc(100% - 64px); }
  .site-header .header-inner { flex-wrap: wrap; padding-block: 20px 13px; gap: 17px; }
  .site-header .header-inner nav, html[lang="en"] .site-header .header-inner nav { width: 100%; justify-content: space-between; gap: 12px 20px; border-top: 1px solid var(--line); padding-top: 10px; }
  .hero-grid { gap: 36px; min-height: 610px; padding-block: 72px; }
  .hero h1 { font-size: 3rem; }
  html[lang="en"] .hero h1 { font-size: 3.15rem; }
  .hero-art { margin: 0; }
  .hero-art img { aspect-ratio: 16 / 11; object-position: center; }
  .service-grid, .product-grid { gap: 22px; }
  .card-body, .product-content { padding: 27px 24px; }
  .split-feature, .preparation, .detail-grid { gap: 44px; }
  .shop-preview { gap: 42px; padding: 44px; }
  .footer-main { flex-direction: column; gap: 30px; }
  .cart-layout, .checkout-layout { gap: 28px; }
  .summary-card { padding: 26px; top: 175px; }
  .product-detail { gap: 40px; }
  .toolbar { grid-template-columns: minmax(0, 1fr) minmax(170px, 210px) auto; }
}

@media (max-width: 960px) {
  .section, .featured-products { padding-block: 80px; }
  .section-small { padding-block: 30px; }
  .section-heading, .section-head { gap: 35px; margin-bottom: 34px; }
  .section-heading > p, .section-head > p { font-size: .9375rem; }
  .service-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .service-card { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .card-body { padding: 30px; }
  .card-body h3 { font-size: 1.5rem; }
  .card-image { aspect-ratio: 16 / 10; min-height: 0; align-self: start; }
  .principle-grid, .readiness-grid { gap: 26px; }
  .detail-grid, .content-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .detail-visual { position: static; }
  .detail-section { padding-block: 64px; }
  .detail-visual figure { max-width: 760px; }
  .detail-visual img { aspect-ratio: 16 / 10; }
  .cta-panel { flex-direction: column; align-items: flex-start; gap: 30px; padding: 40px; }
  .shop-preview { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .shop-preview .preview-list { border-left: 0; border-top: 1px solid #91e3d238; padding: 27px 0 0; }
  .preview-list ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .preview-list li::before { display: block; margin-bottom: 5px; }
  .cart-layout, .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .summary-card { position: static; }
  .readiness-grid { grid-template-columns: minmax(0, 1fr); }
  .slim-note { flex-direction: column; align-items: flex-start; gap: 12px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .product-detail > .product-visual { max-width: 620px; width: 100%; }
  .spec-list { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { flex-direction: column; gap: 25px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 185px; }
  .container, .wrap { width: calc(100% - 40px); }
  .language-review-bar { padding: 12px 20px; }
  .language-review-fields { gap: 10px 16px; }
  .language-review-fields label { flex-basis: 160px; }
  .language-review-fields [role="status"] { font-size: 12px; margin: 0; }
  .language-review-bar p { font-size: 12px !important; }
  .public-demo-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding-block: 12px; }
  .public-demo-inner strong, .public-demo-inner p { grid-column: 1; font-size: .75rem; }
  .motion-toggle { grid-column: 2; grid-row: 1 / span 2; max-width: 128px; font-size: .75rem; }
  .site-header .header-inner { padding-block: 19px 12px; gap: 17px; }
  .brand-copy strong { font-size: 1rem; }
  .brand-copy small { font-size: .6875rem; }
  .site-header .header-inner nav, html[lang="en"] .site-header .header-inner nav { flex-wrap: wrap; gap: 7px 19px; font-size: .875rem; padding-top: 11px; }
  .nav-action { padding: 10px 14px; gap: 10px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; min-height: 0; padding-block: 62px 42px; }
  .hero h1 { max-width: 600px; font-size: clamp(2.3rem, 6.5vw, 3.2rem); line-height: 1.45; }
  html[lang="en"] .hero h1 { font-size: clamp(2.35rem, 7vw, 3.2rem); line-height: 1.17; }
  html[lang="zh-Hant"] .hero h1, html[lang="zh-Hans"] .hero h1 { font-size: clamp(2.15rem, 6.4vw, 3.2rem); }
  .hero .eyebrow { font-size: .875rem; margin-bottom: 22px; }
  .hero-description { font-size: 1rem; margin-top: 26px; }
  .hero .actions { margin-top: 30px; }
  .hero-art { margin: 0; }
  .hero-art img { aspect-ratio: 16 / 10; border-radius: 12px; }
  .hero-art figcaption { text-align: left; margin: 14px 0 0; font-size: .75rem; }
  .hero-bottom { display: block; font-size: .8125rem; padding-block: 20px; }
  .hero-bottom span:last-child { display: none; }
  .section, .featured-products { padding-block: 72px; }
  .section-small { padding-block: 28px; }
  .section-heading, .section-head { display: block; margin-bottom: 32px; }
  .section-heading h2, .section-head h2 { font-size: clamp(1.85rem, 4.7vw, 2.3rem); }
  .section-heading > p, .section-head > p { max-width: none; margin-top: 20px; font-size: 1rem; }
  .service-card { display: flex; }
  .card-image { align-self: stretch; width: 100%; }
  .service-video__frame, .service-video__frame video, .service-video__frame .service-video__fallback { aspect-ratio: 16 / 9; }
  .card-body { padding: 30px; }
  .card-body h3 { font-size: 1.45rem; }
  .card-body > p, .service-points { font-size: .9375rem; }
  .principle-grid, .preparation, .process-grid, .split-feature { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .principle-grid { gap: 30px; }
  .split-feature figure { order: 2; }
  .split-feature > div > p:not(.eyebrow), .preparation-copy > p:not(.eyebrow) { font-size: 1rem; }
  .process-grid { margin-top: 32px; gap: 28px; }
  .process-step { display: block; padding-top: 24px; }
  .process-step .step-number { font-size: .875rem; }
  .process-step h3 { margin: 16px 0 13px; font-size: 1.25rem; }
  .shop-preview { padding: 36px 30px; }
  .shop-preview h2 { font-size: 1.85rem; }
  .preview-list ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .preview-list li::before { display: inline; }
  .about-harbour { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-harbour figure { order: 2; }
  .featured-products__footer { align-items: flex-start; }
  .cta-panel { padding: 34px 30px; gap: 27px; }
  .cta-panel h2 { font-size: 1.75rem; }
  .cta-panel .actions { flex-wrap: wrap; min-width: 0; }
  .page-intro { padding-block: 40px 46px; }
  .page-intro h1, .page-title h1 { font-size: clamp(2rem, 5.5vw, 2.65rem); line-height: 1.4; }
  .breadcrumb { font-size: .8125rem; margin-bottom: 25px; }
  .intro-copy { font-size: 1rem; line-height: 1.9; }
  .service-jump { gap: 10px; margin-top: 28px; }
  .service-jump a { font-size: .875rem; padding: 9px 14px; }
  .detail-section { padding-block: 56px; scroll-margin-top: 185px; }
  .detail-visual h2 { font-size: 1.85rem; }
  .detail-visual figcaption { font-size: .8125rem; padding: 14px 17px; }
  .panel, .status-card, .inquiry-panel, .domain-card { padding: 30px; }
  .panel h2, .status-card h2 { font-size: 1.5rem; }
  .form-row, .domain-grid, .boundary-list { grid-template-columns: minmax(0, 1fr); }
  .domain-card h3 { font-size: 1.5rem; }
  .slim-note { padding: 25px; }
  .shop-subnav > .wrap { gap: 8px; padding-block: 15px; }
  .shop-subnav .shop-nav { width: 100%; gap: 5px 19px; justify-content: flex-start; }
  .shop-subnav .reset-demo { text-align: left; max-width: none; font-size: .8125rem; }
  .shop-hero .hero-inner { padding-block: 58px 62px !important; }
  .shop-hero h1 { max-width: 620px; font-size: clamp(2.15rem, 6.5vw, 3.1rem); line-height: 1.4; }
  .shop-hero .intro { font-size: 1rem; margin-top: 24px; }
  .hero-note { gap: 9px; margin-top: 28px; }
  .hero-note span { font-size: .8125rem; }
  .harbour { width: 70%; opacity: .2; }
  .harbour::after { font-size: .6875rem; }
  .toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .toolbar .search-field { grid-column: 1 / -1; }
  .toolbar > .btn { min-width: 0; }
  .product-grid { gap: 22px; }
  .product-content { padding: 25px 22px; }
  .product-content h3 { font-size: 1.2rem; }
  .product-content .actions { align-items: stretch; }
  .product-detail > .product-visual { min-height: 0; }
  .product-detail h1 { font-size: 2.1rem; }
  .page-title { padding-block: 38px 35px; }
  .summary-card, .checkout-block { padding: 30px; }
  .confirm-top { padding: 40px 30px; }
  .shop-footer { padding-block: 34px; font-size: .875rem; }
  .site-footer { padding: 45px 0 26px; }
  .footer-main { gap: 28px; padding-bottom: 33px; }
  .footer-brand p { font-size: .875rem; }
  .footer-links { gap: 8px 23px; font-size: .9375rem; }
  .footer-meta { display: block; font-size: .8125rem; }
  .footer-meta > * + * { display: block; margin-top: 12px; }
}

@media (max-width: 520px) {
  .container, .wrap { width: calc(100% - 40px); }
  .brand { gap: 12px; }
  .brand-mark { width: 34px; height: 34px; }
  .brand-copy strong { font-size: .9375rem; letter-spacing: .025em; }
  .brand-copy small { font-size: .625rem; letter-spacing: .075em; }
  html[lang="en"] .brand-copy strong { max-width: none; }
  .site-header .header-inner nav, html[lang="en"] .site-header .header-inner nav { justify-content: flex-start; gap: 5px 17px; }
  .site-header .header-inner nav > a { min-height: 44px; }
  .nav-action { padding: 10px 13px; }
  .hero-grid { padding-block: 50px 35px; gap: 32px; }
  .hero .eyebrow { font-size: .8125rem; }
  .hero-description { font-size: .9375rem; line-height: 1.95; }
  .hero .actions { gap: 12px; }
  .button, .btn { padding: 12px 18px; font-size: .9375rem; min-height: 48px; }
  .hero .actions .button { flex: 1 1 150px; }
  .section, .featured-products { padding-block: 64px; }
  .section-small { padding-block: 26px; }
  .eyebrow, .kicker, .service-number, .step-number, .domain-index, .principle-card > span { font-size: .8125rem; }
  .section-heading > p, .section-head > p { font-size: .9375rem; }
  .card-body { padding: 27px 24px; }
  .card-body h3 { font-size: 1.35rem; }
  .card-body .card-status { font-size: .8125rem; }
  .card-links { gap: 8px 16px; font-size: .9375rem; }
  .status-list > div { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 15px; font-size: .875rem; }
  .status-list dd { font-size: .875rem; }
  .status-list .status-pill { font-size: .75rem; }
  .shop-preview, .cta-panel { padding: 31px 25px; }
  .shop-preview h2, .cta-panel h2 { font-size: 1.7rem; }
  .shop-preview p:not(.eyebrow), .preview-list ul { font-size: .9375rem; }
  .cta-panel .actions { width: 100%; }
  .cta-panel .actions .button { flex: 1 1 150px; }
  .page-intro h1, .page-title h1 { font-size: 2rem; }
  .intro-copy { font-size: .9375rem; }
  .detail-note { padding: 20px; font-size: .9375rem; }
  .panel, .status-card, .inquiry-panel, .domain-card { padding: 27px 23px; }
  .panel p, .panel ul, .panel ol, .panel dt, .panel dd,
  .status-card p, .status-card ul, .status-card ol { font-size: .9375rem; }
  .inquiry-panel label { font-size: .9375rem; }
  .required-label { margin-left: 4px; }
  .faq-list summary, details.faq-item summary { padding: 19px 21px; font-size: .9375rem; }
  .faq-list details > div, .faq-list details > p, details.faq-item > div, details.faq-item > p { padding: 20px 21px; font-size: .9375rem; }
  .boundary-list li { padding: 24px; }
  .slim-note { padding: 23px; }
  .slim-note .inline-link { white-space: normal; }
  .shop-subnav .shop-nav { gap: 4px 16px; font-size: .8125rem; }
  .shop-subnav .shop-nav a { white-space: normal; }
  .shop-hero .hero-inner { padding-block: 48px 54px !important; }
  .shop-hero h1 { max-width: none; font-size: 2.15rem; }
  .shop-hero .intro { font-size: .9375rem; }
  .demo-callout { padding: 19px 20px; font-size: .875rem; }
  .toolbar { gap: 14px; margin-top: 29px; }
  .field label { font-size: .875rem; }
  .category-tabs { gap: 9px; }
  .category-tabs button { padding: 9px 13px; font-size: .875rem; }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .featured-product-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .featured-product-card__body, .featured-product-content { padding: 25px 24px; }
  .featured-products__empty { padding: 28px 24px; }
  .product-content { padding: 27px 24px; }
  .product-content h3 { font-size: 1.3rem; }
  .product-content .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .product-content .actions .btn { flex: 0 1 auto; width: 100%; }
  .product-detail h1 { font-size: 1.95rem; }
  .product-detail .actions .btn { width: 100%; min-width: 0; }
  .product-description { font-size: .9375rem; }
  .tab-bar { gap: 3px; }
  .tab-bar button { padding: 12px 14px; font-size: .875rem; }
  .spec-list > div { gap: 15px; font-size: .9375rem; }
  .cart-item { grid-template-columns: 73px minmax(0, 1fr); gap: 16px; padding-block: 26px; }
  .cart-item .product-visual { min-height: 100px; }
  .cart-info h2 { font-size: 1rem; }
  .cart-meta { font-size: .8125rem; }
  .cart-side { grid-column: 2; display: flex; flex-wrap: wrap; gap: 3px 12px; justify-content: space-between; align-items: center; text-align: left; }
  .cart-side .text-btn { margin-top: 0; font-size: .8125rem; }
  .cart-info .quantity-control { margin-top: 12px; }
  .quantity-control button { width: 38px; }
  .quantity-control input { width: 48px; }
  .summary-card, .checkout-block { padding: 27px 23px; }
  .summary-lines, .summary-total { font-size: .875rem; }
  .summary-total strong { font-size: 1.4rem; }
  .summary-foot { font-size: .8125rem; }
  .fixture-box { padding: 19px 17px; }
  .fixture-box dl { font-size: .875rem; }
  .fixture-box dl > div { gap: 13px; }
  .block-heading h2 { font-size: 1.2rem; }
  .radio-card { padding: 16px 14px; font-size: .875rem; }
  .radio-card small { font-size: .8125rem; }
  .checkout-block > p, .acknowledge { font-size: .875rem; }
  .mini-order-item { flex-wrap: wrap; gap: 4px 14px; font-size: .875rem; }
  .mini-order-item > b { margin-left: auto; }
  .empty-state { padding: 40px 24px; }
  .confirm-top { padding: 35px 24px; }
  .confirm-top h1 { font-size: 1.95rem; }
  .confirm-top p { font-size: .9375rem; }
  .confirm-id { font-size: .8125rem; }
  .footer-brand p { font-size: .8125rem; }
  .footer-links { font-size: .875rem; gap: 6px 20px; }
  .footer-meta { font-size: .75rem; }
  .shop-footer { font-size: .8125rem; }
  .footer-fine { font-size: .8125rem; }
}

@media (max-width: 360px) {
  .container, .wrap { width: calc(100% - 40px); }
  .language-review-bar { padding-inline: 16px; }
  .public-demo-inner { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .public-demo-inner strong, .public-demo-inner p { grid-column: 1; }
  .motion-toggle { grid-column: 1; grid-row: auto; justify-self: start; max-width: none; margin-top: 5px; }
  .site-header .header-inner nav, html[lang="en"] .site-header .header-inner nav { gap: 5px 16px; font-size: .8125rem; }
  .brand-copy strong { font-size: .875rem; }
  .brand-copy small { font-size: .625rem; letter-spacing: .045em; }
  .brand-mark { width: 31px; height: 31px; }
  html[lang="en"] .hero h1 { font-size: 2.2rem; }
  html[lang="zh-Hant"] .hero h1, html[lang="zh-Hans"] .hero h1 { font-size: 2rem; }
  .card-body, .product-content { padding-inline: 23px; }
  .toolbar { grid-template-columns: minmax(0, 1fr); }
  .toolbar .search-field { grid-column: 1; }
  .toolbar > .btn { width: 100%; }
  .shop-hero h1 { font-size: 2rem; }
  .panel, .status-card, .inquiry-panel, .domain-card, .summary-card, .checkout-block { padding-inline: 21px; }
}

@media (hover: none) {
  .service-card:hover, .product-card:hover, .button:hover, .btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-art img, .service-card:hover, .product-card:hover, .button:hover, .btn:hover { transform: none; }
}