.ipad-pos-page {
  --ipad-pos-navy: #102a43;
  --ipad-pos-navy-deep: #071b2b;
  --ipad-pos-blue: #0d6efd;
  --ipad-pos-teal: #24c7a3;
  --ipad-pos-orange: #f26a2e;
  --ipad-pos-surface: #f4f8fb;
  --ipad-pos-border: rgba(16, 42, 67, 0.12);
  color: var(--bs-body-color);
}

.ipad-pos-page .ipad-pos-section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  scroll-margin-top: 5rem;
}

.ipad-pos-page .ipad-pos-heading {
  max-width: 850px;
}

.ipad-pos-page .ipad-pos-section-title {
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: bold;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.ipad-pos-page .ipad-pos-eyebrow {
  color: var(--ipad-pos-blue);
  font-size: inherit;
  font-weight: bold;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ipad-pos-page .ipad-pos-eyebrow-light {
  color: #78d5dd;
}

/* Small Business-style hero */
.ipad-pos-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 46rem;
  overflow: hidden;
  color: #fff;
  background-color: var(--ipad-pos-navy-deep);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
}

.ipad-pos-hero::before {
  position: absolute;
  z-index: -1;
  top: -14rem;
  right: -10rem;
  width: 34rem;
  height: 34rem;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(14, 120, 149, 0.72),
    transparent 70%
  );
}

.ipad-pos-hero::after {
  position: absolute;
  z-index: -1;
  bottom: -17rem;
  left: 32%;
  width: 30rem;
  height: 30rem;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 106, 46, 0.3), transparent 70%);
}

.ipad-pos-hero h1 {
  max-width: 46rem;
  color: #fff;
  font-size: clamp(3.7rem, 7vw, 5.8rem);
  font-weight: bold;
  line-height: 0.96;
  letter-spacing: -0.065em;
}

.ipad-pos-accent {
  color: #ff8b55;
}

.ipad-pos-hero-copy,
.ipad-pos-hero-benefits {
  color: #b8c9d2;
}

.ipad-pos-hero-benefits i {
  color: var(--ipad-pos-teal);
}

.ipad-pos-btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--ipad-pos-orange);
  --bs-btn-border-color: var(--ipad-pos-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #db5821;
  --bs-btn-hover-border-color: #db5821;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c94f1c;
  --bs-btn-active-border-color: #c94f1c;
}

.ipad-pos-text-link {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding-bottom: 0.2rem;
  color: #fff;
  font-size: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

.ipad-pos-text-link:hover,
.ipad-pos-text-link:focus-visible {
  color: #ff8b55 !important;
}

.ipad-pos-hero-visual {
  position: relative;
  max-width: 39rem;
  margin-inline: auto;
  text-align: center;
}

.ipad-pos-hero-image {
  width: auto;
  max-width: 100%;
  max-height: 46rem;
  object-fit: contain;
  filter: drop-shadow(0 2.25rem 3rem rgba(0, 0, 0, 0.38));
}

.ipad-pos-hero-card {
  position: absolute;
  right: -1.25rem;
  bottom: 2rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  max-width: 20rem;
  padding: 1rem 1.25rem;
  color: var(--bs-card-color);
  text-align: left;
  background: var(--bs-card-bg);
  border-radius: 0.9rem;
}

.ipad-pos-status-dot {
  flex: 0 0 auto;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--bs-success);
  box-shadow: 0 0 0 0.3rem rgba(var(--bs-success-rgb), 0.15);
}

/* Cards and product imagery */
.ipad-pos-feature-card,
.ipad-pos-capability-card,
.ipad-pos-device-card,
.ipad-pos-choice-card,
.ipad-pos-faq-card,
.ipad-pos-shot-card,
.ipad-pos-industry-card {
  border-color: var(--ipad-pos-border);
}

