/* =========================================================================
   Scarla: additions on top of template style.css
   ========================================================================= */

/* ---------- Cormorant Garamond (titles + accents) ----------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

h1, h2, h3,
.section_title h2,
.section_title h2 span,
.banner_section .banner_text h1 {
  font-family: 'Cormorant Garamond', 'Manrope', serif;
  letter-spacing: -0.5px;
}

/* Hero title: oversized display treatment for the serif */
.banner_section .banner_text h1 {
  font-size: clamp(38px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -2px;
}

/* Italicize the color-accent spans inside titles */
.section_title h2 span,
.banner_section .banner_text h1 span,
.service_section .service_text h2 span,
.about_us_section .abt_text h2 span {
  font-style: italic;
}

/* Make the phone frame wrap tightly around the screen image with no
   visible gaps. The screen image is 1206x2622 (1:2.174 aspect); at 280px
   wide its natural height is 609px. We size the carousel stage to match
   that exact 280x609 box so object-fit:cover renders the image edge-to-edge
   with zero cropping and zero letterboxing. The frame overlay is sized to
   300x609 so its opaque bezels mask the image's rectangular corners.
   The carousel top aligns with the frame top (no margin offset) so the
   phone's notch bezel sits over the image's status-bar gutter. We also
   suppress the template's white ::before backplate, which would otherwise
   show at the sides during slide transitions. */
.banner_section .banner_slider {
    position: relative;
    width: 300px;
    max-width: 84%;
    margin: 0 auto;
    aspect-ratio: 700 / 1432;
    filter: drop-shadow(0 18px 30px rgba(42, 2, 17, .28));
}
.banner_section .banner_slider .slider_frame {
    position: absolute;
    inset: 0;
    left: 0;
    transform: none;
    width: auto;
    z-index: 2;
    pointer-events: none;
}
.banner_section .banner_slider .slider_frame img {
    width: 100%;
    height: 100%;
    display: block;
}
.banner_section .banner_slider #frmae_slider {
    position: absolute;
    top: 2.2%;
    left: 5.1%;
    width: 89.8%;
    height: 95.6%;
    margin-top: 0;
    overflow: hidden;
    border-radius: 9% / 4%;
    background: #000;
    z-index: 1;
}
.banner_section .banner_slider #frmae_slider::before {
    display: none;
}
.banner_section .banner_slider #frmae_slider .owl-stage-outer,
.banner_section .banner_slider #frmae_slider .owl-stage,
.banner_section .banner_slider #frmae_slider .owl-item,
.banner_section .banner_slider #frmae_slider .item,
.banner_section .banner_slider #frmae_slider .slider_img {
    height: 100%;
}
.banner_section .banner_slider #frmae_slider .owl-stage-outer {
    overflow: hidden;
}
.banner_section .banner_slider #frmae_slider .slider_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.banner_section .banner_slider #frmae_slider .owl-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -50px;
}

/* Equalize feature card heights regardless of copy length: flex the Owl
   stage so all visible cards stretch to the tallest one, and pin each card's
   image to the bottom so the mockups line up across the row. */
#feature_slider.owl-carousel .owl-stage { display: flex; }
#feature_slider.owl-carousel .owl-stage .owl-item { display: flex; }
#feature_slider .item { display: flex; width: 100%; }
#feature_slider .feature_box {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#feature_slider .feature_box .img { margin-top: auto; }

/* Phone-frame mockup: wraps a full app screenshot (1206x2622 aspect)
   inside the iPhone frame PNG. Works responsively via % + aspect-ratio.
   Used in the features carousel and the download marquee. */
.img--phone {
  position: relative;
  width: 100%;
  max-width: 250px;
  aspect-ratio: 700 / 1432;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 18px 30px rgba(42, 2, 17, .28));
}
.img--phone img {
  position: absolute;
  top: 2.2%;
  left: 5.1%;
  width: 89.8%;
  height: 95.6%;
  max-width: none;
  border-radius: 9% / 4%;
  background: #000;
  object-fit: cover;
  object-position: center top;
}
.img--phone::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/iphone-frame.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Feature-card variant: shorten the container to match the keyftr
   placeholder footprint (270:343) so the phone rises from below the
   card edge, same visual rhythm as the not-yet-replaced placeholders.
   The image + frame inside keep their full-phone aspect (1206:2622)
   and are clipped by overflow:hidden. Top-corner radius matches the
   phone silhouette so the card's white doesn't peek past the bezel. */
/* Feature cards now show the full realistic device (no clip). */
#feature_slider .feature_box .img.img--phone {
  max-width: 215px;
}

/* Download-section marquee mock: CSS-built replacement for the old
   downloadScreen.png. A rounded purple slab holds two real .img--phone
   mocks: back phone tilts one way, front phone tilts the other and sits
   higher + larger. Screenshots drop straight into the phone frames, so
   swapping them later is just an <img src> change. Back phone is left
   as an empty frame until a second screenshot is provided. */
