:root {
  --orange:      #ff8000;
  --orange-dark: #D94F0D;
  --orange-mid:  #e55c12;
  --orange-lite: #ffa040;
  --charcoal:    #1A1A1A;
  --dark:        #111111;
}

html, body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 16px;
  background-color: #161616;
}

/* Defensive: prevent rogue full-bleed children (oversized images, glow halos
   with negative offsets, AOS transforms, etc.) from causing horizontal scroll
   on narrow mobile viewports. Uses `clip` instead of `hidden` so it does NOT
   create a scroll container and does NOT break `position: sticky/fixed`
   descendants or flex children (unlike `overflow: hidden` on html). */
body {
  overflow-x: clip;
}

/* AOS horizontal slide-ins (fade-left / fade-right / slide-*) translate
   elements ±100px on the X axis BEFORE the scroll observer triggers. On
   mobile this can push columns past the viewport edge and contribute to
   horizontal overflow. Replace the horizontal translate with a small
   vertical one so the animation still reads as "fade in" without ever
   overflowing. !important is required because aos.css is loaded AFTER
   main.css in the Drupal build and has identical selector specificity. */
[data-aos="fade-left"],
[data-aos="fade-right"],
[data-aos="fade-up-left"],
[data-aos="fade-up-right"],
[data-aos="fade-down-left"],
[data-aos="fade-down-right"],
[data-aos="slide-left"],
[data-aos="slide-right"],
[data-aos="zoom-in-left"],
[data-aos="zoom-in-right"],
[data-aos="zoom-out-left"],
[data-aos="zoom-out-right"] {
  transform: translate3d(0, 40px, 0) !important;
}
[data-aos="fade-left"].aos-animate,
[data-aos="fade-right"].aos-animate,
[data-aos="fade-up-left"].aos-animate,
[data-aos="fade-up-right"].aos-animate,
[data-aos="fade-down-left"].aos-animate,
[data-aos="fade-down-right"].aos-animate,
[data-aos="slide-left"].aos-animate,
[data-aos="slide-right"].aos-animate,
[data-aos="zoom-in-left"].aos-animate,
[data-aos="zoom-in-right"].aos-animate,
[data-aos="zoom-out-left"].aos-animate,
[data-aos="zoom-out-right"].aos-animate {
  transform: translate3d(0, 0, 0) !important;
}

/* Bootstrap `.row.g-5` sets --bs-gutter-x: 3rem, which gives the row a
   -24px horizontal margin on each side. The default `.container` only
   provides 12px of horizontal padding on small viewports, so the row
   extends 8-12px past the container on each side and produces a
   horizontal scroll bar on real iPhones (desktop browsers often hide
   this overflow strip but iOS Safari surfaces it). Cap the X gutter at
   the container's default below the lg breakpoint while preserving the
   generous Y gutter for stacked spacing. */
