/*
 * Visual design layer for the public marketing site. Loaded last (after
 * base.css / components.css - see templates/base.html), so the rules
 * here intentionally extend and override the plainer structure in
 * base.css. All colour/spacing comes from theme/tokens.css custom
 * properties; the only script on this site is static/js/bubbles.js (the
 * cursor-linked bubbles), so every other effect below is pure CSS +
 * inline SVG.
 */

/* ---------------------------------------------------------------- shell */

body {
  position: relative;
  /* Kelly-green gradient poured from the very top (behind the sticky
     header and hero), fading to white by ~45% of the first viewport,
     plus a brand glow top-right - the original wash - now layered over
     a faint grid (the ::before below) for some texture instead of
     reading as a plain blur. */
  background:
    linear-gradient(
      180deg,
      var(--color-brand-100) 0%,
      var(--color-brand-50) 14%,
      rgba(233, 246, 234, 0) 44%
    ),
    radial-gradient(46rem 30rem at 90% -6%, rgba(61, 156, 71, 0.14), transparent 70%),
    #ffffff;
  background-repeat: no-repeat;
}

body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  /* Scattered soft bubbles, a few tile-repeat patterns of different
     sizes and offsets so they don't read as one uniform dot grid. */
  background-image:
    radial-gradient(circle at 10% 20%, rgba(61, 156, 71, 0.28) 0 7px, transparent 8px),
    radial-gradient(circle at 60% 65%, rgba(61, 156, 71, 0.22) 0 10px, transparent 11px),
    radial-gradient(circle at 85% 15%, rgba(61, 156, 71, 0.24) 0 5px, transparent 6px),
    radial-gradient(circle at 35% 80%, rgba(61, 156, 71, 0.2) 0 6px, transparent 7px),
    radial-gradient(circle at 15% 55%, rgba(61, 156, 71, 0.18) 0 4px, transparent 5px);
  background-size: 220px 220px, 260px 260px, 180px 180px, 240px 240px, 150px 150px;
  -webkit-mask-image: radial-gradient(80% 75% at 50% 0%, #000, transparent 85%);
  mask-image: radial-gradient(80% 75% at 50% 0%, #000, transparent 85%);
  pointer-events: none;
  animation: bubble-drift 50s linear infinite;
}

/* Each bubble layer drifts exactly one of its own tile sizes, in its own
   direction, so the loop is seamless and the layers slide past each other
   at different speeds rather than moving as one sheet. */
@keyframes bubble-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to {
    background-position: 220px 220px, -260px 260px, 180px -180px, -240px -240px, 150px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

/* static/js/bubbles.js draws the same bubbles on a canvas (drifting, and
   linking up near the cursor); the CSS ones above stay as the no-JS and
   reduced-motion fallback. */
body.has-bubbles::before {
  display: none;
}

.bubble-network {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 900px;
  -webkit-mask-image: radial-gradient(80% 75% at 50% 0%, #000, transparent 85%);
  mask-image: radial-gradient(80% 75% at 50% 0%, #000, transparent 85%);
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: saturate(1.8) blur(12px);
  -webkit-backdrop-filter: saturate(1.8) blur(12px);
}

.site-header .brand,
.footer-brand .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}

/* The "TockLogic" text next to components/_logo_mark.html's mark - bold,
   letter-spaced, gradient-filled in the same brand green as the mark's
   own background, rather than plain body text. Outfit is already this
   site's one self-hosted typeface, so the wordmark reuses it at
   ExtraBold rather than pulling in a second display font just for this.
   Same rule is duplicated in the Angular app's own web/src/styles.css -
   kept in sync deliberately, like every other cross-app token here. */
.tocklogic-wordmark {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(90deg, var(--color-brand-700), var(--color-brand-400));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------- eyebrow */

.eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 7px 16px 7px 12px;
  /* same corner radius as .btn so labels and buttons read as one family */
  border-radius: var(--radius-md);
  /* dark green tag: the one high-contrast element in an otherwise pale
     layout, so it holds up over white sections and the bubble wash */
  background: linear-gradient(135deg, var(--color-brand-700), var(--color-brand-500));
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 16px -6px rgba(41, 107, 49, 0.4);
}

/* glossy highlight along the top edge */
.eyebrow::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 55%);
  pointer-events: none;
}

/* live-status dot with an expanding ring */
.eyebrow::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--color-brand-300);
  box-shadow: 0 0 0 0 rgba(114, 196, 123, 0.7);
  animation: eyebrow-pulse 2.4s ease-out infinite;
}

