/* Calivia Digital Solutions — shared styles */
html { scroll-behavior: smooth; }
body { font-family: 'Roboto', sans-serif; color: #161B22; background: #fff; }
[id] { scroll-margin-top: 88px; }

:focus-visible {
  outline: 2px solid #1E81FF;
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: #1E81FF; color: #fff; }

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.radial-navy {
  background:
    radial-gradient(60% 80% at 15% 0%, rgba(30,129,255,.20), transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(76,149,255,.14), transparent 65%),
    #001F47;
}

.radial-blue {
  background:
    radial-gradient(70% 90% at 0% 0%, rgba(137,189,255,.30), transparent 60%),
    radial-gradient(60% 70% at 100% 100%, rgba(0,18,41,.35), transparent 60%),
    linear-gradient(160deg, #004BAB 0%, #012C5E 100%);
}

.btn-glow {
  background: linear-gradient(135deg, #1E81FF, #004BAB);
  box-shadow: 0 0 0 1px rgba(30,129,255,.35), 0 10px 24px -8px rgba(30,129,255,.65), 0 2px 6px rgba(0,18,41,.25);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), filter .25s ease;
}
.btn-glow:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(30,129,255,.5), 0 16px 32px -8px rgba(30,129,255,.75), 0 2px 6px rgba(0,18,41,.3); filter: brightness(1.06); }
.btn-glow:active { transform: translateY(0); filter: brightness(.97); }

.btn-outline {
  border: 1.5px solid rgba(255,255,255,.55);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease;
}
.btn-outline:hover { background-color: rgba(255,255,255,.1); border-color: #fff; transform: translateY(-2px); }
.btn-outline:active { transform: translateY(0); }

.btn-outline-dark {
  border: 1.5px solid rgba(0,31,71,.35);
  transition: transform .25s cubic-bezier(.22,1,.36,1), background-color .25s ease, border-color .25s ease;
}
.btn-outline-dark:hover { background-color: rgba(30,129,255,.08); border-color: #004BAB; transform: translateY(-2px); }
.btn-outline-dark:active { transform: translateY(0); }

.card-elevated { box-shadow: 0 1px 2px rgba(0,18,41,.06), 0 12px 28px -12px rgba(0,60,140,.28); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1); }
.card-elevated:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(0,18,41,.08), 0 22px 40px -14px rgba(0,60,140,.35); }

.img-overlay { background: linear-gradient(to top, rgba(0,18,41,.78) 0%, rgba(0,18,41,.35) 45%, rgba(0,18,41,.05) 75%); }
.img-tint { background-color: rgba(0,89,166,.28); mix-blend-mode: multiply; }

.tile-dtf { background: radial-gradient(85% 120% at 20% 10%, rgba(76,149,255,.35), transparent 55%), radial-gradient(70% 90% at 100% 100%, rgba(30,129,255,.18), transparent 60%), #001229; }
.tile-uv { background: radial-gradient(85% 120% at 80% 0%, rgba(137,189,255,.32), transparent 55%), radial-gradient(70% 90% at 0% 100%, rgba(0,89,166,.4), transparent 60%), #012C5E; }
.tile-lf { background: radial-gradient(90% 130% at 30% 100%, rgba(0,119,189,.22), transparent 60%), linear-gradient(160deg, #eef1f5 0%, #d8dee6 100%); }
.tile-events { background: radial-gradient(70% 100% at 15% 0%, rgba(30,129,255,.22), transparent 55%), radial-gradient(60% 80% at 100% 100%, rgba(76,149,255,.14), transparent 60%), #001229; }

.tracking-tightish { letter-spacing: -0.02em; }

.dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.35); transition: background-color .25s ease, transform .25s ease; }
.dot.active { background: #fff; transform: scale(1.2); }

.nav-link { position: relative; transition: color .2s ease; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -6px;
  height: 2px;
  background: #1E81FF;
  transition: right .25s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::after, .nav-link:focus-visible::after { right: 0; }
.nav-link[aria-current="page"] { color: #001F47; }
.nav-link[aria-current="page"]::after { right: 0; }

/* products dropdown */
.dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: #fff;
  border: 1px solid rgba(0,18,41,.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,18,41,.06), 0 18px 40px -12px rgba(0,60,140,.3);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility 0s linear .2s;
  z-index: 50;
}
.dropdown-open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.dropdown-item {
  display: block;
  padding: 10px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(22,27,34,.8);
  transition: background-color .15s ease, color .15s ease;
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: #EAF3FF; color: #001F47; }
.dropdown-item .dropdown-sub { display: block; font-weight: 400; font-size: 12px; color: rgba(22,27,34,.5); margin-top: 1px; }
.dropdown-caret { transition: transform .25s cubic-bezier(.22,1,.36,1); }
.dropdown-open .dropdown-caret { transform: rotate(180deg); }

.hero-fade { transition: opacity .45s ease; }

.sparkle-field {
  -webkit-mask-image: radial-gradient(65% 90% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(65% 90% at 50% 50%, #000 30%, transparent 80%);
}
.sparkle-ambient {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
}
.sparkle-band {
  -webkit-mask-image: radial-gradient(60% 120% at 50% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(60% 120% at 50% 0%, #000 30%, transparent 80%);
}
.sparkle-field canvas, .sparkle-ambient canvas, .sparkle-band canvas { display: block; width: 100%; height: 100%; }

/* --wa-lift is driven by site.js: the button lifts itself clear of the footer
   link row instead of sitting on top of it, and drops back to 0 once the
   visitor drags it somewhere of their own choosing.
   touch-action:none is what makes that drag work on a phone — without it the
   browser claims the gesture and scrolls the page instead. */
.whatsapp-pulse {
  box-shadow: 0 0 0 0 rgba(30,129,255,.55);
  animation: pulse 2.4s infinite;
  transform: translateY(var(--wa-lift, 0px));
  touch-action: none;
}
.whatsapp-pulse.is-dragging { cursor: grabbing; animation: none; }
/* Stepped aside while the footer is passing, rather than sitting on top of the
   links. Opacity only, so it costs no layout. */
.whatsapp-pulse { transition: opacity .25s ease; }
.whatsapp-pulse.is-stowed { opacity: 0; pointer-events: none; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(30,129,255,.55); }
  70% { box-shadow: 0 0 0 14px rgba(30,129,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,129,255,0); }
}

.badge-circle { box-shadow: 0 6px 16px -4px rgba(0,18,41,.35), inset 0 0 0 1px rgba(255,255,255,.6); }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%23727376' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

/* phone mockup — Recipe Master hero device */
.phone {
  position: relative;
  width: 270px;
  border-radius: 38px;
  background: #0b1526;
  padding: 12px;
  box-shadow:
    0 0 0 1.5px rgba(137,189,255,.35),
    0 0 40px -6px rgba(30,129,255,.45),
    0 30px 60px -18px rgba(0,18,41,.8);
}
.phone-screen {
  border-radius: 28px;
  overflow: hidden;
  background: #f7fafd;
  aspect-ratio: 9 / 18.6;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  background: #0b1526;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone-float { animation: phoneFloat 7s ease-in-out infinite; }
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* phone variants for real app screenshots */
.phone-shot .phone-screen { aspect-ratio: auto; display: block; background: #0b1526; position: relative; }
.phone-shot .phone-screen img { display: block; width: 100%; height: auto; }
.phone-shot .phone-screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 18px;
  background: linear-gradient(to bottom, rgba(0,18,41,.16), transparent);
  pointer-events: none;
}
.phone-sm {
  width: 205px;
  padding: 9px;
  border-radius: 30px;
  opacity: .92;
  box-shadow:
    0 0 0 1.5px rgba(137,189,255,.16),
    0 20px 40px -16px rgba(0,18,41,.6);
}
.phone-sm .phone-screen { border-radius: 22px; }

/* card behind the top of the stack — same size, muted so it recedes */
.phone.phone-back {
  position: absolute;
  opacity: .85;
  box-shadow:
    0 0 0 1.5px rgba(137,189,255,.14),
    0 18px 36px -16px rgba(0,18,41,.55);
}

/* Hero phone pair — one screenshot from each app, Calivia Cook in front.
   The two sizes here are driven by a hard constraint, not taste. The pair sits
   beside the copy column, and at 1024px there is only about 490px of room
   there; at the default 270px phone width the right-hand phone ran 32px off the
   viewport, and pushing the phones further apart to uncover ActBy made that
   worse. So the phones are sized to the space instead, which buys enough
   separation for ActBy's card ("today", the renew date, the amount at risk) to
   clear the front phone rather than sitting behind it. Change either number and
   re-check at 1024px, which is the width that binds. */
.hero-phones { position: relative; width: 270px; }
@media (min-width: 768px) {
  /* The column is right-aligned, so the pair's right edge is pinned to it and
     the rotated corner overhangs by a few px. Nudge the whole pair inward
     rather than shrinking the phones again for the sake of 3px. */
  .hero-phones { width: 435px; margin-right: 10px; }
  .hero-phones .phone { width: 220px; padding: 10px; border-radius: 32px; }
  .hero-phones .phone-screen { border-radius: 24px; }
  .hero-phones .phone-back { top: 26px; left: 215px; }
}

.phone-glow {
  position: absolute;
  inset: -15% -20%;
  background: radial-gradient(55% 55% at 55% 45%, rgba(72,149,255,.35), transparent 70%);
  filter: blur(20px);
  z-index: -1;
}

/* "coming soon" play-store style pill */
.play-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: #0b1526;
  border: 1px solid rgba(137,189,255,.3);
  padding: 8px 18px 8px 12px;
  transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease;
}
.play-pill:hover { transform: translateY(-2px); border-color: rgba(137,189,255,.6); box-shadow: 0 12px 28px -10px rgba(30,129,255,.5); }
.play-pill:active { transform: translateY(0); }

.chip-soon {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #004BAB;
  background: #EAF3FF;
  border: 1px solid rgba(30,129,255,.3);
  border-radius: 999px;
  padding: 4px 12px;
}

/* legal pages typography */
.legal-body h2 { font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; color: #001F47; margin-top: 2.5rem; margin-bottom: .75rem; }
.legal-body h3 { font-weight: 700; font-size: 1.05rem; color: #001F47; margin-top: 1.75rem; margin-bottom: .5rem; }
.legal-body p, .legal-body li { color: rgba(22,27,34,.72); font-size: 15px; line-height: 1.75; }
.legal-body p { margin-bottom: .9rem; }
.legal-body ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.legal-body li { margin-bottom: .35rem; }
.legal-body a { color: #0077BD; font-weight: 500; }
.legal-body a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-glow, .btn-outline, .btn-outline-dark, .card-elevated, .nav-link::after, .hero-fade, .dropdown-panel, .play-pill { transition: none; }
  .whatsapp-pulse, .phone-float { animation: none; }
}