/* ===========================================================
   GTM free tools: shared layout system (2026-10-15)
   Used by /resources/email-domain-checker/, /cold-email-infrastructure-calculator/,
   /signal-library/ and /gtm-glossary/ (index + term pages).
   Link it AFTER theme/landing-ba.css and add class "gtm-tool" to <body>.

   Rules this file enforces:
   1. One container. Every band, the header and the closing block share one
      left edge: 1180px of content inside a fluid gutter.
   2. Symmetry. A band is either full container width (.gt-full) or a
      symmetric split (.gt-split 1/2 + 1/2, .gt-tool 7/5 for a tool with live
      results). Nothing sits at 60 percent width with dead space on the right.
   3. Restraint. No glow, no gradient, no pill eyebrows. The hard offset
      shadow is reserved for the primary tool surface (.gt-panel) and primary
      buttons. Everything else is a flat 2px or 1px border.
   4. Scale. H1 is at least 4x body.
   =========================================================== */

body.gtm-tool {
  --wrap: 1180px;
  --gut: clamp(20px, 4vw, 40px);
  --band: clamp(64px, 8vw, 104px);
  --r-panel: 14px;
  --r-in: 10px;
  --gt-line: 1px solid rgba(13, 20, 33, 0.14);
}

/* ---- decoration off ---- */
body.gtm-tool .glow { display: none !important; }
body.gtm-tool .grid-bg { mask-image: linear-gradient(#000 0, transparent 520px); -webkit-mask-image: linear-gradient(#000 0, transparent 520px); }

/* ---- one container ---- */
body.gtm-tool header.bar {
  max-width: calc(var(--wrap) + 2 * var(--gut));
  padding-left: var(--gut);
  padding-right: var(--gut);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
/* the shared site footer keeps its markup; on these pages it joins the same edge */
body.gtm-tool .ivf-in {
  max-width: calc(var(--wrap) + 2 * var(--gut));
  padding-left: var(--gut);
  padding-right: var(--gut);
  box-sizing: border-box;
}
body.gtm-tool .gt-wrap {
  max-width: calc(var(--wrap) + 2 * var(--gut));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
  box-sizing: border-box;
  width: 100%;
}
body.gtm-tool .gt-band { padding-top: var(--band); padding-bottom: var(--band); }
body.gtm-tool .gt-band.tight { padding-top: calc(var(--band) * .6); padding-bottom: calc(var(--band) * .6); }
body.gtm-tool .gt-band:not(.alt):not(.gt-close) + .gt-band:not(.alt):not(.gt-close) { padding-top: 0; }
body.gtm-tool .gt-band.alt { background: #fff; border-top: var(--gt-line); border-bottom: var(--gt-line); }

/* ---- grids: full, symmetric split, tool split ---- */
body.gtm-tool .gt-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
body.gtm-tool .gt-tool  { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 3vw, 40px); align-items: start; }
body.gtm-tool .gt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
body.gtm-tool .gt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
body.gtm-tool .gt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) {
  body.gtm-tool .gt-split, body.gtm-tool .gt-tool { grid-template-columns: 1fr; }
  body.gtm-tool .gt-grid-3, body.gtm-tool .gt-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body.gtm-tool .gt-grid-2, body.gtm-tool .gt-grid-3, body.gtm-tool .gt-grid-4 { grid-template-columns: 1fr; }
}
body.gtm-tool .gt-sticky { position: sticky; top: 24px; }
@media (max-width: 960px) { body.gtm-tool .gt-sticky { position: static; } }

/* ---- type ---- */
body.gtm-tool .gt-hero { padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
body.gtm-tool .gt-hero h1, body.gtm-tool h1.gt-h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0 0 1.1rem;
  max-width: 16ch;
}
body.gtm-tool .gt-hero .gt-sub { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--muted); max-width: 52ch; margin: 0; }
body.gtm-tool h2.gt-h2 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 1rem; }
body.gtm-tool h3.gt-h3 { font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 .4rem; }
body.gtm-tool .gt-lede { font-size: 1.05rem; line-height: 1.65; color: var(--muted); max-width: 64ch; margin: 0; }
body.gtm-tool .gt-label {
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .9rem;
  display: block;
}
body.gtm-tool .gt-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: end; margin-bottom: clamp(28px, 3vw, 40px); }
body.gtm-tool .gt-head > :last-child { justify-self: start; }
@media (max-width: 960px) { body.gtm-tool .gt-head { grid-template-columns: 1fr; align-items: start; } }

