.ph{background:linear-gradient(180deg,var(--mist) 0%,#fff 100%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 15% 30%,#000 0%,transparent 55%);-webkit-mask-image:radial-gradient(ellipse at 15% 30%,#000 0%,transparent 55%);opacity:.55;pointer-events:none}
.ph .wrap{position:relative;padding-bottom:64px}
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;margin-top:18px}
.ph-grid>*{min-width:0}
.ph-grid.solo{grid-template-columns:1fr;max-width:860px}
.ph h1{font-size:clamp(30px,3.9vw,48px);font-weight:700;margin:12px 0 16px}
.ph .lead{font-size:18.5px;color:var(--slate);margin-bottom:26px;max-width:38em}
.ph .actions{display:flex;flex-wrap:wrap;gap:12px}
.ph .actions .btn{padding:14px 24px}
.ph-points{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:24px;font-size:15px;color:var(--slate)}
.ph-points span{display:flex;gap:8px;align-items:center}
.ph-points svg{color:var(--green)}
.mock{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 30px 60px -40px rgba(11,37,69,.42)}
.mock-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px}
.mock-h b{font-family:var(--f-display);font-weight:600;color:var(--navy);font-size:16.5px}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--mist);font-size:14.5px;margin-bottom:8px}
.mrow:last-child{margin-bottom:0}
.mrow b{font-weight:600}
.mrow small{display:block;color:var(--slate);font-size:12.5px}
.mfield{border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14.5px;margin-bottom:8px;display:flex;justify-content:space-between;gap:10px;background:#fff}
.mfield span{color:var(--slate);font-size:13px}
.mfield b{font-weight:600}
.mbtn{display:block;text-align:center;border-radius:10px;padding:11px;font-weight:600;background:var(--blue);color:#fff;margin-top:6px}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px}
.thumbs i{aspect-ratio:4/3;border-radius:10px;background:linear-gradient(135deg,#D7E5F6,#EEF4FB);display:grid;place-items:center;color:var(--slate);font-style:normal;font-size:12px}

.cards{display:grid;gap:18px}
.cards.c2{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c4{grid-template-columns:repeat(4,1fr)}
.cardx{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.sec-mist .cardx{background:#fff}
.cardx .ci{width:44px;height:44px;border-radius:12px;background:var(--mist);color:var(--blue);display:grid;place-items:center;margin-bottom:12px}
.sec-mist .cardx .ci{background:var(--mist)}
.cardx h3{font-size:17.5px;margin-bottom:6px}
.cardx p{color:var(--slate);font-size:15.5px}
.cardx .note{margin-top:10px;font-size:14px;font-weight:600;color:var(--navy-2);background:var(--mist);border-radius:8px;padding:6px 10px;display:inline-block}
.cardx.dark{background:var(--navy);border-color:var(--navy)}
.cardx.dark h3{color:#fff}.cardx.dark p{color:#C3D3E8}.cardx.dark .ci{background:rgba(255,255,255,.1);color:var(--sky)}
.sec-navy .cardx{background:rgba(255,255,255,.05);border-color:#2A4A77}
.sec-navy .cardx h3{color:#fff}.sec-navy .cardx p{color:#C3D3E8}.sec-navy .cardx .ci{background:rgba(255,255,255,.1);color:var(--sky)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split>*{min-width:0}
.split + .split{margin-top:84px}
.split.rev > :first-child{order:2}
.split h2{font-size:clamp(25px,2.9vw,34px);margin-bottom:12px}
.split > div > p{color:var(--slate);font-size:17px;margin-bottom:20px}
.sec-navy .split > div > p{color:#C3D3E8}
.sec-navy .checks li{color:#fff}.sec-navy .checks svg{color:#5FD0A0}

.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:52px 1fr;gap:18px;position:relative;padding-bottom:26px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;right:25px;top:48px;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,var(--sky) 0 6px,transparent 6px 12px)}
.steps li:last-child::before{display:none}
.steps .n{width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--blue);color:var(--blue-d);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:18px;position:relative;z-index:1}
.steps h3{font-size:18.5px;margin:10px 0 4px}
.steps p{color:var(--slate);font-size:16px}
.sec-navy .steps .n{background:var(--navy);border-color:#5FA8FF;color:#fff}
.sec-navy .steps li::before{background:repeating-linear-gradient(to bottom,#4B6E9C 0 6px,transparent 6px 12px)}
.sec-navy .steps p{color:#C3D3E8}
.steps.cols{grid-template-columns:repeat(2,1fr);column-gap:40px}

.tw{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:640px}
.tbl th{text-align:right;font-family:var(--f-display);font-weight:600;color:var(--navy);font-size:15px;padding:14px 18px;background:var(--mist);border-bottom:1px solid var(--line)}
.tbl td{padding:13px 18px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:first-child td{border-top:0}
.tbl td:first-child{font-weight:600;color:var(--navy-2)}
.tbl .muted{color:var(--slate)}

.pillset{display:flex;flex-wrap:wrap;gap:8px}
.pillset span{font-size:14.5px;font-weight:600;padding:7px 14px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--navy-2)}
.sec-mist .pillset span{background:#fff}

.stset{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.stset .st{font-size:13.5px;padding:4px 12px}
.callout{border-right:4px solid var(--blue);background:var(--mist);border-radius:12px;padding:18px 22px;font-size:16.5px}
.callout b{font-family:var(--f-display);font-weight:600;color:var(--navy);display:block;margin-bottom:4px}

.related{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.related a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--navy-2);font-size:15.5px}
.related a:hover{border-color:var(--blue);color:var(--blue-d)}
.related svg{width:16px;height:16px;flex:none;color:var(--slate)}

.toc{position:sticky;top:76px;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.toc .wrap{display:flex;gap:6px;overflow-x:auto;padding-block:10px;scrollbar-width:none}
.toc a{white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--slate);padding:6px 12px;border-radius:8px}
.toc a:hover{background:var(--mist);color:var(--blue-d)}

@media (max-width:1180px){.ph-grid,.split{grid-template-columns:1fr;gap:34px}.split.rev > :first-child{order:0}.cards.c4{grid-template-columns:repeat(2,1fr)}.cards.c3{grid-template-columns:repeat(2,1fr)}.related{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.cards.c2,.cards.c3,.cards.c4,.related,.steps.cols{grid-template-columns:1fr}.toc{top:76px}}