/* Testimonial band (Website V2, Oct 20 2026), AK's new style. Used by partials/hx-tml-band.ejs on the homepage, /miia, every
   product page, /api and every page that includes partials/hx-voices. Self-contained: no Webflow or Splide classes, so no
   other stylesheet can change it.
   Look: full-width ink band on the dim office photo; left = big white quote with 2-3 gold words, thin rule, name + role,
   a vertical rule and the white customer logo (named customers only), two frosted glass stat cards; right = a cut-out
   photo sitting straight on the backdrop (no box, no frame), shoulders cut off by the bottom of the band.
   Brand only: ink #110A33, gold #FFC61E, violet #341D99 (glow inside the glass only), white. 24px corners, pill buttons,
   fixed shadow scale, Cabinet Grotesk numbers + Manrope text, 4px spacing scale. */
.tn {
  --tn-ink: #110A33; --tn-gold: #FFC61E; --tn-violet: #341D99; --tn-white: #fff;
  --tn-ease: cubic-bezier(.23, 1, .32, 1);
  --tn-gutter: 16px;
  position: relative; isolation: isolate; overflow: hidden; background: var(--tn-ink); color: var(--tn-white);
  font: 400 16px/1.5 Manrope, Arial, sans-serif; text-align: left; scroll-margin-top: 96px;
}
.tn *, .tn *::before, .tn *::after { box-sizing: border-box; }
@media (min-width: 768px) { .tn { --tn-gutter: clamp(72px, 6vw, 96px); } } /* 72px+ keeps the controls clear of the bottom-left Ask AI widget */
.tn-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; border: 0; }

/* backdrop: the office photo, dimmed from the left so the words always sit on dark */
.tn-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tn-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; }
.tn-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17, 10, 51, .94) 0%, rgba(17, 10, 51, .84) 42%, rgba(17, 10, 51, .5) 100%); }

.tn-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 0 var(--tn-gutter); }
.tn-track { display: grid; }

/* slides sit in ONE grid cell, so the band is as tall as its tallest slide and never jumps */
.tn-slide {
  grid-area: 1 / 1; position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(560px, 44vw, 640px); padding: 56px 0 112px;
  opacity: 0; visibility: hidden; transition: opacity .18s ease-out, visibility 0s linear .18s;
}
.tn-slide.is-on { opacity: 1; visibility: visible; transition: opacity .45s var(--tn-ease) .18s, visibility 0s; }

.tn-copy { position: relative; z-index: 2; width: min(100%, 700px); opacity: 0; transform: translateY(12px); transition: opacity .2s ease-out, transform .2s ease-out; }
.tn-slide.is-on .tn-copy { opacity: 1; transform: none; transition: opacity .55s var(--tn-ease) .22s, transform .55s var(--tn-ease) .22s; }

.tn-q { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; quotes: none; font: 500 clamp(40px, 4.4vw, 60px) / 1.12 Manrope, Arial, sans-serif; letter-spacing: -.015em; color: var(--tn-white); text-wrap: balance; }
.tn-q p { margin: 0; }
.tn-q em { font-style: normal; font-weight: 700; color: var(--tn-gold); }
.tn-q--m { font-size: clamp(32px, 3.5vw, 48px); }
.tn-q--l { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.16; }
.tn-q--xl { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; text-wrap: pretty; }

.tn-rule { height: 1px; margin: 32px 0 24px; background: rgba(255, 255, 255, .28); border: 0; }

.tn-who { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; }
.tn-id b { display: block; font: 600 22px/1.25 Manrope, Arial, sans-serif; color: var(--tn-white); }
.tn-id span { display: block; margin-top: 2px; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .72); }
.tn-logo-wrap { align-self: stretch; display: flex; align-items: center; padding-inline-start: 32px; border-inline-start: 1px solid rgba(255, 255, 255, .3); }
.tn-logo { display: block; height: calc(22px * var(--tn-lh, 1)); width: auto; max-width: 150px; filter: brightness(0) invert(1); opacity: .92; }
.tn-watch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--tn-white); font: 800 15px/1 Manrope, Arial, sans-serif; text-decoration: none; }
.tn-watch i { width: 32px; height: 32px; border-radius: 50%; background: var(--tn-gold); color: var(--tn-ink); display: grid; place-items: center; transition: transform .2s var(--tn-ease); }
.tn-watch:hover i { transform: scale(1.08); }
.tn-watch:active i { transform: scale(.96); }

