/*
Theme Name: Monk
Theme URI: https://github.com/chethanrt/themonk
Author: Impelsys
Description: Custom theme for the Monk WordPress site.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: monk
*/

@font-face {
  font-family: 'Sailec Bold';
  src: url('assets/fonts/Sailec-Bold.ttf') format('truetype');
  font-display: swap  ;
}

/* ==========================================================================
   BASE — document resets shared by every page
   In the htmls2026 handoff these sat in the combined stylesheet (under the
   Delivery block) and so applied site-wide; kept here for the same result.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #272729;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* ==========================================================================
   SHARED SITE CHROME — header, nav and footer
   Used by every page. Namespaced `site-` so it cannot collide with the
   page-scoped blocks below (`homepage-`, `publishing-`, `kai-`).

   Each of the three previews used to carry its own `.preview-*` chrome with
   slightly different rules and different child names. Those all collided on
   `.preview-header` / `.preview-footer` once the stylesheets were merged, so
   they are stripped out and replaced by this single implementation — which
   also gives the nav real links between the pages.
   ========================================================================== */

.site-header,
.site-header *,
.site-footer,
.site-footer * {
  box-sizing: border-box;
}

:root {
  --site-header-h: 76px;
  --site-gutter:   20px;
  --site-max:      1440px;
  --site-dark:     #02021b;
  --site-footer:   #03041b;
  --site-yellow:   #ffc600;
  --site-font:     'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* In-page links from the header (e.g. mon'k Fabric on the homepage) glide
   rather than jump, unless the visitor has asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* -- header ---------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--site-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--site-header-h);
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.site-brand {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}

.site-brand img {
  display: block;
  width: auto;
  height: 52px;   /* was 42px — enlarged now the logo is the only header link home */
}

.site-nav-toggle {
  -webkit-appearance: none;
  appearance: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.site-nav-toggle span:not(.site-sr-only) {
  display: block;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
}

.site-nav {
  display: none;
}

.site-nav.is-open {
  display: block;
  position: absolute;
  top: var(--site-header-h);
  left: 0;
  right: 0;
  background: var(--site-dark);
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 8px var(--site-gutter) 18px;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.site-nav a {
  display: block;
  padding: 12px 0;
  font-family: var(--site-font);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #ffffff;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--site-yellow);
}

.site-nav a[aria-current="page"] {
  color: var(--site-yellow);
  font-weight: 700;
}

.site-cta {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 5px;
  background: var(--site-yellow);
  color: #000000;
  font-family: var(--site-font);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
  transition: background-color .18s ease;
}

.site-cta:hover,
.site-cta:focus-visible {
  background: #ffd23d;
}

/* Contact Us inside the menu — phones and tablets only. Below 1024px the
   header's own .site-cta button is hidden to make room for the menu toggle,
   which left the menu with no way to reach Contact Us. From 1024px up this
   item is hidden and the header button returns, so the desktop header is
   exactly as before. (0,2,0)–(0,3,1) to beat the `.site-nav a` link rules. */
.site-nav .site-nav__contact {
  margin-top: 12px;
}

.site-nav .site-nav__contact a,
.site-nav .site-nav__contact a[aria-current="page"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 5px;
  background: var(--site-yellow);
  color: #000000;
  font-weight: 700;
  text-align: center;
  transition: background-color .18s ease;
}

.site-nav .site-nav__contact a:hover,
.site-nav .site-nav__contact a:focus-visible {
  background: #ffd23d;
  color: #000000;
}

@media (min-width: 1024px) {
  .site-nav .site-nav__contact {
    display: none;
  }
}

/* -- dropdowns: Products > Publishing / Delivery > the five products --------
   Mobile: accordions inside the open menu, toggled by script.js.
   Desktop (1024+): a panel under the header on hover or click, with the
   Delivery products in a second panel beside it. */

.site-nav__item--has-sub {
  position: relative;
}

.site-nav__trigger {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--site-font);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #ffffff;
  text-align: left;
}

.site-nav__trigger:hover,
.site-nav__trigger:focus-visible,
.site-nav__trigger.is-active,
.site-nav a.is-active {
  color: var(--site-yellow);
}

.site-nav__trigger.is-active,
.site-nav a.is-active {
  font-weight: 700;
}

/* A CSS chevron: points down, flips up when its menu is open. */
.site-nav__chev {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease, margin .18s ease;
}

[aria-expanded="true"] > .site-nav__chev {
  margin-top: 4px;
  transform: rotate(-135deg);
}

/* (0,2,0) so it beats the `.site-nav ul { display: flex }` rule above. */
.site-nav .site-subnav {
  display: none;
  flex-direction: column;
  padding-left: 16px;
  border-left: 2px solid rgba(255, 199, 0, .35);
}

.site-nav .site-subnav.is-open {
  display: flex;
}

.site-nav .site-subnav a {
  padding: 10px 0;
  font-size: 1rem;
}

.site-subnav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.site-subnav__row > a {
  flex: 1 1 auto;
}

.site-subnav__row > .site-nav__trigger {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
}

/* -- footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--site-footer);
  padding-block: 26px;
}

/* Two centred lines: the footer links first, then the logo + tagline. */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  max-width: var(--site-max);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.site-footer__brand img {
  display: block;
  width: auto;
  height: 40px;
}

.site-footer__tag {
  font-family: var(--site-font);
  font-weight: 400;
  font-size: 1rem;
  color: #ffffff;
}

.site-footer__tag a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__tag a:hover,
.site-footer__tag a:focus-visible {
  color: var(--site-yellow);
}

/* Footer logo cursor (Safari, macOS): hovering the logo flipped between the
   hand and the text I-beam, because parts of the brand row that are not the
   image itself (the link's own box around it, the tagline beside it) fell
   back to Safari's text cursor. The link is shrunk to exactly the image and
   shows the hand on it and the image; the rest of the brand row uses the
   plain arrow, and is not selectable, so no I-beam can appear there. Any
   link inside the tagline still gets the hand. All screen sizes. */
.site-footer .site-footer__brand {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.site-footer .site-footer__brand a {
  display: inline-flex;
  line-height: 0;
  cursor: pointer;
}

.site-footer .site-footer__tag a {
  display: inline;
  line-height: inherit;
}

.site-footer .site-footer__brand a img {
  cursor: pointer;
  -webkit-user-drag: none;
}

.site-footer nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
}

/* From tablet width all six links fit, so keep them on one line. */
@media (min-width: 768px) {
  .site-footer nav ul {
    flex-wrap: nowrap;
  }

  .site-footer nav a {
    white-space: nowrap;
  }
}

.site-footer nav a {
  font-family: var(--site-font);
  font-weight: 500;
  font-size: 1rem;
  color: #ffffff;
  text-decoration: none;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: var(--site-yellow);
}

.site-footer nav a[aria-current="page"],
.site-footer nav a.is-active {
  color: var(--site-yellow);
  font-weight: 700;
}

/* -- shared utilities ------------------------------------------------------ */

.site-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.site-header :focus-visible,
.site-footer :focus-visible {
  outline: 3px solid var(--site-yellow);
  outline-offset: 3px;
}

/* A carousel control with nothing left to scroll is hidden outright rather
   than left sitting there dead. Set by script.js; !important because the
   page blocks set `display: flex` on these. */
[data-carousel-prev][hidden],
[data-carousel-next][hidden] {
  display: none !important;
}

@media (min-width: 480px) {
  :root { --site-gutter: 24px; }
}

@media (min-width: 768px) {
  /* Ramps continuously from 32px at 768 to the Figma's 100px at 1440, then
     holds. It used to step 32 -> 40 at 1024 -> 100 only at exactly 1440,
     which left every laptop width between 1024 and 1439 sitting at 40px
     where the design implies 58-100px, and let the header drift out of line
     with the page content above 1320px.

     Keep this identical to --ai-licensing-gutter: the header and footer are
     drawn by this token and the page body by that one, so if the two ramps
     ever diverge the logo stops lining up with the headline beneath it. */
  :root { --site-gutter: clamp(32px, 10.119vw - 45.71px, 100px); }
}

@media (min-width: 1024px) {
  .site-nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    margin-left: auto;
  }

  .site-nav ul {
    flex-direction: row;
    gap: 26px;
  }

  .site-nav a {
    padding: 0;
  }

  .site-cta {
    display: inline-flex;
  }

  .site-nav > ul {
    align-items: center;
  }

  .site-nav__trigger {
    width: auto;
    padding: 0;
  }

  /* Bridges the gap between the nav item and its panel, so the pointer can
     travel down to the panel without the hover dropping. */
  .site-nav > ul > .site-nav__item--has-sub::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: 100%;
    height: 28px;
  }

  .site-nav .site-subnav {
    position: absolute;
    top: calc(100% + 26px);
    left: -18px;
    z-index: 1;
    min-width: 230px;
    padding: 8px 0;
    gap: 0;
    background: var(--site-dark);
    border-left: 0;
    border-top: 2px solid var(--site-yellow);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
  }

  .site-nav__item--has-sub:hover > .site-subnav {
    display: flex;
  }

  .site-nav .site-subnav a {
    padding: 10px 18px;
    white-space: nowrap;
  }

  .site-nav .site-subnav li:hover > a,
  .site-nav .site-subnav li:hover > .site-subnav__row {
    background: rgba(255, 255, 255, .06);
  }

  .site-subnav__row > .site-nav__trigger {
    width: 36px;
    height: 36px;
    margin-right: 8px;
  }

  /* Inside the panel the Delivery chevron points right, at its flyout. */
  .site-subnav__row > .site-nav__trigger > .site-nav__chev,
  .site-subnav__row > .site-nav__trigger[aria-expanded="true"] > .site-nav__chev {
    margin: 0 0 0 -3px;
    transform: rotate(-45deg);
  }

  /* The five Delivery products, beside the first panel. script.js flips it
     to the left side when there is no room on the right. */
  .site-nav .site-subnav--nested {
    top: -10px;
    left: 100%;
    border-radius: 0 6px 6px 6px;
  }

  .site-nav .site-subnav--nested.is-flipped {
    left: auto;
    right: 100%;
    border-radius: 6px 0 6px 6px;
  }
}

