/* Shared by every page: the current page in the header, the header that comes back pinned after the hero, a quiet secondary button, footer navigation, the live AI Fellow dialog and touch targets of the header and footer. */
.desktop-nav > a[aria-current="page"], .nav-trigger.is-current > span { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.mobile-links a[aria-current="page"], .mobile-products a[aria-current="page"] .mobile-product-title { color: var(--ink); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* The header leaves with the hero and comes back pinned (site.js). At the top of the page it sits in the flow as it
   always did; while the visitor scrolls through the hero it scrolls away with it; once the hero (the first section of
   <main>) has gone past the top of the window, .site-header-bar is fixed to the top and slides down with a fade over a
   frosted paper band; scrolling back into the hero, it slides up and fades, then returns to the flow, out of sight.
   .site-header keeps the header's height, so nothing below moves. site.js writes --header-h (the header's measured
   height) and adds .has-pinned-header to <html>: from then on --header-offset is that height, and anchors
   (scroll-padding-top) and the sticky stages of the home, the AI Adoption Platform and the LMS start below the
   header. Without JavaScript none of this applies and the header stays at the top of the page. Only transform and
   opacity move; reduced motion makes it appear and leave without sliding. */
:root { --header-offset: 0px; }
html.has-pinned-header { --header-offset: var(--header-h, 82px); scroll-padding-top: calc(28px + var(--header-offset)); }
.site-header { position: relative; z-index: 20; }
.site-header.is-pinned { height: var(--header-h, 82px); }
.site-header.is-pinned .site-header-bar { position: fixed; top: 0; left: 0; right: 0; transform: translateY(-100%); opacity: 0; transition: transform .26s cubic-bezier(.4, 0, 1, 1), opacity .2s ease .06s; }
.site-header.is-pinned.is-shown .site-header-bar { transform: none; opacity: 1; transition: transform .45s var(--ease), opacity .3s ease; }
.site-header.is-pinned .site-header-bar::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--header-h, 82px); z-index: -1; background: rgb(250 251 248 / .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgb(18 44 43 / .08), 0 10px 28px -20px rgb(16 54 57 / .4); }
.site-header.is-pinned .header { background: transparent; }
/* The mobile menu opens under the pinned header and scrolls on its own if the window is short. */
.site-header.is-pinned .mobile-nav { max-height: calc(100dvh - var(--header-h, 82px)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 18px 30px -24px rgb(16 54 57 / .5); }
@media (prefers-reduced-motion: reduce) {
  .site-header.is-pinned .site-header-bar, .site-header.is-pinned.is-shown .site-header-bar { transform: none; transition: none; }
}
@media (max-width: 650px) { html.has-pinned-header { scroll-padding-top: calc(20px + var(--header-offset)); } }

/* Products: a large panel under the header with the three products. It opens like a curtain from the header
   (clip-path), the page dims behind it, and the products rise in one after another while their screens settle.
   Closing is quicker and has no stagger. site.js sets data-state. */
.desktop-nav > a, .nav-trigger { min-height: 44px; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; color: inherit; font: inherit; line-height: inherit; }
.nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--ink); }
.nav-trigger .icon { width: 15px; height: 15px; stroke-width: 1.8; transition: rotate .35s var(--ease); }
.nav-trigger[aria-expanded="true"] .icon { rotate: 180deg; }

.mega { --mega-radius: 24px; --mega-pad: 12px; position: absolute; top: calc(100% - 8px); left: 0; right: 0; z-index: 5; padding: var(--mega-pad); border-radius: var(--mega-radius); background: #fff; outline: 1px solid rgb(18 44 43 / .08); outline-offset: -1px; color: var(--ink); visibility: hidden; clip-path: inset(0 0 100% 0 round var(--mega-radius)); transition: clip-path .26s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .26s; }
.mega[data-state="open"] { visibility: visible; clip-path: inset(0 0 0 0 round var(--mega-radius)); transition: clip-path .6s var(--ease), visibility 0s; }
.mega-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mega-pad); margin: 0; padding: 0; list-style: none; }
.mega-products > li { opacity: 0; translate: 0 14px; transition: opacity .15s, translate .26s; }
.mega[data-state="open"] .mega-products > li { opacity: 1; translate: 0 0; transition: opacity .4s ease .1s, translate .7s var(--ease) .1s; }
.mega[data-state="open"] .mega-products > li:nth-child(2) { transition-delay: .16s; }
.mega[data-state="open"] .mega-products > li:nth-child(3) { transition-delay: .22s; }

