/* Modou website v2: pricing, quote, contact and FAQ pages (builder B).
   Loaded after site.css on these pages only. Tokens only, so both themes work. */

/* ------------------------------------------------------------------ shared */
.pb-h2s { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; }
.pb-ic { width: 40px; height: 40px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); display: grid; place-items: center; color: var(--accent-hi); }
.pb-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pb-ic svg.fill { fill: currentColor; stroke: none; width: 15px; height: 15px; }

/* ------------------------------------------------------------------ pricing: the commercial path in three parts */
.pb-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.pb-card { display: flex; flex-direction: column; min-width: 0; padding: 30px 30px 32px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.pb-card .n { font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--ink-3); }
.pb-card h2 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; margin-top: 22px; text-wrap: balance; }
.pb-card p { color: var(--ink-2); font-size: 16px; line-height: 1.6; margin-top: 14px; }
.pb-card .amt { font-size: clamp(30px, 2.7vw, 40px); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); margin-top: 18px; }
.pb-card .pb-note { color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.45; margin-top: auto; padding-top: 26px; }
.pb-card .btn { margin-top: 20px; align-self: flex-start; }
.pb-card.hi { border-color: rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .12) 0%, rgba(var(--accent-rgb), .02) 55%), var(--bg-2); }
.pb-card.hi .n { color: var(--accent-hi); }
.pb-ticks { margin-top: auto; padding-top: 26px; }
.pb-ticks li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.45; color: var(--ink); }
.pb-ticks li::before { content: ""; flex: none; width: 10px; height: 5px; border-left: 1.5px solid var(--accent-hi); border-bottom: 1.5px solid var(--accent-hi); transform: translateY(-4px) rotate(-45deg); }

/* pricing: design partner, the page's one band in the accent */
.pb-dp { background: var(--accent); color: var(--accent-fg); padding: 128px 0; transition: background-color .5s var(--ease), color .5s var(--ease); }
.pb-dp .wrap { display: grid; grid-template-columns: 6fr 5fr; gap: 72px; align-items: end; }
.pb-dp .wrap > * { min-width: 0; }
.pb-dp .label { color: inherit; opacity: .8; }
.pb-dp h2 { font-size: clamp(34px, 4vw, 58px); margin-top: 20px; max-width: 11em; }
.pb-dp p { font-size: 18px; line-height: 1.55; opacity: .9; max-width: 30em; }
.pb-dp p + p { margin-top: 14px; }
.pb-dp .btn { --b: var(--accent-fg); --f: var(--accent); margin-top: 34px; }
.pb-dp .btn::before { background: linear-gradient(100deg, transparent 20%, rgba(var(--accent-rgb), .18) 50%, transparent 80%); }
.pb-dp :focus-visible { outline-color: currentColor; }

/* pricing: quality, photo beside the claim and a worked line */
.pb-qual .figure { aspect-ratio: 4 / 3.4; }
.pb-qual .figure img { object-position: 50% 55%; }
.pb-qual .prose { margin-top: 24px; }
.pb-qual .panel { margin-top: 32px; }
.pb-qual .eq { flex-direction: column; gap: 4px; padding: 14px 18px; }

/* ------------------------------------------------------------------ quote page */
.sec.pb-after { padding-top: 96px; }
.ph.pb-ph-tight { padding-bottom: 72px; }
.pb-q { display: grid; grid-template-columns: 7fr 4fr; gap: 96px; align-items: start; }
.pb-q > * { min-width: 0; }
.pb-q-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.pb-q-hd h2 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; }
.pb-q-hd span { font-size: 13px; color: var(--ink-3); }
.qform .qf-go p a, .pb-formcard .qf-go p a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.qf-done .ctas { margin-top: 26px; }
.qf-done .qf-ic { width: 56px; height: 56px; margin-bottom: 24px; color: var(--accent-hi); }
.qf-done .qf-ic circle, .qf-done .qf-ic path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pb-next { position: sticky; top: calc(var(--hd) + 40px); }
.pb-next ol { margin-top: 18px; border-top: 1px solid var(--line-2); counter-reset: nx; }
.pb-next li { display: grid; grid-template-columns: 40px 1fr; padding: 20px 0; border-bottom: 1px solid var(--line); }
.pb-next li::before { counter-increment: nx; content: "0" counter(nx); font-size: 12px; font-weight: 500; letter-spacing: .14em; color: var(--ink-3); padding-top: 4px; }
.pb-next li b { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.012em; line-height: 1.35; color: var(--ink); }
.pb-next li span { display: block; font-size: 15px; line-height: 1.55; color: var(--ink-2); margin-top: 6px; }
.pb-alt { margin-top: 28px; display: grid; gap: 4px; }
.pb-alt a { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); transition: color .2s; }
.pb-alt a:last-child { border-bottom: 0; }
.pb-alt a b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.pb-alt a small { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; }
.pb-alt a > svg { width: 14px; height: 14px; fill: none; stroke: var(--ink-3); stroke-width: 1.4; transition: transform .35s var(--ease), stroke .2s; }
.pb-alt a:hover > svg { transform: translateX(3px); stroke: var(--ink); }

