/* ==========================================================================
   The Notary Box - components
   --------------------------------------------------------------------------
   Depends on tokens.css. Every selector is nested under .tnb.

   Class names are all `tnb-` prefixed rather than reusing generic names like
   .btn or .card, because the legacy Canvas / Bootstrap 3 stylesheets define
   those and may still be in the document. Namespacing is what keeps the two
   worlds from touching.
   ========================================================================== */

/* ---- Scoped reset ---------------------------------------------------------
   Defensive: neutralises the base styles design1/design2/bootstrap.css apply
   to bare elements, so a public page renders identically whether or not a
   legacy sheet happens to still be attached.
   ------------------------------------------------------------------------ */
.tnb,
.tnb *,
.tnb *::before,
.tnb *::after {
  box-sizing: border-box;
}

.tnb {
  margin: 0;
  font-family: var(--tnb-font-body);
  font-size: var(--tnb-text-base);
  line-height: var(--tnb-leading);
  color: var(--tnb-text);
  background: var(--tnb-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* :where() so this contributes no specificity beyond .tnb itself. Written as
   `.tnb h2` it scores 0,1,1 and silently beats every single-class component
   rule - which rendered .tnb-footer__heading in dark text on the dark footer
   until this was caught. Component classes must always win over the reset. */
.tnb :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--tnb-font-display);
  font-weight: var(--tnb-weight-bold);
  line-height: var(--tnb-leading-tight);
  letter-spacing: var(--tnb-track-tight);
  color: var(--tnb-text);
  text-transform: none;
}

.tnb p { margin: 0; }
.tnb ul, .tnb ol { margin: 0; padding: 0; }
.tnb li { list-style: none; }
.tnb img { max-width: 100%; height: auto; display: block; border: 0; }

.tnb a {
  color: var(--tnb-purple);
  text-decoration: none;
  transition: color var(--tnb-fast) var(--tnb-ease);
}
.tnb a:hover { color: var(--tnb-purple-700); text-decoration: underline; }

.tnb button,
.tnb input,
.tnb select,
.tnb textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

/* Quality floor: a visible, branded focus ring everywhere, keyboard only. */
.tnb :focus-visible {
  outline: 3px solid var(--tnb-purple-400);
  outline-offset: 2px;
  border-radius: var(--tnb-radius-sm);
}

/* ---- Layout ------------------------------------------------------------ */
.tnb-container {
  width: 100%;
  max-width: var(--tnb-container);
  margin-inline: auto;
  padding-inline: var(--tnb-space-5);
}

.tnb-container--narrow { max-width: var(--tnb-container-narrow); }

.tnb-section { padding-block: var(--tnb-section); }
.tnb-section--tint { background: var(--tnb-surface); }
.tnb-section--deep { background: var(--tnb-purple-900); color: var(--tnb-white); }
.tnb-section--deep h1,
.tnb-section--deep h2,
.tnb-section--deep h3 { color: var(--tnb-white); }
.tnb-section--deep a { color: var(--tnb-purple-200); }

/* ---- Typography helpers ------------------------------------------------ */
.tnb-eyebrow {
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  font-weight: var(--tnb-weight-medium);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-action);
}
.tnb-section--deep .tnb-eyebrow { color: var(--tnb-orange); }

.tnb-h1 { font-size: var(--tnb-text-4xl); }
.tnb-h2 { font-size: var(--tnb-text-3xl); }
.tnb-h3 { font-size: var(--tnb-text-xl); }

.tnb-lede {
  font-size: var(--tnb-text-lg);
  color: var(--tnb-muted);
  max-width: 52ch;
}
.tnb-section--deep .tnb-lede { color: var(--tnb-purple-200); }

.tnb-stack > * + * { margin-top: var(--tnb-space-4); }
.tnb-stack-lg > * + * { margin-top: var(--tnb-space-6); }

.tnb-section-head {
  max-width: 62ch;
  margin-bottom: var(--tnb-space-7);
}
.tnb-section-head .tnb-eyebrow { display: block; margin-bottom: var(--tnb-space-3); }
.tnb-section-head .tnb-lede { margin-top: var(--tnb-space-4); }

/* ---- Buttons -----------------------------------------------------------
   Only --tnb-action is ever used behind white text. See tokens.css.
   ---------------------------------------------------------------------- */
