/*************************************************
 * Fonts
 *************************************************/

/* domine-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Domine';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/domine-v25-latin/domine-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* domine-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Domine';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/domine-v25-latin/domine-v25-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* domine-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Domine';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/domine-v25-latin/domine-v25-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* domine-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Domine';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/domine-v25-latin/domine-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* playfair-display-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/playfair-display-v40-latin/playfair-display-v40-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* open-sans-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/open-sans-v44-latin/open-sans-v44-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*************************************************
 * Global Styles
 *************************************************/

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

html, body {
  background: #282828;
}

.splash {
  height: 100dvh;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  background: linear-gradient(to bottom, #2B8EBF 0%, #1F9188 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.logo-watermark {
  position: absolute;
  bottom: 60px;
  right: 40px;
  width: 37.7%;
  max-width: 195px;
  opacity: 0.35;
}

.logo-watermark svg {
  width: 100%;
  height: auto;
}

/*
 * Landing Screen Styles
 */

.landing {
  height: 100dvh;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: env(safe-area-inset-bottom, 0);
  overflow: hidden;
}

.bg {
  position: absolute;
  inset: 0;
  background-image: url('../media/images/landing-bg.jpg');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

/* Gradient overlay: transparent at 500px from bottom → dark #163332 80% at 250px and below */
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(22, 51, 50, 0.8) 0px,
      rgba(22, 51, 50, 0.8) 250px,
      rgba(22, 51, 50, 0) 500px
  );
}

/* Extra overlay when install instructions are open */
.bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
      to top,
      rgba(28, 54, 50, 0.65) 0%,
      rgba(28, 54, 50, 0.15) 100%
  );
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}

.landing.install-open .bg::before {
  opacity: 1;
}

.header {
  position: relative;
  z-index: 10;
  padding: 20px 28px 8px;
}

.content {
  position: relative;
  z-index: 1;
  padding: 0 28px;
  /*padding-bottom: max(40px, env(safe-area-inset-bottom, 40px));*/
}

.headline {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(56px, 14vw, 72px);
  line-height: 0.95;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.subtext {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 36px;
  max-width: 340px;
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 20px;
}

.btn-begin {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: #1F9188;
  border: none;
  border-radius: 50px;
  padding: 14px 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-begin:active {
  opacity: 0.85;
}

.btn-qr {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn-qr svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-install-orig {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 25px;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.btn-install {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: #ffffff;
  background: #DA8518;
  border: none;
  border-radius: 50px;
  padding: 14px 28px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ── Content transition when install panel opens ── */
.content {
  transition: transform 250ms ease;
}

.content.show-install {
  transform: translateY(-60px);
}

/* ── Install instructions panel ── */
.install-instructions {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  padding: 0 12px;
  transition: max-height 250ms ease, opacity 200ms ease, padding 250ms ease;
}

.content.show-install .install-instructions {
  max-height: 300px;
  opacity: 1;
  padding: 12px;
}

.install-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.install-title {
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.install-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
}

.install-close:active {
  color: #fff;
}

.install-steps {
  list-style: none;
  counter-reset: install-step;
  padding: 0;
  margin: 0;
}

.install-steps li {
  counter-increment: install-step;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  padding: 6px 0;
  padding-left: 28px;
  position: relative;
}

.install-steps li::before {
  content: counter(install-step);
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-steps li strong {
  font-weight: 600;
  color: #fff;
}

.install-steps .icon-share {
  display: inline-flex;
  vertical-align: middle;
  margin: 0 2px;
}

.install-steps .icon-share svg {
  width: 14px;
  height: 14px;
}

.install-steps .icon-dots {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -1px;
}

/*************************************************
 * Responsive — Tablet (iPad-ish and up)
 *************************************************/

@media (min-width: 600px) {
  .landing .header {
    padding: 28px 40px;
  }

  .landing .content {
    padding: 0 40px;
  }

  .landing .headline {
    font-size: clamp(64px, 10vw, 80px);
  }

  .landing .subtext {
    font-size: 18px;
    max-width: 480px;
  }

  .landing .btn-begin {
    font-size: 15px;
    padding: 20px 48px;
  }

  .landing .btn-install {
    font-size: 17px;
  }

  .landing .install-title {
    font-size: 16px;
  }

  .landing .install-steps li {
    font-size: 15px;
  }
}