:root {
  --ink:          #0e1320;
  --ink-soft:     #3a4050;
  --ink-muted:    #5b6070;
  --ink-faint:    #8a8f9c;
  --ink-raised:   #1b2235;

  --paper:        #f3f3f3;
  --white:        #ffffff;
  --line:         #dcdde0;

  --accent:       #4146d6;
  --accent-dark:  #262bb8;
  --accent-deep:  #1f24a8;
  --accent-light: #8f92f0;
  --accent-pale:  #d4d5fa;

  --error:        #c9372c;

  --latvian-red:  #9e3039;

  --footer-background: var(--ink);
}
.page_content {
  box-sizing: border-box;
  min-height: calc(100vh - 400px);
  padding-top: var(--site_header_height);
  overflow-x: clip;
  background: var(--paper);
}

.content_wrap {
  padding: 60px 20px;
  overflow: hidden;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  font-family: 'Instrument Sans', 'Instrument Sans Fallback', Helvetica, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  min-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

h1 { font-size: 2em; }
h2 { font-size: 1.75em; }

h1,
h2 { margin: 0 auto 20px; }

h1,
h2,
h3,
h4,
h5,
h6 { font-weight: 400; }

h1,
h2,
h3 { text-wrap: balance; }

ul,
ol { margin: 0; }

p,
li { line-height: 1.5; }

li + li { margin-top: 5px; }

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

a {
  color: var(--accent);
  border-radius: var(--border-radius);
  text-decoration: none !important;
  cursor: pointer;

  &:hover { color: var(--accent-dark); }
}

img { max-width: 100%; }

select::-ms-expand { display: none; }

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

@media screen and (max-width: 900px) {
  h1,
  h2 { font-size: 1.5em; }
}

@media screen and (max-width: 500px) {
  h1,
  h2 { font-size: 1.25em; }

  ul { padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
:root {
  --page-max-width: 1240px;
  --page-side-padding: clamp(20px, 4vw, 40px);
  --section-padding: clamp(96px, 11vw, 140px);

  --border-radius: 3px;
  --border-radius-none: 0;
  --border-radius-card: 7px;
  --border-radius-medium: 10px;
  --border-radius-large: 24px;
  --border-radius-circle: 100%;

  --z-index-highest: 10000;
  --z-index-very-high: 9000;

  --z-index-low-layer-1: 10;
  --z-index-low-layer-2: 20;
}
.accent_section {
  background: var(--accent);
  color: var(--white);

  .pixel_canvas {
    --pixel_ink: var(--white);
    --pixel_accent: var(--ink);
  }
}

.accent_section_title {
  margin: 0;
  font-size: clamp(46px, 5.6vw, 72px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.035em;
}

.accent_section_lead {
  margin: 0;
  color: color-mix(in srgb, var(--white) 92%, transparent);
  font-size: 21px;
  line-height: 1.45;
}
.ai_card_text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai_card_title {
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.ai_card_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: 18px;
  box-sizing: border-box;
  border: 1.5px solid;
  border-radius: 50%;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .25s ease;
}

.ai_card_light,
.ai_card_dark {
  display: flex;
  min-height: 300px;
  box-sizing: border-box;
  border-radius: var(--border-radius-card);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 10%, transparent);
  text-decoration: none;
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;

  &:hover .ai_card_arrow { transform: translateY(4px); }

  &:active { transition-duration: .12s; }

  &:focus-visible { outline-offset: 4px; }
}

.ai_card_light {
  background: var(--accent-pale);
  color: var(--ink);

  &:hover {
    color: var(--ink);
    box-shadow: 0 22px 44px color-mix(in srgb, var(--ink) 16%, transparent);
  }

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

  .ai_card_arrow {
    border-color: var(--accent);
    color: var(--accent);
  }

  &:hover .ai_card_arrow {
    background: var(--accent);
    color: var(--white);
  }
}

.ai_card_dark {
  background: var(--ink);
  color: var(--paper);

  &:hover {
    color: var(--paper);
    box-shadow: 0 22px 44px color-mix(in srgb, var(--ink) 22%, transparent);
  }

  .ai_card_summary { color: color-mix(in srgb, var(--paper) 80%, transparent); }

  .ai_card_arrow {
    border-color: var(--accent-light);
    color: var(--accent-light);
  }

  &:hover .ai_card_arrow {
    background: var(--accent-light);
    color: var(--ink);
  }
}
.ai_section { scroll-margin-top: calc(var(--site_header_height) + 12px); }

.ai_section_assistants {
  background: var(--accent-pale);
  color: var(--ink);
}

.ai_section_agents {
  background: var(--ink);
  color: var(--paper);
}

.ai_section_content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 48px clamp(40px, 5vw, 72px);
  align-items: center;
}

.ai_section_text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ai_section_title {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 46px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.ai_section_lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.5;
}

.ai_section_agents .ai_section_lead { color: color-mix(in srgb, var(--paper) 82%, transparent); }

.section_link.ai_section_link { margin-top: 28px; }

.ai_section_visual {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: var(--border-radius-card);
  background: var(--white);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--accent) 12%, transparent);
}

.ai_section_agents .ai_section_visual {
  background: var(--ink-raised);
  box-shadow: none;
}

/* From about 1060px the grid fits two 460px columns. */
@media (min-width: 1060px) {
  .ai_section_visual {
    max-width: 500px;
    justify-self: end;
  }
}
/* On hover --px shrinks by the arrow width, so the button keeps its width. */
.arrow_button {
  --px: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 var(--px);
  border: none;
  border-radius: var(--border-radius);
  background: var(--accent);
  color: var(--white);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, padding .3s cubic-bezier(.2, .7, .2, 1);

  &:hover,
  &:focus-visible {
    padding: 0 calc(var(--px) - 13px);
    background: var(--accent-dark);
    color: var(--white);
  }
}

.arrow_button_small {
  --px: 24px;
  min-height: 48px;
  font-size: 15px;
}

.arrow_button_light {
  background: var(--white);
  color: var(--ink);

  &:hover,
  &:focus-visible {
    background: color-mix(in srgb, var(--accent) 15%, var(--white));
    color: var(--ink);
  }
}

.arrow_button_arrow {
  display: inline-flex;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  transition: width .3s cubic-bezier(.2, .7, .2, 1), margin .3s cubic-bezier(.2, .7, .2, 1);

  svg { flex: 0 0 auto; }
}

.arrow_button_head {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s ease, transform .25s cubic-bezier(.2, .7, .2, 1);
}

.arrow_button_shaft {
  stroke-dasharray: 11;
  stroke-dashoffset: 11;
  transition: stroke-dashoffset .15s ease;
}

.arrow_button {
  &:hover,
  &:focus-visible {
    .arrow_button_arrow {
      width: 16px;
      margin-left: 10px;
    }

    .arrow_button_head {
      opacity: 1;
      transform: none;
      transition-delay: .32s;
    }

    .arrow_button_shaft {
      stroke-dashoffset: 0;
      transition: stroke-dashoffset .28s cubic-bezier(.4, 0, .2, 1) .1s;
    }
  }
}
.arrow_link {
  color: inherit;
  text-decoration: none;

  &:hover { color: inherit; }
}

.link_arrow {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  margin-left: .45em;
  vertical-align: -.14em;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}

.link_arrow_shaft {
  stroke-dasharray: 14;
  stroke-dashoffset: 0;
}

a:hover,
a:focus-visible {
  .link_arrow_shaft { animation: link_arrow_shaft .32s cubic-bezier(.4, 0, .2, 1) both; }
  .link_arrow_head { animation: link_arrow_head .4s ease both; }
}

@keyframes link_arrow_shaft {
  from { stroke-dashoffset: 14; }
  to { stroke-dashoffset: 0; }
}

@keyframes link_arrow_head {
  0%, 55% {
    opacity: 0;
    transform: translateX(-3px);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}
.blog_list article .article_profile img,
.blog_post_ff > span img {
  display: block;
  width: 80px;
  height: 80px;
  margin-left: 20px;
  border: 5px solid var(--white);
  border-radius: var(--border-radius-circle);
  background: var(--white);
}
blockquote {
  color: var(--ink-muted);
  display: block;
  margin: 0 auto 10px;
  font-style: italic;
  max-width: 640px;
  text-align: left;
  line-height: 1.5;
  padding: 0 20px;
  @media screen and (max-width: 500px) { font-size: .95em; }

  &::before {
    content: "\201C";
    margin-right: 5px;
  }

  &::after {
    content: "\201D";
    margin-left: 5px;
  }

  &::before,
  &::after {
    color: color-mix(in srgb, var(--white), transparent);
    font-size: 2.5em;
    line-height: 0;
    vertical-align: -15px;
  }
}
/* js/_carousel.js sets --carousel-shift (in slide widths) and --carousel-drag. */
.carousel_slides {
  display: flex;
  overflow: hidden;

  > * {
    flex: 0 0 100%;
    min-width: 0;
    box-sizing: border-box;
    translate: calc(var(--carousel-shift, 0) * 100% + var(--carousel-drag, 0px));
    transition: translate .6s cubic-bezier(.2, .7, .2, 1);
  }

  > .is_jumping { transition: none; }
}

[data-carousel] :has(> [data-carousel-slide]) {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

[data-carousel] .is_dragging {
  cursor: grabbing;

  > [data-carousel-slide] { transition: none; }
}

/* The sizers keep the height of the longest slide text, so the carousel controls do not move.
   A heading or paragraph has its own font and line height, which would make it taller than its sizers. */
.carousel_text_stack {
  display: grid;

  > * {
    grid-area: 1 / 1;
    margin: 0;
    font: inherit;
  }
}

.carousel_text_sizer { visibility: hidden; }

.carousel_dots {
  display: flex;
  align-items: center;

  button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 44px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;

    span {
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background: color-mix(in srgb, var(--ink) 22%, transparent);
      transition: width .35s cubic-bezier(.2, .7, .2, 1), background-color .25s ease;
    }

    &:hover span { background: color-mix(in srgb, var(--ink) 45%, transparent); }

    &:focus-visible {
      border-radius: 6px;
      outline-offset: -4px;
    }

    &.is_on {
      width: 40px;

      span {
        width: 28px;
        background: var(--accent);
      }
    }
  }
}

.carousel_controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;

  > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-circle);
    background: var(--carousel_button_background, var(--white));
    color: var(--ink);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;

    &:hover {
      background: var(--accent);
      color: var(--white);
    }
  }
}
.check_list {
  margin: 0;
  padding: 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  list-style: none;

  li {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  }

  svg {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--accent);
  }

  span {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
  }
}

.check_list_on_dark {
  border-top-color: color-mix(in srgb, var(--paper) 20%, transparent);

  li { border-bottom-color: color-mix(in srgb, var(--paper) 20%, transparent); }
  svg { color: var(--accent-light); }
}
.trial_section_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;

  .arrow_button { margin-top: 12px; }
}

.trial_section_text {
  max-width: 760px;

  a {
    color: var(--white);
    font-weight: 600;

    &:hover { color: var(--white); }
  }
}

@media (min-width: 900px) {
  .trial_section_content {
    display: grid;
    grid-template-columns: minmax(0, 760px) auto;
    gap: 20px clamp(48px, 6vw, 96px);
    align-items: center;

    .accent_section_title,
    .trial_section_text { grid-column: 1; }

    .arrow_button {
      grid-column: 2;
      grid-row: 1 / span 2;
      justify-self: start;
      margin-top: 0;
    }
  }
}
.custom_sources_section {
  scroll-margin-top: var(--site_header_height);
  background: var(--white);
}

.custom_sources_content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 56px clamp(40px, 6vw, 96px);
  align-items: center;
}

.custom_sources_text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.custom_sources_announcement {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin: 16px 0 0 10px;
  padding: 9px 16px 8px 18px;
  border-radius: 4px;
  background: var(--accent-pale);
  color: var(--accent-deep);
  font-size: 15px;
  font-weight: 600;
}

.custom_sources_announcement_tag {
  position: absolute;
  top: -16px;
  left: -10px;
  display: inline-block;
  padding: 4px 9px 3px;
  border-radius: var(--border-radius);
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.custom_sources_title {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}

.custom_sources_lead {
  max-width: 540px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.55;
}

.section_link.custom_sources_link { margin-top: 18px; }

.custom_sources_flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.custom_sources_types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  span {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--border-radius);
    background: var(--ink);
    color: var(--paper);
    font-size: 15px;
    font-weight: 600;
  }
}

.custom_sources_arrow { color: var(--accent); }

/* The arrow draws after the flow starts to slide in, and the head after the shaft. */
.custom_sources_arrow_shaft {
  stroke-dasharray: 50;
  transition: stroke-dashoffset .7s cubic-bezier(.45, 0, .2, 1) .3s;
}

.custom_sources_arrow_head {
  stroke-dasharray: 24;
  transition: stroke-dashoffset .3s ease-out .92s;
}

/* js/_scroll_reveal.js adds is_revealed to the flow. The arrow stays drawn when the script does not run. */
@media (prefers-reduced-motion: no-preference) {
  .has_scroll_reveal .custom_sources_flow:not(.is_revealed) {
    .custom_sources_arrow_shaft { stroke-dashoffset: 50; }
    .custom_sources_arrow_head { stroke-dashoffset: 24; }
  }
}

.custom_sources_app {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  text-align: center;
}

.custom_sources_app_title {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -.03em;
}

.custom_sources_app_note {
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.custom_sources_footnote {
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
}
.customers_section {
  overflow: hidden;
  padding: 72px 0;
  background: var(--ink);
  color: var(--paper);
}

.customers_section_stats {
  margin: 0 auto 12px;
  padding: 0 var(--page-side-padding);
  color: var(--paper);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
}

.customers_section_title {
  margin-bottom: 28px;
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  font-size: 18px;
  text-align: center;
}

.customers_section_marquee {
  --customer-logo-width: 120px;

  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.customers_section_track {
  --customer-logo-time: 3s;

  display: flex;
  width: max-content;
  animation: customers_section_scroll calc(var(--customer-logo-count) * var(--customer-logo-time)) linear infinite;
  /* js/_customer_logos.js sets the start index, and the negative delay starts the scroll that many logos in. */
  animation-delay: calc(var(--customer-logo-start-index, 0) * -1 * var(--customer-logo-time));
}

/* Half of the track is one logo list, so the duplicate list takes the place of the first one. */
@keyframes customers_section_scroll {
  to { transform: translateX(-50%); }
}

.customers_section_logos { display: flex; }

.customers_section_logo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--customer-logo-width);
  height: 64px;

  img {
    display: block;
    width: auto;
    max-width: 80%;
    object-fit: contain;
    opacity: .75;
  }
}

@media (min-width: 600px) {
  .customers_section_marquee { --customer-logo-width: 180px; }

  .customers_section_logo { height: 80px; }
}

/* The base styles already stop the animation. */
@media (prefers-reduced-motion: reduce) {
  .customers_section_marquee { mask-image: none; }

  .customers_section_track { width: auto; }

  .customers_section_logos {
    flex-wrap: wrap;
    justify-content: center;

    &[aria-hidden] { display: none; }
  }
}
details {
  text-align: left;

  &[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    &::after { content: "\f068"; }
  }

  summary {
    padding: 15px;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    font-size: 18px;

    &::-webkit-details-marker { display: none; }

    &::after {
      content: "\2b";
      font-family: "Font Awesome 7 Pro";
      font-weight: 300;
      padding-left: 10px;
    }

    &:hover { background: var(--accent-pale); }
  }
}
.enterprise_section {
  background: var(--white);

  .pixel_canvas { --pixel_density: .5; }
}

.enterprise_section_groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 48px clamp(32px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}

.enterprise_section_group {
  display: flex;
  flex-direction: column;
  gap: 18px;

  img {
    display: block;
    width: 64px;
    height: 64px;
  }
}
.rise_in { animation: rise_in .9s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes rise_in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* js/_scroll_reveal.js adds is_revealed. The animation does not keep its transform, so hover transforms still work. */
@media (prefers-reduced-motion: no-preference) {
  .has_scroll_reveal .scroll_reveal {
    &:not(.is_revealed) { opacity: 0; }

    &.is_revealed { animation: scroll_reveal .9s cubic-bezier(.2, .7, .2, 1) backwards; }
  }
}

@keyframes scroll_reveal {
  from {
    opacity: 0;
    transform: translateY(48px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}
/* The question overrides the global summary style (common/details.css). */
.faq_section { background: var(--white); }

.faq_section_list {
  max-width: 900px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.faq_section_item {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);

  summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 4px;
    border-radius: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    list-style: none;
    cursor: pointer;
    transition: color .2s ease;

    &::-webkit-details-marker { display: none; }

    &:hover {
      background: none;
      color: var(--accent);
    }

    &:focus-visible { outline-offset: 2px; }
  }
}

/* Outranks the global icon of an open summary (details[open] summary::after). */
.faq_section_list .faq_section_item summary::after { content: none; }

.faq_section_icon {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform .3s ease;
  }

  &::after { transform: rotate(90deg); }
}

.faq_section_item[open] .faq_section_icon::after { transform: rotate(0deg); }

.faq_section_answer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 4px 24px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;

  p, ul { margin: 0; }

  ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 22px;
  }

  li { list-style: disc; }

  /* The global link style (base/general.css) removes the underline with !important. */
  a {
    color: var(--accent);
    text-decoration: underline !important;
    text-underline-offset: .15em;

    &:hover { color: var(--accent); }
  }

  :where(p, li) { line-height: inherit; }
  :where(li + li) { margin-top: 0; }
}
/* The feature rows put the text of one feature beside its video or graphic, alternating sides.
   The features, eazyBI Cloud and Private eazyBI pages show data/feature_blocks.yml with them, because each of those
   features has a demo video. The product pages of the 2026 design show several features per section with screenshots
   instead (feature/section.css). */
.feature_block {
  --feature_block_frame: var(--paper);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 48px clamp(40px, 5vw, 72px);
  box-sizing: border-box;
  padding: clamp(72px, 8vw, 112px) var(--page-side-padding);
  background: var(--white);
  color: var(--ink);

  /* The video blocks alternate among themselves, so another block (Private eazyBI infrastructure) does not shift them. */
  &:nth-child(even of .feature_block:has(.graphic_video)) {
    --feature_block_frame: var(--white);
    background: var(--paper);

    .info_block { order: 1; }

    .graphic,
    .graphic_video { order: 2; }
  }

  .info_block {
    order: 2;
    max-width: 480px;
    text-align: left;

    h2 {
      margin: 0 0 20px;
      padding: 0;
      font-size: clamp(32px, 3.4vw, 44px);
      font-weight: 600;
      line-height: 1.05;
      letter-spacing: -.03em;
    }

    p, li {
      max-width: none;
      margin: 0;
      padding: 0;
      color: var(--ink-soft);
      font-size: 19px;
      line-height: 1.55;
    }

    p + p { margin-top: 16px; }
  }

  .graphic,
  .graphic_video { order: 1; }

  .graphic,
  .graphic_video {
    max-width: 616px;
    padding: 8px;
    border-radius: var(--border-radius-card);
    background: var(--feature_block_frame);
    line-height: 0;

    video {
      width: 100%;
      border-radius: 4px;
    }

    img { display: none; }
  }

  /* A graphic, unlike a video, has no width of its own in the flex row. */
  .graphic { flex: 1 1 420px; }
}

@media screen and (max-width: 1300px) {
  .feature_block {
    .graphic,
    .graphic_video { max-width: 420px; }
  }
}

@media screen and (max-width: 970px) {
  .feature_block {
    .info_block,
    &:nth-child(even of .feature_block:has(.graphic_video)) .info_block { order: 1; }

    .graphic {
      order: 2;
      width: 100%;
      max-width: 480px;
    }

    .graphic_video,
    &:nth-child(even of .feature_block:has(.graphic_video)) .graphic_video {
      order: 2;
      width: 100%;
      max-width: 480px;

      video { display: none; }

      img {
        display: block;
        width: 100%;
        border-radius: 4px;
      }
    }
  }
}
.feature_section { scroll-margin-top: calc(var(--site_header_height) + 12px); }

.feature_section_paper {
  --feature_panel_background: var(--white);
  --feature_shot_background: var(--white);
  background: var(--paper);
}

.feature_section_white {
  --feature_panel_background: var(--paper);
  --feature_shot_background: var(--white);
  background: var(--white);
}

.feature_section_paper,
.feature_section_white {
  --feature_hover_color: var(--accent);
  --feature_text_color: var(--ink-soft);
}

.feature_section_dark {
  --feature_panel_background: var(--ink-raised);
  --feature_shot_background: var(--ink-raised);
  --feature_hover_color: var(--accent-light);
  --feature_text_color: color-mix(in srgb, var(--paper) 78%, transparent);
  background: var(--ink);
  color: var(--paper);

  .feature_section_intro p { color: color-mix(in srgb, var(--paper) 82%, transparent); }
}

.feature_section_intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 28px);
  max-width: 820px;
  margin: 0 auto;
  text-align: center;

  h2 {
    margin: 0;
    line-height: 0;
  }

  /* The wordmark_height helper sets the image height relative to --cap. */
  img {
    --cap: clamp(28px, 3vw, 40px);
    display: block;
    width: auto;
    margin: 0 auto;
  }

  p {
    margin: 0;
    color: var(--ink-soft);
    font-size: clamp(19px, 1.6vw, 21px);
    line-height: 1.5;
  }
}

.feature_section_grid {
  --feature_column_gap: clamp(32px, 4.5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  gap: 40px var(--feature_column_gap);
  align-items: start;
  margin-top: clamp(48px, 6vw, 80px);
}

/* The list column holds the screenshots, so it sits above the frame that they cover. */
.feature_section_list_column {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.section_link.feature_section_link { margin-left: 22px; }

/* Only browsers with interpolate-size animate the height to auto. */
.feature_section_list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  interpolate-size: allow-keywords;

  details {
    border-radius: 4px;
    transition: background-color .3s ease;

    &[open] { background: var(--feature_panel_background); }

    &::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size .4s cubic-bezier(.2, .7, .2, 1), content-visibility .4s allow-discrete;
    }

    &[open]::details-content { block-size: auto; }
  }

  /* Replaces the global summary style (common/details.css). */
  summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    border-radius: 4px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
    list-style: none;
    cursor: pointer;
    transition: color .2s ease;

    &::-webkit-details-marker { display: none; }

    &:hover {
      background: none;
      color: var(--feature_hover_color);
    }

    &:focus-visible {
      outline-color: var(--feature_hover_color);
      outline-offset: 2px;
    }
  }
}

/* Outranks the global icon of an open summary (details[open] summary::after). */
.feature_section_grid .feature_section_list summary::after { content: none; }

.feature_section_list {
  /* Keeps the side frame from going empty. Phones have no side frame, so there the open item can be closed. */
  [open] summary { pointer-events: none; }

  summary span {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 8px;
      left: 0;
      width: 18px;
      height: 2px;
      border-radius: 1px;
      background: currentColor;
      transition: transform .35s cubic-bezier(.2, .7, .2, 1);
    }

    &::after { transform: rotate(90deg); }
  }

  [open] summary span::after { transform: rotate(0deg); }

  details p {
    margin: 0;
    padding: 0 22px 22px;
    color: var(--feature_text_color);
    font-size: 17px;
    line-height: 1.55;
  }
}

.feature_section_frame {
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius-card);
  background: var(--feature_shot_background);
}

/* The left offset and the 190% width match the 1.9fr grid column beside the list column. */
.feature_section_shot {
  position: absolute;
  top: 0;
  left: calc(100% + var(--feature_column_gap));
  display: flex;
  width: 190%;
  aspect-ratio: 16 / 9;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--border-radius-card);
  background: var(--feature_shot_background);
  transition: opacity .45s ease;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transition: transform .7s cubic-bezier(.2, .7, .2, 1);
  }
}

.feature_section_list {
  [open] .feature_section_shot { z-index: 1; }

  details:not([open]) .feature_section_shot { opacity: 0; }
  details:not([open]) .feature_section_shot img { transform: scale(1.03); }
}

