/* TapGuide v10.29.1 */



/*
00) Base & Reset
 =================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
  "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  line-height: 1.6;
  color: #111;
  background: #fff;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}


/*
01) Design Tokens
=================== */
:root {
  /* Colors */
  --fg: #111;
  --muted: #555;
  --border: #e5e7eb;
  --card-bg: #f5f5f5;     /* cards */
  --feature-bg: #f7f7f9;  /* feature card*/
  --page-bg: #ffffff;
  --brand: #1166ff;
  --brand-dark: #0f57d6;
  --brand-contrast: #ffffff;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Type sizes (mobile-first) */
  --fs-1: 0.875rem; /* small */
  --fs-2: 1rem;     /* base */
  --fs-3: 1.125rem; /* +1 */
  --fs-4: 1.375rem; /* h2 mobile */
  --fs-5: 1.75rem;  /* h1 mobile */

  /* Layout max width */
  --content-max: 72rem; /* ~1152px */

  /* Corner radius */
  --radius: 6px;
}


/*
02) App Shell
=================== */
.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
 }

header {
  padding: var(--space-1) var(--space-1);
}

main {
flex: 1 0 auto;
}

footer, .site-footer {
  flex: 0 0 auto;
  border-top: 1px solid var(--border); background: var(--page-bg);
  color: var(--muted);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--fs-1);
 }




/*
03) Page Content
/* =================== */

.page-content {
  width: 100%;
  max-width: var(--content-max);
  padding: var(--space-6) var(--space-4);
  margin: 0 auto;
}

.page-content > section + section {
 padding-top: var(--space-8);
 border-top: 1px solid var(--border);
}


/*
04) Typography
=================== */

h1, h2, h3 {
  color: var(--fg);
  margin: 0 0 var(--space-3);
  line-height: 1.25;
  }

h1 {
  font-size: var(--fs-5);
}
h2 {
  font-size: var(--fs-4);
}
h3 {
  font-size: var(--fs-3);
}
p {
  margin: 0 0 var(--space-4);
   font-size: var(--fs-2);
   line-height: 1.7;
 }


/*
05) Links & Buttons
====================== */
a {
  color: var(--brand);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible {
  outline: 3px solid rgba(17, 102, 255, 0.3);
  outline-offset: 2px;
}
.btn {
  display: inline-block;
  font-size: var(--fs-2);
  padding: .6em 1.0em;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--solid {
  background: var(--brand);
  color: var(--brand-contrast);
  border-color: var(--brand);
}

.btn--solid:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
   text-decoration: none;
 }

.btn--outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}

.btn--outline:hover {
   background: rgba(17, 102, 255, 0.08);
 }

.btn--block {
   display: block; width: 100%;
 }



/*
06) Media
====================== */

img {
  max-width: 100%;
   height: auto;
    display: block;
  }

figure {
  margin: 0;
}




/*
07) Intro
====================== */

#intro {
  display: flex;
   flex-direction: column;
    gap: var(--space-6);
  }




/*
08) Card
====================== */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid #dddddd; /* clearer separation */
}



/*
 09) Features
 ====================== */

#features > h2 { text-align: center; }
#features .features-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
#features .features-list li {
  width: 100%;
  max-width: 42rem;
  text-align: center;
  padding: var(--space-3);
  background: var(--feature-bg);
  box-sizing: border-box;
  font-weight: 600;
  border-radius: var(--radius);
}
#features .features-list li:hover { background: #eceff1; }




/*
10) Places
=========================== */

#places {
  padding-bottom: 2rem
}

#places > h2 {
  text-align: center;
}

.places-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: nowrap; }

.places-list img {
  display: block;
   flex: 0 0 auto;
   width: auto !important;
   height: 100px;
   object-fit: contain;
 }



/*
 12) Try
 =========================== */

#try {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#try > h2 {
  text-align: center; margin-bottom: 2rem
}

#try .btn--block {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  #try .btn--block {
    max-width: 50rem; }
  }

/*
12) Page-specific spacing
 =========================== */
#examples .card + .card,
#how-it-works .card + .card,
#pricing .card + .card,
#outline .card + .card {
 margin-top: var(--space-10);
}

/* ===========================*/
/* 13) Navigation */
/* ===========================*/
nav.site-nav {
  width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--space-1) var(--space-4);
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-3);
  background: var(--page-bg); border-bottom: 2px solid rgba(0,0,0,.08); margin-bottom: 2rem;
}
.site-logo {
  flex: 0 0 auto;
   display: inline-flex;
    align-items: center;
    align-self: center;
  }

