/* ============================================================= */
/*  ClickSling — styles.css                                       */
/*  Edit colours & tokens below to re-skin the whole site.        */
/* ============================================================= */

:root {
  /* Colours */
  --orange: #F83000;
  --orange-hover: #D92A00;
  --ink: #0A0A0A;        /* near-black: headings + body text */
  --muted: #5A5A5A;      /* sub-headline grey */
  --paper: #FFFFFF;
  --band: #ECECEC;       /* light-grey full-bleed bands: pricing + footer */
  --line: rgba(0, 0, 0, .14);

  /* Layout */
  --maxw: 1080px;                              /* centered content column */
  --section-y: clamp(5rem, 10vw, 9rem);        /* vertical rhythm */
  --gutter: clamp(1.25rem, 5vw, 3rem);
}

/* --------------------------------------------------------------- */
/*  Global reset                                                    */
/* --------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

/* Avoid widows: never leave a lone word on a paragraph's last line. */
p {
  text-wrap: pretty;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* Lock body scroll while the modal is open */
body.modal-open {
  overflow: hidden;
}

/* --------------------------------------------------------------- */
/*  Layout helpers                                                  */
/* --------------------------------------------------------------- */

/* Centered content column — proportional gutters (~8% each side) at every
   viewport size, with NO fixed pixel cap so it grows on large monitors. */
.column {
  width: 84%;
  margin-inline: auto;
}

/* Full-bleed light-grey band */
.band {
  background: var(--band);
}

/* --------------------------------------------------------------- */
/*  Button — the reusable Free Trial pill                           */
/* --------------------------------------------------------------- */
.btn-pill {
  display: inline-flex;
  align-items: center;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  /* Normalize so <a> pills and <button> pills render at the exact same height:
     buttons don't inherit the body font, and anchors would otherwise inherit
     the body's line-height (1.6), making them taller than the buttons. */
  font-family: inherit;
  line-height: 1;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s;
}

.btn-pill:hover {
  background: var(--orange-hover);
}

/* --------------------------------------------------------------- */
/*  Header                                                          */
/* --------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;                 /* pin to top, full width */
  z-index: 1000;                     /* above everything */
  background: transparent;
  transition: background .25s, box-shadow .25s, border-color .25s;
  border-bottom: 1px solid transparent;
}

.site-header.scrolled {
  background: var(--paper);
  border-bottom-color: var(--line);           /* faint hairline */
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);  /* subtle shadow */
}

.header-inner {
  width: 84%;                /* same proportional gutters as content */
  margin-inline: auto;
  padding-block: .85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.header-links {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-size: .95rem;
}

.header-links a {
  color: var(--ink);
  text-decoration: none;
}

.header-links a:hover {
  color: var(--orange);
}

.header-divider {
  color: var(--line);
  font-weight: 400;
}

/* --------------------------------------------------------------- */
/*  Headline scale                                                  */
/* --------------------------------------------------------------- */
h1,
h2 {
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.015em;   /* -15 tracking; em keeps it proportional as headlines scale */
  text-wrap: balance;         /* no lone word on a headline's last line */
}

/* Headline / body type is vw-based with a rem floor and NO upper cap, so it
   keeps scaling up on larger monitors in proportion with the wider column. */
.wordmark {
  font-size: max(3.5rem, 12vw);
}

.big-headline {
  font-size: max(2.75rem, 8vw);
  letter-spacing: -0.03em;   /* -30 tracking; on the exact headline selector so it wins */
}

/* SVG headline artwork — matches the original text height, stays consistent
   across the four, respects each section's alignment, and never overflows. */
.big-headline img {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  max-width: 100%;
  height: max(3.12rem, 9vw);
}

.big-headline {
  line-height: 1;
}

.mid-headline {
  font-size: max(1.6rem, 3.5vw);
  line-height: 1.1;
  letter-spacing: -0.03em;   /* -30 tracking */
}

/* Sub-headline / body copy — no width cap, so each sub-line uses the full
   column width and fits on one line at desktop. text-wrap:pretty (on <p>)
   still prevents widows where a long line must wrap on small screens. */
.sub {
  margin-top: 1.1rem;
  font-size: max(1rem, 1.4vw);
  font-weight: 400;
  color: var(--muted);
}

.sub-center {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------- */
/*  1) Hero                                                         */
/* --------------------------------------------------------------- */
.hero {
  /* generous top padding clears the fixed header */
  padding-top: clamp(7rem, 16vw, 12rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  text-align: center;
}

/* Hero logo image — sized to feel as bold/large as the original text
   wordmark, but never overflowing. Centered; scales down on phones. */
.hero__logo {
  margin: 0;
}

.hero__logo img {
  /* Full width of the shared 84% content column — identical to the video
     window below, so they share the same left/right edges at every size. */
  width: 100%;
  height: auto;
  margin-inline: auto;   /* centered (img is block-level) */
}

.hero-tagline {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.02;
  /* ~40–50% of the wordmark size */
  font-size: clamp(1.6rem, 5.4vw, 4rem);
  margin-top: .25rem;
}

/* --------------------------------------------------------------- */
/*  2) Video window                                                 */
/* --------------------------------------------------------------- */
.video-section {
  margin-bottom: var(--section-y);
}

.video-window {
  position: relative;
  /* Same 84% proportional container as the rest of the content, so its left
     edge lines up with the "Marketing, always right." block below it. */
  width: 84%;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}

.video-poster,
.video-window video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Two-colour split fallback if the poster image fails to load.
   site.js adds .no-poster to .video-window on the image's onerror. */
.video-window.no-poster {
  background: linear-gradient(
    to right,
    #F83000 0 50%,
    #00B8F0 50% 100%
  );
}

/* Centered white play-triangle button */
.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s, background .2s;
  z-index: 2;
}

.play-button:hover {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.06);
}

/* CSS play triangle */
.play-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent var(--ink);
  margin-left: 5px;   /* optical centering */
}