/* The 1440 step that used to set --site-gutter: 100px is gone — the clamp
   above reaches 100px at 1440 on its own and holds there beyond it. */

@media (prefers-reduced-motion: reduce) {
  .site-cta,
  .site-nav a {
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   PAGE — home (home.html)
   Lifted from preview/homepage/style.css. Every selector is
   already namespaced, so it cannot reach the other two pages.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Tokens — every colour and face lifted from the Figma
   -------------------------------------------------------------------------- */

:root {
  /* Brand */
  --homepage-yellow:        #ffc600;
  --homepage-yellow-ink:    #e3b205;  /* eyebrow text on light backgrounds */
  --homepage-badge:         #fde39b;  /* icon coin, both the dark card and KAI */
  --homepage-btn-ink:       #282626;

  /* Darks */
  --homepage-header-bg:     #02021b;
  --homepage-footer-bg:     #03041b;
  --homepage-navy:          #060f1e;  /* benefit cards, testimonial scrim */
  --homepage-card-dark:     #08101e;  /* "What is mon'k" side card */
  --homepage-quote-dark:    #182433;  /* alternate testimonial card */

  /* Type */
  --homepage-hero-ink:      #0f0f35;
  --homepage-heading:       #333333;
  --homepage-heading-soft:  #4c4c4c;
  --homepage-body:          #444444;
  --homepage-ink:           #1b1b1b;

  /* On dark */
  --homepage-on-dark:       #ffffff;
  --homepage-on-dark-soft:  #d7d7d7;
  --homepage-on-dark-dim:   #aeaeae;
  --homepage-card-title:    #fdf7e2;
  --homepage-quote-light:   #f9f9f9;
  --homepage-quote-body:    #e4e4e4;
  --homepage-quote-name:    #e6e6e6;
  --homepage-role:          #888888;
  --homepage-quote-ink:     #525059;

  /* Surfaces */
  --homepage-white:         #ffffff;
  --homepage-panel:         #f8fafc;
  --homepage-beige:         #f6f3ec;
  --homepage-grey:          #f2f2f2;
  --homepage-offwhite:      #fdfdfd;
  --homepage-border:        #d9d9d9;

  /* Faces — a local stack after each web font so the page still reads offline */
  --homepage-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --homepage-body-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --homepage-body-med: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Metrics */
  --homepage-max:      1240px;
  --homepage-gutter:   20px;
  --homepage-header-h: 76px;   /* the theme's fixed header, --monk-header-h */
  --homepage-radius:   10px;
}


/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.homepage-page,
.homepage-page *,
.homepage-page *::before,
.homepage-page *::after {
  box-sizing: border-box;
}

.homepage-page {
  /* Clears the theme's position:fixed header. The theme zeroes its own
     .monk-main offset for pages carrying a generated stylesheet. */
  padding-top: var(--homepage-header-h);
  margin: 0;
  background: var(--homepage-white);
  font-family: var(--homepage-body-font);
  color: var(--homepage-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;   /* belt-and-braces against a stray wide child */
}

/* Content is --homepage-max wide and the gutter sits outside it, the same
   model as every other page — so the margins match the header at every width. */
.homepage-shell {
  width: 100%;
  max-width: calc(var(--homepage-max) + var(--homepage-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--homepage-gutter);
}

/* The reset is wrapped in :where() on purpose. A plain `.homepage-page p`
   selector scores 0,1,1 and would out-specify every single-class component
   rule below it — silently eating their margins and any height set on an
   icon. :where() contributes nothing to specificity, so these land at 0,1,0
   and any component rule further down the file wins on source order. */
.homepage-page :where(p, h1, h2, h3, ul, figure, blockquote) {
  margin: 0;
  padding: 0;
}

.homepage-page :where(ul) {
  list-style: none;
}

.homepage-page :where(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Long words and URLs must not blow the layout out at 320px.
   `break-word` rather than `anywhere`: `anywhere` lets the browser break a
   word even when the whole word would have fitted on the next line, which
   gave "commercializatio / n" at 320. `break-word` only breaks a word that
   cannot fit on a line of its own — which is the case worth handling. */
.homepage-page p,
.homepage-page h1,
.homepage-page h2,
.homepage-page h3,
.homepage-page blockquote {
  overflow-wrap: break-word;
}

.homepage-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.homepage-page :focus-visible {
  outline: 3px solid var(--homepage-yellow);
  outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Shared — eyebrow label, and the yellow pill button
   -------------------------------------------------------------------------- */

.homepage-eyebrow {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--homepage-yellow-ink);
  margin-bottom: 14px;
}

/* The twin 40px rules that sit to the left of the label in the Figma —
   one white, one yellow, offset by 2px. Stacked above the text on narrow
   screens, beside it from 768 up. */
.homepage-eyebrow--rules {
  position: relative;
  padding-top: 12px;
}

.homepage-eyebrow--rules::before,
.homepage-eyebrow--rules::after {
  content: "";
  position: absolute;
  top: 0;
  width: 40px;
  height: 2px;
}

.homepage-eyebrow--rules::before {
  left: 2px;
  background: var(--homepage-offwhite);
}

.homepage-eyebrow--rules::after {
  left: 0;
  top: 4px;
  background: var(--homepage-yellow-ink);
  border: 1px solid var(--homepage-yellow);
}

.homepage-eyebrow--onDark {
  color: var(--homepage-yellow);
  font-weight: 600;
  position: relative;
  padding-top: 12px;
}

.homepage-eyebrow--onDark::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--homepage-yellow);
}

.homepage-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 55px;
  padding: 0 20px;
  border-radius: 5px;
  background: var(--homepage-yellow);
  color: var(--homepage-btn-ink);
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.homepage-btn:hover,
.homepage-btn:focus-visible {
  background: #ffd23d;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(255, 198, 0, .35);
}

.homepage-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.homepage-btn__icon {
  flex: 0 0 auto;
  transition: transform .18s ease;
}

.homepage-btn:hover .homepage-btn__icon,
.homepage-btn:focus-visible .homepage-btn__icon {
  transform: translateX(3px);
}


/* ==========================================================================
   1. HERO
   ========================================================================== */

.homepage-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 420px;
  padding-block: 56px;
  overflow: hidden;
  background: #eef2f8;
}

.homepage-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.homepage-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The Figma anchors this banner to its bottom edge, cropping the top. The
     horizontal bias keeps the artwork in frame as the viewport narrows. */
  object-position: 72% bottom;
}

/* A wash so the heading stays legible over the artwork. On narrow screens the
   text spans the full width, so the veil has to be near-even; from 1024 up the
   copy sits left of the artwork and it becomes a diagonal that clears the
   right-hand side. */
.homepage-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .84) 55%, rgba(255, 255, 255, .74) 100%);
}

