/* Phone and tablet fixes from Xavier's Oct 5 review of the preview.
   This file loads after every other stylesheet. The html prefix lets each rule
   outrank the Webflow rule it corrects. */

/* Hero on phones: the first line starts about 20px below the fixed header at every
   phone width. Webflow pulls this container up by 120px, which hides the first line. */
@media screen and (max-width: 479px) {
  html .grid-mian-container.hero { top: calc(92px - 43.3vw); }
}

/* Hero on tablets: same fix. Webflow pulls the hero up by 8rem here. */
@media screen and (min-width: 480px) and (max-width: 991px) {
  html .container.hero-home { margin-top: 0; padding-top: 5.5rem; }
}

/* "your" was boxed at 1.8em, narrower than the word, so the rotating word ran into it.
   It now takes the width of the word, with a space before the rotating word. */
@media screen and (max-width: 991px) {
  html .h1-ampli.mobile { width: auto; margin-right: .22em; }
}

/* The rings behind "Human-in-the-loop at AI speed" are 100vw wide but started 20px
   in from the left, so they sat off center and made the page 20px wider than the
   phone. They now start at the left edge of the screen. */
@media screen and (max-width: 479px) {
  html .ampli-graph-wrapper { margin-left: calc(50% - 50vw); }
}

/* Badges: each one fits its label on one line. FOR YOUR RISK TEAM and FOR YOUR
   BUSINESS were wrapping inside fixed widths. 10px is the side space FOR YOUR USERS
   already has. */
html .benefits .number.benefit-number { width: auto; white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* "Who builds on Ampli:" centered over the cards, at every width. */
html .body-copy-hero.who-builds { align-self: stretch; max-width: none; text-align: center; }
@media screen and (max-width: 991px) {
  html .body-copy-hero.who-builds { margin-bottom: 1.5rem; }
}

/* Menu on tablets (768 to 991): the five links fit in the bar. Home is left out,
   as on computers. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  html .navbar .nav-links-wrapper .list-item-2.small-vp { display: none; }
  html .navbar .nav-links-wrapper .link-nav { padding-left: 8px; padding-right: 8px; }
}

/* Menu on phones: the five links and the footer line fit the open menu down to a
   375 x 667 screen. */
@media screen and (max-width: 479px) {
  html .navbar .mobile-menu-list { grid-row-gap: 24px; row-gap: 24px; padding-top: 24px; padding-bottom: 32px; }
}

/* FAQ on phones and tablets: one question per row, and a tap opens or closes the
   answer. On computers every answer stays open and the button is hidden. */
@media screen and (max-width: 991px) {
  html .container.faq-list { display: flex; flex-direction: column; row-gap: 0; grid-row-gap: 0; }
  html .faq-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0; grid-row-gap: 0; padding-top: 14px; padding-bottom: 14px; border-top: 1px solid var(--_colors---border-1); }
  html .faq-item:last-child { border-bottom: 1px solid var(--_colors---border-1); }
  html .faq-item > h3 { grid-area: 1 / 1; padding-right: 2.5rem; }
  html .faq-item > .faq-toggle { grid-area: 1 / 1; align-self: stretch; z-index: 1; display: flex; justify-content: flex-end; align-items: center; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  html .faq-item > .faq-toggle::after { content: "+"; font-size: 1.75rem; line-height: 1; }
  html .faq-item > .faq-toggle[aria-expanded="true"]::after { content: "\2212"; }
  html .faq-item > .faq-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  html .faq-item > p { grid-area: 2 / 1; display: none; padding-top: 10px; }
  html .faq-item.is-open > p { display: block; }
  /* The scroll reveal can't play on a closed answer, so an answer shows at rest when it opens. */
  html .faq-item > p .gsap_split_word { transform: none !important; }
}
@media screen and (min-width: 992px) {
  html .faq-toggle { display: none; }
}

/* The Cantina logo sat in the Sherlock class, which fixes the height at 13px for Sherlock's long one-line
   wordmark, and the width at 150px on computers, which squashed it. Cantina's mark is short and condensed,
   so it showed at about a third of the size of the logos next to it. It now keeps its own shape at the
   height of the Blackthorn mark beside it. */
html .security-logo-container-image.cantina-logo { width: auto; max-width: none; height: 18px; }
@media screen and (min-width: 1920px) {
  html .security-logo-container-image.cantina-logo { height: 22px; }
}

/* Phones: the three smart contract audit logos wrap onto two lines instead of running past the screen,
   which made the page wider than the phone once they loaded. */
@media screen and (max-width: 479px) {
  html .div-block-5 { flex-wrap: wrap; justify-content: flex-start; column-gap: 24px; row-gap: 14px; }
}