/* ==========================================================================
   goodthings.css  v1.0 (9 Sep 2026)

   The Goodthings brand as a stylesheet an agent can link and not read.
   Pair it with design.md in the same folder; that file is the public API and
   the judgment layer. This file is the enforcement layer.

   Sources, in priority order:
     1. Figma "Goodthings - Brand Library", page "Goodthings Brand Guide 2026
        (Working)", file JAhmpXFW6EieFuCAd2LfgB (Aaron, updated 5/12/26).
        Palette, type roles, usage rules, voice.
     2. goodthings.io production Webflow site 6822634d4a56d5f9cae5ef2c:
        variable collections, Adobe Fonts kit ofq2lxn, and the 2026 service
        pages (gtc-* classes) for control sizes and layout widths.
     3. The locked estimate house format (Dev/gt-estimates/public/estimate.css
        and the gt-estimate skill template) for document primitives.

   Two token tiers. The raw tier (--_gt-*) is private: page CSS never reads it.
   The semantic tier (--gt-*) is the only thing a page may consume. Every
   class is prefixed gt-. Page-local layout goes in gt-x-* classes and nothing
   else. See design.md for the closed vocabulary.

   Scope: apply .gt to <body> or to one wrapper. Tokens are declared at zero
   specificity so a host project can override them cleanly.
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. Fonts
   Adobe Fonts web project "Goodthings", kit wyz3egt, on Dylan's Adobe ID
   (created 9/9/26). It carries degular 400, 400 italic and 500, and lust-text
   400, 400 italic and 500 (plus 300 italic and 700 that nothing here requests;
   the brand guide forbids Lust Text Light). Adobe web projects work on any
   site the account manages, so there is no domain list to maintain. Under a
   Content-Security-Policy the host must allow use.typekit.net for styles and
   fonts and p.typekit.net for the kit's beacon. Where the kit cannot load, the
   fallbacks are the approved alternates from the brand guide (IBM Plex Sans
   for Google, Trebuchet MS and Georgia for Microsoft), so the page is still
   on brand. goodthings.io keeps its own kit (ofq2lxn); this one is for
   everything GT builds outside Webflow.
   -------------------------------------------------------------------------- */