.homepage-hero__inner {
  position: relative;
  z-index: 1;
}

.homepage-hero__title {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(2rem, 6.2vw, 3.75rem);
  line-height: 1.27;
  color: var(--homepage-hero-ink);
  /* The Figma gives this block 934px, so "Publishing, Simplified" stays on
     one line before the explicit break. */
  max-width: 940px;
}

/* The highlighter swash behind "Agentic AI". Painted as the span's own
   background so no z-index juggling is needed — identical in all four
   engines and it follows the text when it wraps. */
.homepage-hero__mark {
  background-image: linear-gradient(var(--homepage-yellow), var(--homepage-yellow));
  background-repeat: no-repeat;
  background-size: 100% .26em;
  background-position: 0 calc(100% - .12em);
  padding-inline: 2px;
}

.homepage-hero__sub {
  margin-top: 18px;
  max-width: 34ch;
  font-family: var(--homepage-body-font);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  color: #18171c;
}

.homepage-hero .homepage-btn {
  margin-top: 26px;
  min-width: 180px;
}


/* ==========================================================================
   2. WHAT IS MON'K
   ========================================================================== */

.homepage-about {
  padding-block: 56px;
  background: var(--homepage-white);
}

.homepage-about__grid {
  display: grid;
  gap: 16px;
}

.homepage-about__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--homepage-radius);
  background: var(--homepage-panel);
  padding: 32px 24px;
}

