/* ==========================================================================
   Glossary — a laboratory that publishes an A-Z of the words on its labels.

   The signature device is the lettered term index and the definition entry,
   each of which carries a "what it does not mean" counterpoint. The homepage
   states the business before the index starts. No contents rail, no
   directory board, no parameter strip, no calendar grid, no photography.
   ========================================================================== */

:root {
  --ink: #16242b;
  --ink-2: #44575f;
  --ink-3: #7b8b92;
  --page: #f4f6f7;
  --page-2: #e7edef;
  --page-3: #d8e2e5;
  --deep: #1d3c4a;
  --deep-2: #142c37;
  --flag: #b4552b;
  --line: #c9d5d9;
  --hold: 1100px;
  --read: 820px;
  --slab: "Zilla Slab", Georgia, serif;
  --sans: "Work Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.64; }
img { max-width: 100%; height: auto; }
a { color: var(--deep); text-underline-offset: 2px; }
a:hover { color: var(--flag); }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; }

.gl-skip { position: absolute; left: -9999px; top: 0; z-index: 40; background: var(--deep); color: #fff; padding: 12px 18px; text-decoration: none; }
.gl-skip:focus { left: 0; }
.gl-hold { max-width: var(--hold); margin: 0 auto; padding: 0 22px; }
.gl-read { max-width: var(--read); }

/* --- header ------------------------------------------------------------- */
.gl-top { background: var(--deep); color: #fff; }
.gl-top-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 14px; }
.gl-name { text-decoration: none; color: #fff; display: block; }
.gl-name-main { display: block; font-family: var(--slab); font-weight: 700; font-size: clamp(1.26rem, 2.5vw, 1.66rem); line-height: 1.1; }
.gl-name-sub { display: block; margin-top: 3px; font-size: 0.73rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9fb7c0; }
.gl-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.gl-nav a { color: #e4eef1; text-decoration: none; font-weight: 500; font-size: 0.94rem; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.gl-nav a:hover { border-bottom-color: var(--flag); color: #fff; }
.gl-expand { display: none; font: inherit; font-weight: 500; cursor: pointer; background: transparent; color: #fff; border: 1px solid #ffffff59; padding: 8px 16px; }
.gl-drop { display: none; padding: 0 22px 14px; background: var(--deep-2); }
.gl-drop[hidden] { display: none; }
.gl-drop a { display: block; padding: 11px 0; color: #e4eef1; text-decoration: none; border-bottom: 1px solid #ffffff26; }

/* --- type --------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--slab); color: var(--ink); line-height: 1.2; margin: 0 0 13px; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); }
h2 { font-size: clamp(1.35rem, 2.7vw, 1.8rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 15px; }
.gl-over { margin: 0 0 11px; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--flag); font-weight: 600; }
.gl-lead { font-size: 1.12rem; color: var(--ink-2); margin-bottom: 19px; }
.gl-fine { font-size: 0.87rem; color: var(--ink-2); }

/* --- sections ----------------------------------------------------------- */
.gl-part { padding: 46px 0; border-bottom: 1px solid var(--line); }
.gl-part--open { padding: 54px 0 42px; background: var(--page-2); }
.gl-part--sunk { background: var(--page-2); }
.gl-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 46px; align-items: start; }

/* --- the panel of facts beside the opener ------------------------------- */
.gl-facts { border: 1px solid var(--line); border-left: 5px solid var(--deep); background: var(--page); padding: 22px 25px; }
.gl-facts h2 { font-size: 1.14rem; margin-bottom: 14px; }
.gl-facts dl { margin: 0; }
.gl-facts dl > div { padding: 10px 0; border-top: 1px solid var(--line); }
.gl-facts dt { font-size: 0.7rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; }
.gl-facts dd { margin: 0; font-size: 0.93rem; }

/* --- the lettered index: this theme's signature ------------------------- */
.gl-abc { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.gl-abc a {
  display: inline-block; min-width: 38px; text-align: center; padding: 7px 10px;
  border: 1px solid var(--line); background: var(--page); color: var(--deep);
  text-decoration: none; font-weight: 600; font-size: 0.9rem;
}
.gl-abc a:hover { background: var(--deep); color: #fff; border-color: var(--deep); }

.gl-letter {
  font-family: var(--slab); font-weight: 700; font-size: 1.5rem; color: var(--flag);
  margin: 34px 0 0; padding-bottom: 6px; border-bottom: 3px solid var(--deep);
}
.gl-terms { margin: 0; }
.gl-term { padding: 20px 0; border-bottom: 1px solid var(--line); }
.gl-term:last-child { border-bottom: 0; }
.gl-term h3 { margin-bottom: 7px; }
.gl-term p { margin-bottom: 10px; color: var(--ink-2); }
.gl-term p:last-child { margin-bottom: 0; }
.gl-not {
  display: block; margin-top: 10px; padding: 9px 14px;
  background: var(--page-3); border-left: 4px solid var(--flag);
  font-size: 0.9rem; color: var(--ink-2);
}
.gl-not strong { color: var(--ink); }

/* --- plain lists -------------------------------------------------------- */
.gl-marks { list-style: none; margin: 0 0 15px; padding: 0; }
.gl-marks li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.gl-marks li:last-child { border-bottom: 0; }

/* --- tables ------------------------------------------------------------- */
.gl-tab-wrap { overflow-x: auto; margin: 20px 0; }
.gl-tab { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.gl-tab caption { text-align: left; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 9px; font-weight: 600; }
.gl-tab th, .gl-tab td { text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.gl-tab thead th { border-bottom: 2px solid var(--deep); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-family: var(--sans); }
.gl-tab tbody th { font-family: var(--slab); font-weight: 700; }

/* --- inset -------------------------------------------------------------- */
.gl-inset { border: 1px solid var(--deep); background: var(--page-2); padding: 21px 24px; margin: 22px 0; }
.gl-inset > :last-child { margin-bottom: 0; }
.gl-inset-h { font-family: var(--slab); font-weight: 700; font-size: 1.05rem; margin: 0 0 8px; }

/* --- buttons ------------------------------------------------------------ */
.gl-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.gl-b { display: inline-block; font: inherit; font-weight: 500; text-decoration: none; padding: 13px 26px; border: 1px solid var(--deep); cursor: pointer; text-align: center; }
.gl-b--fill { background: var(--deep); color: #fff; }
.gl-b--fill:hover { background: var(--deep-2); color: #fff; }
.gl-b--line { background: transparent; color: var(--deep); }
.gl-b--line:hover { background: var(--page-3); color: var(--deep); }
.gl-b--wide { width: 100%; }
.gl-b[disabled] { opacity: 0.55; cursor: progress; }

/* --- forms -------------------------------------------------------------- */
.gl-form { border: 1px solid var(--line); border-top: 5px solid var(--flag); background: var(--page); padding: 25px; }
.gl-form h3 { margin-top: 0; }
.gl-f { margin-bottom: 16px; }
.gl-l { display: block; font-weight: 500; font-size: 0.93rem; margin-bottom: 5px; }
.gl-tip { display: block; font-size: 0.82rem; color: var(--ink-3); margin-bottom: 6px; }
.gl-i { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--ink-3); background: #fff; color: var(--ink); }
.gl-i:focus { border-color: var(--deep); }
textarea.gl-i { min-height: 114px; resize: vertical; }
.gl-ok { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; border-top: 1px solid var(--line); padding-top: 16px; margin-bottom: 18px; }
.gl-ok input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--deep); }
.gl-ok-t { font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); }
.gl-msg { margin: 12px 0 0; font-size: 0.92rem; font-weight: 500; }
.gl-msg.is-bad { color: #9c2c16; }
.gl-msg.is-good { color: var(--deep); }
.gl-thanks { border: 1px solid var(--deep); border-top: 5px solid var(--flag); background: var(--page-2); padding: 25px; }
.gl-thanks h3 { margin-top: 0; }
.gl-thanks p:last-child { margin-bottom: 0; }

/* --- documents ---------------------------------------------------------- */
.gl-doc { padding: 44px 0; }
.gl-doc-in { max-width: 800px; }
.gl-doc-when { font-size: 0.77rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); border-bottom: 3px solid var(--deep); padding-bottom: 13px; margin-bottom: 25px; }
.gl-doc h2 { font-size: 1.24rem; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line); }
.gl-doc ul, .gl-doc ol { padding-left: 22px; }
.gl-doc li { margin-bottom: 7px; }
.gl-toc { border: 1px solid var(--line); background: var(--page-2); padding: 20px 24px; margin-bottom: 28px; }
.gl-toc h2 { margin: 0 0 10px; padding: 0; border: 0; font-size: 1.05rem; }
.gl-toc ol { margin: 0; }

/* --- footer ------------------------------------------------------------- */
.gl-foot { background: var(--deep); color: #b8ccd3; }
.gl-foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; padding: 34px 0 24px; }
.gl-foot-h { font-size: 0.71rem; letter-spacing: 0.15em; text-transform: uppercase; color: #8aa4ad; margin: 0 0 9px; font-weight: 600; }
.gl-foot-grid a { display: block; padding: 4px 0; color: #e4eef1; text-decoration: none; width: fit-content; border-bottom: 1px solid transparent; }
.gl-foot-grid a:hover { border-bottom-color: var(--flag); color: #fff; }
.gl-foot-t { margin: 0; font-size: 0.91rem; }
.gl-foot-f { display: block; padding: 4px 0; font-size: 0.91rem; }
.gl-record { margin: 0; padding: 22px 0; display: grid; gap: 9px; border-top: 1px solid #ffffff26; }
.gl-record > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
.gl-record dt { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8aa4ad; }
.gl-record dd { margin: 0; font-size: 0.92rem; color: #e4eef1; }
.gl-record a { color: #e4eef1; }
.gl-note { border-top: 1px solid #ffffff26; padding: 18px 0; }
.gl-note p { font-size: 0.87rem; }
.gl-note p:last-child { margin-bottom: 0; }
.gl-note strong { color: #f0f6f8; }
.gl-note a { color: #e4eef1; }
.gl-end { border-top: 2px solid #ffffff40; padding: 18px 0 36px; margin: 0; font-size: 0.84rem; color: #8aa4ad; }

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1000px) { .gl-two { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 780px) {
  body { font-size: 16px; }
  .gl-nav { display: none; }
  .gl-expand { display: inline-block; }
  .gl-drop { display: block; }
  .gl-drop[hidden] { display: none; }
  .gl-record > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gl-part { padding: 34px 0; }
  .gl-form { padding: 20px; }
}
@media print {
  .gl-nav, .gl-expand, .gl-drop, .gl-form, .gl-skip, .gl-abc { display: none !important; }
  body { font-size: 11pt; background: #fff; }
  .gl-top, .gl-foot { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   Selling: the product page and the order form.

   The Supplement Facts panel is set to look like the printed panel on the
   carton rather than like the rest of the site, because that is the one
   place a shopper is entitled to expect a familiar layout.
   -------------------------------------------------------------------------- */

.gl-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.gl-opt { font-weight: 400; font-size: 0.8rem; color: var(--ink-3); text-transform: none; letter-spacing: 0; }

.gl-panel { border: 2px solid var(--ink); background: #fff; padding: 18px 20px; margin: 20px 0; }
.gl-panel-h {
  font-family: var(--slab); font-weight: 700; font-size: 1.5rem; margin: 0;
  line-height: 1.1; border-bottom: 8px solid var(--ink); padding-bottom: 6px;
}
.gl-panel-sub {
  margin: 7px 0 0; font-size: 0.86rem; color: var(--ink-2);
  border-bottom: 2px solid var(--ink); padding-bottom: 7px;
}
.gl-panel-tab { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.gl-panel-tab thead th {
  text-align: left; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); padding: 7px 0; border-bottom: 1px solid var(--ink);
}
.gl-panel-tab thead th + th, .gl-panel-tab tbody td { text-align: right; }
.gl-panel-tab tbody th {
  text-align: left; font-family: var(--sans); font-weight: 500; padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
}
.gl-panel-tab tbody td { padding: 8px 0 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.gl-panel-tab tbody tr:last-child th, .gl-panel-tab tbody tr:last-child td { border-bottom: 4px solid var(--ink); }
.gl-panel-foot { margin: 9px 0 0; font-size: 0.79rem; color: var(--ink-2); }

.gl-buy { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 18px; margin: 26px 0; }
.gl-buy-card {
  position: relative; background: var(--page); border: 1px solid var(--line);
  border-top: 4px solid var(--ink-3); padding: 24px 22px; display: flex; flex-direction: column;
}
.gl-buy-card--pick { border-top-color: var(--flag); box-shadow: 0 2px 0 rgba(29, 60, 74, 0.1); }
.gl-buy-flag {
  position: absolute; top: -12px; right: 18px; background: var(--flag); color: #fff;
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 4px 11px;
}
.gl-buy-card h3 { margin: 0 0 6px; font-size: 1.08rem; }
.gl-buy-price { font-family: var(--slab); font-weight: 700; font-size: 2rem; line-height: 1; margin: 0 0 5px; color: var(--deep); }
.gl-buy-unit { margin: 0 0 14px; font-size: 0.86rem; color: var(--ink-2); }
.gl-buy-perks { list-style: none; margin: 0 0 18px; padding: 0; font-size: 0.87rem; flex: 1; }
.gl-buy-perks li { padding: 5px 0 5px 17px; position: relative; color: var(--ink-2); }
.gl-buy-perks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 2px; background: var(--flag); }

select.gl-i { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 19px) 51%, calc(100% - 13px) 51%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
textarea.gl-i { resize: vertical; }

@media (max-width: 780px) {
  .gl-panel { padding: 15px 16px; }
  .gl-buy-card { padding: 20px 18px; }
}