:root {
  --bg:#F5FAF8;
  --mint:#E3F4EE;
  --mint-2:#CBEBDF;
  --teal:#0F6B62;
  --teal-d:#0A5049;
  --ink:#0F2A28;
  --text:#1E3431;
  --muted:#56716C;
  --coral:#BF4127;
  --coral-d:#A33721;
  --coral-l:#FF6F4E;
  --line:#D5E7E1;
  --ok:#11794F;
  --wa:#1F8F4E;
  --head:"Outfit",system-ui,sans-serif;
  --sans:"DM Sans",system-ui,sans-serif;
  --r:18px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: clip;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: var(--teal);
}
p {
  margin: 0 0 1rem;
}
h1,
h2,
h3 {
  font-family: var(--head);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 .6rem;
  color: var(--ink);
  letter-spacing: -.015em;
}
h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
}
h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
}
h3 {
  font-size: 1.25rem;
}
.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 8px;
  top: 8px;
  background: #fff;
  padding: 8px;
  z-index: 99;
}
.kicker {
  display: inline-block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--teal);
  margin-bottom: .5rem;
}
.mini-k {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 10px;
}
.lead {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 56ch;
}
.pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--teal);
  font-weight: 700;
  font-size: .85rem;
  padding: 6px 12px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s, transform .15s;
  font-family: var(--sans);
}
.btn--teal {
  background: var(--teal);
  color: #fff;
}
.btn--teal:hover {
  background: var(--teal-d);
}
.btn--coral {
  background: var(--coral);
  color: #fff;
}
.btn--coral:hover {
  background: var(--coral-d);
  transform: translateY(-1px);
}
.btn--line {
  border-color: var(--teal);
  color: var(--teal);
  background: #fff;
}
.btn--light {
  background: #fff;
  color: var(--teal);
}
.btn--sm {
  padding: 9px 16px;
  font-size: .92rem;
}
.btn--full {
  width: 100%;
}
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(245, 250, 248, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr__in {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--head);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.02em;
}
.brand b {
  color: var(--teal);
  font-weight: 700;
}
.brand--light {
  color: #fff;
}
.brand--light b {
  color: #7FE0C8;
}
.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.nav__a {
  padding: 8px 14px;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 500;
  color: var(--text);
}
.nav__a.is-on,
.nav__a:hover {
  background: var(--mint);
  color: var(--teal-d);
}
.burger {
  display: none;
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  margin-left: auto;
}
.burger span {
  height: 2px;
  background: var(--ink);
  display: block;
  border-radius: 2px;
}
@media (max-width:880px) {
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    flex-direction: column;
    padding: 10px 20px 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open {
    display: flex;
  }
  .burger {
    display: flex;
  }
  .hdr__cta {
    margin-left: auto;
  }
  .burger {
    margin-left: 0;
  }
}
@media (max-width:400px) {
  .hdr__cta {
    padding: 8px 12px;
  }
}
.hero {
  padding: 56px 0 24px;
  background:
    radial-gradient(
      700px 360px at 90% 0%,
      var(--mint-2),
      transparent 70%);
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 40px;
  align-items: center;
  margin-bottom: 32px;
}
.hero__live {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
}
.live {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.live__row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
}
.live__row > div {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.live__row small {
  color: var(--muted);
  font-size: .8rem;
}
.live__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #C2CFCB;
}
.is-open .live__dot {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(23, 145, 95, .15);
}
.live .live__st {
  grid-column: 2;
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}
.is-open .live__st {
  color: var(--ok);
}
@media (max-width:880px) {
  .hero {
    padding: 36px 0 56px;
    display: flex;
    flex-direction: column;
  }
  .hero__in {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 20px;
  }
  .hero__live {
    display: none;
  }
  .hero > .wrap:last-child::after {
    content: "";
    display: block;
  }
}
.picker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  transition: border-color .15s, transform .15s;
}
.pick:hover {
  transform: translateY(-2px);
}
.pick__ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mint);
  color: var(--teal);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.pick b {
  font-family: var(--head);
  font-size: 1.12rem;
  color: var(--ink);
}
.pick small {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.3;
}
.pick.is-on {
  border-color: var(--teal);
  box-shadow: 0 10px 30px rgba(15, 107, 98, .14);
}
.pick.is-on .pick__ic {
  background: var(--teal);
  color: #fff;
}
@media (max-width:960px) {
  .picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width:560px) {
  .picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pick {
    padding: 12px;
  }
  .pick small {
    display: none;
  }
  .pick__ic {
    width: 40px;
    height: 40px;
  }
}
.guide {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 14px;
}
.guide__need {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 28px;
}
.guide__time {
  display: inline-block;
  background: var(--mint);
  color: var(--teal-d);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: .9rem;
}
.checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0 10px;
  display: grid;
  gap: 8px;
}
.checklist label {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}
.checklist input {
  width: 20px;
  height: 20px;
  accent-color: var(--ok);
  flex: 0 0 auto;
}
.checklist input:checked + span {
  text-decoration: line-through;
  color: var(--muted);
}
.checklist--static li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0;
}
.checklist--static svg {
  color: var(--ok);
  flex: 0 0 auto;
  margin-top: 3px;
}
.guide__extra p {
  font-size: .93rem;
  color: var(--muted);
  margin: .4rem 0 0;
}
.guide__side {
  display: grid;
  gap: 14px;
  align-content: start;
}
.fast {
  background: var(--teal);
  color: #fff;
  border-radius: var(--r);
  padding: 22px;
}
.fast .mini-k {
  color: #A9E6D6;
}
.fast .field span {
  color: #DDF3EC;
}
.fast input {
  font: inherit;
  font-size: 1.3rem;
  padding: 10px 12px;
  border-radius: 12px;
  border: 0;
  width: 100%;
}
.fast__res {
  margin: 12px 0 0;
  font-size: 1.05rem;
}
.fast__res b {
  font-family: var(--head);
  font-size: 1.8rem;
  display: block;
}
.fast__res small {
  display: block;
  color: #BFE9DD;
  font-size: .8rem;
  margin-top: 4px;
}
@media (max-width:880px) {
  .guide {
    grid-template-columns: minmax(0, 1fr);
  }
  .guide__need {
    padding: 20px;
  }
}
.field {
  display: grid;
  gap: 6px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
  border: 0;
  padding: 0;
  margin: 0;
}
.field input,
.field select {
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  width: 100%;
}
.field input:focus {
  outline: 2px solid var(--teal);
}
.check {
  display: flex;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  color: var(--text);
  font-size: .95rem;
}
.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
}
.sec {
  padding: 84px 0;
}
.sec--mint {
  background: var(--mint);
}
.sec__head {
  margin-bottom: 28px;
}
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.feature__img {
  border-radius: 28px;
  aspect-ratio: 4/3.3;
  object-fit: cover;
  width: 100%;
}
.stats {
  list-style: none;
  padding: 0;
  margin: 18px 0 22px;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.stats li {
  display: flex;
  flex-direction: column;
}
.stats b {
  font-family: var(--head);
  font-size: 2rem;
  color: var(--teal);
  line-height: 1;
}
.stats span {
  font-size: .85rem;
  color: var(--muted);
}
.quote {
  margin: 0 0 10px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-size: .97rem;
}
@media (max-width:880px) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}
.promos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.promo {
  background: #fff;
  border-radius: var(--r);
  padding: 24px;
}
.promo b {
  font-family: var(--head);
  font-size: 2.6rem;
  color: var(--coral);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}
