/* Successor Coach — brand tokens and base typography.
 *
 * Type: the brand face is Gravesend Sans (Bold/Medium), which is licensed. Until
 * the webfont files are in place, headings fall back to Archivo — a geometric
 * sans with a comparable large x-height and the same sturdy, unfussy tone.
 * Dropping Gravesend Sans .woff2 files into assets/fonts/ and uncommenting the
 * @font-face blocks below is the only change needed to make it exact.
 */

/*
@font-face {
  font-family: 'Gravesend Sans';
  src: url('../fonts/GravesendSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Gravesend Sans';
  src: url('../fonts/GravesendSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
*/

:root {
  /* Brand — WillBryanDesign, 2024. Verified against SuccessorCoach_Logo_INFO.
   * These three are the whole palette. Do not introduce new hues.
   *
   *   --green  PANTONE 339          CMYK 84/0/56/0    #00af85
   *   --ink    PANTONE 445          CMYK 70/65/60/50  #38383b
   *   --gray   PANTONE Cool Gray 7  CMYK 0/0/0/50     #969696
   *
   * --green-dark and the tints are derived, not brand colours: the green is
   * too light to carry small text on white (2.4:1), so links and eyebrows use
   * the darkened step. The logo and any large green fill use the real value.
   */
  --green: #00af85;
  --green-dark: #00795c;
  --green-tint: #e6f7f3;
  --green-tint-2: #f3fbf9;
  --ink: #38383b;
  --gray: #969696;

  /* Derived neutrals */
  --ink-soft: #5a5a5e;
  --rule: #e3e3e5;
  --rule-soft: #f0f0f1;
  --paper: #ffffff;
  --paper-alt: #fafaf9;

  /* Semantic — score flags */
  --flag-priority: #c2413a;
  --flag-priority-tint: #fbeceb;
  --flag-develop: #b8862b;
  --flag-develop-tint: #fdf5e7;
  --flag-strength: var(--green);
  --flag-strength-tint: var(--green-tint);

  --display: 'Gravesend Sans', 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;

  --measure: 34rem;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(56, 56, 59, 0.06), 0 8px 24px rgba(56, 56, 59, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.75rem, 1.25rem + 2.2vw, 2.6rem);
}
h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
}
h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

a {
  color: var(--green-dark);
  text-underline-offset: 2px;
}

small,
.small {
  font-size: 0.875rem;
  line-height: 1.5;
}

.muted {
  color: var(--ink-soft);
}

.quiet {
  color: var(--gray);
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.75rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:hover:not(:disabled) {
  background: var(--green-dark);
}

.btn:disabled {
  background: var(--rule);
  color: var(--gray);
  cursor: not-allowed;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--paper-alt);
  border-color: var(--gray);
  color: var(--ink);
}

.btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
  font-family: var(--body);
  font-weight: 500;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
}

.btn--quiet:hover:not(:disabled) {
  background: var(--paper-alt);
  color: var(--ink);
}

.btn--block {
  width: 100%;
}

/* ------------------------------------------------------------- focus */

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

/* -------------------------------------------------------------- form */

.field {
  display: block;
  margin-bottom: 1rem;
}

.field > span {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

input[type='text'],
input[type='email'],
select,
textarea {
  width: 100%;
  min-height: 50px;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.4;
}

input::placeholder {
  color: #b9b9bb;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: 0 0 0 3px var(--green-tint);
}

/* Honeypot — present in the DOM, never presented to a person. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------- tick list */

/* A list of things you get, marked with the brand square rather than a bullet.
   Lives here rather than in one page's stylesheet because /demo and /try both
   use it — it was in demo.css, and the tester page silently fell back to
   browser default bullets. */

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticks li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
  color: var(--ink-soft);
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--green);
}

/* ------------------------------------------------------------ layout */

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Keeps a hyphenated compound on one line, so a headline never breaks at
   "next-" (a tester note, 2026-09-22). Here, not site.css, because generic
   things belong in the stylesheet every page loads. */
.nowrap {
  white-space: nowrap;
}

