
:root{--guide-bg:#06131f;--guide-panel:#0b1d2a;--guide-line:#274251;--guide-text:#eff8fb;--guide-muted:#a3bac8;--guide-mint:#52f5c7}.howto-guide-page{background:var(--guide-bg);color:var(--guide-text)}.howto-guide-page main{overflow:hidden}.guide-hero{padding:clamp(6rem,10vw,9rem) 0 4.5rem;background:radial-gradient(circle at 82% 10%,rgba(82,245,199,.14),transparent 34%)}.guide-hero__grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(480px,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}.guide-hero h1{font-size:clamp(3rem,6vw,6.2rem);line-height:.94;letter-spacing:-.055em;max-width:12ch;margin:.7rem 0 1.3rem}.lead{font-size:1.2rem;color:#d9e8ee}.guide-hero p,.guide-copy p,.guide-copy li,.guide-section p{color:var(--guide-muted);line-height:1.75}.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.4rem 0}.trust-note{padding:1rem;border-left:3px solid var(--guide-mint);background:rgba(82,245,199,.06)}.guide-compare-card{margin:0;padding:.55rem;border:1px solid var(--guide-line);border-radius:1.5rem;background:#091923}.guide-compare{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:1.1rem;background:#020a11}.guide-compare img{display:block;width:100%;height:100%;object-fit:cover}.guide-compare__after{position:absolute;inset:0}.guide-compare__before{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--position)) 0 0)}.guide-compare__line{position:absolute;top:0;bottom:0;left:var(--position);width:2px;background:#fff}.guide-compare__line i{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:54px;height:54px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#0a1c28;font-style:normal}.guide-compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize}.guide-tag{position:absolute;bottom:14px;padding:.4rem .65rem;border-radius:999px;background:rgba(0,0,0,.7);font-size:.76rem;font-weight:800}.guide-tag.before{left:14px}.guide-tag.after{right:14px}.guide-compare-card figcaption,.guide-media figcaption{padding:.8rem .5rem .25rem;color:var(--guide-muted);font-size:.85rem}.guide-jump{position:sticky;top:70px;z-index:6;border-block:1px solid var(--guide-line);background:rgba(6,19,31,.94);backdrop-filter:blur(14px)}.guide-jump .container{display:flex;gap:.45rem;overflow:auto;padding-block:.6rem}.guide-jump a{white-space:nowrap;padding:.55rem .8rem;border-radius:999px;color:#c8dbe4;text-decoration:none}.guide-jump a:hover{background:#102838}.guide-section{padding:clamp(4rem,8vw,7rem) 0}.guide-section.alt{background:#081923}.section-heading{max-width:920px;margin-bottom:2rem}.section-heading h2,.guide-final h2{font-size:clamp(2.35rem,4.6vw,4.9rem);line-height:1;letter-spacing:-.045em;margin:.6rem 0}.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.8fr);gap:clamp(2rem,5vw,5rem);align-items:start}.guide-copy{min-width:0}.guide-block{padding:1.2rem 0;border-bottom:1px solid rgba(149,185,203,.15)}.guide-block h3{font-size:1.35rem;margin:0 0 .65rem}.guide-copy ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;padding-left:1.2rem}.guide-copy li::marker{color:var(--guide-mint)}.guide-media{position:sticky;top:150px;margin:0;overflow:hidden;border:1px solid var(--guide-line);border-radius:1.35rem;background:#06111a}.guide-media img{display:block;width:100%;max-height:650px;object-fit:contain}.guide-formula{display:inline-block;padding:.8rem 1rem;border:1px solid rgba(82,245,199,.28);border-radius:.75rem;background:rgba(82,245,199,.06);font-family:ui-monospace,monospace}.step-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.4rem}.step-gallery figure{margin:0;overflow:hidden;border:1px solid var(--guide-line);border-radius:1rem;background:#08151f}.step-gallery img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;background:#030b12}.step-gallery figcaption{padding:.75rem;color:var(--guide-muted)}.video-card{display:grid;grid-template-columns:minmax(260px,.55fr) minmax(0,1.45fr);gap:1.5rem;align-items:center;margin-top:2.5rem;padding:1.2rem;border:1px solid var(--guide-line);border-radius:1.4rem;background:var(--guide-panel)}.video-frame{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:1rem;background:#000}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.guide-final{padding:clamp(5rem,9vw,8rem) 0;text-align:center;background:radial-gradient(circle at 50% 0,rgba(82,245,199,.15),transparent 45%)}.guide-final .container{max-width:900px}.guide-final .hero-actions{justify-content:center}.eyebrow{color:var(--guide-mint)!important;font:800 .76rem/1.2 ui-monospace,monospace;letter-spacing:.14em}.guide-copy a{color:var(--guide-mint)}
@media(max-width:980px){.guide-hero__grid,.guide-layout,.video-card{grid-template-columns:1fr}.guide-media{position:relative;top:auto;max-width:760px;margin-inline:auto}.step-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-hero h1{max-width:15ch}}
@media(max-width:640px){.guide-hero{padding-top:5.5rem}.guide-hero h1{font-size:clamp(2.6rem,13vw,4rem)}.hero-actions>*{width:100%}.guide-copy ul{grid-template-columns:1fr}.step-gallery{grid-template-columns:1fr}.guide-jump{top:56px}.guide-compare{aspect-ratio:4/5}.guide-section{padding:3.7rem 0}.section-heading h2{font-size:2.4rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Responsive data tables */
.guide-table-wrap{width:100%;max-width:100%;overflow-x:auto;margin:1.35rem 0 1.75rem;border:1px solid var(--guide-line);border-radius:1rem;background:#081923;-webkit-overflow-scrolling:touch}
.guide-table{width:100%;min-width:720px;border-collapse:collapse;table-layout:fixed}
.guide-table th,.guide-table td{padding:1rem 1.05rem;border-bottom:1px solid rgba(149,185,203,.16);text-align:left;vertical-align:top;overflow-wrap:anywhere;word-break:normal}
.guide-table th{background:#102838;color:var(--guide-mint);font-size:.82rem;line-height:1.4;text-transform:uppercase;letter-spacing:.045em}
.guide-table td{color:var(--guide-muted);line-height:1.55}
.guide-table tbody tr:last-child td{border-bottom:0}
.guide-table tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.guide-table--compact{min-width:620px}
@media(max-width:980px){.guide-table{min-width:680px}.guide-layout:has(.guide-table-wrap){grid-template-columns:1fr}.guide-layout:has(.guide-table-wrap) .guide-media{max-width:760px}}
@media(max-width:640px){.guide-table-wrap{margin-inline:0;border-radius:.8rem}.guide-table{min-width:620px}.guide-table th,.guide-table td{padding:.85rem .9rem;font-size:.9rem}}

/* v3.7.0 guide refinements */
.guide-byline{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1rem;margin:1.15rem 0 .35rem;color:#b8c8d8;font-size:.88rem}
.guide-byline strong{color:#f3f8fc}
.guide-byline span{display:inline-flex;align-items:center;gap:.4rem}
.guide-byline span::before{content:"";width:.32rem;height:.32rem;border-radius:50%;background:var(--guide-accent,#48f1c8)}
.guide-media img[width][height]{height:auto;aspect-ratio:1568/1004;object-fit:contain;background:#07131d}
.guide-media figcaption{padding:.75rem 1rem 1rem;color:#9db2c5;font-size:.86rem;line-height:1.55;text-align:left}
@media(min-width:1024px){
  .guide-section>.container{width:min(1180px,calc(100% - 64px));margin-inline:auto}
  .guide-section .section-heading{max-width:880px;margin-inline:auto;text-align:center}
  .guide-section .section-heading .eyebrow{justify-content:center}
  .guide-layout{align-items:start}
  .guide-copy{min-width:0}
}
@media(max-width:767px){
  .guide-byline{justify-content:center}
  .guide-media figcaption{font-size:.8rem}
}

/* Image resolution guide */
.resolution-guide-page .guide-hero-art{padding:0;background:#0b1722}.resolution-guide-page .guide-hero-art img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.resolution-guide-page .section-heading{max-width:900px;margin-inline:auto;text-align:center}
.resolution-summary,.term-grid,.operation-grid,.workflow-grid,.fit-grid,.use-case-grid,.mistake-grid,.product-paths{display:grid;gap:16px}.resolution-summary{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px}
.resolution-summary article,.term-grid article,.operation-grid article,.workflow-grid article,.fit-grid article,.mistake-grid article,.product-paths article{min-width:0;padding:24px;border:1px solid var(--line);border-radius:20px;background:#0d1c28}.resolution-summary span,.workflow-grid span{display:block;margin-bottom:14px;color:#55f3cf;font:700 .78rem/1 var(--font-mono);letter-spacing:.08em}
.wide-learning-visual{max-width:1100px;margin:40px auto 0}.wide-learning-visual img{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.term-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;margin:28px auto}
.guide-callout{max-width:1080px;margin:26px auto 0;padding:20px 22px;border-left:3px solid #55f3cf;border-radius:0 14px 14px 0;background:#10232f;color:#b9cbd8}
.resolution-calculator{max-width:1100px;margin:0 auto;padding:28px;border:1px solid var(--line);border-radius:24px;background:#0c1b27}.resolution-calculator fieldset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 0 20px;padding:0;border:0}.resolution-calculator legend{width:100%;margin-bottom:14px;color:#f5f9fb;font-weight:800}.resolution-calculator label{display:grid;gap:8px;color:#a9bece}.resolution-calculator input,.resolution-calculator select{width:100%;min-height:48px;padding:0 14px;border:1px solid #2b4658;border-radius:12px;background:#08141e;color:#f7fbfd;font:inherit}
.calculator-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:24px}.calculator-results article{padding:18px;border-radius:14px;background:#07131c}.calculator-results span,.calculator-results strong{display:block}.calculator-results span{margin-bottom:8px;color:#88a4b8;font-size:.82rem}.calculator-results strong{color:#55f3cf;font-size:1.05rem}
.operation-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px}.workflow-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.workflow-grid article{min-height:210px}.centered-actions{justify-content:center;margin-top:30px}.fit-grid,.product-paths{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1050px;margin:0 auto 26px}
.use-case-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.use-case-grid a{display:block;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#0d1c28;color:inherit;text-decoration:none}.use-case-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#07131c}.use-case-grid h3,.use-case-grid p{margin-inline:20px}.use-case-grid h3{margin-top:18px}.use-case-grid p{margin-bottom:22px}
.mistake-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:34px}.mistake-grid article{display:flex;align-items:flex-start;gap:12px;padding:18px 20px}.mistake-grid span{color:#ff7d8d;font-weight:900}.mistake-grid p{margin:0}.product-paths a{color:#55f3cf;font-weight:800}.table-note{color:#8fa8b9;font-size:.9rem}.faq-list{max-width:950px;margin:0 auto}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{padding:22px 2px;color:#f5f9fb;font-size:1.1rem;font-weight:800;cursor:pointer}.faq-list details p{padding:0 0 22px;margin:0;color:#a8bfd0}
@media(max-width:1100px){.resolution-summary,.operation-grid,.use-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calculator-results{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.term-grid,.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.resolution-calculator fieldset{grid-template-columns:1fr}.fit-grid,.product-paths{grid-template-columns:1fr}}
@media(max-width:620px){.resolution-summary,.term-grid,.operation-grid,.workflow-grid,.use-case-grid,.mistake-grid,.calculator-results{grid-template-columns:1fr}.resolution-calculator{padding:20px}.workflow-grid article{min-height:0}.resolution-guide-page .guide-hero-art img,.wide-learning-visual img{aspect-ratio:auto}}
