/* ============================================================
   Tektome — Header Navigation
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #FFFFFF; /* page outside the 1200 container */
}

/* ---------- SHELL ---------- */
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: 72px;
}

/* ============================================================
   HEADER
   ============================================================ */
.tk-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--color-draft-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-base) var(--ease-out);
}
.tk-header.is-open {
  border-bottom-color: var(--gray-300);
}

.tk-header__bar {
  max-width: var(--site-width, 1300px);
  margin: 0 auto;
  height: 72px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  /* Keep the bar (logo + burger/X) above the full-screen mobile menu, which
     is a positioned sibling inside this same header stacking context. */
  position: relative;
  z-index: 50;
}

/* Logo */
.tk-logo {
  display: inline-flex;
  align-items: center;
  height: 28px;
  flex-shrink: 0;
  text-decoration: none;
}
.tk-logo img {
  height: 24px;
  width: auto;
  display: block;
}

/* Primary nav */
.tk-nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.tk-nav__item {
  position: relative;
}

.tk-nav__btn {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
  transition: color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.tk-nav__btn:hover {
  color: var(--color-arch-purple);
}
.tk-nav__btn.is-active {
  color: var(--color-arch-purple);
}
.tk-nav__btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.tk-nav__chev {
  width: 12px;
  height: 12px;
  transition: transform var(--duration-base) var(--ease-out);
}
.tk-nav__btn.is-active .tk-nav__chev {
  transform: rotate(180deg);
}

/* Right side cluster */
.tk-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* ---------- Hamburger (mobile) ---------- */
.tk-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.tk-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--color-data-black);
  border-radius: 2px;
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}
.tk-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tk-burger.is-open span:nth-child(2) { opacity: 0; }
.tk-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile menu panel (full-screen) ---------- */
.tk-mobile {
  display: none;
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow-y: auto;
  background: var(--color-draft-white);
  padding: 84px 24px 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
  /* Sits below the header (z 50) so the burger→X stays clickable to close. */
  z-index: 40;
}
.tk-mobile.is-open {
  opacity: 1;
  pointer-events: auto;
}
.tk-mobile__nav {
  display: flex;
  flex-direction: column;
}
.tk-mobile__link,
.tk-mobile__trigger {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  text-decoration: none;
  padding: 16px 4px;
  border-bottom: 1px solid var(--gray-200);
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tk-mobile__chev {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-out);
  flex-shrink: 0;
}
.tk-mobile__trigger.is-open .tk-mobile__chev { transform: rotate(180deg); }
.tk-mobile__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-base) var(--ease-out);
}
.tk-mobile__sub.is-open { max-height: 360px; }
.tk-mobile__sublink {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-secondary);
  text-decoration: none;
  padding: 12px 4px 12px 16px;
}
.tk-mobile__sublink:hover { color: var(--color-arch-purple); }
.tk-mobile__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  margin-top: 24px;
}
.tk-mobile__actions .tk-btn,
.tk-mobile__actions a[class*="btn"] { width: 100%; }

@media (max-width: 900px) {
  .tk-nav { display: none; }
  .tk-actions { display: none; }
  .tk-burger { display: flex; }
  .tk-mobile { display: block; }
}