.promo p {
  color: var(--muted);
  margin: 0;
  font-size: .95rem;
}
@media (max-width:880px) {
  .promos {
    grid-template-columns: minmax(0, 1fr);
  }
}
.biz {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px;
  align-items: center;
}
.biz img,
.rounded {
  border-radius: 28px;
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}
@media (max-width:880px) {
  .biz {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}
.phead {
  padding: 52px 0 44px;
  background:
    radial-gradient(
      600px 300px at 90% 0%,
      var(--mint-2),
      transparent 70%);
}
.phead__in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 40px;
  align-items: center;
}
.phead__img {
  border-radius: 28px;
  aspect-ratio: 16/10;
  object-fit: cover;
  width: 100%;
}
@media (max-width:880px) {
  .phead__in {
    grid-template-columns: minmax(0, 1fr);
  }
}
.two {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width:880px) {
  .two {
    grid-template-columns: minmax(0, 1fr);
  }
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.card--teal {
  background: var(--teal);
  color: #DDF3EC;
  border: 0;
}
.card--teal h2 {
  color: #fff;
}
.note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .9rem;
  color: var(--muted);
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0;
}
.note svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--coral);
}
.hrow {
  display: grid;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.hrow b {
  color: #fff;
  font-family: var(--head);
  font-size: 1.1rem;
}
.hrow small {
  color: #A9E6D6;
}
.faq {
  max-width: 780px;
}
.faq details {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 10px;
}
.faq summary {
  font-family: var(--head);
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--ink);
}
.faq details p {
  margin: .6rem 0 0;
  color: var(--muted);
}
.sedes {
  display: grid;
  gap: 18px;
}
.sede {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.sede iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border: 0;
}
.sede__body {
  padding: 24px 26px;
}
.sede__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.sede__top .live__st {
  font-weight: 700;
  font-size: .9rem;
  color: var(--muted);
  background: var(--bg);
  padding: 4px 12px;
  border-radius: 99px;
}
.sede.is-open .live__st {
  color: var(--ok);
  background: #E1F5EA;
}
.sede__body p {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: .4rem 0;
}
.sede__body p svg {
  color: var(--teal);
  flex: 0 0 auto;
  margin-top: 4px;
}
.sede__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
@media (max-width:760px) {
  .sede {
    grid-template-columns: minmax(0, 1fr);
  }
  .sede iframe {
    height: 220px;
    min-height: 220px;
  }
}
.ftr {
  background: var(--ink);
  color: #A9C3BE;
  padding: 60px 0 24px;
  font-size: .93rem;
}
.ftr__in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr));
  gap: 32px;
}
.ftr h4 {
  color: #fff;
  font-family: var(--head);
  font-size: 1.1rem;
  margin: 0 0 8px;
}
.ftr a {
  color: #fff;
}
.ftr__muted {
  margin-top: 14px;
}
.ftr__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .8rem;
}
.demo-tag a {
  color: #7FE0C8;
}
@media (max-width:880px) {
  .ftr__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
@media (max-width:520px) {
  .ftr__in {
    grid-template-columns: minmax(0, 1fr);
  }
}
.wa-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  z-index: 50;
}
.live-mobile {
  display: none;
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
}
@media (max-width:880px) {
  .live-mobile {
    display: block;
  }
}
.phead + .sec {
  padding-top: 36px;
}
@media (max-width:760px) {
  .sec {
    padding: 56px 0;
  }
  .phead + .sec {
    padding-top: 24px;
  }
  .hero {
    padding-bottom: 40px;
  }
}
.guide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.guide__price {
  display: inline-block;
  background: #FFF1EC;
  color: #8A2F1C;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: .9rem;
}
.guide__need .link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  text-decoration: none;
}
.sec--tight {
  padding-bottom: 40px;
}
.about {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.about__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.about__item p {
  color: var(--muted);
  margin: 0;
  font-size: .95rem;
}
.about__item h3 {
  margin-top: 10px;
}
@media (max-width:900px) {
  .about {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:520px) {
  .about {
    grid-template-columns: minmax(0, 1fr);
  }
}
.price-tag {
  display: inline-flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 16px;
  margin-top: 6px;
}
.price-tag b {
  font-family: var(--head);
  font-size: 1.8rem;
  color: var(--coral);
  line-height: 1.1;
}
.price-tag span {
  font-size: .85rem;
  color: var(--muted);
}
.card--msp {
  margin-top: 20px;
}
.msp {
  margin: 4px 0 12px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
}
.msp li::marker {
  color: var(--teal);
  font-weight: 700;
}
.areas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.area {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.area h3 {
  margin: 10px 0 8px;
}
.area ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: .93rem;
  display: grid;
  gap: 4px;
}
@media (max-width:1000px) {
  .areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:560px) {
  .areas {
    grid-template-columns: minmax(0, 1fr);
  }
}
.epi {
  margin-top: 20px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 28px;
  align-items: center;
  background: var(--ink);
  color: #CFE3DE;
  border-radius: var(--r);
  padding: 30px;
}
.epi h2 {
  color: #fff;
}
.epi ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.epi li {
  display: flex;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
}
.epi li b {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  display: grid;
  place-items: center;
  font-size: .85rem;
  flex: 0 0 auto;
}
@media (max-width:760px) {
  .epi {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px;
  }
}
.kv {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}
.kv span {
  display: flex;
  gap: 6px;
  align-items: center;
}
.kv svg {
  color: var(--teal);
}
.card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.card__top h2,
.card__top h3 {
  margin: 0;
}
.price {
  font-family: var(--head);
  font-size: 1.4rem;
  color: var(--coral);
}
.small-note {
  font-size: .88rem;
  margin-top: 16px;
  max-width: 900px;
}
.sports {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}
.sport {
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
}
.sport summary {
  font-family: var(--head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  cursor: pointer;
}
.sport ul {
  list-style: none;
  margin: 10px 0 6px;
  padding: 0;
  display: grid;
  gap: 4px;
}
.sport li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .95rem;
}
.sport li svg {
  color: var(--ok);
  margin-top: 4px;
  flex: 0 0 auto;
}
.sport .note {
  margin-top: 8px;
}
@media (max-width:760px) {
  .sports {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width:1100px) {
  .nav__a {
    padding: 8px 10px;
    font-size: .95rem;
  }
}