/* Within A Day — shared styles for landing variations */
:root {
  --wd-paper: #FAF9F7;
  --wd-paper2: #F1EFEB;
  --wd-paper3: #ECEAE5;
  --wd-ink: #1C1C1A;
  --wd-ink-soft: #4A4945;
  --wd-gray: #8C8A84;
  --wd-line: #E3E1DB;
  --wd-light: #F5F4F1;
}

.wd-root {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: var(--wd-ink);
  background: var(--wd-paper);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-align: left;
}
.wd-root * { box-sizing: border-box; margin: 0; }

.wd-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wd-gray);
}

.wd-ph {
  background: repeating-linear-gradient(45deg, #ECEAE5 0 14px, #F3F1ED 14px 28px);
  border: 1px solid var(--wd-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wd-ph span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--wd-gray);
  background: var(--wd-paper);
  padding: 6px 12px;
  border: 1px solid var(--wd-line);
}

.wd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--wd-ink);
  padding: 14px 32px;
  transition: opacity 0.15s ease;
}
.wd-btn:hover { opacity: 0.85; }
.wd-btn--solid { background: var(--wd-accent, var(--wd-ink)); border-color: var(--wd-accent, var(--wd-ink)); color: var(--wd-light); }
.wd-btn--ghost { background: transparent; color: var(--wd-ink); }
.wd-btn--pill { border-radius: 999px; }
.wd-btn--light { background: var(--wd-light); color: var(--wd-ink); border-color: var(--wd-light); }

.wd-nav-link {
  font-size: 16px;
  font-weight: 500;
  color: var(--wd-ink-soft);
  text-decoration: none;
}
.wd-nav-link:hover { color: var(--wd-ink); }

.wd-hairline { border: 0; border-top: 1px solid var(--wd-line); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wd-nav { padding: 0 20px !important; height: 64px !important; }
  .wd-nav-links { display: none !important; }
  .wd-nav-cta { padding: 8px 16px !important; font-size: 14px !important; }
  .wd-section { padding: 0 20px !important; }
  .wd-hero { height: auto !important; padding: 60px 20px !important; }
  .wd-hero h1 { font-size: 36px !important; }
  .wd-hero p { font-size: 16px !important; }
  .wd-hero-logo { height: 72px !important; }
  .wd-hero-btns { flex-direction: column !important; width: 100% !important; }
  .wd-hero-btns .wd-btn { width: 100% !important; justify-content: center !important; }
  .wd-grid-2 { grid-template-columns: 1fr !important; }
  .wd-grid-3 { grid-template-columns: 1fr !important; }
  .wd-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .wd-services { height: auto !important; padding: 48px 20px !important; }
  .wd-products { height: auto !important; padding: 48px 20px !important; }
  .wd-process { height: auto !important; padding: 48px 20px !important; }
  .wd-contact { padding: 48px 20px !important; }
  .wd-footer { padding: 16px 20px !important; }
  .wd-section-title h2 { font-size: 28px !important; }
  .wd-nav-mobile-cta { display: inline-flex !important; }
}
@media (min-width: 769px) {
  .wd-nav-mobile-cta { display: none !important; }
}