/* two flat stat tiles (Oct 26 PM, AS-S: no glass, no blur, no glow; solid ink-lighter tile with a hairline) */
.tn-stats { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; max-width: 560px; }
.tn-stat {
  position: relative; flex: 1 1 240px; min-width: 0;
  padding: 20px 24px 22px; border-radius: 24px;
  background: #1D1450;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 12px 32px -12px rgba(17, 10, 51, .22);
}
.tn-stat b { display: block; font: 700 clamp(40px, 4vw, 56px) / 1.05 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: -.02em; color: var(--tn-white); font-variant-numeric: tabular-nums; }
.tn-stat span { display: block; margin-top: 8px; font-size: 15px; line-height: 22px; font-weight: 500; color: rgba(255, 255, 255, .86); text-wrap: balance; }

/* the person: a cut-out straight on the backdrop. Absolute, bottom-right, never under the controls */
.tn-photo { position: absolute; z-index: 1; right: calc(0px - var(--tn-gutter) - max(0px, (100vw - 1280px) / 2)); bottom: 0; height: min(94%, 600px); width: min(46%, 560px); pointer-events: none;
  opacity: 0; transform: translateX(24px); transition: opacity .2s ease-out, transform .2s ease-out; }
.tn-slide.is-on .tn-photo { opacity: 1; transform: none; transition: opacity .6s var(--tn-ease) .3s, transform .7s var(--tn-ease) .3s; }
.tn-photo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 24px 40px rgba(17, 10, 51, .35));
  /* the original cut-outs end in a straight vertical shoulder cut: fade it out so no edge shows */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%); mask-image: linear-gradient(to right, transparent 0, #000 18%); }
/* a clean studio headshot, no cut-out: soft edges melt it into the band, cropped at the shoulders */
.tn-photo--head img { object-fit: cover; object-position: 50% 12%; filter: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 74%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 26%, #000 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 74%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 26%, #000 100%); mask-composite: intersect; }
.tn-photo--head { width: min(42%, 500px); height: min(86%, 520px); }
/* a true cut-out made with a hair-aware matte (Oct 20, rembg BiRefNet portrait): natural hair and shoulder edges, so no side fade;
   the photo sits straight on the backdrop and is cut by the band bottom, like the original slider cut-outs */
.tn-photo--clean img { -webkit-mask-image: none; mask-image: none; }
@media (min-width: 992px) { .tn-photo--clean img { transform: translateY(var(--tn-drop, 0%)); } }

/* controls: bottom-left under the stat cards, clear of the photo. Real buttons, never links. */
.tn-ctl { position: absolute; z-index: 5; left: var(--tn-gutter); bottom: 32px; display: flex; align-items: center; gap: 16px; }
.tn-arrows { display: flex; gap: 12px; }
.tn-arrow { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: #1D1450; color: var(--tn-white); display: grid; place-items: center; cursor: pointer;
  transition: transform .16s var(--tn-ease), background-color .2s, color .2s; }
.tn-arrow:last-child { background: var(--tn-white); color: var(--tn-ink); border-color: var(--tn-white); }
@media (hover: hover) and (pointer: fine) { .tn-arrow:hover { background: var(--tn-gold); color: var(--tn-ink); border-color: var(--tn-gold); } }
.tn-arrow:active { transform: scale(.96); }
.tn-dots { display: flex; align-items: center; }
.tn-dot { position: relative; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.tn-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .38); transform: translate(-50%, -50%); transition: width .3s var(--tn-ease), background-color .3s; }
.tn-dot[aria-current="true"]::before { width: 24px; background: var(--tn-gold); }
.tn :focus-visible { outline: 2px solid var(--tn-gold); outline-offset: 3px; border-radius: 12px; }
.tn-arrow:focus-visible { border-radius: 50%; }

/* tablets and phones: the photo leads the slide (shoulders faded into the quote), words below, the stat cards sit side by side */
@media (max-width: 991px) {
  .tn-slide { min-height: 0; justify-content: flex-start; padding: 32px 0 104px; }
  .tn-photo { position: relative; order: -1; right: auto; left: auto; width: 100%; height: 280px; margin: 0 0 -40px; }
  .tn-photo img { object-position: 50% 100%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 0, #000 62%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 0, #000 62%, transparent 100%); mask-composite: intersect; }
  .tn-photo--head { width: min(100%, 360px); height: 300px; align-self: center; margin-bottom: -32px; }
  .tn-photo--clean { width: 100%; height: 280px; margin-bottom: -40px; }
  .tn-photo--clean img { object-position: 50% 100%; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 58%, transparent 100%); }
  .tn-photo--head img { object-position: 50% 4%; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 74%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 22%, #000 58%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 26%, #000 74%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 22%, #000 58%, transparent 100%); mask-composite: intersect; }
  .tn-copy { width: min(100%, 640px); }
  .tn-q { font-size: clamp(32px, 5vw, 44px); } .tn-q--m { font-size: clamp(28px, 4.4vw, 38px); } .tn-q--l { font-size: clamp(24px, 3.8vw, 32px); } .tn-q--xl { font-size: clamp(22px, 3.2vw, 28px); }
  .tn-stats { max-width: 520px; }
  .tn-stat { padding: 16px 20px 18px; flex-basis: 200px; }
  .tn-bg::after { background: linear-gradient(180deg, rgba(17, 10, 51, .78), rgba(17, 10, 51, .92)); }
  .tn-ctl { left: 0; right: 0; bottom: 24px; justify-content: center; }
}
@media (max-width: 767px) {
  .tn-slide { padding: 24px 0 96px; }
  .tn-photo { height: 232px; margin-bottom: -32px; }
  .tn-photo--head { height: 250px; margin-bottom: -24px; }
  .tn-copy { width: 100%; }
  .tn-q { font-size: 30px; } .tn-q--m { font-size: 27px; } .tn-q--l { font-size: 24px; line-height: 1.2; } .tn-q--xl { font-size: 21px; line-height: 1.25; }
  .tn-rule { margin: 24px 0 16px; }
  .tn-id b { font-size: 19px; } .tn-id span { font-size: 14px; }
  .tn-logo-wrap { padding-inline-start: 20px; }
  .tn-stats { margin-top: 24px; gap: 12px; flex-wrap: nowrap; max-width: none; }
  .tn-stat { flex: 1 1 0; padding: 14px 16px 16px; border-radius: 20px; }
  .tn-stat b { font-size: 34px; } .tn-stat span { margin-top: 6px; font-size: 13px; line-height: 18px; }
}
@media (max-width: 389px) {
  .tn-logo-wrap { flex-basis: 100%; padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 359px) {
  .tn-stats { gap: 8px; }
  .tn-stat { padding: 12px 12px 14px; border-radius: 16px; }
  .tn-stat b { font-size: 28px; } .tn-stat span { font-size: 12px; line-height: 16px; }
  .tn-photo { height: 196px; } .tn-photo--head { height: 216px; }
}

@media (prefers-reduced-motion: reduce) {
  .tn-slide, .tn-slide.is-on, .tn-copy, .tn-slide.is-on .tn-copy, .tn-photo, .tn-slide.is-on .tn-photo, .tn-dot::before, .tn-arrow, .tn-watch i { transition: none; transform: none; }
}

/* Oct 20 kairos + video call-out. Krish: the small gold dot + "Watch the story" looked "very cheap"; AK repeated it. A person with a video now
   gets a solid gold pill (ink play disc + "Watch the video story") on its own row under the name: it reads as "this is a video" from across
   the room at 1280 and 390. Same <a data-hxv-open> click-to-open lightbox. Brand only: gold #FFC61E, ink #110A33. */
.tn-watch {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; min-height: 56px; padding: 8px 24px 8px 8px; border-radius: 999px;
  background: var(--tn-gold); color: var(--tn-ink); font: 800 17px/1.2 Manrope, Arial, sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 198, 30, .22);
  transition: transform .2s var(--tn-ease), box-shadow .2s var(--tn-ease);
}
.tn-watch i { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--tn-ink); color: var(--tn-gold); display: grid; place-items: center; transition: transform .2s var(--tn-ease); }
.tn-watch i svg { margin-inline-start: 2px; } /* optical centre of the triangle */
.tn-watch i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--tn-ink); opacity: 0; pointer-events: none; }
.tn-slide.is-on .tn-watch i::after { animation: tn-ring 2.6s var(--tn-ease) 1.2s 3; }   /* Oct 28 review (R3, 2.2.2): 3 pulses, then rest (was infinite) */
@keyframes tn-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  .tn-watch:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -12px rgba(0, 0, 0, .6), 0 0 0 6px rgba(255, 198, 30, .3); }
  .tn-watch:hover i { transform: scale(1.08); }
}
.tn-watch:active { transform: scale(.97); }
.tn-watch:active i { transform: none; }
.tn-watch:focus-visible { outline: 3px solid var(--tn-white); outline-offset: 4px; }
.tn-watch + .tn-stats { margin-top: 24px; }
@media (max-width: 767px) {
  .tn-watch { display: flex; width: 100%; justify-content: center; margin-top: 20px; font-size: 16px; }
  .tn-watch + .tn-stats { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .tn-watch, .tn-watch:hover, .tn-watch:active, .tn-watch i { transition: none; transform: none; } .tn-slide.is-on .tn-watch i::after { animation: none; } }

/* Oct 20 (AK, item 7): the optional playlist text link sits in the controls row, light on the dark band. */
.tn-ctl .hx-hnote{margin:0 0 0 12px;color:#ffffff}
.tn-ctl .hx-hnote a{color:#ffffff;text-decoration-color:rgba(255,255,255,.45)}
.tn-ctl .hx-hnote a:hover{text-decoration-color:#ffffff}
.tn-ctl .hx-hnote a:focus-visible{outline-color:#ffc61e}
@media (max-width:760px){.tn-ctl{flex-wrap:wrap;row-gap:8px}.tn-ctl .hx-hnote{flex-basis:100%;margin:0;justify-content:center}.tn:has(.hx-pl) .tn-slide{padding-bottom:140px}}
/* Oct 21: on the dark band the playlist pill is translucent with a light hairline. */
.tn .hx-pl a.hx-watch{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(221,214,255,.32);color:#ffffff}
.tn .hx-pl a.hx-watch:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

/* MOBILE-B (Oct 21): dark testimonial band, slightly shorter on phones (portrait and quotes unchanged in content) */
@media (max-width: 767px) {
  .tn-slide { padding: 16px 0 84px; }
  .tn-photo { height: 208px; margin-bottom: -28px; }
  .tn-photo--head { height: 226px; margin-bottom: -20px; }
  .tn-photo--clean { height: 208px; margin-bottom: -28px; }
  .tn-rule { margin: 16px 0 12px; }
  .tn-stats { margin-top: 16px; }
}
@media (max-width: 359px) {
  .tn-photo, .tn-photo--clean { height: 180px; } .tn-photo--head { height: 200px; }
}

/* ---------- Oct 28 review fixes (R1-4, R2-4, R3, R4-6; backup 04-build/backups/oct28-review-fixes) ----------
   Pause control in the arrow row (the Next arrow keeps the white fill), 44px dot targets on phones,
   and the 3 averages shown ONCE under the slider (.tn--once, from hx-voices). */
.tn-arrows .tn-arrow:last-child { background: #1D1450; color: var(--tn-white); border-color: rgba(255, 255, 255, .3); }
.tn-arrows .tn-arrow[data-tn-dir="1"] { background: var(--tn-white); color: var(--tn-ink); border-color: var(--tn-white); }
.tn-pause[hidden] { display: none; }
.tn-pause .tn-ic-play { display: none; }
.tn-pause.is-paused .tn-ic-play { display: block; }
.tn-pause.is-paused .tn-ic-pause { display: none; }
.tn-arrow:focus-visible, .tn-dot:focus-visible { outline: 2px solid var(--tn-gold); outline-offset: 2px; }
.tn-dot { width: 36px; }
.tn-ctl { flex-wrap: wrap; row-gap: 4px; }
.tn--once .tn-stats--once { position: relative; z-index: 3; max-width: 640px; margin: 0; flex-wrap: nowrap; }
.tn--once .tn-stats--once .tn-stat { flex: 1 1 0; padding: 16px 20px 18px; }
.tn--once .tn-stats--once .tn-stat b { font-size: clamp(30px, 3vw, 44px); }
.tn--once .tn-stats--once .tn-stat span { font-size: 14px; line-height: 20px; }
@media (min-width: 992px) {
  .tn--once .tn-slide { padding-bottom: 260px; }
  .tn--once .tn-stats--once { position: absolute; left: var(--tn-gutter); bottom: 100px; width: min(640px, calc(100% - 2 * var(--tn-gutter))); }
}
@media (max-width: 991px) {
  .tn--once .tn-slide { padding-bottom: 16px; }
  .tn--once .tn-stats--once { margin: 8px 0 0; padding-bottom: 92px; }
}
@media (max-width: 767px) {
  .tn--once .tn-stats--once { gap: 8px; padding-bottom: 84px; }
  .tn--once .tn-stats--once .tn-stat { padding: 12px 12px 14px; border-radius: 16px; }
  .tn--once .tn-stats--once .tn-stat b { font-size: 24px; }
  .tn--once .tn-stats--once .tn-stat span { margin-top: 4px; font-size: 12px; line-height: 16px; }
  .tn-dot { width: 44px; }
  .tn-ctl { gap: 8px; }
  .tn-arrows { gap: 8px; }
}
@media (max-width: 359px) { .tn-dot { width: 32px; } .tn-arrows { gap: 6px; } }
@media (hover: hover) and (pointer: fine) { .tn-arrows .tn-arrow:hover { background: var(--tn-gold); color: var(--tn-ink); border-color: var(--tn-gold); } }

/* AK Nov 1: the number cards carry the live humantic.ai card artwork (a soft light sweep on a frosted card). Nov 1 round (B1): the two
   remote SVGs scaled with "meet" (so the art sat narrower than the card and the text ran off it) and card 2's file had square corners,
   so the artwork is now drawn here, in brand colours (lavender to gold sweep on a lavender-frosted ink card), stretched to the card on
   both cards: card 1 sweeps from the top, card 2 is the same sweep mirrored from the bottom, as on the live site. Rollback: backups/nov01-round/B1. */
.tn-stat { isolation: isolate; overflow: hidden; border: 1px solid rgba(221, 214, 255, .3) !important;
  background: linear-gradient(160deg, rgba(221, 214, 255, .26), rgba(221, 214, 255, .08) 58%, rgba(17, 10, 51, .2)), rgba(17, 10, 51, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 32px -12px rgba(17, 10, 51, .35); }
.tn-stat::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 204' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='.3'%3E%3Cstop offset='0' stop-color='%23DDD6FF'/%3E%3Cstop offset='1' stop-color='%23FFC61E'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='11'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M322 139C293 147 189 125 104 45 18-35-95 1-137 22' fill='none' stroke='url(%23g)' stroke-width='20' filter='url(%23b)' opacity='.7'/%3E%3Cpath d='M312 128C284 139 178 129 84 59-10-11-118 38-157 64' fill='none' stroke='url(%23g)' stroke-width='20' filter='url(%23b)' opacity='.25'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.tn-stat:nth-child(2)::before { transform: scaleY(-1); }

/* Nov 2 final review: the 3-stat .tn--once band with more than 5 slides wraps its controls to two rows on phones
   (arrows, then dots), and the arrows sat on the 16.2% / 36% cards. Reserve room for both rows plus a 24px gap. Backup: backups/nov02-final. */
@media (max-width: 767px) {
  .tn--once:has(.tn-dots .tn-dot:nth-child(6)) .tn-stats--once { padding-bottom: 144px; }
  /* Final review pass 2: the same overlap when the control row carries a link line (hx-hnote, e.g. "Learn about Buyer-First
     Selling" on /buyer-intelligence, "See how teams adopt" on /product): arrows+dots, then the link, then 24px. */
  .tn--once:has(.tn-ctl .hx-hnote) .tn-stats--once { padding-bottom: 144px; }
  .tn--once:has(.tn-ctl .hx-hnote):has(.tn-dots .tn-dot:nth-child(6)) .tn-stats--once { padding-bottom: 196px; }
}

/* Nov 2 (Amar, /pi short quotes): a short verbatim excerpt leads; the full quote opens in place behind "Read the full quote".
   Both texts share one grid cell (the band never changes height), the full text is set smaller than the excerpt. */
.tn-q--xs { display: grid; }
.tn-q--xs .tn-q-main, .tn-q--xs .tn-q-full { grid-area: 1 / 1; transition: opacity .2s ease-out, visibility 0s linear .2s; }
.tn-q--xs .tn-q-full { font-size: clamp(22px, 2vw, 28px); line-height: 1.3; font-weight: 500; text-wrap: pretty; opacity: 0; visibility: hidden; align-self: start; }
.tn-copy.is-full .tn-q--xs .tn-q-full { opacity: 1; visibility: visible; transition: opacity .25s ease-out, visibility 0s; }
.tn-copy.is-full .tn-q--xs .tn-q-main { opacity: 0; visibility: hidden; }
.tn-more { display: inline-flex; align-items: center; min-height: 44px; margin: 4px 0 0; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .82); font: 700 15px/1.2 Manrope, Arial, sans-serif; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; cursor: pointer; }
.tn-more:hover { color: var(--tn-white); }
.tn-more:focus-visible { outline: 3px solid var(--tn-white); outline-offset: 4px; border-radius: 4px; }
.tn-more + .tn-watch { margin-inline-start: 24px; }
@media (max-width: 767px) {
  .tn-q--xs .tn-q-full { font-size: 19px; line-height: 1.35; }
  .tn-more { margin-top: 8px; }
  .tn-more + .tn-watch { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .tn-q--xs .tn-q-main, .tn-q--xs .tn-q-full { transition: none; } }

/* AK Nov 4: on desktop the testimonial band fills one screen like every other section (the words centred, the photo standing on the
   band's bottom edge), on every page */
@media (min-width: 900px) and (min-height: 600px) {
  html body section.tn { min-height: 100svh; display: flex; flex-direction: column; }
  html body section.tn > .tn-inner { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; }
  html body section.tn .tn-track { flex: 1 0 auto; }
}
/* AK Nov 4: one quote size everywhere (it used to step down from 60px to 32px by quote length, so some read big and some small) */
html body .tn .tn-q, html body .tn .tn-q--m, html body .tn .tn-q--l, html body .tn .tn-q--xl { font-size: clamp(26px, 2.5vw, 36px); line-height: 1.25; }
@media (max-width: 767px) { html body .tn .tn-q, html body .tn .tn-q--m, html body .tn .tn-q--l, html body .tn .tn-q--xl { font-size: 22px; line-height: 1.3; } }

/* Nov 5 (AK: "the photo does not sit on the band's bottom edge"): start.css and solutions-hub.css turn EVERY section on the /start/* role pages and /solutions into a centred grid
   with min-height 100svh (html body main.sr section:not(#proof)...), and it out-ranks the band's own flex rule. The slide then floated in the middle of a
   taller band and the photo (bottom: 0 of the SLIDE) stopped 35px+ above the band's bottom edge, with the backdrop showing under it. The band now
   stretches its row so the slide, and so the photo, always end exactly on the band's bottom; below 900px the band is only as tall as its content. */
html body main section.tn.tn.tn.tn.tn:not(#proof):not(.hxp):not(section section) { align-content: stretch; }
@media (max-width: 899px), (max-height: 599px) {
  html body main section.tn.tn.tn.tn.tn:not(#proof):not(.hxp):not(section section) { min-height: 0; align-content: start; }
}

/* AK Nov 6 (Amar: "everywhere the font size needs to become what it is on the home page", the live humantic.ai band with Dave
   Mattson): quotes are Manrope 60px, regular weight, line height 1.5 (90px), names 24px, on every page and every quote length.
   Tablets 44px, phones 30px. */
html body .tn .tn-q, html body .tn .tn-q--s, html body .tn .tn-q--m, html body .tn .tn-q--l, html body .tn .tn-q--xl { font-size: 60px; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
html body .tn .tn-id b { font-size: 24px; font-weight: 500; }
@media (max-width: 1023px) { html body .tn .tn-q, html body .tn .tn-q--s, html body .tn .tn-q--m, html body .tn .tn-q--l, html body .tn .tn-q--xl { font-size: 44px; } }
@media (max-width: 767px) { html body .tn .tn-q, html body .tn .tn-q--s, html body .tn .tn-q--m, html body .tn .tn-q--l, html body .tn .tn-q--xl { font-size: 30px; line-height: 1.4; } html body .tn .tn-id b { font-size: 20px; } }
/* on laptops shorter than 900px the 60px steps down with the screen height (54px at 810, 48px at 720) so the band stays one screen */
@media (min-width: 1024px) { html body .tn .tn-q, html body .tn .tn-q--s, html body .tn .tn-q--m, html body .tn .tn-q--l, html body .tn .tn-q--xl { font-size: clamp(40px, 6.67vh, 60px); } }

/* AK Nov 7 (Amar sent the live Dave Mattson band again: "this is what I want you to use everywhere"): the quote paragraph takes the
   quote's own regular weight (some pages set p to 500), and the role line is 16px as on live humantic.ai. Logo stays beside the role. */
html body .tn .tn-q p { font-weight: inherit; letter-spacing: inherit; }
html body .tn .tn-id span { font-size: 16px; line-height: 24px; }
@media (max-width: 760px) { html body .tn .tn-id span { font-size: 15px; } }