/* Anton: the free stand-in for King Kong's Futura LT Condensed (headline only) */
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
/* Inter Light 300 for the subheader, King Kong's exact subheader face */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap");

/* Home hero, Oct 2 (Roy): a copy of the blue center section of instantly.ai,
   word for word, with Roy's headline "Do you want to scale your business?" in
   our Apple-style font in place of "Find Clients [logo] Instantly", and no long
   subheader. Every number below was measured on instantly.ai at 1440px and
   375px wide. PLACEHOLDER parts that must change before this goes live: the
   blue gradient image and the moving background are Instantly's. (Their
   customer logos were removed on Oct 2.) */

/* The blue card: 16px from the window edges, 24px corners, content centered */
.ib-wrap { padding: 0 16px; }

.ib-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--bar-h, 10px) - var(--header-h, 58px) - 16px);
  border-radius: 24px;
  overflow: hidden;
  background: #2f6cf0 url("https://cdn.prod.website-files.com/63860c8c65e7bef4a1eeebeb/69e7bd429298991c8e72ad65_instantly_gradient_static.webp") center / cover no-repeat;
}

/* The moving background (Unicorn Studio canvas) fills the card behind the
   content and fades in over the still gradient once it is drawn */
.ib-motion {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.ib-motion.is-ready { opacity: 1; }
.ib-motion canvas { display: block; width: 100% !important; height: 100% !important; }

.ib-inner {
  position: relative;
  z-index: 1;
  padding: 128px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Headline: Instantly's size (40/44, white, 600) in our SF Pro */
.ib-title {
  /* King Kong style (Roy, Oct 2): huge condensed caps, lines tight together.
     KK measured at 1440: Futura LT Condensed 130px, line-height 0.94, uppercase.
     Our line is longer, so it runs three balanced lines that fill the card. */
  max-width: 1180px;
  margin: 0 auto;
  font-family: "Anton", var(--font-display);
  font-size: clamp(56px, 7.4vw, 112px);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: uppercase;
  text-wrap: balance;
  color: #fff;
  text-align: center;
}
/* Desktop + tablet lockup (Roy, Oct 2): line 1 is WE HELP 7-FIGURE BUSINESS
   OWNERS on one line; HIT REVENUE GOALS and WITHOUT HEADACHE. are each sized to
   exactly that line's width. Oct 8: line 1 became WE HELP 7-FIGURE COURT
   BUILDERS (1284.38 at 100px), resized so it is as wide as HIT REVENUE GOALS
   again (Roy). Anton widths at 100px: the old line 1 1363.72,
   HIT REVENUE GOALS 705.76, WITHOUT HEADACHE. 741.06. --w is the headline's
   width (the card's inner width, capped at 1180px); each line's font size is
   --w divided by its width per pixel of font size. */
@media (min-width: 768px) {
  /* The card fills the screen exactly, from the bottom of the bar to the bottom
     of the window, with the headline-to-email block centered in it; scroll
     down and it's black (Roy, Oct 2). */
  .ib-hero {
    height: calc(100svh - var(--bar-h) - var(--header-h));
    min-height: 420px;
  }
  .ib-inner {
    container-type: inline-size;
    padding: 40px 70px;
    /* sub + email bar column width: 75% of the card (max 1180), 25% smaller (Roy,
       Oct 2). It is also capped by the window height so the whole block always
       fits a short window: the block is about 0.48 x --w + 143px tall. */
    --w: min(calc(min(100cqi, 1180px) * 0.75), calc((100svh - var(--bar-h) - var(--header-h) - 80px - 143px) * 2));
    /* the headline alone is 20% bigger on desktop (Roy, Oct 2), never wider than the card */
    --tw: min(calc(var(--w) * 1.2), 100cqi);
  }
  .ib-title {
    width: var(--tw);
    max-width: none;
    font-size: calc(var(--tw) / 12.8438); /* WE HELP 7-FIGURE COURT BUILDERS */
    line-height: 0.96;
    white-space: nowrap;
    text-wrap: nowrap;
  }
  .ib-l1, .ib-l2 { display: inline; }
  .ib-l3, .ib-l4 { display: block; }
  .ib-l3 { font-size: calc(var(--tw) / 7.0576); }
  .ib-l4 { font-size: calc(var(--tw) / 7.4106); }
  /* Subheader redesign (Roy, Oct 2: "it isn't hitting... not designed"):
     one block exactly as wide as the headline, 2 balanced lines that fill the
     same column, so headline + sub read as one unit. Inter 400 at 100px is
     6861.8px wide; 2 lines at 96% fill = var(--w) / 35.7384 (24.8px at 885). */
  .ib-hero .ib-sub {
    width: var(--w);
    max-width: none;
    margin-top: 28px;
    font-size: calc(var(--w) / 35.7384);
    line-height: 1.32;
    text-wrap: balance;
  }
  .ib-hero .ib-sub .ib-br { display: none; } /* the line breaks are the phone's only */
  .ib-hero .ib-sub > span { display: inline; }
  /* the email bar spans the same column as the headline and sub */
  .ib-hero .kk-form { width: max(var(--w), 560px); max-width: 100%; margin-top: 48px; }
}

.ib-sub {
  /* King Kong's hero subheader, measured live on kingkong.co (Oct 2):
     Inter Light 300, 26px, line-height 1.2, letter-spacing normal, #f8f9fa.
     Copy: King Kong's structure in our words (Roy picked it, Oct 2). */
  max-width: 730px;
  margin: 24px auto 0; /* room under the big headline */
  font-family: "Inter", sans-serif;
  font-size: 26px;
  font-weight: 400; /* one step heavier than King Kong's 300 so it holds up under Anton */
  line-height: 1.2;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.88);
  text-align: center;
  text-wrap: pretty;
}

/* ---- Call to action (Roy, Oct 2) ----
   Desktop: King Kong's email bar, measured on kingkong.co at 1440: a 67px tall,
   fully rounded light-gray (#e7e7e7) pill, an 18px field with a wave at the
   left, and the button built into the right end (Kong's is a lime "Do it" in
   22px bold). Ours says Work With Us in our black and fills with the brand's
   moving blue gradient on hover. Phone: one big Work With Us button instead.
   Design only: neither one sends anything yet. */
.kk-form {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 750px;
  height: 67px;
  margin-top: 40px;
  border-radius: 14px; /* a rounded rectangle like the phone button, not a pill (Roy, Oct 2) */
  background: #e7e7e7;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.3s ease;
}
.kk-form:focus-within { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 10px 30px -8px rgba(0, 0, 0, 0.25); }

.kk-wave {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}

.kk-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 20px 0 64px;
  border: 0;
  border-radius: 14px 0 0 14px;
  background: transparent;
  outline: none;
  font-family: "Inter", var(--font);
  font-size: 18px;
  font-weight: 400;
  color: #3d3d3d;
}
.kk-input::placeholder { color: #3d3d3d; opacity: 1; }

.kk-btn,
.kk-mobile {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  background: #0a0a0a;
  color: #fff;
  font-family: "Inter", var(--font);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none; /* the phone one is a link to the funnel */
  cursor: pointer;
}
.kk-btn {
  flex-shrink: 0;
  height: 100%;
  padding: 0 30px 0 32px;
  border-radius: 0 14px 14px 0;
  font-size: 22px;
}
/* Hover (Roy, Oct 2): the button turns white and the words and arrow fill with
   the brand bar's moving blue gradient, the same move as the dropdown choices.
   The arrow is the funnel's sliding arrow (Roy, Oct 3): one slides out to the
   right as the next slides in from the left; it turns blue on hover. */
.kk-btn::before,
.kk-mobile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out, ease);
}
.kk-btn:hover::before,
.kk-btn:focus-visible::before,
.kk-mobile:hover::before,
.kk-mobile:focus-visible::before { opacity: 1; }
.kk-label {
  background-image: linear-gradient(90deg, var(--ff-1) 0%, var(--ff-3) 25%, var(--ff-5) 50%, var(--ff-3) 75%, var(--ff-1) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: #fff;
  animation: bar-flow 6s linear infinite;
  transition: color 0.35s var(--ease-out, ease);
}
.kk-btn:hover .kk-label,
.kk-btn:focus-visible .kk-label,
.kk-mobile:hover .kk-label,
.kk-mobile:focus-visible .kk-label { color: transparent; }
.kk-arrow {
  --kk-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M1 7.2h17.5V2.5L29 9l-10.5 6.5v-4.7H1z'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  width: 1.15em;
  height: 0.7em;
  margin-left: 0.45em;
  vertical-align: -0.02em;
  overflow: hidden;
}
.kk-arrow::before,
.kk-arrow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  -webkit-mask: var(--kk-arrow) center / contain no-repeat;
  mask: var(--kk-arrow) center / contain no-repeat;
  transition: background-color 0.35s var(--ease-out, ease);
}
.kk-arrow::before { animation: kk-arrow-out 1.7s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.kk-arrow::after { opacity: 0; transform: translateX(-110%); animation: kk-arrow-in 1.7s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.kk-btn:hover .kk-arrow::before, .kk-btn:hover .kk-arrow::after,
.kk-btn:focus-visible .kk-arrow::before, .kk-btn:focus-visible .kk-arrow::after,
.kk-mobile:hover .kk-arrow::before, .kk-mobile:hover .kk-arrow::after,
.kk-mobile:focus-visible .kk-arrow::before, .kk-mobile:focus-visible .kk-arrow::after { background: var(--ff-3); }
@keyframes kk-arrow-out { 0%, 30% { transform: translateX(0); opacity: 1; } 70%, 100% { transform: translateX(110%); opacity: 0; } }
@keyframes kk-arrow-in { 0%, 30% { transform: translateX(-110%); opacity: 0; } 70%, 100% { transform: translateX(0); opacity: 1; } }

/* A shimmer of light sweeps across Get Started every few seconds, the same as
   the funnel's first button (Roy, Oct 3). It runs under the words. */
.kk-btn::after,
.kk-mobile::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  z-index: -1;
  width: 38%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-160%) skewX(-20deg);
  animation: kk-shimmer 3s cubic-bezier(0.4, 0, 0.2, 1) 0.8s infinite;
  pointer-events: none;
}
@keyframes kk-shimmer {
  0% { transform: translateX(-160%) skewX(-20deg); }
  45%, 100% { transform: translateX(330%) skewX(-20deg); }
}
.kk-btn:focus-visible,
.kk-mobile:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.kk-mobile { display: none; }