@starting-style {
  .feature_section_list {
    [open] .feature_section_shot { opacity: 0; }
    [open] .feature_section_shot img { transform: scale(1.03); }
  }
}

.feature_section_shot {
  &.is_fill img {
    object-fit: cover;
    object-position: top;
  }

  &.is_inset img {
    box-sizing: border-box;
    padding: 2.5%;
  }
}

@media (max-width: 900px) {
  .feature_section_grid { grid-template-columns: minmax(0, 1fr); }

  .feature_section_frame { display: none; }

  .feature_section_list {
    details[open] {
      background: transparent;

      summary {
        border-radius: 4px 4px 0 0;
        background: var(--feature_panel_background);
      }

      p {
        border-radius: 0 0 4px 4px;
        background: var(--feature_panel_background);
      }
    }

    summary {
      padding: 20px;
      font-size: 20px;
    }

    [open] summary { pointer-events: auto; }

    details p { padding: 0 20px 22px; }
  }

  .feature_section_shot {
    position: static;
    width: 100%;
    margin: 16px 0 12px;
  }
}
.email_signup {
  padding: 80px 20px;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 1px solid var(--ink);
  max-width: 640px;
  margin: 0 auto;

  h2, p { padding: 0; }

  h2 {
    margin: 0;
    color: var(--white);
  }

  p {
    margin: 5px auto 20px;
    color: var(--line);
    max-width: none;
  }

  .hbspt-form {
    input { height: 60px; }

    .hs_email {
      width: 80%;

      input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .hs_submit {
      width: 20%;

      input {
        background: var(--accent);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding: 0;
        width: 100%;

        &:hover { background: var(--accent-dark); }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  footer .email_signup {
    padding: 50px var(--page-side-padding);

    form {
      .hs_email  {
        width: 70%;
        .input input { padding-left: 10px; }
      }

      .hs_submit { width: 30%; }
    }
  }
}
.site_footer {
  background: var(--footer-background);
  color: var(--paper);
  line-height: normal;
  text-align: left;

  .site_footer_back {
    padding: 56px var(--page-side-padding) 0;
    text-align: center;
  }

  .site_footer_content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    max-width: var(--page-max-width);
    margin: 0 auto;
    padding: clamp(72px, 8vw, 100px) var(--page-side-padding) 0;
    box-sizing: border-box;
  }

  .site_footer_about {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .site_footer_logo {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 32px;
  }

  .site_footer_tagline {
    max-width: 280px;
    font-size: 16px;
    line-height: 1.55;
    color: color-mix(in srgb, var(--paper) 80%, transparent);
  }

  .site_footer_social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .site_footer_social_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--border-radius);
    color: color-mix(in srgb, var(--paper) 85%, transparent);
    text-decoration: none;
    transition: color .2s ease;

    i { font-size: 20px; }

    &:hover,
    &:focus-visible { color: var(--accent-light); }
  }

  .site_footer_column {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .site_footer_heading {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-light);
  }

  .site_footer_link {
    font-size: 15px;
    color: var(--paper);
    text-decoration: none;

    &:hover { color: var(--paper); }
  }

  .site_footer_bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--page-max-width);
    margin: 64px auto 0;
    padding: 24px var(--page-side-padding) 32px;
    box-sizing: border-box;
    border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
    font-size: 14px;
    color: color-mix(in srgb, var(--paper) 70%, transparent);
  }

  .site_footer_legal {
    display: flex;
    gap: 24px;

    .site_footer_link {
      font-size: 14px;
      color: color-mix(in srgb, var(--paper) 80%, transparent);
    }
  }

  a:focus-visible {
    outline: 3px solid var(--accent-light);
    outline-offset: 3px;
  }
}
.gmap_container {
  line-height: 0;
  padding: 0;
  height: 400px;
  overflow: hidden;
  display: block;

  iframe {
    height: 100%;
    width: 100%;
    border: none;
    pointer-events:none;
  }
}
:root { --site_header_height: 84px; }

.site_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-index-highest);
  background: var(--paper);
  color: var(--ink);
  line-height: normal;
  text-align: left;
  box-shadow: 0 0 0 transparent;
  transition: box-shadow .3s ease;

  &.is_scrolled { box-shadow: 0 6px 24px color-mix(in srgb, var(--ink) 10%, transparent); }

  .site_header_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: var(--page-max-width);
    min-height: var(--site_header_height);
    margin: 0 auto;
    padding: 14px var(--page-side-padding);
    box-sizing: border-box;
  }

  .site_header_logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;

    img {
      display: block;
      width: auto;
      height: 31px;
    }
  }

  .site_header_link,
  .site_header_dropdown_trigger {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
  }

  .site_header_dropdown_trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
  }

  .site_header_link {
    &:hover { color: var(--ink); }
    &[aria-current="page"] .hover_underline { background-size: 100% 1px; }
  }

  .site_header_dropdown_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--border-radius);
    color: var(--ink);
    text-decoration: none;
    white-space: normal;
    transition: background-color .15s ease;

    img {
      display: block;
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
    }

    &:hover,
    &:focus-visible,
    &[aria-current="page"] {
      background: var(--paper);
      color: var(--ink);

      .site_header_dropdown_name { color: var(--accent); }
    }
  }

  .site_header_products_panel .site_header_dropdown_item { padding: 8px 12px; }

  .site_header_dropdown_name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
  }

  .site_header_burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: -12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }

  .site_header_close_icon { display: none; }
}

@media (min-width: 961px) {
  .site_header {
    .site_header_menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 8px clamp(14px, 2vw, 28px);
      white-space: nowrap;
    }

    .site_header_dropdown { position: relative; }

    .site_header_chevron { transition: transform .2s ease; }

    .site_header_dropdown_panel {
      position: absolute;
      top: calc(100% + 14px);
      left: -14px;
      z-index: 60;
      width: 200px;
      padding: 8px;
      box-sizing: border-box;
      background: var(--white);
      border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      border-radius: 4px;
      box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 12%, transparent);
      opacity: 0;
      visibility: hidden;
      transform: translateY(6px);
      transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;

      /* The invisible strip bridges the gap between the trigger and the panel, so the panel stays open on hover. */
      &::before {
        content: "";
        position: absolute;
        top: -16px;
        left: 0;
        right: 0;
        height: 16px;
      }
    }

    .site_header_products_panel { width: 260px; }

    .site_header_dropdown {
      &:hover,
      &:focus-within {
        .hover_underline { background-size: 100% 1px; }

        .site_header_chevron { transform: rotate(180deg); }

        .site_header_dropdown_panel {
          opacity: 1;
          visibility: visible;
          transform: none;
          transition: opacity .18s ease, transform .18s ease, visibility 0s;
        }
      }

      &.is_current .hover_underline { background-size: 100% 1px; }
    }
  }
}

@media (max-width: 960px) {
  .site_header {
    .site_header_burger { display: flex; }

    .site_header_menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      max-height: calc(100vh - var(--site_header_height));
      overflow-y: auto;
      padding: 0 var(--page-side-padding) 24px;
      box-sizing: border-box;
      background: var(--paper);
      border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      box-shadow: 0 18px 24px color-mix(in srgb, var(--ink) 10%, transparent);
    }

    &.is_menu_open {
      .site_header_menu {
        display: flex;
        flex-direction: column;
      }

      .site_header_burger_icon { display: none; }
      .site_header_close_icon { display: block; }
    }

    .site_header_link,
    .site_header_dropdown {
      padding: 14px 0;
      border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    }

    .site_header_dropdown_trigger {
      color: color-mix(in srgb, var(--ink) 60%, transparent);
      cursor: default;
    }

    .site_header_chevron { display: none; }

    .site_header_dropdown_panel {
      margin-top: 6px;

      .site_header_dropdown_item { padding-left: 0; }
    }

    .site_header_login {
      align-self: stretch;
      margin-top: 24px;
    }
  }
}
.hero_section_content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "badges" "copy" "media";

  &.section_padding { padding-top: clamp(56px, 7vw, 104px); }
}

.hero_section_badges {
  grid-area: badges;
  display: block;
  width: 280px;
  max-width: 100%;
  height: auto;
  margin-bottom: 32px;
  animation-delay: .2s;
}

.hero_section_copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero_section_logos {
  align-self: stretch;
  display: flex;
  gap: 8px;
  margin-bottom: 32px;

  .logo_tile {
    flex: 0 1 168px;
    min-width: 0;
  }
}

@media (max-width: 480px) {
  .hero_section_logos {
    flex-wrap: wrap;

    .logo_tile { flex-basis: calc(50% - 4px); }
  }
}

/* The line height matches the home page heading, so the descenders do not touch the next line. */
.hero_section_title {
  margin: 0;
  font-size: clamp(44px, 5.2vw, 76px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.035em;
  animation-delay: .08s;

  span { color: var(--accent); }
}

.hero_section_lead {
  max-width: 560px;
  margin: 28px 0 0 0;
  color: var(--ink-soft);
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.45;
  animation-delay: .32s;
}

.hero_section_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: 36px;
  animation-delay: .44s;
}

.hero_section_media {
  grid-area: media;
  margin-top: 56px;
  animation-delay: .6s;
}

.hero_section_image {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: clamp(12px, 2vw, 24px);
  border-radius: var(--border-radius-card);
  background: var(--white);
}

/* The media gets an explicit width, because Safari does not apply aspect-ratio to a width that comes from stretching. */
@media (min-width: 1060px) {
  .hero_section_content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    grid-template-areas: "copy badges" "copy media";
    column-gap: clamp(40px, 5vw, 80px);
  }

  .hero_section_copy { align-self: center; }

  .hero_section_badges {
    align-self: end;
    width: 340px;
    margin-bottom: clamp(24px, 2.6vw, 32px);
  }

  .hero_section_media {
    align-self: end;
    width: calc(100% + var(--page-side-padding));
    margin: 0 0 calc(-1 * var(--section-padding));

    :is(.hero_video, .hero_section_image) { border-radius: var(--border-radius-card) 0 0 0; }
  }

  .hero_section_content:not(:has(.hero_section_badges)) {
    grid-template-rows: auto;
    grid-template-areas: "copy media";

    .hero_section_media {
      align-self: center;
      margin: 0;
    }

    :is(.hero_video, .hero_section_image) { border-radius: var(--border-radius-card) 0 0 var(--border-radius-card); }
  }
}

@media (min-width: 1240px) {
  .hero_section_media { width: calc(100% + (100vw - var(--page-max-width)) / 2 + var(--page-side-padding)); }
}
.hero_video {
  --hero_video_accent: var(--accent);
  --hero_video_accent_hover: var(--accent-dark);
  --hero_video_accent_text: var(--white);
  --hero_video_progress: var(--accent-light);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius-card);
  background: var(--white);
  overflow: hidden;

  /* The 1px overlap hides the background hairline where Safari rounds the player size. */
  wistia-player {
    position: relative;
    z-index: 1;
    display: block;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    margin: -1px;
  }

  /* Safari draws the player edges a fraction of a pixel inside the frame, so the poster must not stay behind the player. */
  &.is_loaded > img { display: none; }

  > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* The rules are separate, because a browser drops a rule list with a selector it does not know. */
  &:fullscreen {
    aspect-ratio: auto;
    border-radius: 0;
    background: var(--ink);
  }

  &:-webkit-full-screen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: var(--ink);
  }
}

.hero_video_play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hero_video.is_waiting .hero_video_play { display: block; }

.hero_video_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border-radius: var(--border-radius-circle);
  background: var(--hero_video_accent);
  color: var(--hero_video_accent_text);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--hero_video_accent) 35%, transparent);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), background-color .2s ease;
}

.hero_video_play {
  &:hover .hero_video_icon,
  &:focus-visible .hero_video_icon {
    transform: scale(1.06);
    background: var(--hero_video_accent_hover);
  }
}

.hero_video_controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 32px 14px 12px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--ink) 72%, transparent));
  color: var(--white);
  opacity: 0;
  transition: opacity .3s ease;
}

.hero_video {
  &:hover .hero_video_controls,
  &:focus-within .hero_video_controls,
  &.is_paused .hero_video_controls { opacity: 1; }
}

@media (hover: none) {
  .hero_video_controls { opacity: 1; }
}

.hero_video.is_waiting .hero_video_controls { display: none; }

.hero_video_controls {
  button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: var(--border-radius-circle);
    background: transparent;
    color: var(--white);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;

    &:hover { background: color-mix(in srgb, var(--white) 16%, transparent); }
  }

  button:focus-visible,
  input:focus-visible {
    outline-color: var(--accent-light);
    outline-offset: 0;
  }
}

.hero_video {
  /* The .hero_video prefix wins over page rules for all icons, such as svg { display: block; }. */
  .hero_video_play_icon,
  .hero_video_sound_icon,
  .hero_video_exit_icon,
  &.is_paused .hero_video_pause_icon,
  &:not(.is_muted) .hero_video_muted_icon,
  &.is_fullscreen .hero_video_enter_icon { display: none; }

  &.is_paused .hero_video_play_icon,
  &:not(.is_muted) .hero_video_sound_icon,
  &.is_fullscreen .hero_video_exit_icon { display: block; }
}

.hero_video_controls button.has_label {
  gap: 8px;
  width: auto;
  padding: 0 14px 0 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.hero_video {
  &:not(.is_muted) .hero_video_muted_label,
  &.is_muted .hero_video_sound_label { display: none; }
}

.hero_video_controls {
  /* js/_hero_video.js sets --progress. */
  input {
    --progress: 0%;
    flex: 1 1 auto;
    min-width: 0;
    height: 20px;
    margin: 0 6px;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(
      to right, var(--hero_video_progress) var(--progress), color-mix(in srgb, var(--white) 35%, transparent) var(--progress)
    );
  }

  input::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: var(--border-radius-circle);
    background: var(--white);
    -webkit-appearance: none;
    appearance: none;
  }

  input::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--white) 35%, transparent);
  }

  input::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--hero_video_progress);
  }

  input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: var(--border-radius-circle);
    background: var(--white);
  }
}

.hero_video_time {
  flex: 0 0 auto;
  margin-right: 4px;
  color: color-mix(in srgb, var(--white) 88%, transparent);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .hero_video_time { display: none; }
}
.hover_underline {
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .45s cubic-bezier(.4, 0, .2, 1);
}

a[href]:hover .hover_underline,
a[href]:focus-visible .hover_underline { background-size: 100% 1px; }
.hbspt-form {
  form {
    display: flex;
    width: 100%;
    margin: 0 auto;
  }

  textarea {
    min-height: 100px;
    padding: 16px 20px;
  }

  input,
  textarea {
    box-sizing: border-box;
    color: var(--white);
    border-radius: var(--border-radius);
    border: none;
  }

  input:not([type="submit"]),
  textarea {
    display: block;
    width: 100%;
    background: var(--ink-raised);

    &:focus,
    &:hover { background: var(--ink-soft); }
  }

  input {
    &[type="submit"] {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 15px 30px;
      cursor: pointer;
    }

    &:not([type="submit"]) {
      padding-left: 20px;
      height: 60px;
    }
  }

  label { color: var(--line); }
  legend { color: var(--ink-faint); }

  .hs-richtext {
    display: flex;
    flex-direction: column;
    gap: 6px;

    p {
      color: var(--line);
      margin: 0;
    }
  }

  .submitted-message {
    &,
    * {
      font-size: 24px;
      color: var(--accent-light);
    }
  }

  ::placeholder { color: var(--line); }

  .hs-error-msgs {
    padding: 10px;
    .hs-error-msg { color: var(--error); }
  }

  .hs_error_rollup { display: none !important; }
}
/* The fallback faces match the width and line metrics of Instrument Sans, so the page does not shift when the font loads.
   The 600 face matches the header labels, not the average text, because a wrapping header moves the whole page.
   The ascent and descent overrides are the Instrument Sans ascent (0.97) and descent (0.25) divided by size-adjust. */
@font-face {
  font-family: 'Instrument Sans Fallback';
  font-weight: 400;
  src: local('Arial'), local('ArialMT');
  size-adjust: 101.78%;
  ascent-override: 95.3036%;
  descent-override: 24.5628%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Sans Fallback';
  font-weight: 500;
  src: local('Arial'), local('ArialMT');
  size-adjust: 103.11%;
  ascent-override: 94.0743%;
  descent-override: 24.246%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Sans Fallback';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 99.24%;
  ascent-override: 97.7428%;
  descent-override: 25.1915%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Instrument Sans Fallback';
  font-weight: 700;
  src: local('Arial Bold'), local('Arial-BoldMT');
  size-adjust: 99.15%;
  ascent-override: 97.8316%;
  descent-override: 25.2143%;
  line-gap-override: 0%;
}
/* The logo images are 10:3 with a built-in margin. Wordmarks have none, so they take logo_height and a smaller max-width. */
.integrations_section {
  scroll-margin-top: var(--site_header_height);
  background: var(--paper);
}

.integrations_section_logo {
  aspect-ratio: 10 / 3;
  overflow: hidden;

  &:not(.has_wordmark) img {
    width: 100%;
    height: auto;
  }

  &.has_wordmark img {
    width: auto;
    max-width: 75%;
    object-fit: contain;
  }
}
/* The lift uses translate, so it adds to the transform of the scroll_reveal animation. */
.lift_card {
  text-decoration: none;
  transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;

  &:hover {
    translate: 0 -6px;
    box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 23%, transparent);
  }
}
/* Many logos have a white background of their own, so the tiles are white. */
.logo_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: clamp(40px, 5vw, 64px);
}

@media (max-width: 480px) {
  .logo_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.logo_tile {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--white);
  transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;

  &[href]:hover {
    translate: 0 -4px;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent);
  }

  img { display: block; }
}
.page_header {
  overflow-x: clip;
  background: var(--paper);
}

.page_header_content {
  padding-top: clamp(56px, 7vw, 104px);
  padding-bottom: 48px;
}

.page_header_links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 36px;
  animation-delay: .44s;

  a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;

    &:hover,
    &:focus-visible {
      background: var(--accent);
      color: var(--white);
    }
  }
}
.page_hero {
  overflow-x: clip;
  background: var(--paper);
}

.page_hero_photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-card);
}

@media (min-width: 1060px) {
  .page_hero {
    .page_hero_photo { border-radius: var(--border-radius-card) 0 0 var(--border-radius-card); }

    &.is_stacked .hero_section_content {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "copy" "media";

      .hero_section_media {
        width: 100%;
        margin: 0 0 calc(-1 * var(--section-padding));
      }

      .hero_section_copy + .hero_section_media { margin-top: 56px; }

      .page_hero_photo { border-radius: var(--border-radius-card); }
    }
  }
}

/* The 240px leave the heading of the next section on the first screen. */
.page_hero:not(:has(.hero_section_copy)) {
  .hero_section_content { padding-top: clamp(24px, 3vw, 40px); }

  .page_hero_photo {
    max-height: calc(100svh - var(--site_header_height) - 240px);
    object-fit: cover;
  }
}
.partners_section { background: var(--paper); }

.partners_section_logo {
  min-height: 88px;
  padding: 16px;

  img {
    width: auto;
    max-width: 75%;
    height: auto;
    max-height: 56px;
    object-fit: contain;
  }
}
/* js/_pixel_backgrounds.js draws the pixel pattern in these colors, and --pixel_density scales the number of pixels. */
.pixel_zone {
  position: relative;

  > .section_container {
    position: relative;
    z-index: 1;
  }
}

.pixel_canvas {
  --pixel_ink: var(--ink);
  --pixel_accent: var(--accent);
  --pixel_density: 1;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pricing_section_inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
}

.pricing_section_field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pricing_section_field_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 15px;
    font-weight: 600;
  }

  label span {
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 400;
  }

  input {
    flex: 0 0 auto;
    width: 136px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink);
    font: inherit;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
  }

  /* js/_pricing.js shows the unlimited tier as the placeholder, so it looks like a typed value. */
  input::placeholder {
    color: inherit;
    opacity: 1;
  }

  /* js/_pricing.js steps these inputs through their list values with the arrow keys instead. */
  input.has_list_values {
    appearance: textfield;

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button { appearance: none; }
  }
}

.pricing_section_field_input {
  position: relative;
  flex: 0 0 auto;
}

/* js/_pricing.js fills the note when it rounds a typed count up to the next value that can be bought.
   The note shows above the input, so it does not move the fields. */
.pricing_section_field_note {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 1;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;

  &::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 16px;
    border: 5px solid transparent;
    border-top-color: var(--ink);
  }

  &:empty { display: none; }
}

.pricing_section_field + .pricing_section_field { margin-top: 10px; }

.pricing_section_rows {
  border-top: 1px solid var(--line);

  > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }

  > div:last-child { border-bottom: 0; }

  span:last-child { color: var(--ink-muted); }

  .is_current {
    font-weight: 600;

    span:last-child { color: var(--ink); }
  }
}
.pricing_section {
  scroll-margin-top: var(--site_header_height);
  background: var(--ink);
  color: var(--paper);

  .pixel_canvas {
    --pixel_ink: var(--ink-raised);
    --pixel_accent: var(--accent);
  }
}

.pricing_section_intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;

  .section_heading { color: var(--white); }
}

.pricing_section_switch {
  display: flex;
  gap: 8px;
  padding: 4px;
  border-radius: 999px;
  background: var(--ink-raised);

  button {
    min-height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: color-mix(in srgb, var(--paper) 78%, transparent);
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;

    &:hover { color: var(--white); }
  }

  .is_on {
    background: var(--accent);
    color: var(--white);
    font-weight: 600;
  }
}

.pricing_section_card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(32px, 4vw, 48px);
  overflow: hidden;
  border-radius: var(--border-radius-card);
  background: var(--white);
  color: var(--ink);
}

.pricing_section_features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 32px clamp(32px, 4vw, 56px);
  margin-top: clamp(40px, 5vw, 56px);

  h3 {
    margin: 0 0 12px;
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
  }

  .check_list span {
    color: color-mix(in srgb, var(--paper) 86%, transparent);
    font-weight: 500;
  }
}

@media (max-width: 900px) {
  .pricing_section_card { grid-template-columns: minmax(0, 1fr); }
}
/* js/_pricing.js sets --pricing-fill. */
.pricing_section_slider {
  --pricing-fill: 0%;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;

  &::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(to right, var(--accent) var(--pricing-fill), var(--line) var(--pricing-fill));
  }

  &::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    margin-top: -10px;
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: var(--white);
    appearance: none;
  }

  &::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--line);
  }

  &::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: var(--accent);
  }

  &::-moz-range-thumb {
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border: 3px solid var(--accent);
    border-radius: 50%;
    background: var(--white);
  }

  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }
}

/* The thumb needs 12px at both ends of the track. */
.pricing_section_ticks {
  position: relative;
  height: 18px;
  margin: -4px 12px 0;
  color: var(--ink-muted);
  font-size: 13px;

  span {
    position: absolute;
    top: 0;
    white-space: nowrap;
    transform: translateX(-50%);
  }

  /* The end labels align with the track ends, so a long label (Unlimited, 100,000) stays inside the card. */
  span:first-child { transform: translateX(-12px); }

  span:last-child { transform: translateX(calc(12px - 100%)); }
}
/* The summary stays at the top, so the price does not move when the table changes its height. */
.pricing_section_summary {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--paper);
}

.pricing_section_billing {
  display: flex;
  align-self: flex-start;
  padding: 4px;
  border-radius: 6px;
  background: var(--white);

  button {
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink-muted);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
  }

  .is_on {
    background: var(--ink);
    color: var(--white);
    font-weight: 600;
  }
}

/* The label has the height of the billing switch it replaces, so the price below does not move. */
.pricing_section_period_label {
  display: none;
  align-self: flex-start;
  align-items: center;
  min-height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 6px;
  background: var(--white);
  font-size: 15px;
  font-weight: 600;
}

.pricing_section.is_annual_only {
  .pricing_section_billing { display: none; }

  .pricing_section_period_label { display: flex; }
}

.pricing_section_price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;

  span:first-child {
    color: var(--accent);
    font-size: clamp(56px, 6vw, 80px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.045em;
  }

  span:last-child {
    color: var(--ink-soft);
    font-size: 18px;
  }
}

