.product-wrap{width:min(calc(100% - 2 * var(--gutter)),1280px);margin:auto;--accent:#5142a4}
.product-wrap>section{border-top:1px solid var(--line);padding:clamp(26px,3.25vw,48px) 0}
.product-wrap h2{margin:0 0 26px}.product-wrap h3{font:650 clamp(17px,1.5vw,22px)/1.4 var(--display);margin:0}
.sec-head,.tour-head,.benchmark-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.sec-head small,.benchmark-head a,figcaption{font:500 12px/1.6 var(--body);color:#60636c}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 16px}
.metrics>div{display:grid;border-left:2px solid #e5e5ec;padding-left:17px;gap:7px}
.metrics strong{font:550 clamp(32px,3.5vw,52px)/1.1 var(--display);font-variant-numeric:tabular-nums;color:#225bc4;letter-spacing:-.05em}
.metrics>div:nth-child(3n+2) strong{color:#127668}.metrics>div:nth-child(3n) strong{color:#7450ae}
.metrics small{font:500 12px var(--body);letter-spacing:0;margin-left:5px;color:#626674}.metrics span{font:550 14px var(--body)}
.benchmark-head{margin:34px 0 14px}.benchmark-head h3{font-size:16px}
.benchmarks,.arch-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}.benchmarks article{background:#f7f8fa;padding:18px 22px}.benchmarks h4{margin:0 0 14px;font:600 15px var(--display)}
.reading{display:grid;grid-template-columns:2.2em 1fr minmax(8em,auto);align-items:center;gap:9px;margin-top:9px;font:500 13px/1.5 var(--body)}
.reading i{height:7px;background:#ccd0d8;width:var(--w,100%);border-radius:3px}.reading.now{color:#355bb2}.reading.now i{background:currentColor}.reading.cost{color:#117664}.reading b{text-align:right}
.tour-block+.tour-block{border-top:1px solid var(--line);padding-top:27px;margin-top:32px}
.switch{display:flex;gap:6px}.switch button{color:#52535d;background:#fff;padding:8px 14px;border:1px solid #d7d7de;border-radius:4px;font:550 14px var(--body)}
.switch button[aria-pressed=true]{color:var(--accent);background:#f4f2fa;border-color:#b9aed4}
.tour{display:grid;grid-template-columns:minmax(190px,.3fr) minmax(0,1fr);gap:clamp(16px,3vw,46px);margin-top:18px;align-items:center}
.step-list{display:grid;align-content:center;position:relative}.step-list button{display:flex;align-items:center;gap:15px;position:relative;min-height:41px;padding:7px 4px;text-align:left;border:0;background:transparent;color:#555b65;font:500 15px/1.5 var(--body)}
.step-list button i{position:relative;width:9px;height:9px;border:1px solid #c9cbd3;border-radius:50%;background:white;flex:none}
.step-list button:not(:last-child)::before{content:'';position:absolute;left:8px;top:50%;height:100%;border-left:1px solid #dcdde4}
.step-list button[aria-pressed=true]{font-weight:700;color:var(--accent)}.step-list button[aria-pressed=true] i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px #efedf6}
.tour figure,.canvas-demo{margin:0;min-width:0}.image-zoom,.canvas-demo a{display:block;width:100%;padding:12px;border:1px solid #dddfe6;border-radius:5px;background:#f7f7fa;cursor:zoom-in}
.image-zoom img{display:block;width:100%;height:clamp(280px,32vw,480px);object-fit:contain}.tour figcaption,.canvas-demo figcaption{display:flex;justify-content:space-between;gap:15px;margin-top:8px}.tour figcaption b{font-weight:500}
.arch-pair article{padding:22px;background:#f6f6f7}.arch-pair article:last-child{background:#f5f3f9}.arch-pair article>span{font:600 23px var(--mono);color:#6b6877}.arch-pair h3{margin:8px 0}.arch-pair p{font:400 15px/1.85 var(--body);margin:0;color:#4c5057}.compare-head{margin:30px 0 12px!important}
table{border-collapse:collapse;width:100%;text-align:left;table-layout:fixed}th,td{padding:13px 16px;border-bottom:1px solid #dddfe4;font-size:14px;line-height:1.7;vertical-align:top}thead th{background:#f6f6f8}th:first-child{width:17%}td strong{color:var(--accent)}.canvas-demo{margin:24px auto 0;width:min(100%,860px)}.canvas-demo img{display:block;width:100%;height:auto}
.timeline{max-width:1000px}.axis,.period{display:grid;align-items:center;grid-template-columns:52px 1fr 130px;gap:16px}.axis{display:flex;justify-content:space-between;margin:0 146px 0 68px;font:12px var(--mono);color:#686976}.axis span:first-child{display:none}
.period{margin-top:20px}.period>b{font:600 24px var(--mono)}.period p{margin:0 0 6px;font-size:14px}.period strong{font-size:13px}.track{position:relative;height:8px;border-radius:3px;background:#f1f1f4}.track i{position:absolute;left:var(--start);width:calc(var(--end) - var(--start));height:100%;background:#365fb4;border-radius:3px}.v2 .track i{background:#7956a5}
#promo video{width:min(100%,900px);display:block;margin:auto;background:#f6f6f6}#promo{padding-bottom:65px}
#screen-dialog{padding:0;max-width:96vw;max-height:94dvh;width:fit-content;border:0;background:#fff}#screen-dialog::backdrop{background:#151620bd}#screen-dialog img{max-width:94vw;max-height:91dvh;display:block;object-fit:contain}#screen-dialog button{position:absolute;right:8px;top:8px;background:#fff;border:1px solid #bbb;border-radius:4px;padding:0;width:32px;height:32px;font-size:20px}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.benchmarks,.arch-pair,.tour{grid-template-columns:1fr}.step-list{display:flex;flex-wrap:wrap;gap:3px 10px}.step-list button{min-height:32px;font-size:13px;gap:7px}.step-list button:not(:last-child)::before{content:none}.tour-head,.benchmark-head,.sec-head{align-items:center}.image-zoom img{height:clamp(200px,56vw,340px)}th,td{padding:9px 5px;font-size:13px}.switch button{font-size:12px;padding:6px 8px}.period{grid-template-columns:30px 1fr;gap:8px}.period strong{grid-column:2}.period>b{font-size:18px}.axis{margin:0 0 0 38px}.benchmarks article{padding:14px}.sec-head small{font-size:10px}.sec-head h2{margin-bottom:12px}.canvas-demo figcaption{flex-wrap:wrap}}

.metric-ref{font:550 14px var(--body);color:inherit;width:fit-content}.metric-ref:hover,.canvas-demo figcaption a:hover{text-decoration:underline}
/* Creation paths and their steps share the left rail. */
.workflow-tour{align-items:start}
.path-tabs{display:flex;align-items:baseline;gap:clamp(12px,1.5vw,24px);margin-bottom:20px;border-bottom:1px solid var(--line)}
.path-tabs button{appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;color:#686970;font:550 clamp(14px,1.25vw,18px)/1.5 var(--body);padding:2px 0 8px;cursor:pointer;white-space:nowrap}
.path-tabs button[aria-pressed=true]{color:var(--accent);border-color:currentColor;font-weight:700}

.difference {font-style: normal; font-weight: 600}
.difference.purple {color: #7949d6}
.difference.green {color: #008779}
.difference.blue {color: #2564db}
.difference.orange {color: #bf6619}
.architecture-visual {margin: 0; min-width: 0}
.architecture-node {
  min-height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 9px 12px;
  border: 1px solid #d5d8de;
  font: 500 14px/1.5 var(--body);
  color: #343941;
  text-align: center;
}
.architecture-node b {font-weight: 600}
.architecture-node small {font: 400 12px/1.5 var(--body); color: #696f78}
.architecture-connector {
  position: relative;
  height: 28px;
  width: 1px;
  background: #bcc1cb;
  margin: 0 auto;
}
.architecture-connector::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-right: 1px solid #a6adb8;
  border-bottom: 1px solid #a6adb8;
  transform: rotate(45deg);
  bottom: 2px;
  left: -2px;
}
.architecture-branches {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 5px;
  min-height: 58px;
  border-top: 1px solid #d5d8de;
  border-bottom: 1px solid #d5d8de;
  padding: 10px 0;
  font: 550 14px/1.5 var(--body);
}
.architecture-branches span {text-align: center; flex: 1}
.architecture-branches span + span {border-left: 1px solid #e5e7eb}
.architecture-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 58px;
}
.architecture-visual .architecture-node.difference {border-color: #a48bc8}
.architecture-visual figcaption {
  margin: 14px 0 0;
  color: #6c7077;
  font: 400 13px/1.7 var(--body);
}
.architecture-visual.legacy {color: #7b8189}
.architecture-visual.legacy .architecture-node {color: #707780; border-color: #e0e2e6}
.architecture-visual.legacy .architecture-node small {color: #858b93}

/* Each version keeps one continuous sequence; matching points share a grid row. */
.version-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 5vw, 72px);
}
.version-column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 8;
  min-width: 0;
}
.version-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 28px;
}
.version-heading strong {
  font: 650 clamp(34px, 3.5vw, 48px)/1 var(--mono);
  letter-spacing: -.06em;
  color: #17191c;
}
.version-heading > span {font: 550 16px/1.5 var(--body)}
.version-heading small {margin-left: auto; font: 400 12px/1.5 var(--body); color: #777f89}
.version-points {display: contents; list-style: none}
.version-point {
  position: relative;
  min-width: 0;
  list-style: none;
  margin-left: 5px;
  padding: 0 0 28px 22px;
  border-left: 1px solid #d4d8df;
}
.version-point::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #626873;
  box-shadow: 0 0 0 4px #fff;
}
.version-point:last-child {border-color: transparent; padding-bottom: 0}
.product-wrap .version-point > h3 {margin: 0 0 7px; color: #1d2128; font: 650 16px/1.5 var(--body)}
.version-point > p {margin: 0; color: #646b76; font: 400 14px/1.8 var(--body)}
.version-point .architecture-visual {margin-top: 17px}
.version-point .architecture-node {min-height: 42px; padding: 7px 10px; font-size: 13px}
.version-point .architecture-node small {font-size: 11px}
.version-point .architecture-connector {height: 22px}
.version-point .architecture-branches {min-height: 48px; padding: 8px 0; font-size: 13px}
.version-point .architecture-split {min-height: 48px}
.point-management {margin-top: 14px}
.point-management > div {display: grid; grid-template-columns: 5em 1fr; gap: 12px; font: 400 13px/1.7 var(--body)}
.point-management b {font-weight: 600}
.point-management span {color: #747c86}
.point-management > i {display: block; width: 1px; height: 16px; background: #d8dce2; margin: 3px 0 3px 4px}
.point-iteration {margin-top: 13px}
.point-months {display: flex; justify-content: space-between; font: 400 10px/1.6 var(--mono); color: #79828f}
.point-track {position: relative; margin-top: 13px; border-bottom: 3px solid #eceef1}
.point-bar {position: relative; bottom: -3px; border-bottom: 3px solid #919aa7; padding-bottom: 9px}
.point-bar > span {font: 500 12px/1.6 var(--body); color: #6d7582}
.point-bar::after {content: ''; position: absolute; bottom: -5px; right: -1px; width: 7px; height: 7px; border-radius: 50%; background: #919aa7}
.point-bar.current-bar {margin-left: 57%; border-color: #8652d5}
.point-bar.current-bar > span {color: #7949d6}
.point-bar.current-bar::after {background: #8652d5}
.point-result {display: flex; align-items: baseline; gap: 16px; margin-top: 19px}
.point-result strong {font: 600 25px/1 var(--mono); letter-spacing: -.04em}
.point-result small {font: 500 12px/1.5 var(--body); letter-spacing: 0}
.point-result > span {font: 400 12px/1.7 var(--body); color: #77808c}
@media (max-width: 760px) {
  .version-comparison {gap: 0 16px}
  .version-heading {gap: 6px; padding-bottom: 22px}
  .version-heading strong {font-size: 30px}
  .version-heading > span {font-size: 12px}
  .version-heading small {width: 100%; margin-left: 0; font-size: 10px}
  .version-point {padding-left: 12px; padding-bottom: 22px}
  .product-wrap .version-point > h3 {font-size: 13px}
  .version-point > p {font-size: 12px}
  .version-point .architecture-node {font-size: 10px; padding: 6px 3px}
  .version-point .architecture-node small {font-size: 9px}
  .version-point .architecture-branches {font-size: 10px; gap: 0}
  .version-point .architecture-split {grid-template-columns: 1fr; gap: 5px}
  .point-management > div {grid-template-columns: 1fr; gap: 2px; font-size: 11px}
  .point-management > i {height: 12px}
  .point-months {font-size: 8px}
  .point-months span:first-child {font-size: 0}
  .point-months span:first-child::after {content: '3 月'; font-size: 8px}
  .point-bar {min-height: 42px; display: flex; align-items: end}
  .point-bar > span {font-size: 9px}
  .point-result {flex-direction: column; gap: 7px}
  .point-result strong {font-size: 20px}
  .point-result small, .point-result > span {font-size: 10px}
}