/* Shared site chrome: the nav menu, its panels, the mobile sheet, the footer
   demo link. Everything here is prefixed sn- so it cannot collide with the
   inline CSS each page already carries. The one exception is the two overrides
   of .logo and .foot-grid below, which retune rules that already exist.

   Loaded on every English page right after the Google Fonts stylesheet. The
   tokens (--navy, --blue, --lavender, --line, --gray, --white, the font stacks,
   --r-sm, --r) come from the page's own :root, so this file adds no tokens. */

/* The hidden attribute has no reset on these pages, so every display rule below
   has to yield to it explicitly or the panels render open before JS runs. */
.sn-panel[hidden],
.sn-sheet[hidden],
.sn-acc-body[hidden] { display: none !important; }

/* ---------- desktop menu ---------- */

.sn-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.sn-item { position: relative; }

.sn-trigger {
  font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--navy);
  background: transparent; border: 0; border-radius: var(--r-sm, 6px);
  padding: 8px 12px; cursor: pointer; line-height: 1.4;
  position: relative; text-decoration: none; display: inline-block;
}
.sn-trigger:hover { background: var(--lavender); }
.sn-trigger[aria-expanded="true"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; background: var(--blue);
}

/* The bar is sticky, so it is already a containing block for an absolute child;
   anchoring to nav rather than to the item keeps the panel on the sheet's rail
   instead of hanging off a trigger near the right edge. */
nav { position: sticky; }
.sn-panel {
  position: absolute; top: calc(100% + 8px); left: -24px; z-index: 120;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r, 8px);
  box-shadow: 0 14px 40px rgba(26, 26, 24, .12);
  padding: 0; display: grid; grid-template-columns: 320px; gap: 0; overflow: hidden;
  max-width: calc(100vw - 2 * var(--gutter));
}
.sn-panel--2 { grid-template-columns: 320px 320px; }
.sn-group { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 18px 16px 16px; background: var(--white); }
.sn-group a span { display: block; white-space: normal; }
.sn-group + .sn-group { background: var(--tint-2, #FAF9F5); border-left: 1px solid var(--line); }
.sn-group-head {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gray); padding: 4px 10px 8px;
}
.sn-group a {
  display: block; text-decoration: none; padding: 9px 10px; border-radius: var(--r-sm, 6px);
}
.sn-group a:hover { background: rgba(26, 26, 24, .05); }
/* the catalog link closing a group: set off by a rule, carmine, with an arrow */
.sn-group a.sn-more { margin-top: 10px; position: relative; }
.sn-group a.sn-more::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: -6px;
  height: 1px; background: var(--line);
}
.sn-group a.sn-more b { color: var(--carmine, #A3122A); }
/* a second heading inside a group (Case studies under Read), set off by a rule */
.sn-group a + .sn-subhead { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
/* Insights gated out: "Read" has nothing under it, so the "Case studies" subhead leads the group */
.sn-group .sn-group-head:has(+ .sn-subhead) { display: none; }
.sn-group .sn-group-head:has(+ .sn-subhead) + .sn-subhead { margin-top: 0; padding-top: 4px; border-top: 0; }
.sn-group a b {
  display: block; font-family: var(--font-sans); font-weight: 500; font-size: 15px;
  line-height: 1.35; color: var(--navy);
}
.sn-group a span {
  display: block; font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
  color: var(--gray); margin-top: 2px;
}

/* ---------- the burger ---------- */

.sn-burger {
  display: none; background: transparent; border: 0; cursor: pointer;
  width: 22px; height: 18px; padding: 0; position: relative; flex: none;
}
.sn-burger span {
  position: absolute; left: 0; width: 22px; height: 2px; background: var(--navy);
  transition: transform .2s ease, opacity .15s ease;
}
.sn-burger span:nth-child(1) { top: 0; }
.sn-burger span:nth-child(2) { top: 8px; }
.sn-burger span:nth-child(3) { top: 16px; }
.sn-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.sn-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sn-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .sn-burger span { transition: none; }
  .sn-acc-head svg { transition: none; }
}

/* ---------- the mobile sheet ---------- */

.sn-sheet {
  position: fixed; inset: 68px 0 0; z-index: 99; background: var(--white);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
}
.sn-sheet-scroll { flex: 1 1 auto; padding: 8px var(--gutter) 24px; }
.sn-acc { border-bottom: 1px solid var(--line); }
.sn-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: transparent; border: 0; cursor: pointer; padding: 18px 0; text-align: left;
  font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--navy);
}
.sn-acc-head svg { flex: none; transition: transform .2s ease; }
.sn-acc-head[aria-expanded="true"] svg { transform: rotate(180deg); }
.sn-acc-body { padding-bottom: 10px; }
.sn-acc-body .sn-group { min-width: 0; gap: 0; padding: 0; background: transparent; border-left: 0; }
.sn-acc-body .sn-group-head { padding: 10px 0 4px; }
.sn-acc-body .sn-group a {
  display: flex; align-items: center; min-height: 44px; padding: 6px 0;
  font-size: 15px; border-radius: 0;
}
.sn-acc-body .sn-group a:hover { background: transparent; }
.sn-acc-body .sn-group a.sn-more { margin-top: 0; }
.sn-acc-body .sn-group a.sn-more::before { display: none; }
.sn-acc-body .sn-group a b { font-size: 15px; font-weight: 500; }
/* the one-line descriptions are desk furniture; on a phone they cost a tap target */
.sn-acc-body .sn-group a span { display: none; }
.sn-sheet-foot {
  flex: none; display: grid; gap: 16px; justify-items: center;
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--white);
}
.sn-sheet-foot .btn { width: 100%; text-align: center; }
body.sn-locked { overflow: hidden; }

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