/* ---- surfaces ---- */
body.gtm-tool .gt-panel {
  background: var(--surface);
  border: 2px solid var(--c-ink);
  border-radius: var(--r-panel);
  box-shadow: 6px 6px 0 var(--c-ink);
  padding: clamp(20px, 2.4vw, 32px);
}
body.gtm-tool .gt-card {
  background: var(--surface);
  border: 2px solid var(--c-ink);
  border-radius: var(--r-panel);
  box-shadow: none;
  padding: 20px 22px;
}
body.gtm-tool .gt-flat { border: var(--gt-line); border-radius: var(--r-panel); background: var(--surface); padding: 20px 22px; }
body.gtm-tool .gt-answer { border-left: 4px solid var(--c-yellow); padding: 4px 0 4px 18px; font-size: 1.08rem; line-height: 1.6; color: var(--fg); margin: 0 0 1.2rem; }
body.gtm-tool .gt-rule { border: 0; border-top: var(--gt-line); margin: 0; }

/* ---- list rows (checklists, FAQ, connections): flat, no shadow ---- */
body.gtm-tool .gt-rows { list-style: none; margin: 0; padding: 0; border-top: var(--gt-line); }
body.gtm-tool .gt-rows > li, body.gtm-tool .gt-rows > details { border-bottom: var(--gt-line); padding: 16px 0; }
body.gtm-tool .gt-rows > details > summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
body.gtm-tool .gt-rows > details > summary::-webkit-details-marker { display: none; }
body.gtm-tool .gt-rows > details > summary::after { content: "+"; font-family: "JetBrains Mono", monospace; font-weight: 700; }
body.gtm-tool .gt-rows > details[open] > summary::after { content: "\2212"; }
body.gtm-tool .gt-rows > details > :not(summary) { margin: .7rem 0 0; color: var(--muted); line-height: 1.6; max-width: 72ch; }
body.gtm-tool .gt-rows > details > summary:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 4px; border-radius: 4px; }

/* ---- buttons: two styles only ---- */
body.gtm-tool .gt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 2px solid var(--c-ink); font-weight: 700; font-size: .98rem; text-decoration: none;
  background: var(--c-yellow); color: var(--c-ink); box-shadow: 4px 4px 0 var(--c-ink);
  transition: transform .12s ease, box-shadow .12s ease; cursor: pointer;
}
body.gtm-tool .gt-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-ink); }
body.gtm-tool .gt-btn:active { transform: translate(4px, 4px); box-shadow: none; }
body.gtm-tool .gt-btn:focus-visible { outline: 3px solid var(--c-purple); outline-offset: 3px; }
body.gtm-tool .gt-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: 4px 4px 0 var(--c-ink); }
body.gtm-tool .gt-btn.ghost { background: transparent; box-shadow: none; }
body.gtm-tool .gt-btn.ghost:hover { background: var(--c-ink); color: #fffdf7; transform: none; }
body.gtm-tool .gt-link { font-weight: 700; color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.gtm-tool .gt-link:hover { text-decoration-color: var(--c-yellow); }

/* ---- inputs ---- */
body.gtm-tool .gt-field { display: grid; gap: 6px; }
body.gtm-tool .gt-field > label { font-weight: 700; font-size: .92rem; }
body.gtm-tool .gt-field .gt-hint { font-size: .82rem; line-height: 1.45; color: var(--muted); margin: 0; }
body.gtm-tool .gt-input {
  min-height: 46px; padding: 0 14px; border: 2px solid var(--c-ink); border-radius: var(--r-in);
  background: #fff; font: inherit; color: var(--c-ink); width: 100%; box-sizing: border-box;
}
body.gtm-tool .gt-input:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: 1px; }

/* ---- closing band: author + one CTA on the left, sibling tools on the right ---- */
body.gtm-tool .gt-close { background: var(--c-ink); color: #fffdf7; }
/* the closing band sits directly on the dark site footer; a hairline keeps them two things */
body.gtm-tool .gt-close { border-bottom: 1px solid rgba(255, 253, 247, .14); }
body.gtm-tool .gt-close h2 { color: #fffdf7; }
body.gtm-tool .gt-close .gt-lede { color: rgba(255, 253, 247, .72); }
body.gtm-tool .gt-close .gt-label { color: rgba(255, 253, 247, .6); }
body.gtm-tool .gt-close .gt-author { display: flex; align-items: center; gap: 12px; margin: 1.4rem 0 1.6rem; font-size: .9rem; color: rgba(255, 253, 247, .8); }
body.gtm-tool .gt-close .gt-author img { width: 44px; height: 44px; border-radius: 999px; border: 2px solid #fffdf7; object-fit: cover; }
body.gtm-tool .gt-close .gt-btn { box-shadow: 4px 4px 0 rgba(255, 253, 247, .35); border-color: var(--c-yellow); }
body.gtm-tool .gt-close .gt-btn:hover { box-shadow: 2px 2px 0 rgba(255, 253, 247, .35); }
body.gtm-tool .gt-close .gt-tools { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 253, 247, .18); }
body.gtm-tool .gt-close .gt-tools li { border-bottom: 1px solid rgba(255, 253, 247, .18); }
body.gtm-tool .gt-close .gt-tools a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; color: #fffdf7; text-decoration: none; }
body.gtm-tool .gt-close .gt-tools a strong { font-size: 1.05rem; }
body.gtm-tool .gt-close .gt-tools a span { grid-column: 1; color: rgba(255, 253, 247, .62); font-size: .88rem; }
body.gtm-tool .gt-close .gt-tools a::after { content: "\2192"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--c-yellow); font-weight: 700; }
body.gtm-tool .gt-close .gt-tools a:hover strong { color: var(--c-yellow); }
body.gtm-tool .gt-close .gt-tools a:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 4px; }

/* ---- motion: reduced-motion keeps everything visible ---- */
@media (prefers-reduced-motion: reduce) {
  body.gtm-tool .gt-btn { transition: none; }
}

/* ===========================================================
   Site-standard FAQ and final CTA (2026-10-15)
   Ported from the homepage / service pages (motion/styles.css .faq, .qa,
   .final, .fin-card, .fin-cal) so these pages close the same way the rest
   of the site does. Markup contract: resources/gtm-tools-snippets.html.
   Needs Instrument Serif (ital) loaded for the <em> in headings.
   =========================================================== */
body.gtm-tool {
  --cream: #fff5e6;
  --ink-2: #2a3340;
  --f-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
body.gtm-tool .gt-eyebrow {
  font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem;
}
body.gtm-tool .gt-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
body.gtm-tool .gt-display { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.6rem); font-weight: 800; letter-spacing: -.045em; line-height: .98; margin: 0; }
body.gtm-tool .gt-display em, body.gtm-tool .gt-faq h2 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }

