/* ==========================================================================
   Worktap — Design tokens
   ========================================================================== */
:root{
  --navy-dark:#0d141a;
  --navy-text:#0a1f18;
  --teal:#3B9EAA;
  --teal-bright:#4ab4c2;
  --green-dark:#1e4035;
  --green:#4bc48a;
  --teal-deep:#3d626a;
  --green-deep:#0f2922;
  --blue:#397BAA;
  --white:#ffffff;
  --gray-50:#f7f8f8;
  --gray-100:#f0f0f0;
  --gray-300:#d8dcdd;
  --gray-500:#6b7478;
  --ink:#1c1c1c;

  --font-primary:'Roboto', Arial, sans-serif;

  --radius-lg:24px;
  --radius-md:14px;
  --radius-pill:999px;

  --wrap-max:1200px;
  --wrap-narrow-max:780px;

  --shadow-card:0 8px 30px rgba(13,20,26,0.08);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-primary);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0 0 16px; font-weight:900; line-height:1.15; color:var(--navy-dark); }
h1{ font-size:clamp(2.2rem, 5vw, 3.8rem); }
h2{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
h3{ font-size:1.25rem; font-weight:700; }
p{ margin:0 0 16px; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ max-width:var(--wrap-max); margin:0 auto; padding:0 24px; }
.wrap-narrow{ max-width:var(--wrap-narrow-max); margin:0 auto; padding:0 24px; }
.center{ text-align:center; }
.lede{ font-size:1.15rem; color:var(--gray-500); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--teal); color:#fff;
  padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:16px; top:16px; }

/* Buttons */
.btn{
  display:inline-block;
  font-weight:700;
  font-size:1rem;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  border:2px solid transparent;
  cursor:pointer;
  text-align:center;
  transition:transform .15s ease, background .15s ease, opacity .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:3px solid var(--teal-bright); outline-offset:2px; }
