/* Advisory (advisory.html): what the Sprints page's building blocks don't already have. Light, under site.css. */

/* the long eyebrow wraps on phones: rounder corners for two lines */
.adv .fv-eyebrow { max-width: 100%; border-radius: 14px; text-wrap: balance; justify-content: center; }

/* the companies: their own dark logos, quieter than the Sprints page's */
.adv .fv-from-logos { gap: 22px 40px; max-width: 980px; margin-inline: auto; }
.adv .fv-from-logos img { height: 24px; width: auto; max-width: 104px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .55; }
.adv .fv-from-logos img[alt="Blocket"] { height: 19px; }   /* a heavy wordmark: brought down to the others' weight */

/* a client, in her words */
.adv .client { margin: 0; }
.adv .client blockquote { margin: 0; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.5; letter-spacing: -.012em; color: var(--s-ink); text-wrap: pretty; }
.adv .client figcaption { margin-top: 20px; font-family: var(--s-mono); font-size: 12px; letter-spacing: .02em; line-height: 1.6; color: var(--s-mute); }
.adv .client figcaption b { display: block; font-family: var(--s-sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--s-ink); }

/* the ways to work with us: the method grid, two by two */
.adv .ql-method-grid.ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adv .ways > li:nth-child(3) { border-left: 0; }
.adv .ways > li:nth-child(n + 3) { border-top: 1px solid #e4e4e7; }
.adv .ways .ql-method-copy { padding: 30px 30px 32px; }
.adv .ways .ql-mono-label { color: var(--s-blue); }
.adv-after { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.adv .more { font-size: 15px; color: var(--s-mute); }
.adv .more a { color: var(--s-ink); text-decoration: underline; text-decoration-color: rgba(9, 9, 11, .25); text-underline-offset: 3px; }
.adv .more a:hover { text-decoration-color: var(--s-ink); }

/* what changes: today, and with us */
.adv-table { margin-top: 44px; border: 1px solid #e4e4e7; border-radius: 16px; overflow: hidden; }
.adv .change { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.adv .change th, .adv .change td { padding: 18px 24px; text-align: left; vertical-align: top; border-top: 1px solid #e4e4e7; }
.adv .change thead th { border-top: 0; padding-block: 14px; font-family: var(--s-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #71717a; background: #fafafa; }
.adv .change thead th:last-child { color: var(--s-lime-ink); }
.adv .change tbody th { width: 18%; font-weight: 500; color: var(--s-ink); white-space: nowrap; }
.adv .change td { width: 41%; color: #52525b; }
.adv .change td + td { color: var(--s-ink); background: rgba(196, 240, 74, .13); }

/* questions: the Sprints page's rows, a little wider */
.adv .ql-rows.faq { max-width: 46em; margin-top: 36px; }

/* work with us: the close, with the form */
.adv .fv-close h2 { max-width: 14em; margin-inline: auto; }
.adv .fv-close > p a { color: var(--s-ink); text-decoration: underline; text-decoration-color: rgba(9, 9, 11, .3); text-underline-offset: 3px; }
.adv .fv-close > p.more { margin-top: 40px; font-size: 14px; }
.ask { max-width: 460px; margin: 36px auto 0; text-align: left; }
.ask .field { display: block; margin: 0 0 16px; }
.ask .field span { display: block; margin: 0 0 6px; font-family: var(--s-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #71717a; }
.ask input { display: block; width: 100%; height: 48px; padding: 0 16px; border: 1px solid #e4e4e7; border-radius: 12px; background: #fff; font: inherit; font-size: 16px; color: var(--s-ink); transition: border-color .2s ease, box-shadow .2s ease; }
.ask input:focus { outline: none; border-color: var(--s-blue); box-shadow: 0 0 0 3px rgba(47, 124, 246, .15); }
.ask ::placeholder { color: #a1a1aa; }
.ask .captcha { display: flex; justify-content: center; min-height: 78px; margin-top: 4px; }
.ask .captcha:empty { min-height: 0; }
.ask button.send { display: flex; margin: 18px auto 0; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 980px; background: #09090b; color: #fff; font-size: 15px; font-weight: 500; }
.ask button.send:hover { background: #27272a; }
.ask button.send[disabled] { background: #a1a1aa; cursor: default; }
.ask .err { min-height: 1.4em; margin-top: 12px; text-align: center; font-size: 14px; color: #b42318; }
.ask .err a { color: inherit; }
.ask-step { transition: opacity .45s ease, transform .5s ease; }
.ask-step.out { opacity: 0; transform: translateY(-8px); }
.ask h3 { margin: 0 0 22px; text-align: center; font-size: clamp(24px, 3vw, 30px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; }
.ask .ask-step > .cta { display: flex; width: fit-content; margin: 0 auto; padding: 12px 22px; border-radius: 980px; background: #09090b; color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; }
.ask .note { margin-top: 14px; text-align: center; font-size: 14px; color: var(--s-mute); }
.ask .note a { color: inherit; }

@media (max-width: 760px) {
  .adv .ql-method-grid.ways { grid-template-columns: minmax(0, 1fr); }
  .adv .ways > li + li { border-left: 0; border-top: 1px solid #e4e4e7; }
  .adv .fv-from-logos img { height: 20px; max-width: 88px; }
  .adv-table { border: 0; border-radius: 0; overflow: visible; }
  .adv .change thead { display: none; }
  .adv .change, .adv .change tbody, .adv .change tr, .adv .change th, .adv .change td { display: block; width: auto; }
  .adv .change tr { padding: 16px 0; border-top: 1px solid #e4e4e7; }
  .adv .change th, .adv .change td { border: 0; padding: 4px 0; }
  .adv .change td::before { display: block; font-family: var(--s-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #71717a; }
  .adv .change td:first-of-type::before { content: "Today"; }
  .adv .change td + td { margin-top: 8px; padding: 10px 14px; border-radius: 12px; }
  .adv .change td + td::before { content: "With us"; color: var(--s-lime-ink); }
}
@media (prefers-reduced-motion: reduce) { .ask-step, .ask input { transition: none; } }