.tk-lang {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.tk-lang button {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 4px;
  font: inherit;
  color: var(--fg-tertiary);
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-lang button:hover { color: var(--fg-primary); }
.tk-lang button.is-active { color: var(--color-arch-purple); }
.tk-nav__btn--link {
  text-decoration: none;
  color: var(--fg-secondary);
}
.tk-lang__link {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--fg-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-lang__link:hover { color: var(--fg-primary); }
.tk-lang__sep {
  color: var(--gray-400);
  padding: 0 2px;
}

.tk-cta {
  /* Deprecated — kept as a no-op shim for any legacy markup.
     Use the Button component (variant="primary") instead. */
}

/* ============================================================
   MEGA MENU PANEL
   ============================================================ */
.tk-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: transparent;
  pointer-events: none;
}
.tk-mega.is-open { pointer-events: auto; }

.tk-mega__inner {
  max-width: var(--site-width, 1300px);
  margin: 0 auto;
  padding: 0 32px 24px;
}

.tk-mega__panel {
  background: var(--color-draft-white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.tk-mega.is-open .tk-mega__panel {
  opacity: 1;
  transform: translateY(0);
}

/* Hero block (purple gradient) inside the mega menu */
.tk-mega__hero {
  position: relative;
  grid-column: 1;
  grid-row: 1 / -1;
  background: linear-gradient(115deg, #5156DB 0%, #8A8DE8 52%, #AAA6F0 100%);
  color: var(--color-draft-white);
  padding: 40px 40px 36px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.tk-mega__hero::after {
  /* subtle inner sheen — replicates the diagonal banding in the reference */
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 80px,
    rgba(255,255,255,0.04) 80px,
    rgba(255,255,255,0.04) 160px
  );
  pointer-events: none;
}
.tk-mega__hero-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--color-draft-white);
  margin: 0;
}
.tk-mega__hero-kicker {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 14px;
}

/* Mega body — grid of hero + columns */
.tk-mega__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
}

.tk-mega__cols {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 32px 40px;
}

/* ============================================================
   Solutions mega — dedicated layout (header + 2-col products + demo)
   ============================================================ */
.tk-mega__sol {
  grid-column: 2;
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
}
.tk-mega__sol-head {
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--gray-300);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.tk-mega__sol-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-data-black);
  margin: 0;
}
.tk-mega__sol-sub {
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-secondary);
  margin: 0;
}
.tk-mega__sol-body {
  display: grid;
  grid-template-columns: minmax(0, 540px) auto;
  gap: 40px;
  justify-content: start;
  align-items: start;
}
.tk-mega__sol-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 36px;
}
.tk-mega__sol-aside {
  border-left: 1px solid var(--gray-300);
  padding-left: 36px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.tk-mega__sol-demo {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--color-data-black);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-mega__sol-demo:hover { color: var(--color-arch-purple); }

/* Solutions: HubSpot-style — icon left, title / description / underlined link. */
.tk-mega__sol .tk-mega__item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: start;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.tk-mega__sol .tk-mega__item:hover { background: none; }
.tk-mega__sol .tk-mega__thumb {
  width: 32px;
  height: 32px;
  align-items: flex-start;
}
.tk-mega__sol .tk-mega__svg { width: 28px; height: 28px; }
.tk-mega__sol .tk-mega__item-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tk-mega__sol .tk-mega__item-title {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--color-data-black);
  margin: 0;
}
.tk-mega__sol .tk-mega__item-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-secondary);
  margin: 0;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
.tk-mega__sol .tk-mega__item-cta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--color-data-black);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-mega__sol .tk-mega__item:hover .tk-mega__item-cta {
  color: var(--color-arch-purple);
}

/* Two-column variant (CURRENT nav: Solutions trimmed to four products). */
.tk-mega__cols--two {
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

.tk-mega__col-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-arch-purple);
  margin: 0 0 18px;
}

.tk-mega__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tk-mega__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: 8px;
  margin: -8px;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out);
}
.tk-mega__item:hover {
  background: var(--gray-200);
}

.tk-mega__thumb {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-arch-purple);
}
.tk-mega__svg { width: 24px; height: 24px; display: block; }
.tk-mega__item-tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--color-arch-purple);
  line-height: 1.3;
  margin: 0 0 3px;
}
.tk-mega__item-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.tk-mega__item-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  line-height: 1.3;
  margin: 0;
}
.tk-mega__item-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ============================================================
   Resources variant — 4 columns, no hero, featured cards + FAQ
   ============================================================ */
