.page-hero {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color: #fff; padding: 68px 0 54px; text-align: center;
}
.page-hero .eyebrow { color: #ff7a75; }
.page-hero h1 { font-size: clamp(30px, 4.6vw, 46px); margin-top: 12px; letter-spacing: -.01em; }
.page-hero .lede {
  max-width: 720px; margin: 18px auto 0; color: rgba(255,255,255,.72);
  font-size: 16px; line-height: 1.85;
}

.chapnav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 30px; }
.chapnav a {
  font-size: 14px; color: rgba(255,255,255,.78); text-decoration: none;
  border: 1px solid rgba(255,255,255,.20); border-radius: 999px; padding: 7px 15px;
  transition: background .16s, border-color .16s, color .16s;
}
.chapnav a:hover { background: #fff; border-color: #fff; color: var(--ink); }

.sec-dark { background: var(--bg-dark); color: #fff; }
.sec-dark .sec-head h2 { color: #fff; }
.sec-dark .sec-head .lede { color: rgba(255,255,255,.70); }
.sec-dark .eyebrow { color: #ff7a75; }
.sec-dark figcaption { color: rgba(255,255,255,.62); }

.shot { margin: 22px 0 0; }
.shot a { display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.sec-dark .shot a { border-color: rgba(255,255,255,.14); }
.sec-dark .shot > a:hover { border-color: var(--accent); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }
.shot-sm { max-width: 420px; margin-left: auto; margin-right: auto; }
.shot-wide { margin-top: 34px; }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 30px; }

.steps { display: flex; flex-direction: column; gap: 34px; }
.step {
  display: grid; grid-template-columns: 350px 1fr; gap: 34px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.step-n {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--accent); color: #fff; font-weight: 900; font-size: 20px;
}
.step-txt h3 { font-size: 20px; margin: 16px 0 10px; }
.step-txt p { color: var(--ink-soft); font-size: 15px; line-height: 1.9; }
.step-note { margin-top: 10px; font-size: 14px; color: var(--ink-mut); }
.step .shot { margin: 0; }

.leave-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.leave-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.leave-card .ic { width: 26px; height: 26px; color: var(--accent); display: block; margin: 0 auto; }
.leave-card h3 { font-size: 18px; margin: 12px 0 8px; text-align: center; }
.leave-card p { color: var(--ink-soft); font-size: 14px; line-height: 1.8; }


.gpuviz { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 28px; box-shadow: var(--shadow-sm); max-width: 860px; margin: 0 auto; }
.gv-row { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 18px; padding: 18px 0; }
.gv-row + .gv-row { border-top: 1px solid var(--line); }
.gv-dev { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.dot.nv { background: #76b900; }
.dot.in { background: #0a84ff; }
.gv-jobs { display: flex; gap: 10px; flex-wrap: wrap; }
.gv-job {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--accent-sf); border: 1px solid rgba(204,31,38,.32); color: var(--accent-d); font-weight: 700; font-size: 14px;
}
.gv-job .ic { width: 18px; height: 18px; }
.gv-cap { text-align: right; font-size: 15px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
@keyframes laneRun { 0% { width: 0; opacity: 1; } 92% { width: 100%; opacity: 1; } 96% { width: 100%; opacity: .25; } 100% { width: 0; opacity: 1; } }

.fact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.fact { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 20px; }
.fact b { display: block; font-size: 16px; margin-bottom: 8px; text-align: center; }
.fact span { font-size: 14px; color: var(--ink-soft); line-height: 1.85; }
.fact-i { display: flex; justify-content: center; color: var(--accent); margin-bottom: 8px; }
.fact-i .ic { width: 22px; height: 22px; }
.region-list { word-break: auto-phrase; }
.fact-row.two { grid-template-columns: repeat(2, 1fr); max-width: 900px; margin-left: auto; margin-right: auto; }
.fact-row.one { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }

.clsviz { position: relative; max-width: 900px; margin: 0 auto 34px; }
.cnode {
  border: 1px solid rgba(232,70,76,.5); border-radius: var(--radius);
  background: rgba(204,31,38,.10); padding: 20px; width: 260px;
}
.cnode.ctrl { margin: 0 auto; border-color: rgba(77,163,255,.62); background: rgba(10,132,255,.10); }
.cn-role { font-size: 12px; letter-spacing: .14em; color: rgba(255,255,255,.55); }
.cnode b { display: block; font-size: 18px; margin-top: 4px; }
.cn-spec { display: block; font-size: 13px; color: rgba(255,255,255,.55); margin-top: 3px; }
.cn-bars { display: flex; gap: 6px; margin-top: 12px; }
.cn-bars i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,.14); position: relative; overflow: hidden; }
.cn-bars i::after {
  content: ""; position: absolute; inset: 0; width: 0; border-radius: 4px; background: var(--accent);
  animation: laneRun 4.6s linear infinite;
}
.cnode.ctrl .cn-bars i::after { background: #4da3ff; }
.cn-bars i:nth-child(2)::after { animation-duration: 5.8s; animation-delay: .9s; }
.cn-bars i:nth-child(3)::after { animation-duration: 4.1s; animation-delay: 1.7s; }

.cwires { display: block; width: 100%; height: 190px; }
.cwires .wire { fill: none; stroke: rgba(255,255,255,.38); stroke-width: 2; }
.cwires .pkt { fill: #ffd166; }
.cagents { display: flex; justify-content: space-between; }

.split3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sp-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.sp-card h3 { font-size: 20px; text-align: center; }
.sp-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.85; margin-top: 12px; }
.sp-note { font-size: 13px !important; color: var(--ink-mut) !important; }
.sp-ic { display: flex; justify-content: center; color: var(--accent); margin-bottom: 8px; }
.sp-ic .ic { width: 26px; height: 26px; }

.watchviz {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 28px 6px;
  box-shadow: var(--shadow-sm); max-width: 900px; margin: 0 auto 34px;
}
.wv-head, .wv-row { display: grid; grid-template-columns: 1fr 40px 1.2fr 40px 1fr; align-items: center; gap: 8px; }
.wv-head span { font-size: 12px; letter-spacing: .14em; color: var(--ink-mut); text-align: center; }
.wv-row { padding: 14px 0; }
.wv-row + .wv-row { border-top: 1px solid var(--line); }
.wv-folder {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-soft); font-weight: 700; font-size: 16px;
}
.wv-folder .ic { width: 20px; height: 20px; }
.wv-folder.d1 { color: var(--accent); }
.wv-folder.d2 { color: #0b5cc2; }
.wv-folder.out { border-style: dashed; background: #fff; }
.wv-preset { text-align: center; font-size: 14px; font-weight: 700; padding: 10px 12px; border-radius: 999px; background: var(--accent-sf); color: var(--accent-d); }
.wv-ar { display: flex; justify-content: center; color: var(--ink-mut); }
.wv-ar .ic { width: 20px; height: 20px; }

.wat-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.wf { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.wf-i { display: flex; justify-content: center; color: var(--accent); }
.wf-i .ic { width: 24px; height: 24px; }
.wf b { display: block; font-size: 18px; margin: 10px 0 8px; text-align: center; }
.wf p { font-size: 15px; color: var(--ink-soft); line-height: 1.9; }

.dv-row .mk { justify-content: flex-start; }

.ac-note { margin-top: 26px; text-align: center; font-size: 15px; color: var(--ink-soft); line-height: 1.9; }
.ac-note.dl-lead { margin: 0 0 26px; }
.inline-link {
  display: inline-block; color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(204,31,38,.38);
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.inline-link:hover { color: #fff; background: var(--accent); border-bottom-color: var(--accent); }

.flow4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: fl; }
.fl { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 20px; box-shadow: var(--shadow-sm); }
.fl-n {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; margin: 0 auto;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 15px;
}
.fl b { display: block; font-size: 16px; margin: 12px 0 8px; text-align: center; }
.fl p { font-size: 14px; color: var(--ink-soft); line-height: 1.85; }

.req-box {
  margin: 0 0 34px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 28px; box-shadow: var(--shadow-sm);
}
.req-box h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.req-box h3 .ic { width: 22px; height: 22px; color: #22a06b; }
.req-box ul { list-style: none; margin-top: 14px; display: grid; gap: 8px; }
.req-box li { position: relative; padding-left: 18px; font-size: 15px; color: var(--ink-soft); line-height: 1.8; }
.req-box li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.req-note { margin-top: 14px; font-size: 14px; color: var(--ink-mut); }

.dev-table { border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); overflow: hidden; }
.dv-row { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr; gap: 12px; padding: 16px 22px; font-size: 15px; }
.dv-row + .dv-row { border-top: 1px solid rgba(255,255,255,.10); }
.dv-head { background: rgba(255,255,255,.07); font-size: 13px; letter-spacing: .10em; color: rgba(255,255,255,.62); }
.dv-row span:first-child { font-weight: 700; }

.dev-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 26px; }
.dn { border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 24px; background: rgba(255,255,255,.04); }
.dn-i, .of-i { display: flex; justify-content: center; color: var(--accent); }
.dn-i .ic, .of-i .ic { width: 22px; height: 22px; }
.dn b { display: block; font-size: 16px; margin: 8px 0 8px; text-align: center; }
.dn p { font-size: 15px; color: rgba(255,255,255,.72); line-height: 1.85; }
.dev-ex-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dev-ex-steps li { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px 18px; background: #fff; box-shadow: var(--shadow-sm); }
.dev-ex-n { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; }
.dev-ex-steps .dn-i { color: var(--accent); }
.dev-ex-steps b { display: block; font-size: 15px; margin: 8px 0 6px; text-align: center; }
.dev-ex-steps p { font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.dev-ex-limit { margin-top: 26px; background: #fff8ec; border: 1px solid rgba(230,150,0,.35); border-left: 4px solid #e69600; border-radius: var(--radius-sm); padding: 20px; }
.dev-ex-limit h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; color: #8a5a00; }
.dev-ex-limit h3 .ic { width: 20px; height: 20px; flex: none; }
.dev-ex-plist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 9px; }
.dev-ex-plist li { position: relative; padding-left: 18px; font-size: 15px; color: var(--ink-soft); line-height: 1.85; }
.dev-ex-plist li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 1100px) { .dev-ex-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dev-ex-steps { grid-template-columns: 1fr; } }

.timeline { max-width: 860px; margin: 0 auto 34px; }
.tl-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.tl-seg { border-radius: var(--radius-sm); padding: 18px 16px; text-align: center; }
.tl-seg b { display: block; font-size: 15px; }
.tl-seg i { display: block; font-style: normal; font-size: 13px; margin-top: 4px; }
.tl-ok { background: rgba(34,160,107,.12); color: #1a7a51; border: 1px solid rgba(34,160,107,.3); }
.tl-warn { background: rgba(230,150,0,.12); color: #8a5a00; border: 1px solid rgba(230,150,0,.32); }
.tl-off { background: var(--bg-soft); color: var(--ink-mut); border: 1px solid var(--line); }
.tl-marks { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-mut); }
.tl-marks span { text-align: left; }
.tl-marks span + span { margin-left: -4px; }

.lic-fig {
  margin: 30px 0 0; padding: 26px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
}
.lic-fig figcaption { margin-top: 18px; font-size: 13px; line-height: 1.85; color: rgba(255,255,255,.62); text-align: center; }
.lf-i {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto 10px;
  border-radius: var(--radius-sm); background: rgba(204,31,38,.20); color: #ff7a75; border: 1px solid rgba(232,70,76,.45);
}
.lf-i .ic { width: 20px; height: 20px; }
.lf-key {
  max-width: 280px; margin: 0 auto; padding: 16px; text-align: center;
  border: 1px solid rgba(61,220,132,.5); background: rgba(31,191,107,.12); border-radius: var(--radius);
}
.lf-key .lf-i { background: rgba(31,191,107,.18); color: #3ddc84; border-color: rgba(61,220,132,.45); }
.lf-key b { font-size: 15px; }
.lf-branch { position: relative; width: 100%; max-width: 580px; height: 34px; margin: 0 auto; }
.lf-branch i { position: absolute; background: rgba(61,220,132,.6); }
.lf-branch i.t { left: 50%; top: 0; width: 1.5px; height: 17px; margin-left: -.75px; }
.lf-branch i.b { left: calc((100% - 16px) / 4); right: calc((100% - 16px) / 4); top: 16px; height: 1.5px; }
.lf-branch i.l { left: calc((100% - 16px) / 4); top: 16px; width: 1.5px; height: 18px; margin-left: -.75px; }
.lf-branch i.r { right: calc((100% - 16px) / 4); top: 16px; width: 0; height: 18px; margin-right: -.75px; background: none; border-left: 1.5px dashed rgba(61,220,132,.6); }
.lf-pcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 580px; margin: 0 auto; }
.lf-pc { padding: 16px; text-align: center; border: 1px solid rgba(77,163,255,.55); border-radius: var(--radius); background: rgba(10,132,255,.12); }
.lf-pc .lf-i { background: rgba(10,132,255,.18); color: #4da3ff; border-color: rgba(77,163,255,.45); }
.lf-pc.is-opt { border-style: dashed; background: rgba(10,132,255,.06); }
.lf-pc b, .lf-out b { display: block; font-size: 15px; }
.lf-pc i, .lf-out i { display: block; font-style: normal; font-size: 12px; color: rgba(255,255,255,.62); margin-top: 4px; }
.lf-out { max-width: 580px; margin: 22px auto 0; padding: 16px; text-align: center; border: 1px dashed rgba(232,70,76,.55); background: rgba(204,31,38,.10); border-radius: var(--radius); }
.swap-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sw-step { padding: 20px 18px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); background: rgba(255,255,255,.05); }
.sw-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; }
.sw-step b { display: block; font-size: 15px; margin: 10px 0 8px; }
.sw-step p { font-size: 14px; line-height: 1.85; color: rgba(255,255,255,.72); }
.sw-list { display: flex; gap: 6px; margin-top: 14px; }
.sw-list i { flex: 1; height: 8px; border-radius: 4px; }
.sw-list i.on   { background: rgba(255,255,255,.30); }
.sw-list i.pick { background: #ff7a75; }
.sw-list i.off  { background: rgba(255,255,255,.10); }
.sw-list i.new  { background: var(--accent); }
@media (max-width: 860px) {
  .swap-flow, .lf-pcs { grid-template-columns: 1fr; }
  .lf-branch { height: 26px; }
  .lf-branch i.b, .lf-branch i.r { display: none; }
  .lf-branch i.t { height: 26px; }
  .lf-branch i.l { display: none; }
}

.off-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.of { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.of b { display: block; font-size: 16px; margin-bottom: 8px; text-align: center; }
.of-i + b { margin-top: 8px; }
.of p { font-size: 15px; color: var(--ink-soft); line-height: 1.85; }

.pv-grid { max-width: 860px; margin: 0 auto; }
.pv-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.pv-col h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.pv-col h3 .ic { width: 22px; height: 22px; }
.pv-yes h3 .ic { color: #22a06b; }
.pv-col ul { list-style: none; margin-top: 14px; display: grid; gap: 9px; }
.pv-col li { position: relative; padding-left: 18px; font-size: 15px; color: var(--ink-soft); line-height: 1.8; }
.pv-col li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; }
.pv-yes li::before { background: #22a06b; }
.pv-note { margin-top: 14px; font-size: 13px; color: var(--ink-mut); line-height: 1.7; }

.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.fq { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.fq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; font-size: 16px; font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.fq summary:hover { background: var(--accent); color: #fff; }
.fq summary:hover .ic { color: #fff; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary .ic { width: 20px; height: 20px; margin-left: auto; color: var(--ink-mut); transition: transform .18s; flex: none; }
.fq[open] summary .ic { transform: rotate(180deg); }
.fq[open] summary { border-bottom: 1px solid var(--line); }
.fq p { padding: 18px 22px; font-size: 15px; color: var(--ink-soft); line-height: 1.95; }

.svcviz { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.sv-row {
  display: grid; grid-template-columns: 150px 1fr 40px 1fr; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-sm);
}
.sv-row.on { border-color: rgba(26,158,87,.4); }
.sv-tag { font-size: 13px; font-weight: 700; text-align: center; padding: 7px 8px; border-radius: 999px; }
.on .sv-tag { background: rgba(26,158,87,.1); color: #1a7a51; }
.off .sv-tag { background: var(--bg-soft); color: var(--ink-mut); }
.sv-box {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-soft); font-size: 15px; font-weight: 700; text-align: center;
}
.on .sv-box.res { border-color: rgba(26,158,87,.35); background: rgba(26,158,87,.06); }
.off .sv-box.res { border-color: rgba(204,31,38,.32); background: var(--accent-sf); }
.sv-box .mk .ic { width: 20px; height: 20px; }
.sv-ar { display: flex; justify-content: center; color: var(--ink-mut); }
.sv-ar .ic { width: 20px; height: 20px; }

@media (max-width: 960px) {
  .leave-grid, .fact-row, .split3, .flow4 { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 1fr; }
  .shot-pair, .dev-notes, .off-facts, .wat-facts { grid-template-columns: 1fr; }
  .gv-row { grid-template-columns: 1fr; gap: 10px; }
  .gv-cap { text-align: left; }
  .wv-head { display: none; }
  .wv-row { grid-template-columns: 1fr; gap: 6px; }
  .wv-ar .ic { transform: rotate(90deg); }
  .sv-row { grid-template-columns: 1fr; gap: 8px; }
  .sv-ar .ic { transform: rotate(90deg); }
  .clsviz { max-width: 100%; }
  .cwires { height: 120px; }
  .cnode { width: 100%; }
  .cagents { gap: 14px; }
  .cagents .cnode { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 640px) {
  .leave-grid, .fact-row, .split3, .flow4 { grid-template-columns: 1fr; }
  .fact-row.two { grid-template-columns: 1fr; }
  .tl-bar { grid-template-columns: 1fr; }
  .tl-marks { display: none; }
  .dv-row { grid-template-columns: .9fr 1.1fr 1fr; gap: 10px; padding: 12px 14px; font-size: 13px; }
  .dv-head { font-size: 12px; letter-spacing: .04em; }
  .dv-row > span { word-break: auto-phrase; }
  .gpuviz { padding: 6px 20px; }
  .gv-jobs { flex-wrap: nowrap; gap: 8px; }
  .gv-job { padding: 8px 10px; gap: 5px; font-size: 13px; }
  .gv-job .ic { width: 16px; height: 16px; }
  .chapnav {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 16px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }
  .chapnav::-webkit-scrollbar { display: none; }
  .chapnav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .cn-bars i::after { animation: none !important; width: 55%; }
  .cwires animateMotion { display: none; }
}


.step-req {
  display: block; width: fit-content; margin: 10px 0 0; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; line-height: 1.6;
}
.step-req.is-must { background: var(--accent); color: #fff; }
.step-req.is-opt { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); }
.step-req.is-first { background: var(--accent-sf); color: var(--accent-d); }
.step-req + h3 { margin-top: 12px; }
.step .shot-fit { margin-left: auto; margin-right: auto; }

.leave-more { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 26px; }
.lm {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow-sm);
}
.lm .ic { width: 26px; height: 26px; color: var(--accent); display: block; margin: 0 auto 10px; }
.lm-wide { grid-column: 1 / -1; }
.lm h3 { font-size: 18px; text-align: center; margin-bottom: 14px; }
.lm-table { margin: 0; border-top: 1px solid var(--line); }
.lm-row {
  display: grid; grid-template-columns: 250px 1fr; gap: 22px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.lm-row:last-child { border-bottom: 0; padding-bottom: 0; }
.lm-row dt { align-self: start; font-size: 15px; font-weight: 700; line-height: 1.8; }
.lm-row dd { margin: 0; }
.lm ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lm li { position: relative; padding-left: 16px; font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
.lm li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
}

@media (max-width: 960px) {
  .leave-more { grid-template-columns: 1fr; }
  .lm-row { grid-template-columns: 1fr; gap: 8px; }
}

.terms {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 24px 28px; margin-bottom: 30px;
}
.terms-t { font-size: 18px; text-align: center; margin: 0 0 16px; }
.terms-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.term { display: flex; gap: 14px; align-items: flex-start; }
.term-i {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-sf); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.term-i .ic { width: 22px; height: 22px; }
.term b { display: block; font-size: 16px; margin-bottom: 4px; }
.term p { font-size: 14px; color: var(--ink-soft); line-height: 1.8; }
@media (max-width: 760px) { .terms-list { grid-template-columns: 1fr; } }

.buy-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.buy-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px 24px; box-shadow: var(--shadow-sm);
}
.buy-card.is-featured { background: var(--col-pick); border-color: rgba(204,31,38,.32); }
.buy-card .plan-tag { margin-top: 4px; }
.buy-price { margin-top: 14px; }
.buy-card.is-featured .plan-price { color: var(--accent); }
.buy-facts { width: 100%; margin: 18px 0 22px; border-top: 1px solid var(--line); }
.buy-facts > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.buy-facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.buy-facts dt { font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.6; }
.buy-facts dt small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-mut); text-wrap: balance; }
.buy-facts dd { margin: 4px 0 0; font-size: 18px; font-weight: 800; line-height: 1.5; }
.buy-facts dd > span { white-space: nowrap; }
.buy-facts dd small { display: block; font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--ink-soft); }
.buy-facts .mk { justify-content: center; }
.buy-facts .mk .ic { width: 22px; height: 22px; }
.buy-card .btn { width: 100%; margin-top: auto; }

.buy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.buy-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 26px; font-size: 15px; }
.buy-legal-sep { color: var(--ink-mut); }
.buy-page .fact .fact-i { color: var(--accent); }

@media (max-width: 1100px) { .buy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .buy-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .buy-page .fact-row { grid-template-columns: 1fr; } }

.trial-card { max-width: 700px; margin: 0 auto; }
.tf-label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.tf-input {
  display: block; width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid #767676; border-radius: var(--radius-sm); padding: 11px 14px;
}
.tf-input:hover { border-color: var(--ink); }
.tf-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.tf-input[aria-invalid="true"] { border-color: var(--accent); }
.tf-hint { margin-top: 8px; font-size: 14px; color: var(--ink-mut); }
.trial-form { position: relative; }
.tf-trap { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tf-consent { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.tf-consent a { color: var(--accent-d); text-decoration: underline; text-underline-offset: .15em; border-radius: 3px; padding: 1px 3px; }
.tf-consent a:hover, .tf-consent a:focus-visible { background: var(--accent); color: #fff; text-decoration: none; }
.tf-submit { display: flex; width: fit-content; min-width: 180px; margin: 18px auto 0; }
.btn:disabled { cursor: wait; opacity: 1; filter: saturate(.6); }
.tf-msg { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1.85; }
.tf-msg b { display: block; font-size: 16px; margin-bottom: 4px; }
.tf-msg.is-ok { background: #e8f4ee; border: 1px solid rgba(26,122,81,.35); color: #135f3e; }
.tf-msg.is-error { background: var(--accent-sf); border: 1px solid rgba(204,31,38,.30); color: var(--accent-d); }
.tf-msg[hidden], .ti-step[hidden], .ti-step .dlp-links[hidden] { display: none; }
.trial-card .dlp-links { justify-content: center; }
.ti-step:not([hidden]) ~ .ti-step:not([hidden]) { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.trial-conds { margin: 0; }
.trial-conds li { word-break: auto-phrase; }

.ti-step .dlp-text + .dlp-text { margin-top: 10px; }
.ti-ok { display: flex; align-items: center; gap: 10px; }
.ti-ok .ic { width: 22px; height: 22px; color: #1a7a51; flex: none; }
.ti-key { display: flex; gap: 10px; align-items: stretch; }
.ti-key-code {
  flex: 1 1 auto; min-width: 0; display: block; font-family: var(--mono); font-size: 17px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink); background: var(--bg-soft); border: 1px solid #767676; border-radius: var(--radius-sm); padding: 11px 14px;
  user-select: all; overflow-wrap: anywhere; line-height: 1.6;
}
.ti-key-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ti-copy { flex: none; border-radius: var(--radius-sm); }
.ti-facts { margin: 20px 0 16px; border-top: 1px solid var(--line); }
.ti-facts > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.ti-facts dt { color: var(--ink-mut); font-weight: 700; }
.ti-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ti-once { font-weight: 700; color: var(--ink); }
.ti-h3 { font-size: 16px; margin: 24px 0 10px; }
.ti-steps { margin: 0 0 14px; padding-left: 1.4em; display: grid; gap: 6px; font-size: 15px; color: var(--ink-soft); line-height: 1.85; }
@media (max-width: 560px) {
  .ti-key { flex-direction: column; }
  .ti-facts > div { grid-template-columns: 1fr; gap: 2px; }
}