/* Guides (/guides/...) and the Guides block on the tool pages. Uses the redesign tokens from the workspace stylesheet and
   the crumbs, eyebrow and button classes of the gallery stylesheet; written by tools/guides/build.py's templates. */
.gd{padding-top:6px}
.gd-head{max-width:820px;padding:18px 0 8px}
.gd-head h1{font:400 clamp(32px,4.4vw,50px)/1.1 var(--display);letter-spacing:-.4px;margin:8px 0 14px;color:var(--ink)}
.gd-meta{margin:14px 0 0;font-size:14px;color:var(--muted)}
.gd-body{max-width:820px;font-size:17px;line-height:1.7;color:var(--ink2)}
.gd-body h2{margin:44px 0 12px}
.gd-body h3{font:800 19px/1.35 var(--sans);color:var(--ink);margin:28px 0 8px}
.gd-body p,.gd-body ul,.gd-body ol{margin:0 0 16px}
.gd-body li{margin:0 0 8px}
.gd-body a{color:var(--pen-dk);text-decoration-thickness:1px;text-underline-offset:2px}
.gd-body strong{color:var(--ink)}
.gd-body code{font-size:.88em;background:var(--wash);padding:1px 5px;border-radius:5px}
.gd-body .small{font-size:14px;line-height:1.55;color:var(--muted)}
.gd-body .muted{color:var(--muted);font-weight:400}
.gd-body .steps{padding-left:22px}
.gd-body .steps li::marker{font-weight:800;color:var(--pen)}
.gd-body .checks{list-style:none;padding:0}
.gd-body .checks li{position:relative;padding-left:30px}
.gd-body .checks li::before{content:"";position:absolute;left:2px;top:.42em;width:16px;height:16px;border-radius:50%;background:var(--leaf);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E") center/contain no-repeat}
.gd-body .checks li::after{content:"";position:absolute;left:7px;top:calc(.42em + 4px);width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.gd-body .table-wrap{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.gd-body table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.gd-body th,.gd-body td{text-align:left;vertical-align:top;padding:10px 14px;border-bottom:1px solid var(--line)}
.gd-body thead th{background:var(--wash);color:var(--ink);font-weight:800;font-size:14px}
.gd-body tbody tr:last-child td{border-bottom:0}
.gd-body td.num{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.gd-body table.compare td:first-child{font-weight:700;color:var(--ink)}
.gd-body .method{font-size:15px;line-height:1.6;background:var(--wash);border-radius:14px;padding:14px 18px;margin-top:28px}
.gd-fig{margin:22px 0 26px}
.gd-fig img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:14px;background:#fff;margin:0 auto}
.gd-fig figcaption,.gd-grid>figcaption{font-size:14px;line-height:1.5;color:var(--muted);margin-top:10px}
.gd-grid{margin:22px 0 26px}
.gd-grid>div{display:grid;gap:10px}
.gd-grid-4>div{grid-template-columns:repeat(4,minmax(0,1fr))}
.gd-grid-6>div{grid-template-columns:repeat(6,minmax(0,1fr))}
.gd-grid figure{margin:0}
.gd-grid figure img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.gd-grid figure figcaption{font:700 12.5px/1.35 var(--sans);color:var(--ink2);margin-top:6px}
.gd-cta{margin:30px 0}
.gd-sources{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;line-height:1.55}
.gd-sources h2{font:800 15px/1.2 var(--sans)!important;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)!important;margin:0 0 10px!important}
.gd-sources ol{padding-left:20px}
.gd-related{margin-top:48px}
.gd-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.gd-card{display:flex;flex-direction:column;gap:6px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink)}
.gd-card:hover{border-color:var(--pen)}
.gd-thumb{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--wash);margin-bottom:6px}
.gd-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.gd-k{font:800 12px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--pen-dk)}
.gd-card b{font:400 20px/1.25 var(--display)}
.gd-card small{font-size:14px;line-height:1.5;color:var(--muted)}
.gd-hub{padding-bottom:24px}
/* the Guides block on the tool pages */
.gd-tool-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.gd-tool-list a{display:flex;flex-direction:column;gap:6px;height:100%;box-sizing:border-box;padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}
.gd-tool-list a:hover{border-color:var(--pen)}
.gd-tool-list b{font-size:16px;line-height:1.35}
.gd-tool-list span{font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){
  .gd-cards,.gd-tool-list{grid-template-columns:1fr 1fr}
  .gd-grid-6>div{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:600px){
  .gd-body{font-size:16px}
  .gd-cards,.gd-tool-list{grid-template-columns:1fr}
  .gd-grid-4>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gd-body th,.gd-body td{padding:8px 10px}
}