.tk-mega__body--res {
  display: flex;
  flex-direction: column;
}
.tk-mega__cols--res {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.tk-mega__cols--res .tk-mega__col {
  border-left: 1px solid var(--gray-200);
  padding: 0 22px;
}
.tk-mega__cols--res .tk-mega__col:first-child {
  border-left: 0;
}
.tk-mega__col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.tk-mega__col-head .tk-mega__col-eyebrow { margin: 0; }
.tk-mega__col-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-mega__col-more svg { width: 11px; height: 11px; }
.tk-mega__col-more:hover { color: var(--color-arch-purple); }

/* Featured article card */
.tk-mega__feat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-decoration: none;
  color: inherit;
}
.tk-mega__feat-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.tk-mega__feat-media img {
  width: 30px;
  height: auto;
  opacity: 0.85;
}
.tk-mega__feat-media--purple { background: linear-gradient(115deg, #5156DB 0%, #8A8DE8 52%, #AAA6F0 100%); }
.tk-mega__feat-media--taro { background: linear-gradient(135deg, #AAA6F0 0%, #8A8DE8 100%); }
.tk-mega__feat-media--lavender { background: linear-gradient(135deg, #CECDF5 0%, #AAA6F0 100%); }
.tk-mega__feat-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
}
.tk-mega__feat-meta span { color: var(--gray-400); }
.tk-mega__feat-title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1.32;
  color: var(--fg-primary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-mega__feat:hover .tk-mega__feat-title { color: var(--color-arch-purple); }
.tk-mega__feat-desc {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-secondary);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tk-mega__feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--color-arch-purple);
  margin-top: 2px;
}
.tk-mega__feat-cta svg { width: 12px; height: 12px; }

/* FAQ list */
.tk-mega__faqs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tk-mega__faq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--gray-200);
  text-decoration: none;
  color: var(--fg-primary);
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-mega__faqs li:last-child .tk-mega__faq { border-bottom: 0; }
.tk-mega__faq-q {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: var(--fw-medium);
}
.tk-mega__faq-chev {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transform: rotate(-90deg);
  color: var(--gray-400);
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.tk-mega__faq:hover { color: var(--color-arch-purple); }
.tk-mega__faq:hover .tk-mega__faq-chev { color: var(--color-arch-purple); transform: rotate(-90deg) translateY(-2px); }

/* Top bar — "ナレッジセンター一覧へ" above columns */
.tk-mega__topbar {
  grid-column: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 40px 16px 62px;
  border-bottom: 1px solid var(--border-subtle, #EAEAEA);
  background: var(--color-draft-white);
}
.tk-mega__see-all--top {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--color-arch-purple);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color 120ms;
}
.tk-mega__see-all--top svg { width: 13px; height: 13px; transition: transform 120ms; }
.tk-mega__see-all--top:hover { color: var(--purple-700); }
.tk-mega__see-all--top:hover svg { transform: translateX(3px); }

/* Footer rail inside mega — description + see all link */
.tk-mega__footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 340px 1fr;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-100);
}
.tk-mega__footer-left {
  padding: 20px 40px;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-secondary);
}
.tk-mega__footer-left a {
  color: var(--color-arch-purple);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.tk-mega__footer-left a:hover { text-decoration: underline; }
.tk-mega__footer-right {
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}
.tk-mega__see-all {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--color-arch-purple);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tk-mega__see-all:hover { color: var(--purple-700); }
.tk-mega__see-all svg { width: 12px; height: 12px; }

/* ============================================================
   SIMPLE DROPDOWN (Who We Serve / Why Tektome / Resources)
   ============================================================ */
.tk-drop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 260px;
  padding: 8px;
  background: var(--color-draft-white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
  margin-top: 8px;
  z-index: 60;
}
.tk-drop.is-open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.tk-drop__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.tk-drop__item:hover {
  background: var(--gray-200);
  color: var(--color-arch-purple);
}
.tk-drop__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--fg-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-drop__item:hover .tk-drop__icon {
  color: var(--color-arch-purple);
}

/* ---------- SCRIM under open mega ---------- */
.tk-scrim {
  position: fixed;
  inset: 72px 0 0 0;
  background: rgba(16, 16, 16, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
  z-index: 40;
}
.tk-scrim.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   PAGE CONTAINER + FOOTER (placeholder, per request)
   ============================================================ */
.page-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 32px;
  background: #FFFFFF;
}
.page-container {
  width: 100%;
  max-width: calc(var(--site-width, 1300px) - 64px);
  min-height: 1400px;
  background: var(--gray-200); /* light grey */
  border-radius: var(--radius-lg);
}

.site-footer {
  background: var(--color-draft-white);
}

/* ============================================================
   FOOTER
   Order: sitemap (top) → brand band (logo + addrs + security
   + newsletter) → bottom (copyright + legal).
   ============================================================ */
.tk-footer {
  background: var(--color-draft-white);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  padding: 80px 0 28px;
}
.tk-footer__inner {
  max-width: var(--site-width, 1300px);
  margin: 0 auto;
  /* Match the header bar / hero margin (32px) so the footer logo lines up
     under the header logo and the footer edges align with the page body. */
  padding: 0 32px;
}

/* Logo column inside sitemap */
.tk-footer__sitemap-logo {
  align-self: start;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---------- Sitemap band (TOP) ---------- */
.tk-footer__sitemap-wrap {
  padding-bottom: 56px;
  border-bottom: 1px solid var(--gray-300);
}
.tk-footer__sitemap {
  display: grid;
  /* Columns hug their content and are distributed edge-to-edge with EQUAL
     gutters, so the gap beside the logo matches the gaps between the text
     columns. (Equal 1fr tracks used to leave uneven trailing whitespace
     inside each column, which made the gutters look different sizes.) */
  grid-template-columns: 200px auto auto auto;
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 40px;
  align-items: start;
}
/* Keep the legal column's long links wrapping instead of stretching its track */
.tk-footer__col--legal { max-width: 300px; }
.tk-footer__col { min-width: 0; }

/* ---------- Footer accordion (mobile only) ----------
   The toggle button is only rendered by React on narrow screens; on wider
   screens the column body is a plain wrapper and shows in full. */
.tk-footer__acc-toggle { display: none; }

.tk-footer__col-title {
  margin: 0 0 18px;
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  letter-spacing: 0;
  line-height: 1.3;
}
.tk-footer__col-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-footer__col-title a:hover { color: var(--color-arch-purple); }

.tk-footer__subgroups {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tk-footer__sub-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-bottom: 10px;
}

.tk-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tk-footer__links a {
  font-size: 13px;
  color: var(--fg-secondary);
  text-decoration: none;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-footer__links a:hover { color: var(--color-arch-purple); }
.tk-footer__cert-label {
  margin-top: 22px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-tertiary);
}
/* Certification badges relocated under the cert label, slightly larger */
.tk-footer__badges--legal {
  margin-top: 14px;
  gap: 16px;
  flex-wrap: wrap;
}
.tk-footer__badges--legal img {
  height: 44px;
  width: auto;
  display: block;
}

/* Solution links with tagline */
.tk-footer__link--with-tagline {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tk-footer__link-name {
  line-height: 1.4;
}
.tk-footer__links a.tk-footer__demo-link {
  font-size: 14px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  line-height: 1.3;
}
.tk-footer__links a.tk-footer__demo-link:hover { color: var(--color-arch-purple); }
.tk-footer__link-tagline {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--color-arch-purple);
  opacity: 0.7;
  line-height: 1.3;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.tk-footer__link--with-tagline:hover .tk-footer__link-tagline {
  opacity: 1;
}

/* Contact column inside sitemap */
.tk-footer__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tk-footer__contact a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-secondary);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-footer__contact a:hover { color: var(--color-arch-purple); }
.tk-footer__cicon {
  width: 16px;
  height: 16px;
  color: var(--fg-tertiary);
  flex-shrink: 0;
}
.tk-footer__contact a:hover .tk-footer__cicon { color: var(--color-arch-purple); }

/* ---------- Brand band (MIDDLE) ----------
   Four zones in one row: logo · addresses · security · newsletter.
   ============================================================ */
.tk-footer__band {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 64px;
  padding: 40px 0;
  border-bottom: 1px solid var(--gray-300);
}
.tk-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.tk-footer__logo img {
  height: 28px;
  width: auto;
  display: block;
}
.tk-footer__addrs {
  display: flex;
  flex-direction: row;
  gap: 48px;
  flex-wrap: wrap;
}
.tk-footer__addr { flex: 0 0 auto; min-width: 160px; }
.tk-footer__addr-label {
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--fg-primary);
  margin-bottom: 4px;
  line-height: 1.4;
}
.tk-footer__addr-line {
  font-size: 12px;
  color: var(--fg-secondary);
  line-height: 1.55;
}

/* Right side of the band: security + newsletter, side-by-side. */
.tk-footer__band-right {
  grid-column: 4;
  display: flex;
  align-items: center;
  gap: 40px;
  justify-self: end;
}
.tk-footer__bsec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tk-footer__bsec-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-tertiary);
  font-weight: var(--fw-regular);
  line-height: 1.3;
}

