/*
  DogDesk home refresh
  Visual direction: warm editorial SaaS — confident ink, mineral green, and
  a soft paper canvas. This file intentionally layers over the existing page
  and arrival component without changing its approved markup or hero artwork.
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  --dd-ink: #163936;
  --dd-ink-soft: #315955;
  --dd-teal: #16756d;
  --dd-teal-deep: #0f5b56;
  --dd-mint: #dcefe6;
  --dd-paper: #fbfaf6;
  --dd-sand: #f4f0e7;
  --dd-line: #d9e2dc;
  --dd-coral: #ee806b;
  --dd-yellow: #f3d478;
  --dd-muted: #60736f;
  --dd-white: #fff;
}

html { scroll-padding-top: 88px; }
body {
  background: var(--dd-paper);
  color: var(--dd-ink);
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Arrival masthead */
.dogdesk-arrival {
  --ink: var(--dd-ink);
  --teal: var(--dd-teal);
  --arrival-cream: var(--dd-paper);
  --arrival-coral: var(--dd-coral);
  --yellow: var(--dd-yellow);
  --mint: var(--dd-mint);
  background: var(--dd-paper);
}
.site-powered-bar {
  min-height: 30px;
  background: var(--dd-ink);
  color: #dcebe4;
  font-size: .68rem;
  letter-spacing: .01em;
}
.site-powered-bar strong { color: #a8d8c3; }
.arrival-nav {
  height: 78px;
  padding-inline: clamp(22px, 6vw, 88px);
  background: rgba(251,250,246,.9);
  border-bottom: 1px solid rgba(22,57,54,.12);
  backdrop-filter: blur(18px);
}
.arrival-logo {
  font-size: 1.4rem;
  letter-spacing: -.075em;
}
.arrival-logo b { font-size: 1.25rem; }
.arrival-links { gap: clamp(20px, 3vw, 38px); }
.arrival-links a {
  color: var(--dd-ink-soft);
  font-size: .78rem;
  letter-spacing: .01em;
}
.arrival-links .arrival-nav-cta {
  padding: 12px 18px;
  border-radius: 7px;
  background: var(--dd-ink);
  box-shadow: 0 5px 12px rgba(22,57,54,.14);
}

/* Hero: preserve the photo, make the surrounding system quieter and more premium */
.arrival-hero {
  min-height: auto;
  grid-template-columns: minmax(340px, .82fr) minmax(500px, 1.18fr);
  gap: clamp(36px, 5.5vw, 96px);
  padding: clamp(48px, 7vh, 82px) clamp(24px, 7vw, 108px) 52px;
  background:
    radial-gradient(circle at 84% 18%, rgba(220,239,230,.82) 0 18%, transparent 43%),
    var(--dd-paper);
}
.arrival-sun {
  width: min(54vw, 760px);
  right: -10%;
  top: -34%;
  opacity: .65;
  background: #e6f0dc;
}
.arrival-intro { padding-bottom: 4px; }
.arrival-eyebrow {
  margin-bottom: 20px;
  color: var(--dd-teal);
  font-size: .65rem;
  letter-spacing: .18em;
}
.arrival-sparkle {
  font-size: 1.05rem;
  animation-duration: 12s;
}
.arrival-intro h1 {
  max-width: 650px;
  margin-bottom: 22px;
  color: var(--dd-ink);
  font-size: clamp(2.8rem, 3.85vw, 4.2rem);
  letter-spacing: -.065em;
  line-height: 1.06;
}
.arrival-intro h1 em {
  color: var(--dd-teal);
  background: linear-gradient(transparent 86%, var(--dd-yellow) 86%);
}
.arrival-intro p {
  max-width: 470px;
  color: var(--dd-muted);
  font-size: 1.02rem;
  line-height: 1.65;
}
.arrival-scene {
  max-width: 780px;
  padding: 8px 18px 34px 0;
}
.arrival-photo-wrap {
  border: 1px solid rgba(22,57,54,.16);
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(22,57,54,.16);
  transform: none;
}
.arrival-corner-star, .arrival-sticker { display: none; }
.arrival-checkin {
  right: -10px;
  bottom: 55px;
  border: 1px solid rgba(22,57,54,.12);
  border-radius: 12px;
  box-shadow: 0 14px 35px rgba(22,57,54,.16);
  transform: none;
}
.arrival-checkmark { background: var(--dd-mint); color: var(--dd-teal-deep); }
.arrival-caption { color: var(--dd-teal); }
.arrival-actions { padding-top: 9px; }
.arrival-button {
  min-height: 50px;
  padding: 13px 20px;
  border-radius: 10px;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.arrival-primary {
  background: var(--dd-coral);
  border-color: var(--dd-coral);
  box-shadow: 0 8px 18px rgba(238,128,107,.22);
}
.arrival-primary:hover { background: var(--dd-yellow); }
.arrival-secondary:hover { background: var(--dd-mint); }
.arrival-actions p { color: var(--dd-muted); }
.arrival-footer {
  min-height: 58px;
  color: var(--dd-muted);
  border-color: var(--dd-line);
}
.arrival-footer strong { color: var(--dd-teal); }

/* Shared page sections */
.social-proof {
  padding: 34px 48px;
  background: var(--dd-sand);
  border-color: var(--dd-line);
}
.social-proof p {
  color: var(--dd-teal);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.logos {
  color: var(--dd-ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: .68rem;
  letter-spacing: .06em;
  opacity: .62;
}
.features, .product-proof, .demo-section { max-width: 1240px; }
.features, .product-proof { padding: 112px 48px; }
.section-eyebrow {
  color: var(--dd-teal);
  font-size: .68rem;
  letter-spacing: .17em;
}
.section-title {
  color: var(--dd-ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 3.7vw, 3.1rem);
  letter-spacing: -.055em;
}
.section-sub {
  color: var(--dd-muted);
  line-height: 1.72;
}
.features-grid { gap: 16px; }
.feat-card {
  min-height: 204px;
  padding: 28px 26px;
  border: 1px solid var(--dd-line);
  border-radius: 13px;
  background: rgba(255,255,255,.62);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.feat-card:hover {
  border-color: rgba(22,117,109,.42);
  box-shadow: 0 16px 32px rgba(22,57,54,.08);
}
.feat-icon, .proof-icon { filter: saturate(.7); font-size: 1.55rem; }
.feat-card h3, .proof-card h3, .step h3 {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -.025em;
}
.feat-card p, .proof-card p { color: var(--dd-muted); }

.how {
  padding: 112px 48px;
  background: var(--dd-ink);
}
.how .section-title { color: #f5faf7; }
.how .section-sub { color: #a8c0b8; }
.steps { max-width: 1060px; gap: 20px; }
.step {
  padding: 26px;
  text-align: left;
  border: 1px solid rgba(220,239,230,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}
.step-num { color: var(--dd-coral); font-size: 2.4rem; }
.step p { color: #a8c0b8; }

.demo-section {
  padding-top: 112px;
  padding-bottom: 112px;
}
.demo-screen {
  padding: 23px;
  border: 1px solid rgba(220,239,230,.12);
  border-radius: 15px;
  box-shadow: 0 26px 60px rgba(22,57,54,.18);
}
.pricing {
  padding: 112px 48px;
  background: var(--dd-sand);
}
.pricing-grid { max-width: 1010px; gap: 16px; }
.price-card {
  padding: 34px 30px;
  border: 1px solid var(--dd-line);
  border-radius: 15px;
  box-shadow: 0 8px 22px rgba(22,57,54,.035);
}
.price-card.featured {
  background: var(--dd-ink);
  border-color: var(--dd-ink);
  box-shadow: 0 20px 45px rgba(22,57,54,.18);
}
.price-amount { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.06em; }
.price-btn {
  border-radius: 7px;
  background: var(--dd-ink);
}
.price-card.featured .price-btn { background: var(--dd-coral); }
.price-btn:hover { opacity: 1; background: var(--dd-teal); }
.price-card.featured .price-btn:hover { background: var(--dd-yellow); }
.product-proof { padding-top: 112px; padding-bottom: 112px; }
.proof-card {
  padding: 28px;
  border: 1px solid var(--dd-line);
  border-radius: 13px;
  background: var(--dd-sand);
}
.proof-card a { color: var(--dd-teal-deep); }
.cta-section {
  padding: 118px 48px;
  background: var(--dd-ink);
}
.cta-section .section-title { color: #f5faf7; }
.cta-section p { color: #aec3bb; }
.btn-cta { background: var(--dd-coral); color: var(--dd-ink); border-radius: 7px; }
.btn-cta:hover { background: var(--dd-yellow); color: var(--dd-ink); }
footer {
  padding: 34px 48px;
  background: var(--dd-paper);
  border-color: var(--dd-line);
}
.footer-logo { font-family: 'Space Grotesk', sans-serif; }
footer p, footer a { color: var(--dd-muted); }
footer .site-powered-footer strong { color: var(--dd-teal-deep); }

@media (max-width: 1050px) {
  .arrival-hero { padding-top: 62px; }
  .arrival-intro h1 { font-size: clamp(2.9rem, 6vw, 4.4rem); }
  .arrival-actions { grid-row: 2; }
  .arrival-scene { grid-row: 3; width: min(700px, 100%); }
}
@media (max-width: 768px) {
  .social-proof, .features, .pricing, .product-proof, .how, .cta-section {
    padding-inline: 22px;
  }
  .social-proof { padding-block: 28px; }
  .logos { gap: 17px 24px; }
  .features, .product-proof, .demo-section, .how, .pricing { padding-block: 76px; }
  .section-sub { margin-bottom: 38px; }
  .features-grid, .pricing-grid, .proof-grid { gap: 12px; }
  .feat-card { min-height: 0; }
  .demo-section { padding-inline: 22px; gap: 42px; }
  footer { padding-inline: 22px; }
}
@media (max-width: 620px) {
  .arrival-nav { height: 68px; }
  .arrival-hero { padding: 42px 20px 38px; }
  .arrival-intro h1 { font-size: clamp(2.45rem, 11vw, 3.8rem); }
  .arrival-intro p { font-size: .94rem; }
  .arrival-photo-wrap { box-shadow: 0 18px 36px rgba(22,57,54,.15); }
  .arrival-checkin { right: -6px; }
  .arrival-caption { gap: 10px; font-size: .46rem; }
  .arrival-buttons { grid-template-columns: 1fr 1fr; }
  .arrival-button { padding-inline: 8px; }
  .cta-section { padding-block: 82px; }
  footer { gap: 10px; }
  footer p { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}