@keyframes eyebrow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(114, 196, 123, 0.7); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(114, 196, 123, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::before {
    animation: none;
  }
}

.section .eyebrow {
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 72px;
  text-align: left;
}

/* dotted field behind the hero */
.hero::before {
  content: '';
  position: absolute;
  inset: -40% 0 auto 0;
  height: 620px;
  background-image: radial-gradient(var(--color-gray-300) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 75%);
  mask-image: radial-gradient(60% 60% at 50% 30%, #000, transparent 75%);
  opacity: 0.5;
  pointer-events: none;
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 56px;
}

.hero h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  margin: 0 0 18px;
}

.hero p {
  font-size: 18px;
  max-width: 34rem;
  margin: 0 0 28px;
}

.hero .actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.hero .btn {
  padding: 12px 22px;
  font-size: 15px;
}

.hero-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--color-gray-500);
}

.hero-media {
  position: relative;
}

.hero-media::after {
  /* soft brand glow pooled under the illustration */
  content: '';
  position: absolute;
  inset: 12% 4% -8% 4%;
  background: radial-gradient(closest-side, rgba(61, 156, 71, 0.22), transparent);
  filter: blur(10px);
  z-index: -1;
}

.hero-media img,
.hero-media svg {
  display: block;
  width: 100%;
  height: auto;
}

/* the illustration carries its own padding for soft shadows, so on wide screens let it bleed to fill the column */
@media (min-width: 901px) {
  .hero-media img,
  .hero-media svg {
    width: calc(100% + 64px);
    max-width: none;
    margin: -32px;
  }
}

/* -------------------------------------------------------- logos / trust */

.trustbar {
  padding: 22px 0 0;
  text-align: center;
}

.trustbar p {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gray-400);
}

.trustbar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trustbar li {
  padding: 6px 14px;
  border: 1px solid var(--color-gray-200);
  border-radius: 9999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-gray-600);
}

/* --------------------------------------------------------------- sections */

.section {
  padding: 72px 0;
}

.section-head {
  max-width: 640px;
  margin-bottom: 36px;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.section-head.center .eyebrow,
.section-head.center .lede {
  /* neither a flex pill nor a max-width block inherits text-align:center */
  margin-left: auto;
  margin-right: auto;
}

.section.tight {
  padding: 28px 0;
}

/* text + illustration, side by side */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 48px;
  align-items: center;
}

/* Media on the left, copy on the right - for alternating feature rows. */
.split.reverse {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.section-media img,
.section-media svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .split,
  .split.reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* When stacked, always show the copy first. */
  .split.reverse .section-media {
    order: 2;
  }

  .section-media {
    max-width: 440px;
    margin: 0 auto;
  }
}

.section.alt {
  background: var(--color-gray-50);
  border-top: 1px solid var(--color-gray-200);
  border-bottom: 1px solid var(--color-gray-200);
}

/* ----------------------------------------------------------- feature grid */

/* Fixed 3 across (2 tablet, 1 phone) so the six cards form even rows and
   sit centred under the heading, rather than auto-fit leaving a ragged,
   left-aligned last row. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature {
  position: relative;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-theme-xs);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-theme-lg);
  border-color: var(--color-brand-200);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--color-brand-50);
  color: var(--color-brand-600);
}

.feature-icon svg {
  width: 20px;
  height: 20px;
}

.feature h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.feature p {
  margin: 0;
  font-size: 14px;
  color: var(--color-gray-600);
}

/* --------------------------------------------------------------- steps */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  counter-reset: step;
}

.step {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-theme-xs);
}

/* a large faint icon watermark, top-right of each step */
.step-icon {
  position: absolute;
  top: 18px;
  right: 16px;
  color: var(--color-brand-500);
  opacity: 0.14;
  pointer-events: none;
}

.step-icon svg {
  width: 42px;
  height: 42px;
}

/* full-width request/response flow diagram above the steps */
.flow-banner {
  margin: 4px auto 40px;
  max-width: 960px;
}

.flow-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 9999px;
  background: var(--color-brand-600);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* connector line between step cards on wide screens */