/* The oversized "mon'k" sitting at 5% opacity behind the copy. */
.homepage-about__watermark {
  position: absolute;
  left: 18px;
  bottom: -.18em;
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(4.5rem, 15vw, 12.1875rem);
  line-height: 1;
  color: rgba(51, 51, 51, .05);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.homepage-about__body {
  position: relative;
  z-index: 1;
}

/* Phones and tablets (below 1024px, where the panel has no min-height): the
   copy runs to the foot of the panel, so the pinned watermark landed on its
   last lines, and at 72px / 5% it read as a faint smudge. Here it leaves the
   overlay and takes its own row under the copy (flex `order` — it comes first
   in the markup), sized to fit the panel's inner width, a little firmer in
   tone, and still cropped by the panel's bottom edge as on desktop.
   Scoped (0,2,0) so the page's margin reset cannot cancel its spacing. */
@media (max-width: 1023.98px) {
  .homepage-about__panel {
    --homepage-about-pad-b: 32px;   /* = the panel's bottom padding */
    display: flex;
    flex-direction: column;
  }

  .homepage-about__panel .homepage-about__body {
    order: 1;
  }

  .homepage-about__panel .homepage-about__watermark {
    order: 2;
    position: relative;
    left: auto;
    bottom: auto;
    align-self: flex-start;
    max-width: 100%;
    margin-top: 24px;
    /* through the bottom padding, then crop ~18% of the glyphs */
    margin-bottom: calc(-1 * var(--homepage-about-pad-b) - .18em);
    font-size: min(22vw, 9rem);
    color: rgba(51, 51, 51, .09);
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .homepage-about__panel {
    --homepage-about-pad-b: 40px;
  }
}

.homepage-about__title {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.375rem);
  line-height: 1.21;
  color: var(--homepage-heading-soft);
  margin-bottom: 20px;
}

.homepage-about__text {
  font-family: var(--homepage-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--homepage-body);
}

.homepage-about__side {
  display: grid;
  gap: 16px;
  align-content: start;
}

.homepage-about__points {
  border-radius: var(--homepage-radius);
  background: var(--homepage-card-dark);
  padding: 26px 24px;
  display: grid;
}

.homepage-about__points li {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-block: 15px;
}

.homepage-about__points li + li {
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Solid, per the Figma: the badge is an opaque #FDE39B coin and the icon on
   top is stroked #333. A translucent tint leaves that dark stroke invisible
   against the near-black card. */
.homepage-about__badge {
  flex: 0 0 auto;
  width: 51px;
  height: 51px;
  border-radius: 50%;
  background: var(--homepage-badge);
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-about__points p {
  font-family: var(--homepage-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.42;
  color: var(--homepage-on-dark);
}

.homepage-about__figure img {
  width: 100%;
  border-radius: var(--homepage-radius);
  object-fit: cover;
}


/* ==========================================================================
   3. THE BUSINESS CASE
   ========================================================================== */

.homepage-business {
  padding-block: 56px 0;
  background: var(--homepage-white);
}

.homepage-business__title {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.375rem);
  line-height: 1.18;
  color: var(--homepage-heading);
  margin-bottom: 28px;
}

.homepage-business__frame {
  /* z-index keeps the card above the beige band it overlaps at >=1280 */
  position: relative;
  z-index: 1;
  max-width: 1129px;
  padding: 10px;
  border: 1px solid var(--homepage-border);
  border-radius: var(--homepage-radius);
  background: #fefefe;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, .05);
}

/* --------------------------------------------------------------------------
   Business-case dashboard — "Smarter Publishing, Built on AI".

   Live HTML rebuild of the two chart cards in the reference page
   (monk-website-updated.html, `.charts`). The reference draws them as
   fixed-size SVGs, whose text would shrink to ~7px on a phone; as HTML the
   copy stays legible at every width. Colours are the reference's, bar
   proportions are its (KAI bar = 201 of 470 = 42.8%).
   -------------------------------------------------------------------------- */

.homepage-dash {
  --homepage-dash-ink:       #0b0f14;
  --homepage-dash-body:      #46586b;
  /* The reference's #8496a6 is 3:1 on the card — too faint for 12.5px text —
     so the captions use the same slate one step darker (4.6:1). */
  --homepage-dash-caption:   #697a8a;
  --homepage-dash-dark:      #46586b;
  --homepage-dash-yellow:    #f6c81b;
  --homepage-dash-track:     #edf1f4;
  --homepage-dash-rule:      #dfe5ea;
  --homepage-dash-rule-soft: #edf1f4;
  --homepage-dash-gold:      #8f7005;   /* stage times — 4.9:1 on the card */
  --homepage-dash-line:      #eedca0;   /* timeline connector */

  display: grid;
  gap: 16px;
}

.homepage-dash__card {
  display: flex;
  flex-direction: column;
  padding: 26px 22px 24px;
  border: 1px solid #e6e7ea;
  border-radius: 8px;
  background: #fbfbfa;
}

.homepage-dash__title {
  font-family: var(--homepage-body-font);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--homepage-dash-ink);
}

.homepage-dash__sub {
  margin-top: 8px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--homepage-dash-body);
}

.homepage-dash__caption {
  margin-top: 26px;
  font-size: .78125rem;   /* 12.5px */
  line-height: 1.4;
  color: var(--homepage-dash-caption);
}

/* -- Efficiency: traditional vs KAI ---------------------------------------- */

.homepage-dash__compare {
  display: grid;
  gap: 22px;
  margin: 20px 0 28px;
}

.homepage-dash__compare-row {
  display: grid;
  gap: 10px;
}

.homepage-dash__compare-label {
  font-size: .84375rem;   /* 13.5px */
  line-height: 1.3;
  color: var(--homepage-dash-body);
}

.homepage-dash__bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 34px;
  border-radius: 4px;
  background: var(--homepage-dash-track);
}

.homepage-dash__bar-fill {
  flex: none;
  height: 100%;
  border-radius: 4px;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

.homepage-dash__bar-fill--traditional { width: 100%;  background: var(--homepage-dash-dark); }
.homepage-dash__bar-fill--kai         { width: 42.8%; background: var(--homepage-dash-yellow); }

.homepage-dash__bar-value {
  font-weight: 600;
  font-size: .875rem;
  line-height: 1;
  white-space: nowrap;
}

/* "12–16 weeks" sits inside the dark bar, right-aligned; "as low as 6 weeks"
   follows the end of the yellow one. */
.homepage-dash__bar-value--inside {
  position: absolute;
  right: 16px;
  color: #ffffff;
}

.homepage-dash__bar-value--after {
  padding-left: 12px;
  color: var(--homepage-dash-ink);
}

.homepage-dash__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;   /* on the card's floor when the Speed card is taller */
  padding-top: 16px;
  border-top: 1px solid var(--homepage-dash-rule);
}

.homepage-dash__stat {
  padding: 0 10px;
  border-left: 1px solid var(--homepage-dash-rule-soft);
}

.homepage-dash__stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.homepage-dash__stat-num {
  display: block;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;   /* no jitter while counting up */
  color: var(--homepage-dash-ink);
}

.homepage-dash__stat-num--word {
  font-size: 1.125rem;
  letter-spacing: 0;
  line-height: 1.55;   /* sits on the same baseline band as the numbers */
}

.homepage-dash__stat-text {
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  line-height: 1.35;
  color: var(--homepage-dash-body);
}

/* -- Speed: four-stage timeline --------------------------------------------- */

/* An <ol>: the homepage reset only clears <ul>, so the browser's 40px list
   indent has to go here or the timeline sits off the caption's left edge. */
.homepage-dash__steps {
  display: grid;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.homepage-dash__step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "dot title value"
    "dot sub   sub";
  column-gap: 8px;
  padding-bottom: 30px;
}

.homepage-dash__step:last-child {
  padding-bottom: 0;
}

