/* Inside Sales — page-scoped layout on top of scroll.css (InsideSalesV2). Prefix: ins- */

/* ── Hero: tp-couch-laptops full-panel background ── */
.ins-tag { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px; border: 1px solid rgba(234,165,114,0.35); background: rgba(17,17,17,0.55); border-radius: 999px; font: 600 12px/1.3 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--coral); }
.ins-tag::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

.ins-hero { --bg-pos: center 38%; display: flex; align-items: center; min-height: 860px; padding-block: 112px 104px; }
.ins-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17,17,17,0) 60%, rgba(17,17,17,0.55) 100%); }
.ins-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 860px; }
.ins-hero h1 { text-wrap: initial; }
.ins-hero__lead { max-width: 540px; }
.ins-hero__book { margin-top: 4px; }
@media (max-width: 1024px) {
  .ins-hero { min-height: 760px; }
}
@media (max-width: 620px) {
  .ins-hero { display: block; min-height: 0; padding-block: 44px 56px; }
  .ins-hero::after { display: none; }
  .ins-hero__content { gap: 18px; align-items: stretch; }
  .ins-hero h1 br { display: none; }
  .ins-tag { align-self: flex-start; padding: 7px 14px; font-size: 11px; letter-spacing: 1.5px; }
  .ins-hero__book { width: 100%; margin-top: 2px; }
}

