/* Additions to webflow.css (the stylesheet exported from Webflow). */

/* Fade-ins: site.js adds .is-in when an element scrolls into view. The timings match the old Webflow ones:
   0.7s ease after the element's delay, and a 1.2s fade for the background gradients. */
.w-mod-js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 15px, 0);
}
.w-mod-js [data-reveal="gradient"] {
  transform: none;
}
.w-mod-js [data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity .7s ease, transform .7s ease;
}
.w-mod-js [data-reveal="0.1"].is-in { transition-delay: .1s; }
.w-mod-js [data-reveal="0.2"].is-in { transition-delay: .2s; }
.w-mod-js [data-reveal="0.3"].is-in { transition-delay: .3s; }
.w-mod-js [data-reveal="0.4"].is-in { transition-delay: .4s; }
.w-mod-js [data-reveal="gradient"].is-in {
  transform: none;
  transition: opacity 1.2s cubic-bezier(.445, .05, .55, .95) .1s;
}
.reveal-all [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .w-mod-js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

/* Blog page: the newest 30 posts show; "Show more posts" (site.js) shows 30 more each time. Without
   JavaScript, every post shows. */
.w-mod-js [data-more] {
  display: none;
}
.blog-more-wrap {
  justify-content: center;
  padding: 3em 0 1em;
  display: flex;
}
html:not(.w-mod-js) .blog-more-wrap {
  display: none;
}

/* Privacy policy: each list item holds a paragraph; space the items like a post's list. */
.policy li > p {
  margin-bottom: 0;
}

/* The menu button and "Show more posts" are real <button>s (on Webflow they were a <div> and a link), which
   is what screen readers and AI agents look for. These rules take away the browser's own button look; they
   have no specificity, so Webflow's classes still style them. */
:where(button.w-nav-button, button.blog-more) {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  padding: 0;
  text-align: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
}
button.w-nav-button .icon-menu,
button.blog-more .text-button {
  display: block;
}
.w-nav-button:focus-visible {
  outline: 2px solid var(--heading-off-white);
  outline-offset: 2px;
}

/* Text for screen readers and AI agents only, such as the label of the free-PDF email field. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Home: a plain definition under the slogan, and the question people ask first, answered in a few lines (so
   visitors and AI assistants get what Kiwi is and who it's for straight away). */
.definition-hero{color:var(--heading-off-white)}
.section.section-answer{padding-top:2.5em;padding-bottom:3em}
.grid-answer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:4em;row-gap:1.75em;align-items:start}
.grid-answer .heading{max-width:10.5em}
.answer{display:flex;flex-direction:column;align-items:flex-start;gap:1.25em}
.answer .paragraph{max-width:28em}
.text-facts{max-width:28em;font-size:1em;line-height:1.6em}
.text-facts strong{color:var(--heading-off-white);font-weight:500}
.link-answer{color:var(--color-2);font-size:1.125em;font-weight:500;text-decoration:none}
.link-answer:hover{text-decoration:underline}
@media screen and (max-width:767px){
  .grid-answer{grid-template-columns:minmax(0,1fr)}
}

/* Comparisons (/compare and /compare/<slug>): the short answer in a box, a plain table, links to the others. */
.compare .answer-box{background-color:var(--background-content);border:1px solid var(--border);border-radius:1.25em;margin-bottom:2.5em;padding:1.75em 1.75em .5em}
.compare .answer-box h2{margin-top:0;font-size:2em}
.compare .table-scroll{overflow-x:auto;margin-bottom:1.3em}
.compare table{border-collapse:collapse;width:100%;font-size:1.05em;line-height:1.5em}
.compare th,.compare td{border-bottom:1px solid var(--border);padding:.85em .75em .85em 0;text-align:left;vertical-align:top}
.compare thead th{color:var(--heading-white);font-size:1.05em;font-weight:700}
.compare thead th.kiwi{color:var(--color-2)}
.compare tbody th{color:var(--heading-off-white);font-weight:500;width:28%}
.compare .table-note{font-size:.9em;margin-bottom:1em}
.compare-more{border-top:1px solid var(--border);margin-top:3em;padding-top:2em}
.heading-compare-more{font-size:1.6em;margin-bottom:.75em}
.compare-more-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75em}
.link-compare-more,.link-compare-card{color:var(--color-2);font-weight:500;text-decoration:none}
.link-compare-more{font-size:1.125em}
.link-compare-more:hover,.link-compare-card:hover{text-decoration:underline}
.compare-cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25em}
.compare-card{background-color:var(--background-content);border:1px solid var(--border);border-radius:1.25em;padding:1.75em}
.heading-compare-card{font-size:2em;margin-bottom:.5em}
.paragraph-compare-card{margin-bottom:.75em}
.text-compare-card{font-size:.9em}
@media screen and (max-width:479px){
  .compare .answer-box{padding:1.25em 1.25em .25em}
  .compare .answer-box h2,.heading-compare-card{font-size:1.6em}
  .compare table{font-size:.95em}
  .compare tbody th{width:30%}
}

/* Phones see only their own store's download button (base.html marks the page on-ios / on-android); computers
   see both. */
.on-ios .block-button-footer:has(a[href*="play.google.com"]),
.on-android .block-button-footer:has(a[href*="apps.apple.com"]){display:none}

/* The free-PDF forms' messages (on a dark page), with the download link */
.text-success{color:#8ef0b5;font-size:1.05em}
.text-error{color:#ffb4ab;font-size:1.05em}
.text-success a,.text-error a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.15em}