/* ==========================================================================
   Gleaming — shared components: logo, header/nav, footer, buttons, atoms
   DO NOT EDIT from page-builder agents. Page overrides go in css/pages/<page>.css
   Breakpoints: desktop >=1024px | tablet 768–1023px | mobile <768px
   ========================================================================== */

/* ==========================================================================
   Logo (navbar) — star mark + "Gleaming" wordmark text
   Figma: mark 35.65x30.79 at (0,0); text 30px/1.2 at (23, 6.5); total 143x43
   ========================================================================== */
.logo {
  position: relative;
  display: block;
  width: 143px;
  height: 43px;
  flex-shrink: 0;
}

.logo__mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 35.65px;
  height: 30.79px;
}

.logo__text {
  position: absolute;
  left: 23px;
  top: 6.5px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-logo);
  line-height: 1.2;
  color: var(--color-black);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  /* Mobile logo is a 0.5714 scale of desktop (Figma mobile navbar) */
  .logo {
    width: 82px;
    height: 25px;
  }

  .logo__mark {
    width: 20.37px;
    height: 17.6px;
  }

  .logo__text {
    left: 13.1px;
    top: 3.7px;
    font-size: var(--text-logo-mobile);
  }
}

/* ==========================================================================
   Header / navbar
   Bar 1 (main): translucent white pill, radius 200, h 96 (12px pad + 72 row)
   Bar 2 (secondary): translucent white pill, radius 200, h 78 — desktop only
   Mobile: bar 1 radius 40 + hamburger; menu = translucent panel radius 20
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 10;
}

.site-header .container {
  display: flex;
  flex-direction: column;
}

/* Segments-above-navbar variant — every Figma page frame except home places
   the secondary segments bar ABOVE the main navbar (segments y=0, navbar
   y=78). Home (index.html) is the only main-bar-first page. */
.site-header--segments-top .navbar { order: 2; }
.site-header--segments-top .navbar-secondary { order: 1; }
.site-header--segments-top .mobile-menu { order: 3; }

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 96px;
  padding: 12px 24px;
  background: var(--color-nav-bg);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-bar);
}

.navbar__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navbar__link {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-black);
  white-space: nowrap;
}

.navbar__link.is-active {
  color: var(--color-primary-400);
  font-weight: 700;
}

/* Hamburger / close toggle — hidden on desktop */
.navbar__toggle {
  display: none;
  padding: 0;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.navbar__toggle img {
  width: 24px;
  height: 24px;
}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-open {
  display: none;
}

.navbar__toggle[aria-expanded="false"] .navbar__toggle-close {
  display: none;
}

/* --- Secondary bar (audience segments + language) — desktop only --------- */
.navbar-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  padding: 0 24px;
  background: var(--color-nav-bg);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-bar);
}

.navbar-secondary__segments {
  display: flex;
  align-items: center;
}

.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-btn);
  line-height: var(--leading-body);
  color: var(--color-black);
  white-space: nowrap;
}

.segment.is-active {
  background: var(--color-primary-50);
  color: var(--color-primary-400);
}

.navbar-secondary__lang {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-black);
}

.navbar-secondary__lang a.is-active {
  color: var(--color-primary-400);
}

/* --- Mobile slide-down menu (matches Figma node 1256:16037, open state) --- */
.mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 12px 20px 32px;
  background: var(--color-nav-bg);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-panel);
}

.mobile-menu__segments {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mobile-menu__segments .segment {
  font-size: var(--text-base); /* 16px on mobile */
  background: none;
}

.mobile-menu__segments .segment.is-active {
  color: var(--color-primary-400);
}

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (max-width: 1023px) {
  .navbar {
    border-radius: var(--radius-card); /* 40px pill on mobile frames */
  }

  .navbar__nav,
  .navbar-secondary {
    display: none;
  }

  .navbar__toggle {
    display: inline-flex;
  }
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 24px;
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--text-btn);       /* 20px */
  line-height: var(--leading-body); /* -> 46px tall */
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-primary-400);
  color: var(--color-white);
}

/* Large hero CTA: 24px label, 72px tall (Figma 1256:9663) */
.btn--lg {
  padding: 12px 32px;
  min-height: 72px;
  font-size: var(--text-btn-lg);
}

/* Outline pill (footer "Book", Figma 1256:10062): 16px regular, currentColor */
.btn--outline {
  background: transparent;
  border: 1px solid currentColor;
  padding: 12px 24px;
  font-weight: 400;
  font-size: var(--text-base);
}