/* ---- FAQ: cream band, sticky question side, ruled answers, round toggle ---- */
body.gtm-tool .gt-faq { background: var(--cream); border-top: 2px solid var(--c-ink); padding: clamp(5rem, 12vh, 8rem) 0; }
body.gtm-tool .gt-faq .gt-wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); }
body.gtm-tool .gt-faq-side { position: sticky; top: 110px; align-self: start; }
body.gtm-tool .gt-faq-list { border-top: 2px solid var(--c-ink); }
body.gtm-tool .qa { border-bottom: 2px solid var(--c-ink); }
body.gtm-tool .qa-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  text-align: left; padding: 1.35rem 0; background: none; border: 0; cursor: pointer; color: var(--c-ink);
  font: inherit; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.25;
}
body.gtm-tool .qa-q:focus-visible { outline: 3px solid var(--c-purple); outline-offset: 4px; border-radius: 6px; }
body.gtm-tool .qa-i { flex: none; position: relative; width: 38px; height: 38px; border: 2px solid var(--c-ink); border-radius: 50%; background: #fffdf7; transition: transform 520ms var(--spring), background-color 160ms ease; }
body.gtm-tool .qa-i::before, body.gtm-tool .qa-i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--c-ink); }
body.gtm-tool .qa-i::after { transform: rotate(90deg); }
body.gtm-tool .qa-q:hover .qa-i { background: var(--c-yellow); }
body.gtm-tool .qa-q[aria-expanded="true"] .qa-i { transform: rotate(135deg); background: var(--c-yellow); }
body.gtm-tool .qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--spring); }
body.gtm-tool .qa-a > div { overflow: hidden; }
body.gtm-tool .qa-a p { margin: 0; padding: 0 3.5rem 1.5rem 0; color: var(--ink-2); max-width: 60ch; line-height: 1.6; }
body.gtm-tool .qa.open .qa-a { grid-template-rows: 1fr; }
@media (max-width: 900px) {
  body.gtm-tool .gt-faq .gt-wrap { grid-template-columns: 1fr; }
  body.gtm-tool .gt-faq-side { position: static; }
  body.gtm-tool .qa-a p { padding-right: 0; }
}

/* ---- Final CTA: yellow band, paper card left, live booking calendar right ---- */
body.gtm-tool .gt-final { background: var(--c-yellow); border-top: 2px solid var(--c-ink); padding: clamp(4.5rem, 10vh, 7rem) 0; }
/* card on top (two even halves), calendar full width below: at full width Cal renders its
   desktop layout (event details beside the month grid) instead of a tall stacked column */