/* The dot, centred on x=14 as in the reference. */
.homepage-dash__step::before {
  content: "";
  grid-area: dot;
  width: 14px;
  height: 14px;
  margin: 4px 0 0 7px;
  border-radius: 50%;
  background: var(--homepage-dash-yellow);
}

.homepage-dash__step:last-child::before {
  width: 16px;
  height: 16px;
  margin: 3px 0 0 6px;
  background: var(--homepage-dash-ink);
}

/* The connector down to the next dot. */
.homepage-dash__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 2px;
  left: 13px;
  width: 2px;
  background: var(--homepage-dash-line);
  -webkit-transform-origin: center top;
  transform-origin: center top;
}

.homepage-dash__step-title {
  grid-area: title;
  font-weight: 600;
  font-size: .96875rem;   /* 15.5px */
  line-height: 1.4;
  color: var(--homepage-dash-ink);
}

.homepage-dash__step-sub {
  grid-area: sub;
  margin-top: 2px;
  font-size: .78125rem;
  line-height: 1.4;
  color: var(--homepage-dash-body);
}

.homepage-dash__step-value {
  grid-area: value;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
  color: var(--homepage-dash-gold);
}

.homepage-dash__step:last-child .homepage-dash__step-value {
  color: var(--homepage-dash-ink);
}

/* -- Reveal animation ------------------------------------------------------
   Runs once, when the frame scrolls into view (script.js adds .is-revealed
   and counts 72% / 29% up from zero). Only transform and opacity move.

   The hidden state hangs off .js-enabled, so with no JS everything is drawn
   in its final state; the transitions live only on .is-revealed, so the drop
   into the hidden state when .js-enabled lands is instant, never visible. */

.js-enabled [data-chart-reveal]:not(.is-revealed) .homepage-dash__bar-fill {
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
}

.js-enabled [data-chart-reveal]:not(.is-revealed) .homepage-dash__bar-value,
.js-enabled [data-chart-reveal]:not(.is-revealed) .homepage-dash__stat-text,
.js-enabled [data-chart-reveal]:not(.is-revealed) .homepage-dash__stat-num--word {
  opacity: 0;
}

.js-enabled [data-chart-reveal]:not(.is-revealed) .homepage-dash__step {
  opacity: 0;
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

.js-enabled [data-chart-reveal]:not(.is-revealed) .homepage-dash__step::after {
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

/* Efficiency: the traditional bar, then the much shorter KAI bar. */
[data-chart-reveal].is-revealed .homepage-dash__bar-fill {
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

[data-chart-reveal].is-revealed .homepage-dash__bar-fill--kai { transition-delay: .3s; }

[data-chart-reveal].is-revealed .homepage-dash__bar-value {
  transition: opacity .4s ease .7s;
}

[data-chart-reveal].is-revealed .homepage-dash__bar-fill--kai + .homepage-dash__bar-value {
  transition-delay: 1s;
}

[data-chart-reveal].is-revealed .homepage-dash__stat-text,
[data-chart-reveal].is-revealed .homepage-dash__stat-num--word {
  transition: opacity .5s ease .5s;
}

/* Speed: the four stages arrive in order (the reference's .05/.18/.31/.44s),
   each connector drawing down to the next dot as its stage lands. */
[data-chart-reveal].is-revealed .homepage-dash__step {
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}

[data-chart-reveal].is-revealed .homepage-dash__step::after {
  transition: transform .45s ease-out;
}

[data-chart-reveal].is-revealed .homepage-dash__step:nth-child(1)        { transition-delay: .05s; }
[data-chart-reveal].is-revealed .homepage-dash__step:nth-child(1)::after { transition-delay: .35s; }
[data-chart-reveal].is-revealed .homepage-dash__step:nth-child(2)        { transition-delay: .18s; }
[data-chart-reveal].is-revealed .homepage-dash__step:nth-child(2)::after { transition-delay: .48s; }
[data-chart-reveal].is-revealed .homepage-dash__step:nth-child(3)        { transition-delay: .31s; }
[data-chart-reveal].is-revealed .homepage-dash__step:nth-child(3)::after { transition-delay: .61s; }
[data-chart-reveal].is-revealed .homepage-dash__step:nth-child(4)        { transition-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  /* script.js reveals at once and skips the count-up under reduced motion;
     this guarantees the final state is drawn with no movement at all. */
  [data-chart-reveal] .homepage-dash__bar-fill,
  [data-chart-reveal] .homepage-dash__bar-value,
  [data-chart-reveal] .homepage-dash__stat-text,
  [data-chart-reveal] .homepage-dash__stat-num--word,
  [data-chart-reveal] .homepage-dash__step,
  [data-chart-reveal] .homepage-dash__step::after {
    transition: none !important;
  }
}

@media (min-width: 480px) {
  .homepage-dash__bar-value { font-size: .9375rem; }
  .homepage-dash__stat { padding-inline: 16px; }
  .homepage-dash__stat:first-child { padding-left: 0; }
  .homepage-dash__stat-num { font-size: 2.125rem; }   /* 34px, as the reference */
  .homepage-dash__stat-num--word { font-size: 1.25rem; line-height: 1.7; }
  .homepage-dash__stat-text { font-size: .78125rem; }
}

@media (min-width: 768px) {
  .homepage-dash {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 21px;
  }

  .homepage-dash__card {
    padding: 32px 28px 28px;
  }

  .homepage-dash__step-value {
    font-size: 1.0625rem;   /* 17px */
  }
}


/* ==========================================================================
   4. BENEFIT CARDS
   ========================================================================== */

.homepage-benefits {
  padding-block: 48px 48px;
  background: var(--homepage-beige);
  margin-top: 48px;
}

.homepage-benefits__grid {
  display: grid;
  gap: 13px;
}

.homepage-benefit {
  display: flex;
  flex-direction: column;
  border-radius: var(--homepage-radius);
  background: var(--homepage-navy);
  padding: 34px 30px 30px;
  box-shadow: 0 0 15px -2px rgba(0, 0, 0, .1);
}

/* Each icon keeps its own Figma proportions (they differ card to card), so
   the size comes from the img's width/height attributes; this only caps it. */
.homepage-benefit__icon {
  width: auto;
  max-height: 50px;
  margin-bottom: 22px;
}

.homepage-benefit__title {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.23;
  color: var(--homepage-card-title);
  margin-bottom: 16px;
  /* Titles wrap where the card allows (no forced breaks), and every title
     holds exactly two lines of height, so the copy under them starts level
     across the row. `balance` splits a two-line title evenly. */
  min-height: calc(2em * 1.23);
  text-wrap: balance;
}

.homepage-benefit__text {
  font-family: var(--homepage-body-font);
  font-size: 1rem;
  line-height: 1.42;
  color: var(--homepage-on-dark-soft);
  margin-bottom: 22px;
}

.homepage-benefit__metric {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--homepage-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 2.6vw, 2.1875rem);
  line-height: 1.2;
  color: var(--homepage-yellow);
}

.homepage-benefit__label {
  margin-top: 4px;
  font-family: var(--homepage-body-med);
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1.47;
  color: var(--homepage-on-dark-dim);
}

/* Side by side, every label holds two lines of height: the metric block sits
   on the card floor, so a label that wraps ("Incremental revenue, year one")
   would otherwise lift its divider and number above the others in the row. */
@media (min-width: 768px) {
  .homepage-benefit__label {
    min-height: calc(2em * 1.47);
  }
}


/* ==========================================================================
   5. CREDENTIALS STRIP
   ========================================================================== */

.homepage-credentials {
  padding-block: 48px;
  background: var(--homepage-white);
}

.homepage-credentials__grid {
  display: grid;
  gap: 28px 0;
}

.homepage-credentials__grid li {
  text-align: center;
  padding-inline: 12px;
}

.homepage-credentials__value {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.1875rem);
  line-height: 1.25;
  color: var(--homepage-heading);
}

.homepage-credentials__label {
  margin-top: 6px;
  font-family: var(--homepage-body-font);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--homepage-body);
}