.tnb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tnb-space-2);
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--tnb-radius);
  font-family: var(--tnb-font-body);
  font-size: var(--tnb-text-base);
  font-weight: var(--tnb-weight-semi);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--tnb-fast) var(--tnb-ease),
              border-color var(--tnb-fast) var(--tnb-ease),
              color var(--tnb-fast) var(--tnb-ease),
              transform var(--tnb-fast) var(--tnb-ease);
}
.tnb-btn:hover { text-decoration: none; }
.tnb-btn:active { transform: translateY(1px); }
.tnb-btn[disabled],
.tnb-btn.tnb-is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.tnb-btn--primary {
  background: var(--tnb-action);
  border-color: var(--tnb-action);
  color: var(--tnb-white);
}
.tnb-btn--primary:hover {
  background: var(--tnb-action-700);
  border-color: var(--tnb-action-700);
  color: var(--tnb-white);
}

.tnb-btn--secondary {
  background: var(--tnb-purple);
  border-color: var(--tnb-purple);
  color: var(--tnb-white);
}
.tnb-btn--secondary:hover {
  background: var(--tnb-purple-700);
  border-color: var(--tnb-purple-700);
  color: var(--tnb-white);
}

.tnb-btn--ghost {
  background: transparent;
  border-color: var(--tnb-border-str);
  color: var(--tnb-text);
}
.tnb-btn--ghost:hover {
  border-color: var(--tnb-purple);
  color: var(--tnb-purple);
  background: var(--tnb-purple-50);
}

.tnb-btn--quiet {
  background: transparent;
  border-color: transparent;
  color: var(--tnb-purple);
  padding-inline: var(--tnb-space-2);
}
.tnb-btn--quiet:hover { color: var(--tnb-purple-700); background: var(--tnb-purple-50); }

.tnb-btn--lg { padding: 0.9375rem 2rem; font-size: var(--tnb-text-lg); }
.tnb-btn--block { display: flex; width: 100%; }

/* ==========================================================================
   SIGNATURE ELEMENT - the signing line
   --------------------------------------------------------------------------
   The primary search is drawn as the ruled line and ✗ mark that indicate
   where to sign on a document. It is the most recognisable artifact in
   notarisation, and it is already, literally, a field you fill in.

   Used for the hero search and the find-an-agent search. Not decorative -
   if it stops being the primary action on a page, use .tnb-field instead.
   ========================================================================== */
.tnb-signline {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--tnb-space-3);
  padding-bottom: var(--tnb-space-3);
}

.tnb-signline::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--tnb-border-str);
  transform-origin: left center;
  transition: background-color var(--tnb-med) var(--tnb-ease),
              height var(--tnb-med) var(--tnb-ease);
}

.tnb-signline:focus-within::after {
  background: var(--tnb-purple);
  height: 3px;
}

.tnb-signline__mark {
  flex: none;
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xl);
  font-weight: var(--tnb-weight-medium);
  line-height: 1;
  color: var(--tnb-orange);
  user-select: none;
  transform: translateY(-0.05em);
}

.tnb-signline__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--tnb-font-body);
  font-size: var(--tnb-text-xl);
  font-weight: var(--tnb-weight-medium);
  color: var(--tnb-text);
}
.tnb-signline__input::placeholder {
  color: var(--tnb-muted);
  font-weight: var(--tnb-weight-normal);
}
.tnb-signline__input:focus { outline: none; }

/* The line owns the focus ring, not the bare input inside it. */
.tnb-signline:focus-within {
  outline: 3px solid var(--tnb-purple-400);
  outline-offset: 6px;
  border-radius: var(--tnb-radius-sm);
}
.tnb-signline:focus-within .tnb-signline__input:focus-visible { outline: none; }

.tnb-signline__label {
  display: block;
  margin-bottom: var(--tnb-space-3);
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  font-weight: var(--tnb-weight-medium);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-muted);
}

.tnb-searchrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tnb-space-4);
}
.tnb-searchrow > .tnb-signline-group { flex: 1 1 320px; min-width: 0; }

/* ---- Hero -------------------------------------------------------------- */
.tnb-hero {
  padding-top: calc(var(--tnb-header-h) + var(--tnb-space-8));
  padding-bottom: var(--tnb-space-9);
  background:
    radial-gradient(80rem 40rem at 85% -10%, var(--tnb-purple-50) 0%, transparent 60%),
    var(--tnb-white);
  overflow: hidden;
}

.tnb-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--tnb-space-8);
  align-items: center;
}

.tnb-hero__title {
  font-size: var(--tnb-text-4xl);
  max-width: 18ch;
  margin-top: var(--tnb-space-3);
  /* Without this the last word drops to a line of its own. */
  text-wrap: balance;
}
.tnb-hero__title em {
  font-style: normal;
  color: var(--tnb-purple);
}
/* The display face is set at line-height 1.08, so its line box crops tight
   and a 1.5rem gap reads as almost none. */
