/* A compact mobile preview. Form values stay in memory. */
#experience {
  width: min(550px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 40px 22px 26px;
  border: 1px solid var(--line, #ffd5e5);
  border-radius: 26px;
  color: var(--ink, #331728);
  background: #fffafd;
  box-shadow: 0 25px 100px #da548d35;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#experience::backdrop { background: #8d305c45; backdrop-filter: blur(9px); }
body:has(#experience[open]) { overflow: hidden; }
#experience button, #experience input { font: inherit; }
#experience button { cursor: pointer; }
#experience button:focus-visible, #experience input:focus-visible, #experience summary:focus-visible { outline: 3px solid #d81765; outline-offset: 4px; }
#close-experience { position: absolute; top: 13px; right: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: #ffe4ef; color: #a61e56; font-size: 22px !important; line-height: 1; }
#close-experience:hover { background: #ffd0e3; }
.flow-demo-notice { margin: 4px 0 25px; padding: 10px 7px; border-radius: 10px; color: #9b4569; background: #fff0f6; font-size: 11px; line-height: 1.6; text-align: center; }
.flow-heading { margin-bottom: 23px; }
#experience-title { margin: 0; font-family: var(--display, inherit); font-size: clamp(24px, 4.6vw, 29px); font-weight: 700; line-height: 1.5; letter-spacing: -.065em; word-break: keep-all; }
#experience-title:focus { outline: none; }
.flow-heading > p { margin: 10px 0 0; color: #846575; font-size: 14px; line-height: 1.7; word-break: keep-all; }
.flow-progress { display: flex; gap: 14px; padding: 0; margin: 0 0 25px; list-style: none; }
.flow-progress li { display: flex; align-items: center; gap: 5px; font-size: 10px; color: #967a88; white-space: nowrap; }
.flow-progress li > span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #ffe7f0; font-size: 10px; }
.flow-progress li[aria-current] { color: #d81765; font-weight: 650; }
.flow-progress li[aria-current] > span { color: white; background: #d81765; }
.flow-progress .is-complete > span { color: #c62364; background: #ffd3e5; }
.flow-back { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 0 0 19px; background: none; color: #846575; font-size: 13px !important; }
.flow-back:hover { color: #d81765; }
.flow-form { display: flex; flex-direction: column; gap: 12px; }
.flow-form label, .flow-form legend { display: block; color: #53303f; font-size: 13px; font-weight: 600; }
.flow-form input:not([type=radio]) { box-sizing: border-box; width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid #ffd5e5; border-radius: 12px; background: white; color: #331728; font-size: 16px !important; transition: border-color .2s, box-shadow .2s; }
.flow-form input::placeholder { color: #b39aa7; opacity: 1; }
.flow-form input:not([type=radio]):hover { border-color: #f5a1c1; }
.flow-form input:not([type=radio]):focus { border-color: #e8387e; box-shadow: 0 0 0 3px #ffe2ee; outline: none; }
.flow-field-help { margin: -2px 0 0; color: #846575; font-size: 13px; line-height: 1.7; }
.flow-text-button { align-self: flex-start; padding: 3px 0; border: 0; background: none; color: #cd2868; font-size: 13px !important; text-decoration: underline; text-underline-offset: 4px; }
.flow-primary, .flow-secondary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 53px; margin-top: 16px; padding: 13px 17px; border: 1px solid transparent; border-radius: 13px; font-size: 14px !important; font-weight: 600 !important; line-height: 1.6; transition: background .15s, transform .15s; }
.flow-primary { background: #d81765; color: #fff; box-shadow: 0 6px 18px #e9277520; }
.flow-primary:hover { background: #c21059; transform: translateY(-1px); }
.flow-primary > span { font-size: 19px; font-weight: 400; }
.flow-secondary { background: #fff5f9; border-color: #ffd5e5; color: #a23b65; }
.flow-secondary:hover { background: #ffe7f0; }
.flow-footnote { margin: 17px 0 0; font-size: 13px; line-height: 1.7; color: #947384; text-align: center; }
.flow-input-group { display: flex; flex-direction: column; gap: 9px; }
.flow-input-group[hidden] { display: none; }
.flow-input-pair { display: grid; grid-template-columns: minmax(0, 1fr) 93px; gap: 10px; }
.flow-age-wrap { position: relative; }
.flow-age-wrap input { padding-right: 32px !important; }
.flow-age-wrap > span { position: absolute; top: 16px; right: 13px; color: #92717f; font-size: 13px; pointer-events: none; }
.flow-gender { padding: 0; margin: 4px 0; border: 0; min-width: 0; }
.flow-gender legend { margin-bottom: 9px; }
.flow-radio-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flow-radio-row label { display: flex; gap: 9px; align-items: center; padding: 15px; border: 1px solid #ffd5e5; border-radius: 12px; background: white; cursor: pointer; font-weight: 400; }
.flow-radio-row input { margin: 0; width: 16px; height: 16px; accent-color: #d81765; }
.flow-radio-row label:has(input:checked) { background: #ffedf5; border-color: #ed679d; color: #c62364; }
.flow-email-status { display: flex; align-items: center; gap: 8px; padding: 12px 10px; margin-bottom: 22px; border-radius: 12px; background: #fff0f6; color: #d84d87; }
.flow-email-status > span:first-child { font-size: 21px; }
.flow-email-status > div { min-width: 0; flex: 1; }
.flow-email-status div > span { display: block; font-size: 12px; color: #90687a; overflow-wrap: anywhere; }
.flow-small-tag { display: inline-block; padding: 5px 8px; border-radius: 6px; background: #ffe0ec; color: #b64472; font-size: 11px; font-weight: 500; white-space: nowrap; }
.flow-email-status .flow-small-tag { font-size: 10px; padding: 4px 6px; }
.flow-summary-card { padding: 5px 22px 0; border: 1px solid #ffd5e5; border-radius: 17px; background: white; }
.flow-facts { margin: 0; }
.flow-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 22px; padding: 15px 0; border-bottom: 1px solid #ffe8f1; font-size: 15px; }
.flow-facts > div:last-child { border-bottom: 0; }
.flow-facts dt { color: #967184; font-size: 13px; white-space: nowrap; }
.flow-facts dd { margin: 0; text-align: right; color: #4f2b3c; font-weight: 500; overflow-wrap: anywhere; }
.flow-summary-email { display: flex; flex-direction: column; gap: 5px; padding: 12px 0 17px; border-top: 1px solid #ffe8f1; font-size: 12px; }
.flow-summary-email > span { color: #967184; }
.flow-summary-email strong { font-weight: 500; overflow-wrap: anywhere; }
.flow-price { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin: 0 -22px; padding: 19px 22px; background: #ffe4ef; border-radius: 0 0 16px 16px; }
.flow-price > span { font-size: 13px; color: #ad4770; }
.flow-price > strong { color: #d81765; font-size: 26px; font-weight: 650; letter-spacing: -.04em; }
.flow-bank { margin-top: 18px; padding: 19px 20px; border: 1px solid #ffd5e5; border-radius: 17px; background: #fff0f6; }
.flow-bank-heading { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: #9c3d65; }
.flow-bank-account { margin: 12px 0 3px; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; overflow-wrap: anywhere; }
.flow-bank-owner { font-size: 12px; color: #775364; }
.flow-bank-depositor { margin-top: 14px; font-size: 13px; color: #775364; overflow-wrap: anywhere; }
.flow-bank-note { margin-top: 13px; font-size: 12px; color: #a23b65; }
.flow-key-points { display: flex; flex-direction: column; gap: 9px; padding: 4px 0; margin: 23px 0; font-size: 13px; color: #775364; }
.flow-key-points > span::before { content: '✓'; margin-right: 9px; color: #e92775; font-weight: 650; }
.flow-disclosure { margin: 19px 0 0; padding-top: 15px; border-top: 1px solid #ffdfeb; font-size: 13px; line-height: 1.8; color: #846575; }
.flow-disclosure summary { color: #9d5a77; cursor: pointer; width: fit-content; }
.flow-disclosure > div { padding: 12px 0 2px; word-break: keep-all; }
.flow-disclosure p { margin: 0 0 11px; }
.flow-disclosure p:last-child { margin-bottom: 0; }
.flow-disclosure ul { padding-left: 18px; margin: 0; }
.flow-letter-icon { display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid #ffc8df; border-radius: 22px; background: #ffe5f0; color: #e92775; font-family: Georgia, serif; font-size: 36px; margin: 0 0 28px; transform: rotate(-8deg); }
.flow-status-card { display: flex; align-items: flex-start; gap: 13px; margin: 26px 0; padding: 21px 18px; border-radius: 15px; background: #fff0f6; }
.flow-status-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: #ef508e; box-shadow: 0 0 0 4px #ffd9e8; }
.flow-status-card strong { display: block; color: #9c3d65; font-size: 14px; font-weight: 600; line-height: 1.6; }
.flow-status-card p { margin: 6px 0 0; color: #937583; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.flow-mail { border: 1px solid #ffd5e5; border-radius: 18px; overflow: hidden; background: white; }
.flow-mail-meta { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 9px; padding: 17px 15px; font-size: 12px; background: #fff0f6; }
.flow-mail-meta > span { color: #967184; }
.flow-mail-meta > strong { font-weight: 500; color: #775164; overflow-wrap: anywhere; }
.flow-mail-body { padding: 27px 18px; text-align: center; }
.flow-mail-brand { display: block; font-family: var(--display, inherit); font-size: 25px; font-weight: 700; color: #e92775; letter-spacing: -.06em; }
.flow-mail-brand > span { display: inline-block; margin-left: 4px; font-size: 17px; transform: rotate(-15deg); }
.flow-mail-body h3 { margin: 29px 0 11px; font-family: var(--display, inherit); font-size: 23px; font-weight: 700; letter-spacing: -.055em; }
.flow-mail-body > p:not(.flow-footnote) { margin: 0 0 24px; font-size: 14px; color: #927583; line-height: 1.8; }
.flow-profile-card { padding: 21px 20px; border-radius: 20px; background: #fff0f6; border: 1px solid #ffd5e5; }
.flow-profile-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.flow-monogram { display: grid; position: relative; place-items: center; width: 58px; height: 58px; border-radius: 17px; background: #ffd2e5; color: #db246c; font: italic 35px Georgia, serif; transform: rotate(-7deg); }
.flow-monogram > span { position: absolute; right: 7px; bottom: 4px; font-size: 16px; }
.flow-profile-card .flow-facts > div { border-bottom-color: #ffd7e7; }
.flow-profile-card .flow-facts > div:last-child { border-bottom: 0; }
.flow-choice-note { margin: 23px 0; text-align: center; color: #846575; font-size: 14px; line-height: 1.8; }
.flow-choice-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; }
.flow-choice-row > button { margin-top: 0; }
.flow-opening-copy { font-size: 15px; line-height: 1.9; color: #775364; margin: 0 0 25px; }
.flow-opening-contact { margin: 19px 0 0; text-align: center; font-size: 12px; color: #846575; }
.flow-opening-contact a { text-decoration: underline; text-underline-offset: 3px; }

/* Legal text intentionally uses a plain, readable document layout. */
.flow-form .flow-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 400; line-height: 1.7; }
.flow-form .flow-consent input[type=checkbox] { flex: 0 0 18px; width: 18px; height: 18px; min-height: 18px; margin: 4px 0 0; padding: 0; accent-color: #d81765; }
.flow-error { color: #a21b44; font-size: 14px; line-height: 1.7; }
#experience button:disabled { opacity: .6; cursor: wait; }
#experience.is-legal { border: 1px solid #bdbdbd; border-radius: 4px; background: #fff; color: #222; box-shadow: none; padding: 48px 22px 28px; }
#experience.is-legal::backdrop { background: #0007; backdrop-filter: none; }
#experience.is-legal #close-experience { color: #333; background: #f0f0f0; border-radius: 3px; }
#experience.is-legal #experience-title { font-family: var(--sans); font-size: 23px; letter-spacing: -.025em; line-height: 1.45; }
#experience.is-legal .flow-heading { border-bottom: 1px solid #555; padding-bottom: 17px; margin-bottom: 20px; }
.legal-document { font-family: var(--sans); font-size: 14px; line-height: 1.85; overflow-wrap: anywhere; word-break: normal; }
.legal-document section { margin: 25px 0; }
.legal-document h3 { font-family: inherit; font-size: 15px; line-height: 1.65; font-weight: 700; margin: 0 0 11px; letter-spacing: 0; }
.legal-document p { margin: 0 0 12px; }
.legal-document strong { font-weight: 700; }
.legal-document .legal-draft { border: 1px solid #bbb; background: #f7f7f7; padding: 13px; color: #333; font-size: 13px; }
.legal-document .legal-pending { border-left: 3px solid #777; padding-left: 12px; color: #444; }
.legal-business { margin: 0 0 14px; }
.legal-business > div { padding: 8px 0; border-bottom: 1px solid #ddd; }
.legal-business dt { font-weight: 600; }
.legal-business dd { margin: 2px 0 0; }
.legal-document ul { margin: 10px 0 13px; padding-left: 21px; }
.legal-document a { color: #222; text-decoration: underline; text-underline-offset: 3px; }
#experience.is-legal .flow-secondary { background: #f3f3f3; color: #222; border-color: #bbb; border-radius: 3px; }
#experience.is-legal button:focus-visible, #experience.is-legal a:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
@media (min-width: 500px) and (max-width: 767px) {
  #experience { padding: 42px; }
  .flow-demo-notice { font-size: 12px; }
  .flow-progress { gap: 21px; }
  .flow-progress li { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  #experience *, #experience *::before, #experience *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}