/* ==========================================================================
   6. MON'K FABRIC
   ========================================================================== */

.homepage-fabric {
  padding-block: 48px;
  background: var(--homepage-grey);
  /* Landing target for the header's "mon'k Fabric" link (home.html#monk-fabric);
     keeps the diagram clear of the fixed header. */
  scroll-margin-top: var(--site-header-h);
}

/* The three-layer architecture diagram is one dense 2294x1638 image; its
   smallest labels are ~22px at full size. Held at a 1000px floor they stay
   around 10px and readable, so below 1024 the image keeps that width and
   pans sideways inside its own scroll container — the page itself never
   gains a horizontal scrollbar. From 1024 up it fits the column. */
.homepage-fabric__figure {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.homepage-fabric__figure img {
  width: 100%;
  min-width: 1000px;
  margin-inline: auto;
  border-radius: 8px;
}

@media (min-width: 1024px) {
  .homepage-fabric__figure {
    overflow-x: visible;
  }

  .homepage-fabric__figure img {
    min-width: 0;
  }
}

/* ==========================================================================
   7. WHAT IS KAI
   ========================================================================== */

.homepage-kai {
  padding-block: 56px;
  background: var(--homepage-offwhite);
}

.homepage-kai__grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

.homepage-kai__title {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.1vw, 2.1875rem);
  line-height: 1.28;
  color: var(--homepage-heading);
  margin-bottom: 18px;
}

.homepage-kai__text {
  font-family: var(--homepage-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--homepage-body);
}

.homepage-kai__points {
  margin-block: 28px;
  display: grid;
}

.homepage-kai__points li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 14px;
}

.homepage-kai__points li + li {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.homepage-kai__badge {
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--homepage-badge);
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-kai__points p {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.42;
  color: var(--homepage-heading);
}

/* The source PNG is a much wider composition (1672x941) that the Figma crops
   to its right-hand portion, showing the robot alone. Reproduced with cover
   plus a hard-right object-position, which lands on the same crop. */
.homepage-kai__figure img {
  width: 100%;
  max-width: 628px;
  aspect-ratio: 628 / 675;
  height: auto;
  object-fit: cover;
  object-position: 100% center;
  margin-inline: auto;
}


/* ==========================================================================
   8. TESTIMONIALS — carousel
   ========================================================================== */

.homepage-testimonials {
  position: relative;
  padding-block: 64px;
  background-color: var(--homepage-navy);
  background-image: url('assets/images/home/testimonials-bg.png');
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

/* The Figma lays a 90%-opacity #060f1e over the photograph. */
.homepage-testimonials::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(6, 15, 30, .9);
}

.homepage-testimonials__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}

.homepage-testimonials__title {
  margin-top: 10px;
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.25;
  color: var(--homepage-quote-light);
  max-width: 600px;
}

/* -- controls ------------------------------------------------------------ */

.homepage-carousel__controls {
  display: flex;
  gap: 14px;
}