.tnb-hero__lede { margin-top: var(--tnb-space-6); }
.tnb-hero__search { margin-top: var(--tnb-space-7); }

/* Copy beside actions, used by the notary recruitment banner. */
.tnb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--tnb-space-7);
  align-items: center;
}
@media (max-width: 900px) {
  .tnb-split { grid-template-columns: 1fr; }
}

.tnb-trustrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tnb-space-6);
  margin-top: var(--tnb-space-7);
  padding-top: var(--tnb-space-5);
  border-top: 1px solid var(--tnb-border);
}
.tnb-trustrow__item { min-width: 0; }
.tnb-trustrow__value {
  display: block;
  font-family: var(--tnb-font-display);
  font-size: var(--tnb-text-2xl);
  font-weight: var(--tnb-weight-bold);
  letter-spacing: var(--tnb-track-tight);
  color: var(--tnb-purple);
}
.tnb-trustrow__label {
  display: block;
  margin-top: var(--tnb-space-1);
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-muted);
}
.tnb-trustrow__detail {
  margin-top: var(--tnb-space-2);
  font-size: var(--tnb-text-sm);
  color: var(--tnb-muted);
}

/* Marks the hero preview card as illustrative, not a real listing. */
.tnb-sample-note {
  margin-top: var(--tnb-space-4);
  text-align: right;
  color: var(--tnb-muted);
}

/* Actions laid beside copy in a banner. */
.tnb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tnb-space-4);
}

/* Ghost button on a deep purple ground - the default ghost border is tuned
   for white and disappears here. */
.tnb-section--deep .tnb-btn--ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--tnb-white);
}
.tnb-section--deep .tnb-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--tnb-white);
  color: var(--tnb-white);
}

/* Contact detail block */
.tnb-contact__label {
  display: block;
  color: var(--tnb-muted);
}
.tnb-contact__address {
  margin-top: var(--tnb-space-4);
  color: var(--tnb-muted);
}

/* ---- Agent card (hero preview + search results) ------------------------ */
.tnb-agentstack { position: relative; }
.tnb-agentstack__behind {
  position: absolute;
  inset: 0;
  transform: translate(var(--tnb-space-5), calc(var(--tnb-space-5) * -1)) rotate(2deg);
  opacity: 0.55;
  pointer-events: none;
}

/* The ghost card is absolutely positioned, so it paints above its static
   sibling no matter what the source order is. Lifting the real card out of
   the static layer is what keeps it in front. */
.tnb-agentstack > .tnb-agent:not(.tnb-agentstack__behind) {
  position: relative;
  z-index: 1;
}

.tnb-agent {
  display: flex;
  gap: var(--tnb-space-4);
  padding: var(--tnb-space-5);
  background: var(--tnb-white);
  border: 1px solid var(--tnb-border);
  border-radius: var(--tnb-radius-lg);
  box-shadow: var(--tnb-shadow-lg);
}
.tnb-agent__avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--tnb-radius-pill);
  background: var(--tnb-purple-50);
  object-fit: cover;
}
.tnb-agent__body { min-width: 0; flex: 1 1 auto; }
.tnb-agent__name {
  font-family: var(--tnb-font-display);
  font-size: var(--tnb-text-lg);
  font-weight: var(--tnb-weight-bold);
  letter-spacing: var(--tnb-track-tight);
}
.tnb-agent__meta {
  margin-top: var(--tnb-space-1);
  font-size: var(--tnb-text-sm);
  color: var(--tnb-muted);
}
.tnb-agent__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tnb-space-2);
  margin-top: var(--tnb-space-3);
}

.tnb-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tnb-space-1);
  padding: 0.1875rem 0.5rem;
  border-radius: var(--tnb-radius-sm);
  background: var(--tnb-purple-50);
  color: var(--tnb-purple-700);
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  font-weight: var(--tnb-weight-medium);
  letter-spacing: 0.02em;
}
.tnb-badge--verified { background: var(--tnb-success-bg); color: var(--tnb-success); }

