/* flow.css — shared styles for the role -> pain -> demo overlay (#flow).
 *
 * Loaded by the landing page AND the public SEO/legal pages so the flow looks
 * identical everywhere from one source (paired with flow.js). The design tokens
 * are scoped to .flow so the overlay renders correctly on any host page without
 * depending on — or polluting — that page's :root. The only rules outside .flow
 * are the page-fade hooks (#main/.site-footer/.topbar/.wordmark); their easing
 * is inlined so they need no global token either. */

.flow {
  --canvas: #fffcf5;
  --ink: #0a0a0a;
  --body: #3a3a3a;
  --body-strong: #1a1a1a;
  --muted: #5a5a5a;
  --muted-soft: #8a8a8a;
  --on-primary: #ffffff;
  --hairline: #e8e4d6;
  --hairline-strong: #d5d0c0;
  --brand-burgundy: #952f3a;
  --brand-burgundy-dk: #7e2832;
  --brand-clay: #b8391a;
  --ease: cubic-bezier(.22,.61,.36,1);
  --r-md: 12px;
  --r-xl: 24px;
  --font-serif: "DM Serif Display", Georgia, serif;
  --font-sans: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  position: fixed; inset: 0; z-index: 80; background: var(--canvas); display: none;
}
.flow.open { display: block; }
html.flow-lock, html.flow-lock body { overflow: hidden; }
.flow-close { position: absolute; top: 18px; right: 18px; z-index: 6; width: 44px; height: 44px;
              border-radius: 50%; border: 1px solid var(--hairline-strong); background: rgba(255,252,245,.8);
              display: grid; place-items: center; cursor: pointer; color: var(--ink); }
.flow-close svg { width: 20px; height: 20px; }
.flow .brandmark { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); z-index: 6;
                   font-family: var(--font-serif); font-size: 29px; line-height: 1; letter-spacing: -0.5px; color: var(--ink); }
.flow .brandmark .b { color: var(--brand-burgundy); }
/* graceful open/close: the page fades while the brad logo slides between its
   home (top-left wordmark) and the flow's docked center; the rest appears after. */
#main, .site-footer, .topbar { transition: opacity .42s cubic-bezier(.22,.61,.36,1); }
html.flow-anim #main, html.flow-anim .site-footer, html.flow-anim .topbar { opacity: 0; pointer-events: none; }
html.flow-anim .wordmark { opacity: 0; transition: none; } /* hand the spot to the sliding logo */
.flow.flow-sliding { background: transparent; }            /* let the fading page show during the slide */
.flow .question, .flow .flow-close { transition: opacity .3s var(--ease); }
.flow.flow-sliding .question, .flow.flow-sliding .flow-close { opacity: 0; pointer-events: none; }
/* keep the landing's frosted navbar in the flow so content blurs as it scrolls under the logo */
.flow::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 73px; z-index: 5;
  background: rgba(255,252,245,0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  pointer-events: none; transition: opacity .3s var(--ease); }
.flow.flow-sliding::before { opacity: 0; }

.question { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
            display: flex; flex-direction: column; visibility: hidden; }
.question.active, .question.exit-left, .question.exit-right, .question.from-left { visibility: visible; }
.question.active { pointer-events: auto; }
.q-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
           display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
           padding: 84px 20px 32px; opacity: 0; transform: translateX(90px);
           transition: opacity .5s var(--ease), transform .5s var(--ease); }