.pricing_section_note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.5;
}

.pricing_section_summary .arrow_button { align-self: stretch; }
.products_section { scroll-margin-top: var(--site_header_height); }

.products_section_intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 56px;
}

.products_section_lead { max-width: 640px; }

/* The 268px width, 24px side padding and 22px title keep "eazyBI for Confluence" on one line. */
.products_section_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  gap: 16px;
}

.products_section_card {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 280px;
  box-sizing: border-box;
  padding: 32px 24px;
  border-radius: var(--border-radius-card);
  background-color: var(--white);
  color: var(--ink);

  &:hover { color: var(--ink); }
}

.products_section_card_icon {
  display: block;
  width: 48px;
  height: 48px;
}

.products_section_card_text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.products_section_card_title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.products_section_card_summary {
  margin: 10px 0 0 0;
  font-size: 17px;
  line-height: 1.5;
  opacity: .82;
}

.products_section_card_link {
  margin-top: auto;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 600;
}
.section_container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding-right: var(--page-side-padding);
  padding-left: var(--page-side-padding);
  box-sizing: border-box;
}
.section_padding {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section_heading {
  margin: 0;
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.section_link {
  margin: 0;
  line-height: normal;
  font-size: 18px;
  font-weight: 600;
}

.section_intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 64px;

  .section_link { margin-top: 8px; }
}

/* Only the lead limits its line length, so a heading stays on one line when it fits. */
.section_header {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .section_lead { max-width: 760px; }
}

.section_header_centered {
  align-items: center;
  text-align: center;

  .section_lead { max-width: 820px; }
}

.section_lead {
  margin: 0;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.55;
}

.card_title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}
/* common/_showcase.haml sets --showcase_frame_ratio, the width to height ratio of the pictures. */
.showcase_section {
  scroll-margin-top: var(--site_header_height);

  .pixel_canvas { --pixel_density: .5; }
}

.showcase_section_paper { background: var(--paper); }

.showcase_section_white {
  --carousel_button_background: var(--paper);
  background: var(--white);

  .showcase_frame { box-shadow: 0 10px 50px color-mix(in srgb, var(--ink) 9%, transparent); }
}

.showcase_carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
}

.showcase_title {
  margin: 0 0 24px;
  color: var(--accent);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;

  a {
    color: var(--accent);

    &:hover { color: var(--accent); }
  }
}

.showcase_subtitle {
  margin: -16px 0 24px;
  line-height: normal;
  color: var(--ink-muted);
  font-size: 17px;
  text-align: center;
}

.showcase_frame {
  width: 100%;
  max-width: 1080px;
  aspect-ratio: var(--showcase_frame_ratio);
  box-sizing: border-box;
  border-radius: var(--border-radius-card);
  background: var(--white);
}

.showcase_slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.showcase_description {
  width: 100%;
  max-width: 760px;
  margin: 28px 0 0;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.55;
  text-align: center;
}

.showcase_carousel .carousel_controls { margin-top: 32px; }

/* The 320px are the title, a five-line description, the arrows and the gaps around them. */
@media screen and (min-width: 901px) {
  .showcase_title { margin-bottom: 16px; }

  .showcase_subtitle { margin: -8px 0 16px; }

  .showcase_frame {
    max-width: clamp(640px, calc((100svh - var(--site_header_height) - 320px) * var(--showcase_frame_ratio)), 1080px);
  }

  .showcase_description { margin-top: 20px; }

  .showcase_carousel .carousel_controls { margin-top: 20px; }
}
.support_section_white {
  --support_card_background: var(--paper);
  background: var(--white);
}

.support_section_paper {
  --support_card_background: var(--white);
  background: var(--paper);
}

.support_section_cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-top: clamp(40px, 5vw, 64px);
}

.support_section_card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 240px;
  box-sizing: border-box;
  padding: 32px;
  border-radius: var(--border-radius-card);
  background-color: var(--support_card_background);
  color: var(--ink);

  &:hover { color: var(--ink); }

  img {
    display: block;
    align-self: flex-start;
    width: auto;
    height: 52px;
  }
}

.support_section_text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.support_section_description {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.5;
}

.support_section_arrow {
  margin-top: auto;
  padding-top: 20px;
  font-size: 20px;

  .link_arrow { margin-left: 0; }
}
/* The carousel quotes are longer than the single quotes of the home and Jira pages, so they use a smaller size. */
.testimonials_section { background: var(--white); }

.testimonials_carousel {
  .carousel_slides { align-items: center; }

  /* A short quote keeps the full column width, so all quotes start at the same left edge. */
  .testimonial_quote_column {
    width: 100%;

    blockquote {
      font-size: clamp(24px, 2.6vw, 34px);
      line-height: 1.25;

      b { font-weight: 600; }
    }
  }

  .carousel_controls {
    --carousel_button_background: var(--paper);
    margin-top: 48px;
  }
}
.testimonial_quote_column {
  max-width: 940px;
  margin: 0 auto;

  /* The quote overrides the global blockquote style (common/blockquote.css), including its quote marks. */
  blockquote {
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--ink);
    font-size: clamp(32px, 3.9vw, 52px);
    font-style: normal;
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -.025em;
    text-wrap: pretty;

    &::before,
    &::after { content: none; }
  }
}

.testimonial_quote_author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(40px, 5vw, 64px);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

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

.testimonial_quote_column > p { margin-top: 56px; }
.visually_hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.why_section {
  background: var(--ink);
  color: var(--paper);

  h2 { max-width: 900px; }
}

.why_section_points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 56px clamp(32px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px);
}

.why_section_point {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);

  span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    border: 1px solid var(--accent-light);
    border-radius: var(--border-radius-circle);
    color: var(--accent-light);
    font-size: 15px;
    font-weight: 600;
  }

  p {
    margin: 0;
    color: color-mix(in srgb, var(--paper) 80%, transparent);
    font-size: 17px;
    line-height: 1.5;
  }
}
.zoomable_img {
  position: relative;

  img { cursor: pointer; }

  button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--white);
    cursor: pointer;
  }
}

.zoomable_img_open {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: var(--z-index-low-layer-1);

  i {
    display: block;
    padding: 4px;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--ink) 75%, transparent);
    font-size: 24px;
    transition: .1s;
  }
}

.zoomable_img:hover .zoomable_img_open,
.zoomable_img_open:focus-visible {
  right: 0;
  bottom: 0;

  i { font-size: 48px; }
}

.zoomable_img_close { display: none; }

.zoomable_img.is_zoomed {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: var(--z-index-very-high);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--ink) 85%, transparent);

  img {
    width: auto;
    max-width: 80vw;
    max-height: 80vh;
    cursor: default;
  }

  .zoomable_img_open { display: none; }

  .zoomable_img_close {
    position: fixed;
    top: calc(var(--site_header_height) + 16px);
    right: 20px;
    display: block;
    font-size: 48px;

    &:hover { color: var(--error); }
  }
}

@media (max-width: 740px) {
  .zoomable_img {
    pointer-events: none;

    .zoomable_img_open { display: none; }
  }
}
/* A neutral agent window, not any one vendor's app. Numbers and chart colors come from the eazyBI demo account 1000. */

.agd {
  --agd-bg: var(--ink-raised);
  --agd-bar: #161c2c;
  --agd-line: rgba(230, 233, 242, 0.09);
  --agd-text: #e6e9f2;
  --agd-muted: #9aa3b8;
  --agd-faint: #6d768c;
  --agd-accent: var(--accent-light);
  --agd-accent-soft: color-mix(in srgb, var(--accent-light) 16%, transparent);
  --agd-user: #2a3352;
  --agd-field: #20283d;
  --agd-code: #121829;
  --agd-code-text: #cfd5ea;
  --agd-ok: #4cc38a;

  --agd-navy: #1f3461;
  --agd-slide: #ffffff;
  --agd-slide-ink: #172b4d;
  --agd-slide-muted: #5e6c84;
  --agd-slide-line: #e3e7ee;
  --agd-todo: #344563;
  --agd-progress: #2f579c;
  --agd-done: #00875a;

  background: var(--agd-bg);
  color: var(--agd-text);
}

.agd {
  :where(p, li) { line-height: inherit; }
  :where(li + li) { margin-top: 0; }
}

.agd_stage { flex-direction: column; }

.agd_top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid var(--agd-line);
  background: var(--agd-bar);
}

.agd_logo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--agd-accent-soft);
  color: var(--agd-accent);
  font: 600 9.5px/1 ui-monospace, Menlo, Consolas, monospace;
}

.agd_title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agd_status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: 11px;
  background: rgba(230, 233, 242, 0.06);
  color: var(--agd-muted);
  font-size: 10px;
  font-weight: 500;
  transition: color 0.3s ease, background-color 0.3s ease;

  i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--agd-faint);
    transition: background-color 0.3s ease;
  }
}

.agd {
  &.is_working .agd_status { color: var(--agd-text); }

  &.is_working .agd_status i {
    background: var(--agd-accent);
    animation: agd_pulse 1.2s ease-in-out infinite;
  }

  &.is_done .agd_status {
    background: rgba(76, 195, 138, 0.14);
    color: var(--agd-ok);
  }

  &.is_done .agd_status i { background: var(--agd-ok); }
}

.agd_body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 0 16px 12px;
}

.agd_msgs {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px);

  .home_demo_message_inner > * { margin-top: 10px; }
}

.agd_user {
  margin-left: 72px;
  padding: 9px 12px;
  border-radius: 10px 10px 2px 10px;
  background: var(--agd-user);
  font-size: 11px;
  line-height: 1.45;
}

.agd_say {
  margin-bottom: 0;
  font-size: 11px;
  line-height: 1.5;

  &.is_check {
    display: flex;
    align-items: flex-start;
    gap: 7px;
  }

  &.is_check svg {
    width: 12px;
    height: 12px;
    margin-top: 2px;
    color: var(--agd-ok);
  }
}

.agd_count {
  color: var(--agd-muted);
  font-variant-numeric: tabular-nums;
}

.agd_skill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid rgba(143, 146, 240, 0.35);
  border-radius: 4px;
  color: #c3c5ff;
  font-size: 10px;

  svg {
    width: 11px;
    height: 11px;
  }
}

.agd_cmd {
  overflow: hidden;
  border: 1px solid var(--agd-line);
  border-radius: 6px;
  background: var(--agd-code);
  color: var(--agd-code-text);
  font: 9.5px/1.55 ui-monospace, Menlo, Consolas, monospace;
}

.agd_cmd_line {
  padding: 7px 10px;
  white-space: pre-wrap;
  word-break: break-all;

  b {
    color: var(--agd-accent);
    font-weight: 500;
  }
}

.agd_cmd_out {
  padding: 6px 10px 7px;
  border-top: 1px solid var(--agd-line);
  color: var(--agd-muted);
  white-space: pre-wrap;

  &[hidden] { display: none; }
}

.agd_ok { color: var(--agd-ok); }

.agd_swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 2px;

  + .agd_swatch_label { margin-right: 10px; }
}

.agd_deck {
  padding: 10px;
  border: 1px solid var(--agd-line);
  border-radius: 8px;
  background: #141a2b;
}

.agd_deck_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--agd-muted);
  font-size: 10.5px;

  strong {
    color: var(--agd-text);
    font-weight: 500;
  }
}

.agd_viewer {
  position: relative;
  width: 518px;
  height: 291px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--agd-slide);
}

.agd_deck_foot {
  margin-top: 7px;
  color: var(--agd-muted);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.agd_slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  background: var(--agd-slide);
  color: var(--agd-slide-ink);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;

  &.is_on {
    opacity: 1;
    transform: none;
  }

  &.is_off {
    opacity: 0;
    transform: translateX(-18px);
  }
}

.agd_eyebrow {
  color: var(--agd-progress);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.agd_slide h3 {
  margin: 6px 0 0;
  color: var(--agd-slide-ink);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.agd_slide_foot {
  margin-top: auto;
  color: var(--agd-slide-muted);
  font-size: 7px;
}

.agd_cover {
  background: var(--agd-navy);
  color: #fff;

  .agd_eyebrow { color: #8fb3ff; }

  h3 {
    margin-top: 10px;
    color: #fff;
    font-size: 28px;
  }

  p {
    margin: 6px 0 0;
    color: #c2cde3;
    font-size: 10px;
  }
}

.agd_cover_foot { margin-top: auto; }

.agd_meter_label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.agd_meter {
  height: 6px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.16);
}

.agd_meter i,
.agd_rel_bar i { transition: width 0.9s cubic-bezier(0.25, 0.8, 0.25, 1); }

.agd_meter i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--agd-done);
}

.agd_source {
  margin-top: 10px;
  color: #93a3c4;
  font-size: 7.5px;
}

.agd_kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.agd_kpi {
  padding: 9px 10px;
  border: 1px solid var(--agd-slide-line);
  border-radius: 4px;

  strong {
    display: block;
    color: var(--agd-slide-ink);
    font-size: 20px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  span {
    display: block;
    margin-top: 2px;
    color: var(--agd-slide-muted);
    font-size: 8px;
  }

  &.is_green strong { color: var(--agd-done); }
  &.is_blue strong { color: var(--agd-progress); }
}

.agd_findings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.agd_finding {
  margin: 0;
  padding-left: 8px;
  border-left: 2px solid var(--agd-progress);
  color: var(--agd-slide-muted);
  font-size: 8.5px;
  line-height: 1.45;

  b { color: var(--agd-slide-ink); }
}

.agd_legend {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  color: var(--agd-slide-muted);
  font-size: 8px;

  span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  i {
    width: 7px;
    height: 7px;
    border-radius: 1px;
  }
}

.agd_key_todo { background: var(--agd-todo); }
.agd_key_progress { background: var(--agd-progress); }
.agd_key_done { background: var(--agd-done); }

.agd_rel {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.agd_rel_row {
  display: grid;
  grid-template-columns: 52px 1fr 46px;
  align-items: center;
  gap: 8px;
}

.agd_rel_name {
  font-size: 10.5px;
  font-weight: 500;
}

.agd_rel_name small,
.agd_rel_pct small {
  display: block;
  color: var(--agd-slide-muted);
  font-size: 7px;
  font-weight: 400;
}

.agd_rel_bar {
  display: flex;
  height: 20px;
  overflow: hidden;
  border-radius: 2px;

  i {
    display: grid;
    place-items: center;
    width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 8px;
    font-style: normal;
    font-weight: 500;
    white-space: nowrap;
  }
}

.agd_rel_pct strong {
  color: var(--agd-done);
  font-size: 12px;
  font-weight: 500;
}

.agd_rel_note {
  margin: 12px 0 0;
  color: var(--agd-slide-muted);
  font-size: 8.5px;
}

.agd_composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--agd-line);
  border-radius: 10px;
  background: var(--agd-field);
  transition: border-color 0.2s ease;

  &.is_focus { border-color: rgba(143, 146, 240, 0.55); }
}

.agd_input {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 24px;
  padding-top: 3px;
  font-size: 11px;
  line-height: 1.5;
}

.agd_placeholder {
  position: absolute;
  top: 3px;
  left: 0;
  color: var(--agd-faint);
  white-space: nowrap;
}

.agd_composer.has_text .agd_placeholder { display: none; }

.agd_caret {
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--agd-text);
  opacity: 0;
}

.agd_composer.is_focus .agd_caret { animation: home_demo_blink 1s steps(1) infinite; }

.agd_send {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: var(--agd-accent);
  color: #141a2b;
  transition: transform 0.12s ease;

  svg {
    width: 12px;
    height: 12px;
  }

  &.is_pressed { transform: scale(0.88); }
}

@keyframes agd_pulse {
  50% { opacity: 0.35; }
}
/* Delete this file after the event (March 3–4, 2027). */

/* The entrance animates translate, so the transform stays free for the hover tilt. */
@keyframes home_ecd_promo_rise {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

/* The 120px minimum keeps the card clear of the heading on tablets. */
.home_ecd_promo {
  position: absolute;
  top: 20px;
  left: var(--page-side-padding);
  display: block;
  width: clamp(120px, 15vw, 210px);
  border-radius: 6px;
  line-height: 0;
  transform: rotate(-3deg);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ink) 10%, transparent);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
  animation: home_ecd_promo_rise .9s cubic-bezier(.2, .7, .2, 1) both;

  img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
  }

  &:hover,
  &:focus-visible {
    transform: translateY(-6px) rotate(1.5deg);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 16%, transparent);
  }
}

/* From 1920px the two heading lines reach the card: top = hero padding + two heading lines + subtitle margin. */
@media (min-width: 1920px) {
  .home_ecd_promo { top: calc(104px + 2 * 92px * 1.02 + 36px); }
}

@media (max-width: 767px) {
  .home_ecd_promo {
    position: relative;
    top: auto;
    left: auto;
    width: 200px;
    margin-bottom: 32px;
  }
}
.home_heading {
  margin: 0;
  font-weight: 600;
}
.home_hero { background-color: var(--paper); }

.home_hero_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(56px, 7vw, 104px);
  text-align: center;
}

.home_hero_title {
  max-width: var(--page-max-width);
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -.035em;
  animation-delay: .08s;
}

.home_hero_highlight {
  color: var(--accent);
  text-decoration: none;

  &:hover { color: var(--accent); }
}

.home_hero_break_wide { display: none; }

@media (min-width: 600px) {
  .home_hero_nowrap { white-space: nowrap; }
}

@media (min-width: 1920px) {
  .home_hero_break { display: none; }
  .home_hero_break_wide { display: inline; }
}

.home_hero_lead {
  max-width: 640px;
  margin: 36px 0 0 0;
  color: var(--ink-soft);
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.45;
  animation-delay: .32s;
}

.home_hero_button {
  margin-top: 36px;
  animation-delay: .44s;
}

.home_hero_demo_column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 1080px;
  margin-top: clamp(40px, 5vw, 64px);
  animation-delay: .6s;
}

.home_hero_demo_frame {
  padding: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 0;
  background: var(--white);
  border-radius: var(--border-radius-card) var(--border-radius-card) 0 0;
  box-shadow: 0 -10px 50px color-mix(in srgb, var(--ink) 7%, transparent);
}
/* The colors are sampled from the eazyBI product, so they stay here instead of the site colors. */

.ezd {
  --ezd-frame-radius:12px;
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.ezd {
  :where(p, li) { line-height: inherit; }
  :where(li + li) { margin-top: 0; }

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

.ezd_viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1920/938;
  overflow: hidden;
  border-radius: var(--ezd-frame-radius);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, 0.09), 0 24px 56px -16px rgba(16, 24, 40, 0.22);
}

.ezd_stage {
  width: 1920px;
  height: 938px;
  color: #2e2e2f;
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  pointer-events: none;
  text-align: left;

  svg {
    display: block;
    overflow: visible;
  }
}

.ezd_app {
  position: absolute;
  inset: 0;
  display: flex;
  background: #fff;
}

.ezd_ghost {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 1;
  transition: opacity .5s linear;
}

.ezd_main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.ezd_page { padding: 16px 15px 0 23px; }

.ezd_topbar {
  display: flex;
  gap: 5px;
  height: 33px;
}

