/* How-it-works page — design kit tokens, no Tailwind CDN */
body { background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.font-display { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.bg-bg2 { background: var(--card); }
.bg-bg3 { background: var(--card-2); }
.text-fg { color: var(--text); }
.text-fg\/70 { color: color-mix(in srgb, var(--text) 70%, transparent); }
.min-h-\[88vh\] { min-height: 88vh; }
.leading-\[1\.1\] { line-height: 1.1; }
.tracking-\[-1\.5px\] { letter-spacing: -1.5px; }
.tracking-\[-0\.5px\] { letter-spacing: -0.5px; }
.tracking-\[-0\.3px\] { letter-spacing: -0.3px; }
.tracking-\[\.18em\] { letter-spacing: 0.18em; }
.tracking-\[\.2em\] { letter-spacing: 0.2em; }
.tracking-\[\.1em\] { letter-spacing: 0.1em; }
.tracking-\[\.04em\] { letter-spacing: 0.04em; }
.text-\[10px\] { font-size: 10px; }
.text-\[9px\] { font-size: 9px; }
.text-\[8px\] { font-size: 8px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[15px\] { font-size: 15px; }
.h-\[52px\] { height: 52px; }
.h-11 { height: 2.75rem; }
.h-1\.5 { height: 0.375rem; }
.w-1\.5 { width: 0.375rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.p-3\.5 { padding: 0.875rem; }
.gap-2\.5 { gap: 0.625rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.py-9 { padding-top: 2.25rem; padding-bottom: 2.25rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.pt-28 { padding-top: 7rem; }
.pb-16 { padding-bottom: 4rem; }
.opacity-45 { opacity: 0.45; }
.from-\[hsl\(25_85\%_65\%\/0\.3\)\] { --tw-gradient-from: color-mix(in srgb, var(--primary) 30%, transparent); }
.bg-\[hsl\(25_85\%_65\%\/0\.1\)\] { background: var(--primary-fill); }
.border-\[hsl\(25_85\%_65\%\/0\.28\)\] { border-color: var(--primary-border); }
.border-\[hsl\(25_85\%_65\%\/0\.22\)\] { border-color: color-mix(in srgb, var(--primary) 22%, transparent); }
.border-\[hsl\(25_85\%_65\%\/0\.18\)\] { border-color: color-mix(in srgb, var(--primary) 18%, transparent); }
.bg-\[hsl\(25_85\%_65\%\/0\.06\)\] { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.hover\:border-\[hsl\(25_85\%_65\%\/0\.35\)\]:hover { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.hover\:opacity-80:hover { opacity: 0.8; }
.bg-gold\/5 { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.border-gold\/10 { border-color: color-mix(in srgb, var(--primary) 10%, transparent); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to, transparent)); }
.to-transparent { --tw-gradient-to: transparent; }

.gradient-text {
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gold-border-glow { box-shadow: var(--glow-card); }
.grid-bg {
  background-image: linear-gradient(color-mix(in srgb, var(--primary) 3%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--primary) 3%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 100%);
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.65)} }
@keyframes wa-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px);background:color-mix(in srgb, var(--primary) 70%, transparent)} }
.wa-dot { animation: wa-bounce 1.2s ease-in-out infinite; }
.wa-dot:nth-child(2){animation-delay:.2s} .wa-dot:nth-child(3){animation-delay:.4s}

.phone-shell {
  width: 200px;
  background: var(--bg);
  border-radius: 2.2rem;
  border: 1px solid var(--border);
  padding: 14px 10px 18px;
  box-shadow: 0 32px 64px color-mix(in srgb, var(--bg) 55%, transparent);
  flex-shrink: 0;
}
.phone-notch {
  width: 52px; height: 5px; border-radius: 3px;
  background: var(--border); margin: 0 auto 12px;
}
.phone-screen { background: var(--card-2); border-radius: 1.2rem; overflow: hidden; }

.step-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
@media (max-width: 767px) {
  .step-grid { grid-template-columns: 1fr; gap: 2rem; }
  .step-grid.rev { direction: ltr; }
  .step-grid.rev > * { direction: ltr; }
  .phone-shell { width: 180px; }
}
.step-grid.rev { direction: rtl; }
.step-grid.rev > * { direction: ltr; }

.svc-card { transition: border-color .25s, transform .2s, background .25s; }
.svc-card:hover { border-color: var(--primary-border) !important; transform: translateY(-3px); background: var(--card-2); }

.step-visual img { border:0; outline:none; box-shadow:none; background:transparent; display:block; }

.hiw-hero-glow { background: radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 70%); }
.hiw-cta-glow { background: radial-gradient(ellipse 55% 40% at 50% 50%, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 70%); }
.hiw-h1 { font-size: clamp(30px, 6vw, 52px); max-width: 680px; }
.hiw-h2 { font-size: clamp(22px, 4vw, 34px); }
.hiw-h3 { font-size: clamp(19px, 2.5vw, 24px); }
.hiw-lead { font-size: clamp(15px, 2vw, 17px); }
.hiw-sub { font-size: clamp(13px, 1.8vw, 15px); }
.hiw-cta-h2 { font-size: clamp(24px, 4.5vw, 38px); line-height: 1.15; }

.hiw-map-g { color: var(--info); }
.hiw-map-ya { background: var(--destructive); }
.hiw-map-2g { background: var(--success); }

@media (min-width: 640px) {
  .sm\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  .sm\:mb-20 { margin-bottom: 5rem; }
  .sm\:mb-28 { margin-bottom: 7rem; }
  .sm\:gap-10 { gap: 2.5rem; }
  .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
}