/* =============================================================================
   enterprise.css - the #talk contact form on the Campuses and Companies page.
   The animated hero this file used to carry was retired when the page moved to
   the shared static hero (shero.css); only the form styles remain.
   ========================================================================== */

/* ===========================================================================
   #talk contact form. Token-based, so it follows the site theme with no
   per-theme overrides. Every control is 16px+ (iOS auto-zoom rule).
   Posts to /api/contact.
   ======================================================================== */

/* The contact form MOVED to /contact (contact.css owns .contact-form/.cf-*
   now, 2026-08-06). #talk keeps a compact CTA panel so its anchors still work. */
.talk-cta { display: grid; justify-items: start; gap: 14px; }
.talk-cta-note { margin: 0; color: var(--dim); font-size: 14.5px; }

/* ===========================================================================
   #consulting. Four offer cards on the shared .card surface, then one pairing
   panel that carries the CTA and the entrance pin screenshot. Token-based, so
   both themes follow the site with no per-theme overrides.
   ======================================================================== */

.consult-grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
  /* Pinned to two columns, not auto-fit: there are exactly four offers, and a
     three-track grid leaves a single orphan card on the second row. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.consult-card { display: flex; flex-direction: column; }
.consult-kind { display: flex; align-items: center; gap: 9px; margin: 0; }
.consult-card h3 { margin: 14px 0 12px; }
.consult-card p { margin: 0; font-size: 15px; line-height: 1.6; }

/* The pairing panel wears the same brand wash as the site's other positive
   surfaces (.fork-card, .seen-col), so it reads as the offer's answer rather
   than a fifth card. */
.consult-pair {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  margin-top: clamp(20px, 2.6vw, 32px);
  /* Tighter vertically than a .card: the phone sets this panel's height, so the
     stock card padding left the short copy column floating in dead space. */
  padding: clamp(22px, 2.4vw, 30px) clamp(28px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  background: linear-gradient(168deg, rgba(60, 158, 255, 0.11), var(--panel) 44%);
  box-shadow: var(--soft-shadow);
}

.consult-pair h3 { margin: 0 0 12px; }
.consult-pair p {
  max-width: 40rem;
  margin: 0;
  color: var(--dim);
  font-size: 15.5px;
  line-height: 1.6;
}
.consult-pair .cta-row { margin-top: 24px; }
/* Kept deliberately small: at the .phone-plate default of 300px the 931x1895
   render is twice the height of the copy beside it. */
.consult-shot { padding: 0; }
.consult-shot img { max-width: 186px; }

@media (hover: hover) and (pointer: fine) {
  .consult-card {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 320ms ease, box-shadow 320ms ease;
  }
  .consult-card:hover {
    transform: translateY(-6px) scale(1.008);
    border-color: var(--line-hi);
    box-shadow: 0 34px 74px rgba(8, 12, 22, 0.16);
  }
}

@media (max-width: 900px) {
  .consult-grid,
  .consult-pair { grid-template-columns: 1fr; }
  .consult-shot { justify-items: center; }
}

/* "It started on a campus" origin copy: break up the dense paragraph stack on
   mobile with more air, and pull the closing statement out as an emphasized
   line with a gradient accent bar (Adam 2026-08-06, was a wall of text). */
.origin-gap { margin-top: clamp(20px, 2.6vw, 26px); }
.origin-punch {
  position: relative;
  margin: clamp(24px, 3.4vw, 34px) 0 0;
  padding-left: 20px;
  color: var(--text);
  font-size: clamp(17px, 1.55vw, 20px);
  font-weight: 550;
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.origin-punch::before {
  content: "";
  position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5cc1f6, #4979ef 50%, #f31a91);
}
@media (max-width: 760px) {
  #origin .lede, #origin .body { line-height: 1.62; }
  .origin-gap { margin-top: 22px; }
}

/* ===========================================================================
   #k12 — the faculty app + 3rd-i Command showcase (screens from the product
   deck; illustrative campus, representative data). Four alternating feature
   rows of phone duos, then the full-width Command console panel.
   ========================================================================= */
.k12-row {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(34px, 5vw, 84px);
}
.k12-row + .k12-row { margin-top: clamp(64px, 8vw, 116px); }
.k12-row--flip .k12-stage { order: 2; }
.k12-row--flip .k12-copy { order: 1; }

.k12-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.k12-copy h3 {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.k12-copy ul {
  display: grid;
  gap: 14px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.k12-copy li {
  position: relative;
  padding-left: 26px;
  color: var(--dim);
  font-size: 15px;
  line-height: 1.55;
}
.k12-copy li b { color: var(--text); font-weight: 620; }
.k12-copy li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 2px 6px rgba(73, 121, 239, 0.35);
}

/* Phone duo: the front screen carries the story, the second peeks from behind,
   the way the deck stages them. Bezels are drawn here (the assets are raw
   screen comps), matching the deck's deep-navy frames. */
.k12-duo {
  position: relative;
  width: min(100%, 470px);
  margin-inline: auto;
  /* The front phone is bottom-anchored at 62% width with a ~2.17 screen ratio
     (plus bezel), so the box must be at least ~1.42x its width or the phone
     escapes the top and overlaps the copy above. */
  aspect-ratio: 1 / 1.44;
}
.k12-phone {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 9px solid #10152b;
  border-radius: 42px;
  background: #10152b;
  box-shadow: var(--soft-shadow-lg);
}
.k12-phone img { display: block; width: 100%; height: auto; }
.k12-phone--front {
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 62%;
}
.k12-phone--back {
  z-index: 1;
  right: 0;
  top: 0;
  width: 56%;
  transform: rotate(5deg);
  opacity: 0.96;
}

/* The Command console panel. */
.k12-command { margin-top: clamp(84px, 10vw, 140px); }
.k12-command-head { max-width: 700px; margin-bottom: clamp(28px, 3.6vw, 44px); }
.k12-command-head h3 {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.k12-command-lede {
  margin: 16px 0 0;
  color: var(--dim);
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.6;
  max-width: 54ch;
}
.k12-console { margin: 0; }
.k12-console img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-hi);
  border-radius: var(--r);
  box-shadow: var(--soft-shadow-lg);
  background: #fff;
}
.k12-console figcaption {
  margin-top: 12px;
  color: var(--soft);
  font-size: 12.5px;
  text-align: center;
}

@media (max-width: 900px) {
  .k12-row,
  .k12-row--flip { grid-template-columns: 1fr; gap: 30px; }
  .k12-row--flip .k12-stage { order: 1; }
  .k12-row--flip .k12-copy { order: 2; }
  .k12-duo { width: min(100%, 400px); }
  .k12-copy h3 { max-width: none; }
}

/* #who population panes (segmented tabs, shared 3rdi-seg component). Each pane
   is the phone + its population card; the seg control sits under the heading. */
.pop-seg { margin-bottom: clamp(26px, 3.4vw, 40px); }
.pop-pane {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(24px, 3.5vw, 56px);
}
.pop-pane .phone-plate img { max-width: 300px; }
.pop-pane .fork-card { max-width: 640px; }
@media (max-width: 900px) {
  .pop-pane { grid-template-columns: 1fr; }
  .pop-pane .phone-plate { justify-self: center; }
  .pop-pane .phone-plate img { max-width: min(66vw, 280px); }
}

/* Large monitors (app.css 1720px pass). */
@media (min-width: 1720px) {
  .k12-duo { width: min(100%, 540px); }
  .k12-copy h3 { font-size: clamp(24px, 2.6vw, 38px); }
  .k12-command-head h3 { font-size: clamp(26px, 3vw, 46px); }
}