/* flat/pages/deliver-ai-for-clients.css — Certant Flat: "Deliver AI for your clients"
   partner landing page, page-only rules. Tokens only, no shadows, prefix .pg-dai-.
   Linked after flat/flat.css. */

/* Hero figure: the assistant a partner delivers, drawn as a client-branded widget (the
   chatbots.html device-shell pattern: a paper shell on the cloud panel, zones owning their
   own padding). Three numbered callouts sit on the shell's left edge and pair with the
   legend under the panel, so the white-label, citation and own-hardware points read
   without a hover (the Callout Rule). */
.pg-dai-hero { margin: 0; }
.pg-dai-hero__panel { --pad: var(--sp-6); }
.pg-dai-widget { --pad: 0; display: flex; flex-direction: column; border-radius: var(--r-panel); }

/* Any row that carries a callout is its positioning context; the disc centres on the
   shell's left edge. --_inset is how far the row starts from that edge. */
.pg-dai-pinned { position: relative; }
.pg-dai-pin { position: absolute; top: 50%; left: calc(-1 * var(--_inset, 0px)); transform: translate(-50%, -50%); }
.pg-dai-pinned--inset { --_inset: var(--sp-5); align-self: flex-start; }
/* The head pads its top only and the foot its bottom only, so their discs shift by half
   that padding to centre on the row's content rather than its box. */
.pg-dai-widget__head .pg-dai-pin { top: calc(50% + var(--sp-5) / 2); }
.pg-dai-widget__foot .pg-dai-pin { top: calc(50% - var(--sp-5) / 2); }

.pg-dai-widget__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) 0; }
/* The client's own mark: a solid disc in the chatbot's hue (Ask is blue), with initials,
   so the widget reads as the client's product rather than Certant's. */
.pg-dai-widget__mark {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: var(--on-solid);
  font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.02em;
}
.pg-dai-widget__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pg-dai-widget__name { font-size: var(--fs-ui); font-weight: var(--fw-bold); color: var(--fg-1); line-height: 1.3; }

/* The transcript starts at the top, so .viz-chat (which centres and fills) is not used. */
.pg-dai-widget__msgs { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.pg-dai-widget .viz-bubble { max-width: 86%; font-size: var(--fs-ui); line-height: 1.5; padding: 10px 14px; }
.pg-dai-widget .viz-bubble--user { align-self: flex-end; }
/* The 2:14 am separator is the one centred line, which is what makes it read as a time
   marker; it carries the "answers at 2am" request from the carousel. */
.pg-dai-widget__marker { align-self: center; font-weight: var(--fw-semibold); }
.pg-dai-widget .chip { white-space: normal; }

/* Composer: drawn, not live (aria-hidden), so the field is a span styled as .input. */
.pg-dai-widget__composer { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-5) var(--sp-4); }
.pg-dai-widget__field { display: flex; align-items: center; flex: 1; min-width: 0; color: var(--fg-3); }
/* The send pill wears the client's blue, as the question bubble does: everything inside
   the shell is the client's brand. */
.pg-dai-widget__send { padding-inline: 12px; pointer-events: none; background: var(--blue); }

.pg-dai-widget__foot {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--fg-2);
}
.pg-dai-widget__foot .icon { width: 14px; height: 14px; color: var(--green); }

/* Legend: the same numbered discs, leading three short lines under the panel. */
.pg-dai-legend { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.pg-dai-legend li { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--fg-2); }

@media (max-width: 600px) {
  .pg-dai-hero__panel { --pad: var(--sp-5); }
  .pg-dai-widget__head, .pg-dai-widget__msgs, .pg-dai-widget__composer, .pg-dai-widget__foot { padding-inline: var(--sp-4); }
  .pg-dai-pinned--inset { --_inset: var(--sp-4); }
  .pg-dai-widget .viz-bubble { max-width: 92%; }
}

/* DIY count table: the total row closes the sum the reader can check against the 22.
   flat.css styles thead and tbody only. */
.pg-dai-diy tbody th { width: 30%; }
.pg-dai-diy tfoot th, .pg-dai-diy tfoot td {
  padding: 12px; border-top: 1px solid var(--line); border-bottom: 0;
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-1); text-align: left;
}
.pg-dai-diy tfoot .num { text-align: right; }
.pg-dai-diy td.num { color: var(--fg-1); font-weight: var(--fw-semibold); }
@media (max-width: 700px) {
  /* .table--stack stacks tbody rows; the count reads better inline ("Systems: 3") than as
     a lone digit under its own label, and the total row becomes one line. */
  .pg-dai-diy tbody th { width: auto; }
  .pg-dai-diy td.num { text-align: left; }
  .pg-dai-diy td.num[data-label]::before { display: inline; content: attr(data-label) ": "; }
  .pg-dai-diy tfoot { display: block; }
  .pg-dai-diy tfoot tr { display: flex; justify-content: space-between; margin-top: var(--sp-4); padding: var(--sp-4) 0 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .pg-dai-diy tfoot th, .pg-dai-diy tfoot td { display: block; padding: 0; border-top: 0; }
  .pg-dai-diy tfoot td:empty { display: none; }
}

/* Dated list of model changes: date column, then the event and its source. A list rather
   than a table because each row carries a source link under the sentence. */
.pg-dai-timeline { list-style: none; display: flex; flex-direction: column; gap: var(--sp-5); }
.pg-dai-timeline li { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: var(--sp-1); }
.pg-dai-timeline time { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-1); font-variant-numeric: tabular-nums; line-height: var(--lh-relaxed); }
.pg-dai-timeline p, .pg-dai-timeline a { grid-column: 2; }
.pg-dai-timeline p { color: var(--fg-1); }
@media (max-width: 600px) {
  .pg-dai-timeline li { grid-template-columns: minmax(0, 1fr); }
  .pg-dai-timeline p, .pg-dai-timeline a { grid-column: 1; }
}