.foot-demo {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--white); text-decoration: none; margin-top: 4px;
}
.foot-demo:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
/* an application under Applications: indented behind a quote rule */
.foot-col a.foot-sub { position: relative; padding-left: 12px; }
.foot-col a.foot-sub::before {
  content: ''; position: absolute; left: 0; top: 50%; height: 1.2em; transform: translateY(-50%);
  width: 1px; background: rgba(244, 242, 234, .3);
}

/* ---------- breakpoints ---------- */

@media (min-width: 861px) {
  /* the inline rule parks the logo hard left with everything else hard right;
     the menu belongs beside the logo, so the auto margin moves one element over */
  .nav-inner .logo { margin-right: 0; }
  .nav-inner .sn-menu { margin-right: auto; }
  .sn-sheet { display: none !important; }
}

@media (max-width: 860px) {
  .sn-menu { display: none; }
  .sn-burger { display: block; }
  /* the burger is new weight in a bar that was already tight on a phone */
  .nav-inner { gap: 10px; }
  .nav-inner .logo { min-width: 0; }
  .nav-inner .logo img { height: 24px !important; }
}

@media (max-width: 430px) {
  nav .btn { padding: 11px 10px; font-size: 11px; letter-spacing: .04em; }
  .nav-inner .logo img { height: 22px !important; }
  /* the switch is one tap away in the sheet and one scroll away in the footer,
     so on the narrowest phones the bar gives its place to the demo button */
  .nav-inner > .lang { display: none; }
}

@media (max-width: 340px) {
  /* "SOLICITAR DEMO" is 32px wider than "GET A DEMO"; at 320 it slid 6px under
     the wordmark. A smaller mark and tighter tracking give the bar its gap back. */
  .nav-inner .logo img { height: 19px !important; }
  nav .btn { padding: 11px 8px; letter-spacing: .02em; }
}

/* Focus: keyboard only, in ink. A click never shows a ring. */
.sn-trigger:focus, .sn-burger:focus, .sn-acc-head:focus, .sn-sheet-close:focus { outline: none; }
.sn-trigger:focus-visible, .sn-burger:focus-visible, .sn-acc-head:focus-visible, .sn-sheet-close:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 6px; }

.sn-note { margin: 14px 10px 0; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.5; color: var(--gray); max-width: 40ch; }

.sn-list { margin: 10px 10px 0; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.9; color: var(--gray); }
.sn-list span { display: block; }
.sn-acc-body .sn-list, .sn-acc-body .sn-note { display: none; }

.sn-panel-foot { grid-column: 1 / -1; margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--white); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; line-height: 1.5; color: var(--gray); }
.sn-acc-body .sn-panel-foot { display: none; }

/* ---------- footer backers ---------- */

/* Latitud (investor) and Endeavor (the founder's designation) sit in the
   footer's bottom row on every English page, starting on the same line as the
   RESOURCES column. .foot-bottom repeats the .foot-grid tracks: the brand
   column plus the four link columns (auto-fit collapses the empty extras to 0,
   so an explicit repeat(4) lands on the same edges). Add a fifth link column
   to .foot-grid and this repeat() needs to follow. Logos are the official
   marks recolored to ivory; the labels carry the claim for each. The footer
   prefix outranks the inline .foot-bottom rule each page loads after this file. */
.sn-foot-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; }
.sn-backers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.sn-backer { display: inline-flex; align-items: center; gap: 10px; }
.sn-backer-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
                   color: rgba(244, 242, 234, .62); white-space: nowrap; }
.sn-backer-logo { display: block; width: auto; opacity: .82; }
.sn-backer-latitud { height: 16px; }
.sn-backer-endeavor { height: 14px; }
@media (min-width: 861px) {
  footer .foot-bottom { display: grid; align-items: center; column-gap: clamp(20px, 3.6vw, 48px);
                 grid-template-columns: minmax(clamp(150px, 16vw, 210px), 1.15fr) repeat(4, minmax(clamp(92px, 10vw, 120px), 1fr)); }
  footer .sn-foot-meta { grid-column: 1 / 4; }
  footer .sn-backers { grid-column: 4 / -1; }
}
@media (max-width: 860px) {
  .sn-backers { flex-basis: 100%; display: grid; grid-template-columns: max-content max-content; gap: 10px 14px; }
  .sn-backer { display: contents; }
}