.h227-wordmark { display: inline-flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.h227-wordmark img { width: 8.25rem; height: 2.875rem; }
#h227-navigation > a { font-size: .9375rem; transition: color .2s; }
#h227-navigation > a:hover { color: #c8afff; }
.h227-contact-action { display: flex; align-items: center; gap: 1.125rem; border-radius: .5rem; padding: .625rem 1.0625rem; background: var(--hw227-purple); font-weight: 600; }
#h227-navigation > .h227-contact-action:hover { color: white; background: var(--hw227-purple-hover); }
.h227-menu { display: none; }
.h227-control { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; border: 1px solid transparent; border-radius: .5rem; padding: .8125rem 1.4375rem; min-height: 3.25rem; color: white; font-size: 1rem; font-weight: 600; line-height: 1.4; transition: background .2s, transform .2s; }
.h227-control:hover { transform: translateY(-2px); }
.h227-control:active { transform: translateY(0); }
.h227-trial { min-width: 13.75rem; background: var(--hw227-purple); }
.h227-trial:hover { background: var(--hw227-purple-hover); }
.h227-control[aria-busy='true'], .h227-contact-action[aria-busy='true'] { cursor: progress; opacity: .75; }
.h227-dark { background: var(--hw227-night); border-color: var(--hw227-line); }
.h227-dark:hover { background: var(--hw227-panel); }
.h227-light { color: #29134f; background: white; }
.h227-light:hover { background: #eee8ff; }
.h227-outline { border-color: #d9c7ff; background: transparent; }
.h227-outline:hover { background: var(--hw227-purple-hover); }
.h227-text-action { display: inline-flex; align-items: center; gap: 1.125rem; min-height: 2.75rem; font-weight: 600; margin-block-start: 1.375rem; }
.h227-text-action:hover { color: var(--hw227-purple-hover); }
.h227-offers .h227-text-action:hover { color: #c8afff; }
.h227-scenario-options > button { position: relative; display: grid; grid-template-columns: 1fr 1.75rem; min-height: 8.625rem; padding: 1.5rem 1.75rem; text-align: left; border: 0; border-radius: .75rem; background: transparent; color: var(--hw227-ink); transition: background .2s; }
.h227-scenario-options strong { font-size: 1.4375rem; font-weight: 550; letter-spacing: -.02em; }
.h227-scenario-options span { grid-column: 1; margin-block-start: .625rem; font-size: .9375rem; line-height: 1.7; color: var(--hw227-copy); }
.h227-scenario-options svg { grid-area: 1 / 2; align-self: center; }
.h227-scenario-options > button[aria-selected='true'], .h227-scenario-options > button:hover { background: var(--hw227-panel); color: white; }
.h227-scenario-options > button[aria-selected='true'] span, .h227-scenario-options > button:hover span { color: var(--hw227-night-copy); }
.h227-scenario-options > button[aria-selected='true'] svg { color: #b89aff; }
.h227-answers details { border-block-end: 1px solid #c4cddc; padding-block: 1.5rem; }
.h227-answers details:first-child { padding-block-start: 0; }
.h227-answers summary { list-style: none; cursor: pointer; position: relative; padding-inline-end: 2.375rem; min-height: 2rem; font-size: 1.1875rem; }
.h227-answers summary::-webkit-details-marker { display: none; }
.h227-answers summary::after { content: '+'; position: absolute; inset: -.1875rem .125rem auto auto; color: var(--hw227-copy); font-size: 1.625rem; font-weight: 300; }
.h227-answers details[open] summary::after { content: '−'; }
.h227-answers details p { padding-block-start: 1.125rem; font-size: .9375rem; line-height: 1.9; }
.h227-dialog { width: min(28.75rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.75rem; margin: auto; border: 1px solid #52525c; border-radius: 1rem; background: var(--hw227-panel); color: white; font: 1rem/1.6 var(--hw227-text); overflow: auto; }
.h227-dialog::backdrop { background: rgb(0 0 0 / .75); }
.h227-dialog h2 { font-size: 1.5rem; line-height: 1.3; margin-inline-end: 2.5rem; overflow-wrap: anywhere; }
.h227-dialog p { color: var(--hw227-night-copy); font-size: .875rem; margin-block-start: .75rem; overflow-wrap: anywhere; }
.h227-dialog-close { position: absolute; inset: .75rem .75rem auto auto; min-width: 2.75rem; min-height: 2.75rem; padding: .5rem; border: 0; background: transparent; color: white; font-size: 1rem; }
.h227-dialog label { display: block; margin-block: 1.25rem .5rem; }
.h227-dialog input { display: block; width: 100%; max-width: 100%; min-height: 3rem; border: 1px solid #71717b; border-radius: .375rem; background: var(--hw227-panel-raised); color: white; padding: .625rem .75rem; font-size: 1rem; }
.h227-dialog [type='submit'] { width: 100%; margin-block-start: 1.25rem; background: var(--hw227-purple); color: white; min-height: 2.75rem; border: 1px solid var(--hw227-purple); border-radius: .375rem; padding: .75rem 1.125rem; font-weight: 600; }
.h227-dialog [type='submit']:hover { background: var(--hw227-purple-hover); }
.h227-dialog button:disabled { opacity: .6; cursor: wait; }
.h227-dialog .h227-feedback { min-height: 1.5rem; }
.h227-dialog .h227-error { color: #ffaba9; }
.h227-dialog .h227-success { color: #a4e8bb; }
.h227-dialog :focus-visible, .h227-navframe :focus-visible { outline-color: #c8afff; }
@media (max-width: 62.5rem) {
  .h227-scenario-options > button { padding: 1.25rem; min-height: 8.75rem; }
  .h227-scenario-options strong { font-size: 1.3125rem; }
}
@media (max-width: 45rem) {
  .h227-wordmark img { width: 7.25rem; height: 2.625rem; }
  .h227-menu { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; justify-self: end; gap: .375rem; width: 2.5rem; height: 2.75rem; padding: .75rem .375rem; border: 0; background: transparent; }
  .h227-menu > span { width: 1.5rem; height: 2px; background: white; transition: transform .2s; }
  .h227-menu[aria-expanded='true'] > span:first-child { transform: translateY(4px) rotate(45deg); }
  .h227-menu[aria-expanded='true'] > span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .h227-control { padding: .8125rem 1rem; gap: .5625rem; min-height: 3.125rem; font-size: .875rem; }
  .h227-control svg { width: 1.1875rem; height: 1.1875rem; }
  .h227-trial { min-width: 0; flex: 0 1 9.375rem; }
  .h227-scenario-options > button { min-height: 0; padding: 1.1875rem 1.25rem; }
  .h227-scenario-options strong { font-size: 1.3125rem; }
  .h227-scenario-options span { font-size: .875rem; }
  .h227-answers summary { font-size: 1.0625rem; line-height: 1.6; }
  .h227-answers details { padding-block: 1.3125rem; }
  .h227-footer .h227-wordmark img { width: 8.125rem; height: 2.875rem; }
}
@media (max-width: 26.25rem) { .h227-dialog { padding: 1.5rem 1.25rem; } .h227-dialog h2 { font-size: 1.375rem; } }