.downaload_section .download_stage {
  position: relative;
  width: min(525px, 90vw);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background-color: var(--primery);
  border-radius: 36px;
  transform: rotate(-9deg);
}
.downaload_section .download_phone {
  position: absolute;
  margin: 0;
  max-width: none;
}
.downaload_section .download_phone--back {
  width: 46%;
  top: -1%;
  left: 2%;
  transform: rotate(6deg);
  z-index: 1;
}
.downaload_section .download_phone--front {
  width: 52%;
  top: -5%;
  left: 43%;
  transform: rotate(11deg);
  z-index: 2;
}

.downaload_section .center_screen .app_btn {
  margin-top: 80px;
}

@media (max-width: 767px) {
  .downaload_section .download_stage {
    width: min(360px, 88%);
    border-radius: 28px;
  }
}

/* Service section: phone-frame the three screenshots while preserving the
   rotated purple ::before block and the star decorations. Phone height
   matches the old service_N.png rendered height (369x479 natural, aspect
   preserved for responsive shrink). Width derives from the phone's own
   aspect-ratio, centered via absolute + translateX. */
.service_section .service_blocks .inner_block .img {
  width: 100%;
  max-width: 369px;
  aspect-ratio: 369 / 479;
  margin-left: auto;
  margin-right: auto;
}
.service_section .service_blocks .inner_block .img--phone {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 100%;
  max-width: none;
}
.service_section .service_blocks .inner_block .img--phone img {
  position: absolute;
  top: 2.2%;
  left: 5.1%;
  width: 89.8%;
  height: 95.6%;
  border: 0;
  border-radius: 9% / 4%;
  object-fit: cover;
  object-position: center top;
}

/* ---------- Audio Samples Section (matches template section rhythm) ------ */
.samples_section { background-color: transparent; }

.samples_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 18px;
}

.sample {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--bg-white);
  border-radius: 20px;
  padding: 16px;
  border: 1px solid var(--light-greay);
  transition: box-shadow .25s ease, transform .25s ease;
}
.sample:hover {
  box-shadow: 0 18px 40px -22px rgba(42, 2, 17, 0.28);
  transform: translateY(-2px);
}
.sample.is-playing {
  border-color: var(--primery);
  box-shadow: 0 18px 40px -18px rgba(194, 24, 91, 0.32);
}

.sample__cover {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 14px;
  background: var(--light-greay);
}

.sample__body { min-width: 0; }
.sample__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--dark-black);
  margin: 0 0 4px;
  line-height: 1.2;
}
.sample__blurb {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-greay);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sample__play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--primery);
  color: var(--bg-white);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, background-color .2s ease;
  flex-shrink: 0;
}
.sample__play:hover { transform: scale(1.06); }
.sample__play:focus-visible { outline: 2px solid var(--dark-black); outline-offset: 3px; }
.sample__play i { line-height: 1; }
.sample.is-playing .sample__play { background: var(--dark-black); }

/* Sticky player bar at bottom of the section */
.samples__player {
  position: sticky;
  bottom: 16px;
  margin: 32px auto 0;
  max-width: 560px;
  background: var(--bg-white);
  border: 1px solid var(--light-greay);
  border-radius: 999px;
  padding: 12px 20px;
  box-shadow: 0 18px 40px -22px rgba(42, 2, 17, 0.2);
}
.samples__label {
  font-size: 13px;
  color: var(--text-greay);
  text-align: center;
  margin-bottom: 8px;
}
.samples__track {
  height: 4px;
  background: var(--light-greay);
  border-radius: 999px;
  overflow: hidden;
}
.samples__bar {
  height: 100%;
  width: 0;
  background: var(--primery);
  border-radius: 999px;
  transition: width .1s linear;
}

/* Download CTA inline note */
.download_note {
  margin-top: 18px;
  text-align: center;
  color: var(--bg-white);
  font-size: 14px;
  opacity: .86;
}

/* ---------- Demo video modal -------------------------------------------- */
#demoModal .modal-body { background: var(--dark-black); padding: 0; }
#demoModal .modal-content { background: var(--dark-black); border: none; }
#demoModal #demoVideo { width: 100%; height: auto; display: block; background: #000; }

/* ---------- How it works step icons ------------------------------------- */
.how_it_inner .steps_block .icon .icon_inner {
  width: 54px;
  height: 54px;
  background: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how_it_inner .steps_block .icon .icon_inner i {
  font-size: 28px;
  line-height: 1;
  color: #7a3df7;
}

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sample, .sample__play { transition: none; }
  .samples__bar { transition: none; }
}

/* ---------- Mobile ------------------------------------------------------- */
@media (max-width: 480px) {
  .sample { grid-template-columns: 72px 1fr auto; gap: 12px; padding: 12px; }
  .sample__cover { width: 72px; height: 72px; }
  .sample__title { font-size: 16px; }
  .sample__blurb { font-size: 13px; }
  .sample__play { width: 44px; height: 44px; font-size: 16px; }
}

