/* Schema markup generator and website grader. Loaded after test.css, scoped under .gsg / .gwg inside .glt. */
.gsg-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; text-align: left; }
.gsg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 2.5em auto 1.5rem; padding: 0; }
.gsg-tabs button { padding: .55em 1.1em; border: 0; border-radius: 100em; background: transparent; box-shadow: var(--glt-glass); color: var(--glt-soft); font: inherit; font-size: 15px; cursor: pointer; }
.gsg-tabs button[aria-selected="true"] { background-image: var(--glt-grain), var(--glt-gradient); color: #fff; }
.gsg-tabs button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gsg-panel { padding: 1.5rem; border-radius: 1rem; box-shadow: var(--glt-glass); }
.glt .gsg-type-note { margin-bottom: 1.25rem; padding: .85em 1em; border-radius: .6rem; background-image: var(--glt-gradient-15); font-size: 14px; color: var(--glt-soft); }
.gsg-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1rem; }
.gsg-field, .gsg-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gsg-field.is-wide, .gsg-rows.is-wide { grid-column: 1 / -1; }
.gsg-label { font-size: 13px; font-weight: 500; color: #fff; }
.gsg-input { width: 100%; min-width: 0; margin: 0; padding: .65em .8em; border: 1px solid var(--glt-line); border-radius: .6rem; background: #ffffff0a; color: #fff; font: inherit; font-size: 15px; color-scheme: dark; }
.gsg-input::placeholder { color: #7d7d7d; }
.gsg-input:focus { outline: 0; border-color: #fff; }
select.gsg-input { appearance: auto; }
textarea.gsg-input { resize: vertical; min-height: 4.5em; }
.gsg-rows { margin: 0; padding: 0; border: 0; min-width: 0; }
.gsg-rows legend { margin-bottom: 8px; padding: 0; }
.gsg-row-list { display: grid; gap: .75rem; }
.gsg-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .9rem; border-radius: .8rem; background: #ffffff08; }
.gsg-row-num { padding-top: .7em; font-size: 13px; color: var(--glt-accent); font-variant-numeric: tabular-nums; }
.gsg-row-cells { display: grid; gap: .6rem; min-width: 0; }
.gsg-del, .gsg-add { border: 0; background: none; color: var(--glt-text); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; padding: .7em 0; }
.gsg-add { margin-top: .75rem; color: #fff; text-decoration: none; padding: .5em 1em; border-radius: 100em; box-shadow: var(--glt-glass); }
.gsg-days { display: flex; flex-wrap: wrap; gap: 6px; }
.gsg-day { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100em; box-shadow: var(--glt-glass); font-size: 13px; color: var(--glt-soft); cursor: pointer; }
.gsg-day input { accent-color: var(--glt-main); margin: 0; }
.gsg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gsg-out { position: sticky; top: 6rem; display: flex; flex-direction: column; gap: .9rem; }
.gsg-out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.gsg-out-head h2 { font-size: 20px; }
.gsg-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--glt-soft); cursor: pointer; }
.gsg-toggle input { accent-color: var(--glt-main); margin: 0; }
.gsg-code { margin: 0; max-height: 30rem; overflow: auto; padding: 1rem; border-radius: .8rem; background: #0b0b14; border: 1px solid var(--glt-line); color: #d7d9ff; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 2; }
.gsg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.glt .gsg-copy { font-size: 18px; }
.gsg-actions a { font-size: 14px; color: var(--glt-soft); }
.gsg-warn { padding: .9em 1em; border-radius: .6rem; background: #ff8a0014; font-size: 14px; color: var(--glt-soft); }
.gsg-warn.is-ok { background: #2cd99b14; }
.glt .gsg-warn-title { font-weight: 500; color: #fff; }
.gsg-warn ul { margin: .4em 0 0; padding-left: 1.1em; }
.gsg-warn li { margin-top: .2em; }
.gsg-private { font-size: 13px; color: var(--glt-text); }

/* Long-form copy under the tools */
.gsg-copytext { padding: 6em 0 0; text-align: left; }
.gsg-copytext .glt-wrap > * + * { margin-top: 1rem; }
.gsg-copytext h2 { margin-top: 3.5rem !important; font-size: clamp(28px, 3.2vw, 40px); }
.gsg-copytext h3 { margin-top: 1.75rem !important; font-size: 20px; }
.gsg-copytext p, .gsg-copytext li { max-width: 46rem; font-size: 17px; color: var(--glt-soft); }
.gsg-copytext ul, .gsg-copytext ol { padding-left: 1.2em; }
.gsg-copytext li + li { margin-top: .4em; }
.gsg-copytext a { color: #fff; }
.gsg-copytext code { padding: 1px 6px; border-radius: 4px; background: #ffffff14; color: #fff; font-size: .9em; }
.gsg-table { width: 100%; max-width: 52rem; border-collapse: collapse; font-size: 15px; }
.gsg-tablewrap { overflow-x: auto; }
.gsg-table th, .gsg-table td { padding: .7em .8em; border-bottom: 1px solid var(--glt-line); text-align: left; vertical-align: top; color: var(--glt-soft); }
.gsg-table th { color: #fff; font-weight: 500; }
.gsg-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; max-width: none !important; margin-top: 3.5rem !important; padding: 1.75rem 1.5rem; border-radius: 1rem; background-image: var(--glt-grain), var(--glt-gradient); color: #fff; }
.gsg-cta h2 { margin: 0 !important; font-size: clamp(24px, 2.6vw, 32px); }
.gsg-cta p { margin-top: .4em; color: #ffffffd9; }
.gsg-cta .glt-btn { background-color: #fff; color: var(--glt-main); box-shadow: none; font-size: 18px; }
.gsg-cta .glt-btn::after { display: none; }
.gsg-faq { padding-bottom: 9em; }

/* Website grader: built from GleamCheck's result pieces in test.css, with two score boxes and one email gate. */
.gwg-results { padding: 2em 0 0; outline: none; }
.gwg-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.gwg-scorebox { min-height: 22rem; }
.glt .gwg-kicker { margin: 0 0 .75rem; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--glt-accent); }
.glt .gwg-kicker.is-dark { color: #000; opacity: .7; }
.glt .gwg-mood { max-width: 26rem; font-size: 15px; color: #000; }
.gwg-pending { display: flex; flex-direction: column; gap: 1rem; min-height: 22rem; padding: 1.25rem; border-radius: 1rem; }
.gwg-pending .glt-steps { max-width: none; margin: 0; padding: 0; box-shadow: none; gap: 1rem; }
.gwg-pending .glt-step { font-size: 16px; }
.glt .gwg-steps-note { margin-top: 1.25rem; font-size: 14px; color: var(--glt-text); }
.glt .gwg-msg-title { font-size: clamp(22px, 2.2vw, 28px); color: #fff; }
.glt .gwg-msg-text { color: var(--glt-soft); overflow-wrap: anywhere; }
.gwg-pending .glt-pill-dark { align-self: flex-start; margin: 0; }
.gwg-wait { display: flex; align-items: center; gap: .75rem; color: var(--glt-soft); }
.gwg-wait::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--glt-line); border-top-color: var(--glt-accent); border-radius: 50%; animation: glt-spin .9s linear infinite; }
.gwg-section-head { margin-bottom: 1.25rem; }
.glt .gwg-section-head .glt-section-lede { max-width: 46rem; margin-bottom: 0; }
.gwg-panel { border-radius: 1rem; }
.glt .gwg-panel .glt-verdict { margin-top: .25rem; }
.glt .gwg-sub-h { margin: 2.5rem 0 .25rem; font-size: clamp(22px, 2.2vw, 28px); }
.gwg-block:empty { display: none; }
.gwg-sub { display: block; font-size: 12px; color: var(--glt-text); }
.gwg-cat { margin-top: 2.5rem; }
.gwg-cat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: .25rem; }
.glt .gwg-cat-head h3 { font-size: clamp(22px, 2.2vw, 28px); }
.gwg-cat-score { font-family: Jost, Arial, sans-serif; font-weight: 900; font-size: 28px; line-height: 1; color: var(--glt-fail); }
.gwg-cat-score.is-good { color: var(--glt-pass); }
.gwg-cat-score.is-okay { color: var(--glt-part); }
.gwg-cat-score.is-na { font-family: inherit; font-weight: 400; font-size: 14px; color: var(--glt-text); }
.glt .gwg-cat-q { margin-bottom: 1rem; color: var(--glt-text); }
.glt .gwg-cat-note { margin: -.5rem 0 1rem; font-size: 14px; color: var(--glt-text); }
.glt .gwg-check-why { margin-top: .5em; font-size: 14px; color: var(--glt-text); }
.gwg-more { margin-top: .75rem; }
.gwg-more summary { cursor: pointer; padding: .5em 0; font-size: 15px; font-weight: 500; color: #fff; }
.gwg-more summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gwg-more .glt-findings { margin-top: .5rem; }
.gwg-section .glt-shots { padding-top: 2em; }

@media (max-width: 991px) {
  .gsg-app, .gwg-scores { grid-template-columns: minmax(0, 1fr); }
  .gwg-scorebox, .gwg-pending { min-height: 0; }
  .gsg-out { position: static; }
}
@media (max-width: 767px) {
  .gsg-form { grid-template-columns: minmax(0, 1fr); }
  .gsg-panel { padding: 1rem; }
  .gsg-row { grid-template-columns: minmax(0, 1fr); }
  .gsg-row-num { padding-top: 0; }
  .gsg-cta { grid-template-columns: minmax(0, 1fr); }
}

/* Website grader: "Why two grades" and "How the grades work", as cards rather than long copy. */
.glt .gwg-why { padding: 9em 0 0; font-size: 16px; text-align: left; }
.gwg-why-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: 4rem; }
.gwg-why-head + .gwg-aud, .gwg-why-head + .gwg-how { margin-top: 0; }
.gwg-aud + .gwg-why-head { margin-top: 9em; }
.glt .gwg-why-lede { font-size: 18px; color: var(--glt-soft); }
.gwg-aud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.gwg-aud-card { display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; min-height: 22rem; padding: 2rem; border-radius: 1rem; }
.gwg-aud-card.is-grad { background-image: var(--glt-grain), var(--glt-gradient); color: #fff; }
.gwg-aud-num { font-size: 15px; color: var(--glt-soft); }
.glt .gwg-aud-card h3 { margin-bottom: .5rem; font-size: clamp(28px, 3vw, 40px); color: #fff; }
.glt .gwg-aud-card p { max-width: 30rem; font-size: 17px; color: var(--glt-soft); }
.glt .gwg-aud-card.is-grad p { color: #ffffffe6; }
.gwg-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.gwg-how-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; border-radius: 1rem; }
.glt .gwg-how-card .gwg-kicker { margin: 0; }
.glt .gwg-how-card h3 { font-size: clamp(22px, 2.2vw, 28px); color: #fff; }
.glt .gwg-how-card p { font-size: 16px; color: var(--glt-text); }
.gwg-how-card a, .gwg-how-foot a { color: #fff; }
.gwg-bands { display: grid; gap: 0; margin: auto 0 0; padding: 1rem 0 0; list-style: none; }
.gwg-bands li { display: grid; grid-template-columns: 10px 7.5rem minmax(0, 1fr); align-items: center; gap: .875rem; padding: .75rem 0; border-top: 1px solid var(--glt-line); font-size: 15px; color: var(--glt-soft); }
.gwg-bands b { font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; }
.gwg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--glt-fail); }
.gwg-dot.is-good { background: var(--glt-pass); }
.gwg-dot.is-okay { background: var(--glt-part); }
.gwg-how-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.gwg-how-foot p { padding: 1.25rem 2rem; border-radius: 1rem; background-image: var(--glt-gradient-15); box-shadow: var(--glt-glass); color: var(--glt-soft); }
.gwg-how-foot b { font-weight: 500; color: #fff; }
.gwg-close { padding-top: 5em; }
@media (max-width: 991px) {
  .gwg-why-head { grid-template-columns: minmax(0, 1fr); }
  .gwg-how, .gwg-how-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .glt .gwg-why { padding-top: 5em; }
  .gwg-why-head { margin-bottom: 2.5rem; }
  .gwg-aud-card, .gwg-how-card { padding: 1.5rem; }
  .gwg-how-foot p { padding: 1rem 1.25rem; }
  .gwg-close { padding-top: 3em; }
  .gwg-aud { grid-template-columns: minmax(0, 1fr); }
  .gwg-aud-card { min-height: 0; gap: 2.5rem; }
  .gwg-aud + .gwg-why-head { margin-top: 5em; }
  .glt .gwg-why-lede { font-size: 16px; }
  .gwg-bands li { grid-template-columns: 10px 6.5rem minmax(0, 1fr); font-size: 14px; }
}

/* Schema generator: the sections under the tool, as cards in the same system as the website grader. */
.gsg-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.gsg-type-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; border-radius: 1rem; }
.gsg-type-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 26px; }
.gsg-type-tag { padding: 4px 10px; border-radius: 100px; background: #ff8a001f; color: var(--glt-part); font-size: 12px; font-weight: 500; white-space: nowrap; }
.glt .gsg-type-card h3 { margin-top: 1.5rem; font-size: clamp(22px, 2.2vw, 28px); color: #fff; }
.gsg-type-facts { margin: 0; }
.gsg-type-facts > div { padding: .75rem 0; border-top: 1px solid var(--glt-line); }
.gsg-type-facts dt { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--glt-accent); }
.gsg-type-facts dd { margin: .3rem 0 0; font-size: 15px; color: var(--glt-soft); }
.gsg-open { align-self: flex-start; margin-top: auto; padding: .6em 1.2em; border: 0; border-radius: 100em; background: transparent; box-shadow: var(--glt-glass); color: #fff; font: inherit; font-size: 15px; cursor: pointer; transition: background-color .2s; }
.gsg-open:hover { background-color: #000dff; }
.gsg-open:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gsg-types + .gsg-callout { margin-top: 6em; }
.gsg-callout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 4rem; align-items: start; padding: 2.5rem; border-radius: 1rem; background-image: var(--glt-grain), var(--glt-gradient); color: #fff; }
.glt .gsg-callout .glt-h2 { font-size: clamp(32px, 3.6vw, 48px); color: #fff; }
.glt .gwg-kicker.is-light { color: #ffffffcc; }
.glt .gsg-callout-body p { font-size: 17px; color: #ffffffe6; }
.glt .gsg-callout-body p + p { margin-top: 1rem; }
.gsg-callout-body b { font-weight: 500; color: #fff; }
.gsg-callout + .gwg-why-head, .gsg-platforms + .gwg-why-head { margin-top: 9em; }
.gsg-platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.glt .gsg-platforms h3 { margin-top: 2.5rem; }
.gsg-points { display: grid; margin: .5rem 0 0; padding: 0; list-style: none; }
.gsg-points li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: .875rem; align-items: start; padding: .875rem 0; border-top: 1px solid var(--glt-line); font-size: 16px; color: var(--glt-soft); }
.gsg-points .gwg-dot { margin-top: .45em; }
.gwg-dot.is-none { background: var(--glt-text); }
@media (max-width: 991px) {
  .gsg-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gsg-callout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .gsg-types, .gsg-platforms { grid-template-columns: minmax(0, 1fr); }
  .gsg-type-card { padding: 1.5rem; }
  .gsg-types + .gsg-callout { margin-top: 4em; }
  .gsg-callout { padding: 1.5rem; }
  .gsg-callout + .gwg-why-head, .gsg-platforms + .gwg-why-head { margin-top: 5em; }
  .glt .gsg-platforms h3 { margin-top: 1.5rem; }
}

/* The sitewide FAQ section, white, as on the case studies. Layout and type come from the site's own classes;
   these only set the colours a dark tool page would otherwise pass down, and the nav colours over white. */
.gwg-close { padding-bottom: 9em; }
.gtool-faq { background-color: #fff; }
.gtool-faq .heading-3 { color: #000; }
.gtool-faq .faq-top .paragraph-l, .gtool-faq .faq-bottom p { color: #454745; }
.gtool-faq .faq-bottom p { margin: 0; }
.gtool-faq .faq-top:focus-visible { outline: 2px solid #000dff; outline-offset: 4px; }
html.gtool-nav-dark [invert="text"] { color: #000 !important; }
html.gtool-nav-dark [invert="bg"] { background-color: #000 !important; color: #fff !important; border-color: #000 !important; }
html.gtool-nav-dark .new_nav.glass, html.gtool-nav-dark .new_nav-cta.glass { border-color: hsl(0, 0%, 67%) !important; }
@media (max-width: 767px) { .gwg-close { padding-bottom: 5em; } }
.gtool-faq { padding-left: 0; padding-right: 0; font-size: 16px; }