.ezd_pbtn {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 33px;
  padding: 0 13px 0 13px;
  background: #ecedf0;
  border-radius: 4px;
  font-size: 16px;
  color: #2e2e2f;
  white-space: nowrap;
  transition: background-color .12s;

  svg {
    width: 10px;
    height: 6px;
    color: #76767a;
  }

  &.is_hover { background: #e1e2e6; }

  &.is_open { background: #d8d8d8; }
}

.ezd_dd {
  position: absolute;
  left: 23px;
  top: 50px;
  width: 172px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 3;
  display: none;

  &.is_on { display: block; }
}

.ezd_dd_row {
  height: 34.5px;
  display: flex;
  align-items: center;
  font-size: 15.5px;
  color: #2b2b2d;
  padding-left: 14px;
  white-space: nowrap;

  b {
    font-weight: 400;
    display: inline-block;
    width: 12px;
    margin-right: 2px;
    color: #555;
    text-align: center;
  }

  &.l2 { padding-left: 27px; }

  &.is_sel { background: #d8d8d8; }

  &.is_hover { background: #ecedf0; }
}

.ezd_seg {
  position: absolute;
  left: 1px;
  top: 143px;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  font-size: 12.5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);

  span {
    height: 24px;
    line-height: 24px;
    padding: 0 6px;
    background: #e3e5e8;
    color: #2b2b2d;
  }

  span:first-child { background: #aeb0b7; }
}

.ezd_card {
  position: relative;
  background: #fff;
  border: 1px solid #e9e9eb;
  border-radius: 3px;
}

.ezd_kpicard {
  margin-top: 11px;
  padding-bottom: 38px;
}

.ezd_rhead {
  height: 52px;
  display: flex;
  align-items: center;
  padding-left: 12px;

  > svg {
    width: 10px;
    height: 6px;
    color: #5f5f63;
    margin-right: 10px;
    flex: none;
  }

  h3 {
    font-size: 19px;
    font-weight: 700;
    color: #2f2f31;
    letter-spacing: -.1px;
    transition: color .12s;
  }
}

.ezd_card.is_hot .ezd_rhead h3 { color: #2452a6; }

.ezd_tools {
  position: absolute;
  right: 14px;
  top: 18px;
  display: flex;
  gap: 9px;
  opacity: 0;
  transition: opacity .12s;

  svg {
    width: 16px;
    height: 16px;
    color: #79787b;
  }
}

.ezd_card.is_hot .ezd_tools { opacity: 1; }

.ezd_chips {
  display: flex;
  gap: 7px;
  padding-left: 12px;
  height: 34px;
}

.ezd_chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #ebebed;
  border-radius: 3px;
  background: #fff;
  font-size: 16px;
  color: #2e2e2f;
  white-space: nowrap;

  .ezd_spin {
    display: none;
    width: 15px;
    height: 15px;
  }

  &.is_loading .ezd_spin { display: block; }
}

.ezd_kpibody { margin-top: 9px; }

.ezd_kpigroup {
  display: none;
  height: 34px;
  line-height: 20px;
  text-align: center;
  font-size: 16.5px;
  font-weight: 500;
  color: #444346;
}

.ezd_app.is_alpha .ezd_kpigroup { display: block; }

.ezd_kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0 12px;
  text-align: center;
}

.ezd_kpi_l {
  height: 20px;
  line-height: 20px;
  font-size: 16.5px;
  font-weight: 500;
  color: #444446;
}

.ezd_kpi_v {
  height: 42px;
  line-height: 42px;
  font-size: 36px;
  font-weight: 700;
  color: #424247;
  letter-spacing: -.2px;

  &.is_accent { color: #2b48be; }

  span {
    display: inline-block;
    padding: 0 2px;
  }
}

.ezd_row {
  display: flex;
  gap: 17px;
  margin-top: 17px;

  > .ezd_card {
    flex: 1 1 0;
    min-width: 0;
  }
}

.ezd_chartcard { height: 634px; }

.ezd_legend {
  position: absolute;
  left: 0;
  right: 0;
  top: 112px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 500;
  color: #3a3a3d;
  white-space: nowrap;

  span {
    display: flex;
    align-items: center;
    gap: 6px;
  }
}

.ezd_chart {
  position: absolute;
  left: 0;
  top: 140px;
  width: 100%;
  height: 492px;
}

.ezd_ax {
  font-size: 13px;
  fill: #666;
}

.ezd_axx {
  font-size: 13.5px;
  fill: #555;
}

.ezd_ax_r { fill: #a0aee3; }

.ezd_row3 {
  margin-top: 18px;

  .ezd_card {
    height: 200px;

    &:first-child { flex: 0 0 33%; }
  }
}

.ezd_ctx {
  position: absolute;
  width: 203px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
  z-index: 4;
  display: none;
  padding: 0;

  &.is_on { display: block; }
}

.ezd_ctx_i {
  height: 34.5px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 13px;
  font-size: 15px;
  color: #2e2e2f;
  white-space: nowrap;

  &:first-child { border-radius: 4px 4px 0 0; }

  > svg {
    width: 15px;
    height: 15px;
    color: #77777b;
    flex: none;
  }

  .ezd_spin {
    display: none;
    width: 15px;
    height: 15px;
  }

  &.is_loading > svg:first-child { display: none; }

  &.is_loading .ezd_spin { display: block; }

  b { font-weight: 700; }

  .ezd_more {
    margin-left: auto;
    width: 8px;
    height: 10px;
  }

  &.is_hover { background: #f3f4f6; }
}

.ezd_blanket {
  position: absolute;
  inset: 0;
  background: rgba(9, 30, 66, 0.6);
  z-index: 6;
  display: none;
}

.ezd_modal {
  position: absolute;
  top: 113px;
  left: 8%;
  width: 84%;
  height: 711px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  z-index: 7;
  display: none;
  flex-direction: column;
  box-shadow: 0 8px 28px rgba(9, 30, 66, 0.25);
}

.ezd_app {
  &.is_modal .ezd_blanket { display: block; }

  &.is_modal .ezd_modal { display: flex; }
}

.ezd_mhead {
  flex: none;
  height: 58px;
  background: #ecedf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px 0 23px;

  h4 {
    font-size: 21px;
    font-weight: 500;
    color: #111;
    white-space: nowrap;
  }
}

.ezd_iconbtn {
  width: 37px;
  height: 34px;
  border-radius: 3px;
  background: #dddee1;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 16px;
    height: 16px;
    color: #5e5e62;
  }
}

.ezd_mbody {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 21px 23px 0;

  .ezd_chips {
    padding-left: 0;
    height: 35px;
    margin-bottom: 8px;
  }

  .ezd_chip { height: 35px; }
}

.ezd_tbl {
  border-collapse: collapse;
  font-size: 16px;
  color: #2c2c2c;
  line-height: 19.5px;

  th,
  td {
    border: 1px solid #dcdde0;
    height: 31px;
    padding: 5px 8px;
    vertical-align: top;
    font-weight: 400;
    text-align: left;
  }

  thead th {
    background: #ecedf0;
    vertical-align: top;
  }

  .rh {
    background: #ecedf0;
    white-space: nowrap;
  }
}

.ezd_app {
  &:not(.is_rovo) .ezd_tbl td.is { width: 927px; }

  &:not(.is_rovo) .ezd_tbl .rh { width: 111px; }

  &.is_rovo .ezd_tbl { width: 100%; }
}

.ezd_tbl {
  .is {
    background: #ecedf0;
    color: #2a62c4;
  }

  .v {
    text-align: right;
    width: 113px;
    padding-right: 9px;
  }

  th.v { text-align: left; }

  .a { white-space: nowrap; }

  .a,
  th.a { display: none; }
}

.ezd_app {
  &.is_col .ezd_tbl .a { display: table-cell; }

  &.is_rovo .ezd_tbl .rh {
    white-space: normal;
    width: auto;
    min-width: 80px;
  }
}

.ezd_plus {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s,background-color .12s;

  svg {
    width: 12px;
    height: 12px;
    color: #6c6c70;
  }

  .ezd_spin {
    display: none;
    width: 15px;
    height: 15px;
  }

  &.is_on { opacity: 1; }

  &.is_hover { background: #ecedf0; }

  &.is_loading {
    opacity: 1;
    background: none;
  }

  &.is_loading > svg:first-child { display: none; }

  &.is_loading .ezd_spin { display: block; }
}

.ezd_picker {
  position: absolute;
  width: 432px;
  padding: 11px 10px 10px;
  background: #ecedf0;
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.04);
  z-index: 2;
  display: none;

  &.is_on { display: block; }
}

.ezd_pin {
  height: 38px;
  background: #fff;
  border: 1px solid #d6d7db;
  border-radius: 2px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 15.5px;
  color: #222;

  .ph {
    color: #9b9ba0;
    margin-left: 1px;
  }

  .tag {
    display: none;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 7px;
    border: 1px solid #cfd0d4;
    border-radius: 2px;
    background: #fff;
    font-size: 14.5px;
    margin-right: 8px;

    i {
      font-style: normal;
      color: #777;
      font-size: 14px;
    }
  }
}

.ezd_caret {
  display: inline-block;
  width: 1.5px;
  height: 19px;
  background: #222;
  margin: 0 1px;
  animation: home_demo_blink 1.06s steps(1) infinite;
}

.ezd_pacts {
  display: none;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  padding-right: 2px;
}

.ezd_ok {
  height: 26px;
  padding: 0 10px;
  border-radius: 3px;
  background: #0c66e4;
  color: #fff;
  font-size: 14.5px;
  line-height: 26px;
  font-weight: 500;
  transition: background-color .12s;

  &.is_hover { background: #0055cc; }
}

.ezd_cancel {
  color: #1155ce;
  font-size: 14.5px;
}

.ezd_picker {
  &.is_chip .tag { display: flex; }

  &.is_chip .ph,
  &.is_chip .q { display: none; }

  &.is_chip .ezd_pacts { display: flex; }
}

.ezd_plist {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 50px;
  height: 344px;
  overflow: hidden;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.05);
  padding: 4px 7px;
}

.ezd_picker.is_chip .ezd_plist { display: none; }

.ezd_pg {
  font-size: 15px;
  font-weight: 700;
  color: #202022;
  height: 30px;
  line-height: 32px;
  padding: 0 3px;
}

.ezd_pi {
  font-size: 15.5px;
  color: #262628;
  height: 35px;
  line-height: 35px;
  padding: 0 10px;
  border-radius: 2px;
  white-space: nowrap;

  &.is_hl { background: #ecedf0; }
}

.ezd_mfoot {
  flex: none;
  height: 56px;
  background: #ecedf0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding-right: 23px;
}

.ezd_btn {
  height: 32px;
  line-height: 30px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #dcdde0;
  border-radius: 3px;
  font-size: 15.5px;
  color: #111;
  white-space: nowrap;
  transition: background-color .12s;

  &.is_hover { background: #d9dade; }
}

.ezd_rovo {
  flex: 0 0 496px;
  display: none;
  flex-direction: column;
  position: relative;
  background: #fff;
  border-left: 1px solid #ebecf1;
  color: #323232;
}

.ezd_app.is_rovo .ezd_rovo { display: flex; }

.ezd_rhd {
  flex: none;
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 14px 0 23px;

  svg {
    width: 20px;
    height: 20px;
    color: #4b4b4d;
    flex: none;
  }

  .ezd_menu { margin-left: 18px; }

  .ezd_agent {
    width: 24px;
    height: 24px;
    margin: 0 9px 0 24px;
  }

  .nm {
    font-size: 18px;
    font-weight: 700;
    color: #202022;
    white-space: nowrap;
  }

  .dn {
    width: 12px;
    height: 8px;
    margin-left: 9px;
  }

  .sp { flex: 1; }

  .rt {
    display: flex;
    gap: 21px;
  }
}

.ezd_rbody {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 13px 12px 0 41px;
  font-size: 17.5px;
  line-height: 27.5px;
}

.ezd_bubble {
  margin-left: 60px;
  margin-bottom: 52px;
  font-size: 17px;
  background: #155bd8;
  color: #fff;
  border-radius: 12px;
  padding: 13px 16px 15px 12px;
  line-height: 23px;
}

.ezd_rbody {
  p {
    margin-bottom: 21px;
    padding-right: 16px;
  }

  .ezd_list_intro { margin-bottom: 9px; }

  h5 {
    font-size: 19.5px;
    font-weight: 700;
    color: #212023;
    margin: 0 0 9px;
  }

  ul {
    list-style: none;
    margin: 0 0 22px;
  }

  li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 5px;
  }

  li::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 11px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #323232;
  }

  b { font-weight: 700; }
}

.ezd_rin {
  flex: none;
  margin: 0 12px 0 19px;
  height: 139px;
  border: 1px solid #e3e3e6;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  position: relative;

  .ph {
    position: absolute;
    left: 21px;
    top: 22px;
    font-size: 17px;
    color: #666568;
    display: flex;
    align-items: center;

    .ezd_caret {
      height: 21px;
      margin: 0 1px 0 0;
      visibility: hidden;
    }
  }
}

.ezd_app.is_rovo_caret .ezd_rin .ph .ezd_caret { visibility: visible; }

.ezd_rtools {
  position: absolute;
  left: 21px;
  right: 12px;
  bottom: 17px;
  display: flex;
  align-items: center;
  font-size: 15.5px;
  color: #6b6b6f;

  svg {
    width: 18px;
    height: 18px;
    color: #707074;
  }
}

.ezd_agents {
  display: flex;
  margin-left: 22px;

  i {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1.5px solid #fff;
    margin-left: -4px;
  }

  i:nth-child(1) {
    margin-left: 0;
    background: #f5cd47;
  }

  i:nth-child(2) { background: #7ee2b8; }

  i:nth-child(3) { background: #669df1; }

  i:nth-child(4) { background: #b3b9c4; }
}

.ezd_rtools {
  .plus4 {
    margin-left: 6px;
    font-size: 14px;
  }

  .sp { flex: 1; }

  .auto {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-right: 24px;
  }
}

.ezd_stop {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px;

  i {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: #c42e25;
  }
}

.ezd_rfoot {
  flex: none;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14.5px;
  color: #6d6c70;

  svg {
    width: 14px;
    height: 14px;
    color: #6d6c70;
  }
}

.ezd_cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  will-change: transform;

  svg {
    position: absolute;
    display: none;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  }

  &[data-shape="arrow"] .c_arrow,
  &[data-shape="hand"] .c_hand,
  &[data-shape="ibeam"] .c_ibeam { display: block; }

  .c_arrow {
    left: -2px;
    top: -2px;
    width: 19px;
    height: 27px;
  }

  .c_hand {
    left: -9px;
    top: -2px;
    width: 25px;
    height: 27px;
  }

  .c_ibeam {
    left: -5px;
    top: -11px;
    width: 10px;
    height: 22px;
  }
}

.ezd_spin {
  animation: home_demo_spin .8s linear infinite;
  color: #8a8a8e;
}

.ezd.is_static .ezd_cursor { display: none; }

.home_hero_demo {
  /* The hero demo matches the small corners of the page, and its white frame carries the shadow. */
  .ezd { --ezd-frame-radius: 4px; }

  .ezd_viewport {
    border-radius: 4px 4px 0 0;
    box-shadow: none;
  }
}
/* Each demo lays out its stage at a fixed size, and js/home_page/_home_demo.js scales it to fit. */

.home_demo_stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  transition: opacity 0.45s ease;

  &.is_fading { opacity: 0; }
}

/* HomeDemo jumpTo sets is_still to apply a state without animating. */
.is_still .home_demo_stage {
  &,
  *,
  *::before {
    animation: none !important;
    transition: none !important;
  }
}

.home_chat_demo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  line-height: 1.4;
  text-align: left;
  -webkit-font-smoothing: antialiased;

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

  svg {
    display: block;
    flex: none;
  }

  .home_demo_stage {
    display: flex;
    width: 572px;
    height: 572px;
  }
}

.home_demo_message {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.35s ease;

  &.is_in {
    grid-template-rows: 1fr;
    opacity: 1;
  }
}

.home_demo_message_inner {
  min-height: 0;
  overflow: hidden;
}

@keyframes home_demo_blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes home_demo_spin {
  to { transform: rotate(360deg); }
}
.home_how {
  background: var(--paper);
  color: var(--ink);
}

.home_how_content {
  display: flex;
  flex-wrap: wrap;
  gap: 48px clamp(40px, 6vw, 96px);
  align-items: flex-start;
  padding-top: clamp(96px, 11vw, 150px);
  padding-bottom: 96px;
}

.home_how_intro {
  flex: 1 1 360px;
  align-self: stretch;
  max-width: 440px;
}

.home_how_intro_text {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.home_how_title {
  max-width: 900px;
  color: var(--ink);
  font-size: clamp(44px, 5.2vw, 76px);
  line-height: .96;
  letter-spacing: -.035em;
  text-align: left;

  span { white-space: nowrap; }
}

.home_how_text {
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.6;
}

.home_how_steps_column {
  flex: 1.5 1 520px;
  min-width: 0;
}

.home_how_steps { position: relative; }

.home_how_steps_head,
.home_how_step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 40px;
  margin-left: -16px;
}

.home_how_steps_head {
  align-items: center;
  padding: 0 0 12px 16px;
}

.home_how_step { padding: 28px 24px 28px 16px; }

.home_how_steps_title {
  color: var(--accent);
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -.02em;
}

.home_how_steps_head::before,
.home_how_step::before {
  content: "";
  position: absolute;
  left: 33.5px;
  width: 1px;
  background: var(--accent);
}

.home_how_steps_head::before {
  top: 50%;
  bottom: 0;
}

.home_how_step {
  &::before {
    top: 0;
    bottom: 0;
  }

  &:last-child::before {
    bottom: auto;
    height: 46px;
  }
}

.home_how_start {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
}

.home_how_step_number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  transition: background-color .3s ease, color .3s ease;
}

.home_how_step_body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: -18px -20px;
  padding: 18px 20px;
  border-radius: 4px;
  transition: background-color .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}

.home_how_step_title {
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.12;
  letter-spacing: -.025em;
}

.home_how_step_text {
  max-width: 560px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.55;
}

.home_how_step {
  &:hover .home_how_step_body {
    background-color: color-mix(in srgb, var(--accent) 7%, transparent);
    transform: translateX(4px);
  }

  &:hover .home_how_step_number,
  &:has(~ .home_how_step:hover) .home_how_step_number {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--white);
    transition-delay: calc(var(--i) * .2s + .2s);
  }
}

.home_how_steps_head::after,
.home_how_step::after,
.home_how_step_line {
  content: "";
  position: absolute;
  left: 32.5px;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .15s ease;
}

.home_how_steps_head::after {
  top: calc(50% - 1px);
  bottom: 0;
}

.home_how_step::after {
  top: 64px;
  bottom: 0;
}

.home_how_step_line {
  top: 0;
  z-index: 1;
  height: 28px;
}

.home_how_steps_head:has(~ .home_how_step:hover)::after {
  transform: scaleY(1);
  transition: transform .16s ease-out;
}

.home_how_step {
  &:has(~ .home_how_step:hover)::after {
    transform: scaleY(1);
    transition: transform .14s ease-out calc(var(--i) * .2s + .24s);
  }

  &:hover .home_how_step_line,
  &:has(~ .home_how_step:hover) .home_how_step_line {
    transform: scaleY(1);
    transition: transform .06s linear calc(var(--i) * .2s + .15s);
  }
}
.home_humans_agents { background: var(--paper); }

.home_ai_cards {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 0 clamp(56px, 7vw, 96px);
}

.home_ai_card_assistants,
.home_ai_card_agents {
  position: relative;
  z-index: 1;
  width: 420px;
  cursor: pointer;
}

.home_ai_card_assistants {
  margin-right: -120px;
  padding: 40px 150px 40px 40px;

  &:hover { transform: translate(-18px, -10px) rotate(-4deg); }

  &:active { transform: translate(-6px, 2px) rotate(-2deg) scale(.98); }
}

.home_ai_card_agents {
  margin-left: -120px;
  padding: 40px 40px 40px 150px;

  &:hover { transform: translate(18px, -10px) rotate(4deg); }

  &:active { transform: translate(6px, 2px) rotate(2deg) scale(.98); }
}

.home_ai_card .ai_card_summary {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
}

.home_ai_card_core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 440px;
  min-height: 380px;
  box-sizing: border-box;
  padding: 32px;
  border-radius: var(--border-radius-card);
  background: var(--white);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent);

  img {
    display: block;
    width: 180px;
    height: auto;
  }
}

.home_ai_card_core_text {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .home_ai_cards { flex-direction: column; }

  .home_ai_card_assistants,
  .home_ai_card_agents {
    width: 420px;
    max-width: 100%;
    min-height: 0;
    margin: 0;
    padding: 32px 32px 64px;
  }

  .home_ai_card_agents { padding: 64px 32px 32px; }

  .home_ai_card_core {
    width: 360px;
    max-width: 92%;
    min-height: 260px;
    margin: -40px 0;
  }

  .home_ai_card_assistants:hover { transform: translateY(-6px) rotate(-3deg); }
  .home_ai_card_agents:hover { transform: translateY(6px) rotate(3deg); }
}
/* The colors are sampled from the recording of the eazyBI report builder assistant. */

.rbd {
  --rbd-ink: #2a2f3a;
  --rbd-muted: #6b7283;
  --rbd-faint: #9aa0ad;
  --rbd-line: #e2e4ea;
  --rbd-grid: #ececef;
  --rbd-axis-line: #cfd3da;
  --rbd-chip: #eef0f3;
  --rbd-chip-open: #e2e5ea;
  --rbd-chip-line: #d6d9df;
  --rbd-link: #1f5aa8;
  --rbd-violet: #5546a8;
  --rbd-button: #6252be;
  --rbd-button-hover: #4f40ab;
  --rbd-focus: #8a84d6;
  --rbd-intro: #f0edfd;
  --rbd-user: #f4f5f6;
  --rbd-card: #dad1fc;
  --rbd-step: #5d5f72;

  /* Status colors: eazyBI defaults corrected for the color shift of the recording, then the purple tones of the report. */
  --rbd-todo: #2e589d;
  --rbd-progress: #b21637;
  --rbd-done: #00875a;
  --rbd-todo-purple: #dcbced;
  --rbd-progress-purple: #a857d3;
  --rbd-done-purple: #6f2daa;

  --rbd-c-todo: var(--rbd-todo);
  --rbd-c-progress: var(--rbd-progress);
  --rbd-c-done: var(--rbd-done);

  background: #fff;
  color: var(--rbd-ink);
}

.rbd {
  :where(p, li) { line-height: inherit; }
  :where(li + li) { margin-top: 0; }

  &.is_purple {
    --rbd-c-todo: var(--rbd-todo-purple);
    --rbd-c-progress: var(--rbd-progress-purple);
    --rbd-c-done: var(--rbd-done-purple);
  }
}

.rbd_builder {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 12px;
}

.rbd_crumbs {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  font-size: 10.5px;
  white-space: nowrap;

  svg {
    width: 13px;
    height: 13px;
  }
}

.rbd_crumb_link { color: var(--rbd-link); }

.rbd_crumb_sep { color: var(--rbd-faint); }

.rbd_crumb_report {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.rbd_crumb_name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rbd.is_loaded .rbd_crumb_report {
  opacity: 1;
  transform: none;
}

.rbd_tabs {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  border-bottom: 1px solid var(--rbd-line);
  font-size: 10.5px;
}

.rbd_tab {
  margin-bottom: -1px;
  padding: 3px 1px 5px;
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.rbd {
  &:not(.is_loaded) .rbd_tab_table,
  &.is_loaded .rbd_tab_bar {
    border-color: var(--rbd-link);
    color: var(--rbd-link);
  }
}

.rbd_filters {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
}

.rbd.has_filters .rbd_filters { grid-template-rows: 1fr; }

.rbd_filters_in {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 6px;
  min-height: 0;
  overflow: hidden;
  padding-top: 9px;
  opacity: 0;
  transition: opacity 0.4s ease 0.1s;
}

.rbd.has_filters .rbd_filters_in { opacity: 1; }

.rbd_chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 6px 0 7px;
  border: 1px solid var(--rbd-chip-line);
  border-radius: 3px;
  background: var(--rbd-chip);
  font-size: 10px;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease;

  svg {
    width: 8px;
    height: 8px;
    color: var(--rbd-muted);
  }

  &.is_open,
  &.is_pressed {
    border-color: #bcc1ca;
    background: var(--rbd-chip-open);
  }
}

.rbd_canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
}

.rbd_hint {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--rbd-line);
  border-radius: 4px;
  color: var(--rbd-muted);
  font-size: 10.5px;
  transition: opacity 0.3s ease;
}

.rbd.is_loaded .rbd_hint { opacity: 0; }

.rbd_chart {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.rbd.is_loaded .rbd_chart { opacity: 1; }

.rbd_chart_title {
  margin-top: 4px;
  color: #444a55;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.rbd_legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
  color: #444a55;
  font-size: 9.5px;
  font-weight: 500;

  span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  i {
    width: 8px;
    height: 8px;
    border-radius: 1px;
    transition: background-color 0.6s ease;
  }
}

.rbd_key_todo { background: var(--rbd-c-todo); }
.rbd_key_progress { background: var(--rbd-c-progress); }
.rbd_key_done { background: var(--rbd-c-done); }

.rbd_plotwrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 8px 12px 0 62px;
}

.rbd_plot {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border-left: 1px solid var(--rbd-axis-line);
}

.rbd_gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rbd_gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rbd-grid);
  animation: rbd_fade 0.45s ease both;
}

.rbd_row {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
}

.rbd_cat {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
  color: #3a3f4a;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.rbd_bar {
  position: relative;
  display: flex;
  width: 100%;
  height: 48%;
}

.rbd_seg {
  width: 0;
  height: 100%;
  transition: width 0.75s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.6s ease;
}

.rbd_seg_todo { background: var(--rbd-c-todo); }
.rbd_seg_progress { background: var(--rbd-c-progress); }
.rbd_seg_done { background: var(--rbd-c-done); }

.rbd_axis {
  position: relative;
  height: 14px;
  margin-top: 4px;
  color: var(--rbd-muted);
  font-size: 8.5px;
  font-variant-numeric: tabular-nums;

  span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    animation: rbd_fade 0.45s ease both;
  }
}

.rbd_assistant {
  display: flex;
  flex: 0 0 240px;
  flex-direction: column;
  min-height: 0;
  padding: 10px 10px 8px;
  border-left: 1px solid var(--rbd-line);
  background: #fff;
}

.rbd_a_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  color: var(--rbd-violet);
  font-size: 11.5px;
  font-weight: 500;

  svg {
    width: 12px;
    height: 12px;
    color: var(--rbd-muted);
  }
}

.rbd_msgs {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px);
}

.rbd_bubble {
  margin-top: 7px;
  padding: 7px 9px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.45;
}

.rbd_bubble_intro { background: var(--rbd-intro); }
.rbd_bubble_user { background: var(--rbd-user); }
.rbd_bubble_card { background: var(--rbd-card); }

.rbd_bubble {
  p { margin: 0; }

  * + p { margin-top: 6px; }

  ul {
    margin: 4px 0 0;
    padding-left: 13px;
  }

  li + li { margin-top: 2px; }

  b { font-weight: 700; }
}

.rbd_steps {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--rbd-step);
}

.rbd_bubble .rbd_steps {
  margin: 0;
  padding: 0;
}

.rbd_step {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  animation: rbd_rise 0.25s ease both;
}

.rbd_bubble li.rbd_step + li.rbd_step { margin-top: 0; }

.rbd_step.is_thinking { color: var(--rbd-ink); }

.rbd_step_icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 10px;
  height: 10px;
  margin-top: 2px;

  svg {
    display: none;
    width: 10px;
    height: 10px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

.rbd_step.is_done .rbd_step_icon svg { display: block; }

.rbd_spinner {
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(85, 70, 168, 0.25);
  border-top-color: var(--rbd-violet);
  border-radius: 50%;
  animation: home_demo_spin 0.7s linear infinite;
}

.rbd_step.is_done .rbd_spinner { display: none; }

.rbd_report {
  display: flex;
  align-items: flex-start;
  gap: 5px;

  svg {
    width: 13px;
    height: 13px;
    margin-top: 1px;
  }
}

.rbd_load {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 3px;
  background: var(--rbd-button);
  color: #fff;
  font-size: 9.5px;
  font-weight: 500;
  transition: background-color 0.15s ease, transform 0.12s ease;

  &.is_hover { background: var(--rbd-button-hover); }

  &.is_pressed { transform: scale(0.94); }
}

.rbd_input {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--rbd-line);
  border-radius: 4px;
  transition: border-color 0.2s ease;

  &.is_focus { border-color: var(--rbd-focus); }
}

.rbd_input_text {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 20px;
  padding-top: 3px;
  font-size: 10px;
  line-height: 1.45;
}

.rbd_placeholder {
  position: absolute;
  top: 3px;
  left: 2px;
  color: var(--rbd-faint);
  white-space: nowrap;
}

.rbd_input.has_text .rbd_placeholder { display: none; }