/* ---- Card grid --------------------------------------------------------- */
.tnb-grid {
  display: grid;
  gap: var(--tnb-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.tnb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

.tnb-card {
  padding: var(--tnb-space-6);
  background: var(--tnb-white);
  border: 1px solid var(--tnb-border);
  border-radius: var(--tnb-radius-lg);
  transition: border-color var(--tnb-med) var(--tnb-ease),
              box-shadow var(--tnb-med) var(--tnb-ease),
              transform var(--tnb-med) var(--tnb-ease);
}
.tnb-card__title {
  font-size: var(--tnb-text-xl);
  margin-bottom: var(--tnb-space-3);
}
.tnb-card__body { color: var(--tnb-muted); }

.tnb-card--link:hover {
  border-color: var(--tnb-purple-200);
  box-shadow: var(--tnb-shadow);
  transform: translateY(-2px);
}

/* Cube-derived accent. The logo mark is an isometric box; the card marker
   echoes its top face rather than adding an unrelated icon. */
.tnb-card__mark {
  width: 28px;
  height: 28px;
  margin-bottom: var(--tnb-space-4);
  background: var(--tnb-orange);
  clip-path: polygon(50% 0%, 100% 28%, 50% 56%, 0% 28%);
}

/* ---- Steps ------------------------------------------------------------
   Numbered only because ordering is real information here - a signing runs
   search, then assign, then sign. Do not reuse for unordered content.
   --------------------------------------------------------------------- */
.tnb-steps {
  display: grid;
  gap: var(--tnb-space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  counter-reset: tnb-step;
}
.tnb-step { position: relative; padding-top: var(--tnb-space-5); border-top: 2px solid var(--tnb-border); }
.tnb-step::before {
  counter-increment: tnb-step;
  content: counter(tnb-step, decimal-leading-zero);
  position: absolute;
  top: calc(var(--tnb-space-5) * -1);
  left: 0;
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-sm);
  font-weight: var(--tnb-weight-medium);
  color: var(--tnb-action);
}
.tnb-step__title { font-size: var(--tnb-text-lg); margin-bottom: var(--tnb-space-2); }
.tnb-step__body { color: var(--tnb-muted); font-size: var(--tnb-text-sm); }

/* ---- Forms (auth + contact) -------------------------------------------- */
.tnb-field { margin-bottom: var(--tnb-space-5); }
.tnb-field__label {
  display: block;
  margin-bottom: var(--tnb-space-2);
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  font-weight: var(--tnb-weight-medium);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-muted);
}
.tnb-field__req { color: var(--tnb-action); }

.tnb-input,
.tnb-select,
.tnb-textarea {
  display: block;
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border: 1px solid var(--tnb-border-str);
  border-radius: var(--tnb-radius);
  background: var(--tnb-white);
  font-size: var(--tnb-text-base);
  color: var(--tnb-text);
  transition: border-color var(--tnb-fast) var(--tnb-ease),
              box-shadow var(--tnb-fast) var(--tnb-ease);
}
.tnb-input::placeholder,
.tnb-textarea::placeholder { color: var(--tnb-muted); }

.tnb-input:hover,
.tnb-select:hover,
.tnb-textarea:hover { border-color: var(--tnb-purple-400); }

.tnb-input:focus,
.tnb-select:focus,
.tnb-textarea:focus {
  outline: none;
  border-color: var(--tnb-purple);
  box-shadow: 0 0 0 3px var(--tnb-purple-50);
}

.tnb-textarea { min-height: 8rem; resize: vertical; }

.tnb-field--invalid .tnb-input,
.tnb-field--invalid .tnb-select,
.tnb-field--invalid .tnb-textarea { border-color: var(--tnb-danger); }

.tnb-field__error {
  margin-top: var(--tnb-space-2);
  font-size: var(--tnb-text-sm);
  color: var(--tnb-danger);
}

.tnb-checkline {
  display: flex;
  align-items: flex-start;
  gap: var(--tnb-space-3);
  font-size: var(--tnb-text-sm);
}
.tnb-checkline input { margin-top: 0.2em; flex: none; }

.tnb-formgrid {
  display: grid;
  gap: 0 var(--tnb-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

/* ---- Auth panel -------------------------------------------------------- */
.tnb-authwrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: calc(var(--tnb-header-h) + var(--tnb-space-6)) var(--tnb-space-5) var(--tnb-space-8);
  background:
    radial-gradient(60rem 34rem at 50% 0%, var(--tnb-purple-50) 0%, transparent 65%),
    var(--tnb-surface);
}
.tnb-authcard {
  width: 100%;
  max-width: 27rem;
  padding: var(--tnb-space-7);
  background: var(--tnb-white);
  border: 1px solid var(--tnb-border);
  border-radius: var(--tnb-radius-lg);
  box-shadow: var(--tnb-shadow-lg);
}
.tnb-authcard--wide { max-width: 44rem; }
.tnb-authcard__head { margin-bottom: var(--tnb-space-6); }
/* White-label login: the client company's own logo above the title. */
.tnb-cobrand {
  max-width: 180px;
  max-height: 64px;
  width: auto;
  margin-bottom: var(--tnb-space-5);
  object-fit: contain;
}
.tnb-authcard__title { font-size: var(--tnb-text-2xl); }
.tnb-authcard__sub { margin-top: var(--tnb-space-3); color: var(--tnb-muted); font-size: var(--tnb-text-sm); }
.tnb-authcard__foot {
  margin-top: var(--tnb-space-6);
  padding-top: var(--tnb-space-5);
  border-top: 1px solid var(--tnb-border);
  font-size: var(--tnb-text-sm);
  color: var(--tnb-muted);
  text-align: center;
}

/* ---- Alerts ------------------------------------------------------------ */
.tnb-alert {
  padding: var(--tnb-space-4);
  border-radius: var(--tnb-radius);
  border-left: 3px solid transparent;
  font-size: var(--tnb-text-sm);
}
.tnb-alert--error { background: var(--tnb-danger-bg); border-left-color: var(--tnb-danger); color: var(--tnb-danger); }
.tnb-alert--success { background: var(--tnb-success-bg); border-left-color: var(--tnb-success); color: var(--tnb-success); }

/* ---- Header ------------------------------------------------------------ */
.tnb-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  height: var(--tnb-header-h);
  display: flex;
  align-items: center;
}
.tnb-header--solid {
  position: sticky;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--tnb-border);
}
.tnb-header__inner {
  display: flex;
  align-items: center;
  gap: var(--tnb-space-5);
  width: 100%;
}
.tnb-header__spacer { flex: 1 1 auto; }

