.guide-hero { --amber:#f2b33d; position:relative; overflow:hidden; isolation:isolate; padding-top:var(--header-height); padding-bottom:40px; background:radial-gradient(ellipse 60% 70% at 78% 40%,rgba(242,179,61,.12),transparent 70%),linear-gradient(160deg,#10304a 0%,#0a2238 45%,#04101f 100%); }
.guide-hero::before { position:absolute; inset:0; z-index:-1; background-image:radial-gradient(rgba(141,228,255,.13) 1px,transparent 1px); background-size:26px 26px; mask-image:linear-gradient(180deg,#000 30%,transparent 95%); content:""; }
.guide-hero__content { padding-top:70px; }
.guide-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:9px; color:#8fb0c4; font-size:.72rem; font-weight:600; }
.guide-breadcrumb a { color:#b9d6e6; }
.guide-breadcrumb a:hover { color:#fff; }
.guide-breadcrumb [aria-current] { color:#8fb0c4; }
.guide-eyebrow { display:flex; align-items:center; gap:12px; margin:44px 0 0; color:#a9c7d8; font-size:.7rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.guide-eyebrow::before { width:40px; height:3px; border-radius:2px; background:var(--amber); content:""; }
.guide-hero h1 { max-width:900px; margin:18px 0 0; color:#fff; font-size:clamp(2.6rem,5.6vw,4.9rem); line-height:1.04; letter-spacing:-.02em; }
.guide-hero h1 span { color:var(--amber); }
.guide-hero__dek { max-width:640px; margin:24px 0 0; color:#c5d9e5; font-size:1.02rem; line-height:1.65; }
.guide-meta { display:flex; flex-wrap:wrap; gap:10px; margin:32px 0 0; padding:0; list-style:none; }
.guide-meta li { min-height:38px; display:flex; align-items:center; gap:6px; padding:0 14px; border:1px solid rgba(141,228,255,.2); border-radius:6px; background:rgba(4,28,49,.5); color:#cae4ee; font-size:.7rem; }
.guide-meta strong { color:#fff; font-size:.84rem; }

.guide-body { background:#fff; }
.guide-cover[hidden] { display:none; }
.guide-cover { position:relative; z-index:2; background:linear-gradient(180deg,#04101f 50%,#fff 50%); }
.guide-cover__frame { max-width:1040px; margin:0 auto; overflow:hidden; border:1px solid rgba(141,228,255,.18); border-radius:16px; background:#0f2b42; box-shadow:0 40px 90px rgba(3,18,34,.35); }
.guide-cover__frame img { display:block; width:100%; height:auto; aspect-ratio:16/9; }

.guide-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:64px; align-items:start; padding-top:72px; padding-bottom:100px; }
.guide-toc { position:sticky; top:calc(var(--sticky-header-height) + 28px); }
.guide-toc__title,.guide-share > p:first-child { margin:0; color:#0a2137; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.guide-toc ol { margin:16px 0 0; padding:0; list-style:none; counter-reset:toc; }
.guide-toc li { counter-increment:toc; }
.guide-toc ol a,.guide-toc__extra { position:relative; display:flex; gap:10px; padding:8px 0 8px 14px; border-left:2px solid #dce7f0; color:#4d667a; font-size:.78rem; font-weight:600; line-height:1.35; transition:color .2s,border-color .2s; }
.guide-toc ol a::before { min-width:20px; color:#9ab2c3; font-size:.66rem; font-weight:800; content:counter(toc,decimal-leading-zero); }
.guide-toc__extra { margin-top:6px; }
.guide-toc a:hover { color:#0373bb; }
.guide-toc a.is-active { border-left-color:#f2b33d; color:#0a2137; }
.guide-toc a.is-active::before { color:#c88a12; }
.guide-share { margin-top:30px; padding-top:24px; border-top:1px solid #dce7f0; }
.guide-share__links { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.guide-share__links a,.guide-share__links button { min-height:34px; display:inline-flex; align-items:center; padding:0 11px; border:1px solid #cfdfea; border-radius:6px; background:#fff; color:#14618e; font:inherit; font-size:.68rem; font-weight:700; cursor:pointer; transition:border-color .2s,background .2s; }
.guide-share__links a:hover,.guide-share__links button:hover { border-color:#0373bb; background:#eff8fc; }
.guide-share__status { min-height:1.2em; margin:8px 0 0; color:#18864f; font-size:.68rem; font-weight:700; }

.guide-article { max-width:780px; }
.guide-intro p { margin:0 0 18px; color:#4d667a; font-size:1rem; line-height:1.75; }
.guide-intro .guide-intro__lead { color:#0a2137; font-size:1.22rem; line-height:1.6; }
.guide-intro .guide-intro__lead::first-letter { float:left; margin:6px 10px 0 0; color:#0373bb; font-family:var(--font-heading); font-size:3.6rem; font-weight:800; line-height:.85; }

.tool-list { display:grid; gap:18px; margin:44px 0 0; padding:0; list-style:none; }
.tool-card { display:grid; grid-template-columns:78px minmax(0,1fr); gap:6px; padding:30px 32px 30px 22px; border:1px solid #d8e5ec; border-radius:12px; background:#fff; box-shadow:0 14px 34px rgba(16,60,87,.05); scroll-margin-top:calc(var(--sticky-header-height) + 24px); transition:border-color .25s,box-shadow .25s; }
.tool-card:hover { border-color:rgba(10,166,220,.45); box-shadow:0 22px 48px rgba(12,59,88,.1); }
.tool-card__number { color:transparent; font-family:var(--font-heading); font-size:2.7rem; font-weight:800; line-height:1; letter-spacing:-.04em; -webkit-text-stroke:1.5px #f2b33d; }
.tool-card__kicker { margin:2px 0 0; color:#0a88be; font-size:.66rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.tool-card h2 { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:8px 0 0; color:#092b44; font-size:clamp(1.35rem,2.2vw,1.7rem); line-height:1.2; letter-spacing:-.01em; }
.tool-card__badge { padding:5px 8px; border-radius:4px; background:#fff4dc; color:#8a5a00; font-family:var(--font-body); font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.tool-card__plan { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:14px 0 0; color:#244c64; font-size:.8rem; font-weight:600; }
.tool-card__plan span { padding:4px 7px; border-radius:4px; background:#eaf7fc; color:#0d6492; font-size:.56rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.tool-card__body > p:not([class]) { margin:14px 0 0; color:#4d667a; font-size:.9rem; line-height:1.72; }
.tool-card__tags { display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 0; padding:0; list-style:none; }
.tool-card__tags li { padding:5px 10px; border:1px solid #dce7f0; border-radius:999px; color:#3d6178; font-size:.68rem; font-weight:600; }
.tool-card__note { margin:14px 0 0; padding:10px 13px; border-left:3px solid #f2b33d; background:#fffaf0; color:#6b4c0c; font-size:.76rem; }
.tool-card__link { display:inline-flex; align-items:center; gap:6px; margin-top:20px; color:#075e94; font-size:.8rem; font-weight:800; }
.tool-card__link:hover { color:#0aa6dc; }

.guide-wisely { margin-top:72px; scroll-margin-top:calc(var(--sticky-header-height) + 24px); }
.guide-wisely h2,.guide-final h2 { margin:12px 0 0; color:#0a2137; font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.15; }
.wisely-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px; }
.wisely-card { padding:24px; border-radius:12px; background:#f4f9fc; }
.wisely-card svg { width:38px; height:38px; padding:8px; border-radius:9px; background:#fff; fill:none; stroke:#0373bb; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; box-shadow:0 6px 16px rgba(16,60,87,.08); }
.wisely-card h3 { margin:16px 0 0; color:#0a2137; font-size:1.02rem; }
.wisely-card p { margin:7px 0 0; color:#4d667a; font-size:.82rem; line-height:1.6; }

.guide-final { margin-top:64px; padding:44px 44px 40px; border-radius:16px; background:linear-gradient(150deg,#10304a,#04101f); }
.guide-final h2 { color:#f2b33d; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.guide-final blockquote { position:relative; margin:18px 0 0; padding:0; }
.guide-final blockquote p { margin:0; color:#fff; font-family:var(--font-heading); font-size:clamp(1.3rem,2.4vw,1.75rem); font-weight:700; line-height:1.42; letter-spacing:-.01em; }
.guide-final__action { margin:24px 0 0; color:#b6cad9; font-size:.9rem; }
.guide-final__action strong { color:#f2b33d; }

.guide-next { padding:100px 0; background:#04101f; }
.guide-next__grid { display:grid; grid-template-columns:1fr .7fr; align-items:center; gap:80px; }
.guide-next h2 { max-width:640px; margin-top:13px; color:#fff; font-size:clamp(2.1rem,3.6vw,3.3rem); line-height:1.08; }
.guide-next p { max-width:600px; margin:20px 0 0; color:#b7cfdd; font-size:.9rem; }
.guide-next__actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.guide-next__actions .button { min-width:260px; justify-content:center; }

@media (max-width:1000px) {
  .guide-layout { grid-template-columns:1fr; gap:36px; padding-top:48px; }
  .guide-toc { position:static; min-width:0; padding:18px 0 0; border-top:1px solid #dce7f0; }
  .guide-toc ol { display:flex; gap:8px; overflow-x:auto; margin-top:12px; padding-bottom:6px; scrollbar-width:thin; }
  .guide-toc ol a,.guide-toc__extra { flex:0 0 auto; padding:8px 12px; border:1px solid #dce7f0; border-radius:999px; white-space:nowrap; }
  .guide-toc ol a::before { min-width:0; }
  .guide-toc__extra { display:inline-flex; margin-top:8px; }
  .guide-toc a.is-active { border-color:#f2b33d; }
  .guide-share { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:18px; padding-top:16px; }
  .guide-share__links { margin-top:0; }
  .guide-article { max-width:none; }
  .guide-next__grid { grid-template-columns:1fr; gap:30px; }
  .guide-next__actions { flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:640px) {
  .guide-hero { padding-bottom:28px; }
  .guide-hero__content { padding-top:44px; }
  .guide-eyebrow { margin-top:30px; }
  .guide-hero h1 { font-size:2.45rem; }
  .guide-cover__frame { border-radius:10px; }
  .tool-card { grid-template-columns:1fr; gap:10px; padding:24px 20px; }
  .tool-card__number { font-size:2.1rem; }
  .wisely-grid { grid-template-columns:1fr; }
  .guide-final { padding:30px 22px; }
  .guide-next { padding:70px 0; }
  .guide-next__actions { flex-direction:column; }
  .guide-next__actions .button { width:100%; min-width:0; }
}
@media (prefers-reduced-motion:reduce) { .tool-card,.guide-toc a { transition:none; } }