.btn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .btn--lg {
    padding: 8px 20px;
    min-height: 46px;
    font-size: var(--text-btn); /* 20px (Figma mobile hero button) */
  }
}

/* Text link with chevron (card "Book" link, Figma 1256:9674) */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-alt); /* Roboto */
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-primary-400);
}

.link-more__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ==========================================================================
   Shared atoms
   ========================================================================== */

/* Service/feature card (Figma 1256:9667) */
.card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  background: var(--color-card-bg);
  border-radius: var(--radius-card);
}

.card__icon {
  width: 48px;
  height: 48px;
}

.card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h4);   /* 32px */
  line-height: var(--leading-h4);
}

.card__text {
  font-family: var(--font-heading); /* card body copy is Cabinet Grotesk 18 */
  font-size: var(--text-md);
  line-height: var(--leading-body);
}

/* Section heading pattern (56px Cabinet Grotesk Regular) */
.section-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
}

@media (max-width: 767px) {
  .section-title {
    font-size: var(--text-h1-mobile);
  }
}

/* Pill tab switcher (pricing tabs reuse the navbar segment look) */
.tabs {
  display: inline-flex;
  align-items: center;
}

.tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-btn);
  line-height: var(--leading-body);
  color: var(--color-black);
}

.tabs__tab[aria-selected="true"] {
  background: var(--color-primary-50);
  color: var(--color-primary-400);
}

/* ==========================================================================
   Footer (Figma node 1256:10054 "Footer / 13 /", 1440x779 — the variant with
   the giant wordmark used on ALL pages; node 1256:9808 is an unused variant)
   ========================================================================== */
.site-footer {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 779px;
  margin-top: var(--section-pad);
  padding: 80px var(--footer-pad-x);
  background: var(--color-primary-400);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  color: var(--color-white);
}

/* --- top block: heading + book button | link columns + social ------------- */
.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-top: 48px;
  position: relative;
  z-index: 1;
}

.site-footer__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 560px;
}

.site-footer__heading {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-h1); /* 56px */
  line-height: var(--leading-tight);
  color: var(--color-white);
}

.site-footer__links-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  align-self: stretch;
  max-width: 400px;
}

.site-footer__columns {
  display: flex;
  justify-content: space-between;
  width: 316px;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
}

.site-footer__list a {
  display: inline-block;
  padding: 8px 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-btn); /* 20px */
  line-height: var(--leading-body);
  color: var(--color-white);
}

.site-footer__social {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.site-footer__social img {
  width: 24px;
  height: 24px;
}

/* --- giant wordmark -------------------------------------------------------- */
.site-footer__wordmark {
  position: relative;
  margin-top: -1px; /* GL2 frames place the wordmark ~18px higher (blog keeps 17px) */
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--text-wordmark-giant); /* 261.176px */
  line-height: var(--leading-tight);
  color: var(--color-white);
  white-space: nowrap;
  pointer-events: none;
}

.site-footer__wordmark-stars {
  position: absolute;
  left: -28px;
  bottom: 24px;
  width: 287px;
  height: 248px;
}

.site-footer__wordmark-text {
  display: block;
  margin-left: 259px;
}

/* --- credits ---------------------------------------------------------------- */
.site-footer__credits {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  position: relative;
  z-index: 1;
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  font-family: var(--font-heading);
}

.site-footer__legal {
  display: flex;
  gap: 24px;
}

.site-footer__legal a {
  text-decoration: underline;
}

/* --- floating bubble decorations ------------------------------------------- */
.site-footer__bubble {
  position: absolute;
  width: 91px;
  height: 91px;
  pointer-events: none;
}

.site-footer__bubble:nth-of-type(1) { left: 674px;  top: 471px; opacity: 0.5; }
.site-footer__bubble:nth-of-type(2) { left: 491px;  top: 299px; opacity: 0.7; }
.site-footer__bubble:nth-of-type(3) { left: 871px;  top: 158px; opacity: 0.3; }
.site-footer__bubble:nth-of-type(4) { left: 1024px; top: 598px; opacity: 0.7; }
.site-footer__bubble:nth-of-type(5) { left: 1051px; top: 323px; opacity: 0.7; }
.site-footer__bubble:nth-of-type(6) { left: 281px;  top: 426px; opacity: 0.7; }

/* --- footer responsive ------------------------------------------------------ */
@media (max-width: 1023px) {
  .site-footer__wordmark {
    font-size: 160px;
  }

  .site-footer__wordmark-text {
    margin-left: 160px;
  }

  .site-footer__wordmark-stars {
    width: 176px;
    height: 152px;
    bottom: 15px;
  }
}