@import url("https://use.typekit.net/wyz3egt.css");


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:where(.gt) {
  /* Raw palette: the six colors on the Color page of the brand guide. Private. */
  --_gt-blue:        #486CEB;   /* Good Blue */
  --_gt-offwhite:    #FFFEFA;   /* Off White */
  --_gt-black:       #000000;   /* Black */
  --_gt-gray-dark:   #989898;   /* Dark Gray */
  --_gt-gray-mid:    #C6C6C6;   /* Medium Gray */
  --_gt-gray-light:  #EDEDED;   /* Light Gray */

  /* Derived, not palette. Tonal steps come from the palette, never new hues.
     --_gt-blue-deep exists only because Good Blue on Off White is 4.0:1, under
     AA for small text. Use it for links and small accent text; never as a field. */
  --_gt-blue-deep:   #2D4BC0;
  --_gt-blue-tint:   color-mix(in srgb, var(--_gt-blue) 10%, var(--_gt-offwhite));
  --_gt-ink-70:      color-mix(in srgb, var(--_gt-black) 72%, var(--_gt-offwhite));
  --_gt-ink-55:      color-mix(in srgb, var(--_gt-black) 55%, var(--_gt-offwhite));

  /* Semantic: surfaces */
  --gt-bg:              var(--_gt-offwhite);
  --gt-bg-subtle:       var(--_gt-gray-light);
  --gt-bg-accent-soft:  var(--_gt-blue-tint);
  --gt-bg-accent:       var(--_gt-blue);
  --gt-bg-inverse:      var(--_gt-black);

  /* Semantic: text */
  --gt-text:            var(--_gt-black);
  --gt-text-secondary:  var(--_gt-ink-70);
  --gt-text-muted:      var(--_gt-ink-55);
  --gt-text-on-accent:  var(--_gt-offwhite);
  --gt-text-on-inverse: var(--_gt-offwhite);

  /* Semantic: accent */
  --gt-accent:          var(--_gt-blue);
  --gt-accent-text:     var(--_gt-blue-deep);
  --gt-link:            var(--_gt-blue-deep);

  /* Semantic: borders. Rules are 1px. Strong rules are 2px black. */
  --gt-border-subtle:   var(--_gt-gray-light);
  --gt-border:          var(--_gt-gray-mid);
  --gt-border-strong:   var(--_gt-black);
  --gt-border-icon:     var(--_gt-gray-dark);   /* non-text use only: icons, disabled controls */

  /* Type. One sans, one serif. Degular is the workhorse; Lust Text is the
     subhead face and the logotype face, never the H1. Everything renders at
     400; Degular 500 is in the kit for a future UI need, not for headings. */
  --gt-font-sans:  degular, "IBM Plex Sans", "Trebuchet MS", system-ui, sans-serif;
  --gt-font-serif: lust-text, Georgia, "Times New Roman", serif;

  /* Type scale (rem at 16px root). Taken from the live 2026 service pages and
     the estimate format, then snapped. */
  --gt-size-display: 3.875rem;  /* 62 */
  --gt-size-h1:      2.5rem;    /* 40 */
  --gt-size-h2:      1.75rem;   /* 28 */
  --gt-size-h3:      1.25rem;   /* 20 */
  --gt-size-subhead: 1.375rem;  /* 22, serif */
  --gt-size-lede:    1.375rem;  /* 22 */
  --gt-size-body:    1.0625rem; /* 17 */
  --gt-size-small:   0.875rem;  /* 14 */
  --gt-size-micro:   0.8125rem; /* 13, eyebrows and tags */
  --gt-size-figure:  1.625rem;  /* 26, tabular figures */

  --gt-leading-tight: 1.06;
  --gt-leading-head:  1.15;
  --gt-leading-body:  1.6;

  --gt-tracking-caps: 0.12em;

  /* Spacing scale, 4px base. Every gap has one owner (the stack, grid, or
     cluster that sets it); children add no margins of their own. */
  --gt-space-1: 0.25rem;
  --gt-space-2: 0.5rem;
  --gt-space-3: 0.75rem;
  --gt-space-4: 1rem;
  --gt-space-5: 1.5rem;
  --gt-space-6: 2rem;
  --gt-space-7: 3rem;
  --gt-space-8: 4rem;
  --gt-space-9: 5.5rem;   /* web section padding, 88px on the live site */

  /* Widths */
  --gt-measure:    40rem;     /* reading measure for body copy */
  --gt-width-doc:  51rem;     /* Letter at 96dpi, the estimate canvas */
  --gt-width-page: 71.25rem;  /* 1140, the service-page content column */

  /* Shape. Surfaces are square (Webflow radius tokens are 0). Controls are
     pills, taken from the 2026 service pages. */
  --gt-radius:         0;
  --gt-radius-control: 999px;
  --gt-rule:           1px;
  --gt-rule-strong:    2px;
}


/* --------------------------------------------------------------------------
   2. Base
   Only inside .gt. No global element resets leak out of the scope.
   -------------------------------------------------------------------------- */
.gt, .gt * , .gt *::before, .gt *::after { box-sizing: border-box; }

