/* Styles shared by the homepage and the door pages (moved here October 14, 2026, when /beyond-success was built; DESIGN.md
   listed them as duplicated with slight drift). Load after tokens.css and before the page's own stylesheet; a page file
   only overrides what differs on that page. */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* buttons: the gold one is the page's one main action, with physical depth, a lift on hover and an inset press */
.btn { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; text-decoration: none; border-radius: 12px; white-space: nowrap;
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 180ms ease, border-color 180ms ease; }
.btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--gold { position: relative; padding: 19px 30px; font-size: 18px; color: var(--ink);
  background: linear-gradient(180deg, #E5BA3C 0%, #CF9D20 100%);
  box-shadow: inset 0 1px 0 rgba(255,246,214,.6), inset 0 -2px 0 rgba(17,20,17,.18), 0 12px 26px rgba(0,0,0,.42), 0 2px 4px rgba(0,0,0,.4); }
.btn.btn--gold svg { stroke: var(--ink); } /* beats a page's own .btn svg stroke */
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover { transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,246,214,.65), inset 0 -2px 0 rgba(17,20,17,.16), 0 18px 34px rgba(0,0,0,.46), 0 3px 6px rgba(0,0,0,.42); }
}
.btn--gold:active { transform: translateY(1px); transition-duration: 100ms;
  box-shadow: inset 0 2px 5px rgba(17,20,17,.28), inset 0 -1px 0 rgba(255,246,214,.25), 0 6px 14px rgba(0,0,0,.36); }

/* testimonials: verbatim, with typographic quote marks */
.quote { margin: 0; }
.quote blockquote { margin: 0; }
.quote p { margin: 0; font-size: 22px; line-height: 1.42; letter-spacing: -.008em; color: var(--ink); }
.quote p::before { content: "\201C"; }
.quote p::after { content: "\201D"; }
.quote figcaption { margin-top: 16px; font-size: 16px; color: var(--charcoal-soft); }
.quote figcaption b { font-weight: 500; color: var(--ink); }

/* the footer band */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px;
  padding: 26px var(--pad-x) 34px; background: var(--canvas); border-top: 1px solid rgba(247,243,234,.08); }
.foot__c { margin: 0; font-size: 14px; color: var(--warm-gray); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot__nav a { font-size: 14px; color: var(--warm-gray); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 160ms ease, color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .foot__nav a:hover { color: var(--white); border-color: rgba(247,243,234,.5); } }

/* the company carousel (src/pages/logo-row.mjs; Aylam, October 16; on every door page and, since October 28, the homepage, whose
   dark version is in src/home/home.css): one-colour logos across the section's full width under a hairline,
   looping slowly with motion allowed (src/door/logo-row.js) and standing still, wrapped, with reduced motion or without JavaScript.
   The edges fade only while it moves, so a still row shows every logo whole. */
.logos { grid-area: logos; min-width: 0; margin-top: 10vh; padding-top: 26px; border-top: 1px solid rgba(17,20,17,.1); }
.logos__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.logos__h { font-size: 16px; line-height: 1.45; color: var(--charcoal-soft); }
.logos__pause { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px; font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1;
  color: var(--graphite); background: transparent; border: 1px solid rgba(17,20,17,.5); border-radius: 999px; cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease; }
.logos__pause[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .logos__pause:hover { color: var(--ink); border-color: rgba(17,20,17,.8); } }
/* the icon: two bars while it moves (press to pause), a triangle when paused (press to play) */
.logos__pi { position: relative; width: 10px; height: 11px; }
.logos__pi::before, .logos__pi::after { content: ""; position: absolute; top: 0; width: 3px; height: 11px; border-radius: 1px; background: currentColor; }
.logos__pi::before { left: 1px; }
.logos__pi::after { right: 1px; }
.logos.is-paused .logos__pi::before { left: 1px; width: 0; height: 0; border-radius: 0; background: none;
  border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent currentColor; }
.logos.is-paused .logos__pi::after { display: none; }
.logos__view { margin-top: 22px; }
.logos__track { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 56px; list-style: none; margin: 0; padding: 0; }
.logos__i { flex: none; display: flex; align-items: center; min-height: 44px; }
/* each logo sized for equal visual weight (content/logos.json) and shown in one grey, the label's Charcoal Soft: solid at 72%, so
   no file stays pure black; the marks that need their inner contrast keep it, GE and LinkedIn as a solid shape with light lettering
   (LinkedIn's own one-colour form) and Mastercard in two greys (Brand Design Director, October 26) */
.logos__img { height: var(--h, 28px); width: auto; filter: brightness(0); opacity: .72; }
.logos__img[data-mode="contrast"] { filter: grayscale(1) contrast(6); }
.logos__img[data-mode="gray"] { filter: grayscale(1) brightness(.62) contrast(1.35); opacity: 1; }
.logos__name { font-size: 20px; font-weight: 500; letter-spacing: -.012em; line-height: 1; color: var(--graphite-2); white-space: nowrap; }
.logos.is-moving .logos__view { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(40px, 7%, 96px), #000 calc(100% - clamp(40px, 7%, 96px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(40px, 7%, 96px), #000 calc(100% - clamp(40px, 7%, 96px)), transparent 100%); }
.logos.is-moving .logos__belt { display: flex; width: max-content; animation: logos-loop var(--loop, 64s) linear infinite; }
.logos.is-moving .logos__track { flex-wrap: nowrap; padding-right: 56px; }
.logos.is-paused .logos__belt, .logos.is-moving .logos__view:hover .logos__belt, .logos.is-moving:focus-within .logos__belt { animation-play-state: paused; }
@keyframes logos-loop { to { transform: translateX(-50%); } }
/* paused, the row stands still and wraps, every name or logo whole (Brand Design Director, October 16) */
.logos.is-moving.is-paused .logos__view { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.logos.is-moving.is-paused .logos__belt { display: block; width: auto; animation: none; }
.logos.is-moving.is-paused .logos__track { flex-wrap: wrap; padding-right: 0; }
.logos.is-moving.is-paused .logos__track[aria-hidden] { display: none; }
@media (max-width: 700px) {
  .logos { margin-top: 8vh; }
  .logos__track { gap: 18px 36px; }
  .logos.is-moving .logos__track { padding-right: 36px; }
  .logos__name { font-size: 18px; }
  .logos__img { height: calc(var(--h, 28px) * .85); }
}
@media (prefers-reduced-motion: reduce) { .logos__pause { transition: none; } }