body.gd-directory-page { background:#fff; --cream:#fff; --cream-deep:#edf2fa; }
.gd-directory { max-width: 1120px; padding-bottom: 80px; }
.gd-directory .gd-hero { padding: 36px 0 32px; margin-bottom: 36px; }
.gd-directory .gd-breadcrumb { margin-bottom: 26px; font-size: 14px; }
.gd-directory h1 { font-size: 46px; line-height: 1.14; letter-spacing: -.025em; text-wrap: initial; }
.gd-directory .gd-lede { font-size: 17px; margin-top: 18px; color:var(--navy); }
.gd-directory-group { grid-template-columns: 256px minmax(0,1fr); gap: 0; margin-bottom: 0; align-items: stretch; border: 1px solid #dfe5ef; border-radius: 16px; overflow: hidden; background: #fff; }
.gd-group-divider { border: 0; border-top: 1px solid var(--gd-rule); margin: 32px 0; }
.gd-group-intro { display: flex; flex-direction: column; padding: 28px 28px 0; background: #edf2fa; border-right: 1px solid #dfe5ef; }
.gd-group-count { display: block; width: fit-content; margin-bottom: 18px; padding:6px 10px; border:1px solid rgba(30,61,154,.12); border-radius:6px; background:rgba(255,255,255,.8); font-size: 11px; line-height: 1; color: #1e3d9a; }
.gd-group-intro h2 { font-size: 32px; line-height: 1.16; margin: 0 0 12px; letter-spacing: -.025em; }
.gd-group-intro p { max-width: 190px; font-size: 14px; line-height: 1.6; color: var(--navy); margin: 0; }
.gd-group-art { position: relative; flex: 1; min-height: 128px; max-height:210px; margin: 20px -12px 10px; }
.gd-group-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gd-group-compact .gd-group-intro { padding-bottom: 26px; }
.gd-group-compact .gd-group-intro h2 { font-size: 28px; }
.gd-group-compact .gd-group-count { margin-bottom: 12px; }
.gd-directory-list { border: 0; border-radius: 0; background: #fff; display: grid; }
.gd-directory-list a { position: relative; grid-template-columns: 44px minmax(0,1fr) auto 32px; gap: 16px; min-height: 116px; padding: 26px 28px; border-bottom: 0; transition: background-color 160ms cubic-bezier(.23,1,.32,1); }
.gd-directory-list a:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 88px; right: 28px; border-bottom: 1px solid var(--gd-rule); pointer-events: none; }
.gd-directory-list a:focus-visible { outline-offset: -4px; border-radius: 10px; }
.gd-directory-list h3 { font-size: 18px; font-weight: 500; line-height: 1.4; margin-bottom: 4px; }
.gd-directory-list p { font-size: 14px; line-height: 1.5; }
.gd-product-icon { width: 44px; height: 44px; display: grid; place-items: center; background: #edf2fa; border: 1px solid rgba(30,61,154,.1); border-radius: 11px; color: #1e3d9a; transition:background-color 160ms cubic-bezier(.23,1,.32,1),color 160ms cubic-bezier(.23,1,.32,1); }
.gd-product-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gd-time { color: var(--navy-soft); font-size: 12px; white-space: nowrap; padding-left: 6px; font-variant-numeric:tabular-nums; }
.gd-directory-arrow { display:grid; place-items:center; width:32px; height:32px; border:1px solid #dfe5ef; border-radius:50%; font-family: 'General Sans', sans-serif; font-size: 19px; line-height:1; color: var(--navy); transition:background-color 160ms cubic-bezier(.23,1,.32,1),border-color 160ms cubic-bezier(.23,1,.32,1),color 160ms cubic-bezier(.23,1,.32,1); }
.gd-directory-list a:active { background: #edf2fa; }
@media (hover:hover) and (pointer:fine) {
 .gd-directory-list a:hover { background: #f7f9fd; }
 .gd-directory-list a:hover .gd-product-icon, .gd-directory-list a:hover .gd-directory-arrow { background:#1e3d9a; border-color:#1e3d9a; color:#fff; }
}
@media (max-width:900px) {
 .gd-directory-group { display: grid; grid-template-columns: 208px minmax(0,1fr); gap: 0; }
 .gd-group-intro { padding: 24px 22px 0; }
 .gd-group-intro h2 { font-size: 29px; }
 .gd-directory-list a { grid-template-columns: 40px minmax(0,1fr) 32px; gap: 14px; padding: 21px; }
 .gd-directory-list a:not(:last-child)::after { left: 75px; right: 21px; }
 .gd-time { display: none; }
 .gd-product-icon { width:40px; height:40px; }
}
@media (max-width:600px) {
 .gd-directory { padding-left:20px; padding-right:20px; }
 .gd-directory h1 { font-size:36px; }
 .gd-directory .gd-hero { padding:28px 0; margin-bottom:28px; }
 .gd-directory .gd-lede { font-size:16px; max-width:300px; }
 .gd-directory-group { display:block; margin-bottom:0; }
 .gd-group-divider { margin:24px 0; }
 .gd-group-intro { position:relative; padding:22px 112px 22px 20px; border-right:0; border-bottom:1px solid var(--gd-rule); min-height:148px; }
 .gd-group-count, .gd-group-compact .gd-group-count { margin-bottom:12px; }
 .gd-group-intro h2 { font-size:28px; margin-bottom:8px; }
 .gd-group-intro p { max-width:210px; font-size:14px; }
 .gd-group-art { position:absolute; right:0; top:0; bottom:0; width:94px; min-height:0; margin:0; }
 .gd-group-compact .gd-group-intro { padding:22px 20px; min-height:0; }
 .gd-directory-list a { padding:20px 16px; gap:12px; min-height:102px; }
 .gd-directory-list a:not(:last-child)::after { left:68px; right:16px; }
 .gd-directory-list h3 { font-size:17px; }
 .gd-directory-list p { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
.gd-directory-list a, .gd-directory-arrow, .gd-product-icon { transition:none; }
 .gd-directory-list a:hover .gd-directory-arrow { transform:none; }
}


.doc-product-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:18px; padding:26px 28px; position:relative; }
.doc-product-row + .doc-product-row { border-top:1px solid var(--gd-rule); }
.doc-product-row h3 { font:500 18px/1.4 'General Sans',sans-serif; margin:0 0 4px; }
.doc-product-row p { font-size:14px; color:var(--navy-soft); line-height:1.5; margin:0; }
.doc-row-links { display:flex; gap:18px; align-items:center; }
.doc-row-links a { display:inline-flex; padding:10px 0; color:#1e3d9a; font-size:14px; white-space:nowrap; text-decoration:underline; text-underline-offset:4px; }
.doc-row-links a:focus-visible { outline:2px solid #1e3d9a; outline-offset:4px; }
.doc-using { margin-top:48px; }
.doc-using > h2 { font:400 30px/1.2 Zodiak,serif; margin-bottom:24px; }
.doc-using-list { display:grid; grid-template-columns:1fr 1fr; border:1px solid #dfe5ef; border-radius:14px; overflow:hidden; }
.doc-using-list a { padding:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid #dfe5ef; font-size:16px; }
.doc-using-list a:nth-child(odd) { border-right:1px solid #dfe5ef; }
.doc-using-list a:nth-last-child(-n+2) { border-bottom:0; }
.doc-directory-tail { margin-top:28px; font-size:14px; }
.doc-directory-tail a { text-decoration:underline; text-underline-offset:4px; }
@media(hover:hover) and (pointer:fine) { .doc-using-list a:hover { background:#f7f9fd; } }
@media(max-width:900px) {
 .gd-directory-list a { grid-template-columns:40px minmax(0,1fr) 32px; }
 .gd-directory-list .gd-time { display:block; grid-column:2; padding:0; }
 .gd-directory-list .gd-directory-arrow { grid-column:3; grid-row:1 / 3; }
 .doc-product-row { grid-template-columns:40px minmax(0,1fr); padding:24px 20px; gap:12px 16px; }
 .doc-row-links { grid-column:2; }
}
@media(max-width:600px) {
 .doc-using-list { grid-template-columns:1fr; }
 .doc-using-list a:nth-child(odd) { border-right:0; }
 .doc-using-list a:nth-last-child(2) { border-bottom:1px solid #dfe5ef; }
 .doc-using-list a { padding:20px; }
}
/* phones: each product link is its own full-width row */
@media(max-width:760px) {
 .doc-product-row .doc-row-links, .doc-hub-group .doc-product-row .doc-row-links { display:flex; flex-direction:column; align-items:stretch; gap:0; margin-top:8px; }
 .doc-row-links a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:44px; padding:10px 0; border-top:1px solid var(--gd-rule); font-size:15px; white-space:normal; text-decoration:none; }
 .doc-row-links a::after { content:'↗'; flex:none; }
}