.gt {
  background: var(--gt-bg);
  color: var(--gt-text);
  font-family: var(--gt-font-sans);
  font-size: var(--gt-size-body);
  line-height: var(--gt-leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gt :where(h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, table) { margin: 0; }

.gt a { color: var(--gt-link); text-decoration: underline; text-underline-offset: 0.12em; }
.gt a:hover { color: var(--gt-text); }

/* Headings and body are one weight by design. Emphasis is size, case, and
   color, never bold; the kit has no Degular bold, so bold would be synthesized. */
.gt :where(b, strong) { font-weight: 400; color: var(--gt-text); }
.gt :where(em, i) { font-style: italic; }

.gt img, .gt svg, .gt video { max-width: 100%; display: block; }

.gt [hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   3. Type roles
   Headings are Degular, regular weight, black. The serif is for the subhead
   role and the logotype only. Do not mix the two faces inside one line.
   -------------------------------------------------------------------------- */
.gt-display, .gt-h1, .gt-h2, .gt-h3 {
  font-family: var(--gt-font-sans);
  font-weight: 400;
  color: var(--gt-text);
  text-wrap: balance;
}
.gt-display { font-size: var(--gt-size-display); line-height: var(--gt-leading-tight); letter-spacing: -0.02em; }
.gt-h1      { font-size: var(--gt-size-h1);      line-height: var(--gt-leading-tight); letter-spacing: -0.015em; }
.gt-h2      { font-size: var(--gt-size-h2);      line-height: var(--gt-leading-head); }
.gt-h3      { font-size: var(--gt-size-h3);      line-height: var(--gt-leading-head); }

.gt-subhead {
  font-family: var(--gt-font-serif);
  font-weight: 400;
  font-size: var(--gt-size-subhead);
  line-height: 1.3;
  color: var(--gt-text);
  text-wrap: balance;
}

.gt-eyebrow {
  font-family: var(--gt-font-sans);
  font-size: var(--gt-size-micro);
  font-weight: 400;
  letter-spacing: var(--gt-tracking-caps);
  text-transform: uppercase;
  color: var(--gt-accent-text);
}
.gt-eyebrow.gt-eyebrow--muted { color: var(--gt-text-muted); }

.gt-lede  { font-size: var(--gt-size-lede);  line-height: 1.45; color: var(--gt-text-secondary); max-width: var(--gt-measure); text-wrap: pretty; }
.gt-body  { font-size: var(--gt-size-body);  line-height: var(--gt-leading-body); color: var(--gt-text-secondary); max-width: var(--gt-measure); }
.gt-body--ink { color: var(--gt-text); }
.gt-small { font-size: var(--gt-size-small); line-height: 1.55; color: var(--gt-text-secondary); }
.gt-micro { font-size: var(--gt-size-micro); line-height: 1.5;  color: var(--gt-text-muted); }

.gt-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* A large figure: the number in a stat cell or a total. Sans, tabular. */
.gt-figure-value {
  font-family: var(--gt-font-sans);
  font-size: var(--gt-size-figure);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--gt-text);
}
.gt-figure-value.gt-accent { color: var(--gt-accent); }
.gt-figure-label { font-size: var(--gt-size-small); color: var(--gt-text-muted); }

/* Color utilities: the only three text colors a page may switch to by class. */
.gt-accent    { color: var(--gt-accent); }
.gt-muted     { color: var(--gt-text-muted); }
.gt-secondary { color: var(--gt-text-secondary); }


/* --------------------------------------------------------------------------
   4. Layout primitives
   Gap owners. A child of a stack, grid, or cluster must not add margins.
   -------------------------------------------------------------------------- */
.gt-page {
  width: 100%;
  max-width: var(--gt-width-doc);
  margin-inline: auto;
  padding: var(--gt-space-7) var(--gt-space-7) var(--gt-space-8);
  background: var(--gt-bg);
}
.gt-page--wide { max-width: var(--gt-width-page); }
@media (max-width: 40rem) { .gt-page { padding: var(--gt-space-5) var(--gt-space-4) var(--gt-space-7); } }

.gt-stack   { display: flex; flex-direction: column; gap: var(--gt-space-4); }
.gt-stack--tight { gap: var(--gt-space-2); }
.gt-stack--loose { gap: var(--gt-space-6); }

.gt-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gt-space-3) var(--gt-space-4); }
.gt-cluster--between { justify-content: space-between; }