.rbd_caret {
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-left: 1px;
  vertical-align: -2px;
  background: var(--rbd-ink);
  opacity: 0;
}

.rbd_input.is_focus .rbd_caret { animation: home_demo_blink 1s steps(1) infinite; }

.rbd_send {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--rbd-button);
  color: #fff;
  transition: background-color 0.15s ease, transform 0.12s ease;

  svg {
    width: 11px;
    height: 11px;
  }

  &.is_pressed {
    background: var(--rbd-button-hover);
    transform: scale(0.88);
  }
}

.rbd_disclaimer {
  margin: 5px 0 0;
  color: var(--rbd-muted);
  font-size: 8.5px;
}

.rbd_menu {
  position: absolute;
  z-index: 4;
  padding: 3px 0;
  border: 1px solid #d9dce2;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 24, 40, 0.14);
  font-size: 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 0.18s ease, transform 0.18s ease;

  &.is_open {
    opacity: 1;
    transform: none;
  }

  div {
    padding: 3px 10px;
    white-space: nowrap;
  }

  .is_all { color: var(--rbd-muted); }

  .is_hover { background: var(--rbd-chip); }
}

.rbd_cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 6;
  width: 13px;
  height: 19px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.3s ease;

  &.is_visible { opacity: 1; }

  svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
  }

  &::before {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(98, 82, 190, 0.35);
    content: "";
    opacity: 0;
  }

  &.is_clicking::before { animation: rbd_click 0.45s ease-out; }
}


@keyframes rbd_click {
  from { opacity: 1; transform: scale(0.3); }
  to { opacity: 0; transform: scale(1.4); }
}

@keyframes rbd_fade {
  from { opacity: 0; }
}

@keyframes rbd_rise {
  from { opacity: 0; transform: translateY(3px); }
}
.home_support {
  scroll-margin-top: var(--site_header_height);
  background: var(--paper);
}

.home_support_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 40px clamp(40px, 5vw, 80px);
  align-items: baseline;
}

.home_support_heading {
  display: flex;
  flex-direction: column;
}

.home_support_body,
.home_support_text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home_support_body { gap: 28px; }
.home_support_text { gap: 18px; }

.home_support_lead {
  max-width: 560px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.55;
}

.home_support_link {
  font-size: 18px;
  font-weight: 600;
}

.home_support_action { margin-top: 16px; }
.home_testimonial { background: var(--paper); }

.home_testimonial_content {
  padding-top: clamp(120px, 14vw, 200px);
  padding-bottom: clamp(80px, 9vw, 120px);
}

/* Easter egg: a cat peeks over the edge of the blue products section when js/home_page/main.js sets is_peek. */
.cat_peek,
.cat_grip {
  position: absolute;
  right: 14%;
  width: 190px;
  pointer-events: none;
}

/* Safari does not clip a child with an animated transform by overflow: hidden alone, so clip-path clips it too. */
.cat_peek {
  bottom: 0;
  height: 84px;
  overflow: hidden;
  clip-path: inset(0);
  z-index: 2;
}

.cat_grip {
  --edge: 7px;
  bottom: calc(-1 * var(--edge));
  height: 83px;
  z-index: 5;
}

.cat_grip_clip {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--edge);
  overflow: hidden;
  clip-path: inset(0);

  .cat_svg_paws {
    top: 0;
    bottom: auto;
  }
}

.cat_svg {
  color: var(--ink);
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  bottom: -9px;
  transform: translateY(110%);
}

.cat_svg_paws { transform: none; }

.cat_paw_fill { fill: var(--paper); }

.cat_paws {
  .cat_paw > g { transform: translateY(20px); }

  > g > g { transform: translateY(20px); }
}

.cat_peek.is_peek .cat_svg { animation: cat_rise 6.8s linear both; }

.cat_grip {
  &.is_peek .cat_paw_left > g { animation: cat_paw_left 6.8s cubic-bezier(0.3, 0.7, 0.3, 1) both; }

  &.is_peek .cat_paw_right > g { animation: cat_paw_right 6.8s cubic-bezier(0.3, 0.7, 0.3, 1) both; }

  &.is_peek .cat_grip_left { animation: cat_clip_left 6.8s linear both; }

  &.is_peek .cat_grip_right { animation: cat_clip_right 6.8s linear both; }
}

.cat_peek.is_peek .cat_eyes { animation: cat_look 6.8s ease-in-out both; }

/* Timeline (6.8 s): head peeks 0–0.5 s, left paw 0.75–1.1 s, right paw 1.55–1.9 s, face rises 2.15–2.95 s,
   looks left and right 3.15–5.5 s, head sinks 5.6–6.1 s, paws let go 6.1–6.55 s. */
@keyframes cat_paw_left {
  0%, 11.03% { transform: translateY(20px); }
  16.18%, 89.71% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  96.32%, 100% { transform: translateY(20px); }
}

@keyframes cat_paw_right {
  0%, 22.79% { transform: translateY(20px); }
  27.94%, 89.71% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  96.32%, 100% { transform: translateY(20px); }
}

@keyframes cat_rise {
  0% {
    transform: translateY(110%);
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1);
  }
  7.35%, 31.62% {
    transform: translateY(53%);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  43.38%, 82.35% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }
  89.71%, 100% { transform: translateY(110%); }
}

/* The closed mask edge is on the blue edge (sliding paw), the open one lets the paw overlap the blue (resting paw). */
@keyframes cat_clip_left {
  0%, 15.88% { bottom: var(--edge); }
  16.32%, 89.41% { bottom: 0; }
  89.71%, 100% { bottom: var(--edge); }
}

@keyframes cat_clip_right {
  0%, 27.65% { bottom: var(--edge); }
  28.09%, 89.41% { bottom: 0; }
  89.71%, 100% { bottom: var(--edge); }
}

@keyframes cat_look {
  0%, 46.32% { transform: translateX(0); }
  50%, 60.29% { transform: translateX(-2.6px); }
  66.91%, 75.74% { transform: translateX(5.4px); }
  80.88%, 100% { transform: translateX(0); }
}

@media (max-width: 700px) {
  .cat_peek,
  .cat_grip {
    right: 8%;
    width: 140px;
  }
  .cat_peek { height: 62px; }
  .cat_grip {
    --edge: 5px;
    height: 61px;
  }
  .cat_svg { bottom: -7px; }
  .cat_svg_paws { bottom: 0; }
}
.features_dashboards {
  scroll-margin-top: var(--site_header_height);
  background: var(--paper);
}

.features_dashboards_media {
  max-width: 1080px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: clamp(6px, 1vw, 12px);
  box-sizing: border-box;
  border-radius: var(--border-radius-card);
  background: var(--white);

  video, img {
    display: block;
    width: 100%;
    height: auto;
  }

  img { display: none; }
}

@media screen and (max-width: 1000px) {
  .features_dashboards_media {
    video { display: none; }
    img { display: block; }
  }
}
.features_index .feature_block:has(+ .features_dashboards) { padding-bottom: 60px; }
.integrations_list { background: var(--paper); }

.integrations_list_categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  align-items: start;
  gap: 48px 32px;
  margin-top: clamp(40px, 5vw, 64px);
}

.integrations_category {
  h3 {
    margin: 0 0 16px;
    color: var(--ink-muted);
    font-size: 15px;
    font-weight: 600;
  }

  .logo_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0;
  }
}
.become_partner_content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.partners_page_filter {
  position: sticky;
  top: var(--site_header_height);
  z-index: var(--z-index-very-high);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.partners_page_filter_content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
}

.partners_page_filter_field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}

.partners_page_select {
  position: relative;
  display: inline-flex;

  select {
    min-width: 220px;
    min-height: 44px;
    padding: 0 40px 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--border-radius);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-weight: 500;
    appearance: none;
    cursor: pointer;
  }

  svg {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    pointer-events: none;
  }
}

/* The checkbox covers the switch, so it keeps the native keyboard and screen reader behavior. */
.partners_page_switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color .2s ease;

  input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  &:has(input:checked) { background: var(--accent); }
  &:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
}

.partners_page_switch_thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 25%, transparent);
  transition: transform .2s ease;

  input:checked + & { transform: translateX(18px); }
}

.partners_page_group_links {
  display: flex;
  gap: 24px;
  margin-left: auto;

  a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--ink);
    text-decoration: none;

    &.is_hidden { display: none; }
    &[aria-current] .hover_underline { background-size: 100% 1px; }
  }
}

.partners_page_group_count {
  color: var(--ink-muted);
  font-weight: 500;
}

/* Below 900px the filter bar does not fit on one line. The country select then fills the row beside the switch,
   with its label hidden as the select shows "All countries", and the group links take the second row. */
@media (max-width: 900px) {
  .partners_page_filter_content { gap: 4px 12px; }

  .partners_page_filter_label { display: none; }

  /* The minimum width fits "All countries" with the padding of the select. */
  .partners_page_filter_field:has(select) {
    flex: 1 1 0;
    min-width: 142px;
  }

  .partners_page_select {
    flex: 1 1 0;

    select {
      width: 100%;
      min-width: 0;
    }
  }

  .partners_page_group_links {
    flex-basis: 100%;
    margin-left: 0;
  }
}
.partners_page_partners { background: var(--paper); }

/* The page script sets the filter height, as the filter bar wraps on narrow screens. */
.partners_group {
  scroll-margin-top: calc(var(--site_header_height) + var(--partners_page_filter_height, 70px) + 24px);

  /* The groups share the background, so a group after a shown group needs no top padding of its own. */
  &:not(.is_hidden) ~ .partners_group .section_padding { padding-top: 0; }

  .section_header { margin-bottom: 40px; }
}

.partners_group_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}

.partner_card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--border-radius-card);
  background: var(--white);
}

/* The cards of both groups are equally high: the name and the locations always take two lines,
   and the dialog shows them in full. */
.partner_card .card_title,
.partner_card_locations_short {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.partner_card .card_title { min-height: 2.3em; }

.partner_card_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;

  img {
    display: block;
    width: 160px;
    height: 96px;
    object-fit: contain;
    object-position: left center;
  }
}

.partner_card_tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.partner_card_tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-pale);
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.partner_card_tag_training {
  background: var(--paper);
  color: var(--ink-soft);
}

.partner_card_description,
.partner_card_training {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;

  p, ul { margin: 0; }
  * + p, * + ul { margin-top: .75em; }
}

/* The description shows four lines until the card is expanded. */
.partner_card_description {
  max-height: 6em;
  overflow: hidden;
}

.partner_card_training {
  display: none;

  h4 {
    margin: 0 0 6px;
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
  }
}

.partner_card_toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;

  &[hidden] { display: none; }
}

.partner_card {
  &.is_expanded {
    .card_title { display: block; min-height: 0; }
    .partner_card_locations { min-height: 0; }
    .partner_card_description { max-height: none; }
    .partner_card_training { display: block; }
    .partner_card_locations_short { display: none; }
    .partner_card_locations_full { display: inline; }
  }

  /* The card stays in place, hidden, while its dialog is open. */
  &.is_open { visibility: hidden; }
}

.partner_card_locations {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 3em;
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;

  svg {
    flex: 0 0 auto;
    margin-top: 1px;
  }
}

.partner_card_locations_full { display: none; }

.partner_card_links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;

  .arrow_link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.partner_card.is_hidden,
.partners_group.is_hidden { display: none; }

.partners_page_empty {
  display: none;
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  color: var(--ink-muted);
  font-size: 19px;
  text-align: center;

  &.is_visible { display: block; }
}

.partner_dialog {
  width: calc(100% - 32px);
  max-width: 720px;
  max-height: calc(100dvh - 64px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--border-radius-card);
  background: var(--white);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--ink) 30%, transparent);
  transform-origin: top left;

  &::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }

  .partner_card { padding: clamp(28px, 4vw, 40px); }

  /* The close button sits in the top right corner, where the card header puts the certified tag. */
  .partner_card_header { padding-right: 48px; }
}

.partner_dialog_close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;

  &:hover { background: var(--line); }
}

/* The page does not scroll behind the open dialog, and the stable gutter keeps the layout from shifting
   when the scrollbar disappears. */
html:has(.partner_dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}
.company_section { background: var(--paper); }

.company_section_content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px 72px;
  align-items: center;

  @media (min-width: 900px) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
}

.company_section_intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.company_section_details {
  display: grid;
  gap: 8px;
  margin: 12px 0 16px;
  font-size: 16px;
  line-height: 1.5;

  div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 8px;
  }

  dt { font-weight: 600; }

  dd {
    margin: 0;
    color: var(--ink-soft);
  }
}

/* The aspect ratio is that of Latvia, and js/_location_map.js draws the map in these colors. */
.location_map {
  --map_red: var(--latvian-red);
  --map_white: var(--white);
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}
/* The small top padding keeps the heading on the first screen. */
.history_section {
  background: var(--paper);

  .section_padding { padding-top: clamp(40px, 5vw, 64px); }
}

.history_section_text {
  max-width: 760px;
  margin-inline: auto;

  h2 { text-align: center; }

  p {
    color: var(--ink-soft);
    font-size: 19px;
    line-height: 1.6;
  }

  h2 + p { margin-top: clamp(24px, 3vw, 32px); }
}
.team_section { background: var(--white); }

.team_section_members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 32px 16px;
  margin-top: clamp(40px, 5vw, 64px);
}

/* Phones narrower than two 160px columns still show two people in a row. */
@media (max-width: 480px) {
  .team_section_members { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.team_section_member {
  display: flex;
  flex-direction: column;
  gap: 4px;

  img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 12px;
    border-radius: var(--border-radius-card);
    background: var(--paper);
  }

  h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
  }

  p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1.4;
  }
}
.careers_list {
  background: var(--paper);

  .content_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 20px;

    > .info_block {
      text-align: center;

      p {
        max-width: 680px;
        margin-inline: auto;
        text-align: left;
      }
    }
  }

  .careers_list_item {
    display: inline-flex;
    justify-content: center;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;

    img {
      max-width: 400px;
      object-fit: cover;
    }

    .info_block {
      box-sizing: border-box;
      padding: 20px;
      text-align: left;
      max-width: 640px;

      h2 { font-size: 24px; }
    }
  }
}

@media (max-width: 900px) {
  .careers_list .careers_list_item {
    flex-wrap: wrap;
    max-width: 640px;

    img { max-width: 100%; }

    .info_block h2 {
      font-size: 20px;
      br { display: none; }
    }
  }
}
.career_content_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 60px;
  padding: 0 20px 80px;
  box-sizing: border-box;
  position: relative;

  .info_block {
    text-align: left;
    width: 640px;

    h2 { padding: 0; }

    ul {
      padding-left: 0;

      li {
        position: relative;
        padding-left: 14px;

        &::before {
          content: "-";
          position: absolute;
          left: 0;
        }
      }
    }

    li, p { line-height: 1.5; }

    p {
      padding: 0;
      margin: 0;
    }
  }

  .graphic {
    width: 240px;
    line-height: 0;
  }
}

@media screen and (max-width: 970px) {
  .career_content_block {
    padding: 50px 20px 0;

    .info_block { width: 100%; }

    .graphic {
      width: 100%;
      max-width: 480px;
      margin-bottom: 20px;

      img { width: 150px; }
    }
  }
}
.career_cta {
  background: var(--paper);

  .content_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 60px 20px;

    .info_block {
      margin: auto;

      p {
        line-height: 1.5;
        margin: 0;
        text-align: left;
      }
    }
  }
}
.career_ff {
  max-width: 1000px;
  margin: 0 auto;
  padding: 100px 0 80px;

  img {
    border-radius: var(--border-radius);
    margin-bottom: 30px;
  }

  h1, p {
    text-align: left;
    max-width: 100%;
  }
}

@media screen and (max-width: 970px) {
  .career_ff {
    padding: 50px 0;
    h1, p { padding: 0 20px; }
    br { display: none; }
    img { border-radius: var(--border-radius-none); }
  }
}
.event_list_hero {
  overflow-x: clip;
  background: var(--paper);
}

.event_list_hero_content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding-top: clamp(56px, 7vw, 104px);
}

/* The artwork keeps its own proportions inside a white margin, so no part of it is cut. */
.event_list_upcoming {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(16px, 2vw, 24px);
  border-radius: var(--border-radius-card);
  background: var(--white);
  animation-delay: .44s;
}

.event_list_upcoming_image {
  display: block;
  overflow: hidden;
  border-radius: var(--border-radius);

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.event_list_upcoming_content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 0 clamp(16px, 3vw, 32px);

  .arrow_button { margin-top: 6px; }
}

/* The breakpoint matches the menu of the site header (common/header.css). */
@media (max-width: 960px) {
  .event_list_upcoming { grid-template-columns: minmax(0, 1fr); }

  .event_list_upcoming_content { padding: 24px 8px 8px; }
}

.event_list_tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-pale);
  color: var(--accent-deep);
  font-size: 14px;
  font-weight: 600;
}

.event_list_meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: 16px;
  font-weight: 600;
}

.event_list_upcoming_title {
  margin: 0;
  font-size: clamp(28px, 2.8vw, 38px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.event_list_description {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.5;

  p { margin: 0; }
}

/* The past events continue the paper background of the hero, whose bottom padding already separates them. */
.event_list_past {
  .section_padding { padding-top: 0; }

  .section_heading { margin-bottom: 48px; }
}

.event_list_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}

.event_list_card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--border-radius-card);
  background: var(--white);

  img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }

  .event_list_meta { font-size: 14px; }

  .card_title a {
    color: var(--ink);

    &:hover { color: var(--accent); }
  }
}

.event_list_card_content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}

.event_list_card_links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: auto;
  padding-top: 10px;
  font-size: 15px;
  font-weight: 600;

  .arrow_link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.ecd27 {
  #agenda {
    background: var(--ink);
    color: var(--cream);
  }

  .agenda_container {
    padding-top: 140px;
    padding-bottom: 140px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;

    @media (min-width: 768px) and (max-width: 1023px) { display: block; }

    @media (max-width: 767px) {
      display: block;
      padding-top: 80px;
      padding-bottom: 80px;
    }
  }

  .agenda_intro {
    grid-column: span 5;
    min-width: 0;

    h2 {
      font-family: var(--ecd27_heading_font);
      font-weight: 700;
      font-size: 72px;
      line-height: 1;
      letter-spacing: -0.03em;

      @media (max-width: 767px) { font-size: 48px; }
    }

    p {
      font-size: 18px;
      line-height: 1.5;
      color: color-mix(in srgb, var(--cream) 75%, transparent);
      margin: 20px 0 40px;
      max-width: 360px;

      @media (max-width: 767px) {
        font-size: 17px;
        margin: 16px 0 28px;
        max-width: none;
      }
    }
  }

  .agenda_intro_sticky {
    position: sticky;
    top: 120px;

    @media (max-width: 1023px) { position: static; }
  }

  .agenda_tabs {
    display: inline-flex;
    padding: 6px;
    gap: 6px;
    background: color-mix(in srgb, var(--cream) 8%, transparent);
    --c: 18px;
    --r: 4px;
  }

  .tab {
    min-height: 48px;
    padding: 0 24px;
    border: 0;
    background: transparent;
    color: var(--cream);
    font-family: var(--ecd27_heading_font);
    font-weight: 700;
    font-size: 17px;
    cursor: pointer;
    --c: 14px;
    --r: 4px;

    &[aria-selected="true"] {
      background: var(--lavender);
      color: var(--ink);
    }

    @media (max-width: 767px) { padding: 0 22px; }
  }

  .agenda_panels {
    grid-column: span 7;
    min-width: 0;

    @media (min-width: 768px) and (max-width: 1023px) { margin-top: 48px; }
    @media (max-width: 767px) { margin-top: 32px; }
  }

  .agenda_panel { border-top: 1px solid var(--cream-border); }

  .row {
    display: flex;
    gap: 32px;
    padding: 26px 20px;
    border-bottom: 1px solid var(--cream-border);

    @media (max-width: 767px) {
      gap: 16px;
      padding: 20px 12px;
    }
  }

  .agenda_time {
    flex: 0 0 80px;
    font-size: 17px;
    color: var(--lavender);
    padding-top: 4px;

    @media (max-width: 767px) {
      flex-basis: 48px;
      font-size: 15px;
      padding-top: 3px;
    }
  }

  .agenda_title {
    font-family: var(--ecd27_heading_font);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: normal;
    max-width: 520px;

    @media (max-width: 767px) {
      font-size: 19px;
      line-height: 1.25;
    }
  }

  .agenda_speaker {
    font-size: 16px;
    color: color-mix(in srgb, var(--cream) 70%, transparent);
    margin-top: 8px;

    @media (max-width: 767px) {
      font-size: 15px;
      line-height: 1.4;
      margin-top: 6px;
    }
  }
}
.ecd27 {
  /* The 1px overlap hides a light seam when the section edge falls on a fractional pixel. */
  #attend,
  #register {
    margin-top: -1px;
    padding-top: 1px;
  }

  #attend { background: var(--ink); }

  .attend_panel { background: var(--cream); }

  .attend_container {
    padding-top: 140px;
    padding-bottom: 80px;

    @media (max-width: 767px) {
      padding-top: 80px;
      padding-bottom: 48px;
    }
  }

  .attend_intro {
    margin-bottom: 64px;

    h2 {
      font-family: var(--ecd27_heading_font);
      font-weight: 700;
      font-size: 72px;
      line-height: 1;
      letter-spacing: -0.03em;

      @media (max-width: 767px) { font-size: 44px; }
    }

    p {
      font-size: 22px;
      line-height: 1.45;
      max-width: 640px;
      margin-top: 24px;

      @media (max-width: 767px) {
        font-size: 18px;
        margin-top: 16px;
      }
    }

    @media (max-width: 767px) { margin-bottom: 36px; }
  }

  .attend_grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    @media (min-width: 768px) and (max-width: 1023px) { grid-template-columns: minmax(0, 1fr); }

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }
  }

  .attend_card {
    height: 100%;
    box-sizing: border-box;
    min-height: 440px;
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    --c: 56px;
    --r: 8px;

    h3 {

      font-family: var(--ecd27_heading_font);

      font-weight: 700;

      font-size: 52px;

      line-height: 1;

      letter-spacing: -0.03em;

    }

    p {
      font-size: 19px;
      line-height: 1.5;
      max-width: 460px;
    }

    .btn { margin-top: 32px; }

    @media (min-width: 768px) and (max-width: 1023px) { min-height: 0; }

    @media (max-width: 767px) {
      min-height: 0;
      padding: 28px;
      justify-content: flex-start;
      gap: 40px;
      --c: 40px;
      --r: 6px;

      h3 { font-size: 38px; }

      p {
        font-size: 17px;
        max-width: none;
      }

      .btn { margin-top: 28px; }
    }
  }

  .attend_card_in_person {
    background: var(--lavender);
    color: var(--ink);
  }

  .attend_card_online {
    background: var(--ink);
    color: var(--cream);

    p { color: color-mix(in srgb, var(--cream) 86%, transparent); }
  }
}
.ecd27 {
  #register { background: var(--ink); }

  .closing_panel {
    background: var(--lavender);
    /* See #speak for why this uses clip instead of hidden. */
    overflow: clip;
  }

  .closing_container {
    padding-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;

    @media (max-width: 767px) { padding-top: 72px; }
  }

  .closing_ride {
    padding-top: 72px;
    padding-bottom: 64px;

    .brush_ride_rider img { width: 340px; }

    @media (max-width: 767px) {
      padding-top: 56px;
      padding-bottom: 48px;

      .brush_ride_rider img { width: 240px; }
    }
  }
}
.ecd27_document {
  --cream: #f2efe8;
  --cream-border: color-mix(in srgb, var(--cream) 20%, transparent);
  --lavender: #c2b3ff;
  --card: #fbfaf6;
  --map-placeholder: #d9d4c7;
  --map-background: #e9e4d8;
  --ecd27_heading_font: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  --ecd27_body_font: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, sans-serif;
  --ecd27_ease_out: cubic-bezier(.2, .7, .2, 1);
  /* The navigation heights include the top margin of the bar. */
  --ecd27_nav_height: 88px;
  --ecd27_nav_mobile_height: 60px;
  --ecd27_nav_footer_gap: 16px;
}