@media (max-width: 991.98px) {
  .row.g-5,
  .row.g-sm-5,
  .row.g-md-5 {
    --bs-gutter-x: 1.5rem;
  }
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover,
a:focus {
  color: inherit;
}

/* Force inherited color + bold on selectors that bring their own default color */
.nav-link,
.media-library-view--widget .view-header a {
  color: inherit;
  font-weight: 700;
}
.nav-link:hover,
.nav-link:focus,
.media-library-view--widget .view-header a:hover,
.media-library-view--widget .view-header a:focus {
  color: inherit;
  text-decoration: none;
}

/* Don't apply the global bold/underline link style inside the footer */
footer a,
.region-footer a,
.site-footer a {
  font-weight: inherit;
  text-decoration: none;
}
footer a:hover,
footer a:focus,
.region-footer a:hover,
.region-footer a:focus,
.site-footer a:hover,
.site-footer a:focus {
  text-decoration: none;
}

/* ── Drupal local task tabs (Bootstrap5 contrib) ─────────────────────────── */
.tabs-wrapper.tabs-primary {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tabs-wrapper.tabs-primary .nav-tabs {
  border-bottom: none;
  gap: 0.25rem;
}
.tabs-wrapper.tabs-primary .nav-tabs .nav-link {
  color: #555;
  font-weight: 500;
  text-decoration: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.6rem 1rem;
  background: transparent;
  transition: color .15s, border-color .15s, background-color .15s;
}
.tabs-wrapper.tabs-primary .nav-tabs .nav-link:hover,
.tabs-wrapper.tabs-primary .nav-tabs .nav-link:focus {
  color: #ff8000;
  background-color: rgba(255,128,0, 0.06);
  border-bottom-color: rgba(255,128,0, 0.4);
  text-decoration: none;
}
.tabs-wrapper.tabs-primary .nav-tabs .nav-link.active,
.tabs-wrapper.tabs-primary .nav-tabs .nav-link.is-active {
  color: #ff8000;
  background-color: transparent;
  border-bottom-color: #ff8000;
  font-weight: 600;
}
.tabs-wrapper.tabs-primary .nav-tabs .nav-item.active .nav-link {
  color: #ff8000;
  border-bottom-color: #ff8000;
}
.tabs-wrapper.tabs-primary .tab-toggle {
  color: #555;
}
@media (prefers-color-scheme: dark) {
  .tabs-wrapper.tabs-primary { border-bottom-color: rgba(255, 255, 255, 0.1); }
  .tabs-wrapper.tabs-primary .nav-tabs .nav-link { color: rgba(232, 232, 232, 0.7); }
  .tabs-wrapper.tabs-primary .nav-tabs .nav-link:hover,
  .tabs-wrapper.tabs-primary .nav-tabs .nav-link:focus {
    color: #ff8a47;
    background-color: rgba(255,128,0, 0.1);
    border-bottom-color: rgba(255,128,0, 0.5);
  }
  .tabs-wrapper.tabs-primary .nav-tabs .nav-link.active,
  .tabs-wrapper.tabs-primary .nav-tabs .nav-link.is-active { color: #ff8a47; border-bottom-color: #ff8000; }
}

/* ── Utilities ───────────────────────────────────────────────────────────── */
.text-orange  { color: var(--orange) !important; }
.bg-charcoal  { background-color: var(--charcoal) !important; }
.bg-orange    { background-color: var(--orange) !important; }
.border-orange{ border-color: var(--orange) !important; }
.tracking-tight { letter-spacing: -0.03em; }

.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* ── Bootstrap overrides ─────────────────────────────────────────────────── */

/* Keep "Read" btn-link styled orange at all interaction states */
.btn-link.text-orange {
  --bs-btn-color:        var(--orange);
  --bs-btn-hover-color:  var(--orange-mid);
  --bs-btn-active-color: var(--orange);
}

.btn-primary {
  --bs-btn-bg: var(--orange);
  --bs-btn-border-color: var(--orange);
  --bs-btn-hover-bg: var(--orange-mid);
  --bs-btn-hover-border-color: var(--orange-mid);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--orange-mid);
  --bs-btn-active-border-color: var(--orange-mid);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 255,128,0;
}
.btn-outline-light:focus,
.btn-outline-light:focus-visible,
.btn-outline-dark:focus,
.btn-outline-dark:focus-visible,
.btn:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(255,128,0, .35) !important;
}

/* Disabled buttons keep the orange brand colour (with reduced opacity)
   so they remain visually consistent with the standard .btn-primary
   instead of falling back to Bootstrap's default grey. */
.btn:disabled,
.btn.disabled,
.btn-primary:disabled,
.btn-primary.disabled,
fieldset:disabled .btn,
fieldset:disabled .btn-primary {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  opacity: .65;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Scroll progress bar ─────────────────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  background: var(--orange);
  z-index: 9999;
  width: 0%;
  transition: width .1s linear;
}

/* ── Navbar ──────────────────────────────────────────────────────────────── */
.site-nav {
  position: relative;
  z-index: 100;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #161616;
}
.site-nav .navbar-brand img { height: 40px; width: auto; }
.site-nav .nav-link {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  padding: 6px 14px;
  border-radius: 6px;
  transition: opacity .15s;
}
.site-nav .nav-link:hover { opacity: .7; }
.site-nav .nav-link.show,
.site-nav .nav-item.show > .nav-link { color: #fff !important; }
.site-nav .btn-login {
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 7px 20px;
  border-radius: 20px;
  text-decoration: none;
  border: none;
  transition: opacity .15s;
}
.site-nav .btn-login:hover { opacity: .85; color: #fff; }

/* ── Account dropdown ────────────────────────────────────────────────────── */
.site-dropdown {
  min-width: 200px;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  padding: 8px;
  margin-top: 8px !important;
}
.site-dropdown .dropdown-item {
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  transition: background .15s, color .15s;
}
.site-dropdown .dropdown-item i {
  font-size: 15px;
  color: #888;
  transition: color .15s;
}
.site-dropdown .dropdown-item:hover {
  background: #fff4ee;
  color: var(--orange);
}
.site-dropdown .dropdown-item:hover i { color: var(--orange); }
.site-dropdown .dropdown-item-signout { color: #c0392b; }
.site-dropdown .dropdown-item-signout i { color: #c0392b; }
.site-dropdown .dropdown-item-signout:hover { background: #fff0ef; color: #a93226; }
.site-dropdown .dropdown-divider { margin: 6px 0; border-color: #f0f0f0; }

/* Mobile: inline dark dropdown — matches the React hamburger menu style */
@media (max-width: 991.98px) {
  .site-dropdown {
    position: static !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0 !important;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 4px;
    width: 100%;
  }
  .site-dropdown .dropdown-item {
    color: rgba(255,255,255,.85);
    border-radius: 6px;
    font-size: 15px;
    padding: 8px 14px;
  }
  .site-dropdown .dropdown-item i { color: rgba(255,255,255,.45); }
  .site-dropdown .dropdown-item:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .site-dropdown .dropdown-item:hover i { color: rgba(255,255,255,.7); }
  .site-dropdown .dropdown-item-signout { color: rgba(255,120,120,.9); }
  .site-dropdown .dropdown-item-signout i { color: rgba(255,120,120,.7); }
  .site-dropdown .dropdown-item-signout:hover { background: rgba(255,100,100,.1); color: #ff8f8f; }
  .site-dropdown .dropdown-divider { border-color: rgba(255,255,255,.1); }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  color: #fff;
  min-height: 85vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .8;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,26,26,.4) 0%, rgba(26,26,26,1) 100%);
  pointer-events: none;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 14px;
  color: #fff;
  margin-bottom: 1.25rem;
}
.hero-section h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.hero-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: rgba(255,255,255,.75);
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

/* ── Review Banner ───────────────────────────────────────────────────────── */
.review-banner { background: var(--dark); padding: 4rem 0; }
.review-banner .quote-mark {
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 1;
  color: var(--orange);
  opacity: .9;
  margin-bottom: -12px;
  display: block;
}
.review-banner blockquote {
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  max-width: 780px;
  margin: 0 auto 1.25rem;
  letter-spacing: -0.01em;
}
.review-banner .source {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--orange);
}

/* ── Review Grid ─────────────────────────────────────────────────────────── */
.review-grid { background: #f8f9fa; padding: 4rem 0; }
.review-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  height: 100%;
  box-shadow: 0 2px 16px rgba(0,0,0,.07);
}
.review-card .star { color: var(--orange); font-size: 13px; }
.review-card .review-title { font-size: 17px; font-weight: 700; }
.review-card .review-body { font-size: 14px; line-height: 1.6; color: #555; }
.review-card .review-author { font-size: 13px; font-weight: 600; color: #555; }
.review-platform { font-size: 12px; font-weight: 600; color: var(--orange); letter-spacing: .04em; }

/* ── CTA gradient ────────────────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(145deg, #D94F0D 0%, #ff8000 55%, #ffa040 100%);
  padding: 5rem 0;
  text-align: center;
}
.cta-section h2 { color: #fff; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800; }
.cta-section .lead { color: rgba(255,255,255,.75); max-width: 520px; margin: 0 auto 2.5rem; }
.btn-frosted {
  background: rgba(0,0,0,.28);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px);
  transition: background .15s;
}
.btn-frosted:hover { background: rgba(0,0,0,.42); color: #fff; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--charcoal); color: #fff; padding: 4rem 0 2rem; }
.site-footer h4, .site-footer h6 { color: var(--orange); font-weight: 700; }
.site-footer a { color: rgba(255,255,255,.65); text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: #fff; }
.footer-social { font-size: 18px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  color: rgba(255,255,255,.4);
  font-size: 14px;
}

/* ── Feature list (free) ─────────────────────────────────────────────────── */
.section-feature-list { background: #F8F9FA; }
.section-feature-list .row > div i,
.pro-section .row > div i { color: var(--orange); font-size: 22px; }
.section-feature-list .row > div p,
.pro-section .row > div p { font-size: 16px; line-height: 1.55; }
.feature-badge-new { background: var(--orange); font-size: 10px; }

/* ── Pro section ─────────────────────────────────────────────────────────── */
.pro-section { background: var(--charcoal); }
.pro-section h2 { color: var(--orange); }
.pro-section .lead { color: rgba(255,255,255,.55); }
.pro-section .pricing-secondary { color: rgba(255,255,255,.4); }
.pro-section .row > div p { color: rgba(255,255,255,.5); }
.pro-section .btn-pro { background: var(--orange); color: #fff; }
.pro-section .pro-footnote { color: rgba(255,255,255,.35); font-size: 13px; }
.pro-feature .icon { color: var(--orange); flex-shrink: 0; margin-top: 2px; }

/* ── Blog ────────────────────────────────────────────────────────────────── */
.blog-hero {
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  padding-top: 100px;
}
.article-body p {
  font-size: 17px;
  line-height: 1.8;
  color: #222;
  margin-bottom: 1.6rem;
}

/* ── Dark Mode (prefers-color-scheme: dark) ──────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }

  html, body { background-color: #111111 !important; color: #e8e8e8; }

  /* Bootstrap utility overrides */
  .bg-white  { background-color: #1c1c1c !important; }
  .bg-light  { background-color: #222222 !important; }
  .text-dark { color: #e8e8e8 !important; }
  .text-muted, .text-secondary { color: rgba(232,232,232,.55) !important; }

  /* Bootstrap cards */
  .card { background-color: #1c1c1c; border-color: rgba(255,255,255,.08); color: #e8e8e8; }
  .card-body { background-color: #1c1c1c; }

  /* Bootstrap borders */
  .border-bottom { border-color: rgba(255,255,255,.1) !important; }
  .border, .border-1 { border-color: rgba(255,255,255,.1) !important; }

  /* Bootstrap form controls */
  .form-control { background-color: #1e1e1e; border-color: rgba(255,255,255,.12); color: #e8e8e8; }
  .form-control:focus { background-color: #252525; color: #e8e8e8; border-color: var(--orange); box-shadow: 0 0 0 .25rem rgba(255,128,0,.15); }
  .form-control::placeholder { color: rgba(232,232,232,.35); }

  /* Bootstrap table */
  .table { color: #e8e8e8; }
  .table > :not(caption) > * { border-color: rgba(255,255,255,.08); }
  .table > :not(caption) > * > * { background-color: transparent; }
  .table-hover > tbody > tr:hover > * { background-color: rgba(255,255,255,.04); }

  /* Bootstrap badge with bg-light / bg-dark */
  .badge.bg-light { background-color: rgba(255,255,255,.12) !important; color: #e8e8e8 !important; }
  .badge.bg-dark  { background-color: rgba(255,255,255,.14) !important; color: #e8e8e8 !important; border: 1px solid rgba(255,255,255,.12); }

  /* Bootstrap pagination */
  .page-link { background-color: #1c1c1c; border-color: rgba(255,255,255,.1); color: #e8e8e8; }
  .page-item.disabled .page-link { background-color: #1c1c1c; color: rgba(232,232,232,.35); }
  .page-item.active .page-link { background-color: #1A1A1A; border-color: var(--orange); color: #e8e8e8; }
  .page-link:hover { background-color: #2a2a2a; color: #fff; }

  /* Bootstrap outline-dark button in dark mode */
  .btn-outline-dark { border-color: rgba(255,255,255,.25); color: #e8e8e8; }
  .btn-outline-dark:hover { background-color: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }

  /* Review grid section */
  .review-grid { background: #141414; }

  /* Tech specs table — light th color in dark mode */
  .section-tech-specs .table > :not(caption) > * > th { color: #e8e8e8 !important; }
  .section-tech-specs .card { border-color: rgba(255,255,255,.1) !important; }
  .review-card { background: #1c1c1c; }
  .review-card .review-title { color: #e8e8e8; }
  .review-card .review-body { color: rgba(232,232,232,.6); }
  .review-card .review-author { color: rgba(232,232,232,.45); }

  /* Account dropdown desktop panel */
  .site-dropdown {
    background: #1e1e1e;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
  }
  .site-dropdown .dropdown-item { color: rgba(232,232,232,.85); }
  .site-dropdown .dropdown-item i { color: rgba(232,232,232,.4); }
  .site-dropdown .dropdown-item:hover { background: rgba(255,255,255,.07); color: #fff; }
  .site-dropdown .dropdown-item:hover i { color: rgba(255,255,255,.65); }
  .site-dropdown .dropdown-item-signout { color: #ff8080; }
  .site-dropdown .dropdown-item-signout i { color: #ff8080; }
  .site-dropdown .dropdown-item-signout:hover { background: rgba(255,100,100,.1); }
  .site-dropdown .dropdown-divider { border-color: rgba(255,255,255,.08); }

  /* Article body text */
  .article-body p { color: rgba(232,232,232,.8) !important; }

  /* Blog post tag badges */
  .blog-tag { background: rgba(255,255,255,.1) !important; color: rgba(232,232,232,.8) !important; }

  /* "More from the blog" section */
  .more-posts-section { background: #181818 !important; }

  /* Blog post card titles and category labels */
  .blog-card-title { color: #e8e8e8 !important; }
  .blog-card-cat   { background: rgba(255,255,255,.1) !important; color: rgba(232,232,232,.6) !important; }

  /* Free features section — match tech specs bg-light tone (#222) not Pro (#1A1A1A) */
  .section-feature-list { background: #222222 !important; }

  /* Mid-hero device screenshot section */
  .mid-hero-section { background: #111111 !important; }

  /* Pro section — already dark, but ensure bg-white/bg-light descendants don't break it */
  .pro-section .bg-white,
  .pro-section .bg-light { background-color: transparent !important; }

  /* Hover lift shadow — more visible on dark */
  .hover-lift:hover { box-shadow: 0 10px 28px rgba(0,0,0,.45); }

  /* Shadow utilities — soften on dark */
  .shadow-sm { box-shadow: 0 2px 8px rgba(0,0,0,.4) !important; }
  .shadow-lg { box-shadow: 0 10px 40px rgba(0,0,0,.5) !important; }

  /* Release notes — preserve rounded corners and fix bullet color */
  .release-entry {
    background-color: #1c1c1c !important;
    border-color: rgba(255,255,255,.1) !important;
    border-radius: 1rem !important;
    overflow: hidden;
  }
  .release-entry .release-list li,
  .release-entry .release-list li::marker { color: rgba(232,232,232,.85) !important; }
}

/* Bullet markers inherit list-item color in light mode too */
.release-list li::marker { color: currentColor; }

/* ── Page wrapper ────────────────────────────────────────────────────────── */
.page-wrapper { background-color: #ffffff; }

/* ── Bento grid (homepage) ───────────────────────────────────────────────── */
.bento-card-dark { background: #1D1D1F; min-height: 280px; border: 1px solid rgba(255,255,255,.06); }
.bento-card-orange-grad { background: linear-gradient(145deg, #D94F0D 0%, #ff8000 55%, #ffa040 100%); min-height: 280px; }
.bento-card-stat,
.bento-card-feature { min-height: 180px; }
.bento-icon { font-size: 2.2rem; }
.bento-icon-light { color: #fff; opacity: .9; font-size: 2.2rem; }
.bento-card-desc { color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.65; }
.bento-card-desc-light { opacity: .85; font-size: 16px; line-height: 1.65; }
.bento-feature-desc { font-size: 16px; line-height: 1.65; }
.bento-stat-num { font-size: clamp(3rem, 5vw, 4rem); line-height: 1; }
.format-badge { background: rgba(255,255,255,.09); color: rgba(255,255,255,.7); font-size: 12px; }

/* ── Hero (homepage) ─────────────────────────────────────────────────────── */
.hero-bg-collage { background-image: url('../images/hero-collage.png'); }
.app-icon-hero { width: 120px; height: 120px; border-radius: 26px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }

/* ── Mid hero ────────────────────────────────────────────────────────────── */
.mid-hero-img { max-width: 860px; width: 100%; height: auto; }

/* ── Releases page ───────────────────────────────────────────────────────── */
.bg-orange-soft { background-color: rgba(255,128,0, 0.1); }
.release-version { font-size: 1.75rem; letter-spacing: -0.01em; }
.release-entry { border: 1px solid rgba(0,0,0,.08) !important; }
.release-list { padding-left: 1.25rem; margin: 0; list-style: disc outside; }
.release-list li {
  display: list-item;
  padding: 4px 0;
  color: #4a4a4a;
  line-height: 1.55;
}

/* ── Product page ────────────────────────────────────────────────────────── */
.section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.feature-img-bordered { border: 1px solid rgba(0,0,0,.07); }
.section-tech-specs th { color: #1D1D1F; }
.section-tech-specs .card { border: 1px solid rgba(0,0,0,.08) !important; }
.app-store-tagline { font-size: 11px; opacity: .7; line-height: 1; }

/* ── Blog list page ──────────────────────────────────────────────────────── */
/* Card thumbnail container — fluid aspect-ratio so real images crop-fill
   cleanly at every column width (no gap below, no overflow into card body). */
.blog-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;        /* matches typical 1590×994 screenshots (~1.6:1) */
  overflow: hidden;
  background: #1A1A1A;          /* fallback color while image loads */
}
.blog-card-thumb > .field,
.blog-card-thumb > a,
.blog-card-thumb > .field > .field__item,
.blog-card-thumb .field--name-field-image,
.blog-card-thumb .field--name-field-image > a {
  display: block;
  width: 100%;
  height: 100%;
}
.blog-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.blog-card-thumb--dark     { background: linear-gradient(135deg,#1A1A1A,#4A4A4A); }
.blog-card-thumb--orange   { background: linear-gradient(135deg,#ff8000,#ffa040); }
.blog-card-thumb--midnight { background: linear-gradient(135deg,#2C3E50,#000000); }
.blog-card-thumb--charcoal { background: linear-gradient(135deg,#1A1A1A,#3a3a3a); }
.blog-card-thumb--sunset   { background: linear-gradient(135deg,#e65c00,#F9D423); }
.page-link-active { background: var(--orange); }

/* ── Blog post page ──────────────────────────────────────────────────────── */
.blog-post-hero {
  background: linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,.75) 100%), url('../images/blog-thumb.png') center/cover no-repeat;
  min-height: 360px;
  display: flex;
  align-items: flex-end;
  padding-top: 40px;
}
.badge-orange { background: var(--orange); }
.blog-post-title { font-size: clamp(1.8rem,3.5vw,2.8rem); max-width: 800px; line-height: 1.2; }
.author-avatar { width: 44px; height: 44px; background: var(--orange); font-size: 16px; }
.author-name { font-size: 16px; }
.blog-tag-light { background: #F3F3F3; color: #444; font-weight: 500; }

/* ── More posts cards ────────────────────────────────────────────────────── */
.more-posts-bg { background: #F7F7F7; }
.more-post-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1A1A1A;
}
.more-post-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.more-post-thumb--dark     { background: linear-gradient(135deg,#1A1A1A,#4A4A4A); }
.more-post-thumb--orange   { background: linear-gradient(135deg,#ff8000,#ffa040); }
.more-post-thumb--midnight { background: linear-gradient(135deg,#2C3E50,#000000); }
.blog-card-cat-tag { background: #F0F0F0; color: #555; font-size: 11px; }
.blog-card-h-title { font-size: 16px; color: #1A1A1A; }
.blog-card-date { font-size: 13px; }
.page-wrapper-light { background-color: #f8f9fa; }
.blog-featured-thumb { height: 300px; background-image: url("../images/blog-thumb.png"); background-size: cover; background-position: center; }

/* ── 404 page ─────────────────────────────────────────────────────────── */
.not-found-section {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  color: #fff;
  padding: 5rem 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,128,0,.18), transparent 55%),
    linear-gradient(180deg, #1A1A1A 0%, #111111 100%);
}
.not-found-code {
  font-size: clamp(7rem, 18vw, 12rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, #ffa040 0%, #ff8000 45%, #b85a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}
.not-found-title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.not-found-lead {
  color: rgba(255,255,255,0.7);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 2.5rem;
}
.not-found-links a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
}
.not-found-links a:hover { color: #fff; }

/* ── Product hero (centered) ──────────────────────────────────────────── */
.product-hero-centered .app-store-btn { border-radius: 14px; }
.product-hero-image-wrap { position: relative; }
.product-hero-glow {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  width: 85%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(255,128,0,0.28) 0%, rgba(255,128,0,0.08) 40%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

/* ── App Store badge (light/dark swap) ───────────────────────────────── */
.appstore-badge { height: 56px; width: auto; display: inline-block; }
.appstore-badge-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .appstore-badge-light { display: none; }
  .appstore-badge-dark { display: inline-block; }
}

/* ── Feature list icon alignment ─────────────────────────────────────── */
/* Targets BOTH plain <i class="fa-…"> (CSS FA) and the auto-replaced <svg class="svg-inline--fa …"> (FA JS, used on Drupal) */
.section-feature-list .d-flex.gap-3.align-items-start > i.flex-shrink-0,
.section-feature-list .d-flex.gap-3.align-items-start > svg.svg-inline--fa.flex-shrink-0,
.pro-section .d-flex.gap-3.align-items-start > i.flex-shrink-0,
.pro-section .d-flex.gap-3.align-items-start > svg.svg-inline--fa.flex-shrink-0 {
  width: 1.75rem !important;
  height: 1.75rem !important;
  flex: 0 0 1.75rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-top: 0 !important;
  color: #ff8000;
  line-height: 1;
  vertical-align: middle;
}
/* FA-SVG sets its own width via inline style; force it back */
.section-feature-list .d-flex.gap-3.align-items-start > svg.svg-inline--fa.flex-shrink-0 path,
.pro-section .d-flex.gap-3.align-items-start > svg.svg-inline--fa.flex-shrink-0 path {
  fill: currentColor;
}
.section-feature-list .d-flex.gap-3.align-items-start h5,
.pro-section .d-flex.gap-3.align-items-start h5 {
  line-height: 1.4;
  min-height: 1.75rem;
}

/* ── Hero CTA buttons: prevent stretched-full-width on mobile ──────────── */
/* Bootstrap's flex-column container uses align-items: stretch by default,
   which makes the pill buttons span the entire column on phones. Force
   center alignment so each button sizes to its own content. */
.hero-section .d-flex.flex-column.flex-sm-row {
  align-items: center;
}

/* Drupal's bootstrap5 base theme adds default left/right margins to .btn
   elements (spacing between inline buttons) and only zeroes the OUTSIDE
   edges via :first-child/:last-child — leaving inner-edge margins that
   shift our pills off-center inside the flex container. Reset them. */
.hero-section .d-flex .btn,
.cta-section .d-flex .btn,
.hero-section .btn,
.cta-section .btn {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Feature-showcase sections (Product page) ──────────────────────────────
   On Drupal, .region-content adds 0.5rem of horizontal padding to its
   children. Pull the showcase sections back out with matching negative
   margin so they reach the viewport edge. */
.region-content .feature-showcase {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

/* ── Drupal user account pages (login / register / password reset) ─────────
   Targets Drupal's body.page-route-user-{login,register,pass} so the
   actual rendered forms match our branded design without template edits. */
body.page-route-user-login,
body.page-route-user-register,
body.page-route-user-pass {
  background-color: #0f0f10;
  color: #e8e8e8;
}
body.page-route-user-login main[role="main"],
body.page-route-user-register main[role="main"],
body.page-route-user-pass main[role="main"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}
/* Card wrapping the page-title + form — height hugs its content */
body.page-route-user-login .region-content,
body.page-route-user-register .region-content,
body.page-route-user-pass .region-content {
  max-width: 460px;
  margin: 0 auto;
  background: #1a1a1c;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 80px rgba(255,128,0,.08);
}
/* Page title — override Bootstrap's display-4/text-dark/pt-5 utilities */
body.page-route-user-login .region-content h1,
body.page-route-user-register .region-content h1,
body.page-route-user-pass .region-content h1 {
  text-align: center;
  margin: 0 0 1.5rem !important;
  padding: 0 !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}
/* Reorder the three blocks inside the card: title → form → tab links */
body.page-route-user-login .region-content,
body.page-route-user-register .region-content,
body.page-route-user-pass .region-content {
  display: flex;
  flex-direction: column;
}
body.page-route-user-login #block-main-page-title,
body.page-route-user-register #block-main-page-title,
body.page-route-user-pass #block-main-page-title { order: 1; }
body.page-route-user-login #block-main-content,
body.page-route-user-register #block-main-content,
body.page-route-user-pass #block-main-content { order: 2; }
body.page-route-user-login #block-main-local-tasks,
body.page-route-user-register #block-main-local-tasks,
body.page-route-user-pass #block-main-local-tasks {
  order: 3;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}
/* Reset Drupal/Bootstrap5 tabs chrome and disable the mobile-collapse
   behavior that hides links on narrow viewports */
body.page-route-user-login .region-content .tabs,
body.page-route-user-register .region-content .tabs,
body.page-route-user-pass .region-content .tabs,
body.page-route-user-login .region-content .tabs-wrapper,
body.page-route-user-register .region-content .tabs-wrapper,
body.page-route-user-pass .region-content .tabs-wrapper {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
/* Restyle the relocated tabs as a subtle text-link row.
   Use block + text-align:center (not flex) so a hidden sibling can't
   throw off centering, and so the layout is bullet-proof at all widths. */
body.page-route-user-login .region-content .nav-tabs,
body.page-route-user-register .region-content .nav-tabs,
body.page-route-user-pass .region-content .nav-tabs {
  display: block !important;
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
/* Always show link items inline regardless of collapsible JS state */
body.page-route-user-login .region-content .nav-tabs .nav-item:not(.active),
body.page-route-user-register .region-content .nav-tabs .nav-item:not(.active),
body.page-route-user-pass .region-content .nav-tabs .nav-item:not(.active) {
  display: inline !important;
}
body.page-route-user-login .region-content .nav-tabs .nav-link,
body.page-route-user-register .region-content .nav-tabs .nav-link,
body.page-route-user-pass .region-content .nav-tabs .nav-link {
  display: inline;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: .9rem;
  font-weight: 500;
  color: rgba(232,232,232,.6);
  border-radius: 0;
  white-space: nowrap;
}
body.page-route-user-login .region-content .nav-tabs .nav-link:hover,
body.page-route-user-register .region-content .nav-tabs .nav-link:hover,
body.page-route-user-pass .region-content .nav-tabs .nav-link:hover {
  color: var(--orange);
  border: 0;
  background: transparent;
}
/* Hide the active/current tab — user is already on this page */
body.page-route-user-login .region-content .nav-tabs .nav-item.active,
body.page-route-user-register .region-content .nav-tabs .nav-item.active,
body.page-route-user-pass .region-content .nav-tabs .nav-item.active {
  display: none;
}
/* Hide "Create new account" link on the reset-password page */
body.page-route-user-pass .region-content .nav-tabs .nav-item:has(a[href*="/user/register"]) {
  display: none !important;
}
/* Hide "Reset your password" link on the create-account page */
body.page-route-user-register .region-content .nav-tabs .nav-item:has(a[href*="/user/password"]) {
  display: none !important;
}
/* Bullet (·) separator between two visible links (inline flow) */
body.page-route-user-login .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active),
body.page-route-user-register .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active),
body.page-route-user-pass .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active) {
  /* spacing handled by inline ::before below */
}
body.page-route-user-login .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active)::before,
body.page-route-user-register .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active)::before,
body.page-route-user-pass .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active)::before {
  content: "·";
  margin: 0 .65rem;
  color: rgba(232,232,232,.4);
  font-size: 1.1rem;
  pointer-events: none;
}
/* On narrow screens, stack the two visible links vertically (no bullet) */
@media (max-width: 480px) {
  body.page-route-user-login .region-content .nav-tabs .nav-item:not(.active),
  body.page-route-user-register .region-content .nav-tabs .nav-item:not(.active),
  body.page-route-user-pass .region-content .nav-tabs .nav-item:not(.active) {
    display: block !important;
    margin: .5rem 0;
  }
  body.page-route-user-login .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active)::before,
  body.page-route-user-register .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active)::before,
  body.page-route-user-pass .region-content .nav-tabs .nav-item:not(.active) + .nav-item:not(.active)::before {
    display: none;
  }
}
/* Hide the mobile tab-toggle dropdown caret */
body.page-route-user-login .region-content .nav-tabs .tab-toggle,
body.page-route-user-register .region-content .nav-tabs .tab-toggle,
body.page-route-user-pass .region-content .nav-tabs .tab-toggle {
  display: none;
}
/* Labels */
body.page-route-user-login .region-content .form-item label,
body.page-route-user-register .region-content .form-item label,
body.page-route-user-pass .region-content .form-item label {
  color: #e8e8e8;
  font-weight: 500;
  margin-bottom: .35rem;
}
/* Required asterisk */
body.page-route-user-login .region-content .form-required::after,
body.page-route-user-register .region-content .form-required::after,
body.page-route-user-pass .region-content .form-required::after {
  background-image: none;
  content: "*";
  color: var(--orange);
  margin-left: .25rem;
}
/* Inputs */
body.page-route-user-login .region-content .form-control,
body.page-route-user-register .region-content .form-control,
body.page-route-user-pass .region-content .form-control {
  background-color: #0f0f10;
  border: 1px solid rgba(255,255,255,.12);
  color: #e8e8e8;
  border-radius: 10px;
  padding: .75rem 1rem;
}
body.page-route-user-login .region-content .form-control:focus,
body.page-route-user-register .region-content .form-control:focus,
body.page-route-user-pass .region-content .form-control:focus {
  background-color: #0f0f10;
  border-color: var(--orange);
  color: #e8e8e8;
  box-shadow: 0 0 0 .25rem rgba(255,128,0,.18);
}
body.page-route-user-login .region-content .form-control::placeholder,
body.page-route-user-register .region-content .form-control::placeholder,
body.page-route-user-pass .region-content .form-control::placeholder {
  color: rgba(232,232,232,.35);
}
/* Field description / help text */
body.page-route-user-login .region-content .description,
body.page-route-user-register .region-content .description,
body.page-route-user-pass .region-content .description {
  color: rgba(232,232,232,.55);
  font-size: .875rem;
  margin-top: .35rem;
}
/* Submit button — force orange pill regardless of btn-secondary/btn-primary */
body.page-route-user-login .region-content .form-actions .btn,
body.page-route-user-register .region-content .form-actions .btn,
body.page-route-user-pass .region-content .form-actions .btn {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  border-radius: 50rem;
  padding: .85rem 1.5rem;
  font-weight: 600;
  width: 100%;
  margin-top: 1rem;
}
body.page-route-user-login .region-content .form-actions .btn:hover,
body.page-route-user-register .region-content .form-actions .btn:hover,
body.page-route-user-pass .region-content .form-actions .btn:hover,
body.page-route-user-login .region-content .form-actions .btn:focus,
body.page-route-user-register .region-content .form-actions .btn:focus,
body.page-route-user-pass .region-content .form-actions .btn:focus {
  background-color: var(--orange-mid) !important;
  border-color: var(--orange-mid) !important;
  box-shadow: 0 0 0 .25rem rgba(255,128,0,.25);
}
/* Status / error messages inside the card */
body.page-route-user-login .region-content .messages,
body.page-route-user-register .region-content .messages,
body.page-route-user-pass .region-content .messages {
  border-radius: 10px;
  margin-bottom: 1rem;
}
/* Hide the secondary "user picture" upload field on register — it's noise
   for our streamlined sign-up. Comment out if you want it visible. */
body.page-route-user-register .region-content .form-item-user-picture-0 {
  display: none;
}

/* ── Static-HTML user account pages (login / register / password reset) ─── */
.user-form-page {
  background-color: #0f0f10;
  color: #e8e8e8;
  min-height: 100vh;
}
.user-form-page .site-nav .nav-link {
  color: rgba(255,255,255,.85);
}
.user-form-section {
  position: relative;
  overflow: hidden;
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.user-form-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(255,128,0,0.22) 0%, rgba(255,128,0,0.06) 40%, transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.user-form-section > .container { position: relative; z-index: 1; }
.user-form-card {
  background: #1a1a1c;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
@media (min-width: 576px) {
  .user-form-card { padding: 2.5rem 2.5rem; }
}
.user-form-card .form-label {
  color: #d8d8d8;
  font-weight: 500;
  font-size: .95rem;
  margin-bottom: .35rem;
}
.user-form-card .form-control {
  background-color: #0f0f10;
  border-color: rgba(255,255,255,.12);
  color: #e8e8e8;
  border-radius: 10px;
}
.user-form-card .form-control:focus {
  background-color: #141416;
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 0 0 .25rem rgba(255,128,0,.18);
}
.user-form-card .form-control::placeholder { color: rgba(232,232,232,.35); }
.user-form-card .form-text { color: rgba(232,232,232,.55); }
.user-form-card .btn-primary { border-radius: 50rem; padding: .85rem 1.5rem; font-weight: 600; }
.user-form-footer {
  color: rgba(232,232,232,.7);
  font-size: .95rem;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 1.25rem;
}
.user-form-card a.text-orange { color: var(--orange) !important; }
.user-form-card a.text-orange:hover { color: var(--orange-lite) !important; }

/* Drupal-rendered status / error messages inside the card */
.user-form-card .messages,
.user-form-card .form-item--error-message {
  border-radius: 10px;
  font-size: .9rem;
}
.user-form-card .form-item--error-message {
  color: #ff8e6a;
  margin-top: .35rem;
}
.user-form-card .messages--error {
  background: rgba(220, 53, 69, 0.12);
  border: 1px solid rgba(220, 53, 69, 0.35);
  color: #ff8e6a;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.user-form-card .messages--status {
  background: rgba(40, 167, 69, 0.12);
  border: 1px solid rgba(40, 167, 69, 0.35);
  color: #6ee7a3;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}

/* ── Contact form (Drupal /contact page) ─────────────────────────────────── */
/* Structural styling — applies in BOTH light and dark mode:
   rounded inputs, label spacing, field spacing, and an orange pill submit. */
body.path-contact .region-content .form-item,
body.path-contact .region-content .form-wrapper {
  margin-bottom: 1.25rem;
}
body.path-contact .region-content label {
  font-weight: 500;
  font-size: .95rem;
  margin-bottom: .4rem;
  display: inline-block;
}
body.path-contact .region-content .form-required::after {
  background-image: none;
  content: "*";
  color: var(--orange);
  margin-left: .25rem;
}
body.path-contact .region-content .form-control,
body.path-contact .region-content .form-text,
body.path-contact .region-content .form-email,
body.path-contact .region-content .form-textarea {
  border-radius: 10px;
  padding: .75rem 1rem;
}
body.path-contact .region-content .form-control:focus,
body.path-contact .region-content .form-text:focus,
body.path-contact .region-content .form-email:focus,
body.path-contact .region-content .form-textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 .25rem rgba(255,128,0,.18);
  outline: 0;
}
body.path-contact .region-content .description {
  font-size: .875rem;
  margin-top: .35rem;
  opacity: .75;
}
/* Submit button — orange pill matching the login form (works in both modes) */
body.path-contact .region-content .form-actions {
  margin-top: 1.5rem;
}
body.path-contact .region-content .form-actions .btn,
body.path-contact .region-content .form-actions input[type="submit"] {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  border-radius: 50rem;
  padding: .85rem 2.5rem;
  font-weight: 600;
}
body.path-contact .region-content .form-actions .btn:hover,
body.path-contact .region-content .form-actions input[type="submit"]:hover,
body.path-contact .region-content .form-actions .btn:focus,
body.path-contact .region-content .form-actions input[type="submit"]:focus {
  background-color: var(--orange-mid) !important;
  border-color: var(--orange-mid) !important;
  box-shadow: 0 0 0 .25rem rgba(255,128,0,.25);
}

/* Dark-mode-only colors for the contact form */
@media (prefers-color-scheme: dark) {
  body.path-contact .region-content label {
    color: #d8d8d8;
  }
  body.path-contact .region-content .form-control,
  body.path-contact .region-content .form-text,
  body.path-contact .region-content .form-email,
  body.path-contact .region-content .form-textarea {
    background-color: #0f0f10;
    border: 1px solid rgba(255,255,255,.12);
    color: #e8e8e8;
  }
  body.path-contact .region-content .form-control:focus,
  body.path-contact .region-content .form-text:focus,
  body.path-contact .region-content .form-email:focus,
  body.path-contact .region-content .form-textarea:focus {
    background-color: #0f0f10;
    color: #e8e8e8;
  }
  body.path-contact .region-content .form-control::placeholder,
  body.path-contact .region-content .form-textarea::placeholder {
    color: rgba(232,232,232,.35);
  }
  body.path-contact .region-content .description {
    color: rgba(232,232,232,.55);
    opacity: 1;
  }
}