/* ---- Logo lockup -------------------------------------------------------
   Rendered as type plus an SVG cube rather than logo-nb.png. The PNG sets
   "notary" in white with a thin outline - it was drawn for dark backgrounds
   and all but disappears on the light header. The cube echoes the mark in
   the original logo, where an isometric box replaces the O in BOX.

   The PNG is still used in the footer, where the dark ground suits it.
   ---------------------------------------------------------------------- */
.tnb-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--tnb-space-3);
}
.tnb-logo:hover { text-decoration: none; }

.tnb-logo__mark { width: 26px; height: 29px; flex: none; }
.tnb-logo__face-top   { fill: var(--tnb-orange); }
.tnb-logo__face-left  { fill: var(--tnb-purple); }
.tnb-logo__face-right { fill: var(--tnb-purple-700); }

.tnb-logo__type {
  font-family: var(--tnb-font-display);
  font-size: 1.375rem;
  font-weight: var(--tnb-weight-bold);
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}
.tnb-logo__the {
  font-family: var(--tnb-font-mono);
  font-size: 0.6875rem;
  font-weight: var(--tnb-weight-medium);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-action);
  margin-right: 0.25em;
  vertical-align: 0.35em;
}
.tnb-logo__notary { color: var(--tnb-purple); }
.tnb-logo__box { color: var(--tnb-action); }

.tnb-nav { display: flex; align-items: center; gap: var(--tnb-space-2); }
.tnb-nav__link {
  padding: var(--tnb-space-2) var(--tnb-space-3);
  border-radius: var(--tnb-radius-sm);
  font-size: var(--tnb-text-sm);
  font-weight: var(--tnb-weight-medium);
  color: var(--tnb-text);
}
.tnb-nav__link:hover { color: var(--tnb-purple); background: var(--tnb-purple-50); text-decoration: none; }
.tnb-nav__link.tnb-is-active { color: var(--tnb-purple); }

.tnb-navtoggle {
  display: none;
  padding: var(--tnb-space-2);
  border: 1px solid var(--tnb-border-str);
  border-radius: var(--tnb-radius-sm);
  background: var(--tnb-white);
  cursor: pointer;
}
.tnb-navtoggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tnb-text);
}
.tnb-navtoggle__bar + .tnb-navtoggle__bar { margin-top: 4px; }

