/* ==========================================================================
   Thirdslot — pages de guide (/guides/what-is-ai-visibility/, /guides/how-ai-assistants-choose-businesses/,
   /guides/ai-visibility-checklist/)
   Maquette : 2026-10-29 Thirdslot-guide detail (1920 px de large, guide 1), appliquée aux 3 guides.
   « y » = position dans la maquette (le bandeau promo s'ajoute au-dessus ; le header passe sur le hero).
   Texte : x 432.7 → 1592.7 (1160 px) ; sommaire « Guide » à x 40.9 (masqué sous 1600 px, comme la méthodologie).
   Images : assets/guide/ (+ assets/guides/ et assets/methodology/ réutilisés). Script : js/guide.js.
   ========================================================================== */

.page-guide { --gp-ink: #1a1a2e; --gp-text: #4f4f4f; --gp-violet: #4a46d3; --gp-line: #e2e2f2; }
.page-guide .site-header:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.gp { position: relative; overflow-x: clip; }
.gp h1, .gp h2, .gp h3 { margin: 0; font-family: var(--font-head); font-weight: 500; color: var(--gp-ink); }
.gp-hero p, .gp-doc p, .gp-more p { margin: 0; }
.gp-doc ul, .gp-doc ol, .gp-grid { margin: 0; padding: 0; list-style: none; }

/* ---------- Hero (pastille y 176.8, titre y 226 → 358, cadre y 449.7 → 930.1) ---------- */
.gp-hero { position: relative; margin-top: -88px; padding-top: 176.8px; text-align: center; }
.gp-hero-bg { position: absolute; left: 0; right: 0; top: 0; height: 960px; background: url(/assets/guide/hero-bg.webp) center top / max(1920px, 100%) auto no-repeat; pointer-events: none; }
.gp-hero-inner { position: relative; z-index: 1; }
.gp-pill {
  display: inline-flex; align-items: center; gap: 12px;
  height: 37.3px; padding: 0 20px 0 11px;
  border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #4a46d3 0%, #d085c2 30%, #ddd 80%) border-box;
  box-shadow: 0 8px 16px rgba(218, 218, 232, 0.5);
  font-weight: 500; font-size: 14px; color: var(--gp-ink);
}
.gp-pill img { width: 18px; height: 18px; }
.gp .gp-h1 { max-width: 920px; margin: 11.85px auto 0; font-size: 52px; line-height: 66px; font-weight: 600; }
.gp .gp-meta-top { margin-top: 28.8px; font-family: var(--font-head); font-size: 18px; line-height: 21px; color: var(--gp-text); }

.gp-frame {
  position: relative; z-index: 1; width: 1265.4px; height: 480.4px; margin: 41.95px auto 0;
  border: 2px solid #fff; border-radius: 40px;
  background: url(/assets/guide/frame-bg.webp) -2px -2px / 1265.4px 480.4px no-repeat;
}
.gp-frame > * { position: absolute; }
/* guides 2 et 3 : l'illustration de leur carte, centrée dans le cadre */
.gp-frame-img { left: calc(50% - 309px); top: 26px; width: 618px; height: auto; border-radius: 39px; }
/* guide 1 : bandes latérales + liaisons (image) et composition « AI Visibility · 9/20 » en HTML */
.gp-scene { left: -2px; top: -2px; width: 1265.4px; height: 480.4px; }
.gp-scene-bg { position: absolute; left: -25.1px; top: 160.3px; width: 1307.2px; height: auto; max-width: none; }
.gp-sc { position: absolute; left: 297.6px; top: 22.4px; text-align: left; }
.gp-sc > * { position: absolute; margin: 0; }
.gp-sc .ic { left: 82px; top: 105.7px; width: 52.8px; height: 52.8px; }
.gp-sc .t { left: 148.6px; top: 113.3px; font-family: var(--font-head); font-weight: 500; font-size: 19.5px; line-height: 23px; color: var(--gp-ink); white-space: nowrap; }
.gp-sc .box { left: 111.8px; top: 147.7px; width: 476.5px; height: 174.9px; border: 1px solid #fff; border-radius: 14.9px; background: rgba(255, 255, 255, 0.46); }
.gp-sc .box > * { position: absolute; margin: 0; font-family: var(--font-head); white-space: nowrap; }
.gp-sc .box .s { left: 29.1px; top: 31.5px; font-size: 18.4px; line-height: 22px; color: #565672; }
.gp-sc .box b { left: 28.1px; top: 65.3px; font-weight: 600; font-size: 24.9px; line-height: 30px; color: var(--gp-ink); }
.gp-sc .bar { left: 34.2px; top: 127.2px; width: 271.7px; height: 12px; border-radius: 6px; background: var(--gp-line); overflow: hidden; }
.gp-sc .bar i { position: absolute; left: 0; top: 0; height: 100%; width: 190.9px; border-radius: 6px; background: linear-gradient(0deg, #4a46d3, #6666dd); }
.gp-sc .circle { left: 394.2px; top: 87.2px; width: 156.4px; height: 156.4px; }
.gp-sc .circle img { position: absolute; left: -100px; top: -100px; width: 356.4px; max-width: none; }
.gp-sc .circle > * { position: absolute; margin: 0; font-family: var(--font-head); white-space: nowrap; }
.gp-sc .circle b { left: 44.4px; top: 32.7px; font-weight: 600; font-size: 57.1px; line-height: 68px; color: var(--gp-ink); }
.gp-sc .circle em { left: 84.4px; top: 63px; font-style: normal; font-weight: 500; font-size: 23.4px; line-height: 28px; color: #aaaab5; }
.gp-sc .circle span { left: 56.4px; top: 102.8px; font-size: 18.3px; line-height: 22px; color: #565672; }

/* ---------- Corps (texte x 432.7, 1160 px ; premier paragraphe y 1107.9) ---------- */
.gp-body { position: relative; z-index: 1; width: 1160px; margin: 0 0 0 calc(50% - 527.3px); padding-top: 177.8px; }
.gp-guide { position: absolute; left: -391.8px; top: 181px; bottom: 0; width: 210px; }
/* sous 1920 px, la colonne reste à 24 px du bord de la fenêtre au lieu de sortir de l’écran (50vw − 527.3 = bord du texte) */
.gp-guide { left: max(-391.8px, calc(24px - 50vw + 527.3px)); }
.gp-guide-in { position: sticky; top: 118px; }
.gp-guide-title { font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 28px; color: var(--gp-ink); }
.gp-guide ol { margin: 19.3px 0 0; padding: 0; list-style: none; }
.gp-guide li + li { margin-top: 10px; }
.gp-guide a { position: relative; display: flex; padding-left: 21px; font-family: var(--font-head); font-size: 16px; line-height: 20px; color: var(--gp-text); transition: color 0.25s ease; }
.gp-guide a:hover { color: var(--gp-ink); }
.gp-guide .n { flex: none; width: 23px; }
.gp-guide a[aria-current="true"] { color: var(--gp-violet); font-weight: 500; }
.gp-guide a[aria-current="true"]::before { content: ""; position: absolute; left: 1.4px; top: 4.5px; width: 7.1px; height: 10px; background: url(/assets/methodology/ic-guide-marker.svg) center / contain no-repeat; }

.gp-doc { max-width: 1146px; /* largeur des lignes de la maquette */ font-size: 18px; line-height: 28px; color: var(--gp-text); }
.gp-doc p, .gp-doc li { font-size: 18px; line-height: 28px; color: var(--gp-text); }
.gp-doc strong, .gp-doc b { font-weight: 500; color: var(--gp-ink); }
.gp-doc a { color: var(--gp-violet); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.gp-doc code { padding: 1px 6px; border-radius: 6px; background: #ededf9; font-size: 0.88em; color: var(--gp-ink); }
.gp-doc h2 { font-size: 38px; line-height: 45px; scroll-margin-top: 110px; }
.gp-doc h3 { font-size: 26px; line-height: 32px; }
.gp-doc h3 .n { color: var(--gp-violet); }
.gp-doc > * + h2 { margin-top: 51.5px; }
.gp-doc > h2 + * { margin-top: 24px; }
.gp-doc > * + h3 { margin-top: 40px; }
.gp-doc > h3 + * { margin-top: 12px; }
.gp-doc > p + p, .gp-doc > p + ul, .gp-doc > p + ol, .gp-doc > ol + p { margin-top: 28px; }
.gp-doc > ul + p { margin-top: 34px; }
.gp-doc > * + .gp-table-wrap { margin-top: 34.4px; }
.gp-doc > .gp-table-wrap + * { margin-top: 35.8px; }
.gp-doc > * + .gp-pair { margin-top: 37.2px; }
.gp-doc > .gp-pair + * { margin-top: 58.2px; }
.gp-doc > * + .gp-steps { margin-top: 38.4px; }
.gp-doc > .gp-steps + * { margin-top: 41.7px; }
.gp-doc > .gp-steps + h2 { margin-top: 70px; }
/* puces violettes (x 433.9, texte x 451.9) */
.gp-doc ul > li { position: relative; padding-left: 19.2px; }
.gp-doc ul > li + li { margin-top: 12px; }
.gp-doc ul > li::before { content: ""; position: absolute; left: 1.2px; top: 11.6px; width: 7.9px; height: 7.9px; border-radius: 50%; background: var(--gp-violet); }
/* liste numérotée simple (guide 2) */
.gp-ol { counter-reset: gp; }
.gp-ol > li { position: relative; padding-left: 34px; counter-increment: gp; }
.gp-ol > li + li { margin-top: 12px; }
.gp-ol > li::before { content: counter(gp) "."; position: absolute; left: 0; top: 0; font-family: var(--font-head); font-weight: 500; color: var(--gp-violet); }

/* ---- Tableau SEO / AI visibility (x 433.9, 1158.8 × 389.8 ; colonne AI sur fond #f6f6fb) ---- */
.gp-table-wrap { position: relative; width: 1158.8px; margin-left: 1.2px; padding: 0 44px; border: 1px solid var(--gp-line); border-radius: 15px; overflow: hidden; }
.gp-table-wrap::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 459.8px; background: #f6f6fb; }
.gp-table { position: relative; width: 100%; border-collapse: collapse; table-layout: fixed; }
.gp-table th:nth-child(1) { width: 272.8px; }
.gp-table th:nth-child(2) { width: 382.1px; }
.gp-table th, .gp-table td { padding: 18.5px 0 16.5px; text-align: left; vertical-align: top; font-size: 18px; line-height: 25px; color: var(--gp-text); }
.gp-table tr + tr td, .gp-table tbody tr:first-child td { border-top: 1px solid var(--gp-line); }
.gp-table th { padding: 35.4px 0 19.7px; font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 26px; color: var(--gp-ink); }
.gp-table th img { display: inline-block; margin: -2px 8.6px 0 -1.1px; vertical-align: middle; }
.gp-table th:nth-child(3), .gp-table td:nth-child(3) { padding-left: 42.3px; }
.gp-table td:nth-child(3) { font-weight: 500; color: var(--gp-ink); }
.gp-table tbody tr:last-child td { padding-bottom: 34.6px; }

/* ---- Cité / Mentionné (mêmes visuels que la méthodologie ; 559.5 × 299.8, 41 px d'écart) ---- */
.gp-pair { width: 1160px; display: grid; grid-template-columns: 559.5px 559.5px; gap: 41px; }
.gp-vis { position: relative; height: 299.8px; padding: 25px 0 0 28px; border: 1px solid #dfdfea; border-radius: 20.44px; }
.gp-vis-h { display: flex; align-items: center; margin-left: 1px; font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 26px; color: var(--gp-ink); }
.gp-vis-h img { margin-right: 19px; }
.gp .gp-vis-k { margin-top: 22px; font-size: 17px; line-height: 20px; color: var(--gp-text); }
.gp-vis-box { position: relative; width: 507px; height: 136px; margin-top: 10px; padding: 15px 0 0 25px; border-radius: 4px 13px 13px 13px; background: #ededf9; }
.gp-vis-box p { font-size: 20px; line-height: 28px; color: #474760; white-space: nowrap; }
.gp-vis-box p b { font-weight: 500; color: var(--gp-ink); }
.gp-vis-box .ul { position: relative; }
.gp-vis-box .ul img { position: absolute; left: 2px; top: 22px; width: 108px; max-width: none; }
.gp-vis .chip {
  position: absolute; left: 24.5px; bottom: 15.6px; display: inline-flex; align-items: center; gap: 10px;
  height: 32px; padding: 0 16px 0 14px; border: 1px solid #dfdfea; border-radius: 16px; background: #fff;
  font-weight: 500; font-size: 15px; line-height: 19px; color: var(--gp-ink);
}
.gp-vis .chip.ok { gap: 9px; padding-left: 16px; color: #13804f; }
.gp .gp-vis-c { margin-top: 13px; font-size: 18px; line-height: 28px; color: var(--gp-text); }

/* ---- Cartes numérotées 01, 02… (563.9 px de large, 32 px d'écart, fond #f6f6fb) ---- */
.gp-steps { width: 1160px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32.1px 32.2px; }
.gp-steps > li { position: relative; padding: 31px 46px 29.5px 91.7px; border-radius: 20.44px; background: #f6f6fb; }
.gp-steps .no { position: absolute; left: 37.1px; top: 31px; font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 26px; color: var(--gp-violet); }
.gp-steps b { display: block; font-family: var(--font-head); font-weight: 500; font-size: 22px; line-height: 26px; color: var(--gp-ink); }
.gp-steps li > span:last-child { display: block; margin-top: 8.5px; font-size: 18px; line-height: 26px; color: var(--gp-text); }

/* ---------- Autres guides (filet y 4035, titre y 4145, cartes y 4242.5) ---------- */
.gp-more { position: relative; z-index: 1; width: 1440px; margin: 88.7px 0 0 calc(50% - 720px); padding-top: 106.7px; border-top: 1px solid #dfdfea; }
.gp-more-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.gp-h2 { font-size: 38px; line-height: 45px; }
.gp-all { display: inline-flex; align-items: center; gap: 16.8px; height: 52px; padding: 0 29.2px 0 27.7px; border: 1px solid rgba(74, 70, 211, 0.5); border-radius: 10px; font-weight: 600; font-size: 16px; color: var(--gp-ink); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.gp-all .arrow { width: 13.2px; height: 9.4px; transition: translate 0.25s ease; }
.gp-all:hover { border-color: var(--gp-violet); background: var(--gp-violet); color: #fff; }
.gp-all:hover .arrow { translate: 3px 0; }
.gp-grid { display: grid; grid-template-columns: repeat(3, 432px); column-gap: 72px; row-gap: 56px; align-items: start; margin-top: 48.8px; }
.gp-card { display: block; color: inherit; }
.gp-card-img { display: block; position: relative; height: 304px; border-radius: 28px; }
.gp-card-img img { position: absolute; left: -1.16%; top: -1.71%; width: 102.32%; height: auto; max-width: none; transition: translate 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.gp-card:hover .gp-card-img img { translate: 0 -5px; }
.gp-meta { display: flex; align-items: center; gap: 15px; margin-top: 33.4px; font-family: var(--font-head); }
.gp-tag { display: inline-flex; align-items: center; height: 32.5px; padding: 0 17px; border: 1px solid rgba(74, 70, 211, 0.4); border-radius: 999px; font-weight: 500; font-size: 16px; line-height: 19px; color: var(--gp-violet); }
.gp-time { font-size: 16px; line-height: 19px; color: var(--gp-text); }
.gp-card-title { display: block; max-width: 408px; margin-top: 21px; font-family: var(--font-head); font-weight: 500; font-size: 24px; line-height: 32px; color: var(--gp-ink); transition: color 0.2s ease; }
.gp-card:hover .gp-card-title { color: var(--gp-violet); }
.gp-more + .site-cta { margin-top: 66.75px; }

/* ==========================================================================
   Animations (html.anim ; ?noanim les coupe — js/guide.js retire alors la classe anim)
   ========================================================================== */
@keyframes gpRise   { from { opacity: 0; transform: translateY(26px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes gpFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes gpWord   { from { transform: translateY(135%) rotate(4deg); } to { transform: none; } }
@keyframes gpPop    { 0% { opacity: 0; transform: scale(0.3); } 60% { opacity: 1; transform: scale(1.12); } 80% { transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } }
@keyframes gpBar    { from { width: 0; } }
@keyframes gpBoxIn  { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes gpFrameIn { from { opacity: 0; transform: translateY(40px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes gpFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.gp-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.gp-split .w > span { display: inline-block; }
.anim .gp-split .w > span { transform: translateY(135%); }

.anim .gp-hero-bg, .anim .gp-pill, .anim .gp-meta-top, .anim .gp-frame, .anim .gp-scene-bg, .anim .gp-sc .ic, .anim .gp-sc .t, .anim .gp-sc .box,
.anim .gp-sc .circle, .anim .gp-sc .box > *, .anim .gp-sc .circle > :not(img), .anim .gp-frame-img { opacity: 0; }
.anim .gp-ready .gp-hero-bg { animation: gpFade 1.2s ease both; }
.anim .gp-ready .gp-pill { animation: gpRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
.anim .gp-ready .gp-h1 .w > span { animation: gpWord 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.3s + var(--i) * 0.05s) both; }
.anim .gp-ready .gp-meta-top { animation: gpRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s both; }
.anim .gp-ready .gp-frame { animation: gpFrameIn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both; }
.anim .gp-ready .gp-frame-img { animation: gpRise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.1s both, gpFloat 6s ease-in-out 2.2s infinite; }
.anim .gp-ready .gp-scene-bg { animation: gpFade 0.9s ease 1.1s both; }
.anim .gp-ready .gp-sc .ic { animation: gpPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 1.25s both; }
.anim .gp-ready .gp-sc .t { animation: gpRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.4s both; }
.anim .gp-ready .gp-sc .box { animation: gpBoxIn 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.45s both; }
.anim .gp-ready .gp-sc .box .s { animation: gpFade 0.5s ease 1.7s both; }
.anim .gp-ready .gp-sc .box b { animation: gpRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 1.8s both; }
.anim .gp-ready .gp-sc .bar { animation: gpFade 0.4s ease 1.9s both; }
.anim .gp-ready .gp-sc .bar i { animation: gpBar 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 2s both; }
.anim .gp-ready .gp-sc .circle { animation: gpPop 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.6s both; }
.anim .gp-ready .gp-sc .circle > :not(img) { animation: gpFade 0.5s ease 1.9s both; }

/* corps : chaque bloc du texte, le sommaire et les cartes apparaissent à l'écran (.is-in posé par guide.js) */
.anim .gp-reveal, .anim .gp-guide-in, .anim .gp-grid li, .anim .gp-steps > li, .anim .gp-vis { opacity: 0; }
.anim .gp-reveal.is-in { animation: gpRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim .gp-steps.is-in > li, .anim .gp-pair.is-in .gp-vis { animation: gpRise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) calc(0.1s + var(--i) * 0.12s) both; }
.anim .gp-guide-in.is-in { animation: gpFade 0.8s ease 0.2s both; }
.anim .gp-more h2 .w > span { transform: translateY(135%); }
.anim .gp-more.is-in h2 .w > span { animation: gpWord 0.8s cubic-bezier(0.2, 0.75, 0.2, 1) calc(0.05s + var(--i) * 0.05s) both; }
.anim .gp-grid li.is-in { animation: gpRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 0.12s) both; }

.no-anim .gp-hero-bg, .no-anim .gp-pill, .no-anim .gp-meta-top, .no-anim .gp-frame, .no-anim .gp-scene-bg, .no-anim .gp-sc *, .no-anim .gp-frame-img,
.no-anim .gp-reveal, .no-anim .gp-guide-in, .no-anim .gp-grid li, .no-anim .gp-steps > li, .no-anim .gp-vis { opacity: 1 !important; animation: none !important; }
.no-anim .gp-split .w > span { transform: none !important; animation: none !important; }

/* ==========================================================================
   Écrans plus étroits (--kf = réduction du cadre du hero, posée par js/guide.js)
   ========================================================================== */
@media (max-width: 1599px) { .gp-guide { display: none; } }
@media (max-width: 1499px) {
  .gp-more { width: auto; margin-left: 24px; margin-right: 24px; }
  .gp-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 40px; row-gap: 44px; }
  .gp-card-img { height: auto; aspect-ratio: 432 / 304; }
  .gp-card-title { max-width: none; }
}
@media (max-width: 1313px) {
  .gp-frame { zoom: var(--kf, 1); }
}
@media (max-width: 1299px) {
  .gp-body { width: auto; max-width: 1160px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .gp-pair { width: auto; grid-template-columns: 1fr 1fr; gap: 24px; }
  .gp-steps, .gp-table-wrap { width: auto; margin-left: 0; }
  .gp-vis { height: auto; padding: 22px 20px 22px; }
  .gp-vis-box { width: 100%; height: auto; padding: 14px 16px 16px; }
  .gp-vis-box p { white-space: normal; font-size: 18px; line-height: 27px; }
  .gp-vis .chip { position: static; display: inline-flex; margin-top: 12px; }
  .gp-vis-box .ul img { top: 20px; }
}
@media (max-width: 1099px) {
  .gp-hero { padding-top: 150px; }
  .gp .gp-h1 { max-width: none; padding: 0 20px; font-size: clamp(32px, 5.4vw, 52px); line-height: 1.24; }
  .gp-body { padding-top: 96px; }
  .gp-doc h2, .gp-h2 { font-size: clamp(28px, 4.4vw, 38px); line-height: 1.2; }
  .gp-doc > * + h2 { margin-top: 48px; }
  /* tableau : défilement horizontal, fond de la colonne AI porté par les cellules */
  .gp-table-wrap { padding: 0; overflow-x: auto; }
  .gp-table-wrap::before { display: none; }
  .gp-table { min-width: 680px; }
  .gp-table th:nth-child(1) { width: 32%; }
  .gp-table th:nth-child(2) { width: 30%; }
  .gp-table th:first-child, .gp-table td:first-child { padding-left: 24px; }
  .gp-table th:nth-child(3), .gp-table td:nth-child(3) { padding-left: 24px; padding-right: 24px; background: #f6f6fb; }
  .gp-more { margin-top: 80px; padding-top: 80px; }
}
@media (max-width: 799px) {
  .gp-pair, .gp-steps { grid-template-columns: 1fr; }
  .gp-steps > li { padding: 24px 22px 26px 72px; }
  .gp-steps .no { left: 24px; top: 24px; }
}
@media (max-width: 699px) {
  .gp-body { padding-left: 16px; padding-right: 16px; }
  .gp-more { margin-left: 16px; margin-right: 16px; }
  .gp-more-head { flex-wrap: wrap; }
  .gp-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .gp-doc p, .gp-doc li, .gp-steps li > span:last-child { font-size: 16px; line-height: 26px; }
  .gp-doc ul > li::before { top: 10.6px; }
  .gp-card-title { font-size: 22px; line-height: 30px; }
}