@media (min-width: 900px) {
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 41px;
    right: -13px;
    width: 26px;
    height: 2px;
    background: repeating-linear-gradient(
      to right,
      var(--color-brand-300) 0 5px,
      transparent 5px 10px
    );
  }
}

.step h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-gray-900);
}

.step p {
  margin: 0;
  font-size: 14px;
  color: var(--color-gray-600);
}

.step code {
  background: var(--color-gray-100);
  color: var(--color-gray-800);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.86em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------- pricing */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-theme-xs);
}

.price-card.is-featured {
  border-color: var(--color-brand-400);
  box-shadow: 0 0 0 1px var(--color-brand-400), var(--shadow-theme-lg);
}

.price-flag {
  position: absolute;
  top: -11px;
  left: 24px;
  padding: 3px 10px;
  border-radius: 9999px;
  background: var(--color-brand-600);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.price-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-brand-700);
}

.price-amount {
  margin: 2px 0 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
}

.price-amount span {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.price-meta {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-gray-600);
}

.price-desc {
  margin: 10px 0 16px;
  font-size: 13.5px;
  color: var(--color-gray-600);
  min-height: 3.4em;
}

.price-card .btn {
  width: 100%;
}

.price-features {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--color-gray-100);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.price-features li {
  display: flex;
  gap: 9px;
  font-size: 13px;
  color: var(--color-gray-700);
}

.price-features svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--color-brand-500);
}

/* ------------------------------------------------------------- CTA band */

.cta-band {
  position: relative;
  overflow: hidden;
  margin: 40px 0 0;
  padding: 56px 0;
  background: linear-gradient(120deg, var(--color-brand-700), var(--color-brand-500));
  color: #fff;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 120% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(70% 120% at 100% 0%, #000, transparent 70%);
}

/* a large off-canvas ring, bottom-left */
.cta-band::after {
  content: '';
  position: absolute;
  left: -120px;
  bottom: -160px;
  width: 320px;
  height: 320px;
  border-radius: 9999px;
  border: 44px solid rgba(255, 255, 255, 0.08);
}

.cta-band .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.cta-band h2 {
  margin: 0 0 4px;
  font-size: 26px;
  color: #fff;
}

.cta-band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
}

.cta-band .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta-band .btn-primary {
  background: #fff;
  color: var(--color-brand-700);
}

.cta-band .btn-primary:hover {
  background: var(--color-brand-25);
}

.cta-band .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.cta-band .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------- inner page header */

.page-header {
  position: relative;
  overflow: hidden;
  padding: 64px 0 28px;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: -60% 0 auto 0;
  height: 380px;
  background-image: radial-gradient(var(--color-gray-300) 1px, transparent 1.6px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(50% 60% at 30% 20%, #000, transparent 75%);
  mask-image: radial-gradient(50% 60% at 30% 20%, #000, transparent 75%);
  opacity: 0.45;
  pointer-events: none;
}

.page-header .container {
  position: relative;
}

.page-header h1 {
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.12;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  color: var(--color-gray-900);
}

.page-header .lede {
  color: var(--color-gray-600);
  font-size: 17px;
  max-width: 46rem;
}

/* icon chip on a top-level prose heading (policies) */
.prose h2:has(> .h2-ico) {
  display: flex;
  align-items: center;
  gap: 14px;
}

.prose h2 .h2-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-brand-200, #cfecd2);
  color: var(--color-brand-600);
}

.prose h2 .h2-ico svg {
  width: 22px;
  height: 22px;
}

.legal-updated {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-gray-500);
}

/* an illustration dropped inline in prose (e.g. the pricing FAQ) */
.inline-figure {
  margin: 22px 0 26px;
  padding: 16px;
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-theme-xs);
}

.inline-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* contact page: form beside a supporting illustration */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.contact-aside img {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
}

.contact-aside p {
  margin: 14px 0 0;
  max-width: 320px;
  font-size: 13.5px;
  color: var(--color-gray-600);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-aside {
    max-width: 360px;
  }
}

/* --------------------------------------------------------------- footer */

.site-footer {
  margin-top: 0;
  padding: 40px 0;
  background: var(--color-gray-50);
}

.site-footer .container {
  align-items: center;
  gap: 20px 40px;
}

.footer-brand {
  max-width: 24rem;
}

.footer-brand .brand {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-gray-900);
}

.footer-brand p {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-gray-500);
}

/* A horizontal link row - the earlier vertical stack read like an
   unstyled list. */
