/* One public guide. Every selector and design token is isolated from other pages. */
@font-face {
  font-family: GrossclickGuideOnest;
  src: url('../landing/fonts/onest-cyrillic-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: GrossclickGuideOnest;
  src: url('../landing/fonts/onest-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
.gc-guide {
  --gc-guide-ink: #172443;
  --gc-guide-muted: #5c6d87;
  --gc-guide-blue: #315de8;
  --gc-guide-line: #e0e7f2;
  --gc-guide-paper: #ffffff;
  --gc-guide-soft: #f4f7fc;
  --gc-guide-page: #f2f5fa;
  --gc-guide-focus: #c87610;
  margin: 0;
  background: var(--gc-guide-page);
  color: var(--gc-guide-ink);
  font-family: GrossclickGuideOnest, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.gc-guide,
.gc-guide *,
.gc-guide *::before,
.gc-guide *::after { box-sizing: border-box; }
.gc-guide a { color: #284fc5; text-underline-offset: 4px; }
.gc-guide a:hover { color: #183990; }
.gc-guide .skip { position: absolute; left: 12px; top: -70px; padding: 10px; background: var(--gc-guide-paper); z-index: 5; }
.gc-guide .skip:focus { top: 8px; }
.gc-guide .brand { max-width: 1080px; margin: auto; padding: 23px 28px; display: flex; gap: 12px; align-items: center; }
.gc-guide .brand img { width: 37px; height: 37px; border-radius: 10px; }
.gc-guide .brand a { font-weight: 750; font-size: 23px; color: var(--gc-guide-ink); text-decoration: none; }
.gc-guide .brand small { margin-left: auto; color: var(--gc-guide-muted); font-size: 13px; }
.gc-guide .article { max-width: 1024px; margin: 0 auto 64px; background: var(--gc-guide-paper); border: 1px solid var(--gc-guide-line); border-radius: 24px; overflow: hidden; box-shadow: 0 12px 40px #17244306; }
.gc-guide .hero { padding: 52px 74px 34px; background: linear-gradient(125deg, #eaf1ff, #ffffff 90%); }
.gc-guide .eyebrow { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .14em; color: var(--gc-guide-blue); }
.gc-guide h1 { font-size: 42px; line-height: 1.16; letter-spacing: -.035em; max-width: 820px; margin: 18px 0 20px; }
.gc-guide .deck { font-size: 20px; line-height: 1.6; color: #4d5e78; margin: 0 0 25px; }
.gc-guide .meta { font-size: 13px; color: var(--gc-guide-muted); line-height: 1.7; }
.gc-guide .contents { padding: 20px 0 0; border-top: 1px solid #dce5f6; margin-top: 24px; }
.gc-guide .contents strong { font-size: 13px; }
.gc-guide .contents ol { padding-left: 22px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; margin-bottom: 0; }
.gc-guide .body { padding: 10px 74px 48px; }
.gc-guide p { font-size: 17px; line-height: 1.8; margin: 18px 0; }
.gc-guide .step-section { padding-top: 21px; scroll-margin-top: 20px; }
.gc-guide .step-heading { display: flex; gap: 13px; align-items: flex-start; margin: 29px 0 16px; }
.gc-guide .step-number { display: inline-grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 11px; background: #eaf0ff; color: var(--gc-guide-blue); font-size: 17px; font-weight: 750; }
.gc-guide .step-heading h2 { font-size: 27px; line-height: 1.3; letter-spacing: -.025em; margin: 1px 0 0; }
.gc-guide figure { margin: 28px -22px 20px; }
.gc-guide .image-shell { padding: 9px; background: #edf2f9; border: 1px solid var(--gc-guide-line); border-radius: 17px; }
.gc-guide .image-shell img { display: block; width: 100%; height: auto; border-radius: 10px; }
.gc-guide .image-shell a { display: block; cursor: zoom-in; }
.gc-guide figcaption { padding: 12px 13px 0; color: var(--gc-guide-muted); font-size: 13px; line-height: 1.65; }
.gc-guide .checks { border: 1px solid #dce6fb; background: #f5f8ff; padding: 19px 24px; border-radius: 14px; margin: 20px 0 18px; }
.gc-guide .checks strong { font-size: 15px; }
.gc-guide .checks ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; line-height: 1.65; }
.gc-guide .help-links { display: flex; flex-wrap: wrap; gap: 9px 20px; font-size: 14px; line-height: 1.7; }
.gc-guide .note { border-top: 1px solid var(--gc-guide-line); margin-top: 34px; padding-top: 20px; }
.gc-guide .note h2 { font-size: 24px; letter-spacing: -.02em; line-height: 1.3; }
.gc-guide .cta { padding: 27px 28px; background: #edf3ff; border: 1px solid #d9e5fc; border-radius: 17px; margin-top: 35px; }
.gc-guide .cta h2 { font-size: 26px; line-height: 1.3; margin: 0 0 12px; letter-spacing: -.02em; }
.gc-guide .cta p { font-size: 16px; margin: 12px 0 20px; }
.gc-guide .actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; font-size: 14px; }
.gc-guide .button { display: inline-block; padding: 13px 18px; border-radius: 10px; background: var(--gc-guide-blue); color: #ffffff; font-weight: 650; text-decoration: none; }
.gc-guide .button:hover { background: #254bc6; color: #ffffff; }
.gc-guide .related { padding: 24px 74px; border-top: 1px solid var(--gc-guide-line); background: #f9fbff; font-size: 14px; line-height: 1.7; }
.gc-guide .related span { display: block; font-size: 12px; color: var(--gc-guide-muted); margin-bottom: 5px; }
.gc-guide :focus-visible { outline: 3px solid var(--gc-guide-focus); outline-offset: 4px; }
.gc-guide img { max-width: 100%; }

/* Show the actual side panel; every image still links to its unchanged full original. */
.gc-guide .image-shell a.focused-shot { position: relative; overflow: hidden; background: var(--gc-guide-paper); border-radius: 10px; margin: auto; width: min(100%, 560px); aspect-ratio: 560/760; }
.gc-guide .image-shell a.focused-shot img { width: 306.07143%; max-width: none; height: auto; transform: translateX(-67.32789%); border-radius: 0; }
.gc-guide .image-shell a.focused-shot.form { width: min(100%, 520px); aspect-ratio: 520/1244; }
.gc-guide .image-shell a.focused-shot.form img { width: 329.61538%; transform: translateX(-69.66161%); }
.gc-guide .shot-link { display: block; text-align: center; font-size: 12px; line-height: 1.6; padding-top: 10px; }

@media (max-width: 760px) {
  .gc-guide .brand { padding: 18px; }
  .gc-guide .brand small { display: none; }
  .gc-guide .article { margin: 0 14px 34px; border-radius: 18px; }
  .gc-guide .hero { padding: 32px 24px 26px; }
  .gc-guide .body { padding: 8px 24px 30px; }
  .gc-guide .related { padding: 22px 24px; }
  .gc-guide h1 { font-size: 32px; letter-spacing: -.03em; }
  .gc-guide .deck { font-size: 18px; }
  .gc-guide .step-heading { gap: 10px; }
  .gc-guide .step-heading h2 { font-size: 24px; }
  .gc-guide .step-number { flex-basis: 31px; height: 31px; font-size: 15px; border-radius: 9px; }
  .gc-guide p { font-size: 16px; line-height: 1.75; }
  .gc-guide .step-section { padding-top: 13px; }
  .gc-guide figure { margin-left: -12px; margin-right: -12px; }
  .gc-guide .image-shell { padding: 5px; border-radius: 12px; }
  .gc-guide .image-shell img { border-radius: 8px; }
  .gc-guide figcaption { font-size: 12px; padding-left: 5px; padding-right: 5px; }
  .gc-guide .checks { padding: 17px 18px; }
  .gc-guide .checks ul { font-size: 14px; }
  .gc-guide .cta { padding: 23px 20px; }
  .gc-guide .cta h2 { font-size: 24px; }
  .gc-guide .actions { align-items: flex-start; flex-direction: column; }
  .gc-guide .button { width: 100%; text-align: center; }
  .gc-guide .note h2 { font-size: 23px; }
}
@media print {
  .gc-guide { background: #ffffff; }
  .gc-guide .brand,
  .gc-guide .contents { display: none; }
  .gc-guide .article { border: 0; box-shadow: none; margin: 0; max-width: none; }
  .gc-guide .hero { padding-top: 20px; }
  .gc-guide .body { padding-top: 0; }
  .gc-guide figure,
  .gc-guide .checks { break-inside: avoid; }
}