.gt-grid { display: grid; gap: var(--gt-space-5); grid-template-columns: repeat(var(--gt-cols, 2), minmax(0, 1fr)); }
.gt-grid--fit { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
@media (max-width: 48rem) { .gt-grid:not(.gt-grid--fit) { grid-template-columns: repeat(min(var(--gt-cols, 2), 2), minmax(0, 1fr)); } }
@media (max-width: 30rem) { .gt-grid { grid-template-columns: 1fr; } }

/* Sections carry their own top space; the head sits on a rule. */
.gt-section { display: flex; flex-direction: column; gap: var(--gt-space-4); margin-top: var(--gt-space-7); }
.gt-section-head { display: flex; flex-direction: column; gap: var(--gt-space-1); padding-bottom: var(--gt-space-3); border-bottom: var(--gt-rule) solid var(--gt-border); }

/* Web sections (service pages) use the wide padding and the page column. */
.gt-web-section { padding: var(--gt-space-9) var(--gt-space-7); max-width: var(--gt-width-page); margin-inline: auto; }
@media (max-width: 48rem) { .gt-web-section { padding: var(--gt-space-8) var(--gt-space-4); } }

.gt-rule { border: 0; border-top: var(--gt-rule) solid var(--gt-border); margin: 0; }
.gt-rule--subtle { border-top-color: var(--gt-border-subtle); }
.gt-rule--strong { border-top-width: var(--gt-rule-strong); border-top-color: var(--gt-border-strong); }


/* --------------------------------------------------------------------------
   5. Document furniture
   -------------------------------------------------------------------------- */
.gt-masthead {
  display: flex; flex-wrap: wrap; gap: var(--gt-space-5);
  align-items: flex-start; justify-content: space-between;
  padding-bottom: var(--gt-space-5);
  border-bottom: var(--gt-rule-strong) solid var(--gt-border-strong);
}
.gt-masthead-right { text-align: right; display: flex; flex-direction: column; gap: var(--gt-space-1); }
.gt-doclabel { font-family: var(--gt-font-serif); font-size: var(--gt-size-subhead); color: var(--gt-text); line-height: 1.2; }

/* The wordmark PNG at document scale. */
.gt-logo { height: 34px; width: auto; display: block; }
.gt-logo--nav { height: 26px; }

/* The logomark. Inline the SVG from assets/gt-smiley.svg and it takes the
   color of its field: blue on off-white, off-white on blue or black. */
.gt .gt-mark { width: 48px; height: 48px; color: var(--gt-accent); flex: none; }

.gt-footer {
  margin-top: var(--gt-space-7);
  padding-top: var(--gt-space-5);
  border-top: var(--gt-rule-strong) solid var(--gt-border-strong);
  display: flex; flex-direction: column; gap: var(--gt-space-2);
  font-size: var(--gt-size-micro); color: var(--gt-text-muted);
}


/* --------------------------------------------------------------------------
   6. Fields
   The three-level color hierarchy from the presentation system, as surfaces.
   Blue opens and closes. Black divides. Off-white carries the content.
   A field owns the text color and the mark color of everything inside it.
   -------------------------------------------------------------------------- */
.gt-field-accent  { background: var(--gt-bg-accent);  color: var(--gt-text-on-accent); }
.gt-field-inverse { background: var(--gt-bg-inverse); color: var(--gt-text-on-inverse); }
.gt-field-subtle  { background: var(--gt-bg-subtle); }
.gt-field-accent :where(.gt-display, .gt-h1, .gt-h2, .gt-h3, .gt-subhead, .gt-doclabel, .gt-body, .gt-lede, .gt-small, .gt-eyebrow, .gt-figure-value, .gt-step-num, a, b, strong),
.gt-field-inverse :where(.gt-display, .gt-h1, .gt-h2, .gt-h3, .gt-subhead, .gt-doclabel, .gt-body, .gt-lede, .gt-small, .gt-eyebrow, .gt-figure-value, .gt-step-num, a, b, strong) {
  color: inherit;
}
.gt-field-accent .gt-muted, .gt-field-inverse .gt-muted,
.gt-field-accent .gt-micro, .gt-field-inverse .gt-micro,
.gt-field-accent .gt-figure-label, .gt-field-inverse .gt-figure-label { color: inherit; opacity: 0.72; }
.gt-field-accent .gt-rule, .gt-field-inverse .gt-rule { border-top-color: currentColor; opacity: 0.45; }
.gt .gt-field-accent .gt-btn--primary { background: var(--gt-bg); color: var(--gt-accent-text); border-color: var(--gt-bg); }
.gt .gt-field-accent .gt-btn--primary:hover { background: var(--gt-bg); color: var(--gt-text); }
.gt .gt-field-inverse .gt-btn--primary { background: var(--gt-bg); color: var(--gt-text); border-color: var(--gt-bg); }
.gt .gt-field-inverse .gt-btn--primary:hover { background: var(--gt-bg); color: var(--gt-accent-text); }
.gt .gt-field-accent .gt-btn--ghost, .gt .gt-field-inverse .gt-btn--ghost { color: inherit; border-color: currentColor; background: transparent; }
.gt .gt-field-accent .gt-btn--ghost:hover, .gt .gt-field-inverse .gt-btn--ghost:hover { background: transparent; opacity: 0.8; }


/* --------------------------------------------------------------------------
   7. Meta and figures
   -------------------------------------------------------------------------- */
.gt-meta {
  display: grid; grid-template-columns: repeat(var(--gt-cols, 4), minmax(0, 1fr));
  gap: var(--gt-space-4) var(--gt-space-5);
  padding: var(--gt-space-4) 0;
  border-top: var(--gt-rule) solid var(--gt-border-subtle);
  border-bottom: var(--gt-rule) solid var(--gt-border-subtle);
}
.gt-meta > div { display: flex; flex-direction: column; gap: var(--gt-space-1); min-width: 0; }
.gt-meta .gt-eyebrow { color: var(--gt-text-muted); }
.gt-meta-value { color: var(--gt-text); font-size: var(--gt-size-small); line-height: 1.45; }
.gt-meta-sub   { color: var(--gt-text-muted); font-size: var(--gt-size-micro); line-height: 1.45; }
@media (max-width: 40rem) { .gt-meta { grid-template-columns: 1fr 1fr; } }

/* A row of stat cells separated by hairlines, not boxes. */
.gt-figures {
  display: grid; grid-template-columns: repeat(var(--gt-cols, 4), minmax(0, 1fr));
  gap: 1px; background: var(--gt-border-subtle);
  border: var(--gt-rule) solid var(--gt-border-subtle);
}
.gt-figure { background: var(--gt-bg); padding: var(--gt-space-4) var(--gt-space-3); display: flex; flex-direction: column; gap: var(--gt-space-1); min-width: 0; }
@media (max-width: 40rem) { .gt-figures { grid-template-columns: 1fr 1fr; } }


/* --------------------------------------------------------------------------
   8. Table
   Hairline rows. Uppercase micro headers. Numbers right, tabular, on one line.
   A table that would widen the page scrolls inside .gt-table-wrap instead.
   -------------------------------------------------------------------------- */
.gt-table-wrap { width: 100%; overflow-x: auto; }
.gt-table { width: 100%; border-collapse: collapse; font-size: var(--gt-size-small); }
.gt-table thead th {
  font-size: var(--gt-size-micro); letter-spacing: var(--gt-tracking-caps); text-transform: uppercase;
  font-weight: 400; color: var(--gt-text-muted); text-align: left;
  padding: 0 0 var(--gt-space-2); border-bottom: var(--gt-rule) solid var(--gt-border);
}
.gt-table thead th.gt-num { text-align: right; }
.gt-table tbody td { padding: var(--gt-space-4) 0; border-bottom: var(--gt-rule) solid var(--gt-border-subtle); vertical-align: top; color: var(--gt-text-secondary); }
.gt-table tbody td.gt-num { color: var(--gt-text); padding-left: var(--gt-space-5); }
.gt-table .gt-item { display: block; color: var(--gt-text); font-size: var(--gt-size-body); margin-bottom: var(--gt-space-1); }
.gt-table .gt-desc { display: block; color: var(--gt-text-secondary); font-size: var(--gt-size-small); line-height: 1.55; }
.gt-table tfoot td { padding: var(--gt-space-4) 0 0; font-variant-numeric: tabular-nums; color: var(--gt-text); }
.gt-table tfoot .gt-total-label { font-size: var(--gt-size-body); }
.gt-table tfoot .gt-total { text-align: right; font-size: var(--gt-size-subhead); color: var(--gt-accent); padding-left: var(--gt-space-5); white-space: nowrap; }
.gt-table tr.gt-optional td { color: var(--gt-text-muted); }


/* --------------------------------------------------------------------------
   9. Lists, callouts, tags
   -------------------------------------------------------------------------- */
/* Notes: square blue markers. One line each, optional lead-in in <b>. */
.gt-notes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--gt-space-3); }
.gt-notes li { position: relative; padding-left: 1.4rem; font-size: var(--gt-size-small); line-height: 1.55; color: var(--gt-text-secondary); }
.gt-notes li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.4rem; background: var(--gt-accent); }
.gt-notes li b { color: var(--gt-text); }

