.guide-page { background: var(--paper); }.guide-hero { padding: 77px 0 82px; border-bottom: 1px solid var(--line); }.guide-hero-inner { max-width: 900px; }.guide-hero h1 { max-width: 850px; margin-bottom: 26px; font-size: clamp(42px, 5.3vw, 70px); }.guide-lede { max-width: 690px; margin-bottom: 31px; color: var(--muted); font-size: 17px; }.guide-actions { display: flex; align-items: center; gap: 25px; }.guide-content { padding: 76px 0 105px; background: var(--white); }.guide-layout { display: grid; grid-template-columns: 190px minmax(0, 760px); gap: 72px; justify-content: center; }.guide-index { position: sticky; top: 25px; align-self: start; display: grid; gap: 10px; padding-top: 5px; }.guide-index span { margin-bottom: 8px; color: var(--coral); font: 10px 'DM Mono', monospace; letter-spacing: .1em; }.guide-index a { color: var(--muted); font-size: 11px; line-height: 1.35; }.guide-index a:hover { color: var(--teal); }.guide-main { min-width: 0; }.guide-block { margin-bottom: 78px; scroll-margin-top: 25px; }.guide-block:last-child { margin-bottom: 0; }.guide-block h2 { margin: 0 0 21px; font-size: clamp(31px, 3.5vw, 46px); }.guide-block h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.04em; }.guide-block p { color: var(--muted); font-size: 14px; }.quick-answer { padding: 27px 29px 25px; background: var(--cream); }.formula-block { display: grid; gap: 7px; margin: 25px 0 17px; padding: 17px 19px; border-left: 3px solid var(--coral); background: var(--white); }.formula-block strong { color: var(--ink); font-size: 13px; }.formula-block span, .formula-inline { color: var(--teal); font: 11px 'DM Mono', monospace; line-height: 1.6; }.small-note { margin-bottom: 0; font-size: 11px !important; }.quote-example { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }.quote-example-card { padding: 22px; border: 1px solid var(--line); background: var(--paper); }.quote-example-card-accent { border-color: var(--teal); box-shadow: inset 0 3px 0 var(--teal); }.example-card-top { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--teal); font: 11px 'DM Mono', monospace; }.example-card-top b { color: var(--coral); }.quote-example-card dl { margin: 15px 0 0; }.quote-example-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(214,213,205,.65); font-size: 11px; }.quote-example-card dt { color: var(--muted); }.quote-example-card dd { margin: 0; color: var(--ink); font-weight: 800; }.guide-callout { margin-top: 18px; padding: 17px 19px; border-left: 2px solid var(--coral); background: #fff4ef; }.guide-callout strong { color: var(--ink); font-size: 12px; }.guide-callout p { margin: 6px 0 0; font-size: 12px; }.guide-step { display: grid; grid-template-columns: 43px 1fr; gap: 16px; padding: 25px 0; border-top: 1px solid var(--line); }.guide-step > span { color: var(--coral); font: 11px 'DM Mono', monospace; }.guide-step p { margin-bottom: 12px; }.guide-step .text-link { display: inline-block; font-size: 12px; }.formula-inline { margin: 17px 0 18px; padding: 12px 14px; background: var(--cream); }.guide-cta { margin-top: 8px; }.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 23px 25px; background: var(--cream); }.checklist span { color: var(--ink); font-size: 12px; }.checklist span::before { content: '\2713'; display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 8px; border-radius: 50%; background: var(--teal); color: var(--white); font-size: 10px; }.workflow-guide { padding: 28px 30px 30px; background: var(--teal-dark); color: var(--white); }.workflow-guide h2 { color: var(--white); }.workflow-guide p { color: rgba(255,253,248,.7); }.workflow-list { display: grid; gap: 9px; margin: 24px 0 24px; padding: 0; list-style: none; counter-reset: workflow; }.workflow-list li { counter-increment: workflow; padding: 12px 14px 12px 42px; position: relative; background: rgba(255,253,248,.08); color: rgba(255,253,248,.82); font-size: 12px; }.workflow-list li::before { content: counter(workflow, decimal-leading-zero); position: absolute; left: 14px; color: #f7a08d; font: 10px 'DM Mono', monospace; }.workflow-guide .button-primary { background: var(--coral); }.guide-main details { padding: 18px 0; border-top: 1px solid var(--line); }.guide-main summary { cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 800; }.guide-main details p { margin: 11px 0 0; font-size: 12px; }.guide-page .site-footer { margin-top: 0; }
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; gap: 35px; }.guide-index { position: static; display: flex; flex-wrap: wrap; gap: 9px 17px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.guide-index span { width: 100%; margin-bottom: 0; } }
@media (max-width: 800px) { .guide-hero { padding: 60px 0 65px; }.guide-content { padding: 62px 0 80px; }.guide-block { margin-bottom: 62px; }.guide-lede { font-size: 15px; }.quote-example { grid-template-columns: 1fr; }.guide-actions { align-items: start; flex-direction: column; gap: 17px; } }
@media (max-width: 470px) { .guide-hero h1 { font-size: 39px; }.guide-block h2 { font-size: 35px; }.quick-answer, .workflow-guide { padding: 22px 18px; }.quote-example-card { padding: 18px 16px; }.checklist { grid-template-columns: 1fr; padding: 19px 17px; }.guide-step { grid-template-columns: 30px 1fr; gap: 10px; }.formula-block span, .formula-inline { font-size: 10px; }.guide-content { overflow: hidden; } }