.site-logo svg, .site-logo img {
  height: 28px;
  width: auto;
   display: block;
 }

#nav-toggle.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.hamburger {
  margin-left: auto;
   display: inline-flex;
    flex-direction: column;
     gap: 4px; padding: .5em .75em;
  cursor: pointer;
  color: #1E2A38;
  align-self: flex-start;
}

.hamburger:focus-visible {
  outline: 2px solid #ffbf00;
  outline-offset: 2px;
}
.hamburger span {
  width: 22px;
  height: 2px;
  background: #1E2A38;
   border-radius: 1px;
 }

#site-menu {
  display: none;
  flex-direction: column;
   list-style: none;
  padding: 0;
  margin: .25em 0 0;
  text-align: center;
  width: 100%;
  flex: 1 0 100%;
  align-items: center;
  justify-content: center;
}

#site-menu li {
  border-top: 1px solid rgba(0,0,0,.08);
}

#site-menu li:first-child {
   border-top: 0;
 }

#site-menu a {
   color: #1E2A38;
  text-decoration: none;
  display: block;
  padding: .75em;
  transition: color .2s ease;
    }

#site-menu a:hover {
   color: #0f3f73;
   text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 2px;
 }

#site-menu a:focus-visible {
  outline: 2px solid #ffbf00;
  outline-offset: 2px;
}

#site-menu li > a.active {
  color: #1E2A38;
   text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 2px;
 }

#site-menu li > a.active:hover {
   color: #0f3f73;
 }
#nav-toggle:checked ~ #site-menu {
  display: flex;
}



/*
 14) Desktop adjustments (>=768px)===========================*/

@media (min-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.375rem; }
  p  { font-size: 1.0625rem; }

  #intro {
     flex-direction: row;
      align-items: flex-start;
      gap: var(--space-6);
    }

  #intro .text {
    flex: 0 0 50%;
    max-width: 50%;
  }

  #intro .image {
     flex: 0 0 50%;
     max-width: 50%;
     display: flex;
     justify-content: center;
      align-items: center;
   }

  #intro .image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .card {
    flex-direction: row;
    align-items: flex-start;
     gap: var(--space-6);
   }

  .card .text,
  .card .image {
  flex: 0 0 50%;
  max-width: 50%;
}

  .card .image {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card .image img {
    width: 100%;
    height: auto;
     object-fit: contain;
   }

  nav.site-nav {
    justify-content: flex-start;
    padding: var(--space-1) var(--space-4);
     border-bottom: 1px solid rgba(0,0,0,.08);
      flex-wrap: nowrap;
    }

  #site-menu {
    display: flex;
    flex-direction: row;
     width: auto;
      margin-left: auto;
      text-align: left;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
       justify-content: flex-start;
       flex: 0 0 auto;
     }

  #site-menu li {
    border-top: 0;
  }
  .hamburger {
    display: none; }
  .site-logo svg,
  .site-logo img {
    height: 32px;
    width: auto;
  }
  #outline article.card {
    display: flex;
    flex-direction: row;
     align-items: center;
     gap: var(--space-6);
   }
  #outline article.card .text {
    order: 1;
  }
  #outline article.card .image {
    order: 2;
  }
  #outline article.card:nth-of-type(2) .text  {
     order: 2;

  }
  #outline article.card:nth-of-type(2) .image {
     order: 1;
   }
}



