/* AI display LP: 1920px reference. Cleaned 2026-11-11. */
body { margin: 0; }
.ai-lp {
  --u: min(.0520833333vw, 1px);
  --ink: #282866;
  --body: #4d4d4d;
  --gradient: linear-gradient(90deg, #6563f4 0%, #1a9efc 32%, #c428eb 64%, #9c37ee 100%);
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  overflow: clip;
  color: var(--body);
  background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: max(14px, calc(24 * var(--u)));
  font-weight: 500;
  line-height: 1.8;
}

.ai-lp a:hover { opacity: .8; }

.ai-lp *, .ai-lp *::before, .ai-lp *::after { box-sizing: border-box; }
.ai-lp h1, .ai-lp h2, .ai-lp h3, .ai-lp p, .ai-lp figure { margin: 0; }
.ai-lp img { display: block; max-width: 100%; height: auto; }
.ai-lp a { color: inherit; text-decoration: none; }
.ai-lp button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ai-lp :focus-visible { outline: 3px solid #7c3aed; outline-offset: 4px; }
.ai-lp section { scroll-margin-top: 24px; }
.ai-lp .ai-gradient, .ai-heading strong {
  background-image: var(--gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.ai-container { width: 70.625%; margin-inline: auto; }
.ai-section { padding: calc(100 * var(--u)) 0 calc(120 * var(--u)); }
.ai-tint { background: #f6faff; }
.ai-heading { text-align: center; padding-inline: 20px; margin-bottom: calc(84 * var(--u)); }
.ai-heading > img { width: calc(77.83 * var(--u)); margin: 0 auto calc(7 * var(--u)); }
.ai-heading h2 { color: var(--ink); font-size: calc(48 * var(--u)); line-height: 1.8; font-weight: 700; }
.ai-heading strong { display: block; font-size: calc(64 * var(--u)); line-height: 1.8; }
.ai-heading h2 > .ai-gradient { font-size: calc(64 * var(--u)); }
.ai-heading h2:has(> .ai-gradient) > strong { color: var(--ink); background: none; font-size: calc(48 * var(--u)); }
.ai-grid2, .ai-grid3, .ai-grid4 { display: grid; gap: calc(28 * var(--u)); }
.ai-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(48 * var(--u)); }
.ai-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(25 * var(--u)); }
.ai-box { border: 1px solid #5d5c98; border-radius: calc(10 * var(--u)); background: #fff; padding: calc(36 * var(--u)); }
.ai-box h3 { color: var(--ink); font-size: max(16px, calc(24 * var(--u))); line-height: 1.4; }
.ai-label { display: inline-block; padding: calc(5 * var(--u)) calc(20 * var(--u)); border-radius: 4px; background: var(--ink); color: #fff; font-size: max(11px, calc(20 * var(--u))); line-height: 1.5; white-space: nowrap; }
.ai-center { text-align: center; }
.ai-intro { font-weight: 700; margin-bottom: calc(76 * var(--u)) !important; }
.ai-lead { color: var(--ink); font-size: calc(36 * var(--u)); margin-bottom: calc(46 * var(--u)) !important; }
.ai-note { color: #526176; font-size: max(10px, calc(12 * var(--u))); line-height: 1.8; margin-top: calc(32 * var(--u)) !important; }
/* Hero: image composition retains the original Figma crop; content is real HTML. */
.ai-hero { position: relative; min-height: calc(822 * var(--u)); padding: calc(27 * var(--u)) calc(31 * var(--u)) calc(18 * var(--u)); isolation: isolate; overflow: hidden; background: #f1f5fc; }
.ai-hero-photo { position: absolute; z-index: -2; width: 123.349%; max-width: none !important; left: -15.385%; top: calc(-6.28 * var(--u)); }
.ai-hero::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #f1f5fc 44.7%, rgba(240,245,251,0) 54.8%); }
.ai-hero nav { display: flex; align-items: center; justify-content: space-between; min-height: calc(40 * var(--u)); }
.ai-hero nav .ai-brand { width: calc(145 * var(--u)); }
.ai-hero nav a:not(.ai-brand) { color: #fff; background: var(--ink); border-radius: 6px; padding: calc(10 * var(--u)) calc(20 * var(--u)); font-size: max(10px, calc(14 * var(--u))); line-height: 20px; }
.ai-hero-copy { width: calc(625 * var(--u)); margin-left: calc(124 * var(--u)); margin-top: calc(12 * var(--u)); }
.ai-hero h1 { font-weight: 700; line-height: 1.4; white-space: nowrap; }
.ai-hero-line { display: flex; align-items: center; height: calc(157 * var(--u)); }
.ai-hero-line > img { width: calc(166 * var(--u)); flex: 0 0 auto; }
.ai-hero-line > span { font-size: calc(62.936 * var(--u)); margin-left: calc(-13 * var(--u)); }
.ai-hero-line small { font-size: .7em; }
.ai-hero-line-second { display: flex; align-items: baseline; margin-top: calc(-7 * var(--u)); }
.ai-hero-line-second b { font-size: calc(73.733 * var(--u)); }
.ai-hero-line-second > span { font-size: calc(57.884 * var(--u)); letter-spacing: -.01em; }
.ai-hero-line-second small { font-size: .75em; }
.ai-hero-copy > p { color: #5d5c98; font-size: calc(14.6 * var(--u)); font-weight: 700; white-space: nowrap; margin: calc(10 * var(--u)) 0 calc(25 * var(--u)); }
.ai-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(15 * var(--u)) calc(19 * var(--u)); }
.ai-hero-grid .ai-hero-card { border-radius: 6px; background: #fff; padding: calc(10 * var(--u)) calc(12 * var(--u)); display: grid; grid-template-columns: auto 1fr; gap: calc(9 * var(--u)) calc(4 * var(--u)); align-items: center; }
.ai-hero-grid .ai-label { font-size: calc(11.481 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)); text-align: center; }
.ai-hero-grid b { font-size: calc(17.222 * var(--u)); letter-spacing: -.04em; white-space: nowrap; }
.ai-hero-grid img { grid-column: 1 / -1; width: 100%; aspect-ratio: 272 / 153; object-fit: cover; }
.ai-fixed { position: fixed; top: calc(110 * var(--u)); right: max(0px, calc((100vw - 1920px) / 2)); z-index: 20; background: var(--ink); color: #fff !important; text-align: center; width: calc(170 * var(--u)); padding: calc(20 * var(--u)) calc(12 * var(--u)); font-size: max(10px, calc(15 * var(--u))); line-height: 1.4; }
.ai-fixed img { width: calc(94 * var(--u)); margin: 0 auto calc(12 * var(--u)); }
/* Before / After */
.ai-before { padding-top: calc(105 * var(--u)); }
.ai-before .ai-heading { margin-bottom: calc(75 * var(--u)); }
.ai-compare { width: 75%; }
.ai-compare-before { padding: calc(30 * var(--u)) calc(42 * var(--u)) calc(125 * var(--u)); background: url('/ssp/lcd/ai-workstyle/image/figma-4b6f6.svg') center / 100% 100% no-repeat; }
.ai-compare-after { position: relative; isolation: isolate; margin-top: calc(-62 * var(--u)); padding: calc(110 * var(--u)) calc(42 * var(--u)) calc(76 * var(--u)); }
.ai-compare-after::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('/ssp/lcd/ai-workstyle/image/figma-b0921.svg') center / 100% 100% no-repeat; transform: scaleY(-1); }
.ai-overline { color: #9ba5b3; text-align: center; font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1.4; margin-bottom: calc(52 * var(--u)) !important; }
.ai-compare .ai-box { min-height: calc(302 * var(--u)); text-align: center; padding: calc(25 * var(--u)) calc(34 * var(--u)); display: flex; flex-direction: column; justify-content: center; }
.ai-number { color: #b7a4f8; font-size: calc(48 * var(--u)); line-height: 1.4; margin-bottom: calc(20 * var(--u)); }
.ai-compare h3 { font-size: calc(32 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.ai-compare .ai-box p { font-size: max(12px, calc(20 * var(--u))); line-height: 1.8; }
.ai-compare-message { font-size: calc(32 * var(--u)); color: var(--ink); font-weight: 700; text-align: center; margin-top: calc(62 * var(--u)) !important; }
.ai-after-title { font-size: calc(48 * var(--u)) !important; text-align: center; margin-bottom: calc(76 * var(--u)) !important; }
/* WQHD comparison */
.ai-standard .ai-heading { margin-bottom: calc(84 * var(--u)); }
.ai-body-copy { font-weight: 700; line-height: 1.8; margin-bottom: calc(70 * var(--u)); }
.ai-body-copy p + p { margin-top: 1.8em; }
.ai-resolution { display: grid; grid-template-columns: 545fr 331fr 331fr; gap: calc(66 * var(--u)); align-items: end; }
.ai-resolution figure { min-width: 0; }
.ai-resolution h3 { font-size: calc(32 * var(--u)); color: var(--ink); text-align: center; margin: calc(18 * var(--u)) 0 calc(25 * var(--u)); line-height: 1.4; }
.ai-resolution figcaption { font-size: max(11px, calc(16 * var(--u))); line-height: 1.8; }
.ai-screen-diagram { position: relative; aspect-ratio: 545 / 401; margin-bottom: calc(28 * var(--u)); }
.ai-screen-diagram > img:first-child { width: 100%; }
.ai-screen-diagram .ai-screen-ui { position: absolute; width: 94.6%; height: 72.3%; left: 2.3%; top: 6.2%; object-fit: cover; }
.ai-resolution figure:nth-child(n+2) .ai-screen-diagram { aspect-ratio: 322 / 197; margin-bottom: 0; }
.ai-resolution figure:nth-child(n+2) .ai-screen-ui { top: 5.5%; height: 86%; width: 95%; left: 2.5%; }
.ai-fhd { width: 80%; margin-inline: auto; }
.ai-standard .ai-note { max-width: 54%; margin-left: auto; }
/* Copilot cards */
.ai-use { padding: calc(37 * var(--u)); }
.ai-use header, .ai-equipment header { display: flex; gap: calc(12 * var(--u)); align-items: center; margin-bottom: calc(27 * var(--u)); }
.ai-use header h3 { font-size: max(14px, calc(24 * var(--u))); }
.ai-use > div { display: grid; grid-template-columns: 44% minmax(0,1fr); gap: calc(24 * var(--u)); align-items: start; }
.ai-use > div img { width: 100%; }
.ai-use > div p { font-size: max(12px, calc(18 * var(--u))); line-height: 1.65; }
.ai-recommend { color: #0757b6; font-size: max(11px, calc(16.65 * var(--u))); font-weight: 700; margin-top: calc(20 * var(--u)) !important; }
/* Locations */
.ai-places { padding-bottom: calc(148 * var(--u)); }
.ai-places .ai-heading { margin-bottom: calc(70 * var(--u)); }
.ai-grid4 figure > img { width: 100%; aspect-ratio: 320 / 219; object-fit: cover; border-radius: calc(20 * var(--u)); }
.ai-grid4 h3 { text-align: center; color: var(--ink); font-size: max(14px, calc(24 * var(--u))); margin: calc(24 * var(--u)) 0 calc(14 * var(--u)); }
.ai-grid4 figcaption { font-size: max(11px, calc(16 * var(--u))); line-height: 1.8; }
/* Job tabs and carousel */
.ai-scenes { --role: #0757b6; padding-top: calc(110 * var(--u)); }
.ai-scenes .ai-heading { margin-bottom: calc(60 * var(--u)); }
.ai-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: calc(25 * var(--u)); margin-bottom: calc(86 * var(--u)); }
.ai-tabs button { border: 1px solid var(--role); border-radius: 0; color: var(--role); background: #fff; min-height: calc(83 * var(--u)); font-weight: 700; font-size: calc(28 * var(--u)); padding: 10px 4px; }
.ai-tabs button[aria-selected=true] { background: var(--role); color: #fff; }
.ai-carousel { position: relative; overflow: hidden; touch-action: pan-y; --card: calc(661 * var(--u)); --gap: calc(60 * var(--u)); }
.ai-track { display: flex; gap: var(--gap); align-items: stretch; transition: transform .45s ease; will-change: transform; }
.ai-slide { flex: 0 0 var(--card); width: var(--card); opacity: .2; color: var(--role); transition: opacity .45s ease; cursor: pointer; }
.ai-slide.is-active { opacity: 1; cursor: default; }
.ai-slide > img { width: 100%; aspect-ratio: 661 / 452; object-fit: cover; border-radius: calc(26 * var(--u)); user-select: none; -webkit-user-drag: none; }
.ai-slide-copy { padding: calc(16 * var(--u)) calc(9 * var(--u)); }
.ai-slide-time { font-size: calc(24 * var(--u)); font-weight: 700; line-height: 1.4; }
.ai-slide h3 { font-size: calc(36 * var(--u)); font-weight: 700; line-height: 1.4; margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); }
.ai-slide-desc { font-size: calc(29 * var(--u)); line-height: 1.4; color: var(--body); font-weight: 600; min-height: 2.8em; }
.ai-tags { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)) calc(18 * var(--u)); margin-top: calc(25 * var(--u)); }
.ai-tags > span { display: flex; gap: calc(8 * var(--u)); align-items: center; font-size: calc(21 * var(--u)); font-weight: 700; }
.ai-tags b { font-size: calc(21 * var(--u)); color: #fff; background: var(--role); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); white-space: nowrap; }
.ai-prev, .ai-next { position: absolute; z-index: 2; top: calc(226 * var(--u) - 24px); border: 0; background: transparent; color: var(--ink); width: 44px; height: 48px; border-radius: 0; font-size: 30px !important; line-height: 1; }
.ai-prev { left: calc(50% - 330.5 * var(--u) - 40px); }
.ai-next { right: calc(50% - 330.5 * var(--u) - 40px); }
.ai-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.ai-dots button { border: 0; width: 28px; height: 28px; background: transparent; padding: 8px; }
.ai-dots button::before { content: ''; display: block; width: 12px; height: 12px; border-radius: 50%; background: #d6deea; }
.ai-dots button[aria-current=true]::before { background: var(--role); }
.ai-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Equipment drawings: fixed-ratio layered Figma graphics. */
.ai-environments .ai-grid2 { row-gap: calc(47 * var(--u)); }
.ai-equipment { padding: calc(35 * var(--u)) calc(50 * var(--u)) calc(20 * var(--u)); }
.ai-equipment header { margin-bottom: calc(15 * var(--u)); }
.ai-equipment header h3 { font-size: max(14px, calc(24 * var(--u))); }
.ai-equipment .ai-label { font-size: max(10px, calc(15.262 * var(--u))); }
.ai-equipment > p { font-size: max(11px, calc(18 * var(--u))); margin-bottom: calc(10 * var(--u)); }
.ai-diagram { position: relative; width: 100%; overflow: hidden; }
.ai-diagram-scale { position: absolute; transform-origin: top left; width: calc(var(--dw) * 1px); height: calc(var(--dh) * 1px); transform: scale(var(--ds,1)); }
.ai-diagram img { max-width: none; }
/* Product cards and banners */
.ai-product { display: grid; grid-template-columns: 1.08fr 1fr; align-items: center; gap: calc(30 * var(--u)); padding: calc(54 * var(--u)) calc(60 * var(--u)); min-height: calc(347 * var(--u)); }
.ai-product .ai-spec { font-size: max(10px,calc(14 * var(--u))); color: #818181; font-weight: 700; line-height: 1.4; }
.ai-product h3 { font-size: max(16px,calc(24 * var(--u))); margin: calc(6 * var(--u)) 0 calc(20 * var(--u)); }
.ai-product p { font-size: max(11px,calc(14 * var(--u))); line-height: 1.8; }
.ai-product > img { width: 100%; }
.ai-product a { display: inline-flex; align-items: center; gap: 25px; border-bottom: 1px solid; color: #1b2da4; font-size: max(12px,calc(18 * var(--u))); padding-bottom: 5px; margin-top: calc(18 * var(--u)); }
.ai-banners { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: calc(30 * var(--u)); margin-top: calc(138 * var(--u)); }
.ai-banners > a { border: 1px solid #cccC; border-radius: 8px; overflow: hidden; }
.ai-banners img { width: 100%; }
.ai-banners .ai-consult-banner { container-type: inline-size; display: grid; align-items: center; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); gap: 3%; padding: 5%; background: linear-gradient(#fff,#ebebeb); }
.ai-banners .ai-consult-banner b { color: var(--ink); white-space: nowrap; font-size: clamp(11px, 5.7cqw, 24px); line-height: 1.4; }
.ai-banners .ai-consult-banner img { width: 100%; min-width: 0; }
.ai-cta { padding: calc(60 * var(--u)) 20px calc(90 * var(--u)); background: #003c6e; color: #fff; text-align: center; }
.ai-cta h2 { font-size: calc(36 * var(--u)); line-height: 1.5; margin-bottom: calc(55 * var(--u)); }
.ai-cta > div { display: flex; gap: calc(18 * var(--u)); justify-content: center; }
.ai-cta a { background: white; color: #111; border-radius: 4px; width: calc(467 * var(--u)); padding: calc(20 * var(--u)); font-size: calc(24 * var(--u)); }
.ai-lp footer { text-align: center; color: #111; padding: calc(55 * var(--u)) 20px calc(50 * var(--u)); }
.ai-lp footer img { width: calc(250 * var(--u)); margin: 0 auto calc(45 * var(--u)); }
.ai-lp footer small { font-size: max(10px,calc(16 * var(--u))); }
.ai-pagetop { position: fixed; right: 15px; bottom: 15px; z-index: 30; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #282866A6; color: white !important; font-size: 20px; }
/* Tablet: preserve two-column comparisons, reflow dense content. */
@media (max-width: 1023px) {
  .ai-lp { --u: .6px; font-size: 15px; }
  .ai-container { width: calc(100% - 48px); }
  .ai-section { padding: 64px 0; }
  .ai-heading { margin-bottom: 38px; }
  .ai-heading h2 { font-size: 27px; line-height: 1.65; }
  .ai-heading strong, .ai-heading h2 > .ai-gradient { font-size: 35px; line-height: 1.65; }
  .ai-heading h2:has(> .ai-gradient) > strong { font-size: 27px; }
  .ai-hero { --u: .0520833333vw; }
  .ai-hero nav .ai-brand { width: 100px; }
  .ai-hero nav a:not(.ai-brand) { font-size: 11px; padding: 7px 12px; }
  .ai-hero-copy { margin-top: 12px; }
  .ai-hero-copy > p { white-space: normal; font-size: 11px; line-height: 1.6; }
  .ai-hero-grid .ai-hero-card { grid-template-columns: 1fr; gap: 5px; padding: 7px; }
  .ai-hero-grid .ai-label { justify-self: start; font-size: 9px; padding: 2px 6px; }
  .ai-hero-grid b { font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
  .ai-hero-grid img { grid-column: auto; }
  .ai-grid3 { gap: 18px; }
  .ai-compare .ai-box { padding: 22px 15px; }
  .ai-compare h3 { font-size: 19px; }
  .ai-compare .ai-box p { font-size: 13px; }
  .ai-compare-message { font-size: 19px; }
  .ai-after-title { font-size: 25px !important; }
  .ai-body-copy { font-weight: 500; }
  .ai-lead { font-size: 22px; }
  .ai-use header { flex-wrap: wrap; gap: 8px; }
  .ai-use > div { grid-template-columns: 1fr; }
  .ai-use > div img { max-width: 290px; margin-inline: auto; }
  .ai-use > div p { font-size: 14px; }
  .ai-grid4 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px; }
  .ai-grid4 h3 { font-size: 18px; }
  .ai-grid4 figcaption { font-size: 14px; }
  .ai-tabs { gap: 12px; margin-bottom: 36px; }
  .ai-tabs button { font-size: 15px; min-height: 54px; }
  .ai-carousel { --card: 56vw; --gap: 30px; }
  .ai-slide-time { font-size: 16px; }
  .ai-slide h3 { font-size: 24px; }
  .ai-slide-desc { font-size: 18px; }
  .ai-tags > span, .ai-tags b { font-size: 13px; }
  .ai-prev, .ai-next { top: calc(56vw * .342 - 24px); }
  .ai-prev { left: calc(22% - 40px); }
  .ai-next { right: calc(22% - 40px); }
  .ai-equipment { padding: 22px 18px 15px; }
  .ai-equipment header { flex-wrap: wrap; }
  .ai-equipment header h3 { font-size: 17px; }
  .ai-equipment > p { font-size: 13px; }
  .ai-product { padding: 24px 20px; gap: 15px; }
  .ai-product h3 { font-size: 17px; }
  .ai-product p { font-size: 12px; }
  .ai-banners { margin-top: 45px; gap: 15px; }
  .ai-cta h2 { font-size: 25px; }
  .ai-cta a { font-size: 16px; width: 300px; padding: 14px 10px; }
}
/* Smartphone: readable type, one-column cards and peek-through carousel. */
@media (max-width: 767px) {
  .ai-lp { --u: .65px; font-size: 15px; }
  .ai-container { width: calc(100% - 36px); }
  .ai-section { padding: 52px 0 56px; }
  .ai-heading { padding-inline: 18px; margin-bottom: 32px; }
  .ai-heading > img { width: 46px; margin-bottom: 8px; }
  .ai-heading h2 { font-size: clamp(19px,4.9vw,25px); line-height: 1.6; }
  .ai-heading strong, .ai-heading h2 > .ai-gradient { font-size: clamp(25px,6.5vw,33px); line-height: 1.55; }
  .ai-heading h2:has(> .ai-gradient) > strong { font-size: clamp(19px,4.9vw,25px); line-height: 1.6; }
  .ai-grid2, .ai-grid3 { grid-template-columns: 1fr; gap: 20px; }
  .ai-box { border-radius: 8px; }
  .ai-hero { padding: 54px 18px 30px; display: flex; flex-direction: column; }
  .ai-hero nav { position: absolute; top: 13px; left: 18px; right: 18px; }
  .ai-hero nav a:not(.ai-brand) { font-size: 10px; padding: 6px 9px; }
  .ai-hero-photo { position: relative; inset: auto; order: 0; z-index: -2; width: calc(100% + 36px); max-width: none !important; margin-left: -18px; height: clamp(235px,65vw,370px); object-fit: cover; object-position: right center; }
  .ai-hero::before { display: none; }
  .ai-hero-copy { --u: min(.091vw,.65px); width: 100%; max-width: 540px; margin: 0 auto; }
  .ai-hero h1 { margin: -12px auto 0; width: fit-content; }
  .ai-hero-line { height: auto; justify-content: center; }
  .ai-hero-line > img { width: clamp(64px,18vw,100px); }
  .ai-hero-line > span { font-size: clamp(24px,6.6vw,38px); margin-left: -5px; }
  .ai-hero-line-second { justify-content: center; margin-top: 0; }
  .ai-hero-line-second b { font-size: clamp(32px,8.1vw,47px); }
  .ai-hero-line-second > span { font-size: clamp(23px,6.1vw,36px); }
  .ai-hero-copy > p { font-size: 12px; margin: 18px 0 20px; font-weight: 500; }
  .ai-hero-grid { gap: 10px; }
  .ai-hero-grid .ai-hero-card { padding: 9px; gap: 6px; grid-template-columns: 1fr; align-content: start; }
  .ai-hero-grid .ai-label { font-size: 10px; }
  .ai-hero-grid b { font-size: clamp(10px,2.6vw,13px); min-height: 2.8em; display: flex; align-items: center; }
  .ai-hero-grid img { grid-column: auto; }
  .ai-before .ai-heading { margin-bottom: 30px; }
  .ai-compare-before { padding: 24px 16px 58px; }
  .ai-compare-after { margin-top: -24px; padding: 54px 16px 28px; }
  .ai-overline { font-size: 24px; margin-bottom: 24px !important; }
  .ai-number { font-size: 28px; margin-bottom: 8px; }
  .ai-compare .ai-box { min-height: 0; padding: 22px 18px; }
  .ai-compare h3 { font-size: 20px; margin-bottom: 10px; }
  .ai-compare .ai-box p { font-size: 14px; }
  .ai-compare-message { margin-top: 26px !important; font-size: 17px; line-height: 1.7; }
  .ai-after-title { font-size: 21px !important; margin-bottom: 28px !important; }
  .ai-after-title > span { display: block; }
  .ai-standard .ai-heading { margin-bottom: 30px; }
  .ai-lead { font-size: 18px; line-height: 1.7; margin-bottom: 24px !important; }
  .ai-body-copy { font-size: 14px; margin-bottom: 32px; }
  .ai-body-copy p + p { margin-top: 20px; }
  .ai-resolution { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }
  .ai-resolution figure:first-child { grid-column: 1 / -1; width: min(100%,430px); margin-inline: auto; }
  .ai-resolution h3 { font-size: 17px; margin: 14px 0 10px; }
  .ai-resolution figcaption { font-size: 12px; }
  .ai-standard .ai-note { max-width: none; font-size: 11px; margin-top: 24px !important; }
  .ai-intro { font-size: 14px; text-align: left; margin-bottom: 24px !important; }
  .ai-use { padding: 22px; }
  .ai-use header { margin-bottom: 18px; }
  .ai-use header h3 { font-size: 16px; }
  .ai-label { font-size: 12px; padding: 4px 12px; }
  .ai-use > div img { max-width: 400px; }
  .ai-use > div p { font-size: 14px; line-height: 1.8; }
  .ai-recommend { font-size: 12px; margin-top: 16px !important; }
  .ai-places .ai-heading { margin-bottom: 30px; }
  .ai-grid4 { gap: 24px 16px; }
  .ai-grid4 h3 { font-size: 15px; margin: 12px 0 6px; }
  .ai-grid4 figcaption { font-size: 12px; }
  .ai-grid4 figure > img { border-radius: 12px; }
  .ai-scenes .ai-heading { margin-bottom: 30px; }
  .ai-tabs { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 28px; }
  .ai-tabs button { min-height: 48px; font-size: 14px; }
  .ai-carousel { --card: 82vw; --gap: 18px; }
  .ai-slide > img { border-radius: 15px; }
  .ai-slide-copy { padding: 14px 3px; }
  .ai-slide-time { font-size: 14px; }
  .ai-slide h3 { font-size: 21px; margin: 4px 0 9px; }
  .ai-slide-desc { font-size: 15px; line-height: 1.7; min-height: 5.1em; }
  .ai-tags { gap: 8px 10px; margin-top: 16px; }
  .ai-tags > span, .ai-tags b { font-size: 11px; }
  .ai-tags b { padding: 4px 6px; }
  .ai-prev, .ai-next { top: calc(82vw * .342 - 20px); width: 32px; height: 40px; font-size: 23px !important; }
  .ai-prev { left: 2px; }
  .ai-next { right: 2px; }
  .ai-equipment { padding: 22px 18px 12px; }
  .ai-equipment header { margin-bottom: 14px; gap: 9px; }
  .ai-equipment header h3 { font-size: 17px; }
  .ai-equipment .ai-label { font-size: 11px; }
  .ai-equipment > p { font-size: 14px; }
  .ai-environments .ai-grid2 { row-gap: 22px; }
  .ai-product { padding: 24px 20px; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 16px; }
  .ai-product h3 { font-size: 17px; margin: 7px 0 15px; }
  .ai-product p { font-size: 12px; }
  .ai-product .ai-spec { font-size: 10px; }
  .ai-product a { margin-top: 16px; gap: 10px; font-size: 13px; }
  .ai-banners { grid-template-columns: 1fr; max-width: 430px; margin: 40px auto 0; gap: 16px; }
  .ai-consult-banner { min-height: 145px; }
  .ai-cta { padding: 40px 18px 48px; }
  .ai-cta h2 { font-size: 21px; margin-bottom: 25px; }
  .ai-cta > div { flex-direction: column; gap: 12px; max-width: 430px; margin-inline: auto; }
  .ai-cta a { width: 100%; font-size: 16px; }
  .ai-lp footer { padding: 34px 18px; }
  .ai-lp footer img { width: 180px; margin-bottom: 22px; }
  .ai-pagetop { width: 34px; height: 34px; right: 10px; bottom: 10px; }
}
@media (max-width: 374px) {
  .ai-container { width: calc(100% - 28px); }
  .ai-tabs button { font-size: 12px; }
  .ai-product { grid-template-columns: 1fr; }
  .ai-product > img { grid-row: 1; width: 75%; margin-inline: auto; }
  .ai-grid4 { grid-template-columns: 1fr; }
  .ai-grid4 figcaption { font-size: 14px; }
  .ai-use header h3 { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-track, .ai-slide { transition: none !important; }
}

/* Scroll reveal and persistent consultation link. */
.ai-fixed { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.ai-fixed.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.ai-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--reveal-delay, 0ms); }
.ai-reveal.is-revealed { opacity: 1; transform: none; }
.ai-track.is-resetting .ai-slide { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .ai-reveal { opacity: 1; transform: none; transition: none; }
  .ai-fixed { transition: none; }
}

.ai-nowrap { display: inline-block; white-space: nowrap; }
@media (max-width: 1023px) {
  .ai-lp { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .ai-fixed { display: flex; align-items: center; justify-content: center; gap: 12px; top: auto; right: 0; bottom: 0; left: 0; width: 100%; min-height: 64px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); font-size: 15px; line-height: 1.4; box-shadow: 0 -2px 12px #0002; }
  .ai-fixed img { width: 40px; margin: 0; }
  .ai-fixed br { display: none; }
  .ai-pagetop { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Job selectors: hover feedback without changing the selected job. */
.ai-tabs button { transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
  .ai-tabs button:hover { background: var(--role); color: #fff; box-shadow: 0 3px 10px #17203326; }
}
.ai-tabs button:focus-visible { outline: 2px solid var(--role); outline-offset: 3px; }