.homepage-carousel__arrow {
  /* A real <button>, so it is keyboard-reachable for free. */
  -webkit-appearance: none;
  appearance: none;
  width: 50px;
  height: 50px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: transparent;
  color: var(--homepage-on-dark);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

.homepage-carousel__arrow:hover:not(:disabled),
.homepage-carousel__arrow:focus-visible:not(:disabled) {
  background: rgba(255, 198, 0, .18);
  border-color: var(--homepage-yellow);
}

/* Disabled at the ends rather than hidden, so the control count never jumps. */
.homepage-carousel__arrow:disabled {
  opacity: .35;
  cursor: default;
}

/* Figma draws both chevrons from the same right-pointing glyph and rotates
   one of them, so the exported "prev" asset points the wrong way on its own. */
.homepage-carousel__arrow--prev img {
  transform: rotate(180deg);
}

/* -- track --------------------------------------------------------------- */

.homepage-carousel__track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;

  /* Both engines' scrollbar syntaxes, so neither shows a bar over the cards.
     Nothing here is load-bearing for legibility. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.homepage-carousel__track::-webkit-scrollbar {
  display: none;
}

.homepage-quote {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 331px;
  padding: 34px 28px;
  background: var(--homepage-white);
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, .02);
}

/* The Figma pairs a light card with a dark one; alternating keeps that
   rhythm however many testimonials the repeater ends up holding. */
.homepage-quote:nth-child(even) {
  background: var(--homepage-quote-dark);
}

.homepage-quote__mark {
  width: 40px;
  height: auto;
  margin-bottom: 26px;
}

.homepage-quote__text {
  font-family: var(--homepage-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--homepage-quote-ink);
}

.homepage-quote:nth-child(even) .homepage-quote__text {
  color: var(--homepage-quote-body);
}

.homepage-quote__person {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.homepage-quote__person img {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.homepage-quote__person figcaption {
  display: flex;
  flex-direction: column;
}

.homepage-quote__name {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  color: #000000;
}

.homepage-quote:nth-child(even) .homepage-quote__name {
  color: var(--homepage-quote-name);
}

.homepage-quote__role {
  font-family: var(--homepage-display);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--homepage-role);
}

/* -- dots ---------------------------------------------------------------- */

.homepage-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

/* Empty until script.js fills it, so nothing reserves space without JS. */
.homepage-carousel__dots:empty {
  display: none;
}

.homepage-carousel__dot {
  -webkit-appearance: none;
  appearance: none;
  width: 44px;             /* 44px tap target around a 12px visual dot */
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.homepage-carousel__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transition: background-color .18s ease, transform .18s ease;
}

.homepage-carousel__dot[aria-current="true"]::before {
  background: var(--homepage-yellow);
  transform: scale(1.15);
}

/* Arrows and dots are JS-only controls. Without the script they never appear,
   and the track is still a swipeable, trackpad-scrollable row. */
.homepage-carousel__controls {
  display: none;
}

.homepage-page.js-enabled .homepage-carousel__controls {
  display: flex;
}


/* ==========================================================================
   9. CLOSING CTA
   ========================================================================== */

.homepage-cta {
  position: relative;
  padding-block: 64px;
  background: var(--homepage-white);
  isolation: isolate;
  overflow: hidden;
}

.homepage-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('assets/images/home/cta-background.jpg');
  background-size: cover;
  background-position: center;
  opacity: .15;
}

.homepage-cta__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.homepage-cta .homepage-eyebrow {
  color: var(--homepage-yellow-ink);
}

.homepage-cta__title {
  font-family: var(--homepage-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 4.4vw, 3.125rem);
  line-height: 1.12;
  color: var(--homepage-ink);
  max-width: 800px;
}

.homepage-cta__text {
  margin-top: 16px;
  max-width: 44ch;
  font-family: var(--homepage-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--homepage-ink);
}

.homepage-cta .homepage-btn {
  margin-top: 26px;
  min-width: 180px;
}
.homepage-about + .homepage-business {
  padding-top: 0;
}


/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* -- 480 ------------------------------------------------------------------ */
@media (min-width: 480px) {
  :root {
    --homepage-gutter: 24px;
  }

  .homepage-hero {
    min-height: 480px;
  }

  .homepage-quote {
    padding: 40px 34px;
  }
}


/* -- 768 ------------------------------------------------------------------ */
@media (min-width: 768px) {
  :root {
    /* Same ramp as --site-gutter: 32px at 768 → 100px at 1440, then holds. */
    --homepage-gutter: clamp(32px, 10.119vw - 45.71px, 100px);
  }

  .homepage-hero {
    min-height: 560px;
    padding-block: 72px;
  }

  .homepage-about,
  .homepage-kai {
    padding-block: 72px;
  }

  .homepage-about__panel {
    padding: 40px 36px;
  }

  /* The twin rules move beside the label once there is room. */
  .homepage-eyebrow--rules {
    padding-top: 0;
    padding-left: 52px;
  }

  .homepage-eyebrow--rules::before {
    top: calc(50% - 3px);
    left: 2px;
  }

  .homepage-eyebrow--rules::after {
    top: calc(50% + 1px);
    left: 0;
  }

  .homepage-benefits__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .homepage-credentials__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }

  .homepage-credentials__grid li + li {
    border-left: 1px solid var(--homepage-yellow);
  }

  /* On a 2-up grid the third item starts a new row, so it must not carry
     a left border. */
  .homepage-credentials__grid li:nth-child(odd) {
    border-left: 0;
  }

  .homepage-quote {
    flex-basis: 72%;
  }

  .homepage-kai__points li {
    gap: 38px;
  }

  .homepage-testimonials,
  .homepage-cta {
    padding-block: 80px;
  }
}


/* -- 1024 ----------------------------------------------------------------- */
@media (min-width: 1024px) {
  .homepage-hero {
    min-height: 660px;
    padding-block: 90px;
  }

  /* Both columns stretch to the taller of the two (the default `stretch`,
     stated here because it is load-bearing) so they finish on the same line.
     The Figma allots the side card 266px, but the first bullet wraps to two
     lines in the browser and pushes past it — with `align-items: start` that
     slack hung off the bottom of the right column. */
  .homepage-about__grid {
    grid-template-columns: minmax(0, 687fr) minmax(0, 532fr);
    gap: 21px;
    align-items: stretch;
  }

  .homepage-about__panel {
    min-height: 565px;
    padding: 44px 40px;
  }

  /* `auto 1fr`: the bullet card takes what it needs and the image absorbs
     whatever is left, so the column fills the row height exactly — whichever
     side turns out taller. */
  .homepage-about__side {
    align-content: stretch;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .homepage-about__figure {
    min-height: 0;
  }

  .homepage-about__figure img {
    height: 100%;
    min-height: 283px;
  }

  .homepage-about__points {
    min-height: 266px;
    padding: 30px 29px;
    align-content: center;
  }

  .homepage-kai__grid {
    grid-template-columns: minmax(0, 669fr) minmax(0, 628fr);
    gap: 40px;
  }

  .homepage-kai__figure {
    order: 2;
  }

  /* Wide enough for the copy to sit clear of the artwork, so the veil can
     fade out across the right-hand side as the Figma has it. */
  .homepage-hero__media::after {
    background: linear-gradient(100deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 38%, rgba(255, 255, 255, 0) 72%);
  }

  .homepage-fabric {
    padding-block: 72px;
  }

  .homepage-quote {
    flex-basis: 76%;
    padding: 40px 57px;
  }

  .homepage-testimonials__title {
    margin-top: 14px;
  }
}


/* -- 1280 ----------------------------------------------------------------- */
@media (min-width: 1280px) {
  .homepage-hero {
    min-height: 733px;
    padding-block: 110px;
  }

  .homepage-hero__media img {
    object-position: center bottom;
  }

  .homepage-about,
  .homepage-kai {
    padding-block: 90px;
  }

  .homepage-business {
    padding-block: 90px 0;
  }

  .homepage-benefits__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* The Figma runs the beige band up behind the lower third of the business
     case card, so the card straddles the colour change. Desktop only — below
     this width the two sections simply sit one after the other. */
  .homepage-benefits {
    margin-top: -193px;
    padding-top: 230px;
    padding-bottom: 56px;
  }

  .homepage-credentials {
    padding-block: 61px 56px;
  }

  .homepage-credentials__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .homepage-credentials__grid li:nth-child(odd) {
    border-left: 1px solid var(--homepage-yellow);
  }

  .homepage-credentials__grid li:first-child {
    border-left: 0;
  }

  .homepage-fabric {
    padding-block: 79px 75px;
  }

  .homepage-testimonials {
    padding-block: 105px 95px;
  }

  .homepage-cta {
    padding-block: 122px 116px;
  }
}


/* -- 1440 ----------------------------------------------------------------- */
/* The 1440 step (gutter 100px, max 1440px) is gone — the 768 clamp reaches
   100px at 1440 on its own, and the shell now adds the gutter outside the
   1240px content, so no max-width override is needed. */


/* ==========================================================================
   Reduced motion — no transitions, no smooth scrolling, no transforms
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .homepage-page *,
  .homepage-page *::before,
  .homepage-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .homepage-btn:hover,
  .homepage-btn:focus-visible {
    transform: none;
  }

  .homepage-carousel__dot[aria-current="true"]::before {
    transform: none;
  }
}



/* ==========================================================================
   PAGE — KAI (template-kai.php): banner photograph
   Figma "Kai" (85:9378). The KAI page's own stylesheet still draws the band;
   this only adds the robot photo behind the headline and re-spaces the
   headline now the eyebrow is gone. Every selector is scoped under
   .kai-agents-page (0,2,0), so it reaches no other page and wins over the
   KAI stylesheet's single-class rules whichever file loads last.
   ========================================================================== */

.kai-agents-page .kai-agents-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 72px;
}