/*
15) FAQ (accordion)
======================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
  }
.faq-list .faq-item {
  padding: 0;
}
.faq-list .faq-item > h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-4);
  line-height: 1.3;
}

.faq-list .faq-item .accordion {
  display: block;
}
.faq-list .accordion details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page-bg);
  overflow: hidden;
  margin: 0 0 var(--space-3);
}
.faq-list .accordion details > summary {
  display: flex;
   align-items: center;
    gap: 0.75rem;
     padding: 14px 16px;
     min-height: 44px;
  font-size: var(--fs-3);
   font-weight: 700;
   color: var(--fg);
   background: #f7f7f7;
   cursor: pointer;
   list-style: none;
    position: relative;
}
.faq-list .accordion details > summary::-webkit-details-marker {
  display: none;
}
.faq-list .accordion details > summary::marker { content: "";
}
.faq-list .accordion details > summary::after {
   content: "\25b8";
 margin-left: auto;
 font-size: 1rem;
 color: #333;
  transition: transform 0.2s ease;
}

.faq-list .accordion details[open] > summary::after {
  transform: rotate(90deg);
}
.faq-list .accordion details > summary:hover {
  background: #f0f0f0;
}
.faq-list .accordion details > summary:focus-visible {
   outline: 3px solid rgba(17,102,255,0.3);
   outline-offset: 2px;
 }

.faq-list .accordion details > *:not(summary) {
  padding: 14px 16px 16px 16px;
  color: var(--fg);
  line-height: 1.6;
   background: var(--page-bg);
   border-top: 1px solid var(--border);
}
.faq-list .accordion p {
  margin: 8px 0;
}
.faq-list .accordion ul, .faq-list .accordion ol {
   margin: 8px 0 0 0;
   padding-left: 22px;
 }

.faq-list .accordion li {
  margin: 6px 0;
  padding: 2px 0;
  line-height: 1.5;
}

.faq-list .accordion a {
  color: var(--brand);
   text-decoration: underline;
   padding: 2px 0;
 }

@media (max-width: 640px) {
  .faq-list .accordion details > summary {
    padding: 16px;
    font-size: 1.08rem;
  }

  .faq-list .accordion details > *:not(summary) {
     padding: 12px 16px 16px 16px;
   }
}
@media (prefers-contrast: more) {
  .faq-list .accordion details {
    border-color: #333;
  }
  .faq-list .accordion details > summary {
     background: #eee;
   }

  /* High-contrast: slightly stronger greys for cards/features */
  .card {
    background: #efefef; border-color: #cfcfcf; }

  #features .features-list li {
    background: #efefef;
  }
}


/*
16) Forms (Contact)
======================= */

.page-content form {
  width: 100%;
   max-width: 46rem;
   margin: 0 auto;
 }

@media (min-width: 1024px) {
   .page-content form {
     max-width: 50rem;
   }
 }

.page-content form fieldset {
  border: 0; padding: 0; margin: 0;
}

.page-content form label {
  display: block;
  font-weight: 600;
   margin: var(--space-3) 0 var(--space-2);
   color: var(--fg);
 }

.page-content form input[type="text"],
.page-content form input[type="email"],
.page-content form input[type="tel"],
.page-content form input[type="url"],
.page-content form input[type="search"],
.page-content form input[type="number"],
.page-content form select,
.page-content form textarea {
  display: block;
   width: 100%;
   max-width: 100%;
   padding: .65em .75em;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   font-size: var(--fs-2);
   line-height: 1.5; background: #fff;
}


/* Radios & Checkboxes */
.page-content form input[type="radio"], .page-content form input[type="checkbox"] {
  width: auto;
  display: inline-block;
}

.page-content form .option {
  display: inline-flex;
   align-items: center;
    gap: .5em;
    margin-right: 1em;
  }

/* Contact submit wrapper: neutralize 140px + right align; center the row */
.page-content form .formblock__submit {
  position: relative; /* stacking context for the bar + button */
  width: 100%;
  max-width: 100%;
  text-align: center;
  margin: 1.5rem auto 0;
}
/* Contact submit control: match CTA appearance */
.page-content form .formblock__submit input[type="submit"],
.page-content form .formblock__submit button[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
   max-width: 100%;
    margin: 0;
    text-align: center;
  font-size: var(--fs-2);
  padding: .6em 1.0em;
  line-height: 1.2;
  background: var(--brand);
  color: var(--brand-contrast);
  border: 1px solid var(--brand);
  border-radius: var(--radius);
}
.page-content form .formblock__submit input[type="submit"]:hover,
.page-content form .formblock__submit button[type="submit"]:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

/* Contact bar safety: ensure decorative bar never blocks clicks */
.page-content form .formblock__submit .formblock__submit__bar {
  position: absolute; /* keep animated positioning */
  left: 0;
  right: 0;
  bottom: 0;          /* sit at bottom edge */
  height: 4px;        /* thin progress line */
  pointer-events: none; /* critical: don't intercept clicks */
  z-index: 0;         /* behind the button */
}
.page-content form .formblock__submit input[type="submit"],
.page-content form .formblock__submit button[type="submit"] {
  position: relative; z-index: 1; /* above the bar */
}

/*
17) Desktop breathing room ============================ */

@media (min-width: 1024px) {
  .card { padding: var(--space-6);
    overflow: hidden;
  }

  .card .image {
    padding: var(--space-5);
     box-sizing: border-box;
   }
  #examples .card + .card,
  #how-it-works .card + .card,
  #pricing .card + .card,
  #outline .card + .card {
    margin-top: var(--space-12);
  }
}
/* End of TapGuide v10.29.1 */