/* ---------- Contact page: single centered card + "or" divider ----------- */
.contact_listing.contact_listing--single {
  display: flex;
  justify-content: center;
}
.contact_listing.contact_listing--single > li {
  max-width: 360px;
  width: 100%;
}
.contact_or {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 360px;
  margin: 40px auto 0;
  color: #6c7078;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
}
.contact_or::before,
.contact_or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.12);
}

/* ---------- Footer download wordmark ------------------------------------ */
footer .download_side h3 {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.footer_brand_mark {
  height: 0.9em;
  width: auto;
  transform: translateY(0.1em);
}

scarla-logo {
  display: inline-block;
}

/* ---------- Fabulous Apps signature dot --------------------------------- */
.design_by .fab_dot {
  color: #2563eb;
  font-size: 2.4em;
  line-height: 0;
  vertical-align: baseline;
  display: inline-block;
  margin-left: 1px;
}

/* ---------- Legal / privacy page --------------------------------------- */
.legal_section .legal_content {
  max-width: 820px;
  margin: 40px auto 0;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.75;
}
.legal_section .legal_content h3 {
  font-family: 'Cormorant Garamond', 'Manrope', serif;
  font-size: 28px;
  color: #0f172a;
  margin: 40px 0 12px;
  letter-spacing: -0.3px;
}
.legal_section .legal_content h3:first-child {
  margin-top: 0;
}
.legal_section .legal_content p {
  margin: 0 0 16px;
}
.legal_section .legal_content ul {
  list-style: disc outside;
  padding-left: 1.2em;
  margin: 0 0 20px 0.2em;
}
.legal_section .legal_content ul li {
  list-style: disc outside;
  margin-bottom: 8px;
}
.legal_section .legal_content a {
  color: #2563eb;
  text-decoration: underline;
}

/* ---------- Contact form ---------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cf_hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cf-turnstile {
  margin: 0 0 20px;
}
.cf_status {
  min-height: 24px;
  font-size: 14px;
  line-height: 1.4;
  padding: 6px 0;
}
.cf_status--pending { color: rgba(255, 255, 255, 0.75); }
.cf_status--success { color: #9ae6b4; }
.cf_status--error   { color: #feb2b2; }

/* About + FAQ section (homepage) */
.about_faq_inner {
  max-width: 820px;
  margin: 0 auto;
}
.about_faq_inner a {
  color: var(--primery);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq_heading {
  margin-top: 64px;
}

/* ---- Scan-to-download QR: dock + inline cards (EVWEB-24) ---------------
   Ports the house two-tier pattern from the Reverse Audio and Green Card Trips
   landings. Wide desktop (>=1600px) gets the floating dock bottom-left; the
   992-1599px range gets inline cards next to the store buttons instead (the
   dock would overlap content there); phones get no QR at all (pointless to
   scan the device you are holding). The dock's close button hides it for the
   current view only, it returns on reload. */
.qr_dock {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  background: #1a0510;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  box-shadow: 0 18px 44px -16px rgba(26, 5, 16, 0.6);
  animation: qr_dock_in .45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.qr_dock_holder { background: #fff; border-radius: 16px; padding: 12px; line-height: 0; }
.qr_dock_img { width: 120px; height: 120px; display: block; border-radius: 8px; }
.qr_dock_label { color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .2px; text-align: center; }
.qr_dock_close {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: #3d0d24;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  box-shadow: 0 4px 10px -3px rgba(26, 5, 16, 0.6);
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.qr_dock_close:hover { opacity: 1; background: #5a1436; }
.qr_dock_close:active { transform: scale(0.92); }
.qr_dock_close:focus-visible { outline: 2px solid #c2185b; outline-offset: 2px; }
@keyframes qr_dock_in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .qr_dock { animation: none; } }
@media (max-width: 1599px) { .qr_dock { display: none !important; } }

/* Inline cards: 992-1599px only. */
.qr_badge {
  /* Block-level flex, not inline-flex: the hero column is display:block and the
     store badge is an inline-block anchor, so inline-flex would sit the card
     BESIDE the badge instead of under it. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(194, 24, 91, 0.14);
  border-radius: 18px;
  box-shadow: 0 12px 30px -14px rgba(194, 24, 91, 0.38);
}
.qr_badge img { width: 112px; height: 112px; display: block; border-radius: 10px; flex: none; }
.qr_badge_text { display: flex; flex-direction: column; gap: 3px; }
.qr_badge_title { font-weight: 600; font-size: 15px; color: #2a0211; }
.qr_badge_sub { font-size: 13px; color: #6b6580; }
.blog_cta_card .qr_badge { margin-left: auto; margin-right: auto; box-shadow: none; }
@media (max-width: 991px) { .qr_badge { display: none !important; } }
@media (min-width: 1600px) { .qr_badge { display: none !important; } }