body.gtm-tool .gt-final .gt-wrap { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 3vw, 2.8rem); }
body.gtm-tool .fin-card {
  background: #fffdf7; border: 2px solid var(--c-ink); border-radius: 26px; box-shadow: 12px 12px 0 var(--c-ink);
  padding: clamp(1.8rem, 3.6vw, 3.4rem); display: flex; flex-direction: column; justify-content: center;
}
body.gtm-tool .fin-card h2 { font-size: clamp(2.2rem, 1rem + 2.2vw, 3.5rem); font-weight: 800; letter-spacing: -.05em; line-height: .95; margin: 0; }
body.gtm-tool .fin-card h2 em {
  font-family: inherit; font-style: normal; font-weight: 800; font-size: 1.12em; background: var(--c-yellow);
  border: 2px solid var(--c-ink); border-radius: 12px; padding: 0 .12em; box-shadow: 3px 3px 0 var(--c-ink);
  display: inline-block; transform: rotate(-3deg); line-height: .95; letter-spacing: -.05em;
}
body.gtm-tool .fin-card .fin-lede { margin: 1.5rem 0 1.6rem; color: var(--ink-2); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); line-height: 1.6; }
body.gtm-tool .fin-steps { list-style: none; margin: 0 0 1.6rem; padding: 0; border-top: 2px solid var(--c-ink); }
body.gtm-tool .fin-steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .8rem; padding: .85rem 0; border-bottom: 1px solid rgba(13, 20, 33, .18); line-height: 1.45; color: var(--ink-2); }
body.gtm-tool .fin-steps b { display: grid; place-items: center; height: 1.8rem; border-radius: 8px; border: 2px solid var(--c-ink); background: var(--c-yellow); font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--c-ink); }
body.gtm-tool .fin-steps li:nth-child(2) b { background: var(--c-pink); }
body.gtm-tool .fin-steps li:nth-child(3) b { background: var(--c-mint); }
body.gtm-tool .fin-steps strong { color: var(--c-ink); }
body.gtm-tool .fin-author { display: flex; align-items: center; gap: 12px; font-size: .9rem; color: var(--ink-2); margin: 0 0 1.4rem; }
body.gtm-tool .fin-author img { width: 44px; height: 44px; border-radius: 999px; border: 2px solid var(--c-ink); object-fit: cover; flex: none; }
body.gtm-tool .fin-more { margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(13, 20, 33, .18); font-size: .9rem; color: var(--ink-2); line-height: 1.7; }
body.gtm-tool .fin-more a { color: var(--c-ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
body.gtm-tool .fin-cal { background: #fff; border: 2px solid var(--c-ink); border-radius: 26px; box-shadow: 12px 12px 0 var(--c-ink); overflow: hidden; display: flex; flex-direction: column; }
body.gtm-tool .cal-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.2rem; background: var(--c-ink); color: #fffdf7; font-family: "JetBrains Mono", monospace; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
body.gtm-tool .cal-head svg { width: 24px; height: 24px; color: #fffdf7; flex: none; }
body.gtm-tool .cal-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; background: var(--c-mint); }
body.gtm-tool .cal-inline { flex: 1; min-height: 560px; }
/* Cal sizes its iframe to its own content (1,400px+ in some browsers); cap the card
   so the closing band stays one screen tall and the calendar scrolls inside it. */
body.gtm-tool .fin-cal .cal-inline { min-height: 500px; }
body.gtm-tool .gt-final .fin-card { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
body.gtm-tool .fin-a .fin-lede { margin-bottom: 1.2rem; }
body.gtm-tool .fin-b .fin-steps { margin-top: .4rem; }
body.gtm-tool .fin-card h2 em { margin-top: .12em; }
body.gtm-tool .fin-book { margin: 0; font-weight: 700; font-size: 1.02rem; }
body.gtm-tool .fin-book a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-yellow); text-decoration-thickness: 3px; text-underline-offset: 5px; }
body.gtm-tool .fin-book a::after { content: " \2193"; }
body.gtm-tool .fin-book a:hover { text-decoration-color: var(--c-ink); }
body.gtm-tool .cal-fallback { padding: 2rem 1.4rem; color: var(--muted); margin: 0; }
body.gtm-tool .cal-inline:has(iframe) .cal-fallback { display: none; }
body.gtm-tool .cal-fallback a { color: var(--c-ink); font-weight: 700; }
@media (max-width: 960px) {
  body.gtm-tool .gt-final .fin-card { grid-template-columns: 1fr; }
  body.gtm-tool .fin-card, body.gtm-tool .fin-cal { box-shadow: 8px 8px 0 var(--c-ink); }
}
@media (prefers-reduced-motion: reduce) {
  body.gtm-tool .qa-i, body.gtm-tool .qa-a { transition: none; }
}