/* Fonts */
/* Google Fonts now loaded via <link> tags in the layout head for faster paint
   and to prevent FOUT — see app/views/layouts/application.html.erb */

/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Roboto', sans-serif;
  color: #3a3a3a;
  line-height: 1.6;
  background: #fff;
}
a { color: #0170B9; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: 'Barlow Semi Condensed', sans-serif; }

/* Global Form Elements */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="number"],
input[type="time"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 2px solid #e2e5ea;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: #fafbfc;
  color: #333;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-sizing: border-box;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: #e8a838;
  box-shadow: 0 0 0 3px rgba(232,168,56,0.15);
  outline: none;
  background-color: #fff;
}
select {
  -webkit-appearance: none;
  appearance: none;
  background: #fafbfc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
select:focus {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
}
textarea { resize: vertical; }

/* Admin Bar */
.admin-bar {
  background: #1a1a1a;
  color: #ccc;
  padding: 0.4rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.admin-bar span { color: #888; }
.admin-bar button {
  background: none;
  border: 1px solid #555;
  color: #ccc;
  padding: 0.2rem 0.75rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.8rem;
}
.admin-bar button:hover { background: #333; color: #fff; }

/* Admin Pages */
.admin-tools { display: flex; gap: 1.5rem; margin-top: 1.5rem; }
.admin-tool-card {
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 1.5rem;
  flex: 0 0 250px;
}
.admin-tool-card h3 { margin-bottom: 0.5rem; }
.admin-tool-card p { color: #666; margin-bottom: 1rem; font-size: 0.9rem; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.form-group input, .form-group textarea, .form-group select {
  max-width: 500px;
}

.admin-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.admin-table th { background: #1a2744; color: #fff; padding: 0.75rem; text-align: left; font-size: 0.9rem; }
.admin-table td { padding: 0.75rem; border-bottom: 1px solid #eee; font-size: 0.9rem; }
.admin-table tr:nth-child(even) { background: #f8f8f8; }
.status-sent { color: #2e7d32; font-weight: 600; }
.status-failed { color: #c62828; font-weight: 600; }

.notice { background: #e8f5e9; color: #2e7d32; padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.alert { background: #ffebee; color: #c62828; padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem; }

/* Admin contact typeahead (booking form etc.) */
.contact-typeahead-dropdown {
  border: 1px solid #ced4da;
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
  background: #fff;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 1050;
}
.contact-typeahead-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.95rem;
  border-bottom: 1px solid #f1f3f5;
}
.contact-typeahead-item:last-child { border-bottom: none; }
.contact-typeahead-item:hover,
.contact-typeahead-item.active {
  background: #e7f1ff;
  color: #0d6efd;
}

/* Header */
.site-header {
  background: #fff;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo img { height: 60px; }
.logo a { display: flex; align-items: center; }
.main-nav { display: flex; gap: 0.5rem; align-items: center; }
.main-nav a {
  color: #3a3a3a;
  font-size: 1.05rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  transition: all 0.2s;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}
.main-nav a:hover {
  color: #1a3a5c;
  background-color: rgba(212, 146, 11, 0.15);
}
.main-nav a.active {
  color: #d4920b;
  background-color: rgba(212, 146, 11, 0.1);
}
.main-nav .sign-in {
  background: transparent;
  color: #1a3a5c;
  padding: 0.3rem 1rem;
  border-radius: 4px;
  border: 1.5px solid #1a3a5c;
  font-weight: 700;
  margin-left: 1rem;
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.08);
  transition: all 0.2s ease;
}
.main-nav .sign-in:hover {
  background: #1a3a5c;
  color: #fff;
  border-color: #1a3a5c;
  box-shadow: 0 3px 8px rgba(26, 58, 92, 0.25);
}
.main-nav .contact-cta {
  background: #d4920b;
  color: #fff;
  padding: 0.4rem 1.25rem;
  border-radius: 4px;
  border: 1.5px solid #d4920b;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(212, 146, 11, 0.35), 0 1px 2px rgba(212, 146, 11, 0.2);
  transition: all 0.2s ease;
}
.main-nav .contact-cta:hover {
  background: #b87a08;
  border-color: #b87a08;
  color: #fff;
  box-shadow: 0 4px 12px rgba(212, 146, 11, 0.5), 0 2px 4px rgba(212, 146, 11, 0.3);
  transform: translateY(-1px);
}
.main-nav .contact-cta.active {
  background: #b87a08;
  border-color: #b87a08;
  color: #fff;
  box-shadow: 0 2px 6px rgba(212, 146, 11, 0.35) inset;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.875rem 2rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.125rem;
  transition: background 0.2s;
}
.btn-accent { background: #e8a838; color: #fff; }
.btn-accent:hover { background: #d4952e; color: #fff; }
.btn-lg {
  padding: 1.25rem 3rem;
  font-size: 1.4rem;
}

/* Hero */
.hero {
  background: #1a3a5c;
  color: #fff;
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  pointer-events: none;
}
.hero::before {
  background: #e8a838;
  top: -20%;
  left: -20%;
  animation: uc-home-glow-1 14s ease-in-out infinite alternate;
}
.hero::after {
  background: #111;
  bottom: -20%;
  right: -20%;
  animation: uc-home-glow-2 18s ease-in-out infinite alternate;
}
@keyframes uc-home-glow-1 {
  0% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(60%, 20%) scale(1.15); }
  40% { transform: translate(80%, 60%) scale(0.9); }
  60% { transform: translate(40%, 80%) scale(1.1); }
  80% { transform: translate(20%, 50%) scale(0.95); }
  100% { transform: translate(70%, 70%) scale(1.05); }
}
@keyframes uc-home-glow-2 {
  0% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(-50%, -40%) scale(1.1); }
  40% { transform: translate(-70%, -10%) scale(0.9); }
  60% { transform: translate(-30%, -60%) scale(1.15); }
  80% { transform: translate(-60%, -30%) scale(0.95); }
  100% { transform: translate(-40%, -70%) scale(1.05); }
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 4rem;
  position: relative;
  z-index: 2;
}
.hero-text { flex: 1; }
.hero h1 {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
.hero p {
  font-size: 1.25rem;
  line-height: 1.7;
  margin-bottom: 2rem;
  color: rgba(255,255,255,0.9);
}
.hero strong { color: #e8a838; }

/* Trusted By */
.trusted-by {
  background: #f5f5f5;
  padding: 3rem 2rem;
  text-align: center;
}
.trusted-by h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #888;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Logo Marquee */
.logo-marquee {
  --marquee-h: 80px;
  --sprite-w: 2304px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: var(--marquee-h);
}
.logo-marquee::before,
.logo-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.logo-marquee::before {
  left: 0;
  background: linear-gradient(to right, #f5f5f5, transparent);
}
.logo-marquee::after {
  right: 0;
  background: linear-gradient(to left, #f5f5f5, transparent);
}
.logo-track {
  display: flex;
  gap: 0;
  width: max-content;
  height: var(--marquee-h);
  animation: uc-marquee 30s linear infinite;
  will-change: transform;
}
.logo-track:hover {
  animation-play-state: paused;
}
.logo-track img {
  display: block;
  height: var(--marquee-h);
  width: var(--sprite-w);
  flex: 0 0 var(--sprite-w);
  opacity: 0.85;
}
@keyframes uc-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(var(--sprite-w) * -1)); }
}

/* How It Works */
.how-it-works {
  background: #f5f5f5;
  padding: 5rem 2rem;
  text-align: center;
}
.how-it-works h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
.steps {
  display: flex;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}
.step { flex: 1; }
.step-number {
  width: 56px;
  height: 56px;
  background: #0a1628;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 auto 1.25rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
.step h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
.step p {
  color: #4B4F58;
  line-height: 1.65;
}

/* Why UC */
.why-uc {
  padding: 5rem 2rem;
  background: #fff;
}
.why-uc-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 4rem;
  align-items: center;
}
.why-uc-text { flex: 1; }
.why-uc-text h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
.why-uc-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: #3a3a3a;
}
.why-uc-quote { flex: 1; text-align: center; }
.why-uc-quote blockquote {
  font-size: 1.3rem;
  font-style: italic;
  margin-bottom: 0.5rem;
  color: #3a3a3a;
}
.why-uc-quote cite {
  color: #4B4F58;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 2rem;
}
.why-uc-quote .btn {
  border-radius: 30px;
  padding: 1rem 2.5rem;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(232,168,56,0.4);
  letter-spacing: 0.02em;
}

/* CTA */
.cta {
  background: linear-gradient(135deg, #0a1628 0%, #1a3050 50%, #0a1628 100%);
  color: #fff;
  padding: 5rem 2rem;
  text-align: center;
}
.cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
}
.cta p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: rgba(255,255,255,0.8);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

/* Footer */
.site-footer {
  background: #0a1628;
  color: rgba(255,255,255,0.7);
  padding: 4rem 2rem 3rem;
}
.footer-columns {
  display: flex;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-col { flex: 1; }
.footer-col h3 { color: #fff; font-size: 1.2rem; margin-bottom: 1rem; font-family: 'Barlow Semi Condensed', sans-serif; }
.footer-col p { line-height: 1.7; font-size: 0.95rem; }
.footer-col a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-col a:hover { color: #e8a838; }
.footer-col ul { list-style: none; padding: 0; margin: 0; line-height: 2.2; }
.footer-col ul a { font-size: 0.95rem; }
.footer-solidarity { color: #e8a838; font-weight: 600; margin-top: 1rem; }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 2rem auto 1.5rem; max-width: 1200px; }
.footer-copyright { text-align: center; color: rgba(255,255,255,0.4); font-size: 0.85rem; }

/* Inner Page Hero */
.page-hero {
  background: #1a3a5c;
  color: #fff;
  padding: 4rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before,
.page-hero::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
}
.page-hero::before {
  background: #e8a838;
  top: -20%;
  left: -20%;
  animation: uc-home-glow-1 14s ease-in-out infinite alternate;
}
.page-hero::after {
  background: #111;
  bottom: -20%;
  right: -20%;
  animation: uc-home-glow-2 18s ease-in-out infinite alternate;
}
.page-hero h1, .page-hero p { position: relative; z-index: 2; }
.page-hero h1 { font-size: 2.75rem; font-weight: 800; margin-bottom: 1rem; }
.page-hero p { font-size: 1.2rem; color: rgba(255,255,255,0.85); max-width: 700px; margin: 0 auto; }

/* Content Sections */
.content-section { padding: 4rem 2rem; }
.content-section.bg-light { background: #f5f5f5; }
.narrow-content { max-width: 800px; margin: 0 auto; }
.narrow-content p { font-size: 1.1rem; line-height: 1.7; margin-bottom: 1rem; }
.text-center { text-align: center; }
.text-muted { color: #4B4F58; }

/* Features Page */
.features-section { padding: 4rem 2rem; }
.features-section.bg-light { background: #f5f5f5; }
.features-section-inner { max-width: 1200px; margin: 0 auto; }
.section-label { text-align: center; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: #e8a838; font-weight: 600; margin-bottom: 0.5rem; }
.section-title { text-align: center; font-size: 2rem; margin-bottom: 3rem; }
.feature-cards { display: flex; gap: 2rem; }
.feature-card {
  flex: 1;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 2rem;
}
.features-section.bg-light .feature-card { background: #fff; }
.feature-card h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.feature-card p { color: #4B4F58; line-height: 1.65; }

/* About Page */
.hero-fist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}
.fist-img { width: 120px; height: auto; }
.hero-fist h1 { font-size: 2.75rem; font-weight: 800; line-height: 1.15; margin: 0; text-align: left; }
.team-cards { display: flex; gap: 3rem; max-width: 1000px; margin: 0 auto; }
.team-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}
.team-photo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}
.no-sales-icon { display: flex; justify-content: center; margin: 2rem 0; }
.no-sales-circle {
  width: 200px;
  height: 200px;
  border: 12px solid #cc2936;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.no-sales-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 12px;
  background: #cc2936;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 2;
}
.no-sales-text {
  font-size: 2.5rem;
  font-weight: 900;
  color: #1b2a4a;
  letter-spacing: -0.02em;
  z-index: 1;
}
.team-card h3 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.team-role { color: #e8a838; font-weight: 600; margin-bottom: 1rem; }
.team-card p { font-size: 0.95rem; color: #4B4F58; line-height: 1.6; }

/* Contact Page */
.contact-layout { display: flex; gap: 4rem; max-width: 1200px; margin: 0 auto; }
.contact-form-col { flex: 55%; max-width: 55%; }
.contact-info-col { flex: 45%; }
.contact-info-col > h2:first-child { margin-top: 0; }
.contact-card {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.contact-card h4 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.contact-card p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.contact-card p:last-child { margin-bottom: 0; }
.trial-box {
  border: 2px solid #e8a838;
  border-radius: 8px;
  padding: 2rem;
}
.trial-box h4 { color: #e8a838; font-size: 1.1rem; margin-bottom: 0.75rem; }
.trial-box p { font-size: 0.95rem; color: #4B4F58; }

/* Pricing Page */
.pricing-card-wrapper { max-width: 500px; margin: 0 auto; }
.pricing-cards { display: flex; gap: 2rem; justify-content: center; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.pricing-cards .pricing-card { flex: 1 1 0; max-width: 500px; display: flex; flex-direction: column; }
.pricing-cards .pricing-card .btn { margin-top: auto; align-self: center; }
/* Side by side, the two cards share rows (CSS subgrid) so their checklists start level and each row sits across
   from its match on the other card (Steve 2026-10-18, TW #3686). Each card has the same seven parts in order:
   recommend, name, tagline, price, setup fee, checklist, button. Stacked under 900px, nothing to line up. */
@media (min-width: 901px) {
  .pricing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 500px)); justify-content: center; column-gap: 2rem; row-gap: 0; }
  .pricing-cards .pricing-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; max-width: none; }
  .pricing-cards .pricing-card > * { align-self: start; }
  .pricing-cards .pricing-card .pricing-recommend { justify-self: center; }
  .pricing-cards .pricing-card .btn { align-self: end; justify-self: center; margin-top: 0; }
}
.pricing-recommend {
  display: inline-block;
  align-self: center;
  background: #fdf3e1;
  color: #1a3a5c;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
}
.pricing-amount .price-lead { font-size: 1rem; color: #4B4F58; margin-bottom: 0.25rem; }
.pricing-card {
  background: #fff;
  border-radius: 12px;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 2px solid #e8a838;
}
.pricing-card h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.pricing-amount { margin: 2rem 0; }
.pricing-amount .price { font-size: 3.5rem; font-weight: 800; color: #1a3a5c; font-family: 'Barlow Semi Condensed', sans-serif; }
.pricing-amount .period { font-size: 1.25rem; color: #4B4F58; }
.pricing-amount .price-note { font-size: 0.9rem; color: #888; margin-top: 0.25rem; }
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  text-align: left;
}
.pricing-features li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}
.pricing-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #2e7d32;
  font-weight: 700;
}
/* A line the plan does not include: a red X, the text muted (TW #3686). */
.pricing-features li.is-no { color: #8a8f98; }
.pricing-features li.is-no::before { content: "\2717"; color: #c62828; }

/* Scheduler */
.uc-scheduler-wrap { max-width: 100%; }
.uc-scheduler-heading { font-size: 1.2rem; font-weight: 600; color: #1b2a4a; margin-bottom: 1rem; margin-top: 0; }
.uc-selected-date { font-weight: 400; font-size: 0.95rem; color: #6c757d; }
.uc-required { color: #e8a838; }
.uc-scheduler-step { margin-bottom: 2rem; }
.uc-scheduler-step + .uc-scheduler-step { padding-top: 1.5rem; border-top: 1px solid #e2e5ea; }
.uc-date-scroller { position: relative; display: flex; align-items: center; gap: 0; }
.uc-date-scroller::before, .uc-date-scroller::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; transition: opacity 0.3s; }
.uc-date-scroller::before { left: 0; background: linear-gradient(to right, #fff 20%, transparent); }
.uc-date-scroller::after { right: 0; background: linear-gradient(to left, #fff 20%, transparent); }
.uc-date-scroller.at-start::before { opacity: 0; }
.uc-date-scroller.at-end::after { opacity: 0; }
.uc-date-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 52px; height: 52px; border: 2px solid #e8a838; border-radius: 50%; background: #fff; color: #e8a838; font-size: 2rem; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 12px rgba(0,0,0,0.15); transition: all 0.2s; }
.uc-date-arrow:hover { background: #e8a838; color: #fff; box-shadow: 0 4px 16px rgba(232,168,56,0.4); }
.uc-date-arrow-left { left: -26px; }
.uc-date-arrow-right { right: -26px; }
.uc-date-row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; }
.uc-date-row::-webkit-scrollbar { display: none; }
.uc-date-card { flex: 0 0 auto; width: 110px; padding: 0.75rem 0.5rem; text-align: center; border: 2px solid #e2e5ea; border-radius: 8px; cursor: pointer; background: #fafbfc; transition: all 0.2s; user-select: none; }
.uc-date-card:hover { border-color: #e8a838; background: rgba(232,168,56,0.06); box-shadow: 0 0 0 2px rgba(232,168,56,0.1); }
.uc-date-card.uc-date-selected { border-color: #e8a838; background: rgba(232,168,56,0.08); box-shadow: 0 0 0 3px rgba(232,168,56,0.15); }
.uc-date-card-day { font-size: 0.8rem; text-transform: uppercase; color: #6c757d; letter-spacing: 0.05em; }
.uc-date-card-date { font-size: 1.3rem; font-weight: 700; color: #1b2a4a; margin: 0.25rem 0; }
.uc-date-card-month { font-size: 0.8rem; color: #6c757d; }
.uc-date-card-count { font-size: 0.75rem; color: #e8a838; margin-top: 0.35rem; font-weight: 600; }
.uc-time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.5rem; margin-bottom: 1.5rem; }
.uc-time-btn { padding: 0.65rem 1rem; text-align: center; border: 2px solid #e2e5ea; border-radius: 6px; cursor: pointer; background: #fafbfc; font-size: 0.95rem; font-weight: 500; color: #1b2a4a; transition: all 0.2s; font-family: inherit; }
.uc-time-btn:hover { border-color: #e8a838; background: rgba(232,168,56,0.06); box-shadow: 0 0 0 2px rgba(232,168,56,0.1); }
.uc-time-btn.uc-time-selected { border-color: #e8a838; background: rgba(232,168,56,0.08); box-shadow: 0 0 0 3px rgba(232,168,56,0.15); font-weight: 700; }
.uc-time-local { display: block; font-size: 0.78rem; font-style: italic; color: #6c757d; font-weight: 400; margin-top: 2px; }
.uc-booking-summary { font-size: 1rem; color: #333; padding: 0.75rem 1rem; background: rgba(232,168,56,0.08); border-left: 4px solid #e8a838; border-radius: 4px; margin-bottom: 1.25rem; }
.uc-sched-form-row { margin-bottom: 1rem; }
.uc-sched-form-row label { display: block; font-weight: 600; font-size: 0.95rem; color: #1b2a4a; margin-bottom: 0.35rem; }
.uc-sched-submit-btn { background: linear-gradient(135deg, #e8a838, #d4872a); color: #fff; border: none; border-radius: 6px; padding: 0.85rem 2.5rem; font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 8px rgba(232,168,56,0.3); }
.uc-sched-submit-btn:hover { background: linear-gradient(135deg, #d4872a, #c07020); box-shadow: 0 4px 14px rgba(232,168,56,0.45); transform: translateY(-1px); }
.uc-scheduler-no-slots { text-align: center; padding: 2rem; background: #fafbfc; border: 2px solid #e2e5ea; border-radius: 8px; }
.uc-alt-time-link { font-size: 0.85rem; color: #6c757d; margin-top: 1rem; }
.uc-alt-time-link a { color: #6c757d; text-decoration: none; }
.uc-alt-time-link a:hover { color: #e8a838; }
.booking-confirmation { padding: 2rem 0; }
.booking-time { font-size: 1.5rem; color: #e8a838; font-weight: 700; margin-bottom: 1.5rem; }
@media (max-width: 480px) { .uc-date-card { width: 90px; } .uc-time-grid { grid-template-columns: repeat(2, 1fr); } }

/* Blog Posts */
.post-card {
  padding: 2rem 0;
  border-bottom: 1px solid #e5e5e5;
}
.post-card:first-child { padding-top: 0; }
.post-card:last-child { border-bottom: none; }
.post-card h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.post-card h2 a { color: #1a3a5c; }
.post-card h2 a:hover { color: #e8a838; }
.post-image { width: 100%; border-radius: 8px; margin-bottom: 1rem; }
.post-date { color: #888; font-size: 0.9rem; margin-bottom: 0.75rem; }

/* News Article (single post) */
.news-article { padding-top: 1.5rem; }
.news-article .back-to-news { margin-bottom: 1.5rem; }
.news-article .back-to-news a { color: #e8a838; text-decoration: none; font-size: 0.95rem; }
.news-article .back-to-news a:hover { text-decoration: underline; }
.post-hero-image { width: 100%; border-radius: 8px; margin-bottom: 1.5rem; }
.news-article .post-title { font-size: 1.75rem; color: #1a3a5c; margin-bottom: 0.25rem; }
.news-article .post-date { color: #888; font-size: 0.9rem; margin-bottom: 1.5rem; }
.news-article .post-body { font-size: 1.05rem; line-height: 1.7; }

.contact-form .field-title { position: absolute; left: -9999px; height: 0; overflow: hidden; margin: 0; padding: 0; }

/* Contact Form */
.contact-form { max-width: 100%; overflow: hidden; }
.contact-form * { box-sizing: border-box; }
.contact-form .form-group { margin-bottom: 1.25rem; }
.contact-form label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.required { color: #c62828; margin-left: 2px; }
.contact-form .form-checkboxes,
.contact-form .form-row,
.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea { max-width: 100%; }
.form-row { display: flex; gap: 1rem; max-width: 540px; }
.form-row .form-group { flex: 1; min-width: 0; }
.form-checkboxes { margin: 1.5rem 0; }
label.checkbox-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #f9f9f9;
  border: 2px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: normal;
}
label.checkbox-card:hover { border-color: #e8a838; background: #fffbf2; }
label.checkbox-card input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: #e8a838;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.checkbox-label { font-weight: 600; font-size: 1.05rem; display: block; }
.checkbox-text small { color: #666; font-size: 0.9rem; display: block; margin-top: 0.15rem; }
.email-feedback { font-size: 0.9rem; margin-top: 0.25rem; min-height: 1.25rem; }
.email-feedback.valid { color: #2e7d32; }
.email-feedback.invalid { color: #c62828; }
.email-feedback.typo { color: #e65100; }
.email-feedback.checking { color: #888; }
.contact-form .form-group input.email-verify-error { border-color: #c62828; }
.email-suggestion-btn {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: #e65100;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.email-suggestion-btn:hover { background: #bf360c; }
.form-notice { background: #e8f5e9; color: #2e7d32; padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; }
.form-alert { background: #ffebee; color: #c62828; padding: 1rem; border-radius: 6px; margin-bottom: 1.5rem; }

/* Hamburger Button */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  align-items: center;
  gap: 8px;
}
.hamburger-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hamburger-bars span {
  display: block;
  width: 26px;
  height: 3px;
  background: #1a2744;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.hamburger-label {
  font-family: 'Roboto', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a2744;
  letter-spacing: 0.5px;
}

/* Mobile Menu Drawer */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  pointer-events: none;
}
.mobile-menu-drawer.active {
  pointer-events: auto;
}
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-menu-drawer.active .mobile-menu-overlay {
  opacity: 1;
}
.mobile-menu-inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: #1b2a4a;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  overflow-y: auto;
}
.mobile-menu-drawer.active .mobile-menu-inner {
  transform: translateX(0);
}
.mobile-menu-header {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1.25rem;
}
.mobile-menu-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}
.mobile-menu-close:hover {
  color: #fff;
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}
.mobile-menu-nav a {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  padding: 0.9rem 1.6rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: color 0.2s;
}
.mobile-menu-nav a:hover {
  color: #e8a838;
  background: none;
}
.mobile-menu-nav a.active {
  color: #e8a838;
  background: none;
}
.mobile-sign-in {
  display: block;
  color: #e8a838 !important;
  border: 1.5px solid #e8a838;
  border-bottom: 1.5px solid #e8a838 !important;
  border-radius: 4px;
  text-align: center;
  padding: 0.6rem 1.5rem !important;
  margin: 1.5rem 1.6rem;
  font-weight: 700 !important;
  transition: background 0.2s, color 0.2s;
}
.mobile-sign-in:hover {
  background: #e8a838 !important;
  color: #1b2a4a !important;
}
body.mobile-menu-open {
  overflow: hidden;
}
body.mobile-menu-open #uc-chatbot {
  display: none;
}

/* Legal Pages */
.legal-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 800px; margin: 0 auto; }
.legal-card { background: #f9f9f9; padding: 1.5rem; border-radius: 8px; border: 1px solid #eee; }
.legal-card h3 { margin-bottom: 0.75rem; }
.legal-card h3 a { color: #1a3a5c; }
.legal-card h3 a:hover { color: #e8a838; }
.legal-card p { font-size: 0.95rem; color: #555; line-height: 1.6; }
.legal-text { max-width: 750px; margin: 0 auto; }
.legal-text h2 { margin-top: 2rem; margin-bottom: 1rem; font-size: 1.5rem; }
.legal-text h3 { margin-top: 1.5rem; margin-bottom: 0.75rem; font-size: 1.15rem; }
.legal-text p { margin-bottom: 1rem; line-height: 1.7; }
.legal-text ol { margin: 1rem 0 1rem 1.5rem; }
.legal-text ol li { margin-bottom: 0.5rem; line-height: 1.6; }
.legal-text hr { margin: 2rem 0; border: none; border-top: 1px solid #ddd; }
.legal-caps { font-size: 0.85rem; line-height: 1.6; }

/* Responsive — Mobile Content */
@media (max-width: 900px) {

  /* Header: the logo mark and MENU 8px from the screen edges on phones, clear of a notch (Steve 2026-10-18).
     The logo image starts 5px in (its orange mark sits about 3px inside it); MENU's 8px is the button's own padding. */
  .site-header { padding-left: max(5px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  .hamburger { margin-right: 0; }

  /* Hero */
  .hero { padding: 2.5rem 1.25rem; }
  .hero h1 { font-size: 1.75rem; text-align: center; }
  .hero-inner { flex-direction: column; align-items: center; }
  .hero-text { text-align: center; }
  .hero p { font-size: 1rem; }

  /* Logo */
  .logo img { height: 36px; }

  /* Trusted By / Marquee */
  .trusted-by { padding: 2rem 1rem; }
  .trusted-by h3 { font-size: 0.85rem; }
  .logo-marquee { --marquee-h: 55px; --sprite-w: 1584px; }

  /* Sections */
  .content-section { padding: 2rem 1.25rem; }
  .narrow-content { padding: 0; }
  .page-hero { padding: 2rem 1.25rem; }
  .page-hero h1 { font-size: 1.75rem; }
  .page-hero p { font-size: 1rem; }

  /* Feature cards / Steps / Grids */
  .feature-cards { flex-direction: column; }
  .steps { flex-direction: column; }
  .why-uc-inner { flex-direction: column; }
  .team-cards { flex-direction: column; }

  /* Contact */
  .contact-layout { flex-direction: column; }
  .contact-form-col, .contact-info-col { width: 100%; max-width: 100%; flex: 0 0 auto; }

  /* Legal */
  .legal-cards { grid-template-columns: 1fr; }

  /* Pricing */
  .pricing-cards { flex-direction: column; align-items: center; }
  .pricing-card { width: 100%; max-width: 400px; }

  /* CTA */
  .cta { padding: 2.5rem 1.25rem; }
  .cta h2 { font-size: 1.5rem; }

  /* Footer */
  .footer-columns { flex-direction: column; gap: 1.5rem; }
  .site-footer { padding: 2rem 1.25rem; }

  /* Buttons */
  .btn-lg { font-size: 1rem; padding: 0.75rem 1.5rem; }

  /* Admin bar */
  .admin-bar { padding: 0.3rem 1rem; font-size: 0.75rem; }
}

/* ============================================================
   Contract Pages
   ============================================================ */

.contract-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

/* Prometheus header strip */
.contract-prometheus-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 3px solid #e8a838;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}
.contract-prometheus-logo {
  font-size: 1.05rem;
  color: #1a3a5c;
  line-height: 1.5;
}
.contract-prometheus-logo strong {
  font-size: 1.15rem;
  display: block;
}
.contract-prometheus-logo span {
  color: #555;
  font-size: 0.9rem;
}
.contract-prometheus-contact {
  text-align: right;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
}

/* Form section */
.contract-form-section {
  margin-bottom: 2.5rem;
}
.contract-form-heading {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #333;
  font-family: 'Roboto', sans-serif;
}
.required-note {
  color: #e8a838;
  font-size: 0.95rem;
  font-weight: 400;
}
.required-asterisk {
  color: #e8a838;
  font-weight: 700;
}

/* Table layout for form fields */
.contract-field-group {
  text-align: left;
  padding: 1.4em 0 0.4em;
  font-size: 1.02em;
  font-weight: 700;
  border-bottom: 2px solid #333;
}
.contract-field-note {
  padding: 0.5em 0 0.9em;
  font-size: 0.9em;
  line-height: 1.5;
  color: #555;
}
.contract-fields-table {
  width: 100%;
  border-collapse: collapse;
}
.contract-fields-table tr + tr td {
  padding-top: 0.6rem;
}
.contract-field-label {
  width: 220px;
  vertical-align: middle;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
}
.contract-field-label label {
  font-weight: 500;
  font-size: 0.95rem;
  color: #333;
  white-space: nowrap;
}
.contract-field-input {
  padding-bottom: 0.5rem;
}
.contract-field-input input {
  max-width: 400px;
}
/* Checkboxes span both columns and wrap, because their labels are prose and
   the label column above cannot wrap. See ContractFormLayoutTest. */
.contract-field-checkbox {
  padding-bottom: 0.75rem;
}
.contract-field-checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: #333;
  white-space: normal;
  cursor: pointer;
}
.contract-field-checkbox input[type="checkbox"] {
  width: auto;
  margin-top: 0.2rem;
  flex: none;
}
/* Every checkbox a signer ticks on a contract page: the consent box above
   Submit Agreement and any checkbox field (TW #2828). Browsers draw them
   13px by default, which next to 16px text read as "super tiny". The box is
   24px and the whole label, text included, is the tap target, at least 44px
   tall. Size only: what is required is unchanged. */
label.contract-check { /* label.: outranks .form-group label { display: block } */
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.25rem 0;
  cursor: pointer;
  white-space: normal;
}
.contract-check input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0.05rem 0 0; /* sits level with the first line of the label */
  accent-color: #e8a838;
  cursor: pointer;
}

/* Contract body content */
.contract-body {
  border-top: 2px solid #e2e5ea;
  padding-top: 2rem;
  margin-bottom: 2.5rem;
}
.contract-body h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1a3a5c;
  margin-bottom: 1.25rem;
}
.contract-section-heading {
  color: #e8a838;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 1.75rem 0 0.75rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.contract-body p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: #3a3a3a;
}
.service-list {
  margin: 0.5rem 0 1rem 1.5rem;
  list-style-type: disc;
}
.service-list li {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.4rem;
  color: #3a3a3a;
}

/* free-trial box */
.trial-box {
  border: 2px solid #2e8b7a;
  background: #e8f8f5;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem 0;
}
.trial-box h3 {
  color: #2e8b7a;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  font-family: 'Barlow Semi Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.trial-box p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  color: #1a4a3a;
}
.trial-box p:last-child {
  margin-bottom: 0;
}

/* Agreement and signature section */
.contract-agreement-section {
  border-top: 2px solid #e2e5ea;
  padding-top: 2rem;
}
.contract-agreement-statement {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1.5rem;
}
.contract-sig-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.contract-sig-block {
  flex: 0 0 auto;
}
.contract-sig-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}
.contract-sig-hint {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.5rem;
}
.signature-canvas {
  border: 2px solid #ddd;
  border-radius: 4px;
  cursor: crosshair;
  background: #fafafa;
  touch-action: none;
  display: block;
  max-width: 100%;
}
.btn-clear-sig {
  margin-top: 0.5rem;
  padding: 0.25rem 1rem;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
}
.btn-clear-sig:hover {
  background: #e8e8e8;
}
.contract-sig-fields {
  flex: 1;
  min-width: 220px;
}
.contract-sig-fields .form-group {
  margin-bottom: 1rem;
}
.contract-sig-fields input[type="text"] {
  max-width: 300px;
}
.contract-sig-fields input[readonly] {
  background: #f0f0f0;
  color: #555;
  cursor: default;
}
.contract-consent {
  margin: 1rem 0 1.5rem;
}
.btn-contract-submit {
  display: inline-block;
  padding: 0.875rem 2.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 1.125rem;
  background: #e8a838;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-contract-submit:hover {
  background: #d4952e;
}
.btn-contract-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}
.contract-prometheus-sig {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e2e5ea;
  color: #555;
  font-size: 0.95rem;
}
.contract-signatory-name {
  font-style: italic;
  font-size: 1.1rem;
  color: #333;
  margin-top: 0.25rem;
}

/* Responsive */
@media (max-width: 640px) {
  .contract-prometheus-header {
    flex-direction: column;
    gap: 0.75rem;
  }
  .contract-prometheus-contact {
    text-align: left;
  }
  .contract-fields-table,
  .contract-fields-table tbody,
  .contract-fields-table tr,
  .contract-fields-table td {
    display: block;
    width: 100%;
  }
  .contract-field-label {
    width: auto;
    padding-right: 0;
    padding-bottom: 0.2rem;
  }
  .contract-field-input input {
    max-width: 100%;
  }
  .contract-sig-grid {
    flex-direction: column;
  }
  .signature-canvas {
    width: 100%;
    height: auto;
  }
}

/* Contract body content classes — ported from plc-contract plugin */
.contract-body .benefits-box {
  background: linear-gradient(135deg, #fff9f0 0%, #fff 100%);
  border: 2px solid #f7941d;
  border-radius: 8px;
  padding: 15px 20px;
  margin: 20px 0;
}
.contract-body .benefits-table,
.contract-body .pricing-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}
.contract-body .benefits-table th {
  background-color: #f7941d;
  color: white;
  padding: 8px 10px;
  text-align: left;
  font-size: 10pt;
}
.contract-body .benefits-table td {
  border: 1px solid #ddd;
  padding: 8px 10px;
  font-size: 10pt;
}
/* On a phone a contract table wider than the screen scrolls inside its own
   box. Otherwise the browser zooms the whole page out to fit it, shrinking the
   agreement checkbox and every input with it (TW #2828). Print and PDF are
   wider than this, so they are unaffected. */
@media (max-width: 600px) {
  .contract-body .benefits-table,
  .contract-body .pricing-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}
.contract-body .benefits-table tr:nth-child(even),
.contract-body .pricing-table tr:nth-child(even) {
  background-color: #fafafa;
}
.contract-body .pricing-table th {
  background-color: #444;
  color: white;
  padding: 10px;
  text-align: left;
  font-size: 10pt;
}
.contract-body .pricing-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  font-size: 10pt;
}
.contract-body .highlight {
  color: #f7941d;
  font-weight: bold;
}
.contract-body .savings-highlight {
  font-size: 12pt;
  font-weight: bold;
  color: #d35400;
  text-align: center;
  margin: 15px 0;
}
.contract-body .trial-box {
  background-color: #e8f4e8;
  border: 2px solid #27ae60;
  border-radius: 8px;
  padding: 15px 20px;
  margin: 20px 0;
}
.contract-body .trial-box h2 {
  color: #27ae60;
  border-bottom-color: #27ae60;
}
.contract-body ol,
.contract-body ul {
  padding-left: 1.5rem;
  margin: 0.75rem 0 0.75rem 0.25rem;
}
.contract-body li {
  margin: 0.25rem 0;
}
.contract-body .service-list {
  margin: 10px 0 10px 20px;
}
.contract-body .service-list li {
  margin: 5px 0;
}
.contract-body .addendum-section {
  background: #fffbf0;
  border: 2px solid #f7941d;
  border-radius: 8px;
  padding: 20px 25px;
  margin: 30px 0;
}
.contract-body .addendum-section h2 {
  color: #f7941d;
  border-bottom-color: #f7941d;
}

/* Group scheduling (TW #2793) */
.uc-group-tz-note { font-size: 0.95rem; color: #1b2a4a; background: rgba(232,168,56,0.08); padding: 0.5rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.uc-group-day { margin-bottom: 0.5rem; }
.uc-group-day-label { font-size: 1rem; font-weight: 600; color: #1b2a4a; margin: 0.75rem 0 0.5rem; }
.uc-group-day-head { display: flex; align-items: baseline; gap: 0.75rem; }
.uc-group-day-toggle { font-size: 0.85rem; padding: 0.15rem 0.6rem; border: 1px solid #e8a838; background: #fff; color: #d4872a; border-radius: 4px; cursor: pointer; font-family: inherit; }
.uc-group-day-toggle:hover { background: rgba(232,168,56,0.08); }
.uc-group-time { position: relative; display: block; }
.uc-group-time .uc-group-check { position: absolute; opacity: 0; pointer-events: none; }
.uc-group-time:has(.uc-group-check:focus-visible) { outline: 2px solid #1b2a4a; outline-offset: 2px; }
.uc-group-time.uc-time-selected::before { content: "\2713 "; color: #d4872a; font-weight: 700; }
.uc-group-hint { font-size: 0.9rem; color: #6c757d; }
.uc-group-preview { font-size: 0.95rem; margin-top: 0.5rem; }
.uc-group-skipped { color: #c62828; }
.uc-group-ranked { padding-left: 1.25rem; }
.uc-group-ranked-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 0; border-bottom: 1px solid #e2e5ea; }
.uc-group-ranked-item.uc-group-everyone .uc-group-who { color: #2e7d32; font-weight: 600; }
.uc-group-who { font-size: 0.9rem; color: #6c757d; }
.uc-group-when .uc-time-local { display: block; }
.uc-group-book-btn { padding: 0.5rem 1.25rem; font-size: 0.95rem; text-decoration: none; display: inline-block; }
.uc-group-people { list-style: none; padding: 0; }
.uc-group-people li { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px solid #f0f1f3; }
.uc-group-answered { font-size: 0.8rem; color: #2e7d32; font-weight: 600; }
.uc-group-waiting { font-size: 0.8rem; color: #b26a00; font-weight: 600; }
.uc-group-remind-form { display: inline; margin: 0; }
.uc-group-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 0 0 1.5rem; border: 1px solid #e2e5ea; border-radius: 6px; }
.uc-group-grid { border-collapse: separate; border-spacing: 0; font-size: 0.9rem; min-width: 100%; }
.uc-group-grid th, .uc-group-grid td { padding: 0.4rem 0.6rem; text-align: center; white-space: nowrap; border-bottom: 1px solid #f0f1f3; }
.uc-group-grid thead th { background: #f6f7f9; color: #1b2a4a; font-weight: 600; }
.uc-group-grid tbody th, .uc-group-grid tfoot th, .uc-group-grid .uc-group-grid-corner { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; font-weight: 500; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 #e2e5ea; }
.uc-group-grid .uc-group-grid-corner { background: #f6f7f9; z-index: 2; }
.uc-group-grid td.uc-group-grid-yes { color: #2e7d32; font-weight: 700; background: rgba(46,125,50,0.07); }
.uc-group-grid tr.uc-group-grid-waiting th, .uc-group-grid tr.uc-group-grid-waiting td { color: #8a8f98; }
.uc-group-grid tfoot td, .uc-group-grid tfoot th { font-weight: 700; border-top: 2px solid #e2e5ea; border-bottom: 0; }
.uc-group-grid tfoot td.uc-group-grid-all { color: #fff; background: #2e7d32; }
.uc-group-grid .uc-group-grid-days th[scope="colgroup"] { text-align: left; border-left: 1px solid #e2e5ea; }
@media (max-width: 600px) {
  .uc-group-grid { font-size: 0.85rem; }
  .uc-group-grid tbody th, .uc-group-grid tfoot th, .uc-group-grid .uc-group-grid-corner { max-width: 7.5rem; }
  .uc-group-grid th, .uc-group-grid td { padding: 0.35rem 0.45rem; }
}
.uc-group-remind-btn { font-size: 0.85rem; padding: 0.25rem 0.75rem; border: 1px solid #e8a838; background: #fff; color: #d4872a; border-radius: 4px; cursor: pointer; }
.uc-group-cta { margin: 0 0 1.5rem; }
.uc-group-cta-btn { display: inline-block; padding: 0.7rem 1.4rem; border: 2px solid #e8a838; border-radius: 6px; background: #fff; color: #b8741e; font-weight: 700; text-decoration: none; text-align: center; }
.uc-group-cta-btn:hover { background: rgba(232,168,56,0.1); color: #9a5f14; }
@media (max-width: 600px) { .uc-group-cta-btn { display: block; width: 100%; } }
/* Group scheduler page header (Steve 2026-10-01): "Group Scheduler" in the brand orange, bigger than a standard hero title. */
.page-hero h1.uc-group-title, .page-hero .uc-group-subtitle { position: relative; z-index: 2; }
.page-hero h1.uc-group-title { color: #e8a838; font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 0.5rem; }
.uc-group-subtitle { color: #fff; font-size: 1.6rem; font-weight: 700; margin: 0 0 1rem; }
@media (max-width: 600px) {
  .page-hero h1.uc-group-title { font-size: 2.4rem; }
  .uc-group-subtitle { font-size: 1.2rem; }
}