/* ---- Footer ------------------------------------------------------------ */
.tnb-footer {
  padding-block: var(--tnb-space-8) var(--tnb-space-6);
  background: var(--tnb-purple-900);
  color: var(--tnb-purple-200);
  font-size: var(--tnb-text-sm);
}
.tnb-footer__grid {
  display: grid;
  gap: var(--tnb-space-6);
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  padding-bottom: var(--tnb-space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.tnb-footer__logo img { height: 30px; width: auto; }
.tnb-footer__blurb { margin-top: var(--tnb-space-4); max-width: 34ch; }
.tnb-footer__heading {
  margin-bottom: var(--tnb-space-3);
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-white);
}
.tnb-footer__list li + li { margin-top: var(--tnb-space-2); }
.tnb-footer a { color: var(--tnb-purple-200); }
.tnb-footer a:hover { color: var(--tnb-white); }
.tnb-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tnb-space-4);
  align-items: center;
  padding-top: var(--tnb-space-5);
}
.tnb-footer__base-spacer { flex: 1 1 auto; }

/* ---- Prose (terms, privacy, refund) ------------------------------------ */
.tnb-prose { max-width: 68ch; color: var(--tnb-text); }
.tnb-prose > * + * { margin-top: var(--tnb-space-4); }
.tnb-prose h2 { font-size: var(--tnb-text-2xl); margin-top: var(--tnb-space-7); }
.tnb-prose h3 { font-size: var(--tnb-text-lg); margin-top: var(--tnb-space-6); }
.tnb-prose p { color: var(--tnb-muted); }
.tnb-prose ul { padding-left: var(--tnb-space-5); }
.tnb-prose ul li { list-style: disc; color: var(--tnb-muted); }
.tnb-prose ul li + li { margin-top: var(--tnb-space-2); }
.tnb-prose strong { font-weight: var(--tnb-weight-semi); color: var(--tnb-text); }

/* ---- Table (search results) -------------------------------------------- */
.tnb-tablewrap { overflow-x: auto; border: 1px solid var(--tnb-border); border-radius: var(--tnb-radius-lg); }
.tnb-table { width: 100%; border-collapse: collapse; font-size: var(--tnb-text-sm); }
.tnb-table th {
  padding: var(--tnb-space-3) var(--tnb-space-4);
  text-align: left;
  background: var(--tnb-surface);
  border-bottom: 1px solid var(--tnb-border);
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  font-weight: var(--tnb-weight-medium);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-muted);
  white-space: nowrap;
}
.tnb-table td { padding: var(--tnb-space-4); border-bottom: 1px solid var(--tnb-border); vertical-align: top; }
.tnb-table tr:last-child td { border-bottom: 0; }
.tnb-table tbody tr:hover { background: var(--tnb-purple-50); }

/* ---- Find an agent -----------------------------------------------------
   Results as cards rather than a table: each row carries a photo, a name,
   a location and two certification dates, which a table makes cramped and
   unreadable on narrow screens.
   ---------------------------------------------------------------------- */
.tnb-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--tnb-space-5);
  margin-top: var(--tnb-space-6);
  padding-top: var(--tnb-space-5);
  border-top: 1px solid var(--tnb-border);
}
.tnb-filters__item { flex: 0 1 20rem; min-width: 0; }
.tnb-filters__check { padding-bottom: var(--tnb-space-3); }

.tnb-findlayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--tnb-space-6);
  align-items: start;
}

.tnb-results { display: grid; gap: var(--tnb-space-4); }

.tnb-result {
  display: flex;
  gap: var(--tnb-space-5);
  padding: var(--tnb-space-5);
  background: var(--tnb-white);
  border: 1px solid var(--tnb-border);
  border-radius: var(--tnb-radius-lg);
  transition: border-color var(--tnb-med) var(--tnb-ease),
              box-shadow var(--tnb-med) var(--tnb-ease);
}
.tnb-result:hover { border-color: var(--tnb-purple-200); box-shadow: var(--tnb-shadow); }

/* The row centres the map, so it needs to look selectable and to show which
   one the map is currently showing. */
.tnb-result { cursor: pointer; }
.tnb-result--selected {
  border-color: var(--tnb-purple);
  box-shadow: 0 0 0 1px var(--tnb-purple);
}
.tnb-result--selected .tnb-result__name a { color: var(--tnb-purple-700); }

/* The inner .notary-photo element is filled in by fileServer.js using the
   element id, so this only sizes the frame around it. */
.tnb-result__photo { flex: none; }
.tnb-result__photo .notary-photo {
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: var(--tnb-radius);
  background: var(--tnb-purple-50);
  text-align: center;
}
.tnb-result__photo .notary-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tnb-result__body { min-width: 0; flex: 1 1 auto; }
.tnb-result__name { font-size: var(--tnb-text-lg); }
.tnb-result__name a { color: var(--tnb-purple); }
.tnb-result__where { margin-top: var(--tnb-space-1); color: var(--tnb-muted); font-size: var(--tnb-text-sm); }
.tnb-result__miles { white-space: nowrap; }