/* Security badges */
.tk-footer__badges {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tk-footer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.tk-footer__badges--bottom img {
  height: 32px;
  width: auto;
  display: block;
}

  display: block;
}

/* Newsletter */
.tk-footer__news {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
  max-width: 100%;
}
.tk-footer__news-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--gray-300);
  background: var(--gray-100);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-primary);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.tk-footer__news-input::placeholder { color: var(--fg-tertiary); }
.tk-footer__news-input:focus {
  border-color: var(--color-arch-purple);
  box-shadow: var(--shadow-focus);
}
.tk-footer__news-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  background: var(--color-arch-purple);
  color: var(--color-draft-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}
.tk-footer__news-btn:hover { background: var(--purple-700); }
.tk-footer__news-btn:active { background: var(--purple-800); }
.tk-footer__news-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.tk-footer__news-btn svg { width: 16px; height: 16px; }

/* ---------- Bottom row (BOTTOM) ---------- */
.tk-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  font-size: 13px;
  padding-top: 28px;
}
.tk-footer__copy {
  color: var(--fg-tertiary);
  text-align: center;
}
.tk-footer__lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--fg-primary);
  text-decoration: none;
  font-weight: var(--fw-regular);
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-footer__lang:hover { color: var(--color-arch-purple); }
.tk-footer__flag {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  display: block;
}
.tk-footer__legal {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1;
  justify-content: flex-start;
}
.tk-footer__legal a {
  color: var(--color-arch-purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-out);
}
.tk-footer__legal a:hover { color: var(--purple-700); }