.ecd27_document {
  /* The mobile section padding leaves the headings of in-page link targets just below the sticky navigation bar. */
  @media (max-width: 767px) { scroll-padding-top: 24px; }

  body {
    margin: 0;
    background: var(--cream);
  }
}

@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes ride { from { transform: translateX(-38vw); } to { transform: translateX(38vw); } }

.ecd27 {
  width: 100%;
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
  font-family: var(--ecd27_body_font);
  line-height: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;

  h1, h2, h3, p, blockquote { margin: 0; }
  h1, h2, h3 { font-weight: 700; }
  a { color: var(--ink); text-decoration: none; }
  img, svg { display: block; }
  button { font: inherit; }
  [hidden] { display: none !important; }

  /* The page uses the browser defaults, not those of base/general.css and common/blockquote.css. */
  :where(p) { max-width: none; }

  :where(li) {
    margin: 0;
    list-style: inherit;
    text-align: inherit;
  }

  :where(blockquote) {
    max-width: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
    font-style: normal;
    line-height: inherit;
    text-align: inherit;

    &::before,
    &::after { content: none; }
  }

  .container {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;

    @media (max-width: 767px) {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

  .in { animation: rise 0.9s var(--ecd27_ease_out) both; }
  .in1 { animation-delay: .08s; }
  .in2 { animation-delay: .2s; }
  .in3 { animation-delay: .32s; }
  .in4 { animation-delay: .44s; }
  .in5 { animation-delay: .6s; }
  .panel_in { animation: fadein .45s ease both; }

  @supports (animation-timeline: view()) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .ride { animation: ride linear both; animation-timeline: view(); animation-range: cover 10% cover 90%; }
    /* The closing cats finish at half cover: the page ends soon after them, so they never scroll further up. */
    .ride_closing { animation: ride linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }

  /* js/event_post/ecd27.js adds reveal_fallback when the browser does not support animation-timeline. */
  &.reveal_fallback {
    .rv {
      opacity: 0;
      transform: translateY(48px);
      transition: opacity .9s var(--ecd27_ease_out), transform .9s var(--ecd27_ease_out);
    }

    .card.rv {
      transition:
        opacity .9s var(--ecd27_ease_out), transform .9s var(--ecd27_ease_out), background-color .35s ease, color .35s ease;
    }

    .rv.is_revealed {
      opacity: 1;
      transform: none;
    }
  }

  .btn {
    transition: transform .25s var(--ecd27_ease_out), background-color .25s ease, color .25s ease;

    .arr { transition: transform .25s var(--ecd27_ease_out); }
  }
  .navlink { display: inline-block; transition: opacity .2s ease, transform .25s var(--ecd27_ease_out); opacity: .84; }
  .card { transition: background-color .35s ease, color .35s ease; background-color: var(--card); color: var(--ink); }
  .brush_arrow { transform-origin: 14px 10px; transition: transform .5s cubic-bezier(.3, 1.4, .4, 1); }
  .tilt { transition: transform .4s var(--ecd27_ease_out); }
  .row { transition: background-color .2s ease, padding-left .25s ease; }
  .tab { transition: background-color .2s ease, color .2s ease; }
  .zoom { transition: transform .6s var(--ecd27_ease_out); }
  .vid .play { transition: transform .3s var(--ecd27_ease_out); }

  /* Touch screens keep :hover on the last tapped element, so only precise pointers get the hover effects. */
  @media (hover: hover) and (pointer: fine) {
    .btn {
      &:hover { transform: translateY(-2px); }
      &:hover .arr { transform: translateX(4px) rotate(-45deg); }
    }
    .navlink:hover { opacity: 1; transform: translateY(-2px); }
    .card {
      &:hover { background-color: var(--lavender); }
      &:hover .brush_arrow { transform: rotate(90deg); }
    }
    /* The stacked attend cards on mobile have too small a gap for the lift. */
    @media (min-width: 768px) {
      .tilt:hover { transform: translateY(-8px) rotate(-0.6deg); }
    }
    .row:hover { background-color: color-mix(in srgb, var(--lavender) 10%, transparent); padding-left: 32px; }
    .tile:hover .zoom { transform: scale(1.06); }
    .vid:hover .play { transform: scale(1.12); }

    @media (max-width: 767px) {
      .row:hover { padding-left: 22px; }
    }
  }

  /* Rounded chamfers use shape() where supported and polygon() as the fallback.
     Each element sets --c (the cut size) and --r (the rounding of the cut edges). */

  .chA,
  .chB,
  .chC {
    --d: calc(var(--r) * 0.7071);

    /* The clip-path also clips a regular focus outline, so draw it inside the element. */
    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: -6px;
    }
  }
  .chA { clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
  .chB { clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  .chC { clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, 0 100%); }

  @supports (clip-path: shape(from 0 0, line to 1px 1px)) {
    .chA {
      clip-path: shape(
        from var(--r) 0, line to calc(100% - var(--c) - var(--r)) 0,
        curve to calc(100% - var(--c) + var(--d)) var(--d) with calc(100% - var(--c)) 0,
        line to calc(100% - var(--d)) calc(var(--c) - var(--d)), curve to 100% calc(var(--c) + var(--r)) with 100% var(--c),
        line to 100% calc(100% - var(--r)), curve to calc(100% - var(--r)) 100% with 100% 100%,
        line to calc(var(--c) + var(--r)) 100%, curve to calc(var(--c) - var(--d)) calc(100% - var(--d)) with var(--c) 100%,
        line to var(--d) calc(100% - var(--c) + var(--d)),
        curve to 0 calc(100% - var(--c) - var(--r)) with 0 calc(100% - var(--c)),
        line to 0 var(--r), curve to var(--r) 0 with 0 0, close
      );
    }

    .chB {
      clip-path: shape(
        from calc(var(--c) + var(--r)) 0, line to calc(100% - var(--r)) 0, curve to 100% var(--r) with 100% 0,
        line to 100% calc(100% - var(--c) - var(--r)),
        curve to calc(100% - var(--d)) calc(100% - var(--c) + var(--d)) with 100% calc(100% - var(--c)),
        line to calc(100% - var(--c) + var(--d)) calc(100% - var(--d)),
        curve to calc(100% - var(--c) - var(--r)) 100% with calc(100% - var(--c)) 100%,
        line to var(--r) 100%, curve to 0 calc(100% - var(--r)) with 0 100%,
        line to 0 calc(var(--c) + var(--r)), curve to var(--d) calc(var(--c) - var(--d)) with 0 var(--c),
        line to calc(var(--c) - var(--d)) var(--d), curve to calc(var(--c) + var(--r)) 0 with var(--c) 0, close
      );
    }

    .chC {
      clip-path: shape(
        from var(--r) 0, line to calc(100% - var(--c) - var(--r)) 0,
        curve to calc(100% - var(--c) + var(--d)) var(--d) with calc(100% - var(--c)) 0,
        line to calc(100% - var(--d)) calc(var(--c) - var(--d)), curve to 100% calc(var(--c) + var(--r)) with 100% var(--c),
        line to 100% calc(100% - var(--r)), curve to calc(100% - var(--r)) 100% with 100% 100%,
        line to var(--r) 100%, curve to 0 calc(100% - var(--r)) with 0 100%,
        line to 0 var(--r), curve to var(--r) 0 with 0 0, close
      );
    }
  }

  .btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--ecd27_heading_font);
    font-weight: 700;
    text-decoration: none;

    .arr { flex-shrink: 0; }
  }

  .btn_lavender { background: var(--lavender); color: var(--ink); }
  .btn_navy { background: var(--ink); color: var(--cream); }
  .btn_cream { background: var(--cream); color: var(--ink); }

  .btn_nav {
    gap: 10px;
    min-height: 48px;
    padding: 0 20px 0 24px;
    font-size: 16px;
    --c: 20px;
    --r: 4px;

    .arr { width: 18px; height: 18px; }

    @media (max-width: 767px) {
      gap: 8px;
      min-height: 44px;
      padding: 0 14px 0 18px;
      font-size: 15px;
      --c: 14px;
      --r: 3px;

      .arr { width: 16px; height: 16px; }
    }
  }

  .btn_large {
    gap: 12px;
    min-height: 60px;
    padding: 0 24px 0 32px;
    font-size: 20px;
    --c: 20px;
    --r: 4px;

    .arr { width: 20px; height: 20px; }

    @media (max-width: 767px) {
      min-height: 56px;
      padding: 0 22px 0 28px;
      font-size: 18px;
      --c: 18px;

      .arr { width: 18px; height: 18px; }
    }
  }

  .btn_medium {
    gap: 12px;
    min-height: 56px;
    padding: 0 22px 0 28px;
    font-size: 18px;
    --c: 20px;
    --r: 4px;

    .arr { width: 18px; height: 18px; }

    @media (max-width: 767px) {
      gap: 10px;
      min-height: 52px;
      padding: 0 18px 0 22px;
      font-size: 16px;
      --c: 16px;

      .arr { width: 16px; height: 16px; }
    }
  }

  .btn_huge {
    gap: 16px;
    min-height: 88px;
    padding: 0 36px 0 48px;
    font-size: 40px;
    letter-spacing: -0.02em;
    --c: 24px;
    --r: 5px;

    .arr { width: 40px; height: 40px; stroke-width: 2.4; }

    @media (max-width: 767px) {
      gap: 14px;
      min-height: 72px;
      padding: 0 28px 0 36px;
      font-size: 32px;
      --c: 20px;
      --r: 4px;

      .arr { width: 32px; height: 32px; }
    }
  }

  .vid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .play {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--lavender);
    display: flex;
    align-items: center;
    justify-content: center;

    svg { width: 22px; height: 22px; }

    @media (max-width: 767px) {
      width: 56px;
      height: 56px;

      svg { width: 20px; height: 20px; }
    }
  }

  .placeholder_label {
    font-family: var(--ecd27_body_font);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--cream) 70%, transparent);

    @media (max-width: 767px) { font-size: 12px; }
  }

  .brush_ride_rider {
    display: flex;
    justify-content: center;

    img {
      width: 300px;
      height: auto;
      position: relative;
      z-index: 1;
    }
  }

  .brush_line {
    width: 100%;
    height: 14px;
    margin-top: -8px;
  }

}
.ecd27 {
  .hero {
    position: relative;
    background-color: var(--ink);
    color: var(--cream);
    overflow: hidden;
  }

  .hero_content {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
    padding: 184px 40px 120px;
    min-height: 480px;

    /* The mobile prototype has a 124px padding plus the 12px collapsed nav margin (see nav) above the hero text. */
    @media (max-width: 767px) {
      padding: 136px 20px 0;
      min-height: 0;
    }
  }

  .hero_text {
    /* The hero video starts at 44% of the width. */
    max-width: min(460px, calc(44vw - 64px));

    @media (min-width: 768px) and (max-width: 1023px) { max-width: calc(50vw - 64px); }
    @media (max-width: 767px) { max-width: none; }
  }

  .hero h1 img {
    width: 100%;
    max-width: 440px;
    height: auto;

    @media (max-width: 767px) { max-width: 300px; }
  }

  .hero_date {
    margin-top: 36px;
    font-family: var(--ecd27_heading_font);
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: var(--lavender);

    @media (min-width: 768px) and (max-width: 1023px) { font-size: 20px; }

    @media (max-width: 767px) {
      margin-top: 28px;
      font-size: 19px;
      line-height: 1.25;
    }
  }

  .hero_lead {
    font-size: 26px;
    line-height: 1.35;
    color: color-mix(in srgb, var(--cream) 86%, transparent);
    max-width: 480px;
    margin-top: 44px;

    @media (min-width: 768px) and (max-width: 1023px) { font-size: 22px; }

    @media (max-width: 767px) {
      font-size: 21px;
      margin-top: 24px;
    }
  }

  .hero_cta {
    margin-top: 40px;

    @media (max-width: 767px) { margin-top: 32px; }
  }

  .hero_media {
    position: absolute;
    top: 128px;
    right: 0;
    bottom: 0;
    width: 56%;

    .hero_video {
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
      border-radius: 0;
      background: var(--ink-raised);
      --c: 112px;
      --r: 8px;
    }

    @media (min-width: 768px) and (max-width: 1023px) { width: 50%; }

    @media (max-width: 767px) {
      position: static;
      width: auto;
      height: 300px;
      margin-top: 56px;

      .hero_video {
        position: relative;
        height: 100%;
        --c: 56px;
      }
    }
  }

  .hero_video {
    --hero_video_accent: var(--lavender);
    --hero_video_accent_hover: var(--lavender);
    --hero_video_accent_text: var(--ink);
    --hero_video_progress: var(--lavender);
  }

  .hero_video_controls {
    gap: 16px;
    /* The right padding keeps the sound button clear of the cut bottom-right corner. */
    padding: 40px calc(var(--c) + 8px) 24px 32px;

    @media (max-width: 767px) {
      gap: 12px;
      padding: 32px calc(var(--c) + 4px) 16px 20px;
    }

    button {
      color: var(--cream);
      transition: transform .25s var(--ecd27_ease_out);

      &:hover {
        background: transparent;
        transform: scale(1.08);
      }
    }

    [data-video="toggle"] {
      background: var(--lavender);
      color: var(--ink);

      &:hover { background: var(--lavender); }
    }

    button.has_label {
      padding: 0;
      font-family: var(--ecd27_heading_font);

      &:hover { transform: none; }
    }
  }
}
.ecd27 {
  .intro_container {
    padding-top: 160px;
    padding-bottom: 40px;

    @media (max-width: 767px) {
      padding-top: 80px;
      padding-bottom: 24px;
    }
  }

  .intro_text p {
    font-weight: 500;
    font-size: 40px;
    line-height: 1.22;
    letter-spacing: -0.015em;
    max-width: 940px;

    & + p { margin-top: 32px; }

    @media (max-width: 767px) {
      font-size: 24px;
      line-height: 1.28;
      letter-spacing: -0.01em;

      & + p { margin-top: 24px; }
    }
  }

  .intro_ride {
    padding-top: 40px;

    @media (max-width: 767px) {
      padding-top: 32px;

      img { width: 210px; }
    }
  }

  .highlights_container {
    padding-top: 140px;
    padding-bottom: 140px;

    @media (max-width: 767px) { padding: 80px 0; }
  }

  .highlights_heading {
    font-family: var(--ecd27_heading_font);
    font-weight: 700;
    font-size: 72px;
    line-height: 1;
    letter-spacing: -0.03em;
    max-width: 900px;
    width: 609px;
    margin-bottom: 64px;

    @media (max-width: 767px) {
      font-size: 42px;
      width: auto;
      margin: 0 20px 32px;
    }
  }

  .highlights_grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;

    @media (min-width: 768px) and (max-width: 1023px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    @media (max-width: 767px) {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0 20px;
    }
  }

  .card {
    box-sizing: border-box;
    min-height: 300px;
    padding: 32px;
    display: grid;
    grid-template-rows: auto minmax(48px, 1fr) auto auto;
    --c: 40px;
    --r: 8px;

    .brush_arrow { grid-row: 1; }

    h3 {
      grid-row: 3;
      font-family: var(--ecd27_heading_font);
      font-weight: 700;
      font-size: 28px;
      line-height: 1.1;
      letter-spacing: -0.01em;
    }

    p {
      grid-row: 4;
      font-size: 17px;
      line-height: 1.5;
      margin-top: 12px;
      opacity: .82;
    }

    @media (max-width: 767px) {
      min-height: 0;
      padding: 20px 22px 22px;
      grid-template-rows: none;
      --c: 20px;
      --r: 4px;

      /* The cards are not clickable, so the arrow stays a desktop-only hover decoration. */
      .brush_arrow { display: none; }

      h3 {
        grid-row: 1;
        font-size: 20px;
        line-height: 1.15;
      }

      p {
        grid-row: 2;
        font-size: 15px;
        line-height: 1.45;
        margin-top: 8px;
      }
    }
  }
}
.ecd27 {
  /* Browsers keep the margin box of a sticky element inside its parent, so the wrapper also holds the footer gap.
     The negative top margin of main keeps the hero under the bar. */
  .site_nav {
    position: sticky;
    top: 16px;
    z-index: 50;
    height: calc(var(--ecd27_nav_height) + var(--ecd27_nav_footer_gap));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;

    @media (max-width: 767px) {
      top: 12px;
      height: calc(var(--ecd27_nav_mobile_height) + var(--ecd27_nav_footer_gap));
      align-items: stretch;
      padding: 0 12px;
    }

    + main {
      margin-top: calc(-1 * (var(--ecd27_nav_height) + var(--ecd27_nav_footer_gap)));

      @media (max-width: 767px) { margin-top: calc(-1 * (var(--ecd27_nav_mobile_height) + var(--ecd27_nav_footer_gap))); }
    }

    nav {
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      width: 100%;
      max-width: 1320px;
      box-sizing: border-box;
      padding: 12px 40px;
      background: color-mix(in srgb, var(--ink) 66%, transparent);
      backdrop-filter: blur(22px) saturate(1.4);
      -webkit-backdrop-filter: blur(22px) saturate(1.4);
      --c: 20px;
      --r: 4px;

      /* The mobile prototype renders the nav 12px from the top: its 12px margin collapses through the sticky wrapper. */
      @media (max-width: 767px) {
        margin-top: 0;
        gap: 12px;
        padding: 8px 8px 8px 20px;
        --c: 16px;
      }
    }
  }

  .nav_logo {
    display: flex;
    align-items: center;

    img { height: 25px; width: auto; }

    @media (max-width: 767px) {
      min-height: 44px;

      img { height: 21px; }
    }
  }

  .nav_actions {
    display: flex;
    align-items: center;
    gap: 28px;

    @media (max-width: 767px) { gap: 6px; }
  }

  .nav_links {
    display: flex;
    align-items: center;
    gap: 28px;

    a {
      font-size: 15px;
      font-weight: 600;
      color: var(--cream);
      text-underline-offset: 6px;
      text-decoration-thickness: 2px;
    }

    .is_current {
      opacity: 1;
      text-decoration-line: underline;
    }

    @media (max-width: 767px) { display: none; }
  }

  .menu_toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--cream);
    cursor: pointer;

    svg { width: 24px; height: 24px; }

    .menu_icon_close { display: none; }

    &[aria-expanded="true"] {
      .menu_icon_open { display: none; }
      .menu_icon_close { display: block; }
    }

    @media (max-width: 767px) { display: flex; }
  }

  #mobile_menu {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px 20px 20px;
    background: color-mix(in srgb, var(--ink) 90%, transparent);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    --c: 16px;
    --r: 4px;

    a {
      display: flex;
      align-items: center;
      min-height: 56px;
      font-family: var(--ecd27_heading_font);
      font-size: 24px;
      font-weight: 700;
      color: var(--cream);

      &:not(:last-child) { border-bottom: 1px solid color-mix(in srgb, var(--cream) 14%, transparent); }
    }

    .is_current {
      opacity: 1;
      text-decoration-line: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 8px;
    }

    /* js/event_post/ecd27.js also closes the menu when the viewport grows. */
    @media (min-width: 768px) { display: none; }
  }
}
.ecd27 {
  .recap { background: var(--cream); }

  .recap_panel {
    background: var(--ink);
    color: var(--cream);
  }

  .recap_container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "heading past_editions"
      "gallery gallery";
    align-items: end;
    gap: 56px 40px;
    padding-top: 140px;
    padding-bottom: 140px;

    @media (max-width: 767px) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas:
        "heading"
        "gallery"
        "past_editions";
      justify-items: start;
      row-gap: 36px;
      padding-top: 80px;
      padding-bottom: 80px;
    }
  }

  .recap_heading {
    grid-area: heading;
    font-family: var(--ecd27_heading_font);
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.03em;

    @media (max-width: 767px) { font-size: 40px; }
  }

  .recap_past_editions { grid-area: past_editions; }

  .recap_gallery {
    grid-area: gallery;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(3, 220px);
    overflow: hidden;
    --c: 56px;
    --r: 8px;

    .tile {
      overflow: hidden;
      position: relative;
    }

    .zoom {
      position: absolute;
      inset: 0;
      background: var(--ink-raised);
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media (max-width: 767px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(6, 130px);
      --c: 40px;
      --r: 6px;
    }
  }

  .recap_photo_stage_cube { grid-column: 1 / 3; grid-row: 1 / 2; img { object-position: 50% 45%; } }
  .recap_photo_support_bar { grid-column: 3 / 4; grid-row: 1 / 3; img { object-position: 50% 40%; } }
  .recap_photo_team { grid-column: 4 / 5; grid-row: 1 / 2; img { object-position: 50% 35%; } }
  .recap_photo_conversation { grid-column: 1 / 2; grid-row: 2 / 4; img { object-position: 50% 40%; } }
  .recap_photo_workshop { grid-column: 2 / 3; grid-row: 2 / 3; img { object-position: 60% 40%; } }
  .recap_photo_guitar { grid-column: 4 / 5; grid-row: 2 / 4; img { object-position: 48% 50%; } }
  .recap_photo_signing { grid-column: 2 / 3; grid-row: 3 / 4; img { object-position: 55% 40%; } }
  .recap_photo_laptops { grid-column: 3 / 4; grid-row: 3 / 4; img { object-position: 60% 40%; } }

  @media (max-width: 767px) {
    .recap_photo_stage_cube { grid-column: 1 / 3; grid-row: 1 / 2; }
    .recap_photo_support_bar { grid-column: 1 / 2; grid-row: 2 / 4; }
    .recap_photo_team { grid-column: 1 / 2; grid-row: 4 / 5; }
    .recap_photo_conversation { grid-column: 1 / 2; grid-row: 5 / 7; }
    .recap_photo_workshop { grid-column: 2 / 3; grid-row: 4 / 5; }
    .recap_photo_guitar { grid-column: 2 / 3; grid-row: 2 / 4; }
    .recap_photo_signing { grid-column: 2 / 3; grid-row: 5 / 6; }
    .recap_photo_laptops { grid-column: 2 / 3; grid-row: 6 / 7; }
  }
}
.ecd27 {
  /* Unlike hidden, clip does not make a scroll container, which would stop the view() timelines inside. */
  #speak {
    background: var(--lavender);
    color: var(--ink);
    overflow: clip;

    h2 {
      font-family: var(--ecd27_heading_font);
      font-weight: 700;
      font-size: 72px;
      line-height: 0.95;
      letter-spacing: -0.035em;
      max-width: 1100px;

      @media (max-width: 767px) {
        font-size: 44px;
        line-height: 0.98;
      }
    }
  }

  .speak_container {
    padding-top: 140px;
    padding-bottom: 140px;

    @media (max-width: 767px) {
      padding-top: 80px;
      padding-bottom: 72px;
    }
  }

  .speak_grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 40px;
    margin-top: 64px;
    align-items: center;

    @media (max-width: 767px) {
      display: block;
      margin-top: 28px;
    }
  }

  .speak_text {
    grid-column: span 6;
    min-width: 0;

    p {
      font-size: 20px;
      line-height: 1.5;
      font-weight: 700;

      @media (max-width: 767px) { font-size: 18px; }
    }

    .btn {
      margin-top: 36px;

      @media (max-width: 767px) { margin-top: 28px; }
    }
  }

  .speak_illustration {
    grid-column: span 6;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .cat_looking {
      width: 380px;
      max-width: 100%;
      height: auto;
    }

    @media (max-width: 767px) {
      margin-top: 48px;

      .cat_looking { width: 240px; }
    }
  }


  .cat_looking_eye_open {
    transform-box: fill-box;
    transform-origin: 50% 80%;
  }

  .cat_looking_eye_closed {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 100%;
  }

  /* The _setupCatBlink script adds is_blinking for one blink at random intervals. */
  .cat_looking.is_blinking {
    .cat_looking_eye_open { animation: catBlinkOpen .25s; }
    .cat_looking_eye_closed { animation: catBlinkClosed .25s; }
  }
}