.ipad-pos-feature-card,
.ipad-pos-capability-card,
.ipad-pos-device-card,
.ipad-pos-choice-card,
.ipad-pos-industry-card {
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.ipad-pos-feature-card:hover,
.ipad-pos-capability-card:hover,
.ipad-pos-device-card:hover,
.ipad-pos-choice-card:hover,
.ipad-pos-industry-card:hover {
  border-color: rgba(13, 110, 253, 0.34);
  box-shadow: 0 1rem 2.5rem rgba(16, 42, 67, 0.09);
  transform: translateY(-0.2rem);
}

.ipad-pos-card-icon {
  color: var(--ipad-pos-blue);
  font-size: 3em;
  line-height: 1;
}

.ipad-pos-product-section,
.ipad-pos-industries-section,
.ipad-pos-faq-section {
  background: var(--ipad-pos-surface);
}

.ipad-pos-shot-card {
  background: var(--bs-card-bg);
}

.ipad-pos-shot {
  min-height: 16rem;
  max-height: 25rem;
  object-fit: cover;
  background: #fff;
}

.ipad-pos-shot-wide {
  object-position: center;
}

.ipad-pos-shot-contain {
  padding: 1.5rem;
  object-fit: contain;
}

/* Device, industry and starting-point cards */
.ipad-pos-device-card i {
  color: var(--ipad-pos-blue);
  font-size: 3em;
  line-height: 1;
}

.ipad-pos-device-card span {
  display: block;
}

.ipad-pos-industry-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ipad-pos-choice-card {
  display: flex;
  flex-direction: column;
  min-height: 19rem;
}

.ipad-pos-choice-card-accent {
  border-top: 0.3rem solid var(--ipad-pos-orange);
}

/* FAQ */
.ipad-pos-faq-card {
  background: var(--bs-card-bg);
}

.ipad-pos-faq-card summary {
  position: relative;
  padding-right: 2.5rem;
  cursor: pointer;
  list-style: none;
}

.ipad-pos-faq-card summary::-webkit-details-marker {
  display: none;
}

.ipad-pos-faq-card summary::after {
  position: absolute;
  top: -0.25rem;
  right: 0;
  color: var(--ipad-pos-blue);
  content: "+";
  font-size: 2em;
  line-height: 1;
}

.ipad-pos-faq-card[open] summary::after {
  content: "\2212";
}

/* Final call to action */
.ipad-pos-final-cta {
  color: #fff;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(242, 106, 46, 0.2),
      transparent 26rem
    ),
    linear-gradient(135deg, var(--ipad-pos-navy-deep), var(--ipad-pos-navy));
}

/* Keyboard focus */
.ipad-pos-page a:focus-visible,
.ipad-pos-page summary:focus-visible {
  outline: 0.2rem solid var(--ipad-pos-orange);
  outline-offset: 0.2rem;
}

/* Dark theme */
[data-bs-theme="dark"] .ipad-pos-page {
  --ipad-pos-surface: #111c27;
  --ipad-pos-border: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] .ipad-pos-shot {
  background: #fff;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
  .ipad-pos-hero {
    min-height: auto;
  }

  .ipad-pos-hero-card {
    right: 1rem;
  }
}

@media (max-width: 767.98px) {
  .ipad-pos-hero h1 {
    font-size: clamp(3.1rem, 14vw, 4.7rem);
  }

  .ipad-pos-hero-image {
    max-height: 38rem;
  }
}

@media (max-width: 575.98px) {
  .ipad-pos-page .ipad-pos-section {
    padding-block: 4rem;
  }

  .ipad-pos-hero-card {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    max-width: none;
  }

  .ipad-pos-shot {
    min-height: 13rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ipad-pos-feature-card,
  .ipad-pos-capability-card,
  .ipad-pos-device-card,
  .ipad-pos-choice-card,
  .ipad-pos-industry-card {
    transition: none;
  }

  .ipad-pos-feature-card:hover,
  .ipad-pos-capability-card:hover,
  .ipad-pos-device-card:hover,
  .ipad-pos-choice-card:hover,
  .ipad-pos-industry-card:hover {
    transform: none;
  }
}