/*!
 * Hapvey — brand & UI layer
 * Loaded AFTER css/styles.css. All site-specific design lives here so the
 * compiled Bootstrap/New Age bundle stays untouched.
 *
 * Design language: Apple-style — large, tightly tracked type; generous white
 * space; alternating full-bleed white / #f5f5f7 panels; almost no borders,
 * shadows or gradients; one restrained accent colour.
 */

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
  /* Neutrals (Apple's greyscale) */
  --hv-ink:        #1d1d1f;   /* primary text */
  --hv-body:       #1d1d1f;
  --hv-muted:      #6e6e73;   /* secondary text */
  --hv-hairline:   #d2d2d7;
  --hv-white:      #ffffff;
  --hv-grey:       #f5f5f7;   /* the Apple panel grey */
  --hv-black:      #000000;

  /* Accent — Hapvey indigo, used the way Apple uses its blue */
  --hv-accent:     #2937f0;
  --hv-accent-dim: #1f2ac2;
  --hv-accent-lift:#4c5bf5;

  --hv-radius:     18px;
  --hv-radius-lg:  28px;
  --hv-ease:       cubic-bezier(.28, .11, .32, 1);

  --hv-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
             'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ============================================================
   2. Base typography
   ============================================================ */
body {
  font-family: var(--hv-font);
  background-color: var(--hv-white);
  color: var(--hv-ink);
  font-size: 17px;
  line-height: 1.4706;
  letter-spacing: -.022em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--hv-font);
  color: var(--hv-ink);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}

/* Hero headline — Apple's oversized, tightly tracked display type */
.hv-display {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin-bottom: .35em;
}

/* Section headline */
.hv-h2 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.08;
}

/* Tile headline */
.hv-h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.hv-lead {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  line-height: 1.4;
  letter-spacing: -.012em;
  color: var(--hv-ink);
  font-weight: 400;
}

.hv-sub {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--hv-muted);
}

.hv-muted { color: var(--hv-muted) !important; }
.hv-tight { max-width: 44rem; margin-inline: auto; }

/* Coloured eyebrow above a headline — Apple uses plain coloured text, no pill */
.hv-eyebrow {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--hv-accent);
  margin-bottom: .5rem;
}
.hv-eyebrow i { display: none; }   /* icons are not part of this idiom */

/* ============================================================
   3. Layout — full-bleed alternating panels
   ============================================================ */