/* The comparison opens a second beat inside the rented-models section, so it needs more
   air above it than an h3 inside a block gets. */
.pg-dai-subhead { margin-top: var(--sp-8); }

/* Comparison table: as chatbots.html, each cell leads with a cross or a tick so the two
   columns never look alike; the open-weight column takes green (sovereign). */
.pg-dai-vs td { position: relative; padding-left: 40px; }
.pg-dai-vs td .icon { position: absolute; left: 12px; top: 16px; width: 16px; height: 16px; color: var(--fg-2); }
.pg-dai-vs__us { color: var(--fg-1); font-weight: var(--fw-medium); }
.pg-dai-vs td.pg-dai-vs__us .icon { color: var(--green); }
@media (max-width: 700px) {
  .pg-dai-vs td { padding-left: 28px; }
  .pg-dai-vs td .icon { left: 0; top: 8px; }
}

/* Quote figure: each line leads with an icon tile, as the knowledgebases tables do. */
.pg-dai-label { display: inline-flex; align-items: center; gap: var(--sp-3); }
.pg-dai-quote tbody th { width: 40%; }
@media (max-width: 700px) { .pg-dai-quote tbody th { width: auto; } } /* stacked rows take the full width */

/* flat.css's one-column .specs rule (max-width 600) sits before its two-column rule
   (max-width 1100) in source order, so phones get two cramped columns. Restore one. */
@media (max-width: 600px) { .pg-dai-specs { grid-template-columns: minmax(0, 1fr); } }

/* The page ends on the form rather than an ink band, so the last section needs the gap
   an ink band would have given it above the footer. */
#talk { padding-bottom: var(--sp-9); }
@media (max-width: 800px) { #talk { padding-bottom: var(--sp-8); } }

/* Partner pair: the two marks differ in shape (a wide wordmark, a square badge), so each
   sits in a fixed-height row and is sized to similar optical weight; the titles beneath
   then line up across the columns. */
.pg-dai-partners { --gap: var(--sp-7); }
.pg-dai-partner__logo { height: 48px; display: flex; align-items: center; }
.pg-dai-partner__img--wide { height: 26px; width: auto; }
/* The Integr8tiv file is a 128 px square whose ink fills only x 10-118, y 36-93, so at 60 px the
   ink is about 27 px tall (the ASUS wordmark's height); the negative margins pull the ink,
   not the canvas, onto the text edge and into the 48 px row. */
.pg-dai-partner__img--square { height: 60px; width: auto; margin: -6px 0 -6px -5px; }
.pg-dai-partner p { max-width: 52ch; }

/* Disclosure rows at the full 1200 px column read as 100-character lines. */
.pg-dai-faq { max-width: 820px; }

/* Landing-page header: logo and the one action, no site menu. The button sits outside
   .nav-cta because flat.css hides .nav-cta below 1024 px for the nav.js drawer, and this
   page keeps its action visible (and sticky) at every width. */
.pg-dai-head__cta { margin-left: auto; }

/* Field labels mark the two optional fields in a lighter weight, so the three required
   fields read as the whole ask. */
.pg-dai-optional { margin-left: var(--sp-1); font-weight: var(--fw-regular); color: var(--fg-2); }

/* Firm-type chips are tap targets on a phone; chip--lg sits under the 44 px touch floor. */
#d-kind .chip--control { min-height: 44px; }

/* Talk section: the form sits beside the intro and the details on desktop. On a phone the
   DOM order (intro, form, details) puts the form straight under its heading instead of
   after the steps and commitments. */
.pg-dai-talk {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: "intro form" "more form";
  grid-template-rows: auto 1fr; column-gap: 36px; row-gap: var(--sp-6); align-items: start;
}
.pg-dai-talk__intro { grid-area: intro; }
.pg-dai-talk__form { grid-area: form; }
.pg-dai-talk__more { grid-area: more; }
@media (max-width: 800px) {
  .pg-dai-talk { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "more"; grid-template-rows: auto; row-gap: var(--sp-5); }
}

/* "What happens next": three numbered steps, each led by a callout disc. */
.pg-dai-steps { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.pg-dai-steps li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--fg-2); }
.pg-dai-steps .callout { margin-top: 1px; }

/* Slim footer: the legal line and the privacy policy, without the site's link columns.
   .footer already draws the top rule, so the base row drops its own. */
.pg-dai-foot { align-items: center; padding: var(--sp-6) 0; border-top: 0; }
.pg-dai-foot__logo { height: 22px; width: auto; }

/* flat.css toggles .status with [hidden]; without an entry transition it lands in one frame. */
#dai-status { animation: pg-dai-status 200ms var(--ease) both; }
@keyframes pg-dai-status { from { opacity: 0; } }