.u-guide {
  --ug-ink: #0d213f;
  --ug-copy: #344b69;
  --ug-accent: #1354bb;
  --ug-line: #cbd9ee;
  color: var(--ug-ink);
  background: radial-gradient(ellipse at 85% 3%, #e2ecfd, transparent 52%), #f4f7fc;
  padding-block: clamp(58px, 8vw, 115px);
}
.u-guide-inner { width: min(1180px, calc(100% - 56px)); margin-inline: auto }
.u-guide h2, .u-guide h3, .u-guide p { margin: 0 }
.u-guide-intro {
  display: grid;
  grid-template-columns: 1.1fr .7fr;
  gap: clamp(24px, 6vw, 86px);
  align-items: end;
  margin-bottom: 30px;
}
.u-guide-intro .u-guide-kicker { margin-bottom: 13px; color: var(--ug-accent); font-size: .95rem; font-weight: 700 }
.u-guide-intro h2 { font-size: clamp(2.4rem, 5.7vw, 5.5rem); line-height: 1.08; font-weight: 740; letter-spacing: -.052em }
.u-guide-intro > p { max-width: 38ch; color: var(--ug-copy); font-size: 1.05rem; line-height: 1.75 }
.u-guide-model {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1fr);
  gap: 24px clamp(25px, 6vw, 75px);
  border: 1px solid #304a70;
  border-radius: 23px;
  padding: clamp(23px, 4vw, 52px);
  color: #f1f6ff;
  background: radial-gradient(ellipse at 100% 0%, #213e6c, transparent 67%), #0c172c;
}
.u-guide-model h3 { font-size: clamp(1.55rem, 3vw, 2.5rem); line-height: 1.2; font-weight: 720 }
.u-guide-model-title p { margin-top: 12px; color: #c9daef; max-width: 34ch }
.u-guide-labels { display: grid; gap: 13px; margin: 0 }
.u-guide-labels > div { padding-bottom: 12px; border-bottom: 1px solid #3d5374 }
.u-guide-labels > div:last-child { border-bottom: 0; padding-bottom: 0 }
.u-guide-labels dt { font-weight: 700; margin-bottom: 3px }
.u-guide-labels dd { margin: 0; color: #d1dff3; line-height: 1.65 }
.u-guide-model .u-guide-model-note { grid-column: 1 / -1; border-top: 1px solid #3d5374; padding-top: 13px; color: #b9d5ff; font-size: .91rem }
.u-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 14px }
.u-guide-card { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--ug-line); border-radius: 17px; background: #fff }
.u-guide-card h3 { margin-bottom: 7px; font-size: clamp(1.17rem, 2vw, 1.55rem); line-height: 1.25 }
.u-guide-card p { color: var(--ug-copy); line-height: 1.72 }
.u-guide-actions { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 21px }
.u-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ug-accent);
  min-height: 46px;
  padding: 8px 14px;
  font-weight: 650;
  text-decoration: none;
}
.u-guide-link:hover { text-decoration: underline; text-underline-offset: 4px }
.u-guide-link-main { border-radius: 100px; color: #fff; background: #1158cf; padding-inline: 18px }
.u-guide-link-main:hover { background: #0b48b4; text-decoration: none }
.u-guide-link:focus-visible { outline: 3px solid #467dda; outline-offset: 4px; border-radius: 8px }
@media (max-width: 680px) {
  .u-guide-inner { width: calc(100% - 32px) }
  .u-guide-intro, .u-guide-model, .u-guide-grid { grid-template-columns: 1fr }
  .u-guide-intro { gap: 12px; margin-bottom: 21px }
  .u-guide-model { gap: 16px; border-radius: 16px }
  .u-guide-grid { gap: 8px }
}
.u-guide-reference { padding: 18px 0 0; margin-top: 24px; border-top: 1px solid #cbd8ea; }
.u-guide-reference p { margin-top: 6px; color: #425575; }
.u-guide-reference > div { display: flex; gap: 8px 20px; flex-wrap: wrap; margin-top: 7px; }
.u-guide-reference a { color: #1748a5; text-decoration: underline; text-underline-offset: 3px; }