.hv-section { padding: clamp(4.5rem, 8.5vw, 7.5rem) 0; }
.hv-section--tight { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.hv-section--flush { padding-bottom: 0; }

.hv-grey   { background-color: var(--hv-grey); }
.hv-surface-2 { background-color: var(--hv-grey); }   /* legacy alias */
.hv-dark   { background-color: var(--hv-black); color: #f5f5f7; }
.hv-dark h1, .hv-dark h2, .hv-dark h3, .hv-dark .hv-lead { color: #f5f5f7; }
.hv-dark .hv-sub { color: #a1a1a6; }

.hv-container { max-width: 1024px; margin-inline: auto; padding-inline: 22px; }
.hv-container--wide { max-width: 1180px; }

.hv-section-head { text-align: center; max-width: 46rem; margin-inline: auto; }
.hv-section-head--center { text-align: center; margin-inline: auto; }

/* ============================================================
   4. Buttons & links
   ============================================================ */
.hv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-family: var(--hv-font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.2;
  padding: 12px 22px;
  border-radius: 980px;          /* Apple's fully-round pill */
  border: 1px solid transparent;
  background: var(--hv-accent);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s var(--hv-ease), color .18s var(--hv-ease),
              border-color .18s var(--hv-ease), opacity .18s var(--hv-ease);
}
.hv-btn:hover { background: var(--hv-accent-lift); color: #fff; }
.hv-btn:focus-visible { outline: 4px solid rgba(41, 55, 240, .35); outline-offset: 2px; }

.hv-btn--primary { background: var(--hv-accent); color: #fff; }
.hv-btn--primary:hover { background: var(--hv-accent-lift); }

/* Secondary = outlined pill, Apple's "Learn more" button */
.hv-btn--ghost {
  background: transparent;
  color: var(--hv-accent);
  border-color: var(--hv-accent);
}
.hv-btn--ghost:hover { background: var(--hv-accent); color: #fff; }

.hv-btn--light { background: #fff; color: var(--hv-ink); }
.hv-btn--light:hover { background: #fff; opacity: .88; color: var(--hv-ink); }

.hv-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.hv-btn--outline-light:hover { background: #fff; color: var(--hv-ink); }

.hv-btn--sm { font-size: 14px; padding: 8px 16px; }

/* Chevron text link — the workhorse of Apple's pages */
.hv-link {
  display: inline-flex;
  align-items: baseline;
  gap: .18rem;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -.022em;
  color: var(--hv-accent);
  text-decoration: none;
}
.hv-link:hover { color: var(--hv-accent-lift); text-decoration: underline; }
.hv-link::after { content: "\203A"; font-size: 1.15em; line-height: 1; }
.hv-link i { display: none; }
.hv-dark .hv-link { color: #2997ff; }

.hv-links { display: flex; flex-wrap: wrap; gap: 1.75rem; justify-content: center; }

/* ============================================================
   5. Navigation — 44px translucent bar, 12px links
   ============================================================ */
#mainNav {
  background-color: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  box-shadow: none !important;
  padding: 0;
  min-height: 44px;
  transition: background-color .3s var(--hv-ease);
}
#mainNav.hv-nav-scrolled {
  background-color: rgba(255, 255, 255, .82);
  box-shadow: none !important;
}
#mainNav > .container { min-height: 44px; }

.hv-brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--hv-ink) !important;
  padding: 0;
}
.hv-brand img { width: 22px; height: 22px; border-radius: 5px; }

#mainNav .navbar-nav .nav-link {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--hv-ink) !important;
  opacity: .88;
  padding: .5rem .8rem !important;
  border-radius: 0;
  background: none !important;
  transition: opacity .18s var(--hv-ease);
}
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link.active { opacity: 1; color: var(--hv-ink) !important; }

#mainNav .navbar-toggler {
  border: 0;
  border-radius: 0;
  padding: .4rem .5rem;
  font-size: 12px;
  font-weight: 400;
  color: var(--hv-ink);
  box-shadow: none !important;
}

@media (max-width: 991.98px) {
  #mainNav .navbar-collapse {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(20px);
    margin-top: .5rem;
    padding: .5rem 0 1rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-radius: 0;
    box-shadow: none;
  }
  #mainNav .navbar-nav .nav-link {
    font-size: 1.25rem;
    font-weight: 600;
    padding: .55rem .25rem !important;
  }
}

/* ============================================================
   6. Hero — centred headline, product below
   ============================================================ */
.hv-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(5.5rem, 9vw, 7.5rem) 0 clamp(3rem, 5vw, 4.5rem);
  background: var(--hv-white);
}
.hv-hero::after { content: none; }        /* no decorative grid in this idiom */

.hv-hero-badge {
  display: inline-block;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--hv-accent);
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: .75rem;
  box-shadow: none;
}
.hv-hero-badge b {
  background: none;
  color: inherit;
  font-weight: 600;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
  padding: 0;
  border-radius: 0;
}

/* Device */
.hv-phone-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  max-width: 100%;
  margin-inline: auto;
  padding: 0;
}
.hv-phone-stage::before { content: none; }   /* no gradient glow */

.hv-phone {
  position: relative;
  z-index: 1;
  width: min(268px, 62vw);
  aspect-ratio: 9 / 19.5;
  background: #1d1d1f;
  border-radius: 42px;
  padding: 9px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .16);
}
.hv-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: #000;
}
.hv-phone__screen video,
.hv-phone__screen img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Treat the clip as an animated image, never a player. iOS/Safari paints a
   start-playback button over any video it has not auto-started, and shows
   controls on tap — both are suppressed here, and pointer events are removed
   so the clip cannot be paused or scrubbed. */
.hv-gif {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.hv-gif::-webkit-media-controls,
.hv-gif::-webkit-media-controls-panel,
.hv-gif::-webkit-media-controls-play-button,
.hv-gif::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
}
.hv-phone__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 20px;
  background: #1d1d1f;
  border-radius: 0 0 13px 13px;
  z-index: 3;
}

/* Floating callouts are not part of this idiom */
.hv-float { display: none !important; }

/* ============================================================
   7. Stat strip — plain figures, hairline dividers
   ============================================================ */