.tnb-result__certs { margin-top: var(--tnb-space-3); }

/* Shared definition-list treatment for certification and detail fields. */
.tnb-deflist, .tnb-result__certs { display: grid; gap: var(--tnb-space-3); }
.tnb-deflist > div, .tnb-result__certs > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--tnb-space-4);
}
.tnb-deflist dt, .tnb-result__certs dt {
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-muted);
}
.tnb-deflist dd, .tnb-result__certs dd { margin: 0; font-size: var(--tnb-text-sm); }

.tnb-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tnb-space-4);
  margin-top: var(--tnb-space-5);
  padding-top: var(--tnb-space-5);
  border-top: 1px solid var(--tnb-border);
}
.tnb-pager__status {
  font-family: var(--tnb-font-mono);
  font-size: var(--tnb-text-xs);
  letter-spacing: var(--tnb-track-label);
  text-transform: uppercase;
  color: var(--tnb-muted);
  white-space: nowrap;
}

.tnb-map {
  position: sticky;
  top: calc(var(--tnb-header-h) + var(--tnb-space-4));
  height: 30rem;
  overflow: hidden;
  border: 1px solid var(--tnb-border);
  border-radius: var(--tnb-radius-lg);
}
/* ui-gmap nests four elements between .tnb-map and the element Google draws
   into: ui-gmap-google-map > .angular-google-map > .angular-google-map-container.
   Height has to be carried down every one of them - the container sets
   height:100% on itself, which resolves to zero unless each ancestor has a
   height of its own, and a zero-height container means no map renders at all. */
.tnb-map > ui-gmap-google-map,
.tnb-map .angular-google-map,
.tnb-map .angular-google-map-container {
  display: block;
  width: 100%;
  height: 100%;
}

.tnb-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--tnb-space-6);
  align-items: start;
}
.tnb-detail__main,
.tnb-detail__aside {
  padding: var(--tnb-space-6);
  background: var(--tnb-white);
  border: 1px solid var(--tnb-border);
  border-radius: var(--tnb-radius-lg);
}
.tnb-detail__head { display: flex; gap: var(--tnb-space-5); }
.tnb-detail__head .notary-photo { width: 128px; height: 128px; }
.tnb-detail__section {
  margin-top: var(--tnb-space-6);
  padding-top: var(--tnb-space-5);
  border-top: 1px solid var(--tnb-border);
}

@media (max-width: 900px) {
  .tnb-findlayout,
  .tnb-detail { grid-template-columns: 1fr; }
  .tnb-map { position: static; height: 22rem; }
}

@media (max-width: 720px) {
  .tnb-result { flex-direction: column; }
  .tnb-detail__head { flex-direction: column; }
  .tnb-deflist > div,
  .tnb-result__certs > div { grid-template-columns: 1fr; gap: var(--tnb-space-1); }
}

/* ---- Empty state ------------------------------------------------------- */
.tnb-empty {
  padding: var(--tnb-space-8) var(--tnb-space-5);
  text-align: center;
  border: 1px dashed var(--tnb-border-str);
  border-radius: var(--tnb-radius-lg);
  background: var(--tnb-surface);
}
.tnb-empty__title { font-size: var(--tnb-text-lg); margin-bottom: var(--tnb-space-2); }
.tnb-empty__body { color: var(--tnb-muted); font-size: var(--tnb-text-sm); max-width: 44ch; margin-inline: auto; }

/* ---- Utilities ---------------------------------------------------------
   A deliberately short spacing scale. If a layout needs something outside
   this set, it needs a component class, not another utility.
   ---------------------------------------------------------------------- */
/* Qualified with .tnb so they outrank design2's `.landing-page section p`
   (0,1,2), which would otherwise silently win on any paragraph and leave the
   utility doing nothing at all. */
.tnb .tnb-mt-2 { margin-top: var(--tnb-space-2); }
.tnb .tnb-mt-3 { margin-top: var(--tnb-space-3); }
.tnb .tnb-mt-4 { margin-top: var(--tnb-space-4); }
.tnb .tnb-mt-5 { margin-top: var(--tnb-space-5); }
.tnb .tnb-mt-6 { margin-top: var(--tnb-space-6); }
.tnb .tnb-mt-7 { margin-top: var(--tnb-space-7); }
.tnb .tnb-mb-5 { margin-bottom: var(--tnb-space-5); }