/* The video card that sat under the old hero, kept under the blue card */
.home-video {
  max-width: 1344px;
  margin: 64px auto 0;
  padding: 0 16px;
}
@media (min-width: 1200px) { .home-video { padding: 0 32px; } }

.hero-media {
  position: relative;
  height: 600px;
  border-radius: 16px;
  overflow: hidden;
  background: #0d1b24;
}

.hero-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1023px) {
  .hero-media { height: 480px; }
}

/* Phone, as Instantly does it at 375px: 20px corners, 28px headline, 14px line,
   the box full width, no chips, a smaller logo row that wraps */
@media (max-width: 767px) {
  /* Headline up top (Roy, Oct 2). A full-screen card with the block centered was
     tried and reverted the same day: "I don't like how there's that much blue
     space at the top." The card hugs its content again. */
  .ib-hero { min-height: 0; border-radius: 20px; }
  .ib-inner { padding: 32px 17px 48px; } /* top cut 75% (Roy, Oct 2): headline sits up near the card's top */
  .ib-title { font-size: clamp(38px, 11.6vw, 58px); line-height: 1; }
  /* Phone lockup (Roy, Oct 2): four stacked lines, every line sized to the exact
     width of "BUSINESS OWNERS", so they read as one solid block.
     Anton widths at 100px: WE HELP 7-FIGURE 664.99, BUSINESS OWNERS 675.29
     (COURT BUILDERS 595.95 since Oct 8),
     HIT REVENUE GOALS 705.76, WITHOUT HEADACHE. 741.06. cqi = 1% of the title
     width, so 100cqi / 6.7529 makes line 2 fill it on any phone. */
  /* width: 100% matters: the card centers its children, and a size container
     that shrink-wraps its own text collapses to zero width */
  .ib-title { container-type: inline-size; width: 100%; max-width: none; }
  .ib-title > span { display: block; line-height: 0.98; }
  /* The block filled 90% of the card (Roy, Oct 2), then 10% bigger (99%), then
     5% smaller (Roy, Oct 2, later): 94.05%, so each line = 94.05 / its width
     at 100px. */
  .ib-l1 { font-size: 14.143cqi; }
  .ib-l2 { font-size: 15.782cqi; } /* COURT BUILDERS (Oct 8) */
  .ib-l3 { font-size: 13.326cqi; }
  .ib-l4 { font-size: 12.692cqi; }
  /* Phone subheader (Roy, Oct 2): exactly as wide as the headline's lines,
     which run 90% of the card's content width (90cqi). The lead
     "No one said growing a service company is fun." is cut on the phone (Roy,
     Oct 2; desktop keeps it). Three set lines, the breaks fixed by the two
     <br class="ib-br"> in home.html:
       We make getting qualified appointments
       a whole lot easier, more predictable,
       and more profitable.
     Line 1 is the longest (Inter 400 at 100px = 1898px), so font = 90cqi /
     19.05 puts it at 99.6% of the headline's width on any phone (14.6px at
     375). cqi here = .ib-inner, made a container for this. */
  .ib-inner { container-type: inline-size; }
  /* 25% bigger (Roy, Oct 2, later): 90cqi / 15.24 (= 19.05 / 1.25), 18.3px at
     375. The set lines above no longer fit at this size, so the breaks are
     off and the text wraps in balanced lines inside the headline's 90% width. */
  /* then 10% bigger with the headline (99%), then 5% smaller (Roy, Oct 2):
     94.05% wide, 94.05cqi / 15.24 */
  .ib-hero .ib-sub {
    width: 94.05%;
    max-width: none;
    margin: 22px auto 0;
    font-size: calc(94.05cqi / 15.24);
    line-height: 1.4;
    text-wrap: balance;
    color: rgba(255, 255, 255, 0.8);
  }
  .ib-hero .ib-sub .ib-br { display: none; }
  .ib-hero .ib-sub > span { display: inline; }
  .ib-hero .ib-sub > span:first-child { display: none; }
  /* Phone: no email bar, one big Work With Us button. A rounded rectangle, not
     a pill (Roy, Oct 2: "same vibe, just more of a square, rectangular shape") */
  .kk-form { display: none; }
  .kk-mobile { display: inline-flex; width: 90%; height: 60px; margin-top: 28px; border-radius: 14px; font-size: 20px; }
  .home-video { margin-top: 40px; }
  .hero-media { height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .kk-label { animation: none; }
  .kk-arrow::before, .kk-arrow::after { animation: none; }
  .kk-btn::after, .kk-mobile::after { animation: none; display: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}