.btn-teal{ background:var(--teal); color:#fff; }
.btn-teal:hover{ background:var(--teal-bright); }
.btn-outline-green{ background:transparent; color:var(--green); border-color:var(--green); }
.btn-outline-green:hover{ background:rgba(75,196,138,0.1); }
.btn-pill{ padding:10px 24px; font-size:0.95rem; }
.btn-lg{ padding:18px 36px; font-size:1.1rem; }
.btn-block{ display:block; width:100%; text-align:center; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  border-bottom:4px solid var(--teal);
  background:#fff;
  position:sticky; top:0; z-index:50;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px;
  gap:24px;
}
.logo{ display:flex; align-items:center; gap:8px; }
.logo-img{ height:40px; width:auto; }
.logo-text{ font-size:1.5rem; font-weight:900; letter-spacing:-0.02em; }
.logo-work{ color:var(--navy-dark); }
.logo-tap{ color:var(--teal); font-weight:700; }
.main-nav{ display:flex; gap:28px; font-weight:500; }
.main-nav a{ border-bottom:2px solid transparent; padding-bottom:2px; }
.main-nav a:hover{ border-color:var(--teal); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:88vh;
  display:flex; align-items:center;
  overflow:hidden;
  background:var(--navy-dark) url('/assets/img/home-hero.jpg') center / cover no-repeat;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,20,26,0.72) 0%, rgba(13,20,26,0.55) 45%, rgba(13,20,26,0.85) 100%);
}
.hero-content{
  position:relative; z-index:2; color:#fff; padding-top:60px; padding-bottom:60px;
  max-width:820px;
}
.hero-content h1{ color:#fff; }
.hero-sub{ font-size:1.3rem; max-width:600px; }
.hero-managed{ font-weight:700; color:var(--teal-bright); text-transform:uppercase; letter-spacing:.04em; font-size:.9rem; margin-bottom:28px; }
.hero-trust{ margin-top:20px; font-size:.9rem; color:var(--gray-300); }
.hero-demo{ font-size:1rem; color:var(--gray-300); }
.hero-demo a{ color:var(--teal-bright); font-weight:700; border-bottom:1px solid currentColor; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section{ padding:80px 0; }
.section-light{ background:#fff; }
.section-dark{ background:var(--teal-deep); color:#fff; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-dark p{ color:var(--gray-300); }
.section-dark.center p{ color:var(--gray-300); }

/* Feature grid */
.feature-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.feature-card img{ width:100%; height:auto; border-radius:var(--radius-md); margin-bottom:20px; aspect-ratio:4/3; object-fit:cover; }
.feature-card h3{ color:#fff; margin-bottom:12px; }
.feature-card p{ color:var(--gray-300); font-size:.98rem; }

/* Steps grid */
.steps-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:40px; margin-top:48px;
}
.step{ border-top:1px solid rgba(255,255,255,0.15); padding-top:20px; }
.step-num{ display:block; color:#fff; font-weight:900; font-size:1rem; letter-spacing:.05em; margin-bottom:8px; }
.step h3{ color:#fff; }
.pro-note{ font-size:.9rem; color:#cfe3e6; font-style:italic; }

/* Testimonials */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:40px; }
.testimonial{ margin:0; background:var(--gray-50); border-radius:var(--radius-md); padding:0 0 24px; overflow:hidden; }
.testimonial img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin-bottom:20px; }
.testimonial p{ padding:0 24px; font-size:1.05rem; color:var(--ink); }
.testimonial footer{ padding:0 24px; font-weight:700; color:var(--teal); font-size:.9rem; }

/* Demo number */
.demo-number{
  display:inline-block; margin-top:16px; font-size:2.2rem; font-weight:900;
  color:var(--teal-bright); letter-spacing:.02em;
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.pricing-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:48px;
  align-items:stretch;
}
.plan-card{
  position:relative;
  border-radius:var(--radius-lg);
  padding:36px 32px;
  display:flex; flex-direction:column;
  color:#fff;
}
.plan-core{ background:var(--teal-deep); }
.plan-pro{ background:var(--green-dark); }
.plan-head h3{ color:#fff; margin-bottom:4px; }
.plan-price{ font-size:2rem; font-weight:900; color:#fff; margin-bottom:8px; }
.plan-price span{ font-size:1rem; font-weight:500; color:var(--gray-300); }
.plan-desc{ color:var(--gray-300); margin-bottom:20px; }
.plan-core .plan-head{ border-bottom:1px solid rgba(255,255,255,0.12); padding-bottom:20px; margin-bottom:20px; }
.plan-pro .plan-head{ border-bottom:1px solid rgba(75,196,138,0.25); padding-bottom:20px; margin-bottom:20px; }
.plan-features{ flex:1; margin-bottom:24px; }
.plan-features li{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; font-size:1.02rem;
}
.tick{ width:22px; height:22px; flex-shrink:0; margin-top:1px; }
.tick-teal{ color:#fff; }
.tick-green{ color:var(--green); }
.plan-best{
  background:rgba(255,255,255,0.06);
  border-radius:var(--radius-md);
  padding:18px 20px;
  font-size:.92rem;
  color:var(--gray-300);
  margin-bottom:24px;
}
.plan-best strong{ color:#fff; }
.badge-soon{
  position:absolute; top:24px; right:24px;
  background:var(--green); color:var(--green-deep);
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:6px 14px; border-radius:var(--radius-pill);
}
.plan-footnote{ margin-top:32px; color:var(--gray-500); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list{ margin-top:40px; }
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.15);
  padding:20px 0;
}
.faq-item summary{
  cursor:pointer; font-weight:700; font-size:1.05rem; color:#fff;
  list-style:none; position:relative; padding-right:32px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; position:absolute; right:0; top:0; font-size:1.4rem; color:#fff;
  transition:transform .15s ease;
}
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item p{ margin-top:14px; color:var(--gray-300); }

/* ==========================================================================
   Lead form
   ========================================================================== */
.lead-form{
  display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px;
}
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row-full{ grid-column:1 / -1; }
.form-row label{ font-weight:700; font-size:.92rem; }
.form-row input, .form-row select{
  padding:14px 16px; border:1px solid var(--gray-300); border-radius:var(--radius-md);
  font-family:inherit; font-size:1rem; background:#fff;
}
.form-row input:focus, .form-row select:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(59,158,170,0.15);
}
.form-status{ grid-column:1/-1; text-align:center; font-weight:700; min-height:1.4em; }
.form-status.success{ color:var(--teal); }
.form-status.error{ color:#b03434; }

/* ==========================================================================
   Legal / content pages (privacy, terms)
   ========================================================================== */
.legal{ padding-top:16px; }
.legal h1{ margin-bottom:8px; }
.legal .legal-intro{ font-size:1.1rem; color:var(--gray-500); margin-bottom:32px; }
.legal h2{ font-size:1.35rem; margin-top:40px; margin-bottom:12px; color:var(--navy-dark); }
.legal p{ color:var(--ink); }
.legal ul{ list-style:disc; padding-left:24px; margin:0 0 18px; }
.legal li{ margin-bottom:8px; }
.legal a{ color:var(--teal); text-decoration:underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:var(--gray-50); padding:60px 0 24px; }
.footer-inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:40px; }
.footer-logo{ height:56px; width:auto; }
.footer-brand address{ font-style:normal; color:var(--gray-500); margin-top:16px; line-height:1.7; }
.footer-links p{ margin-bottom:10px; }
.footer-links a{ color:var(--teal); }
.footer-links a:hover{ text-decoration:underline; }
.footer-cta a{ font-weight:700; color:var(--navy-dark); }
.footer-social{ display:flex; gap:14px; margin-bottom:14px; }
.social-link{ display:inline-flex; color:var(--teal); transition:color .15s ease, transform .15s ease; }
.social-link:hover{ color:var(--teal-bright); transform:translateY(-2px); }
.social-link svg{ width:22px; height:22px; }
.footer-bottom{ border-top:1px solid var(--gray-300); padding-top:20px; }
.footer-bottom p{ margin:0; font-size:.85rem; color:var(--gray-500); }
.footer-bottom a{ color:var(--teal); }

/* ==========================================================================
   Website product page (/website/)
   Page-specific extensions used only by the /website/ funnel.
   ========================================================================== */
.hero-static{
  min-height:70vh;
  background:#0d141a url('/assets/img/website-hero.jpg') center / cover no-repeat;
}
.hero-static .hero-overlay{
  background:
    linear-gradient(90deg, rgba(13,20,26,0.82) 0%, rgba(13,20,26,0.5) 38%, rgba(13,20,26,0.08) 66%, rgba(13,20,26,0) 82%),
    linear-gradient(0deg, rgba(13,20,26,0.55) 0%, rgba(13,20,26,0) 28%);
}

.pricing-grid-single{
  grid-template-columns:minmax(0, 480px);
  justify-content:center;
}

/* The single pricing card sits on a teal (section-dark) section on this page,
   so give it a navy fill to stand out instead of blending into the teal.
   Home-page Core card is on a light section, so this rule doesn't touch it. */
.section-dark .plan-core{ background:var(--navy-dark); }

/* FAQ rendered on a light section here, rather than the dark home-page one. */
.faq-list-light .faq-item{ border-bottom-color:var(--gray-300); }
.faq-list-light .faq-item summary{ color:var(--navy-dark); }
.faq-list-light .faq-item summary::after{ color:var(--teal); }
.faq-list-light .faq-item p{ color:var(--gray-500); }

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  max-width:1080px; margin:0 auto;
  background:var(--navy-dark); color:#fff;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-md);
  box-shadow:0 14px 44px rgba(0,0,0,0.35);
  padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cookie-text{ margin:0; font-size:.95rem; color:var(--gray-300); max-width:660px; }
.cookie-text a{ color:var(--teal-bright); text-decoration:underline; }
.cookie-actions{ display:flex; gap:12px; flex-shrink:0; }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.55); }
.btn-outline-light:hover{ background:rgba(255,255,255,0.12); }
.cookie-settings-link{ cursor:pointer; }
@media (max-width:600px){
  .cookie-banner{ padding:16px; gap:14px; }
  .cookie-actions{ width:100%; }
  .cookie-actions .btn{ flex:1; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px){
  .feature-grid, .testimonial-grid, .steps-grid{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
  .lead-form{ grid-template-columns:1fr; }
  .hero{ min-height:78vh; }

  /* Mobile header: logo + Call Us on the top row, nav centred beneath them */
  .header-inner{ flex-wrap:wrap; row-gap:10px; }
  .logo{ order:1; }
  .site-header .btn-pill{ order:2; }
  .main-nav{ order:3; width:100%; justify-content:center; gap:28px; }

  /* Home hero: mobile browsers block video autoplay, so drop it and let the
     poster/fallback image on .hero show instead. */
  .hero-video{ display:none; }

  /* Website hero: bias the crop to the right so the person is in frame, and
     use an overall vertical overlay (text spans full width on mobile). */
  .hero-static{ background-position:68% center; }
  .hero-static .hero-overlay{
    background:linear-gradient(180deg, rgba(13,20,26,0.68) 0%, rgba(13,20,26,0.5) 45%, rgba(13,20,26,0.85) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn{ transition:none; }
}

/* ==========================================================================
   Missed-call revenue calculator
   Namespaced under #worktap-calculator / .wt-* — self-contained, no collisions.
   ========================================================================== */
#calculator{ padding-top:24px; }
#worktap-calculator{
  --wt-teal:#3B9EAA;
  --wt-teal-hover:#4ab4c2;
  --wt-bg:#0d1f21;
  --wt-bg2:#112527;
  --wt-border:#1e3e41;
  --wt-track:#1e3537;
  --wt-text:#e8f0f1;
  --wt-muted:#7a9ea3;
  --wt-dim:#4a6e73;
  --wt-label:#a0bec2;
}
.wt-calc{
  font-family:var(--font-primary);
  background:var(--wt-bg);
  border-radius:16px;
  padding:2.5rem;
  color:var(--wt-text);
  max-width:640px;
  margin:0 auto;
  box-shadow:var(--shadow-card);
}
.wt-eyebrow{
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--wt-teal); margin:0 0 8px;
}
.wt-heading{ font-size:30px; font-weight:900; color:var(--wt-text); margin:0 0 .25rem; line-height:1.15; }
.wt-sub{ font-size:14px; font-weight:400; color:var(--wt-muted); margin:0 0 2rem; }
.wt-fields{ display:flex; flex-direction:column; gap:1.5rem; margin-bottom:2rem; }
.wt-field label{ display:block; font-size:13px; font-weight:500; color:var(--wt-label); margin-bottom:10px; letter-spacing:.01em; }
.wt-field label span{ color:var(--wt-teal); font-weight:400; }
.wt-slider-container{ position:relative; height:24px; display:flex; align-items:center; }
.wt-slider-track{ position:absolute; left:0; right:0; height:4px; background:var(--wt-track); border-radius:2px; }
.wt-slider-fill{ position:absolute; left:0; top:0; height:4px; background:var(--wt-teal); border-radius:2px; pointer-events:none; }
.wt-calc input[type=range]{
  position:absolute; left:0; width:100%;
  -webkit-appearance:none; appearance:none; background:transparent;
  margin:0; padding:0; cursor:pointer; height:24px;
}
.wt-calc input[type=range]::-webkit-slider-runnable-track{ background:transparent; height:4px; }
.wt-calc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--wt-teal); border:3px solid var(--wt-bg); cursor:pointer;
  margin-top:-9px; box-shadow:0 0 0 2px rgba(59,158,170,0.3);
}
.wt-calc input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--wt-teal); border:3px solid var(--wt-bg); cursor:pointer; box-sizing:border-box;
}
.wt-calc input[type=range]::-moz-range-track{ background:transparent; height:4px; }
.wt-calc input[type=range]:focus{ outline:none; }
.wt-calc input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px rgba(74,180,194,0.5); }
.wt-calc input[type=range]:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px rgba(74,180,194,0.5); }
.wt-slider-labels{ display:flex; justify-content:space-between; font-size:11px; color:var(--wt-dim); margin-top:8px; }
.wt-divider{ height:1px; background:var(--wt-track); margin:2rem 0; }
.wt-result{ background:var(--wt-bg2); border:1px solid var(--wt-border); border-radius:12px; padding:1.5rem; margin-bottom:1rem; }
.wt-result-label{ font-size:13px; font-weight:400; color:var(--wt-muted); margin-bottom:6px; }
.wt-result-amount{ font-size:56px; font-weight:900; color:var(--wt-text); line-height:1; letter-spacing:-.02em; transition:color .3s; }
.wt-result-amount.high{ color:#e06050; }
.wt-result-amount.mid{ color:#e0a840; }
.wt-result-amount.low{ color:#4bc48a; }
.wt-breakdown{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:0; }
.wt-mini-card{ background:var(--wt-bg2); border:1px solid var(--wt-border); border-radius:10px; padding:12px 14px; text-align:center; }
.wt-mini-label{ font-size:11px; font-weight:400; color:var(--wt-muted); margin-bottom:4px; }
.wt-mini-value{ font-size:19px; font-weight:700; color:var(--wt-text); }

@media (max-width: 560px){
  .wt-calc{ padding:1.75rem 1.25rem; }
  .wt-heading{ font-size:24px; }
  .wt-result-amount{ font-size:44px; }
  .wt-breakdown{ grid-template-columns:1fr; }
}