.hv-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  text-align: center;
}
.hv-stat {
  background: none;
  padding: .5rem 1.25rem;
  border-right: 1px solid var(--hv-hairline);
}
.hv-stat:last-child { border-right: 0; }
.hv-stat__num {
  font-family: var(--hv-font);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.05;
  color: var(--hv-ink);
}
.hv-stat__label {
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--hv-muted);
  margin-top: .35rem;
}
@media (max-width: 767.98px) {
  .hv-stats { grid-template-columns: repeat(2, 1fr); row-gap: 2.25rem; }
  .hv-stat:nth-child(2n) { border-right: 0; }
}

/* ============================================================
   8. Bento tiles
   ============================================================ */
.hv-tile {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--hv-grey);
  border: 0;
  border-radius: var(--hv-radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  overflow: hidden;
  text-decoration: none;
  color: var(--hv-ink);
}
.hv-tile--white { background: var(--hv-white); }
.hv-tile--dark { background: var(--hv-black); color: #f5f5f7; }
.hv-tile--dark h3, .hv-tile--dark .hv-h3 { color: #f5f5f7; }
.hv-tile--dark .hv-sub { color: #a1a1a6; }
.hv-tile--center { text-align: center; align-items: center; }
.hv-tile__eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--hv-muted);
  margin-bottom: .55rem;
}
.hv-tile p { margin-bottom: 0; }

/* Legacy card class, restyled to the tile idiom */
.hv-card {
  height: 100%;
  background: var(--hv-grey);
  border: 0;
  border-radius: var(--hv-radius-lg);
  padding: clamp(1.75rem, 3vw, 2.25rem);
  box-shadow: none;
  transition: none;
}
.hv-card:hover { transform: none; box-shadow: none; border-color: transparent; }
.hv-card h3 {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}
.hv-card p { font-size: 1.0625rem; line-height: 1.45; color: var(--hv-muted); margin-bottom: 0; }
.hv-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--hv-accent);
  font-size: 1.9rem;
  margin-bottom: .9rem;
}

/* App rows — quiet list, hairline separated */
.hv-app {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  height: 100%;
  background: var(--hv-white);
  border: 0;
  border-radius: var(--hv-radius);
  padding: 1.15rem 1.35rem;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .2s var(--hv-ease);
}
.hv-grey .hv-app { background: var(--hv-white); }
.hv-app { min-height: 88px; }
.hv-app { cursor: default; }
.hv-app img { width: 56px; height: 56px; border-radius: 13px; flex: 0 0 auto; box-shadow: none; }
.hv-app__body { min-width: 0; }
.hv-app__name {
  font-family: var(--hv-font);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--hv-ink);
  margin-bottom: .05rem;
  line-height: 1.3;
}
.hv-app__meta { font-size: .9375rem; color: var(--hv-muted); display: flex; align-items: center; gap: .35rem; }
.hv-app__meta i { display: none; }
.hv-app__cta { display: none; }

/* Checklist */
.hv-checklist { list-style: none; padding: 0; margin: 0; }
.hv-checklist li {
  display: block;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hv-hairline);
}
.hv-checklist li:last-child { border-bottom: 0; }
.hv-checklist i { display: none; }
.hv-checklist strong {
  display: block;
  color: var(--hv-ink);
  font-weight: 600;
  font-size: 1.1875rem;
  letter-spacing: -.02em;
  margin-bottom: .15rem;
}
.hv-checklist span { font-size: 1.0625rem; color: var(--hv-muted); line-height: 1.45; }

.hv-media-frame { border-radius: var(--hv-radius-lg); overflow: hidden; box-shadow: none; border: 0; }
.hv-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================
   9. Statement band — black, centred, no gradient
   ============================================================ */
