/* Accessible headings without adding layout, paint or animation. */
.la-sr-only {
  position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;
  white-space:nowrap!important;border:0!important;
}

/* Pricing remains the anchor. Three editorial notes share its paper, rim and
   Ubuntu typography, but have distinct proportions and connection points. */
.pricing-composition {position:relative}
.client-notes {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.94fr);
  align-items:start;
  gap:20px;
  padding-top:24px;
  margin:0;
  border:0;
  background:none;
  scroll-margin-top:100px;
}
.client-notes .editorial-proof {
  --proof-delay:0ms;
  --proof-gap:24px;
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  width:100%;
  max-width:350px;
  margin:0;
  padding:22px 23px;
  border:0;
  text-align:left;
}
.client-notes .editorial-proof::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border:1px solid rgba(130,141,156,.19);
  border-radius:28px;
  background:radial-gradient(ellipse at 4% 0%,rgba(234,239,255,.46),transparent 64%),linear-gradient(150deg,#fff 44%,#f7f8fa 100%);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.75),0 10px 28px -23px rgba(33,36,47,.25);
}
.client-notes .editorial-proof--aside {
  --proof-delay:110ms;
  --proof-gap:56px;
  justify-self:end;
  max-width:300px;
  margin-top:32px;
  padding:18px 19px;
}
.client-notes .editorial-proof--aside::before {
  border-radius:20px;
  border-color:rgba(131,137,142,.17);
  background:linear-gradient(155deg,#fff 35%,#f7f7f5 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.8),0 8px 22px -21px rgba(33,36,47,.2);
}
.client-notes .editorial-proof--tail {
  --proof-delay:220ms;
  --proof-gap:88px;
  justify-self:end;
  max-width:280px;
  margin-top:64px;
  padding:17px 18px;
}
.client-notes .editorial-proof--tail::before {
  border-radius:24px;
  background:linear-gradient(135deg,#fff 30%,#f7f8fb 100%);
  border-color:rgba(130,141,156,.16);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.8),0 8px 22px -22px rgba(33,36,47,.22);
}
.proof-connector {
  position:absolute;
  pointer-events:none;
  width:56px;
  height:var(--proof-gap);
  top:calc(-1 * var(--proof-gap));
  left:36px;
  overflow:visible;
}
.editorial-proof--aside .proof-connector,.editorial-proof--tail .proof-connector {left:auto;right:36px}
.proof-line {
  fill:none;
  stroke:rgba(137,143,154,.22);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
}
.proof-line--side {display:none}
.client-notes blockquote {margin:0;padding:0;border:0}
.client-notes blockquote p {
  margin:0;
  font-family:inherit;
  font-size:15.5px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.02em;
  color:#4e514d;
  text-wrap:pretty;
}
/* One shared type scale and emphasis for all three quotes, in both states.
   Use the FAQ color and real Ubuntu Medium with no per-note stroke or tint. */
.client-notes blockquote strong {color:#57554f;font-weight:500}
.client-notes figcaption {display:flex;align-items:center;gap:9px;margin-top:17px;font-style:normal}
.client-notes .editorial-proof--aside figcaption {margin-top:14px;gap:8px}
.client-notes .editorial-proof-logo {display:block;flex:0 0 22px;width:22px;height:22px;object-fit:contain;border-radius:5px}
.client-notes .editorial-proof-logo--sanctum {filter:saturate(.62)}
.client-notes .editorial-proof--tail figcaption {margin-top:12px;gap:8px}
.client-notes .editorial-proof-logo--getjacked {flex-basis:34px;width:34px;height:34px;border-radius:6px}
.client-notes .editorial-proof-person {display:flex;flex-direction:column;gap:2px;min-width:0}
.client-notes .editorial-proof-name {font-size:11px;font-weight:500;line-height:1.3;color:#5b5c55}
.client-notes .editorial-proof-role {font-size:10px;font-weight:400;line-height:1.4;color:#72736b}
html body.la-editorial #plan .lp-faq {margin-top:30px!important}
/* Percentage anchors follow the unchanged offer, not the heading or page.
   The side widths yield at 1440px, keeping the notes inside the viewport. */
@media(min-width:1440px) {
  .client-notes {
    --lead-width:clamp(220px,calc((100vw - 900px)/2 - 52px),280px);
    --aside-width:clamp(224px,calc((100vw - 900px)/2 - 48px),260px);
    --tail-width:clamp(224px,calc((100vw - 900px)/2 - 52px),272px);
    --tail-gap:clamp(20px,calc((100vw - 1440px)/4 + 20px),36px);
    position:absolute;
    inset:0;
    padding:0;
    display:block;
    pointer-events:none;
  }
  .client-notes .editorial-proof {position:absolute;max-width:none;transform:translateY(-50%);pointer-events:auto}
  .client-notes .editorial-proof--lead {left:calc(-1 * (var(--lead-width) + 28px));top:50%;width:var(--lead-width)}
  .client-notes .editorial-proof--aside {right:calc(-1 * (var(--aside-width) + 28px));top:28%;width:var(--aside-width);margin:0}
  .client-notes .editorial-proof--tail {right:calc(-1 * (var(--tail-width) + var(--tail-gap)));top:73%;width:var(--tail-width);margin:0}
  .proof-connector {width:28px;height:84px;top:calc(58% - 42px);left:auto;right:-28px}
  .editorial-proof--aside .proof-connector {left:-28px;right:auto;top:calc(34% - 30px);height:60px}
  .editorial-proof--tail .proof-connector {left:calc(-1 * var(--tail-gap));right:auto;top:calc(40% - 32px);width:var(--tail-gap);height:64px}
  .proof-line--below {display:none}
  .proof-line--side {display:block}
  html body.la-editorial #plan .lp-faq {margin-top:42px!important}
}
@media(min-width:1100px) and (max-width:1439px) {
  .client-notes .editorial-proof--lead {margin-left:-20px}
  .client-notes .editorial-proof--tail {margin-right:-20px}
}
/* Compact screens: one quiet rail connects all notes to the offer.
   Different insets preserve hierarchy without squeezing long quotations. */
@media(max-width:1000px) {
  .client-notes {grid-template-columns:minmax(0,1fr);padding:18px 0 0 14px;gap:14px;scroll-margin-top:84px}
  .client-notes::after {content:"";position:absolute;z-index:-2;left:0;top:0;bottom:70px;width:1px;background:linear-gradient(to bottom,rgba(137,143,154,.11),rgba(137,143,154,.05))}
  .client-notes .editorial-proof {--note-inset:14px;width:calc(100% - 14px);max-width:none;padding:18px 20px}
  .client-notes blockquote p {font-size:14.5px}
  .client-notes .editorial-proof--aside {--note-inset:36px;margin:0;width:calc(100% - 22px);padding:17px 18px}
  .client-notes .editorial-proof--tail {--note-inset:26px;justify-self:start;margin:0 0 0 12px;width:calc(100% - 22px);padding:17px 18px}
  .client-notes .proof-connector {width:var(--note-inset);height:24px;left:calc(-1 * var(--note-inset));right:auto;top:28px}
  .client-notes .proof-line--below {display:none}
  .client-notes .proof-line--side {display:block}
  html body.la-editorial #plan .lp-faq {margin-top:28px!important}
}
/* Progressive enhancement: readable with no JS, no observer or reduced motion.
   The line completes first, then only the note surface and content rise. */
@media(prefers-reduced-motion:no-preference) {
  .client-notes[data-proof-motion="ready"] .proof-line {
    stroke-dashoffset:1;
    transition:stroke-dashoffset 420ms cubic-bezier(.22,.61,.36,1) var(--proof-delay);
  }
  .client-notes[data-proof-motion="ready"] .editorial-proof::before,
  .client-notes[data-proof-motion="ready"] blockquote,
  .client-notes[data-proof-motion="ready"] figcaption {
    opacity:0;
    transform:translateY(6px);
    transition:opacity 560ms cubic-bezier(.22,.61,.36,1) calc(420ms + var(--proof-delay)),transform 560ms cubic-bezier(.22,.61,.36,1) calc(420ms + var(--proof-delay));
  }
  .client-notes[data-proof-motion="ready"] .is-shown .proof-line {stroke-dashoffset:0}
  .client-notes[data-proof-motion="ready"] .is-shown::before,
  .client-notes[data-proof-motion="ready"] .is-shown blockquote,
  .client-notes[data-proof-motion="ready"] .is-shown figcaption {opacity:1;transform:none}
}

/* Disclosure: short pull-quote first, the exact full quote on demand.
   Same paper and anchor, no overlay over pricing, no new section. */
.client-notes [hidden] {display:none!important}
.client-notes .editorial-proof.is-enhanced {cursor:pointer}
.client-notes .is-enhanced .proof-copy {position:relative;overflow:hidden}
.client-notes .is-enhanced .proof-full,
.client-notes .is-enhanced.is-open .proof-excerpt {
  position:absolute;inset:0 0 auto;opacity:0;visibility:hidden;pointer-events:none
}
.client-notes .is-enhanced .proof-excerpt,
.client-notes .is-enhanced.is-open .proof-full {
  position:relative;inset:auto;opacity:1;visibility:visible;pointer-events:auto
}
.client-notes .is-enhanced.is-open {z-index:3}
.client-notes .editorial-proof-person {flex:1}
.client-notes .proof-toggle {
  appearance:none;display:flex;align-items:center;justify-content:center;
  flex:0 0 44px;width:44px;min-height:48px;padding:0;margin:-8px -11px -8px -8px;
  background:transparent;border:0;border-radius:12px;color:#73766e;cursor:pointer;
  box-shadow:none;touch-action:manipulation
}
.client-notes .proof-toggle:hover,.client-notes .proof-toggle:active {color:#57554f;background:transparent}
.client-notes .proof-toggle:focus-visible {outline:2px solid var(--blue,#3347ff);outline-offset:2px}
/* A single hairline chevron, with an invisible generous click target. */
.client-notes .proof-toggle-icon {
  display:block;width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(0deg);transform-origin:50% 50%
}
.client-notes .is-open .proof-toggle-icon {transform:rotate(180deg)}
/* Crossfade starts after the outgoing text fades. The copy height uses the
   FAQ's cancellable height motion so rapid clicks never jump or stack. */
@media(prefers-reduced-motion:no-preference) {
  .client-notes .is-enhanced .proof-copy p {
    transition:opacity 130ms ease,visibility 0s linear 130ms;
  }
  .client-notes .is-enhanced .proof-excerpt,
  .client-notes .is-enhanced.is-open .proof-full {
    transition:opacity 210ms ease 110ms,visibility 0s;
  }
  .client-notes .proof-toggle-icon {transition:transform 220ms cubic-bezier(.22,.61,.36,1)}
}