.kai-agents-page .kai-agents-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Below 1280px the robot moves in behind the copy; a left-to-right shade
   keeps the white text legible there. */
.kai-agents-page .kai-agents-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(6, 15, 30, .82) 0%, rgba(6, 15, 30, .55) 55%, rgba(6, 15, 30, .15) 100%);
  pointer-events: none;
}

.kai-agents-page .kai-agents-hero-title {
  margin-top: 0;
}

.kai-agents-page .kai-agents-hero-lead {
  margin-top: 12px;
}

/* Phones see a narrow slice of the photo; aim it at the robot. */
@media (max-width: 767.98px) {
  .kai-agents-page .kai-agents-hero-bg {
    object-position: 76% 50%;
  }
}

@media (min-width: 768px) {
  .kai-agents-page .kai-agents-hero {
    padding-top: 112px;
  }
}

/* Figma: headline 152px into the 488px band. */
@media (min-width: 1024px) {
  .kai-agents-page .kai-agents-hero {
    padding-top: 152px;
  }
}

@media (min-width: 1280px) {
  .kai-agents-page .kai-agents-hero::after {
    display: none;
  }
}


/* ==========================================================================
   PRODUCT PAGES — video thumbnail cursor (Adaptive Learning, eBooks, Audio
   Video Player, Reader as a Service, Journals)
   The thumbnail (its yellow play button is part of the image) opens the
   video, so it shows the hand. Set outright on the link and the image:
   Safari can fall back to the arrow over an image scaled on hover inside a
   rounded, clipped link. `isolation` gives the clip its own layer, which
   also stops Safari dropping the rounded corners during the scale.
   Matches nothing on any other page.
   ========================================================================== */

.pd-intro-video,
.pd-intro-video img {
  cursor: pointer;
}

.pd-intro-video {
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   PAGE — privacy (template-privacy.php)
   A plain content page: the title in a dark hero, then the editor's body
   content in a readable column. Everything is scoped to .privacy-page.
   ========================================================================== */

.privacy-page {
  --privacy-max:     860px;
  --privacy-gutter:  20px;
  --privacy-hero-bg: #060F1E;
  --privacy-yellow:  #ffc600;
  --privacy-heading: #333333;
  --privacy-body:    #444444;
  --privacy-link:    #8a6d00;  /* the brand yellow is too pale for text on white */
  --privacy-rule:    #e5e5e5;

  padding-top: var(--site-header-h);
  background: #ffffff;
}

.privacy-container {
  width: 100%;
  max-width: calc(var(--privacy-max) + var(--privacy-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--privacy-gutter);
}

/* -- hero ------------------------------------------------------------------ */

.privacy-hero {
  padding-block: clamp(48px, 8vw, 110px);
  text-align: center;
  background-color: var(--privacy-hero-bg);
  background-image: radial-gradient(
    104.5% 91.1% at 50% 20%,
    rgba(245, 158, 11, 0.15) 0%,
    rgba(245, 158, 11, 0) 70%
  );
}

.privacy-hero-title {
  margin: 0;
  font-family: var(--site-font);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);
  line-height: 1.25;
  color: #ffffff;
}

/* -- body content (the_content) -------------------------------------------- */

.privacy-body {
  padding-block: clamp(40px, 6vw, 88px);
}

.privacy-content {
  font-family: var(--site-font);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--privacy-body);
  overflow-wrap: break-word;  /* long URLs and email addresses on phones */
}

.privacy-content > :first-child { margin-top: 0; }
.privacy-content > :last-child  { margin-bottom: 0; }

.privacy-content h2,
.privacy-content h3,
.privacy-content h4,
.privacy-content h5,
.privacy-content h6 {
  margin: 2em 0 0.6em;
  font-family: var(--site-font);
  font-weight: 600;
  line-height: 1.35;
  color: var(--privacy-heading);
}

.privacy-content h2 { font-size: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem); }
.privacy-content h3 { font-size: clamp(1.1875rem, 1.125rem + 0.3vw, 1.375rem); }
.privacy-content h4 { font-size: 1.125rem; }
.privacy-content h5,
.privacy-content h6 { font-size: 1rem; }

.privacy-content p,
.privacy-content ul,
.privacy-content ol,
.privacy-content blockquote,
.privacy-content table,
.privacy-content figure {
  margin: 0 0 1.1em;
}

.privacy-content ul,
.privacy-content ol {
  padding-left: 1.4em;
}

.privacy-content li { margin-bottom: 0.4em; }
.privacy-content li > ul,
.privacy-content li > ol { margin: 0.4em 0 0; }

.privacy-content strong,
.privacy-content b { font-weight: 600; color: var(--privacy-heading); }

.privacy-content a {
  color: var(--privacy-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.privacy-content a:hover,
.privacy-content a:focus-visible {
  color: var(--privacy-heading);
}

.privacy-content blockquote {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--privacy-yellow);
}

.privacy-content hr {
  margin: 2.5em 0;
  border: 0;
  border-top: 1px solid var(--privacy-rule);
}

.privacy-content img {
  max-width: 100%;
  height: auto;
}

/* Tables scroll sideways inside their block rather than widening the page. */
.privacy-content .wp-block-table {
  overflow-x: auto;
}

.privacy-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.privacy-content th,
.privacy-content td {
  padding: 10px 12px;
  border: 1px solid var(--privacy-rule);
  text-align: left;
  vertical-align: top;
}

.privacy-content th {
  font-weight: 600;
  color: var(--privacy-heading);
  background: #f8fafc;
}

@media (min-width: 768px) {
  .privacy-page { --privacy-gutter: 32px; }
  .privacy-content { font-size: 1.0625rem; }
}