/* global-2026.css — 全ページ共通テーマ層（フォント・リンク・グローバルナビ）
   ロジクール日本を参照した「明るく・読みやすく・迷わない」方針。
   既存CSSの後に読み込み、データ・レイアウト構造は変えずに表示品質を底上げする。 */

/* ---------- 1. タイポグラフィ：Noto Sans JP を全体の主書体に ---------- */
body{
  font-family:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"palt";
}
h1,h2,h3,h4,h5,
.dl-title,.dl-h,.dl-sh,.pt-t,.ct-t,.hb-h1{
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.45;
}
/* 等幅は「型番・コード・番号」専用のアクセントに格下げ（見出しの機械的印象を除去） */
.mono{letter-spacing:.02em}
h1 .mono,h2 .mono,h3 .mono{font-family:inherit}

/* ---------- 2. リンクの視認性：本文中のリンクは常に「リンクと分かる」 ---------- */
main p a,main li a,main td a,main dd a,
.dl-long a,.src-note a,.pt-s a,.ct-lead a,.lp-sub a,.hb-note a{
  color:var(--blue,#1d69df);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,var(--blue,#1d69df) 45%,transparent);
}
main p a:hover,main li a:hover,main td a:hover,
.dl-long a:hover,.pt-s a:hover,.hb-note a:hover{
  color:var(--blue-dim,#155bc4);
  text-decoration-color:currentColor;
}
a:focus-visible{outline:2px solid var(--blue,#1d69df);outline-offset:2px;border-radius:4px}

/* ---------- 3. グローバルヘッダー（ロジクール日本型：ユーティリティ＋メガメニュー＋検索＋CTA） ---------- */
.gh{position:sticky;top:0;z-index:80;background:#fff;border-bottom:1px solid var(--line,#e2e8f0)}
.gh-util{background:#f4f6f9;border-bottom:1px solid var(--line,#e2e8f0);font-size:11.5px}
.gh-uin{max-width:1240px;margin:0 auto;padding:0 16px;display:flex;justify-content:flex-end;gap:2px}
.gh-util a{display:inline-block;padding:6px 10px;color:var(--ink-dim,#52647a);text-decoration:none}
.gh-util a:hover{color:var(--blue,#1d69df)}
.gh-tel{font-weight:600}
.gh-main{position:relative}
.gh-in{max-width:1240px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:10px;min-height:64px}
.gh-logo img{display:block;width:auto;height:30px}
.gh-nav{flex:0 1 auto;min-width:0}
.gh-nav>ul{display:flex;list-style:none;margin:0;padding:0;gap:0}
.gh-nav>ul>li{position:static}
.gh-nav>ul>li>a{display:flex;align-items:center;gap:4px;padding:20px 14px;font-size:14px;font-weight:600;color:var(--ink,#15212e);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.gh-car{font-size:9px;color:var(--ink-faint,#697887);transition:transform .15s}
.gh-nav>ul>li:hover>a,.gh-nav>ul>li:focus-within>a{color:var(--blue,#1d69df);border-bottom-color:var(--blue,#1d69df)}
.gh-nav>ul>li:hover>a .gh-car,.gh-nav>ul>li:focus-within>a .gh-car{transform:rotate(180deg);color:var(--blue,#1d69df)}
/* メガパネル：ヘッダー全幅・白・影。hover / キーボードフォーカスで開く */
.gh-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line,#e2e8f0);box-shadow:0 18px 40px -18px rgba(16,32,54,.25);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.gh-has:hover .gh-panel,.gh-has:focus-within .gh-panel{opacity:1;visibility:visible;transform:none}
.gh-cols{max-width:1240px;margin:0 auto;padding:26px 16px 30px;display:flex;gap:36px}
.gh-col{min-width:0}
.gh-ct{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;color:#fff;margin:0 0 12px;padding:6px 14px;border-radius:8px;background:#1d69df}
.gh-col:nth-child(2) .gh-ct{background:#0ca678}
.gh-col:nth-child(3) .gh-ct{background:#e8590c}
.gh-col:nth-child(4) .gh-ct{background:#7048e8}
.gh-grid2 .gh-ct{column-span:all}
.gh-col a{display:block;padding:6px 0;font-size:13.5px;color:var(--ink,#15212e);text-decoration:none}
.gh-col a:hover{color:var(--blue,#1d69df)}
.gh-n{display:inline-block;margin-left:6px;font-size:10.5px;color:var(--ink-faint,#697887)}
.gh-grid2{columns:2;column-gap:32px;min-width:420px}
.gh-grid2 .gh-ct{column-span:all}
.gh-grid2 a{break-inside:avoid}
.gh-promo{margin-left:auto;background:var(--bg-soft,#f3f7fb);border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:18px;min-width:220px;align-self:flex-start}
.gh-promo b{display:block;font-size:14px;margin-bottom:4px}
.gh-promo span{display:block;font-size:12px;color:var(--ink-dim,#52647a);margin-bottom:12px}
.gh-pbtn{display:inline-block;background:var(--blue,#1d69df);color:#fff!important;font-size:12.5px;font-weight:700;padding:9px 14px;border-radius:8px;text-decoration:none}
.gh-pbtn:hover{background:var(--blue-dim,#155bc4)}
.gh-plink{display:block;margin-top:10px;font-size:12px;color:var(--blue,#1d69df)!important;text-decoration:none}
/* 検索（ロジクール同様に常設） */
.gh-search{margin-left:auto;display:flex;align-items:center;border:1px solid var(--line,#e2e8f0);border-radius:999px;background:var(--bg-soft,#f3f7fb);overflow:hidden}
.gh-search input{border:0;background:transparent;padding:9px 6px 9px 14px;font-size:12.5px;width:200px;outline:none;color:var(--ink,#15212e)}
.gh-search button{border:0;background:transparent;padding:9px 14px 9px 6px;font-size:12.5px;color:var(--blue,#1d69df);font-weight:700;cursor:pointer}
.gh-search:focus-within{border-color:var(--blue,#1d69df);background:#fff}
/* CTA（ページ固有の見積もりボタンをそのまま収容） */
.gh-cta{flex:none;display:inline-block;background:var(--green,#16b886);color:#fff;border:0;border-radius:10px;padding:11px 16px;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none}
.gh-cta:hover{background:var(--green-dim,#0c8762)}
/* レスポンシブ：タブレット以下はトップ項目のみ（各項目は一覧ページへのリンクとして機能） */
@media(max-width:1120px){.gh-search input{width:130px}}
@media(max-width:1000px){
  .gh-panel{display:none}
  .gh-car{display:none}
  .gh-nav{overflow-x:auto;scrollbar-width:none}
  .gh-nav::-webkit-scrollbar{display:none}
  .gh-nav>ul>li>a{padding:20px 10px;font-size:13px}
  .gh-search{display:none}
}
@media(max-width:640px){
  .gh-util{display:none}
  .gh-logo img{height:24px}
  .gh-in{min-height:54px}
  .gh-nav>ul>li>a{padding:16px 9px;font-size:12.5px}
  .gh-cta{padding:9px 12px;font-size:12px}
}
/* ---------- 4. 全ページUI刷新レイヤー（ロジクール型のクリーンな面構成） ---------- */
/* 4-1 ページ地とコンテンツカード */
body{background:#f5f7fa}
.dl-sec,.dl-card-block{background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:14px;box-shadow:0 1px 2px rgba(16,32,54,.04)}
.dl-sec{padding:22px 24px;margin:14px 0}
/* 装飾ノイズの除去（走査線・グリッド背景） */
.scan,.gridfield{display:none!important}

/* 4-2 見出し・パンくず・キッカー */
.dl-title{font-size:clamp(22px,2.6vw,32px);line-height:1.4}
.dl-crumbs{font-size:11.5px;color:var(--ink-faint,#697887)}
.dl-crumbs a{color:var(--ink-dim,#52647a);text-decoration:none}
.dl-crumbs a:hover{color:var(--blue,#1d69df)}
.dl-kicker{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--blue,#1d69df)}
.dl-h{font-size:18px;margin-top:0}
.dl-sh{font-size:15px}

/* 4-3 表：読みやすいゼブラなしの罫線・ヘッダ列 */
.techtbl,.dl-spec{width:100%;border-collapse:collapse;font-size:13.5px}
.techtbl th,.dl-spec th{background:var(--bg-soft,#f3f7fb);color:var(--ink,#15212e);font-weight:600;text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line,#e2e8f0);width:11em}
.techtbl td,.dl-spec td{padding:10px 14px;border-bottom:1px solid var(--line,#e2e8f0);line-height:1.8}
.techtbl tr:last-child th,.techtbl tr:last-child td,
.dl-spec tr:last-child th,.dl-spec tr:last-child td{border-bottom:0}
.techtbl caption,.dl-spec caption{text-align:left;padding:0 0 6px}

/* 4-4 リスト・タグ・型番 */
.dl-list{list-style:none;padding-left:clamp(14px,1.6vw,22px);margin:.2em 0}
.dl-list li{position:relative;padding-left:24px;margin:.55em 0;line-height:1.72}
.dl-list li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--green,#16b886);transform:rotate(45deg)}
.dl-list.env li::before{background:var(--blue,#1d69df)}
.dl-list.ben li::before{background:var(--amber,#e8590c)}
/* 番号付き手順リストはマーカーを出さずインデントのみ */
ol.dl-list{list-style:decimal;padding-left:1.4em}
ol.dl-list li{padding-left:.2em}
ol.dl-list li::before{display:none}
.dl-tags{display:flex;flex-wrap:wrap;gap:6px}
.ptag,.dcert{display:inline-block;border:1px solid var(--line,#e2e8f0);background:var(--bg-soft,#f3f7fb);border-radius:999px;padding:4px 12px;font-size:11.5px;color:var(--ink-dim,#52647a)}
.dcert{border-color:var(--green,#16b886);color:var(--green-dim,#0c8762);background:var(--green-soft,#e4f8f1)}
.dl-pn{font-size:12px;color:var(--ink-faint,#697887)}

/* 4-5 FAQ：アコーディオンカード */
.dl-faq details{border:1px solid var(--line,#e2e8f0);border-radius:12px;background:#fff;margin:10px 0;overflow:hidden}
.dl-faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:600;font-size:13.5px;position:relative;padding-right:40px}
.dl-faq summary::-webkit-details-marker{display:none}
.dl-faq summary::after{content:"＋";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--blue,#1d69df);font-weight:700}
.dl-faq details[open] summary::after{content:"−"}
.dl-faq details[open] summary{border-bottom:1px solid var(--line,#e2e8f0)}
.dl-faq .a{padding:12px 16px;font-size:13px;line-height:1.9;color:var(--ink-dim,#52647a)}

/* 4-6 ボタン統一（主=緑CTA・副=青・第三=白） */
button.btn,.btn,.stg-back{border-radius:10px;font-weight:700;cursor:pointer}
.btn-ghost{background:#fff;border:1px solid var(--line-bright,#cdd8e3);color:var(--ink,#15212e)}
.btn-ghost:hover{border-color:var(--blue,#1d69df);color:var(--blue,#1d69df)}

/* 4-7 フッター・帯セクションの整音 */
.foot-band a{text-decoration:none}
.foot-band a:hover{color:var(--blue,#1d69df)}
.pt-sec .pt-s a,.ct-sec a{text-underline-offset:3px}

/* 4-8 細部 */
.techtbl th{border-right:1px solid var(--line,#e2e8f0)}
.dl-long{font-size:14px}
.dl-long p{max-width:72em}
main:focus{outline:none}
@media(max-width:640px){
  .dl-sec{padding:16px 14px}
  .techtbl th,.dl-spec th{width:8.5em;padding:9px 10px}
  .techtbl td,.dl-spec td{padding:9px 10px}
}

/* ---------- 5. NXP型 製品ページ内ナビ＋ビジュアルカード ---------- */
/* v214: ページ内ナビは折り返し表示（文字切れ防止）＋ピル配色で視認性を改善 */
.pnav{position:sticky;top:92px;z-index:40;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:12px;margin:6px 0 16px;box-shadow:0 1px 2px rgba(16,32,54,.04)}
.pnav ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:8px}
.pnav li{margin:0}
.pnav a{display:block;white-space:nowrap;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink-dim,#52647a);text-decoration:none;border-radius:8px;background:#eef2f7;border:1px solid transparent;transition:background .15s,color .15s,border-color .15s}
.pnav a:hover,.pnav a:focus-visible{color:#fff;background:var(--blue,#1d69df);border-color:var(--blue,#1d69df);outline:none}
.pnav a[aria-current="true"],.pnav a.on{color:#fff;background:var(--blue,#1d69df)}
@media(max-width:1000px){.pnav{top:57px}}
@media(max-width:640px){.pnav{top:47px}.pnav a{padding:7px 11px;font-size:12px}}
/* v214: ブランド（メーカー）ヒーローのリード文 */
.dl-hero-lead{font-size:13.5px;line-height:1.85;color:var(--ink-dim,#52647a);margin:6px 0 16px;max-width:54ch}
@media(max-width:860px){.dl-hero-lead{max-width:none}}
.dl-hero{align-items:start}
.dl-sec[id],.dl-card-block[id]{scroll-margin-top:150px}
/* 製品ヒーローの整形（タイトル帯を大きく・CTA行を明確に） */
.dl-title{margin-top:6px}
.dl-tags{margin:10px 0 14px}
/* ビジュアルカードグリッド（一覧ページ共通） */
.viz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0}
@media(max-width:980px){.viz-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.viz-grid{grid-template-columns:1fr}}
.viz-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s,border-color .15s}
.viz-card:hover{border-color:var(--blue,#1d69df);box-shadow:0 12px 28px -14px rgba(16,32,54,.3);transform:translateY(-2px)}
.viz-img{aspect-ratio:16/9;background:#f3f7fb;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line,#e2e8f0)}
.viz-img img{max-width:82%;max-height:82%;object-fit:contain}
.viz-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.viz-t{font-size:14.5px;font-weight:700;line-height:1.5}
.viz-d{font-size:12.5px;color:var(--ink-dim,#52647a);line-height:1.7;flex:1}
.viz-go{font-size:12px;color:var(--blue,#1d69df);font-weight:700}
.viz-badge{align-self:flex-start;font-size:10.5px;font-weight:700;color:var(--green-dim,#0c8762);background:var(--green-soft,#e4f8f1);border-radius:999px;padding:3px 10px}
.viz-card:hover .viz-t{color:var(--blue,#1d69df)}
/* 画像なしのミニカード（ガイド・ブランド） */
.viz-mini .viz-body{padding:16px}
.viz-mini .viz-t{font-size:14px}

/* ---------- 6. ベンダーページ ヒーロー整形 ---------- */
.dl-hero{display:grid;grid-template-columns:minmax(280px,380px) 1fr;gap:32px;align-items:center;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:16px;padding:26px 28px;margin:8px 0 18px}
@media(max-width:860px){.dl-hero{grid-template-columns:1fr;gap:16px;padding:18px}}
.dl-hero .dl-hero-vis{background:#f6f8fb;border:1px solid var(--line,#e2e8f0);border-radius:12px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dl-hero .dl-hero-vis img{max-width:86%;max-height:86%;object-fit:contain}
.dl-hero .dl-hero-vis svg{width:100%;height:100%}

.dl-hero-brandmark{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:clamp(22px,3vw,34px);font-weight:800;letter-spacing:.02em;color:var(--lc,#1d69df);background:linear-gradient(135deg,#f6f9fd,#eef3f9)}

/* ---------- 7. Advantech型 左レール（類似の製品） ---------- */
.pd-cols{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;align-items:start}
@media(max-width:1000px){.pd-cols{grid-template-columns:1fr}}
.prail{position:sticky;top:150px;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:14px;padding:14px 14px 10px;box-shadow:0 1px 2px rgba(16,32,54,.04)}
@media(max-width:1000px){.prail{position:static;order:2;margin-top:6px}}
.prail-t{font-size:12px;font-weight:700;letter-spacing:.06em;color:#fff;background:#1d69df;border-radius:8px;padding:6px 12px;display:inline-block;margin-bottom:10px}
.prail a.prail-item{display:flex;gap:10px;align-items:center;padding:8px 4px;border-radius:8px;text-decoration:none;color:var(--ink,#15212e)}
.prail a.prail-item:hover{background:var(--blue-soft,#e8f1fe);color:var(--blue,#1d69df)}
.prail-th{flex:none;width:52px;height:40px;border:1px solid var(--line,#e2e8f0);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.prail-th img{max-width:90%;max-height:90%;object-fit:contain}
.prail-n{font-size:12px;line-height:1.5;font-weight:600}
.prail-v{display:block;font-size:10px;color:var(--ink-faint,#697887);font-weight:400}
.prail-cat{display:block;margin:8px 4px 4px;padding-top:10px;border-top:1px solid var(--line,#e2e8f0);font-size:11.5px;color:var(--blue,#1d69df);text-decoration:none;font-weight:700}
.prail-cat:hover{text-decoration:underline}

/* ---------- 8. レスポンシブ堅牢化（スマホ／タブレット／PC） ---------- */
.pd-cols{margin-top:4px}
@media(max-width:900px){
  .techtbl,.dl-spec{display:block;overflow-x:auto;white-space:normal} /* tbl-scroll */
  .techtbl th,.dl-spec th{min-width:7.5em}
}
@media(max-width:640px){
  .dl-title{font-size:21px}
  .viz-img{aspect-ratio:16/10}
  .gh-in{gap:6px}
}
img{max-width:100%;height:auto}
.pds,.pgal{max-width:100%}

/* ---------- 9. ヒーロー画像内ラベル（dl-layer）を画像下のキャプション帯へ正規化 ---------- */
.dl-hero-vis{position:relative;overflow:hidden}
.dl-hero-vis .dl-layer{
  position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;
  margin:0;padding:7px 12px;box-sizing:border-box;
  background:rgba(255,255,255,.94);border-top:1px solid var(--line,#e2e8f0);
  font-size:11px;line-height:1.4;font-weight:600;color:var(--ink-dim,#52647a)!important;
  white-space:normal;text-align:left;letter-spacing:.02em;
}
/* SVGプレースホルダは枠内に収める */
.dl-hero-vis svg.psvg{width:100%;height:100%;display:block;object-fit:cover}
.dl-hero-vis .scan{display:none}
/* スライダーが入ったヒーローではラベル帯は不要（各スライドにキャプションがある） */
.dl-hero-vis.has-img .pgal .dl-layer{display:none}

/* ---------- 10. ヒーロー画像サイズとバランスの最終調整 ---------- */
/* ヒーロー画像枠：縦長SVGが巨大化しないよう高さ上限を明示 */
.dl-hero .dl-hero-vis,.dl-hero-vis{max-height:300px}
.dl-hero-vis svg.psvg{max-height:280px;object-fit:contain}
/* 製品写真は枠いっぱい寄り（従来86%→約1.5倍の占有＝実効拡大） */
.dl-hero-vis.has-img img{max-width:100%;max-height:290px;object-fit:contain}
.dl-hero-vis.has-img .pgal{width:100%;height:auto}
.dl-hero-vis.has-img .pgal-slide img{max-height:270px}
/* 一覧カードのサムネも視認性优先で拡大 */
.viz-img img{max-width:92%;max-height:92%}
.prail-th img{max-width:100%;max-height:100%}
/* 2) 左寄り解消：本文カラムに読みやすい最大幅＋中央寄せ、レールを少し細く */
.pd-cols{grid-template-columns:220px minmax(0,1fr);gap:26px}
.pd-main{min-width:0}
.pd-main .dl-hero{max-width:none}
/* レールが無い（未適用）ページでも本文が間延びしないよう wrap 側で制御 */
main .wrap{max-width:1160px;margin-left:auto;margin-right:auto}
@media(max-width:1000px){
  .pd-cols{grid-template-columns:1fr}
  .dl-hero .dl-hero-vis,.dl-hero-vis{max-height:240px}
}
@media(max-width:640px){
  .dl-hero{grid-template-columns:1fr;gap:14px;padding:16px}
  .dl-hero .dl-hero-vis,.dl-hero-vis{max-height:210px}
  .dl-hero-vis.has-img img,.dl-hero-vis.has-img .pgal-slide img{max-height:200px}
}

/* ---------- 11. 左レール（類似の製品）はみ出し・画像フィット修正 ---------- */
.prail{box-sizing:border-box;max-width:100%;overflow:hidden}
.prail a.prail-item{align-items:flex-start;min-width:0}
.prail-n{min-width:0;flex:1 1 auto;overflow-wrap:anywhere;word-break:normal;white-space:normal}
.prail-t{white-space:normal;overflow-wrap:anywhere;max-width:100%;box-sizing:border-box}
/* サムネは枠にフィット（余白を詰めて中央） */
.prail-th{width:50px;height:38px;padding:3px;box-sizing:border-box}
.prail-th img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.prail-cat{overflow-wrap:anywhere}
@media(max-width:1000px){
  .prail{position:static}
  .prail a.prail-item{padding:10px 6px}
}

/* ---------- 12. 画像はみ出し防止・枠内フィット（全画像コンテナ横断の安全網） IMG CONTAINMENT SAFETY ---------- */
img{max-width:100%;height:auto}
/* 主要な画像コンテナは枠内contain（縦横比維持） */
.viz-img,.rel-vis,.dl-hero-vis,.prail-th,.pds,.pgal{overflow:hidden}
.viz-img img,.rel-vis img,.dl-hero-vis img,.prail-th img,
.pds-s img,.pgal-slide img{max-width:100%;max-height:100%;object-fit:contain}
.rel-vis{aspect-ratio:16/10;background:#f6f8fb;display:flex;align-items:center;justify-content:center}
.rel-vis img{width:auto;height:auto}
/* figure内の資料図版も枠内に */
figure img{max-width:100%;height:auto}
/* テーブル内の画像（ピン配置図等）もはみ出さない */
td img,th img{max-width:100%;height:auto}

/* ---------- 13. テキストはみ出し防止（全カード・見出し・チップ横断） TEXT OVERFLOW SAFETY ---------- */
.viz-t,.viz-d,.rel-name,.rel-vendor,.prail-n,.prail-t,.prail-cat,
.gh-ct,.gh-col a,.dl-title,.dl-h,.dl-sh,.hb-cat-n,.hb-sol-n,.hb-card b,
.hb-issue,.hb-brand,.rel-layer,.dl-pn,.dl-vendor,.pgal-slide figcaption,
.pds-s figcaption,figcaption,.techtbl td,.techtbl th{
  overflow-wrap:anywhere;word-break:normal;min-width:0;
}
.viz-card,.rel-card,.hb-card,.hb-cat,.hb-sol{min-width:0}
.viz-body,.rel-body{min-width:0;overflow:hidden}
/* 長い型番等が横スクロールを起こさないよう、フレックス子に min-width:0 */
.gh-col,.hb-entry>*,.viz-grid>*,.rel-grid>*{min-width:0}
/* rel-layer(カテゴリラベル)を rel-body 内の控えめなキッカーとして統一（枠外化・折返し） */
.rel-body .rel-layer{font-size:10px;letter-spacing:.08em;white-space:normal}

/* ---------- 14. 広い表の横スクロール（ピン配置等） TABLE SCROLL SAFETY ---------- */
.dl-sec{overflow-x:auto}
.techtbl,.dl-spec{max-width:100%}
.pintbl{min-width:0}
@media(max-width:640px){
  .pintbl td,.pintbl th{white-space:nowrap}
  .pintbl{display:block;overflow-x:auto}
}

/* 製品名リンク（strong多用の是正） */
.p-name{font-weight:600}

.cardh{font-weight:700;display:block}

/* ============================================================
   Premium hero band — 技術情報 / 受託開発 (v218)
   ============================================================ */
.phero{position:relative;overflow:hidden;border-radius:16px;margin:2px 0 22px;min-height:clamp(214px,30vw,344px);display:flex;align-items:flex-end;background:#0a1730;isolation:isolate;box-shadow:0 14px 34px -16px rgba(10,23,48,.5)}
.phero-bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center right;transform:scale(1.02)}
.phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,17,36,.94) 0%,rgba(8,18,38,.80) 40%,rgba(10,22,45,.40) 74%,rgba(12,26,52,.22) 100%),linear-gradient(180deg,rgba(6,14,30,.06),rgba(6,14,30,.58))}
.phero-in{position:relative;width:100%;padding:clamp(22px,3.4vw,42px) clamp(20px,3.6vw,46px)}
.phero-eyebrow{display:inline-block;font:600 11px/1 ui-monospace,"IBM Plex Mono",monospace;letter-spacing:.17em;text-transform:uppercase;color:#83d5ff;margin:0 0 13px;padding:6px 12px;border:1px solid rgba(131,213,255,.34);border-radius:999px;background:rgba(11,32,63,.4)}
.phero-title{color:#fff;font-weight:800;font-size:clamp(23px,3.3vw,39px);line-height:1.15;letter-spacing:.005em;margin:0 0 13px;text-shadow:0 2px 20px rgba(0,10,30,.5)}
.phero-lead{color:rgba(233,241,252,.91);font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.72;max-width:62ch;margin:0;text-shadow:0 1px 12px rgba(0,10,30,.4)}
.phero-lead b{color:#fff}
.phero-cta{margin-top:19px;display:flex;gap:11px;flex-wrap:wrap}
.phero-cta a{text-decoration:none;font-weight:700;font-size:13.5px;padding:11px 19px;border-radius:10px;transition:transform .12s ease,box-shadow .12s ease}
.phero-cta a:hover{transform:translateY(-1px)}
.phero-cta .pc-primary{background:#2b8cff;color:#fff;border:1px solid #2b8cff;box-shadow:0 10px 22px -10px rgba(43,140,255,.75)}
.phero-cta .pc-ghost{background:rgba(255,255,255,.10);color:#eaf2ff;border:1px solid rgba(255,255,255,.36)}
@media(max-width:640px){.phero{min-height:236px}.phero-in{padding:22px 20px}.phero::after{background:linear-gradient(90deg,rgba(7,17,36,.92),rgba(8,18,38,.74) 58%,rgba(10,22,45,.56) 100%),linear-gradient(180deg,rgba(6,14,30,.12),rgba(6,14,30,.74))}}

/* Scroll performance — remove per-frame backdrop blur on sticky bars */
.topbar,.steprail,.mobilebar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.topbar{background:#fff!important}
.steprail{background:#f4f8fb!important}
.mobilebar{background:#fff!important}

/* Premium hero — tags + service icon thumbnails (v218) */
.phero-tags{margin-top:15px;display:flex;flex-wrap:wrap;gap:8px}
.phero-tags .dl-tag{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);color:#dceafc;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:600}
.prail-th.svc-th{background:linear-gradient(140deg,#13345f,#0b1f3c);border-color:rgba(120,170,240,.30)}
.prail-th.svc-th svg{width:20px;height:17px;stroke:#5b9bef;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pp-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(9,13,18,.97)!important}

/* Empty rail thumbnails (software w/o photo) -> subtle glyph tile, never a blank box */
.prail-th:empty{position:relative;background:linear-gradient(140deg,#eff4fb,#e3ebf6);border-color:var(--line,#e2e8f0)}
.prail-th:empty::after{content:"";position:absolute;inset:0;background:#93a9ca;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 12l9 5 9-5'/%3E%3Cpath d='M3 16l9 5 9-5'/%3E%3C/svg%3E") center/20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5 9-5z'/%3E%3Cpath d='M3 12l9 5 9-5'/%3E%3Cpath d='M3 16l9 5 9-5'/%3E%3C/svg%3E") center/20px no-repeat}

/* Product photo gallery (pgal) — functional slider (v219) */
.pgal{position:relative}
.pgal-track{display:flex;transition:transform .45s ease;will-change:transform}
.pgal-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;min-width:0}
.pgal-slide figcaption{display:none}
.pgal-prev,.pgal-next{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:1px solid var(--line,#e2e8f0);background:rgba(255,255,255,.92);color:#0b1f3c;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:3;box-shadow:0 2px 8px rgba(16,32,54,.14)}
.pgal-prev{left:8px}.pgal-next{right:8px}
.pgal-prev:hover,.pgal-next:hover{background:#fff}
.pgal-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center;z-index:3}
.pgal-dot{width:7px;height:7px;border-radius:50%;border:0;background:rgba(16,32,54,.30);cursor:pointer;padding:0}
.pgal-dot.on{background:#2b8cff}

/* Vendor brand hero — full-width band above the rail+content columns (v220) */
.dl-hero-full{margin:0 0 18px}

/* ===== Mega-menu (v223) — full-width panel (no page shift), content centered ===== */
.gh-nav>ul>li{position:static}
.gh-panel{left:0;right:0;width:auto;max-width:none;border-radius:0;margin-top:0}
.gh-cols{max-width:1240px;margin:0 auto;padding:26px 16px 30px;justify-content:center}
.gh-promo{margin-left:0}

/* Content wrap fix (v224): pages where .wrap is the <main> element itself
   (service pages, some b-plus product pages, 404) were rendering full-width.
   Constrain and pad them like every other page so content never touches the edges. */
main.wrap{max-width:1160px;margin-left:auto;margin-right:auto;
  padding-left:clamp(16px,3vw,22px);padding-right:clamp(16px,3vw,22px);box-sizing:border-box}

/* ===== Unified product hero band (v226) — solid dark band on top, gallery moves into content column ===== */
.phero.phero-solid{background:linear-gradient(120deg,#123a4d,#0c2436);min-height:0;align-items:stretch}
.phero.phero-solid::after{display:none}
.phero-pn{font:600 12px/1.5 ui-monospace,"IBM Plex Mono",monospace;color:rgba(201,223,241,.82);letter-spacing:.02em;margin:2px 0 12px}
.phero-cta .btn{text-decoration:none;display:inline-block;padding:11px 19px;border-radius:10px;font-weight:700;font-size:13.5px;cursor:pointer}
.phero-cta .btn-primary{background:#16b886;color:#fff;border:1px solid #16b886}
.phero-cta .btn-ghost{background:rgba(255,255,255,.10);color:#eaf2ff;border:1px solid rgba(255,255,255,.38)}
/* gallery/visual placed standalone at top of the content column */
.pd-main>section>.dl-hero-vis,.pd-main>section>.dl-hero-vis.has-img{width:100%;margin:0 0 18px;border:1px solid var(--line,#e2e8f0);border-radius:14px;background:#fff}

/* ===== Product hero: 2-column (identity + overview | gallery) v227b ===== */
.phero-in.phero-split{display:flex;gap:clamp(20px,3vw,42px);align-items:center}
.phero-body{flex:1 1 52%;min-width:0}
.phero-media{flex:1 1 44%;min-width:0}
.phero-body .phero-lead{margin-top:16px;max-width:none}
.phero-media .dl-hero-vis{margin:0;background:#fff;border:1px solid rgba(255,255,255,.18);border-radius:12px;overflow:hidden}
.phero-media .dl-hero-vis img{max-height:300px}
.phero-media .dl-layer{background:rgba(255,255,255,.9);padding:2px 8px;border-radius:6px}
@media(max-width:860px){.phero-in.phero-split{flex-direction:column;align-items:stretch}.phero-media{order:-1;margin-bottom:6px}}

/* ===== Animated SVG background for product hero bands (v230) ===== */
.phero-solid{position:relative}
.phero-anim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;user-select:none;opacity:.95}
.phero-solid::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,rgba(8,24,40,.86) 0%,rgba(8,24,40,.55) 52%,rgba(8,24,40,.34) 100%)}
.phero-solid>.phero-in{position:relative;z-index:2}
@media(max-width:860px){.phero-solid::before{background:linear-gradient(160deg,rgba(8,24,40,.82),rgba(8,24,40,.66))}}

/* Animated overlay for image hero bands (service/guide/contract) — glow particles over the photo */
.phero>.phero-anim-blend{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;pointer-events:none;opacity:.6;mix-blend-mode:screen}
.phero-in{position:relative;z-index:2}

/* ===== Menu/submenu concept hero (solutions, categories) — animated bg, NO product photo (v233) ===== */
.phero-menu{align-items:center}
.phero-menu::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(135% 130% at 12% 50%,rgba(7,18,34,.82) 0%,rgba(7,18,34,.42) 55%,rgba(7,18,34,.24) 100%)}
.phero-menu .phero-in{max-width:none}
.phero-menu .phero-lead{max-width:62ch}
.phero-title{text-wrap:balance}
.phero-lead{text-wrap:pretty}
.phero-menu .phero-eyebrow{color:#8ef0c8;border-color:rgba(142,240,200,.36);background:rgba(12,44,38,.4)}

/* ===== Premium brand hero (v241): effect background + white logo plate ===== */
.brand-vis{position:relative;background-size:cover;background-position:center;border-radius:14px;overflow:hidden;min-height:clamp(180px,22vw,244px);display:flex;align-items:center;justify-content:center;isolation:isolate}
.brand-vis::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(120deg,rgba(6,14,28,.5),rgba(6,14,28,.2))}
.brand-plate{position:relative;z-index:1;background:#fff;border-radius:12px;padding:clamp(16px,2.6vw,28px) clamp(20px,3.6vw,40px);box-shadow:0 14px 32px -12px rgba(6,14,28,.55);display:flex;align-items:center;justify-content:center;max-width:80%}
.brand-logo{max-width:100%;max-height:clamp(52px,9vw,92px);width:auto;height:auto;object-fit:contain;display:block}
.brand-plate-text{font-weight:800;font-size:clamp(20px,3vw,30px);color:#0f1b2e;letter-spacing:.01em;line-height:1.1;text-align:center}
@media(max-width:820px){.brand-vis{min-height:150px}.brand-plate{max-width:74%}}

/* ===== Brand catalog cards: logo tile (v242) ===== */
.brand-card-vis{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#eef3f9,#dfe8f2);min-height:118px;padding:20px}
.brand-card-vis img{max-width:82%;max-height:66px;width:auto;height:auto;object-fit:contain;display:block}
.brand-card-vis .brand-card-name{font-weight:800;font-size:19px;color:#123a4d;text-align:center;letter-spacing:.01em}

/* ===== Brand hero v2: cohesive dark premium band (v246) ===== */
.dl-hero-full.brand-hero{position:relative;overflow:hidden;border-radius:16px;background:#0a1728;isolation:isolate;display:flex;align-items:center;gap:clamp(22px,3.5vw,46px);padding:clamp(26px,3.6vw,50px) clamp(24px,3.6vw,52px);min-height:clamp(196px,23vw,262px);box-shadow:0 20px 48px -22px rgba(8,20,40,.5)}
.brand-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.9;pointer-events:none}
.dl-hero-full.brand-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(8,18,34,.82) 0%,rgba(8,18,34,.5) 44%,rgba(8,18,34,.66) 100%)}
.brand-hero-chip{position:relative;z-index:2;flex:0 0 auto;background:#fff;border-radius:14px;padding:clamp(15px,2vw,22px) clamp(20px,2.8vw,32px);box-shadow:0 26px 58px -22px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.28);display:inline-flex;align-items:center;justify-content:center}
.brand-hero-chip img{max-height:clamp(46px,6.6vw,76px);max-width:min(230px,30vw);width:auto;height:auto;object-fit:contain;display:block}
.brand-hero-chip .brand-chip-name{font-weight:800;font-size:clamp(19px,2.4vw,26px);color:#0f1b2e;white-space:nowrap}
.brand-hero .dl-hero-info{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0}
.brand-hero .dl-vendor{color:#93b7ff}
.brand-hero .dl-vendor .vdot{background:#93b7ff!important}
.brand-hero .dl-title{color:#fff}
.brand-hero .dl-pn{color:rgba(203,217,236,.92)}
.brand-hero .dl-hero-lead{color:rgba(216,227,242,.94)}
.brand-hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04)}
.brand-hero .btn-ghost:hover{background:rgba(255,255,255,.12)}
@media(max-width:820px){.dl-hero-full.brand-hero{flex-direction:column;align-items:flex-start}.brand-hero-chip{align-self:flex-start}}

/* ===== Brand hero v3: clean & minimal, NO AI background (v247) ===== */
.dl-hero-full.brand-hero-clean{background:#fff;border:1px solid #e7edf4;border-radius:16px;display:flex;align-items:center;gap:clamp(28px,4vw,60px);padding:clamp(30px,4vw,52px) clamp(30px,4vw,56px);box-shadow:none;overflow:visible;min-height:0}
.dl-hero-full.brand-hero-clean::after{display:none}
.brand-clean-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:clamp(190px,26vw,300px);min-height:clamp(120px,16vw,180px);padding:clamp(24px,3.4vw,44px);background:#fbfcfe;border:1px solid #eef2f7;border-radius:14px}
.brand-clean-logo img{max-width:100%;max-height:clamp(66px,10vw,112px);width:auto;height:auto;object-fit:contain;display:block}
.brand-clean-logo .brand-chip-name{font-weight:800;font-size:clamp(22px,3vw,34px);color:#0f2c3d;letter-spacing:.01em;text-align:center;line-height:1.15}
.brand-hero-clean .dl-hero-info{flex:1 1 auto;min-width:0;padding:0}
.brand-hero-clean .dl-title{margin:.24em 0 .1em;letter-spacing:.005em}
.brand-hero-clean .dl-hero-info::before{content:"";display:block;width:38px;height:3px;border-radius:3px;background:var(--lc,#2b8a9a);margin-bottom:16px}
@media(max-width:820px){.dl-hero-full.brand-hero-clean{flex-direction:column;align-items:stretch;text-align:left}.brand-clean-logo{min-width:0;width:100%}}

/* CRA page helpers (v249) */
.dl-quote{border-left:4px solid var(--lc,#2b8a9a);background:#f5f9fc;padding:14px 18px;margin:14px 0;border-radius:0 8px 8px 0;color:#26404f}
.dl-faq p{margin:0 0 14px}

/* ===== List consistency & indentation (v250): .dl-ul matches .dl-list ===== */
.dl-ul{list-style:none;padding-left:clamp(14px,1.6vw,22px);margin:.2em 0}
.dl-ul li{position:relative;padding-left:24px;margin:.55em 0;line-height:1.72}
.dl-ul li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--green,#16b886);transform:rotate(45deg)}

/* ===== Key-value tables in content: aligned & balanced (v250) ===== */
.dl-sec .kv-tbl:not(.lp-tbl){width:100%;border-collapse:collapse;font-size:14px;margin:4px 0}
.dl-sec .kv-tbl:not(.lp-tbl) th,.dl-sec .kv-tbl:not(.lp-tbl) td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line,#e2e8f0)}
.dl-sec .kv-tbl:not(.lp-tbl) th{color:#123a4d;font-weight:700;width:9em;white-space:nowrap}
.dl-sec .kv-tbl:not(.lp-tbl) td{color:var(--ink-dim,#52647a);line-height:1.72}
.dl-sec .kv-tbl:not(.lp-tbl) tr:last-child>*{border-bottom:0}

/* ===== Search dropdown + results (v255) ===== */
.gh-search{position:relative}
.search-dd{position:fixed;min-width:300px;max-width:520px;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:12px;box-shadow:0 18px 44px -16px rgba(12,28,50,.45);z-index:120;overflow:hidden;max-height:min(70vh,520px);overflow-y:auto}
.search-dd-item{display:block;padding:10px 14px;border-bottom:1px solid #eef2f7;text-decoration:none}
.search-dd-item:hover{background:#f5f9fc}
.sdi-n{display:block;font-weight:700;color:#123a4d;font-size:13.5px;line-height:1.35}
.sdi-m{display:block;color:#66788a;font-size:11.5px;margin-top:2px}
.search-dd-all{display:block;padding:10px 14px;text-align:center;font-weight:700;color:#1d69df;text-decoration:none;font-size:12.5px;background:#f7fafd}
.search-dd-all:hover{background:#eef4fb}
.search-dd-empty{padding:14px;color:#66788a;font-size:12.5px}
.search-page-form{display:flex;gap:8px;max-width:640px;margin:6px 0 20px}
.search-page-form input{flex:1;padding:11px 14px;border:1px solid var(--line,#e2e8f0);border-radius:10px;font-size:15px}
.search-page-form button{padding:11px 22px;border:0;border-radius:10px;background:#16b886;color:#fff;font-weight:700;cursor:pointer}
@media(max-width:820px){.search-dd{left:8px!important;right:8px;width:auto!important;max-width:none}}

/* ===== inline-style → utility classes (v258, appearance-preserving) ===== */
.iac-g{color:#5fd0a0}.iac-p{color:#c08bff}.iac-t{color:#2ce6c0}.iac-b{color:#7aa2ff}.iac-r{color:#ff8a8a}.iac-o{color:#f0b35b}
.ic-bd{color:var(--blue-dim)}.imt14{margin-top:14px}.imt20{margin-top:20px}.ifs125{font-size:12.5px;line-height:1.9}

/* ===== inline-style -> classes batch 2 (v260, appearance-preserving) ===== */
.i-ff0e2b6{--lc:#1f6feb}
.i-75d3f02{--lc:#2ce6c0}
.i-33e1d71{--lc:#7aa2ff}
.i-87c0c22{background:#2ce6c0}
.i-29016df{background:#5f6f7c}
.i-10cba2e{background:var(--blue-soft);border:1px solid #cfe2fd;border-radius:12px;padding:14px 17px;margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--ink)}
.i-48db982{border-left:3px solid #e05a5a}
.i-087335d{color:#1f6feb}
.i-6ea72a2{color:#c9ccd1}
.i-eb34d26{color:var(--green-dim)}
.i-4a0ee2e{font-family:'IBM Plex Mono',monospace;font-size:11px}
.i-f0af607{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600}
.i-33bc50d{font-size:11.5px;color:#5a6b7c;padding:6px 0}
.i-8073317{font-size:13.5px;margin:20px 0 8px}
.i-dc442d0{font-size:14px;margin:18px 0 8px}
.i-45f68ab{font-size:14px;margin:22px 0 10px}
.i-b0043ef{margin-top:16px}
.i-4a909ea{margin-top:18px}
.i-b89a775{margin-top:22px}
.i-f74e15d{margin:12px 0;text-align:center}
.i-760cf9f{margin:14px 0 18px}
.i-76758bb{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.i-f397d14{white-space:normal;font-size:11.5px;min-width:110px}

/* tbl-cap (externalized v260) */
/* EMB-20: 表の目的を示す caption（レイアウトを変えずに支援技術へ伝える） */
.tbl-cap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* inline-style -> classes batch 3 (v261) */
.j-6b7a988{--lc:#16b886}
.j-73a21a9{--lc:#7c4dff}
.j-0695ff9{background:#fff}
.j-b1a1352{color:#16b886}
.j-885814b{color:#7c5cff}
.j-36d1490{color:#d98a1f}
.j-f50c2ab{display:flex;flex-direction:column;gap:2px}
.j-2690f1e{flex:none;width:38px;height:38px;border-radius:9px;background:#e5604d;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:monospace;font-weight:700;font-size:12px}
.j-6fec4b7{font-size:11.5px;color:#6b7a8a;font-weight:400}
.j-fa3e1c7{margin-bottom:12px}
.j-1225708{margin-left:6px;color:#1f6feb;font-size:18px}
.j-5371db1{margin-top:10px}
.j-5f7e172{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f6feb,#16b886);color:#fff;font-family:Space Grotesk;font-weight:700;font-size:18px;border-radius:inherit;text-align:center;padding:20px;box-sizing:border-box}

/* hero background utility classes (v263) */
.hbg-hero-dashboard-1600{background-image:url(../hero/hero-dashboard-1600.webp)}
.hbg-hero-debug-1600{background-image:url(../hero/hero-debug-1600.webp)}
.hbg-hero-network-1600{background-image:url(../hero/hero-network-1600.webp)}
.hbg-hero-production-1600{background-image:url(../hero/hero-production-1600.webp)}
.hbg-hero-stack-1600{background-image:url(../hero/hero-stack-1600.webp)}

/* inline-style -> classes (v264, script-aware, appearance-preserving) */
.k-b1830a9{--cc:#0e9e8e}
.k-b305ed7{--cc:#0f9d72}
.k-8f2e138{--cc:#155bc4}
.k-8035f0a{--cc:#16b886}
.k-31d5341{--cc:#1f6feb}
.k-6ac2cbb{--cc:#7c5cff}
.k-f666d8e{--cc:#8497aa}
.k-ff92880{--cc:#d98a1f}
.k-cc01b84{--cc:#e5604d}
.k-c3a7a16{--lc:#5b8def}
.k-eb4e2aa{--lc:#7c5cff}
.k-7ad21ac{--lc:#d98a1f}
.k-0d2b02b{--lc:#e5484d}
.k-f40f95a{background:#0e9e8e}
.k-2876759{background:#16b886}
.k-6c63f34{background:#1f6feb}
.k-0856dc1{background:#7c5cff}
.k-e337449{background:#d98a1f}
.k-e2e9ed4{background:#e5604d}
.k-0ecb908{background:var(--blue-soft);border:1px solid #cfe2fd;border-radius:12px;padding:14px 17px;margin:0 0 16px;font-size:12.5px;line-height:1.8;color:var(--ink)}
.k-c054c17{background:var(--green-soft);border:1px solid #cdeee2;border-radius:12px;padding:14px 17px;margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--ink)}
.k-4d2faa3{background:var(--green-soft);border:1px solid #cdeee2;border-radius:12px;padding:14px 17px;margin-top:16px;font-size:12.5px;line-height:1.8;color:var(--ink)}
.k-94983b9{color:#0ab08d;font-weight:700;text-decoration:none}
.k-12110e7{color:#2ce6c0;font-weight:700;text-decoration:none}
.k-c0a2420{color:#5b9bef}
.k-4dc9fe5{color:#7cc4ff}
.k-13c8f11{color:#c0433f}
.k-868c8d1{color:#ffd479}
.k-eafc8f0{color:var(--blue-dim);font-weight:700}
.k-264f2b6{color:var(--ink-dim);font-family:'IBM Plex Mono';font-weight:600}
.k-f2a9f1c{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;background:#fff;border:1px solid #d9e1ea;border-radius:10px;text-decoration:none;color:#15212e;font-weight:600;font-size:13.5px}
.k-75c5e3a{display:inline-flex;align-items:center;gap:10px;padding:11px 15px;background:#fff;border:1px solid #d9e1ea;border-radius:10px;text-decoration:none;color:#15212e;font-weight:600;font-size:13.5px;transition:border-color .15s}
.k-303fb38{display:none !important}
.k-301c254{font-family:'IBM Plex Mono',monospace;font-size:10.5px;margin-top:6px;word-break:break-all;background:#f6f8fa;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.k-261f586{font-size:12px;margin:10px 0 8px}
.k-a464785{font-size:13px;line-height:1.8}
.k-83900c8{font-size:14px;margin:24px 0 10px}
.k-2e034a3{font-size:14px;margin:6px 0 8px}
.k-9b54a37{justify-content:center}
.k-e7ec540{margin-bottom:0}
.k-d51702b{margin-bottom:8px}
.k-da47284{margin-left:6px}
.k-d1b18fa{margin-left:auto;color:var(--ink-faint)}
.k-002535c{margin-top:12px}
.k-4fb9b6e{margin-top:7px}
.k-ee28ba4{max-width:1100px;margin:0 auto 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.k-513ea21{min-width:200px}
.k-df74e8d{overflow-x:auto}

.is-hidden{display:none}