.tnb-center { text-align: center; }
.tnb-center .tnb-lede { margin-inline: auto; }
.tnb-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.tnb-skiplink {
  position: absolute;
  left: var(--tnb-space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--tnb-space-3) var(--tnb-space-4);
  background: var(--tnb-purple);
  color: var(--tnb-white);
  border-radius: var(--tnb-radius);
  transition: top var(--tnb-fast) var(--tnb-ease);
}
.tnb-skiplink:focus { top: var(--tnb-space-4); color: var(--tnb-white); text-decoration: none; }

/* ==========================================================================
   Legacy overrides
   --------------------------------------------------------------------------
   index.html carries class="landing-page" on <body>, and design2.css hangs 42
   rules off it. Several are more specific than a single component class:

       .landing-page section     (0,1,1)  padding: 50px 0
       .landing-page section p   (0,1,2)  margin-top

   which beat .tnb-hero and .tnb-section at (0,1,0). The hero lost 86px of its
   top padding and slid under the fixed header - a 16px overlap of the header
   over the eyebrow.

   Adding the .tnb ancestor takes these to (0,2,x) so they win. Internal
   screens have no .tnb ancestor and so cannot match any of this.

   The body class is not removed instead because the internal application
   renders inside the same <body> and those 42 rules style it.

   This whole block can go when design2.css does.
   ========================================================================== */
.tnb .tnb-hero {
  padding-top: calc(var(--tnb-header-h) + var(--tnb-space-8));
  padding-bottom: var(--tnb-space-9);
}

.tnb .tnb-section {
  padding-top: var(--tnb-section);
  padding-bottom: var(--tnb-section);
}

.tnb .tnb-authwrap {
  padding-top: calc(var(--tnb-header-h) + var(--tnb-space-6));
  padding-bottom: var(--tnb-space-8);
}

/* design2's `.landing-page section p` only sets margin-top: 0, which is what
   the reset above already does - so no blanket override is needed here. What
   it does break is anything that sets a margin on a paragraph, because (0,1,2)
   outranks a single class. The spacing utilities are raised below for that
   reason; these named cases need the same treatment. */
.tnb .tnb-lede.tnb-hero__lede { margin-top: var(--tnb-space-6); }
.tnb .tnb-section-head .tnb-lede { margin-top: var(--tnb-space-4); }
.tnb .tnb-trustrow__detail { margin-top: var(--tnb-space-2); }
.tnb .tnb-card__body,
.tnb .tnb-step__body { margin-top: 0; }

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   One orchestrated hero entrance rather than effects scattered across the
   page. The signing line draws itself left to right, the way a line is
   actually ruled.
   ========================================================================== */
@keyframes tnb-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes tnb-rule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.tnb-enter { animation: tnb-rise var(--tnb-slow) var(--tnb-ease) both; }
.tnb-enter-1 { animation-delay: 60ms; }
.tnb-enter-2 { animation-delay: 140ms; }
.tnb-enter-3 { animation-delay: 220ms; }
.tnb-enter-4 { animation-delay: 320ms; }

.tnb-hero .tnb-signline::after {
  animation: tnb-rule var(--tnb-slow) var(--tnb-ease) 260ms both;
}

@media (prefers-reduced-motion: reduce) {
  .tnb *,
  .tnb *::before,
  .tnb *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tnb-card--link:hover { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .tnb-hero__grid { grid-template-columns: 1fr; gap: var(--tnb-space-7); }
  .tnb-hero__title { max-width: none; }
  .tnb-agentstack__behind { display: none; }
  .tnb-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .tnb-navtoggle { display: block; }
  .tnb-nav {
    display: none;
    position: absolute;
    inset-inline: var(--tnb-space-4);
    top: calc(var(--tnb-header-h) - var(--tnb-space-2));
    flex-direction: column;
    align-items: stretch;
    gap: var(--tnb-space-1);
    padding: var(--tnb-space-3);
    background: var(--tnb-white);
    border: 1px solid var(--tnb-border);
    border-radius: var(--tnb-radius-lg);
    box-shadow: var(--tnb-shadow-lg);
  }
  .tnb-nav.tnb-is-open { display: flex; }
  .tnb-nav__link { padding: var(--tnb-space-3); }

  .tnb-searchrow > .tnb-signline-group { flex-basis: 100%; }
  .tnb-searchrow .tnb-btn { width: 100%; }

  .tnb-trustrow { gap: var(--tnb-space-5); }
  .tnb-authcard { padding: var(--tnb-space-6) var(--tnb-space-5); }
  .tnb-footer__grid { grid-template-columns: 1fr; }
}