/* Plain list for web copy. */
.gt-list { padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--gt-space-2); color: var(--gt-text-secondary); }

/* One callout per section at most. Soft blue field, blue left rule. */
.gt-callout {
  background: var(--gt-bg-accent-soft);
  border-left: 3px solid var(--gt-accent);
  padding: var(--gt-space-4) var(--gt-space-5);
  font-size: var(--gt-size-small); line-height: 1.55; color: var(--gt-text-secondary);
}
.gt-callout b { color: var(--gt-text); }

/* Tag: outlined, blue, micro caps. For real categories, not ordinary metadata. */
.gt-tag {
  display: inline-block; padding: 2px 10px;
  border: var(--gt-rule) solid var(--gt-accent); border-radius: var(--gt-radius);
  color: var(--gt-accent-text); font-size: var(--gt-size-micro); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5;
}
.gt-tag--muted { border-color: var(--gt-border); color: var(--gt-text-muted); }

/* Numbered step. Blue top rule, blue index. */
.gt-step { padding-top: var(--gt-space-4); border-top: var(--gt-rule-strong) solid var(--gt-accent); display: flex; flex-direction: column; gap: var(--gt-space-2); }
.gt-step-num { font-size: var(--gt-size-small); color: var(--gt-accent-text); font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------------------------
   10. Controls
   Pills, Degular, regular weight. Primary is Good Blue with off-white text.
   Ghost is a 1.5px black outline. Nothing else.
   -------------------------------------------------------------------------- */
.gt .gt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--gt-space-2);
  padding: 0.9rem 2rem;
  border: 1.5px solid transparent; border-radius: var(--gt-radius-control);
  font: inherit; font-size: var(--gt-size-body); line-height: 1; font-weight: 400;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.gt .gt-btn--primary { background: var(--gt-accent); color: var(--gt-text-on-accent); border-color: var(--gt-accent); }