/* --------------------------------------------------- confidentiality */

.confidentiality {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: var(--green-tint-2);
  padding: 1.1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.confidentiality h3 {
  font-size: 0.9375rem;
  margin-bottom: 0.5rem;
}

.confidentiality p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* The Delk Consulting mark, wherever the parent business is named.
   Part of the point of Successor Coach is to lead to consulting work, so the
   mark travels with the sentence that says whose it is rather than being
   given a slot of its own — small, inline, aligned to the text baseline.
   Alt is empty on purpose: the words "Delk Consulting" are already right
   there, and a screen reader announcing the mark as well would say it twice. */
/* The Delk Consulting mark, inline in "Successor Coach is [mark] a brand of
   Delk Consulting" in every footer.

   The numbers moved when the asset became a vector on 2026-09-08. The PNG was
   855x793 with 721x721 of artwork floating inside it, so about 9% of its height
   and 12% of its width were transparent padding — which meant the CSS asked for
   1.05em and the mark DREW at 0.955em, and the 0.1em margins sat outside
   another 0.09em of invisible padding. The .svg is cropped to the artwork, so
   the same appearance now needs the smaller box and the larger margin. Measured
   against the old rendering side by side, not guessed. */
.delk-mark {
  height: 0.95em;
  width: auto;
  vertical-align: -0.13em;
  margin: 0 0.2em;
  opacity: 0.85;
}

/* ---------------------------------------------------------- brandmark

   Horizontal adaptation of the stacked lockup: the mark, then the wordmark
   set in the brand face. The full lockup is square and mostly whitespace, so
   it reads as a stamp rather than a logo in a 56px bar.

   Lives HERE, not in a page stylesheet, because it is a brand component and
   every page has a header. It sat in diagnostic.css and /demo does not load
   that file, so the walkthrough — the page a buyer lands on — rendered its
   logo as unstyled default-serif text with Coach running on after
   Successor. Since the first commit, and invisible to anyone reading either
   file on its own. */
/* Horizontal adaptation of the stacked lockup: the mark, then the wordmark
 * set in the brand face. The full lockup is square and mostly whitespace, so
 * it reads as a stamp rather than a logo in a 56px bar. */
.brandmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink);
  text-decoration: none;
}

.brandmark__mark {
  width: 30px;
  height: auto;
  flex: none;
  display: block;
}

.brandmark__type {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.brandmark__type i {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Small print, wherever a page has some.

   Lives here rather than in plan.css because four pages use it and only two
   load that file. /try's four note paragraphs rendered at full body size and
   full ink — the same shape of bug as the brandmark above, caught by
   test/stylesheet-coverage.test.js. */
.note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* ------------------------------------------------------------- the footer

   Every page has this footer, so its base lives here rather than being
   redefined per page. It was defined only in diagnostic.css and plan.css,
   which meant a new page carrying the same markup got an unstyled list of
   links — the exact pairing stylesheet-coverage.test.js exists to catch, and
   it caught it.

   diagnostic.css and plan.css still carry their own versions, and still win,
   because both load after this file. They have drifted from each other
   (different padding, one has a background) so merging them would change two
   live pages for no reason anybody asked for. This is the floor, not a
   replacement. */

.foot {
  border-top: 1px solid var(--rule);
  padding: 1.5rem 0 2.5rem;
  font-size: 0.8125rem;
  color: var(--gray);
}

.foot p {
  margin: 0 0 0.5rem;
}

.foot a,
.foot__links a {
  color: var(--ink-soft);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0.5rem 0 0;
  list-style: none;
  padding: 0;
}

/* The trademark notice on the stacked wordmark.

   Its own span because the "COACH" line carries 0.24em letter-spacing, which
   would push the symbol away from the word it belongs to. ™ is already drawn
   raised and small in every face we use, so this only has to undo the tracking
   and give it a hair of space — no vertical-align, which would raise it twice.

   Unregistered notice only. This is ™ and must not become ® unless the mark is
   actually registered with the USPTO. */
.brandmark__tm {
  letter-spacing: normal;
  margin-left: 0.12em;
}