.desktop-nav .mega-product { display: flex; flex-direction: column; align-items: stretch; gap: 0; height: 100%; color: var(--ink); border-radius: calc(var(--mega-radius) - var(--mega-pad)); }
.mega-product:focus-visible { outline: 3px solid #20846a; outline-offset: 3px; }
.mega-shot { display: block; overflow: hidden; padding: 22px 22px 0; border-radius: calc(var(--mega-radius) - var(--mega-pad)); background: #eef1ea center / cover no-repeat; }
.mega-product--adoption .mega-shot { background-image: url('screens/backgrounds/tower.webp?v=ce006eac251c'); }
.mega-product--studio .mega-shot { background-image: url('screens/backgrounds/discovery.webp?v=1a7a51c74eb9'); }
.mega-product--lms .mega-shot { background-image: url('screens/backgrounds/learning.webp?v=c8af22551c63'); }
.mega-shot img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; border-radius: 8px 8px 0 0; background: #fff; outline: 1px solid rgb(0 0 0 / .06); outline-offset: -1px; box-shadow: 0 14px 30px -18px rgb(16 54 57 / .45); scale: 1.08; transform-origin: 50% 100%; transition: scale .3s; }
.mega[data-state="open"] .mega-shot img { scale: 1; transition: scale 1s var(--ease) .08s; }
/* Hover only changes color: the product's tile lights up and its title turns green, nothing moves. */
.desktop-nav .mega-product:hover { background: #eff5ee; }
.mega-product:hover .mega-shot img { outline-color: rgb(5 217 171 / .55); }
.mega-copy { display: block; padding: 20px 10px 12px; }
.mega-title { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.mega-title .icon { width: 18px; height: 18px; opacity: 0; transition: opacity .2s; }
.mega-product:hover .mega-title .icon, .mega-product:focus-visible .mega-title .icon { opacity: 1; }
.mega-product:hover .mega-title { color: #08775d; }
.mega-text { display: block; max-width: 40ch; margin-top: 8px; color: #4f6058; font-size: 16px; line-height: 1.5; text-wrap: pretty; }
.mega-for { display: block; margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.mega-product[aria-current="page"] .mega-for::after { content: " · You are here"; color: #20846a; }


.mega-scrim { position: fixed; inset: 0; z-index: 3; background: rgb(14 32 31 / .24); opacity: 0; pointer-events: none; transition: opacity .25s; }
.mega-scrim.is-visible { opacity: 1; pointer-events: auto; transition-duration: .45s; }

@media (max-width: 1100px) {
  .mega { left: 12px; right: 12px; }
}
@media (max-width: 960px) {
  .mega { --mega-pad: 10px; }
  .mega-shot { padding: 14px 14px 0; }
  .mega-copy { padding: 16px 8px 8px; }
  .mega-title { font-size: 20px; }
}
/* style.css hides every last link in the header nav below 850 px (from when it had four); the three links and the panel need them. */
@media (min-width: 761px) and (max-width: 850px) {
  .desktop-nav a:last-child { display: flex; }
}
/* Between phones and 760 px the three header links do not fit: the menu button takes over. */
@media (max-width: 760px) {
  .desktop-nav { display: none; }
  .header-actions { margin-left: auto; }
  .menu-toggle { display: grid; place-items: center; min-width: 44px; min-height: 44px; margin-right: -10px; }
  .menu-toggle .icon { width: 22px; height: 22px; }
  .mobile-nav:not([hidden]) { display: block; }
  .mega-scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mega, .mega[data-state="open"] { clip-path: none; }
  .mega-products > li, .mega-shot img { translate: none !important; scale: none !important; transition-delay: 0s !important; }
}

/* Mobile menu: the three products with their screens, then the other links. It fades and drops in where supported. */
.mobile-nav-label { padding: 10px 0 8px; color: var(--muted); font-size: 16px; }
.mobile-products { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.mobile-nav .mobile-products a { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 14px; margin-inline: -8px; padding: 8px; border-radius: 14px; }
.mobile-nav .mobile-products a:active { background: rgb(18 44 43 / .05); }
.mobile-product-shot { display: block; overflow: hidden; padding: 6px 6px 0; border-radius: 8px; background: #eef1ea center / cover no-repeat; }
.mobile-product-shot--adoption { background-image: url('screens/backgrounds/tower.webp?v=ce006eac251c'); }
.mobile-product-shot--studio { background-image: url('screens/backgrounds/discovery.webp?v=1a7a51c74eb9'); }
.mobile-product-shot--lms { background-image: url('screens/backgrounds/learning.webp?v=c8af22551c63'); }
.mobile-product-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 4px 4px 0 0; }
.mobile-product-title { display: block; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.3; }
.mobile-product-text { display: block; margin-top: 2px; color: var(--muted); font-size: 16px; line-height: 1.4; }
.mobile-links { margin-top: 10px; padding-top: 4px; border-top: 1px solid rgb(18 44 43 / .1); }
.mobile-links a { display: block; padding: 12px 0; font-size: 17px; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-nav:not([hidden]) { transition: opacity .3s ease, translate .45s var(--ease); }
  .mobile-nav:not([hidden]) .mobile-products > li { transition: opacity .35s ease, translate .5s var(--ease); }
  .mobile-nav:not([hidden]) .mobile-products > li:nth-child(2) { transition-delay: .05s; }
  .mobile-nav:not([hidden]) .mobile-products > li:nth-child(3) { transition-delay: .1s; }
  @starting-style {
    .mobile-nav:not([hidden]) { opacity: 0; translate: 0 -10px; }
    .mobile-nav:not([hidden]) .mobile-products > li { opacity: 0; translate: 0 10px; }
  }
}
/* Secondary action on a light background, so each screen keeps one dark primary button. */
.button.button-quiet { border-color: rgb(18 44 43 / .22); background: transparent; color: var(--ink); }
.button.button-quiet:hover { border-color: rgb(18 44 43 / .4); background: rgb(18 44 43 / .04); box-shadow: none; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: var(--text-note, 13px); color: #4f6352; }
.footer-links a:hover { color: #08775d; }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: #65765d; }
.footer-legal a:hover { color: #08775d; }
@media (max-width: 1100px) {
  .footer-links { justify-self: end; justify-content: flex-end; }
}
@media (max-width: 650px) {
  .footer-links { justify-self: start; justify-content: flex-start; }
}

/* Landscape phones: the menu fits in two columns. */
@media (max-width: 1023px) and (max-height: 500px) {
  .mobile-nav:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

.live-dialog { position: fixed; top: var(--live-top, 0px); right: 0; bottom: auto; left: 0; width: min(1180px, calc(100% - 28px)); height: min(842px, calc(var(--live-height, 100dvh) - 28px)); max-height: calc(var(--live-height, 100dvh) - 28px); margin: max(14px, calc((var(--live-height, 100dvh) - 842px) / 2)) auto; padding: 0; border: 0; border-radius: 16px; background: #edf1e8; overflow: hidden; }
.live-dialog[open] { display: flex; flex-direction: column; }
.live-dialog__head { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px; }
.live-dialog__portrait { flex-shrink: 0; width: 44px; height: 44px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; }
.live-dialog__identity { flex: 1; min-width: 0; }
.live-dialog__title { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.live-dialog__kind { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.live-dialog__close { position: static; inset: auto; flex-shrink: 0; width: 44px; height: 44px; }
.live-dialog-link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: #3f5e47; font-size: 14px; white-space: nowrap; text-underline-offset: 4px; }
.live-dialog-link .icon { width: 15px; height: 15px; }
.live-dialog__frame-host { display: flex; flex: 1; min-height: 0; padding: 0 10px 10px; }
.live-dialog__frame { display: block; flex: 1; width: 100%; height: 100%; min-height: 0; border: 0; border-radius: 11px; background: #fff; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.demo-action { max-width: 100%; min-height: 44px; padding-block: 12px; white-space: normal; font-size: 16px; }
@media (max-width: 650px) {
  .live-dialog { width: 100%; max-width: 100%; height: var(--live-height, 100dvh); max-height: var(--live-height, 100dvh); margin: 0; border-radius: 0; }
  .live-dialog__head { gap: 10px; padding: 10px 12px; }
  .live-dialog__portrait { width: 36px; height: 36px; }
  .live-dialog__title { font-size: 17px; }
  .live-dialog__kind { font-size: 12px; }
  .live-dialog__frame-host { padding: 0; }
  .live-dialog__frame { border-radius: 0; }
}
@media (max-width: 480px) {
  .live-dialog-link { justify-content: center; min-width: 44px; min-height: 44px; gap: 0; font-size: 0; }
  .live-dialog-link .icon { width: 18px; height: 18px; }
}

/* Mint mark: a few words on a slightly tilted, hand-drawn band in the mint of text selection (::selection in style.css).
   One per page at most, on the words that carry it. The band draws itself from left to right: on load where JavaScript
   doesn't run, and the first time it comes into view where it does (site.js holds it until then). With reduced motion
   it is simply there. The words stay on one line, so keep a mark short enough for a phone. */
.text-mark { position: relative; z-index: 0; color: var(--ink); white-space: nowrap; }
.text-mark::before { content: ""; position: absolute; z-index: -1; inset: .22em -.05em .09em -.08em; border-radius: .14em .3em .18em .34em / .3em .16em .34em .2em; background: var(--mint); transform: rotate(-.7deg); animation: text-mark-draw .95s var(--ease) .25s both; }
.text-mark.is-waiting::before { animation-play-state: paused; }
.text-mark::selection { background: #82e08a; }
@keyframes text-mark-draw { from { clip-path: inset(0 100% 0 0 round .3em); } to { clip-path: inset(0 0 0 0 round .3em); } }
@media (prefers-reduced-motion: reduce) { .text-mark::before { animation: none; } }

/* The contact form (contact-dialog.html): a dark rail with the logo and collaborations beside the form, the rail
   hidden below 760 px. The same fields and endpoint as the September 2026 demo form. */
.contact-dialog { width: min(960px, calc(100% - 28px)); max-width: none; max-height: calc(100dvh - 28px); border: 0; border-radius: 18px; background: var(--paper); overflow: auto; }
.contact-dialog[open] { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.contact-dialog-rail { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 40px; background: var(--deep); color: #fff; }
.contact-dialog-logo { width: 132px; height: auto; }
.contact-dialog-brand p { margin-top: 16px; color: rgb(255 255 255 / .78); font-size: 15px; line-height: 1.5; }
.contact-dialog-logos > p { color: rgb(255 255 255 / .5); font-size: 13px; }
.contact-dialog-logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 14px 0 0; padding: 0; list-style: none; }
.contact-dialog-logos img { width: auto; height: 20px; opacity: .9; }
.contact-dialog-logos li:nth-child(2) img { height: 24px; }
.contact-dialog-logos li:nth-child(3) img { height: 15px; }
.contact-dialog-logos li:nth-child(4) img { height: 22px; }
/* The partner mode's three ways to partner, in place of the collaborations. */
.contact-dialog-kinds { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.contact-dialog-kinds[hidden] { display: none; }
.contact-dialog-kinds li { display: flex; align-items: flex-start; gap: 12px; color: rgb(255 255 255 / .78); font-size: 15px; line-height: 1.45; }
.contact-dialog-kinds .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--teal); }
.contact-dialog-main { position: relative; padding: 40px 40px 36px; }
.contact-dialog .contact-dialog-close { position: absolute; top: 16px; right: 16px; }
.contact-form h2, .contact-success h2 { font-size: 30px; line-height: 1.15; letter-spacing: -.03em; }
.contact-form-intro { max-width: 46ch; margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.contact-field--wide { grid-column: 1 / -1; }
.contact-field label { display: block; margin-bottom: 6px; color: #33463f; font-size: 14px; font-weight: 500; }
.contact-required { color: #b4442f; }
.contact-optional { color: #8a978f; font-weight: 400; }
.contact-field input, .contact-field select, .contact-field textarea { display: block; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #d3dcd2; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.4; transition: border-color .15s, box-shadow .15s; }
.contact-field textarea { resize: vertical; min-height: 92px; }
.contact-field select { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23122c2b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center; cursor: pointer; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: #9aa69f; }
.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { border-color: #20846a; outline: none; box-shadow: 0 0 0 3px rgb(5 217 171 / .22); }
.contact-hint { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.contact-form .contact-field [aria-invalid="true"] { border-color: #c2412b; box-shadow: 0 0 0 3px rgb(194 65 43 / .14); }
.contact-privacy { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; color: #42554e; font-size: 15px; line-height: 1.45; cursor: pointer; }
.contact-privacy input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #20846a; cursor: pointer; }
.contact-privacy input[aria-invalid="true"] { outline: 2px solid #c2412b; outline-offset: 2px; }
.contact-privacy a { text-decoration: underline; text-underline-offset: 3px; }
.contact-error { min-height: 1.45em; margin-top: 12px; color: #a3321f; font-size: 14px; line-height: 1.45; }
.contact-error:empty { min-height: 0; margin-top: 0; }
.contact-submit { width: 100%; margin-top: 18px; }
.contact-submit:disabled { opacity: .7; transform: none; box-shadow: none; }
.contact-success:not([hidden]) { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; text-align: center; }
.contact-success-mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 20px; border-radius: 50%; background: rgb(5 217 171 / .16); color: #0f7a5f; }
.contact-success-mark .icon { width: 30px; height: 30px; stroke-width: 2; }
.contact-success p { max-width: 32ch; margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.contact-success .button { margin-top: 28px; }
@media (max-width: 760px) {
  .contact-dialog[open] { display: block; }
  .contact-dialog-rail { display: none; }
}
@media (max-width: 650px) {
  .contact-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
  .contact-dialog-main { padding: 28px 20px 24px; }
  .contact-dialog .contact-dialog-close { top: 12px; right: 12px; }
  .contact-form h2, .contact-success h2 { padding-right: 36px; font-size: 26px; }
  .contact-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 22px; }
  .contact-success h2 { padding-right: 0; }
}

@media (pointer: coarse) {
  .wordmark, .footer > a:first-child, .footer-links a, .footer-legal a, .image-dialog-close, .live-dialog-link { position: relative; }
  .wordmark::after, .footer > a:first-child::after, .footer-links a::after, .footer-legal a::after, .image-dialog-close::after, .live-dialog-link::after { content: ""; position: absolute; top: 50%; left: 50%; width: max(100%, 48px); height: max(100%, 48px); transform: translate(-50%, -50%); }
}