/* The eye closes in 90ms, stays closed for 80ms and opens in 80ms. */
@keyframes catBlinkOpen {
  0% { transform: scaleY(1); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  35% { opacity: 1; transform: scaleY(.08); }
  35.1%, 67% { opacity: 0; transform: scaleY(.08); }
  67.1% { opacity: 1; transform: scaleY(.08); animation-timing-function: ease-out; }
  100% { transform: scaleY(1); }
}

@keyframes catBlinkClosed {
  0%, 35%, 67.1%, 100% { opacity: 0; transform: scaleY(.7); }
  35.1% { opacity: 1; transform: scaleY(.7); animation-timing-function: ease-out; }
  47% { opacity: 1; transform: scaleY(1); }
  55% { opacity: 1; transform: scaleY(1); animation-timing-function: ease-in; }
  67% { opacity: 1; transform: scaleY(.7); }
}
.ecd27 {
  .testimonials { background: var(--white); }

  .testimonial_video {
    position: relative;
    overflow: hidden;

    iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  }

  /* The chB shape leaves the bottom-left corner uncut, so the play button there does not cover the speaker. */
  .video_poster {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    border: 0;
    padding: 24px;
    background: var(--ink) center / cover no-repeat;
    cursor: pointer;

    /* The overflow of .testimonial_video clips a regular focus outline, so draw it inside the poster. */
    &:focus-visible {
      outline: 2px solid var(--cream);
      outline-offset: -6px;
    }

    @media (max-width: 767px) { padding: 16px; }
  }

  .testimonials_container {
    padding-top: 140px;
    padding-bottom: 140px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;

    @media (max-width: 767px) {
      display: flex;
      flex-direction: column;
      gap: 64px;
      padding-top: 80px;
      padding-bottom: 80px;
    }
  }

  .testimonial {
    display: flex;
    flex-direction: column;

    .vid {
      aspect-ratio: 16 / 9;
      background: var(--ink);
      --c: 56px;
      --r: 8px;

      @media (max-width: 767px) {
        gap: 10px;
        --c: 40px;
        --r: 6px;
      }
    }

    .quote_mark {
      width: 44px;
      height: 34px;
      margin-top: 36px;

      @media (max-width: 767px) {
        width: 34px;
        height: 26px;
        margin-top: 28px;
      }
    }

    blockquote {
      font-weight: 500;
      font-size: 24px;
      line-height: 1.35;
      letter-spacing: -0.01em;
      margin-top: 20px;
      flex-grow: 1;

      @media (max-width: 767px) {
        font-size: 18px;
        line-height: 1.4;
        letter-spacing: -0.005em;
        margin-top: 16px;
      }
    }
  }

  .testimonial_author {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);

    @media (max-width: 767px) {
      margin-top: 24px;
      padding-top: 16px;
    }
  }

  .testimonial_name {
    font-family: var(--ecd27_heading_font);
    font-size: 18px;
    font-weight: 700;

    @media (max-width: 767px) { font-size: 17px; }
  }

  .testimonial_role {
    font-size: 15px;
    color: var(--ink-muted);
    margin-top: 2px;

    @media (max-width: 767px) { font-size: 14px; }
  }
}
.ecd27 {
  /* The venue section has no top padding, so the offset keeps its link target in line with the padded sections. */
  #venue {
    scroll-margin-top: 140px;

    @media (max-width: 767px) { scroll-margin-top: 80px; }
  }

  .venue_container {
    padding-bottom: 140px;

    @media (max-width: 767px) { padding-bottom: 80px; }
  }

  .venue_frame {
    box-sizing: border-box;
    padding: 1px;
    display: flex;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    --c: 56px;
    --r: 8px;

    @media (max-width: 767px) {
      --c: 40px;
      --r: 6px;
    }
  }

  .venue_inner {
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 24px;
    background: var(--cream);
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
    --c: 55.4px;
    --r: 7.6px;

    @media (max-width: 767px) {
      padding: 16px;
      flex-direction: column;
      flex-wrap: nowrap;
      gap: 16px;
      --c: 39.4px;
      --r: 5.6px;
    }
  }

  .venue_info {
    flex: 1 1 300px;
    max-width: 380px;
    min-width: 0;
    box-sizing: border-box;
    padding: 19px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 64px;

    h2 {

      font-family: var(--ecd27_heading_font);

      font-weight: 700;

      font-size: 56px;

      line-height: 0.95;

      letter-spacing: -0.03em;

    }

    p {
      font-size: 15px;
      line-height: 1.6;
      color: var(--ink-muted);
      margin-top: 12px;
    }

    @media (max-width: 767px) {
      flex: none;
      max-width: none;
      padding: 16px 12px 8px;
      justify-content: flex-start;
      gap: 32px;

      h2 { font-size: 40px; }
      p { margin-top: 8px; }
    }
  }

  .venue_name {
    font-family: var(--ecd27_heading_font);
    font-weight: 700;
    font-size: 26px;

    @media (max-width: 767px) { font-size: 22px; }
  }

  .venue_directions { margin-top: 24px; }

  .venue_map {
    flex: 2 1 480px;
    min-width: 0;
    min-height: 420px;
    overflow: hidden;
    position: relative;
    --c: 42px;
    --r: 6px;

    .zoom {
      position: absolute;
      inset: 0;
      background: var(--map-placeholder);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink);
    }

    @media (max-width: 767px) {
      flex: none;
      min-height: 0;
      height: 240px;
      --c: 32px;
      --r: 5px;
    }
  }

  .venue_map_interactive { background: var(--map-background); }

  /* The canvas covers the fallback link, so it takes pointer events only after the map has loaded. */
  .venue_map_canvas {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
  }

  .venue_map_interactive.is_loaded {
    .venue_map_canvas {
      opacity: 1;
      pointer-events: auto;
    }

    .venue_map_fallback { visibility: hidden; }
  }

  .venue_map_fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
  }

  .venue_map_marker {
    width: 28px;
    height: 38px;

    svg {
      width: 28px;
      height: 38px;
    }
  }

  .venue_map_marker_label {
    position: absolute;
    left: 36px;
    top: 4px;
    font-family: var(--ecd27_heading_font);
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    white-space: nowrap;
    text-shadow: 0 0 3px var(--cream), 0 0 3px var(--cream), 0 0 3px var(--cream);
  }

  .venue_map {
    .maplibregl-ctrl-attrib {
      font-family: var(--ecd27_body_font);
      font-size: 10px;
      background: color-mix(in srgb, var(--cream) 80%, transparent);

      a { color: var(--ink-muted); }
    }

    .maplibregl-ctrl-group {
      background: var(--cream);
      border-radius: 4px;
      box-shadow: none;
      border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    }
  }
}
.events:not(.events_index) {
  .event_agenda {
    padding: 0;

    > section {
      max-width: 800px;
      margin: auto;
      padding: 80px 20px;

      > h4 {
        color: var(--white);
        border: 1px solid color-mix(in srgb, var(--accent-light) 35%, transparent);
        background: color-mix(in srgb, var(--accent-light) 15%, transparent);
        padding: 15px;
        border-radius: var(--border-radius);
        line-height: 1.5;
      }

      > h6 {
        color: var(--line);
        font-style: italic;
        padding: 15px;
        margin: 0;
        font-size: 12px;
        border-top: 1px solid color-mix(in srgb, var(--accent-light) 35%, transparent);
      }
    }

    h2 {
      margin: 60px 0 15px;
      color: var(--paper);

      &:first-of-type { margin-top: 30px; }
    }

    ul { padding: 0; }

    li {
      display: flex;
      margin: 0;

      &:not(:last-of-type) { border-bottom: 1px solid color-mix(in srgb, var(--accent-light) 35%, transparent); }

      .presentation_time,
      .presentation_content {
        display: flex;
        box-sizing: border-box;
      }

      .presentation_time {
        width: 130px;
        font-size: 18px;
        color: var(--white);
        padding: 20px 20px 20px 0;
        text-align: right;
        justify-content: flex-end;
        border-right: 1px solid color-mix(in srgb, var(--accent-light) 35%, transparent);

        span {
          display: flex;
          align-items: center;
          height: 100%;
          max-height: 64px;
        }
      }

      .presentation_content {
        flex-grow: 1;
        flex-direction: column;
      }
    }

    .presentations .presentation {
      width: 100%;
      box-sizing: border-box;
      text-align: left;
      padding: 20px;
      height: 100%;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 20px;

      &:not(:first-of-type) { border-top: 1px solid color-mix(in srgb, var(--accent-light) 35%, transparent); }

      img {
        max-width: 64px;
        border-radius: var(--border-radius-medium);

        &[src*="eazybi-icon"] {
          padding: 10px;
          box-sizing: border-box;
          border-radius: var(--border-radius-large);
        }
      }

      .fa-user-secret {
        font-size: 48px;
        width: 64px;
        height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--accent-light);
      }

      .presentation_info { padding-top: 10px; }

      h3 {
        color: var(--paper);
        margin: 0;
        font-size: 18px;
        font-weight: 500;

        p {
          margin: 0;
          color: inherit;
        }
      }

      h4 {
        margin: 0;
        color: var(--accent-pale);

        .company { color: var(--ink-faint); }
      }

      .presentation_tag {
        color: var(--paper);
        padding: 3px 6px;
        background: var(--accent);
        margin-top: 15px;
        display: inline-block;
        border-radius: var(--border-radius);
        font-size: 10px;
      }

      &:last-of-type .presentation_tag { background: var(--accent-dark); }

      details {
        width: 100%;

        summary {
          padding: 6px 0 0;
          font-weight: normal;
          justify-content: flex-start;
          font-size: 16px;
          color: var(--accent-light);

          &:hover { background: none; }
          &::before { content: "Show more"; }
          &::after { content: "\f107"; }
        }

        p {
          margin-top: 10px;
          max-width: 800px;
        }

        &[open] summary {
          &::before { content: "Show less"; }
          &::after { content: "\f106"; }
        }
      }
    }

    .break {
      background: color-mix(in srgb, var(--accent-light) 15%, transparent);

      .presentation_content {
        color: var(--white);
        padding: 20px;
        font-size: 18px;
      }
    }
  }

  &.event_ended .event_agenda .presentations .presentation {
    .fa-user-secret { display: none; }
    .presentation_info { padding: 0; }
  }
}

@media screen and (max-width: 600px) {
  .events:not(.events_index) .event_agenda {
    &::after { display: none; }

    > section {
      padding: 20px 0 0;

      .fa-user-secret,
      img { display: none !important; }

      h2 {
        text-align: left;
        padding-left: 15px;
      }

      h4 {
        border-left: none;
        border-right: none;
        margin: 0;
        border-radius: var(--border-radius-none);
      }

      .presentations,
      .break {
        .presentation_time {
          width: 60px;
          text-align: left;
          justify-content: center;
          font-size: 15px;
          padding: 15px 15px 15px 10px;
        }

        .presentation_content { width: calc(100% - 110px); }
      }

      .presentations .presentation {
        padding: 15px;
        h3 { font-size: 16px; }
        details summary { font-size: 16px; }
      }

      .break .presentation_content { font-size: 16px; }
    }
  }
}
.events {
  &.event_ended .events_cards section { padding: 80px 0; }

  .events_cards {
    padding: 0;

    section {
      max-width: 1080px;
      display: flex;
      margin: auto;
      justify-content: center;
      flex-wrap: wrap;
      gap: 60px;
      padding: 60px 20px;

      .events_card {
        max-width: 300px;
        @media screen and (max-width: 400px) { max-width: 100%; }

        img {
          max-width: 200px;
          margin: auto;
          display: block;
        }

        i {
          color: var(--white);
          display: block;
          text-align: center;
          font-size: 56px;
        }

        h3 {
          margin: 30px auto 0;
          color: var(--white);
          font-weight: bold;
        }

        p {
          color: color-mix(in srgb, var(--white) 80%, transparent);
          margin-top: 10px;
          padding: 0;
        }
      }
    }

    &.horizontal_cards section {
      max-width: 1200px;
      gap: 80px;

      .events_card {
        max-width: 560px;
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 20px;

        h3 { margin-top: 0; }
      }
    }

    .cta {
      padding-bottom: 40px;
      @media screen and (max-width: 900px) { padding-bottom: 80px; }
      span { color: var(--white); }

      h3 .vat,
      .pta { color: var(--paper); }
    }
  }
}
.events .cta {
  text-align: center;
  position: relative;
  z-index: var(--z-index-low-layer-1);
  padding: 0;
  background: white;
  padding: 50px 0px 50px 0px;

  .content_wrap { padding: 0; }

  h3 {
    margin: 0 0 10px;
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;

    .crossed_out {
      color: var(--ink-faint);
      text-decoration: line-through !important;
      margin-right: 5px;
    }

    .vat {
      margin-left: 8px;
      color: var(--ink-muted);
      font-size: 18px;
    }
  }

  .pta {
    color: var(--ink-muted);
    padding: 10px 0 0;
    font-size: .9em;
    max-width: 360px;
    margin: auto;
  }
}
.events:not(.events_index) {
  .event_media {
    position: absolute;
    top: var(--site_header_height);
    z-index: var(--z-index-low-layer-1);
    background: var(--accent);
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    box-sizing: border-box;
  }

  &.events_eazybi-community-days-2026-riga .event_media { background: var(--accent); }
}
.events .event_post_ff_2026 {
  padding-top: 50px;
  background: var(--white);

  h1 {
    font-size: 60px;
    font-weight: 600;
    margin: 0;
    line-height: 1;
  }

  .date_and_location {
    padding: 10px 0;
    font-size: 30px;
  }

  wistia-player {
    border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
    overflow: hidden;
  }

  .first_fold_content {
    background: var(--ink);
    padding: 60px 20px;
    border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
    overflow: hidden;
    text-align: center;

    h2,
    p {
      color: var(--white);
      max-width: 1000px;
    }

    h2 {
      font-size: 48px;
      font-weight: 500;
      text-align: center;
    }

    p {
      margin: 0 auto;
      font-size: 18px;
      text-align: left;
    }

    .ff_buttons {
      margin: 40px auto 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
    }
  }
}

@media (max-width: 600px) {
  .events .event_post_ff_2026 {
    padding-top: 20px;

    .content_wrap { padding: 100px 20px 20px !important; }
    h1 { font-size: 32px; }
    .date_and_location { font-size: 24px; }

    .first_fold_content {
      h2 {
        font-size: 18px;
        text-align: left;
      }

      p { font-size: 16px; }
    }
  }
}
.events .event_post_ff {
  position: relative;
  background: none;
  padding: 0;

  .gradient_bg {
    padding: 280px 0 0;

    &:has(.screen_block) {
      padding-top: 210px;
      main { padding-bottom: 60px; }
    }

    main {
      max-width: 830px;
      margin: 0 auto;
      padding: 0 20px 130px;

      .date_and_location {
        display: flex;
        align-items: center;
        font-size: 1.75em;
        gap: 20px;
        color: var(--accent-pale);
      }

      span, h1, p {
        padding: 0;
        margin: 0;
      }

      h1 {
        font-size: 48px;
        margin-top: 5px;
        color: var(--white);
        padding-bottom: 120px;

        & + p {
          color: var(--paper);
          margin-top: -100px;
          font-size: 18px;
          font-weight: 300;
          width: 100%;
          max-width: none;

          span {
            font-weight: bold;
            color: var(--white);
          }
        }
      }
    }
  }

  .screen_block {
    margin: 30px auto 0;
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  + .cta,
  + .multi_cta { background: var(--white); }
}

@media screen and (max-width: 900px) {
  .events .event_post_ff {
    .gradient_bg {
      &,
      &:has(.screen_block) { padding-top: 160px; }

      main {
        span { font-size: 1em; }
        h1 { font-size: 28px; }

        .date_and_location {
          font-size: 18px;
          gap: 10px;
          color: var(--accent-pale);
        }
      }
    }

    .screen_block { display: none; }
  }
}
.events:not(.events_index) {
  text-align: left;

  .gradient_bg {
    --gradient_start: #274380;
    --gradient_end: #930F34;
    background: linear-gradient(
      45deg, color-mix(in srgb, var(--gradient_start) 92%, transparent), color-mix(in srgb, var(--gradient_end) 92%, transparent)
    );
  }

  &.events_eazybi-community-day-2022 .gradient_bg { --gradient_start: #930F34; --gradient_end: #274380; }
  &.events_eazybi-community-days-2025-riga .gradient_bg { --gradient_start: #7053dd; --gradient_end: #234139; }
  &.events_eazybi-community-days-2024-berlin .gradient_bg { --gradient_start: #0048AF; --gradient_end: #8433A6; }

  > div h2 {
    font-size: 32px;
    @media screen and (max-width: 800px) { font-size: 24px; }
    text-align: center;
  }

  &.events_eazybi-community-days-2024-berlin,
  &.events_eazybi-community-days-2019-riga,
  &.events_eazybi-community-day-2019-vegas,
  &.events_eazybi-community-days-2018,
  &.events_eazybi-community-days-2017 {
    .event_agenda {
      h2 {
        padding-left: 100px;
        text-align: left;
      }

      .presentations,
      .break {
        .presentation_time { width: 80px; }
        .presentation_content { width: calc(100% - 80px); }
      }
    }
  }

  &.events_eazybi-community-days-2026-riga {
    .events_cards section { padding: 60px 20px; }

    .speakers,
    .event_agenda {
      h2 {
        font-size: 42px;
        font-weight: 600;

        @media (max-width: 600px) { font-size: 24px; }
      }
    }

    .event_agenda {
      background: var(--white);

      h2,
      h3,
      h4,
      .presentation_time,
      .presentation_content { color: var(--ink) !important; }

      section {
        max-width: 1200px;
        padding: 20px 20px 100px;

        > h4 {
          color: var(--ink-soft);
          border-color: var(--accent-light);
          background: var(--accent-pale);
        }
      }

      li {
        &:not(:last-of-type) { border-bottom-color: var(--accent-light); }
        &.break { background: var(--accent-pale); }
        .presentation_time { border-right-color: var(--accent-light); }
        .company { color: var(--ink-faint) !important; }
        .presentation:not(:first-of-type) { border-color: var(--accent-light); }
      }
    }
  }
}
.events .main_info_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 80px 20px 40px;
  box-sizing: border-box;
  align-items: flex-start;
  position: relative;
  background: var(--white);

  .info_block {
    order: 2;
    text-align: left;
    max-width: 680px;

    h2 {
      padding: 0;
      text-align: left;
    }

    ul {
      padding-left: 0;

      li {
        position: relative;
        padding-left: 24px;
        margin: 0 0 15px;

        &::before {
          content: "\f00c";
          font-family: "Font Awesome 7 Pro";
          position: absolute;
          left: 0;
          color: var(--accent);
        }
      }
    }

    p {
      padding: 0;
      margin: 0 0 15px;
    }
  }

  .graphic {
    order: 1;
    width: 300px;
    line-height: 0;
    margin-right: 50px;

    + .info_block { max-width: 480px; }
  }

  &:nth-of-type(even) {
    .info_block { order: 1; }

    .graphic {
      order: 2;
      margin: 0 0 0 50px;
    }
  }
}

@media screen and (max-width: 970px) {
  .events:not(.events_index) .main_info_block {
    padding-top: 50px;

    .info_block {
      text-align: left;
      order: 2;
    }

    .graphic {
      width: 100%;
      max-width: 480px;
      margin: 0 0 20px !important;
      order: 1 !important;
      text-align: center;

      img { width: 150px; }
    }
  }
}
.multi_cta .content_wrap {
  display: flex;
  justify-content: center;

  .cta {
    padding: 0 60px;
    min-width: 240px;

    &:not(:last-of-type) { border-right: 1px solid var(--line); }
    .arrow_button {
      width: 100%;
      box-sizing: border-box;
    }
  }
}

@media screen and (max-width: 900px) {
  .multi_cta .content_wrap {
    display: block;

    .cta:not(:last-of-type) {
      border: none;
      border-bottom: 1px solid var(--line);
      padding-bottom: 30px;
      margin-bottom: 20px;
    }
  }
}
.events .speakers {
  background: var(--paper);
  padding: 0;

  .speakers_block {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px;

    @media screen and (max-width: 820px) {
      grid-template-columns: 1fr;
      padding: 0;
    }

    &.list_view {
      grid-template-columns: 1fr;
      width: 900px;

      @media screen and (max-width: 900px) {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
      }

      .speaker_card {
        display: grid;
        gap: 10px;
        grid-template-columns: 180px 1fr;
        @media screen and (max-width: 900px) { grid-template-columns: 1fr; }

        .speaker_times {
          color: var(--ink-soft);
          font-size: 18px;

          @media screen and (max-width: 900px) {
            font-size: 13px;
            text-align: center;
          }

          span:not(:last-of-type)::after {
            content: "/";
            color: var(--ink-faint);
            display: inline-block;
            margin: 0 6px;
          }
        }
      }
    }

    .speaker_card {
      padding: 20px;
      display: block;
      background: var(--white);
      box-shadow: 0 0 15px color-mix(in srgb, var(--ink) 7.5%, transparent);

      .speaker {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: var(--white);
        justify-content: center;
        margin: 0 auto 5px;

        img {
          width: 128px;
          height: 128px;
          display: block;
          border-radius: var(--border-radius-medium);
        }

        .speaker_images {
          display: flex;
          gap: 20px;

          &.many_images {
            gap: 10px;

            img {
              width: 80px;
              height: 80px;

              @media screen and (max-width: 420px) {
                width: 64px;
                height: 64px;
              }
            }
          }
        }

        i {
          font-size: 128px;
          color: var(--accent);
        }

        h4 {
          margin: 12px 0 0;
          width: 100%;
          font-size: 16px;
          color: var(--ink-soft);
          text-align: center;
          font-size: 14px;

          strong { color: var(--ink); }

          .speaker_name {
            display: block;
            margin-bottom: 2px;
          }
        }
      }

      .speaker_presentation {
        h3 {
          font-weight: bold;
          margin: 21px 0 7px;
          font-size: 20px;
        }

        p { margin: 0; }
      }
    }
  }
}
.events:not(.events_index) .cfp_block {
  background: var(--white);

  .content_wrap { padding: 60px 20px; }

  h2 {
    font-size: 42px;
    font-weight: 600;
  }

  .cfp {
    background: var(--accent-dark);
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
    display: flex;
    gap: 40px;

    &,
    img { border-radius: var(--border-radius-medium); }

    .info,
    img { width: 50%; }

    img { object-fit: cover; }

    h3,
    p {
      color: var(--white);
      text-align: left;
    }

    .info {
      text-align: center;

      h3 {
        font-size: 32px;
        font-weight: 500;
        margin: 0;
      }

      p {
        font-size: 18px;
        margin: 20px 0 60px;
      }
    }
  }
}

@media (max-width: 900px) {
  .events:not(.events_index) .cfp_block {
    .content_wrap { padding: 40px 20px 20px; }

    .cfp {
      padding: 20px;
      flex-wrap: wrap;

      .info,
      img { width: 100%; }

      .info { order: 2; }
    }
  }
}

@media (max-width: 600px) {
  .events:not(.events_index) .cfp_block {
    h2 { font-size: 24px; }

    .cfp .info {
      h3 { font-size: 18px; }
      p { font-size: 16px; }
    }
  }
}
.event_testimonials_grid {
  background: var(--white);

  .content_wrap {
    display: flex;
    justify-content: center;
    gap: 80px;

    @media screen and (max-width: 900px) {
      flex-wrap: wrap;
      padding: 40px 20px !important;
    }

    .testimonial {
      max-width: 600px;

      wistia-player {
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        overflow: hidden;
      }

      .testimonial_info {
        border-radius: 0 0 var(--border-radius) var(--border-radius);
        background: var(--paper);
        padding: 20px;

        blockquote {
          color: var(--ink);
          font-size: 18px;
          padding: 0;
          margin-bottom: 20px;
          min-height: 135px;

          &::before,
          &::after {
            color: var(--accent-light);
            font-size: 2em;
            vertical-align: -12px;
          }
        }

        .testimonial_author {
          color: var(--ink-soft);
          text-align: right;

          span:first-of-type::after {
            content: "-";
            margin: 0 4px 0 8px;
          }
        }
      }
    }
  }
}
.events:not(.events_index) .event_gallery {
  background: var(--ink);
  text-align: center;

  .content_wrap {
    @media (max-width: 600px) { padding: 60px 20px; }
  }

  h2 {
    color: var(--white);
    margin: 0 auto 40px;
    font-size: 42px;
    @media (max-width: 600px) { font-size: 24px; }
    font-weight: 600;
  }

  section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    @media (max-width: 600px) { grid-template-columns: repeat(2, 1fr) }
    gap: 10px;

    img {
      border-radius: var(--border-radius-medium);
      aspect-ratio: 16 / 9;
    }
  }
}
.events_eazybi-community-days-2026-riga {
  .content_wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 20px;
  }

  .events_cards.gradient_bg {
    background: var(--white);

    .content_wrap { padding: 60px 20px 100px; }

    .events_card {
      h3,
      p { color: var(--ink); }

      i { color: var(--accent); }
    }
  }

  .event_testimonials_grid .testimonial {
    wistia-player { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; }

    .testimonial_info {
      border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
      background: var(--ink);

      blockquote {
        color: var(--white);

        &::before,
        &::after { color: var(--accent-light); }
      }

      .testimonial_author { color: var(--line); }
    }
  }

  .speakers { background: var(--white); }
}
.event_ongoing .gmap_container {
  height: 700px;
  position: relative;
}

.events:not(.events_index) .event_price {
  background: var(--white);

  .content_wrap {
    max-width: 1000px;
    padding: 40px 20px 140px;

    @media (max-width: 600px) { padding: 60px 20px; }
  }

  h2 {
    font-size: 42px;
    @media (max-width: 600px) { font-size: 24px; }
    font-weight: 600;
    margin: 0 auto;
  }

  p {
    font-size: 18px;
    max-width: none;
    margin: 10px auto 30px;
    text-align: center;
  }

  section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    @media (max-width: 900px) { grid-template-columns: 1fr; }
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--line);
    overflow: hidden;
  }

  .event_price_column {
    background: var(--paper);

    &:not(:last-of-type) { border-right: 1px solid var(--line); }

    &:not(:has(.price_current)) {
      h3,
      span { color: var(--ink-faint); }
    }

    .price_status {
      background-color: var(--paper);
      border-bottom: 1px solid var(--line);
      font-weight: 500;
      text-align: center;
      padding: 4px;

      &.price_current {
        background: var(--ink);
        color: var(--white);
        border-color: transparent;
      }
    }

    .event_price_column_content {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 40px;
      box-sizing: border-box;
      text-align: center;

      h3 {
        margin: 0 auto;
        font-weight: 600;
      }

      > span {
        font-size: 48px;
        font-weight: 600;
      }

      .arrow_button { align-self: center; }
    }
  }
}
.events:not(.events_index) .venue {
  background: var(--paper);
  padding: 0;

  .content_wrap { padding: 60px 20px; }

  .venue_hero_block {
    background: var(--white);
    max-width: 1000px;
    height: 280px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--ink) 25%, transparent);
    border-radius: var(--border-radius);
    overflow: hidden;

    .venue_img {
      width: calc(50% - 5px);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;

      img {
        height: 100%;
        aspect-ratio: 2/1;
        width: auto;
        max-width: none;
      }
    }

    .venue_hero_info {
      width: calc(50% + 5px);
      box-sizing: border-box;
      padding: 20px;

      h2 {
        font-size: 24px;
        text-align: left;
        margin: 0 0 5px;
      }

      h3 {
        margin: 0;
        font-size: 16px;
        color: var(--ink-soft);
      }

      p { padding: 0; }
    }
  }

  .venue_images {
    max-width: 1000px;
    margin: 60px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    img {
      width: calc(50% - 5px);
      margin-bottom: 10px;
    }
  }
}