.gt .gt-btn--primary:hover { background: var(--gt-accent-text); border-color: var(--gt-accent-text); color: var(--gt-text-on-accent); }
.gt .gt-btn--ghost { background: transparent; color: var(--gt-text); border-color: var(--gt-text); }
.gt .gt-btn--ghost:hover { background: var(--gt-text); color: var(--gt-bg); }
.gt .gt-btn--small { padding: 0.6rem 1.35rem; font-size: var(--gt-size-small); }
.gt .gt-btn:disabled { opacity: .45; cursor: default; }
.gt .gt-btn:focus-visible { outline: 2px solid var(--gt-accent); outline-offset: 3px; }
/* A button is content, not a column: it never stretches to fill a stack. */
.gt .gt-stack > .gt-btn { align-self: flex-start; }

/* Text link with a rule under it, the service-page "read more" pattern. */
.gt .gt-textlink { color: var(--gt-accent-text); text-decoration: none; border-bottom: var(--gt-rule) solid var(--gt-accent); padding-bottom: 2px; font-size: var(--gt-size-small); }
.gt .gt-textlink:hover { color: var(--gt-text); border-bottom-color: var(--gt-text); }

/* Form fields */
.gt-label { display: block; font-size: var(--gt-size-small); color: var(--gt-text); margin-bottom: var(--gt-space-1); }
.gt-input, .gt-textarea, .gt-select {
  width: 100%; font: inherit; font-size: var(--gt-size-body); color: var(--gt-text);
  background: var(--gt-bg); border: 1.5px solid var(--gt-border); border-radius: var(--gt-radius);
  padding: 0.8rem 1rem;
}
.gt-input:focus, .gt-textarea:focus, .gt-select:focus { outline: none; border-color: var(--gt-accent); }
.gt-textarea { min-height: 6.5rem; resize: vertical; }
.gt-input:disabled, .gt-textarea:disabled, .gt-select:disabled { background: var(--gt-bg-subtle); color: var(--gt-text-muted); }


/* --------------------------------------------------------------------------
   11. Locks
   Rules a page must not be able to defeat from its own CSS.
   -------------------------------------------------------------------------- */
/* The two faces never share a line. */
.gt-display .gt-subhead, .gt-h1 .gt-subhead, .gt-h2 .gt-subhead, .gt-h3 .gt-subhead,
.gt-subhead .gt-display, .gt-subhead .gt-h1, .gt-subhead .gt-h2, .gt-subhead .gt-h3 { font-family: inherit !important; }
/* The serif is never bold and never light. */
.gt-subhead, .gt-doclabel { font-weight: 400 !important; }
/* Headings are never bold. */
.gt-display, .gt-h1, .gt-h2, .gt-h3 { font-weight: 400 !important; }
/* The mark is never black. */
.gt-mark { fill: currentColor; }
.gt :where(.gt-field-accent, .gt-field-inverse) .gt-mark { color: var(--gt-text-on-accent) !important; }
/* Published display primitives never override the HTML hidden state. */
.gt [hidden] { display: none !important; }


/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print {
  @page { size: Letter; margin: .6in; }
  .gt { background: #fff; }
  .gt-page { max-width: none; padding: 0; background: #fff; }
  .gt-noprint { display: none !important; }
  .gt-section, .gt-figures, .gt-meta, .gt-footer, .gt-callout { break-inside: avoid; }
  .gt a { color: inherit; text-decoration: none; }
}