/* "Video coming soon" note (injected by site.js when VIDEO_SRC empty) */
.video-note {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: .6rem 1.1rem;
  border-radius: 999px;
}

/* --------------------------------------------------------------- */
/*  3) Intro line                                                   */
/* --------------------------------------------------------------- */
.intro {
  padding-bottom: var(--section-y);
  /* Sit close beneath the video window: the negative top margin cancels
     the video section's bottom margin, then a modest top padding restores
     just a small gap (not a full section gap). */
  margin-top: calc(var(--section-y) * -1);
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

.intro-inner {
  /* Same 84% container as the video window above → left edges line up. */
  width: 84%;
  margin-inline: auto;
  text-align: left;   /* headline + subtext flush left */
}

/* --------------------------------------------------------------- */
/*  4 & 5) Value sections (left-aligned)                            */
/* --------------------------------------------------------------- */
.value {
  padding-block: var(--section-y);
}

.value-inner .btn-pill {
  margin-top: 1.75rem;
}

/* When a second pill sits beside the first (e.g. Free Trial + Overkill?),
   give it breathing room. Wraps to its own line on narrow screens. */
.value-inner .btn-pill + .btn-pill {
  margin-left: .75rem;
}

/* --------------------------------------------------------------- */
/*  6) Pricing                                                      */
/* --------------------------------------------------------------- */
.pricing {
  padding-block: var(--section-y);
}

.pricing-inner {
  text-align: center;
}

.pricing .big-headline {
  text-align: center;
}

.pricing-table {
  width: 100%;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  border-collapse: collapse;
  text-align: left;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;   /* keeps rounded corners on the table */
}

.pricing-table th,
.pricing-table td {
  padding: 1rem 1.25rem;
  font-size: 1rem;
}

/* Bold header row */
.pricing-table thead th {
  font-weight: 700;
  color: var(--ink);
  background: rgba(0, 0, 0, .04);
  border-bottom: 1px solid var(--line);
}

/* Thin vertical dividers between columns */
.pricing-table th:not(:last-child),
.pricing-table td:not(:last-child) {
  border-right: 1px solid var(--line);
}

/* Horizontal row separators */
.pricing-table tbody tr:not(:last-child) td {
  border-bottom: 1px solid var(--line);
}

/* Bold "Number of Locations" value */
.pricing-table td.loc {
  font-weight: 700;
  color: var(--ink);
}

/* Orange "Unlimited" values */
.pricing-table td.unlimited {
  color: var(--orange);
  font-weight: 700;
}

/* --------------------------------------------------------------- */
/*  7) CTA band                                                     */
/* --------------------------------------------------------------- */
.cta-band {
  display: flex;
  width: 100%;
}

.cta-panel {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-orange {
  flex: 0 0 72%;
  background: var(--orange);
  color: #fff;
  /* Start the text at the same 8% gutter as the rest of the content. */
  padding-left: 8vw;
}

.cta-headline {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;   /* -30 tracking */
}

.cta-orange p {
  max-width: 60ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
}

.cta-black {
  flex: 0 0 28%;
  background: #000;
  align-items: center;
}

/* --------------------------------------------------------------- */
/*  8) Closing                                                      */
/* --------------------------------------------------------------- */
.closing {
  padding-block: var(--section-y);
  text-align: center;
}

.closing .big-headline {
  text-align: center;
}

.closing-inner .btn-pill {
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------- */
/*  Footer                                                          */
/* --------------------------------------------------------------- */
.site-footer {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: flex-start;
}

.footer-wordmark {
  display: block;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Footer logo image — smaller version of the same brand logo. */
.footer-logo {
  height: clamp(64px, 5.5vw, 104px);
  width: auto;
}

.footer-tagline {
  display: block;
  font-weight: 700;
  margin-top: .1rem;
}

.footer-legal {
  max-width: 52ch;
}

.footer-line {
  font-size: .8rem;
  color: var(--muted);
}

.footer-line a {
  color: var(--muted);
}

.footer-line a:hover {
  color: var(--orange);
}

.footer-para {
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.7;
}

/* --------------------------------------------------------------- */
/*  Sign-up modal                                                   */
/* --------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .55);
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 16px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.modal-close {
  position: absolute;
  top: .75rem;
  right: .9rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover {
  color: var(--ink);
}

.modal-title {
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
}

.field {
  margin-bottom: 1rem;
}

/* First Name | Last Name — two equal columns on desktop, stack on mobile. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.field-row .field {
  margin-bottom: 0;
}

.field label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: .35rem;
}

.field input,
.field textarea {
  width: 100%;
  padding: .85rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: #14273D;            /* dark text */
  border: 1px solid transparent;
  border-radius: 10px;
  background: #D9E6F7;       /* light-blue fill */
}

.field input::placeholder,
.field textarea::placeholder {
  color: #14273D;
  opacity: .55;
}

/* Clear focus ring in the brand orange. */
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(248, 48, 0, .35);
}

/* First / Last Name stack to full width on small screens. */
@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .field-row .field {
    margin-bottom: 1rem;
  }
}

.form-error {
  color: var(--orange);
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: 1rem;
}

.form-error[hidden] {
  display: none;
}

.btn-submit {
  width: 100%;
  justify-content: center;
  padding-block: .85rem;
  font-size: 1rem;
}

/* Success state */
.modal-success {
  text-align: center;
  padding-block: 1rem;
}

.modal-success h2 {
  font-size: 1.8rem;
  margin-bottom: .75rem;
}

.modal-success p {
  color: var(--muted);
}

/* Legal modal (Privacy / Terms) — reuses .modal-backdrop / .modal, wider. */
.modal--legal {
  max-width: 680px;
  text-align: left;
}

.legal-doc h2 {
  font-size: 1.6rem;
  margin-bottom: .35rem;
}

.legal-doc .legal-updated {
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: 1.25rem;
}

.legal-doc h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.25rem 0 .4rem;
}