/* ── How it fits: pipeline ── */
.ins-fits__head { margin-bottom: 64px; }
.ins-fits__sub { max-width: 640px; }
.ins-pipe { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr) 32px minmax(0, 1fr); align-items: stretch; }
.ins-step { gap: 12px; padding: 28px 22px 30px; }
.ins-step__body { display: flex; flex-direction: column; gap: 12px; }
.ins-step__n { font: 700 44px/1 var(--font-display); color: rgba(169,87,31,0.28); }
.ins-step__title { margin-top: 6px; }
.ins-step__body > p { font-size: 14px; line-height: 1.6; color: var(--ink-body); }
.ins-step--done { padding: 27px 21px 29px; background: var(--charcoal); border: 2px solid var(--coral); box-shadow: 0 24px 60px rgba(26,26,26,0.18); }
.ins-step--done .ins-step__title { color: var(--coral); }
.ins-step--done .ins-step__body > p { color: var(--soft); }
.ins-step__check { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(234,165,114,0.2); }
.ins-step__check svg { width: 20px; height: 20px; fill: none; stroke: var(--coral); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins-pipe__arrow { display: flex; align-items: center; justify-content: center; }
.ins-pipe__arrow svg { width: 24px; height: 24px; fill: none; stroke: var(--coral-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ins-fits__foot { margin-top: 36px; font-size: 15px; color: var(--ink-body); text-align: center; }
.ins-fits__foot .link-underline { padding-bottom: 2px; margin-left: 4px; }

@media (max-width: 1100px) {
  .ins-pipe { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
  .ins-step { flex-direction: row; align-items: center; gap: 22px; padding: 22px 26px; }
  .ins-step--done { padding: 21px 25px; }
  .ins-step__n { flex: none; width: 44px; text-align: center; }
  .ins-step__body { gap: 4px; }
  .ins-step__title { margin-top: 0; }
  .ins-pipe__arrow { height: 36px; }
  .ins-pipe__arrow svg { transform: rotate(90deg); width: 20px; height: 20px; }
}
@media (max-width: 620px) {
  .ins-fits__head { margin-bottom: 28px; }
  .ins-step { gap: 16px; padding: 18px 18px; }
  .ins-step--done { padding: 17px; }
  .ins-step__n { width: 36px; font-size: 38px; }
  .ins-step__check { width: 36px; height: 36px; }
  .ins-step__check svg { width: 16px; height: 16px; }
  .ins-step__body > p { font-size: 14px; line-height: 1.5; }
  .ins-pipe__arrow { height: 28px; }
  .ins-fits__foot { margin-top: 28px; font-size: 14px; }
  .ins-fits__foot .link-underline { display: inline-flex; margin: 8px 0 0; }
}

/* ── The two roles ── */
/* the role cards sat flush against the pipeline row above: no rule set this gap */
.ins-roles { margin-top: 56px; }
.ins-role { gap: 20px; padding: 44px 40px; overflow: hidden; }
.ins-role--setter { border-color: rgba(234,165,114,0.3); }
.ins-role--setter::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--coral); }
.ins-role__pill { padding: 5px 12px; font-size: 11px; letter-spacing: 1.5px; white-space: normal; text-align: left; }
.ins-pill--slate { background: rgba(149,173,197,0.08); color: var(--c-meta); border-color: rgba(149,173,197,0.15); }   /* --slate measured 2.32:1 on the white card */
.ins-role__corner { position: absolute; top: 44px; right: 40px; }
.ins-role__title { font-size: 36px; line-height: 1.05; letter-spacing: 0; }
.ins-role__list { gap: 12px; padding-top: 20px; border-top: 1px solid rgba(149,173,197,0.1); }
.ins-role__list > li { padding-left: 26px; font-size: 16px; line-height: 1.55; }
.ins-role__note { font-size: 14px; font-style: italic; color: var(--c-text); }   /* --slate measured 2.32:1 on the white card */
@media (max-width: 1024px) {
  .ins-role { padding: 36px 30px; }
  .ins-role__corner { top: 36px; right: 30px; }
  .ins-role__title { font-size: 30px; }
}
@media (max-width: 900px) {
  .ins-roles.grid--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .ins-roles { margin-top: 32px; }
  .ins-role { gap: 14px; padding: 28px 20px 24px; }
  .ins-role__corner { position: static; order: -1; align-self: flex-start; }
  .ins-role__pill { border-radius: 12px; line-height: 1.5; }
  .ins-role__title { font-size: 26px; }
  .ins-role__list { gap: 10px; padding-top: 16px; }
  .ins-role__list > li { font-size: 14px; }
  .ins-role__note { font-size: 13px; }
}

/* ── Aligned incentives ── */
.ins-aligned { gap: 72px; }
.ins-aligned__lead { max-width: 540px; }
.ins-facts { --grid-gap: 14px; width: 100%; margin-top: 12px; }
.ins-fact { gap: 8px; padding: 22px; border-radius: 14px; }
.ins-fact__title { color: var(--coral); }
.ins-fact > p { font-size: 14px; line-height: 1.5; color: var(--slate); }
.ins-collage { position: relative; aspect-ratio: 540 / 600; width: 100%; }
.ins-collage__photo { position: absolute; top: 0; right: 0; width: 92.6%; height: 73.3%; object-fit: cover; object-position: center 30%; border-radius: var(--radius-card); border: 1px solid var(--hair-2); }
.ins-collage__window { position: absolute; left: 0; bottom: 0; width: 81.5%; background: var(--ground); border: 1px solid rgba(149,173,197,0.14); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.55); }
.ins-collage__bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #1e1e1e; border-bottom: 1px solid var(--charcoal-mid); }
.ins-collage__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.ins-collage__bar i:nth-child(2) { background: #febc2e; }
.ins-collage__bar i:nth-child(3) { background: #28c840; }
.ins-collage__bar span { flex: 1; height: 20px; margin-left: 10px; border-radius: 4px; background: var(--charcoal-mid); }
.ins-collage__window img { width: 100%; object-fit: cover; object-position: top; }
@media (max-width: 1024px) {
  .ins-aligned { gap: 48px; }
}
@media (max-width: 900px) {
  .ins-aligned { gap: 48px; }
  .ins-collage { max-width: 560px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .ins-aligned { gap: 36px; }
  .ins-facts { --grid-gap: 10px; margin-top: 4px; }
  .ins-fact { padding: 16px 18px; gap: 4px; border-radius: 12px; }
  .ins-fact__title { font-size: 18px; }
  .ins-fact > p { font-size: 13px; }
  .ins-collage__photo { border-radius: 12px; }
  .ins-collage__window { border-radius: 10px; }
  .ins-collage__bar { gap: 5px; padding: 7px 10px; }
  .ins-collage__bar i { width: 7px; height: 7px; }
  .ins-collage__bar span { height: 12px; margin-left: 6px; }
}

/* ── Who it's for ── */
.ins-who__card { padding: 34px 30px 36px; }
.ins-who__card .icon-tile { margin-bottom: 6px; }
@media (max-width: 620px) {
  .ins-who__card { padding: 22px 20px; }
  .ins-who__card .icon-tile { margin-bottom: 0; }
}

/* ── Proof: close rates ── */
.ins-proof__head { margin-bottom: 64px; }
.ins-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hair-2); }
.ins-proof__item { display: flex; flex-direction: column; gap: 12px; padding: 48px 56px 0 0; min-width: 0; }
.ins-proof__item + .ins-proof__item { padding: 48px 0 0 56px; border-left: 1px solid var(--hair-2); }
.ins-proof__n { font: 700 clamp(64px, calc(8.4vw - 17px), 104px)/.95 var(--font-display); color: var(--coral); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-proof__label { margin-top: 10px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--white); }
.ins-proof__meta { font-size: 15px; line-height: 1.65; color: var(--slate); }
.ins-quote { margin-top: 16px; padding: 22px 26px; background: var(--charcoal-mid); border-radius: 12px; border-left: 3px solid var(--coral); }
.ins-quote blockquote { font-size: 17px; line-height: 1.6; font-style: italic; color: var(--cream); }
.ins-quote figcaption { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--coral); }
@media (max-width: 900px) {
  .ins-proof__head { margin-bottom: 40px; }
  .ins-proof__item { padding-right: 32px; }
  .ins-proof__item + .ins-proof__item { padding-left: 32px; }
}
@media (max-width: 620px) {
  .ins-proof__head { margin-bottom: 28px; }
  .ins-proof { grid-template-columns: minmax(0, 1fr); }
  .ins-proof__item, .ins-proof__item + .ins-proof__item { padding: 28px 0; border-left: 0; gap: 8px; }
  .ins-proof__item + .ins-proof__item { border-top: 1px solid var(--hair-2); padding-bottom: 0; }
  .ins-proof__n { font-size: clamp(56px, 18vw, 72px); }
  .ins-proof__label { margin-top: 6px; font-size: 16px; }
  .ins-proof__meta { font-size: 14px; }
  .ins-quote { margin-top: 10px; padding: 16px 18px; }
  .ins-quote blockquote { font-size: 15px; }
  .ins-quote figcaption { font-size: 12px; }
}

/* ── FAQ ── */
.ins-faq__head { margin-bottom: 56px; }
@media (max-width: 620px) { .ins-faq__head { margin-bottom: 20px; } }

/* ── Final CTA ── */
.ins-cta { --bg-pos: center 40%; }
.ins-cta__copy { gap: 26px; }
.ins-cta__lead { max-width: 560px; color: var(--soft); }
.ins-cta__copy .btn { margin-top: 4px; }
@media (min-width: 901px) {
  .ins-cta__copy { position: sticky; top: calc(var(--navh) + 48px); }
}
@media (max-width: 620px) {
  .ins-cta__copy { gap: 20px; }
  .ins-cta__lead { color: var(--slate); }
  .ins-cta__copy .btn { margin-top: 0; padding: 20px 24px; font-size: 15px; }
}