/* Copy, figures, diagrams, and controls are native HTML and vectors. */
.codex-strengths { --strengths-blue:#0055ed; --strengths-ink:#080f37; padding:40px clamp(20px,3vw,48px); background:#fff; color:var(--strengths-ink); font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif; font-size:16px; line-height:1.7; scroll-margin-top:90px; }
.codex-strengths :where(*,*::before,*::after) { box-sizing:border-box; }
.codex-strengths :where(h2,h3,h4,p,ul,ol,dl,dd) { margin:0; padding:0; }
.codex-strengths :where(ul,ol) { list-style:none; }
.codex-strengths :where(span,strong,time,a) { font-family:inherit; font-size:inherit; line-height:inherit; }
.codex-strengths__inner { max-width:1320px; margin-inline:auto; }
.codex-strengths__heading { padding-bottom:16px; text-align:center; }
.codex-strengths__lead { margin-bottom:5px; color:#46526a; font-size:clamp(16px,1.45vw,21px); font-weight:800; }
.codex-strengths__title { display:inline; position:relative; color:var(--strengths-ink); font-size:clamp(30px,3.25vw,48px); font-weight:900; line-height:1.35; letter-spacing:-.035em; text-wrap:balance; }
.codex-strengths__title strong { color:#001eca; font-weight:900; }
.codex-strengths__title::before,.codex-strengths__title::after { content:""; display:inline-block; width:7px; height:.66em; margin-inline:.45em; border-radius:5px; background:#078bff; box-shadow:13px 5px 0 #ffe348; transform:rotate(-30deg); vertical-align:middle; }
.codex-strengths__title::after { transform:rotate(30deg); box-shadow:-13px 5px 0 #ffe348; }
.codex-strengths__comparison { display:grid; grid-template-columns:1.13fr .63fr 1fr; align-items:stretch; padding:0 24px; }
.codex-strengths__product { min-width:0; padding:12px 16px 14px; border:2px solid #ccd5e3; border-radius:9px; background:linear-gradient(110deg,#f9fcff,#fff); }
.codex-strengths__product--codex { border:3px solid var(--strengths-blue); }
.codex-strengths__brand { display:flex; align-items:center; justify-content:center; gap:10px; min-height:75px; padding-bottom:9px; border-bottom:2px solid #cdd5e2; font-size:clamp(28px,3vw,44px); font-weight:900; line-height:1.15; }
.codex-strengths__brand span { font-size:inherit; font-weight:inherit; white-space:nowrap; }
.codex-strengths__brand-mark { display:block; flex:none; width:54px; height:54px; }
.codex-strengths__product--codex .codex-strengths__brand { border-color:#0c69ff; }
.codex-strengths__openai-mark { display:block; flex:none; width:60px; height:60px; background:#0b1251; mask:url('/assets/openai-knot-header-transparent-20260920.png') center/contain no-repeat; }
.codex-strengths__icon { display:block; flex:none; width:38px; height:38px; color:#0069fa; }
.codex-strengths__attributes { display:grid; grid-template-rows:repeat(3,1fr); gap:8px; min-height:172px; margin-block:10px 12px; }
.codex-strengths__attributes > div { display:grid; grid-template-columns:36px 118px minmax(0,1fr); align-items:center; gap:10px; min-height:49px; padding:7px 13px; border-radius:6px; background:#edf1f6; }
.codex-strengths__attributes .codex-strengths__icon { width:32px; height:32px; color:#23324c; }
.codex-strengths__attributes dt { font-size:clamp(16px,1.5vw,20px); font-weight:800; white-space:nowrap; }
.codex-strengths__attributes dd { display:flex; align-items:center; gap:15px; font-size:clamp(14px,1.35vw,18px); font-weight:700; line-height:1.45; }
.codex-strengths__attributes dd::before { content:":"; color:#3e506f; }
.codex-strengths__experience { padding-top:8px; border-top:2px solid #ccd5e3; text-align:center; }
.codex-strengths__experience h4 { font-size:clamp(16px,1.45vw,20px); font-weight:800; line-height:1.4; }
.codex-strengths__rate { position:relative; isolation:isolate; display:inline-flex; align-items:baseline; padding-inline:5px; color:var(--strengths-ink); font-family:"Inter",Arial,sans-serif; font-size:clamp(60px,6.5vw,86px); line-height:1.12; letter-spacing:-.055em; }
.codex-strengths__rate strong { font-family:inherit; font-weight:900; }
.codex-strengths__rate > span { font-family:inherit; font-size:.5em; font-weight:900; letter-spacing:-.03em; }
.codex-strengths__rate::after { content:""; position:absolute; z-index:-1; inset:auto 0 2px; height:12px; border-radius:3px; background:#c5d7ed; }
.codex-strengths__product--codex .codex-strengths__rate { color:#0624cb; }
.codex-strengths__product--codex .codex-strengths__rate::after { background:#ffec66; }
.codex-strengths__bridge { position:relative; display:flex; align-items:center; min-width:0; }
.codex-strengths__contract { position:relative; z-index:1; width:110%; flex-shrink:0; padding:56px 24% 56px 12px; background:linear-gradient(100deg,#38b9ff,#007ef0 52%,#0056e5); clip-path:polygon(0 10%,66% 10%,66% 0,100% 50%,66% 100%,66% 90%,0 90%); color:#fff; text-align:center; }
.codex-strengths__contract-intro { padding-bottom:7px; border-bottom:1px dotted #fff; font-size:clamp(14px,1.3vw,18px); font-weight:800; white-space:nowrap; }
.codex-strengths__contract h3 { margin-top:3px; font-size:clamp(17px,1.6vw,23px); font-weight:800; }
.codex-strengths__contract-value { display:flex; justify-content:center; align-items:flex-start; gap:2px; color:#ffe442; font-family:"Inter",Arial,sans-serif; font-size:clamp(68px,7vw,92px); line-height:1.15; letter-spacing:-.05em; }
.codex-strengths__contract-value strong { font-family:inherit; font-weight:900; }
.codex-strengths__contract-value strong span { font-size:.83em; }
.codex-strengths__contract-outro { padding-top:7px; border-top:1px dotted #fff; font-size:clamp(13px,1.2vw,17px); font-weight:800; white-space:nowrap; }
.codex-strengths__benefits { display:grid; align-content:center; gap:16px; min-height:172px; margin-block:10px 12px; padding:22px 12px; border-radius:5px; background:linear-gradient(120deg,#0057e7,#0038bb); clip-path:polygon(0 0,50% 12%,100% 0,100% 87%,50% 100%,0 87%); color:#fff; }
.codex-strengths__benefits li { display:flex; align-items:center; justify-content:center; gap:12px; font-size:clamp(15px,1.35vw,19px); font-weight:800; line-height:1.4; }
.codex-strengths__rays { position:relative; display:block; flex:none; width:20px; height:26px; }
.codex-strengths__rays::before,.codex-strengths__rays::after { content:""; position:absolute; left:7px; top:1px; width:5px; height:16px; border-radius:3px; background:#ffe444; transform:rotate(-46deg); }
.codex-strengths__rays::after { top:14px; left:2px; height:12px; transform:rotate(-70deg); }
.codex-strengths__shared { display:flex; align-items:center; justify-content:center; gap:26px; margin:9px 24px; padding:9px 16px; border-radius:8px; background:#eaf5ff; }
.codex-strengths__shared p:first-child { font-size:clamp(16px,1.6vw,22px); font-weight:800; }
.codex-strengths__shared p + p { padding-left:25px; border-left:1px solid #b1bed4; color:#40516f; font-size:16px; }
.codex-strengths__stats { display:grid; grid-template-columns:150px 1fr 1.1fr; align-items:center; gap:20px; margin-top:9px; padding:11px 16px; border:1px solid #c7d8fa; border-radius:5px; }
.codex-strengths__stats > h3 { color:#506180; font-size:16px; font-weight:500; }
.codex-strengths__stat { display:flex; align-items:center; gap:10px; min-width:0; padding-left:18px; border-left:1px solid #bfcee7; color:#005aff; }
.codex-strengths__stat .codex-strengths__icon { width:44px; height:44px; }
.codex-strengths__stat > div { display:flex; align-items:center; flex-wrap:wrap; gap:0 10px; min-width:0; }
.codex-strengths__stat h4 { flex-basis:100%; font-size:clamp(14px,1.1vw,16px); font-weight:800; line-height:1.4; }
.codex-strengths__stat p { display:flex; align-items:baseline; gap:10px; }
.codex-strengths__stat strong { font-family:"Inter",Arial,sans-serif; font-size:clamp(32px,3vw,42px); font-weight:900; line-height:1.2; letter-spacing:-.04em; white-space:nowrap; }
.codex-strengths__stat strong span { font-size:.75em; font-weight:900; }
.codex-strengths__stat time { color:#506180; font-size:12px; white-space:nowrap; }
.codex-strengths__strip { display:flex; align-items:center; gap:18px; min-height:66px; border-bottom:1px solid #c3d6f5; }
.codex-strengths__strip > h3 { flex:none; padding-left:12px; border-left:8px solid #0061f6; font-size:clamp(16px,1.45vw,20px); font-weight:800; line-height:1.4; }
.codex-strengths__examples { display:grid; flex:1; grid-template-columns:repeat(3,minmax(0,1fr)); }
.codex-strengths__examples li { display:flex; align-items:center; justify-content:center; gap:12px; padding-inline:12px; font-size:clamp(14px,1.2vw,17px); font-weight:800; line-height:1.5; }
.codex-strengths__examples li + li { border-left:1px solid #bfcee7; }
.codex-strengths__learning { display:grid; flex:1; grid-template-columns:repeat(4,minmax(0,1fr)); counter-reset:learning; }
.codex-strengths__learning li { position:relative; display:flex; align-items:center; justify-content:center; gap:8px; padding-inline:12px; font-size:clamp(14px,1.2vw,17px); font-weight:800; line-height:1.4; counter-increment:learning; }
.codex-strengths__learning li::before { content:counter(learning); display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:50%; background:#0071fa; color:#fff; font-family:"Inter",Arial,sans-serif; font-size:20px; font-weight:800; }
.codex-strengths__learning li + li::after { content:""; position:absolute; top:calc(50% - 5px); left:-4px; width:8px; height:8px; border-top:2px solid #087dff; border-right:2px solid #087dff; transform:rotate(45deg); }
.codex-strengths__learning .codex-strengths__icon { width:32px; height:32px; }
.codex-strengths__closing { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 24px; background:linear-gradient(105deg,#0062ef,#004ada); color:#fff; }
.codex-strengths__closing > p { font-size:clamp(19px,1.95vw,28px); font-weight:800; line-height:1.5; text-wrap:balance; }
.codex-strengths__cta { display:flex; flex:none; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:8px 24px; border:2px solid #fff; border-radius:999px; color:#fff; font-size:clamp(16px,1.35vw,19px); font-weight:800; line-height:1.4; text-align:center; text-decoration:none; transition:background .2s; }
.codex-strengths__cta span { font-weight:inherit; }
.codex-strengths__cta svg { display:block; flex:none; width:.72em; height:1em; fill:none; stroke:currentColor; stroke-width:3; }
.codex-strengths__cta:hover { background:#ffffff20; }
.codex-strengths__cta:focus-visible { outline:3px solid #ffe442; outline-offset:4px; }
@media (max-width:1279px) and (min-width:1101px) {
  .codex-strengths__comparison { padding-inline:0; }
  .codex-strengths__attributes > div { grid-template-columns:30px 95px minmax(0,1fr); gap:7px; padding-inline:8px; }
  .codex-strengths__attributes dd { gap:8px; }
  .codex-strengths__brand { font-size:32px; }
  .codex-strengths__stats { grid-template-columns:115px 1fr 1.1fr; gap:12px; }
  .codex-strengths__strip { gap:12px; }
  .codex-strengths__examples li { gap:8px; padding-inline:8px; }
  .codex-strengths__learning li { flex-wrap:wrap; gap:6px; }
  .codex-strengths__learning li span { flex-basis:100%; text-align:center; }
  .codex-strengths__closing { gap:16px; }
  .codex-strengths__closing > p { font-size:21px; }
}
@media (max-width:1100px) {
  .codex-strengths { padding:40px 24px; }
  .codex-strengths__inner { max-width:840px; }
  .codex-strengths__title::before,.codex-strengths__title::after { display:none; }
  .codex-strengths__comparison { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-inline:0; }
  .codex-strengths__product { padding:14px; }
  .codex-strengths__brand { gap:8px; font-size:31px; }
  .codex-strengths__brand-mark,.codex-strengths__openai-mark { width:44px; height:44px; }
  .codex-strengths__attributes > div { grid-template-columns:28px 1fr; gap:4px 10px; padding:8px 12px; }
  .codex-strengths__attributes .codex-strengths__icon { width:28px; height:28px; grid-row:span 2; }
  .codex-strengths__attributes dt { font-size:16px; }
  .codex-strengths__attributes dd { grid-column:2; font-size:16px; }
  .codex-strengths__attributes dd::before { display:none; }
  .codex-strengths__experience h4 { font-size:16px; }
  .codex-strengths__rate { font-size:72px; }
  .codex-strengths__benefits { min-height:238px; gap:20px; padding-inline:10px; }
  .codex-strengths__benefits li { gap:8px; font-size:17px; }
  .codex-strengths__bridge { grid-column:1/-1; grid-row:2; justify-content:center; }
  .codex-strengths__contract { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%; padding:14px 20px; border-radius:9px; clip-path:none; }
  .codex-strengths__contract-intro { grid-row:span 2; padding:0; border:0; font-size:18px; white-space:normal; }
  .codex-strengths__contract h3 { grid-column:2; margin:0; font-size:18px; }
  .codex-strengths__contract-value { grid-column:2; grid-row:2; font-size:60px; }
  .codex-strengths__contract-outro { grid-column:3; grid-row:1/span 2; padding:0; border:0; font-size:17px; white-space:normal; }
  .codex-strengths__shared { flex-direction:column; gap:5px; margin-inline:0; text-align:center; }
  .codex-strengths__shared p:first-child { font-size:18px; }
  .codex-strengths__shared p + p { padding:0; border:0; font-size:14px; }
  .codex-strengths__stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; }
  .codex-strengths__stats > h3 { grid-column:1/-1; font-size:16px; }
  .codex-strengths__stat { align-items:flex-start; padding-left:0; border:0; }
  .codex-strengths__stat + .codex-strengths__stat { padding-left:12px; border-left:1px solid #bfcee7; }
  .codex-strengths__stat h4 { font-size:16px; }
  .codex-strengths__stat strong { font-size:38px; }
  .codex-strengths__stat p { flex-wrap:wrap; gap:4px; }
  .codex-strengths__stat time { display:block; flex-basis:100%; font-size:14px; }
  .codex-strengths__strip { align-items:stretch; flex-direction:column; gap:16px; padding-block:20px; }
  .codex-strengths__strip > h3 { font-size:20px; }
  .codex-strengths__examples li { justify-content:flex-start; gap:10px; font-size:16px; }
  .codex-strengths__examples li:first-child { padding-left:0; }
  .codex-strengths__learning li { padding-inline:8px; flex-wrap:wrap; font-size:16px; }
  .codex-strengths__learning li span { flex-basis:100%; text-align:center; }
  .codex-strengths__closing { flex-direction:column; gap:16px; padding:22px; text-align:center; }
  .codex-strengths__closing > p { font-size:24px; }
  .codex-strengths__cta { min-height:54px; font-size:18px; }
}
@media (prefers-reduced-motion:reduce) { .codex-strengths__cta { transition:none; } }