.legal-doc p {
  font-size: .95rem;
  color: var(--ink);
  margin-bottom: .75rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------- */
/*  Scroll motion / parallax reveal                                */
/* --------------------------------------------------------------- */

/* Big headlines slide in horizontally. The hidden initial state is scoped to
   html.js, so if JS never runs (html stays .no-js) content is fully visible. */
html.js .from-left,
html.js .from-right {
  opacity: 0;
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

html.js .from-left {
  transform: translateX(-60px);
}

html.js .from-right {
  transform: translateX(60px);
}

html.js .from-left.in,
html.js .from-right.in {
  opacity: 1;
  transform: translateX(0);
}

/* Sub-headlines & buttons fade + rise gently (hidden state only when JS is on) */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}

html.js .reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced-motion: everything visible, no transforms */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .from-left,
  .from-right,
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------- */
/*  Responsive                                                      */
/* --------------------------------------------------------------- */

/* CTA band stacks: orange on top, black beneath */
@media (max-width: 768px) {
  .cta-band {
    flex-direction: column;
  }

  .cta-orange,
  .cta-black {
    flex-basis: auto;
  }

  .cta-black {
    padding-block: 2.5rem;
  }

  .footer-inner {
    flex-direction: column;
  }
}

/* Pricing table collapses into stacked cards under ~640px */
@media (max-width: 640px) {
  .pricing-table,
  .pricing-table thead,
  .pricing-table tbody,
  .pricing-table tr,
  .pricing-table td {
    display: block;
    width: 100%;
  }

  /* Hide the header row visually; each cell carries its own label */
  .pricing-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .pricing-table {
    border: 0;
    background: transparent;
  }

  .pricing-table tbody tr {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: 1.25rem;
    overflow: hidden;
  }

  /* Reset desktop dividers */
  .pricing-table td {
    border-right: 0 !important;
    text-align: right;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.1rem;
  }

  .pricing-table tbody tr td:not(:last-child) {
    border-bottom: 1px solid var(--line);
  }

  /* Label pulled from data-label */
  .pricing-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ink);
    text-align: left;
  }
}

/* Small-phone header sizing */
@media (max-width: 420px) {
  .header-links {
    font-size: .85rem;
  }

  .header-inner .btn-pill {
    padding: .6rem 1.15rem;
    font-size: .85rem;
  }
}


/* Contact modal: textarea (matches inputs) + sub-line + pricing link */
.field textarea{resize:vertical;min-height:88px;line-height:1.5;}
.modal-sub{margin:-2px 0 18px;font-size:.95rem;color:#5b6b7d;line-height:1.5;}
.pricing-contact{color:var(--orange);font-weight:700;text-decoration:none;cursor:pointer;}
.pricing-contact:hover{text-decoration:underline;}


/* 'overkill' sneaky orange link + video lightbox */
.overkill-link{color:var(--orange);background:none;border:none;padding:0;font:inherit;cursor:pointer;}
.overkill-link:hover,.overkill-link:focus-visible{text-decoration:underline;outline:none;}
.video-lightbox{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:24px;}
.video-lightbox[hidden]{display:none;}
.video-lightbox-inner{width:100%;max-width:900px;}
.video-lightbox video{width:100%;height:auto;display:block;border-radius:12px;background:#000;}
.video-lightbox-close{position:absolute;top:18px;right:26px;background:none;border:none;color:#fff;font-size:42px;line-height:1;cursor:pointer;}