@media (max-width: 767px) {
  /* Figma mobile footer (home/mobile 1256:14183): 402x708, pad 40/20,
     heading 32, stacked credits, wordmark below credits at bottom edge */
  .site-footer {
    min-height: 708px;
    padding: 40px var(--page-pad-mobile) 0;
  }

  .site-footer__top {
    flex-direction: column;
    gap: 48px;
    padding-top: 0;
  }

  .site-footer__heading {
    font-size: var(--text-h1-mobile); /* 32px */
  }

  .site-footer__links-block {
    align-items: flex-start;
    max-width: none;
    width: 100%;
  }

  .site-footer__columns {
    width: 100%;
    max-width: 316px;
    /* GL2 mobile truths place the link columns 14px lower than the flex flow
       (ink-verified on blog/home/contact/template/subscription) */
    margin-top: 14px;
  }

  .site-footer__social {
    /* 31 + the columns' 14 keeps icons at footer-rel y=468 per truth */
    margin-top: 31px;
  }

  .site-footer__credits {
    flex-direction: column;
    gap: 12px;
    margin-top: 53px;
  }

  /* GL2 frames bake legal underlines at ~62% white, 1px lower than Chrome's
     auto position (ink-verified on the contact frame) */
  .site-footer__legal a {
    text-decoration-color: rgba(255, 255, 255, 0.62);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  .site-footer__wordmark {
    order: 10;
    /* bottom-flush against the 708px footer box, as in every GL2 mobile truth */
    margin-top: auto;
    font-size: var(--text-wordmark-giant-mobile); /* 80px */
  }

  .site-footer__wordmark-text {
    margin-left: 48px;
  }

  .site-footer__wordmark-stars {
    left: -28px;
    bottom: 10px;
    width: 88px;
    height: 76px;
  }

  .site-footer__bubble {
    width: 34px;
    height: 34px;
  }

  .site-footer__bubble:nth-of-type(1) { left: 163px; top: 633px; }
  .site-footer__bubble:nth-of-type(2) { left: 95px;  top: 569px; }
  .site-footer__bubble:nth-of-type(3) { left: 236px; top: 517px; }
  .site-footer__bubble:nth-of-type(4) { left: 292px; top: 680px; }
  .site-footer__bubble:nth-of-type(5) { left: 302px; top: 578px; }
  .site-footer__bubble:nth-of-type(6) { left: 17px;  top: 616px; }
}

/* ==========================================================================
   Motion layer — interaction-only polish (user-approved 2026-07-14).
   Deliberately beyond the 1:1 frames: the GL2 file defines zero animation
   (recursive motion probe over section 1001:2758 returned no animated
   nodes), so every rule here is additive taste, not recreation.

   Safety contract with the .verify pixel gate:
   - Only :hover/:active states and one-shot reveals — nothing alters the
     settled static render (reveals finish in <300ms, long before capture).
   - Movement uses the `translate` property, never `transform` — several
     elements carry transform pixel-nudges (e.g. contact footer
     .btn--outline) that must not be clobbered; translate composes.
   ========================================================================== */

a,
button,
[role="tab"] {
  transition:
    color .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    opacity .18s ease,
    filter .18s ease,
    translate .18s ease,
    box-shadow .22s ease;
}

/* hover/press states (the frames define none) */
a:not(.btn):hover { opacity: .75; }

.btn:hover {
  translate: 0 -2px;
  box-shadow: 0 8px 20px rgba(2, 4, 35, .16); /* --color-primary-950 tint */
}
.btn--primary:hover { filter: brightness(1.1); }
.btn:active {
  translate: 0 0;
  box-shadow: 0 2px 6px rgba(2, 4, 35, .12);
  transition-duration: .07s;
}

[data-accordion-trigger]:hover,
[data-toggle]:hover,
[role="tab"]:not([aria-selected="true"]):hover { opacity: .8; }

.post-card { transition: translate .22s ease, box-shadow .22s ease; }
.post-card:hover {
  translate: 0 -4px;
  box-shadow: 0 14px 32px rgba(2, 4, 35, .10);
}

/* one-shot reveal for the JS-toggled panels (menu / FAQ / pricing tabs) */
@keyframes motion-reveal {
  from { opacity: 0; translate: 0 -6px; }
}

#mobile-menu:not([hidden]) { animation: motion-reveal .22s ease-out; }

[class*="faq__panel"]:not([hidden]),
.faq__a:not([hidden]),
[role="tabpanel"]:not([hidden]) { animation: motion-reveal .25s ease-out; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}