/* ------------------------------------------------------------------ contact page */
.pb-ct { display: grid; grid-template-columns: 5fr 7fr; gap: 88px; align-items: start; }
.pb-ct > * { min-width: 0; }
.pb-ch { border-top: 1px solid var(--line-2); }
.pb-ch > div { display: grid; grid-template-columns: 40px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pb-ch dt { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; }
.pb-ch dd { font-size: 17px; color: var(--ink); margin-top: 3px; line-height: 1.45; overflow-wrap: anywhere; }
.pb-ch dd small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.pb-ch dd a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 1px; }
.pb-ch dd a:hover { background-size: 100% 1px; }
.pb-formcard { padding: 36px 36px 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.pb-formcard .field input, .pb-formcard .field textarea { background: var(--bg); }
.pb-formcard .field input:focus, .pb-formcard .field textarea:focus { background: var(--bg); border-color: var(--ink-2); }
.pb-formcard .pb-q-hd { margin-bottom: 4px; }
.pb-formcard .qf-done { padding: 24px 0 8px; }
.pb-founder .figure { aspect-ratio: 4 / 3.3; }
.pb-founder .figure img { object-position: 46% 50%; }
.pb-founder h2 { margin: 0; }
.pb-founder .bio { font-size: clamp(21px, 2vw, 28px); font-weight: 500; letter-spacing: -.022em; line-height: 1.32; color: var(--ink); margin-top: 22px; max-width: 24em; text-wrap: pretty; }
.pb-founder .bio a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-3); text-underline-offset: 5px; transition: text-decoration-color .2s; }
.pb-founder .bio a:hover { text-decoration-color: var(--ink); }
.pb-founder .bio span { color: var(--ink-2); }
.pb-founder .meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; font-size: 14px; color: var(--ink-3); }

/* ------------------------------------------------------------------ FAQ page */
.pb-faq .legal-toc .label { margin-bottom: 14px; }
.pb-fg { scroll-margin-top: calc(var(--hd) + 24px); }
.pb-fg + .pb-fg { margin-top: 80px; }
.pb-fg-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.pb-fg-h h2 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -.022em; line-height: 1.2; }
.pb-fg-h span { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.pb-faq-nav { display: none; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .pb-path { grid-template-columns: 1fr; gap: 14px; max-width: 720px; }
  .pb-dp { padding: 104px 0; }
  .pb-dp .wrap, .pb-q, .pb-ct { grid-template-columns: 1fr; gap: 48px; }
  .pb-next { position: static; }
  .pb-faq-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; }
  .pb-faq-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; font-size: 14px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .2s, box-shadow .2s; }
  .pb-faq-nav a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }
}
@media (max-width: 760px) {
  .pb-card { padding: 24px 22px 26px; }
  .pb-card h2 { margin-top: 18px; }
  .pb-dp { padding: 88px 0; }
  .pb-dp p { font-size: 16.5px; }
  .ph.pb-ph-tight { padding-bottom: 48px; }
  .sec.pb-after { padding-top: 56px; }
  .pb-q-hd { flex-direction: column; gap: 4px; margin-bottom: 24px; }
  .pb-formcard { padding: 24px 20px 24px; margin: 0 -4px; }
  .pb-fg + .pb-fg { margin-top: 64px; }
  .pb-faq-nav { margin-bottom: 44px; }
  .pb-faq-nav a { height: 34px; padding: 0 12px; font-size: 13.5px; }
  .pb-qual .figure { aspect-ratio: 4 / 3; }
  .pb-founder .meta { flex-direction: column; gap: 4px; }
}