/* ============================================================
   KompanyOS — "See it on your own systems" CTA section (reusable)

   The section every page shows instead of carrying its own enquiry form:
   overline → big headline → one line of copy → a real 3SC PressButton that
   takes you to the form page (contact.html), plus a reassurance note.

   Drop-in: <link rel="stylesheet" href="cta.css"> + the .kos-cta markup
   (reference in styles.html §19). No JS of its own — the button is the
   shared PressButton island (assets/pc), hydrated from [data-pressbtn].

   Self-contained: reads the 3SC design tokens when present, falls back to
   the experience-page tokens, then to hexes — so it renders on any ground.
   Pages drop it in their own section rhythm (e.g. <section class="msg
   kos-cta-sec"><div class="msg-inner">…); standalone, .kos-cta-sec brings
   its own padding.
   ============================================================ */

/* The closing CTA gets the screen to itself: a full-viewport band with its content
   centred, so scrolling to it lands on the CTA and (almost) nothing else. svh, not
   vh, so a phone's collapsing URL bar can't change the band's height mid-scroll. */
.kos-cta-sec { min-height: 100svh; display: flex; align-items: center; }
.kos-cta-sec > * { width: 100%; }

/* standalone (no page section wrapper) → its own rhythm */
.kos-cta-sec:not(.msg) { padding-block: var(--sp-section-lg, 128px); }
.kos-cta-sec:not(.msg) > .kos-cta { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }

.kos-cta { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }

.kos-cta-over {
  font: 700 13px/1 var(--cube-font-secondary, var(--mono, 'Anonymous Pro', ui-monospace, monospace));
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--cube-pink, var(--pink, #f70087));
}
/* Section heading scale — deliberately BELOW the hero h1 (clamp(32px,3.5vw,54px)):
   this is the closing section of a page, not its headline. */
.kos-cta-title {
  margin-top: var(--sp-over-head, 16px); max-width: 24ch;
  font: 700 var(--t-h2, clamp(26px, 3.2vw, 44px))/var(--lh-head, 1.2) var(--cube-font-primary, var(--font, 'Poppins', system-ui, sans-serif));
  letter-spacing: var(--trk-head, 0); color: var(--cube-ink, var(--ink, #0a0a0a));
}
.kos-cta-sub {
  margin-top: var(--sp-head-lead, 24px); max-width: 52ch;
  font: 500 var(--t-lead, clamp(17px, 1.5vw, 20px))/var(--lh-lead, 1.5) var(--cube-font-primary, var(--font, 'Poppins', system-ui, sans-serif));
  color: var(--cube-ink, var(--ink, #0a0a0a));
}
/* yellow marker behind a phrase in the headline (the CTA's own accent — the page
   headlines use the green one). Pair with .kos-sticker-hl + a .kos-sticker.anchor
   child to hang a sticker. */
.kos-cta-title .kos-cta-hl {
  --kos-hl-pad: 0.3em; --kos-anchor: 1.5em;
  background: var(--cube-yellow, var(--yellow, #ffd100)); color: #0a0a0a;
  /* the extra bottom padding is descender room, cancelled by the margin so the
     headline's line spacing is unchanged — see stickers.css --kos-hl-drop */
  padding: 0.02em 0.3em calc(0.02em + var(--kos-hl-drop, .1em));
  margin-bottom: calc(var(--kos-hl-drop, .1em) * -1);
  border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* The CTA button. On pages that load the PressButton island (assets/pc) the <a>
   inside is swapped for the verbatim 3SC ButtonSection — full-width, tilted, right
   arrow, hand-cursor sticker under the corner (and the handwritten note when
   data-note is set); that component brings its own vertical rhythm, hence the
   modest margin here. Everywhere else the .cube-btn fallback shows as-is. */
.kos-cta-actions { margin-top: clamp(22px, 3.5vh, 40px); width: 100%; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.kos-cta-actions .kos-btnsec { width: 100%; }
/* the island's PressButton lifts on hover; keep it flat at rest like the hero CTAs */
.kos-cta-actions .cube-btn { transform: none; }
.kos-cta-actions .cube-btn:hover { transform: translate(-2px, -2px); }

/* Fallback note — the reassurance line under the CTA on pages without the island
   (with it, this copy rides the ButtonSection's handwritten note instead). */
.kos-cta-note {
  margin-top: clamp(18px, 2.4vh, 26px); max-width: 46ch;
  font: 400 13px/1.5 var(--cube-font-secondary, var(--mono, 'Anonymous Pro', ui-monospace, monospace));
  color: var(--cube-gray-600, var(--gray-500, #5b5b5b));
}

/* ButtonSection's hand-drawn arrow, which runs from the handwritten note back up
   to the button below 768px. At the island's own size and angle it swept up and
   to the RIGHT — past the button, towards the hand-cursor sticker — and was
   heavy enough to compete with the button itself. Turned anticlockwise to point
   at the button and scaled down.

   Three things make this rule look fussier than it is:
     · it lives HERE, not in pc-island/tw.css, because the pages load the built
       assets/pc/pc.css and that is a committed artifact — the source is kept in
       step for the next rebuild, but only this file takes effect today;
     · it restates the island's translate + mirror, because overriding `transform`
       replaces them;
     · the turn goes INSIDE that transform, after the scaleY(-1) that reverses
       the apparent direction of a rotation. The separate `rotate` property is
       zeroed rather than reused: it is applied BEFORE transform, so it would
       turn the arrow the wrong way. */
@media (max-width: 767px) {
  .kos-cta-actions .kos-btnsec svg.absolute {
    width: 82px; height: auto;
    rotate: 0deg;
    transform: translateX(-70%) scaleY(-1) rotate(32deg);
  }
}

@media (max-width: 560px) {
  .kos-cta-actions { width: 100%; }
  /* the PressButton island wraps each button in an inline-flex <span> */
  .kos-cta-actions > * { width: 100%; }
  .kos-cta-actions .kos-pressbtn { width: 100%; justify-content: center; }
}