.site-footer nav {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.site-footer nav a {
  color: var(--color-gray-600);
  font-size: 14px;
}

.site-footer nav a:hover {
  color: var(--color-gray-900);
  text-decoration: none;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .hero {
    padding: 56px 0 48px;
    text-align: center;
  }

  .hero .container {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero .actions {
    justify-content: center;
  }

  .hero .eyebrow {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-media {
    order: -1;
    max-width: 460px;
    margin: 0 auto;
  }
}

/* The menu button only exists on narrow screens (shown in the max-width: 640px block below). */
.nav-toggle {
  display: none;
}

@media (max-width: 640px) {
  /* Without JavaScript the links simply wrap under the logo; with it (the `js` class on <html>) they sit behind a menu button. */
  .site-header .container {
    position: relative;
    flex-wrap: wrap;
    height: auto;
    min-height: 72px;
  }

  .site-header nav {
    gap: 14px;
    flex-wrap: wrap;
  }

  .js .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--color-gray-200);
    border-radius: 10px;
    background: #fff;
    color: var(--color-gray-700);
    cursor: pointer;
  }

  .nav-toggle .nav-toggle-close,
  .site-header.nav-open .nav-toggle .nav-toggle-open {
    display: none;
  }

  .site-header.nav-open .nav-toggle .nav-toggle-close {
    display: inline;
  }

  .js .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 24px 18px;
    background: #fff;
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: 0 14px 28px rgba(16, 24, 40, 0.1);
  }

  .js .site-header.nav-open nav {
    display: flex;
  }

  .js .site-header nav a:not(.btn) {
    display: block;
    padding: 13px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--color-gray-100);
  }

  .js .site-header nav .btn {
    margin-top: 14px;
    justify-content: center;
    text-align: center;
  }

  .cta-band .container {
    justify-content: center;
    text-align: center;
  }
}

/* ---------------------------------------------------- plan comparison */
.compare {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-theme-xs);
}

.compare th,
.compare td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: 15px;
  text-align: center;
}

.compare thead th {
  background: var(--color-gray-50);
  font-weight: 600;
  color: var(--color-gray-700);
}

.compare tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--color-gray-800);
}

.compare tbody tr:last-child th,
.compare tbody tr:last-child td {
  border-bottom: 0;
}

.compare td {
  color: var(--color-brand-600);
  font-weight: 700;
}

.compare td.no {
  color: var(--color-gray-400);
  font-weight: 400;
}

/* a real screenshot of the app, framed like a window */
.section-media img.shot {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 44px rgba(11, 31, 19, 0.14);
}

/* overview video */
.btn-video {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.video-dialog {
  width: min(1100px, 94vw);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #000;
  overflow: visible;
}

.video-dialog::backdrop {
  background: rgba(16, 24, 40, 0.72);
}

.video-dialog video {
  display: block;
  width: 100%;
  border-radius: 16px;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* The captions come from the .vtt track and the browser draws them; only the properties ::cue allows can be styled
   (font, size, colour, background), and a viewer's own caption settings still win. */
.video-dialog video::cue {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.35;
  color: #fff;
  background: rgba(16, 24, 40, 0.82);
}

.video-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--color-gray-800);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Screenshots are cropped tight to the window or phone; the shadow follows their rounded corners (no boxed edges) */
.section-media img[src$='feature-schedule.png'],
.section-media img[src$='feature-timesheet.png'],
.section-media img[src$='feature-mobile.png'] {
  filter: drop-shadow(0 22px 34px rgba(11, 31, 19, 0.2)) drop-shadow(0 3px 8px rgba(11, 31, 19, 0.1));
}

/* the phone screenshot is only 600px wide, so keep it small enough to stay sharp on high-density screens */
.section-media img[src$='feature-mobile.png'] {
  width: auto;
  max-width: 100%;
  max-height: 560px;
  margin: 0 auto;
}

/* real app screenshots, framed and transparent-cornered: a soft shadow that follows the rounded window */
.section-media img.win {
  filter: drop-shadow(0 22px 34px rgba(11, 31, 19, 0.2)) drop-shadow(0 3px 8px rgba(11, 31, 19, 0.1));
}

/* Header calls to action: the wrapper adds no box of its own, and [hidden] must win over it. */
.site-header .nav-cta { display: contents; }
.site-header [hidden] { display: none !important; }