/* Legal links relocated next to the Knowledge Center column. Align the top
   of the list with the Knowledge Center column title (no offset). */
.tk-footer__col--legal .tk-footer__links { margin-top: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  /* Below the full 1300px desktop: stack the band into two rows —
     logo + addresses on top, security + newsletter below. */
  .tk-footer__band {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 32px 48px;
    padding: 36px 0 40px;
  }
  .tk-footer__logo       { grid-column: 1; grid-row: 1; }
  .tk-footer__addrs      { grid-column: 2; grid-row: 1; justify-self: start; }
  .tk-footer__band-right {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: space-between;
    gap: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--gray-200);
  }
}
/* Below 1024px the four columns get cramped, so drop to a clean 2×2 grid:
   logo | solutions  /  knowledge | legal. No column spanning — every item
   keeps an even 1fr track so there are no stray side gaps. */
@media (max-width: 1024px) {
  .tk-footer__sitemap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px 40px;
  }
  .tk-footer__sitemap > .tk-footer__sitemap-logo,
  .tk-footer__sitemap > .tk-footer__col {
    grid-column: auto;
  }
}
@media (max-width: 980px) {
  .tk-footer__band {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .tk-footer__logo, .tk-footer__addrs,
  .tk-footer__band-right { grid-column: 1; grid-row: auto; }
  .tk-footer__band-right {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 32px 56px;
    border-top: 0;
    padding-top: 0;
  }
}
@media (max-width: 640px) {
  .tk-footer__band-right { flex-direction: column; gap: 28px; }
  .tk-footer__news { width: 100%; }
}
@media (max-width: 560px) {
  .tk-footer { padding: 56px 0 24px; }
  .tk-footer__sitemap { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .tk-footer__sitemap > .tk-footer__sitemap-logo,
  .tk-footer__sitemap > .tk-footer__col { grid-column: 1; }
  .tk-footer__addrs { gap: 24px; }
  .tk-footer__news { width: 100%; }

  /* Accordion columns (Solutions / Knowledge Center) */
  .tk-footer__col[data-accordion] { max-width: none; }
  .tk-footer__col[data-accordion] .tk-footer__col-title { margin: 0; }
  .tk-footer__acc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 16px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--gray-200);
    font: inherit;
    font-weight: var(--fw-bold);
    color: var(--fg-primary);
    text-align: left;
    cursor: pointer;
  }
  .tk-footer__acc-chev {
    flex: none;
    color: var(--fg-tertiary);
    transition: transform var(--duration-base, 200ms) var(--ease-out);
  }
  .tk-footer__col[data-accordion="open"] .tk-footer__acc-chev { transform: rotate(180deg); }
  /* Collapse with the grid-rows 0fr→1fr technique (smooth, no fixed height) */
  .tk-footer__col[data-accordion] .tk-footer__col-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-base, 200ms) var(--ease-out);
  }
  .tk-footer__col[data-accordion="open"] .tk-footer__col-body {
    grid-template-rows: 1fr;
  }
  .tk-footer__col[data-accordion] .tk-footer__col-body-inner {
    overflow: hidden;
    min-height: 0;
  }
  .tk-footer__col[data-accordion="open"] .tk-footer__col-body-inner { padding: 4px 0 18px; }
  /* On narrow screens the toggle button replaces the static column title.
     Keyed off the button's presence (:has) so it applies on first paint,
     before nav.js sets data-accordion (no flash of the desktop title). */
  .tk-footer__col-title:has(.tk-footer__acc-toggle) { margin: 0; }
  .tk-footer__col-title:has(.tk-footer__acc-toggle) .tk-footer__col-title-label { display: none; }

  .tk-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .tk-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
  }
}