.hv-band {
  position: relative;
  overflow: hidden;
  background: var(--hv-black);
  color: #f5f5f7;
  padding: clamp(5rem, 9vw, 8rem) 0;
  text-align: center;
}
.hv-band::before { content: none; }
.hv-band h2, .hv-band .hv-quote { color: #f5f5f7; }
.hv-quote {
  font-family: var(--hv-font);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.12;
  max-width: 20ch;
  margin-inline: auto;
}
.hv-band-sub { color: #a1a1a6; font-size: 1.0625rem; }

/* ============================================================
   10. Contact
   ============================================================ */
.hv-contact-card {
  background: var(--hv-grey);
  border: 0;
  border-radius: var(--hv-radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: none;
  height: 100%;
}
.hv-white-panel .hv-contact-card { background: var(--hv-grey); }
.hv-contact-row {
  display: block;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--hv-hairline);
}
.hv-contact-row:first-child { padding-top: 0; }
.hv-contact-row:last-child { border-bottom: 0; padding-bottom: 0; }
.hv-contact-row i { display: none; }
.hv-contact-row strong {
  display: block;
  color: var(--hv-ink);
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: .2rem;
}
.hv-contact-row p { margin: 0 0 .3rem; font-size: 1.0625rem; color: var(--hv-muted); line-height: 1.45; }
.hv-contact-row a { color: var(--hv-accent); text-decoration: none; font-weight: 400; }
.hv-contact-row a:hover { text-decoration: underline; }

/* ============================================================
   11. Footer — Apple's fine-print footer
   ============================================================ */
.hv-footer {
  background: var(--hv-grey);
  color: var(--hv-muted);
  padding: 2.5rem 0 1.5rem;
  font-size: 12px;
  line-height: 1.33;
  letter-spacing: -.01em;
}
.hv-footer h4 {
  color: var(--hv-ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
  margin-bottom: .75rem;
}
.hv-footer a { color: var(--hv-muted); text-decoration: none; font-size: 12px; }
.hv-footer a:hover { color: var(--hv-ink); text-decoration: underline; }
.hv-footer ul { list-style: none; padding: 0; margin: 0; }
.hv-footer li { margin-bottom: .5rem; }
.hv-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--hv-ink) !important;
  margin-bottom: .6rem;
}
.hv-footer__brand img { width: 18px; height: 18px; border-radius: 4px; }
.hv-footer__note {
  padding-bottom: 1.1rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--hv-hairline);
  color: var(--hv-muted);
}
.hv-footer__bottom {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hv-hairline);
  font-size: 12px;
  color: var(--hv-muted);
}
.hv-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--hv-muted) !important;
  margin-right: 1rem;
  font-size: 14px;
}
.hv-social:hover { background: none; transform: none; color: var(--hv-ink) !important; }

/* ============================================================
   12. Modal
   ============================================================ */
#feedbackModal .modal-content { border: 0; border-radius: var(--hv-radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.2); }
#feedbackModal .modal-header { background: var(--hv-grey); border-bottom: 0; padding: 1.5rem 1.75rem; }
#feedbackModal .modal-title { font-family: var(--hv-font); font-weight: 600; color: var(--hv-ink); letter-spacing: -.02em; }
#feedbackModal .modal-body { padding: 1.75rem; }

/* ============================================================
   13. Legal / content pages
   ============================================================ */
.hv-page-header {
  padding: clamp(6rem, 10vw, 7.5rem) 0 clamp(2rem, 4vw, 3rem);
  background: var(--hv-grey);
  border-bottom: 0;
  text-align: left;
}
.hv-prose { max-width: 44rem; }
.hv-prose h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-top: 2.75rem;
  margin-bottom: .75rem;
  padding-top: 0;
  border-top: 0;
}
.hv-prose h2:first-of-type { margin-top: 0; }
.hv-prose p, .hv-prose li { font-size: 1.0625rem; line-height: 1.5; color: var(--hv-ink); }
.hv-prose ul { padding-left: 1.15rem; }
.hv-prose li { margin-bottom: .55rem; }
.hv-prose a { color: var(--hv-accent); text-decoration: none; }
.hv-prose a:hover { text-decoration: underline; }

/* ============================================================
   14. Not found
   ============================================================ */
/* Sticky footer: the message takes whatever height is left over, so the footer
   sits at the bottom of short viewports without hard-coding its height. */
body.hv-page-404 { min-height: 100vh; display: flex; flex-direction: column; }
body.hv-page-404 .hv-404 { flex: 1 0 auto; }
body.hv-page-404 .hv-footer { flex: 0 0 auto; }

.hv-404 {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--hv-white);
}
.hv-404 .hv-display { font-size: clamp(2.25rem, 5.5vw, 4rem); }

/* ============================================================
   14. Scroll reveal + a11y
   ============================================================ */
/* Content is visible by default. The hidden state is only applied once the
   inline head script confirms JS + IntersectionObserver, so a script failure
   or a deep link can never leave a section blank. */
.hv-js .hv-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--hv-ease), transform .8s var(--hv-ease);
}
.hv-js .hv-reveal.hv-in { opacity: 1; transform: none; }

.hv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--hv-ink);
  color: #fff;
  padding: .75rem 1.25rem;
}
.hv-skip:focus { left: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hv-js .hv-reveal { opacity: 1; transform: none; transition: none; }
}