#q3 .q-inner, #q4 .q-inner, #q5 .q-inner { justify-content: flex-start; padding-top: 96px; }
.question.active .q-inner { opacity: 1; transform: translateX(0); }
.question.exit-left .q-inner { opacity: 0; transform: translateX(-90px); }
.question.exit-right .q-inner { opacity: 0; transform: translateX(90px); }
.question.from-left .q-inner { opacity: 0; transform: translateX(-90px); }
.q-title { font-family: var(--font-serif); font-size: 31px; line-height: 1.1; letter-spacing: -.4px; color: var(--ink); margin-bottom: 30px; }
.q-title .hey { color: var(--brand-burgundy); font-style: italic; }
.q-options { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.q-option { width: min(360px, 80vw); padding: 15px 20px; border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
            background: rgba(255,252,245,.6); font-family: var(--font-serif); font-size: 20px; letter-spacing: -.2px;
            color: var(--body-strong); cursor: pointer; opacity: 0; transform: translateY(12px);
            transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.q-option.in { opacity: 1; transform: translateY(0); }
.q-option:hover { border-color: var(--brand-burgundy); background: #fff; color: var(--ink); }
.q-option.selected { border-color: var(--brand-burgundy); background: var(--brand-burgundy); color: var(--on-primary); }
.q-options.multi { width: min(580px, 90vw); }
.q-options.multi .q-option { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 18px; }
.q-options.multi .q-option .check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--hairline-strong);
            flex: none; display: grid; place-items: center; transition: background .15s var(--ease), border-color .15s var(--ease); }
.q-options.multi .q-option .check svg { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity .15s var(--ease); }
.q-options.multi .q-option:hover { background: #fff; color: var(--ink); }
.q-options.multi .q-option.selected { border-color: var(--brand-burgundy); background: #fbf3f0; color: var(--ink); }
.q-options.multi .q-option.selected .check { background: var(--brand-burgundy); border-color: var(--brand-burgundy); }
.q-options.multi .q-option.selected .check svg { opacity: 1; }

.q-actions { display: flex; gap: 12px; width: min(580px, 90vw); margin: 30px auto 0; }
.q-actions .back-btn, .q-actions .next-btn { flex: 1; }
.next-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 22px;
            border: none; border-radius: 999px; background: var(--brand-burgundy); color: var(--on-primary);
            font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer;
            transition: background .18s var(--ease); }
.next-btn:hover { background: var(--brand-burgundy-dk); }
.next-btn svg { width: 17px; height: 17px; }
.back-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 22px;
            border: 1px solid var(--hairline-strong); border-radius: 999px; background: transparent; color: var(--body-strong);
            font-family: var(--font-sans); font-size: 17px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; cursor: pointer;
            transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease); }
.back-btn:hover { border-color: var(--brand-burgundy); color: var(--ink); background: rgba(149,47,58,.04); }
.back-btn svg { width: 17px; height: 17px; }

.pain-card { width: min(580px, 90vw); text-align: left; background: rgba(255,252,245,.7); border: 1px solid var(--hairline);
             border-radius: var(--r-xl); padding: 30px 34px 32px; transition: opacity .28s var(--ease), transform .28s var(--ease); }
.pc-progress { display: flex; gap: 6px; margin-bottom: 18px; }
.pc-progress i { height: 4px; flex: 1; border-radius: 999px; background: var(--hairline-strong); transition: background .25s var(--ease); }
.pc-progress i.on { background: var(--brand-burgundy); }
.pc-pain { font-family: var(--font-serif); font-size: 26px; line-height: 1.14; letter-spacing: -.4px; color: var(--ink); margin-bottom: 6px; }
.pc-block { margin-top: 18px; }
.pc-label { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.pc-brad { color: var(--brand-burgundy); }
.pc-root { font-size: 18px; line-height: 1.5; color: var(--body); }
.pc-solution { font-size: 18px; line-height: 1.6; color: var(--body-strong); }
.pain-card.swap { opacity: 0; transform: translateY(10px); }

.demo-card { width: min(580px, 90vw); text-align: left; background: rgba(255,252,245,.7); border: 1px solid var(--hairline);
             border-radius: var(--r-xl); padding: 32px 34px 30px; }
.demo-card .q-title { text-align: left; margin-bottom: 8px; }
.demo-sub { font-size: 18px; line-height: 1.5; color: var(--body); margin-bottom: 22px; }
.demo-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.field-row { display: flex; gap: 14px; }
.field-label { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.field-label .opt { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--muted-soft); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; font-family: var(--font-sans); font-size: 18px; color: var(--ink);
             background: #fff; border: 1px solid var(--hairline-strong); border-radius: var(--r-md); padding: 12px 13px;
             transition: border-color .16s var(--ease), box-shadow .16s var(--ease); }
.field textarea { resize: vertical; min-height: 64px; line-height: 1.45; }
.field select { height: 46px; cursor: pointer; -webkit-appearance: none; appearance: none;
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23952f3a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
             background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px; }
.field input::placeholder, .field textarea::placeholder { color: #c8c2b3; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brand-burgundy); box-shadow: 0 0 0 3px rgba(149,47,58,.1); }
.field input.invalid { border-color: var(--brand-clay); box-shadow: 0 0 0 3px rgba(184,57,26,.1); }
#demoActions { width: 100%; margin-top: 10px; }
.demo-done { display: none; text-align: center; padding: 18px 0 8px; }
.demo-card.sent .demo-form { display: none; }
.demo-card.sent .demo-done { display: block; }
.demo-check { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--brand-burgundy); color: #fff; display: grid; place-items: center; }
.demo-check svg { width: 28px; height: 28px; }
.demo-done-title { font-family: var(--font-serif); font-size: 26px; line-height: 1.1; letter-spacing: -.4px; color: var(--ink); margin-bottom: 8px; }
.demo-done-sub { font-size: 18px; line-height: 1.5; color: var(--body); }

@media (max-width: 540px) {
  .field-row { flex-direction: column; }
}