@media screen and (max-width: 900px) {
  .events:not(.events_index).event_ongoing .venue {
    .venue_hero_block {
      display: block;
      height: auto;

      .venue_img,
      .venue_img img,
      .venue_hero_info { width: 100%; }
    }

    .venue_images img { width: 100%; }
  }
}
.eazy_book_intro {
  max-width: 560px;
  margin: 20px 0 0;
  color: var(--ink-soft);
  font-size: 19px;
  line-height: 1.55;
}

/* book.html.haml adds has_no_forms when the HubSpot forms script does not load. */
.eazy_book_links { display: none; }

.eazy_book.has_no_forms {
  .eazy_book_links { display: flex; }
  .eazy_book_forms { display: none; }
}

.eazy_book_forms { align-self: stretch; }

.eazy_book_toggle,
.eazy_book_review_toggle {
  border: 0;
  font-family: inherit;
  cursor: pointer;

  svg { transition: transform .2s ease; }
  &[aria-expanded="true"] svg { transform: rotate(180deg); }
}

/* The toggle has a chevron in place of the arrow that arrow_button makes room for on hover. */
.eazy_book_toggle {
  gap: 10px;

  &:hover,
  &:focus-visible { padding: 0 var(--px); }
}

.eazy_book_review_toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 32px;
  padding: 0;
  background: none;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;

  &:hover { color: var(--accent); }
}

.eazy_book_form {
  max-width: 560px;
  margin-top: 32px;

  &:not(.is_open) { display: none; }

  form {
    flex-direction: column;
    gap: 20px;
  }

  label,
  legend {
    display: block;
    padding-bottom: 4px;
  }

  /* The shared HubSpot form style is for dark sections. */
  label,
  .hs-richtext p { color: var(--ink); }

  input:not([type="submit"]),
  textarea {
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);

    &:focus,
    &:hover { background: var(--white); }
  }

  input:not([type="submit"]):focus,
  textarea:focus { outline: 2px solid var(--accent); }

  ::placeholder { color: var(--ink-faint); }

  .submitted-message {
    &,
    * { color: var(--accent); }
  }

  [type="submit"] {
    min-height: 48px;
    background: var(--accent);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    &:hover { background: var(--accent-dark); }
  }
}

.eazy_book_image {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 28px 32px color-mix(in srgb, var(--ink) 22%, transparent));
}

/* The book image keeps its own width, unlike the hero media that runs out to the window edge. */
@media (min-width: 1060px) {
  .eazy_book .hero_section_media { width: auto; }
}
.blog_page_filter {
  position: sticky;
  top: var(--site_header_height);
  z-index: var(--z-index-very-high);
  /* A fieldset is as wide as its content by default, which would stop the categories from scrolling. */
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.blog_page_filter_content {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;

  &::-webkit-scrollbar { display: none; }

  label {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;

    &:hover { color: var(--accent); }

    &:has(:checked) {
      background: var(--accent);
      color: var(--white);
    }

    /* The radio button is hidden, so its label shows the keyboard focus. */
    &:has(:focus-visible) {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
  }
}
.blog_list {
  background: var(--paper);
  text-align: left;

  .content_wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* The author pictures stick out 45px above the cards. */
    padding: 100px 0 0;
  }

  article {
    margin: 0 20px 100px;
    width: 560px;
    height: 400px;
    position: relative;
    background: var(--white);
    border-radius: var(--border-radius);

    &.is_hidden { display: none; }

    .article_img {
      display: block;
      line-height: 0;

      img {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
      }
    }

    .article_profile {
      top: -45px;
      left: 0;
      position: absolute;
      width: 100%;
      display: flex;

      .article_author {
        margin: 17px 0 0 10px;
        color: var(--ink);
      }

      time {
        color: var(--ink-muted);
        margin: 17px 20px 0 auto;
      }
    }

    .article_summary {
      padding: 0 20px;

      h2 {
        margin: 30px 0 10px;
        font-size: 18px;
        text-align: left;
        font-weight: 500;
        color: var(--ink);

        &:hover { color: var(--accent); }
      }

      section {
        padding: 0;
        min-height: 96px;
        color: var(--ink-soft);
      }

      .summary_footer {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--accent);
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .blog_list {
    .content_wrap { padding-top: 72px; }

    article {
      width: auto;
      height: auto;
      margin-bottom: 80px;

      .article_profile {
        top: -35px;

        img {
          width: 60px;
          height: 60px;
          margin-left: 10px;
          border-width: 3px;
        }

        .article_author {
          margin: 10px 0 0 10px;
          font-size: 14px;
        }

        time {
          font-size: 14px;
          margin: 10px 10px 0 auto;
        }
      }

      .article_summary {
        h2 {
          margin-top: 20px;
          font-size: 16px;
        }

        p { font-size: 14px; }
      }
    }
  }
}

@media screen and (max-width: 400px) {
  .blog_list article .article_profile {
    .article_author {
      display: block;
      font-size: 12px;
      margin: 15px 0 0 5px;
    }

    time {
      font-size: 12px;
      margin: 15px 0 0 auto;
    }
  }
}
.blog_post_list.blog_list {
  padding-top: 100px;
  background: var(--white);
  text-align: left;

  h2 {
    text-align: center;
    margin: 0 auto;
  }

  .content_wrap { padding-top: 100px; }
}
.blog .cta {
  margin: 80px auto;
  max-width: 420px;

  > section {
    position: relative;
    text-align: center;

    h6 {
      color: var(--line);
      padding: 0 10px;
      margin: 0;
      font-size: 14px;
      background: var(--white);
      display: inline-block;
      position: relative;
      z-index: var(--z-index-low-layer-2);
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      inset: 0;
      margin: auto;
      height: 1px;
      background: var(--line);
      z-index: var(--z-index-low-layer-1);
      width: 100%;
    }
  }

  > span {
    margin-top: 20px;
    display: flex;
    justify-content: center;

    a {
      background: var(--accent);
      color: var(--white);
      padding: 14px 8px;
      width: 205px;
      display: block;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover { background: var(--accent-dark); }
      &:last-of-type { margin-left: 10px; }
    }
  }
}

@media screen and (max-width: 900px) {
  .blog .cta {

    > section h6::after {
      inset: 0 25px;
      margin: auto;
      width: auto;
    }

    > span {
      justify-content: center;

      a {
        padding: 12px 8px;
        font-size: 12px;
        width: 150px;
      }
    }
  }
}
.blog_post_ff {
  position: relative;

  > img:first-of-type {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
  }

  > span {
    top: -45px;
    left: 0;
    position: absolute;
    width: 100%;
    display: flex;
    font-size: 18px;

    .article_author { margin: 15px 0 0 15px; }

    time {
      color: var(--ink-muted);
      margin: 15px 20px 0 auto;
    }
  }
}

@media screen and (max-width: 500px) {
  .blog_post_ff > span {
    top: -35px;

    img {
      width: 60px;
      height: 60px;
      margin-left: 10px;
      border-width: 3px;
    }

    .article_author {
      margin: 10px 0 0 10px;
      font-size: 14px;
    }

    time {
      font-size: 14px;
      margin: 10px 10px 0 auto;
    }
  }
}

@media screen and (max-width: 400px) {
  .blog_post_ff > span {
    .article_author {
      font-size: 12px;
      margin: 15px 0 0 5px;
    }

    time {
      font-size: 12px;
      margin: 15px 0 0 auto;
    }
  }
}
section.post {
  padding: 140px 0 0;
  background: var(--white);

  .post_wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px 40px;
    border-radius: var(--border-radius);

    .post_content {
      text-align: left;
      max-width: 680px;
      margin: 50px auto 0;
      position: relative;

      .clear { clear: both; }

      h1 {
        padding: 0;
        margin: 0 0 20px;
      }

      h2, h3 {
        margin: 50px 0 10px;
        font-weight: 500;

        & + p { margin-top: 0; }
      }

      h3 { font-size: 21px; }

      p, li {
        font-size: 18px;
        line-height: 31px;
        color: var(--ink);
      }

      p { padding: 0; }
      li { margin: 10px auto; }

      ul li { list-style: disc; }
      p, li, em { font-weight: 300; }

      table tr td {
        padding: 0 0 10px;
        color: var(--ink-muted);

        img { width: 128px; }
        &:last-of-type { padding-left: 20px; }
      }

      img {
        margin: 10px auto;
        display: block;
        padding: 0;

        &[align=left] { margin-right: 15px; }
        &[align=right] { margin-left: 15px; }
      }

      blockquote {
        padding: 15px 15px 15px 17px;
        margin: 0 auto;
        background: var(--paper);
        border-left: 2px solid var(--ink-faint);
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);

        p { color: var(--ink); }

        img, p { margin: 0 auto; }
        &::before,
        &::after { display: none; }

        h6 {
          font-size: 16px;
          margin: 0;
          padding: 0;
          color: var(--ink-muted);
        }

        & + blockquote {
          padding-top: 0;
          &::before,
          &::after { display: none; }
        }
      }

      figcaption {
        color: var(--ink-soft);
        font-style: italic;
      }

      .line { margin: 30px auto; }
      .share_block .line { margin: 15px auto; }
      .cta {
        .arrow_button { display: flex; }

        /* Older Dato posts write the trial button as a link with the eazy_button class instead of the cta helper. */
        .eazy_button {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 56px;
          border-radius: var(--border-radius);
          background: var(--accent);
          color: var(--white);
          font-size: 17px;
          font-weight: 600;
          transition: background-color .2s ease;

          &:hover,
          &:focus-visible { background: var(--accent-dark); }
        }
      }
    }

    .about_author {
      margin: 100px 0 0;

      img {
        width: 128px;
        height: 128px;
        margin: 8px 15px 0 0;
        border-radius: var(--border-radius-medium);
        float: left;
      }
    }
  }
}

@media screen and (max-width: 500px) {
  section.post {
    padding-top: 120px;

    .post_wrap .post_content {
      margin-top: 20px;

      img {
        width: auto !important;
        margin: 0 !important;
      }

      h2, h3 { margin: 40px 0 10px; }
    }
  }
}
.share_block {
  position: absolute;
  right: -160px;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;

  a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    &:hover {
      i { color: var(--accent) !important; }
      span { color: var(--accent); }
    }

    i {
      font-size: 1.75em;
      &.fa-square-facebook { color: #0866FF; }
      &.fa-square-x-twitter { color: #000000; }
      &.fa-linkedin { color: #0a66c2; }
    }
  }
}

@media screen and (max-width: 1200px) {
  .share_block {
    position: static;
    flex-direction: row;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 500px) {
  .share_block a {
    gap: 6px;
    i { font-size: 1.5em; }
    span { font-size: .75em; }
  }
}
.atlassian_product_wide_break { display: none; }

@media (min-width: 760px) {
  .atlassian_product_wide_break { display: inline; }
}
.atlassian_product_testimonial { background: var(--paper); }
.atlassian_product_two_ways { background: var(--white); }

.atlassian_product_ways {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: clamp(48px, 6vw, 72px);
}

.atlassian_product_way_card {
  flex: 1 1 380px;
  max-width: 600px;
  padding: clamp(32px, 3.6vw, 44px);

  &:hover { transform: translateY(-4px); }

  &:active { transform: translateY(-1px); }
}

@media (max-width: 900px) {
  .atlassian_product_way_card {
    flex: 0 0 auto;
    width: 100%;
  }
}

.atlassian_product_way_card .ai_card_summary {
  font-size: 18px;
  line-height: 1.5;
}
/* private_eazybi/_infrastructure_nodes.haml sets --node_count. */
.infrastructure_diagram {
  --diagram_gap: 12px;
  --diagram_connector: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--diagram_connector));
  margin: 18px 10px 10px;
  padding: 36px clamp(12px, 2.5vw, 24px) 24px;
  border: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 8px;
  line-height: 1.3;
}

.infrastructure_diagram_network {
  position: absolute;
  top: 0;
  left: 20px;
  padding: 2px 10px;
  background: var(--feature_block_frame);
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.infrastructure_diagram_nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--node_count), minmax(0, 1fr));
  gap: var(--diagram_gap);
  margin: 0;
  padding: 0;
  list-style: none;

  &::after {
    content: "";
    position: absolute;
    left: calc((100% - (var(--node_count) - 1) * var(--diagram_gap)) / var(--node_count) / 2);
    right: calc((100% - (var(--node_count) - 1) * var(--diagram_gap)) / var(--node_count) / 2);
    height: 2px;
    background: var(--accent);
  }

  li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 16px 10px;
    /* The node text keeps the line height of the diagram, not the list item default of base/general.css. */
    line-height: inherit;
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
  }

  li::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: var(--diagram_connector);
    background: var(--accent);
    transform: translateX(-50%);
  }

  i {
    color: var(--accent);
    font-size: 26px;
  }
}

.infrastructure_diagram_sources {
  &::after { top: calc(100% + var(--diagram_connector) - 2px); }

  li::after { top: 100%; }
}

.infrastructure_diagram_outputs {
  &::after { bottom: calc(100% + var(--diagram_connector) - 2px); }

  li::after { bottom: 100%; }
}

.infrastructure_diagram_protocol {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-pale);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 600;
}

.infrastructure_diagram_hub {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  align-self: center;
  min-width: 60%;
  box-sizing: border-box;
  padding: 20px 24px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--white);
  text-align: center;

  &::before,
  &::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: var(--diagram_connector);
    background: var(--accent);
    transform: translateX(-50%);
  }

  &::before { bottom: 100%; }

  &::after { top: 100%; }

  i {
    color: var(--accent-light);
    font-size: 28px;
  }

  strong {
    font-size: 20px;
    font-weight: 600;
  }

  span {
    color: color-mix(in srgb, var(--paper) 72%, transparent);
    font-size: 14px;
  }
}

@media screen and (max-width: 560px) {
  .infrastructure_diagram {
    --diagram_gap: 8px;
    margin: 18px 4px 4px;
  }

  .infrastructure_diagram_nodes {
    li {
      padding: 12px 6px;
      font-size: 13px;
    }

    i { font-size: 22px; }
  }

  .infrastructure_diagram_protocol { font-size: 11px; }
}
/* The navigation is sticky, not fixed, so it does not cover the heading of the pricing block. */
.pricing_nav {
  position: sticky;
  top: var(--site_header_height);
  z-index: var(--z-index-very-high);
  border-top: 1px solid var(--line);
  background: var(--paper);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--ink) 10%, transparent);
}

/* The navigation carries the shadow of the header, so the two read as one bar. */
.pricing .site_header.is_scrolled { box-shadow: none; }

.pricing_nav_content {
  position: relative;
  display: flex;
  gap: 32px;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-side-padding);
  box-sizing: border-box;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;

  a {
    display: flex;
    align-items: center;
    min-height: 52px;
    color: var(--ink-muted);
    text-decoration: none;

    &:hover { color: var(--ink); }

    &[aria-current="page"] {
      color: var(--ink);

      .hover_underline { background-size: 100% 1px; }
    }
  }
}

/* The breakpoint matches the menu of the site header (common/header.css). */
@media (max-width: 960px) {
  /* The end padding lets the last link scroll out of the fade. */
  .pricing_nav_content {
    padding-right: 48px;
    mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
  }
}
.pricing_public {
  background: var(--paper);
  text-align: center;
}

.pricing_public_features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;

  li {
    margin: 0;
    padding: 12px 18px;
    border-radius: var(--border-radius-card);
    background: var(--white);
  }
}

.pricing_public_link { margin-top: 40px; }
.getting_started_emails_content {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 50%, var(--paper) 50%);

  .content_wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 20px 60px;

    .getting_started_emails_form {
      display: flex;
      text-align: left;
    }
  }

  .getting_started_emails_info,
  .getting_started_emails_options {
    width: 50%;
    box-sizing: border-box;
  }

  .getting_started_emails_info {
    padding-right: 40px;

    h1, h3, p, span { color: var(--white); }

    h1 { margin: 0; }

    ul {
      padding-left: 0;

      li {
        display: flex;
        align-items: center;
        margin: 10px 0;
        font-size: 18px;
        color: var(--white);

        &::before {
          font-family: 'Font Awesome 7 Pro';
          font-weight: 300;
          content: "\f00c";
          font-size: 24px;
          margin-right: 12px;
        }
      }
    }

    li, p { line-height: 1.5; }

    p {
      margin: 10px 0 40px;
      color: var(--accent-pale);
    }
  }

  .getting_started_emails_options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 40px;

    h4 {
      margin: 0;
      color: var(--ink-soft);
    }

    .getting_started_emails_thank_you {
      align-self: center;
      text-align: center;
      display: none;

      i {
        font-size: 64px;
        color: var(--accent);
      }

      p {
        color: var(--ink);
        font-size: 32px;
        margin-top: 40px;
      }
    }

    .getting_started_emails_products,
    .getting_started_emails_platforms {
      section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 10px;
      }
    }

    .getting_started_emails_platforms,
    .getting_started_emails_email { margin-top: 40px; }

    .getting_started_emails_email input {
      width: 100%;
      margin-top: 10px;
      height: 50px;
      box-sizing: border-box;
      border: 1px solid var(--line);
      padding: 0 15px;
      color: var(--ink-soft);
    }

    .getting_started_emails_option {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 60px;
      padding: 15px;
      box-sizing: border-box;
      border-radius: var(--border-radius);
      background: var(--ink-faint);
      color: var(--white);
      cursor: pointer;

      &:hover,
      &.is_selected { background: var(--accent); }

      img {
        max-width: 48px;
        max-height: 48px;
        margin-right: 10px;
      }

      .fad {
        font-size: 24px;
        margin-right: 10px;
      }

      span { color: var(--white); }
    }

    .getting_started_emails_subscribe {
      display: flex;
      width: 50%;
      margin: 20px auto 0;
      box-sizing: border-box;
    }

    em {
      display: block;
      font-size: 14px;
      color: var(--ink-soft);
      margin-top: 30px;
    }

    &.is_subscribed {
      > :not(.getting_started_emails_thank_you) { display: none; }

      .getting_started_emails_thank_you { display: block; }
    }
  }
}

@media screen and (max-width: 1000px) {
  .getting_started_emails_content {
    background: var(--paper);

    .content_wrap {
      padding-top: 100px;

      .getting_started_emails_form {
        flex-wrap: wrap;

        .getting_started_emails_info,
        .getting_started_emails_options {
          width: auto;
          padding: 0;
          max-width: 680px;
          display: inline-block;
          margin: 0 auto 30px;
        }

        .getting_started_emails_info {
          h1, h3 { color: var(--ink); }

          p {
            color: var(--ink-muted);
            margin-bottom: 20px;
          }

          ul li {
            font-size: 16px;
            color: var(--ink);
          }
        }
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .getting_started_emails_content .content_wrap {
    padding-top: 80px;

    .getting_started_emails_form .getting_started_emails_options {
      .getting_started_emails_option {
        font-size: 14px;

        img {
          max-width: 32px;
          max-height: 32px;
          margin-right: 6px;
        }
      }

      .getting_started_emails_subscribe { width: 100%; }
    }
  }
}
.security_topics {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: var(--section-padding);
}

.security_topic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 24px 64px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--border-radius-card);
  background: var(--white);
  scroll-margin-top: calc(var(--site_header_height) + 24px);
}

.security_topic_title {
  margin: 0;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.security_topic_badges {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 32px;

  img {
    display: block;
    width: 120px;
    height: auto;
  }
}

.security_topic_body {
  color: var(--ink-soft);
  font-size: 18px;

  p:first-child { margin-top: 0; }
  strong { color: var(--ink); }
}

.security_topic_points {
  margin-top: 24px;
  padding: 0;
  list-style: none;

  li {
    position: relative;
    margin: 0;
    padding: 16px 0 16px 28px;
    border-top: 1px solid var(--line);

    &::before {
      content: "";
      position: absolute;
      top: 27px;
      left: 4px;
      width: 8px;
      height: 8px;
      background: var(--accent);
    }
  }
}

.security_topic_resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
  margin-top: 32px;
}

.security_topic_resource {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: var(--border-radius-card);
  background: var(--paper);

  p {
    margin: 0;
    font-size: 16px;
  }

  .arrow_link {
    margin-top: auto;
    color: var(--ink);
    font-weight: 600;
  }
}

/* The breakpoint matches the menu of the site header (common/header.css). */
@media (max-width: 960px) {
  .security_topic { grid-template-columns: minmax(0, 1fr); }

  .security_topic_badges {
    margin-top: 20px;

    img { width: 96px; }
  }
}
/*


















 */