/* Native HTML adaptation of Untitled UI's Button, button-border Tabs,
   Input and Dropdown surfaces. Upstream commit ddc0834b3c75bfd316774f6e42d2cca512307d96.
   React Aria is not installed: the existing native controls own behavior.
   Veto supplies the brand colors, larger touch targets and responsive wrapping.
MIT License

Copyright (c) 2025 Untitled UI

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/
:root {
  --ui-brand: #214b3b;
  --ui-brand-hover: #163c2c;
  --ui-text: #344054;
  --ui-muted: #667085;
  --ui-border: #d0d5dd;
  --ui-border-soft: #eaecf0;
  --ui-hover: #f9fafb;
  --ui-error: #b42318;
  --ui-shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);
  --ui-shadow-sm: 0 1px 3px rgb(16 24 40 / 10%), 0 1px 2px -1px rgb(16 24 40 / 10%);
}
/* Button sm/lg/xl + secondary and tertiary variants. Existing anchors stay links. */
body :is(.button,.pill,.partner-button,.marketing-partner,.partner-demo) {
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:44px;padding:10px 16px;border-radius:8px;
  border:1px solid transparent;font-weight:600;line-height:1.5;
  box-shadow:var(--ui-shadow-xs);transition:background-color 100ms linear,box-shadow 100ms linear;
  text-decoration:none;transform:none;
}
body :is(.button,.pill,.partner-button,.marketing-partner,.partner-demo):hover {transform:none}
body :is(.button.primary,.button.small,.pill.dark,.partner-button,.marketing-partner),
.design-partners-page .pill.dark {
  background:var(--ui-brand);border-color:var(--ui-brand);color:white;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / 12%),var(--ui-shadow-xs);
}
body :is(.button.primary,.button.small,.pill.dark,.partner-button,.marketing-partner):hover,
.design-partners-page .pill.dark:hover {background:var(--ui-brand-hover);border-color:var(--ui-brand-hover)}
body :is(.button.secondary,.pill.outline,.partner-demo) {
  color:var(--ui-text);background:white;border-color:var(--ui-border);box-shadow:var(--ui-shadow-xs);
}
body :is(.button.secondary,.pill.outline,.partner-demo):hover {background:var(--ui-hover)}
body .hero-actions .button {font-size:16px;min-height:50px;padding:12px 18px}
body .hero-actions .secondary {font-size:15px;min-height:44px;padding:10px 16px;background:transparent;border-color:transparent;box-shadow:none}
body .hero-actions .secondary:hover {background:#f2f4f7}
body .button.small {font-size:14px;min-height:40px;padding:8px 12px}
body :is(.button,.pill,.partner-button,.marketing-partner,.partner-demo) svg {width:20px;height:20px;flex-shrink:0;pointer-events:none}
body :is(.button,.pill,.partner-button,.marketing-partner,.partner-demo):focus-visible {outline:2px solid var(--ui-brand);outline-offset:3px}
body :is(button,input,textarea,select):disabled {opacity:.5;cursor:not-allowed}
/* Button-border tab list: inset gray rail, raised white selected item. */
.screen-tabs {display:flex;width:max-content;max-width:calc(100% - 32px);margin:12px auto 20px;padding:4px;gap:4px;flex-wrap:wrap;justify-content:center;border-radius:10px;background:#f2f4f7;border:1px solid var(--ui-border-soft)}
.screen-tabs button {border:0;border-radius:6px;background:transparent;color:#475467;font:600 14px/20px 'Veto Sans',sans-serif;padding:10px 14px;min-height:40px;transition:background-color 100ms linear,box-shadow 100ms linear}
.screen-tabs button[aria-selected=true] {background:white;color:#344054;box-shadow:var(--ui-shadow-sm)}
.screen-tabs button:hover:not([aria-selected=true]) {background:#e9edf1;color:#344054}
.screen-tabs button:focus-visible {outline:2px solid var(--ui-brand);outline-offset:-2px}
/* Dropdown chrome; details/summary remains a native website navigation disclosure. */
.menu summary {border-radius:8px;min-width:40px;min-height:40px;color:var(--ui-text)}
.menu summary:hover,.menu[open] summary {background:#f2f4f7}
.menu nav {padding:6px;background:white;border:1px solid var(--ui-border-soft);border-radius:12px;gap:2px;box-shadow:0 12px 16px -4px rgb(16 24 40 / 8%),0 4px 6px -2px rgb(16 24 40 / 3%)}
.menu nav a {display:flex;align-items:center;min-height:40px;padding:8px 10px;border-radius:6px;color:var(--ui-text);font-size:14px;font-weight:600;line-height:20px}
.menu nav a:hover,.menu nav a:focus-visible {background:#f9fafb}
.menu nav a:focus-visible {outline:2px solid var(--ui-brand);outline-offset:-2px}
/* Input lg: visible labels, hints, validation and retained native autocomplete. */
body .inquiry-form .field label {display:block;font-size:14px;font-weight:500;line-height:20px;color:var(--ui-text);margin-bottom:6px}
body .inquiry-form .field :is(input,textarea,select) {width:100%;min-height:46px;margin:0;padding:10px 14px;background:white;color:#101828;border:1px solid var(--ui-border);border-radius:8px;box-shadow:var(--ui-shadow-xs);font-family:inherit;font-size:16px;font-weight:400;line-height:24px;transition:border-color 100ms linear,box-shadow 100ms linear}
body .inquiry-form .field :is(input,textarea,select)::placeholder {color:var(--ui-muted)}
body .inquiry-form .field :is(input,textarea,select):focus {border-color:var(--ui-brand);outline:2px solid var(--ui-brand);outline-offset:1px}
body .inquiry-form .field :is(input,textarea,select)[aria-invalid=true] {border-color:#fda29b}
body .inquiry-form .field :is(input,textarea,select)[aria-invalid=true]:focus {outline-color:var(--ui-error);border-color:var(--ui-error)}
body .inquiry-form .field-error {color:var(--ui-error);font-size:14px;line-height:20px}
body .inquiry-form .field-error:empty {display:none}
body .inquiry-form .field-error:not(:empty) {display:block;margin-top:6px}
body .inquiry-form .muted {color:var(--ui-muted);font-weight:400}
body .inquiry-form textarea {resize:vertical}
@media(max-width:800px) {
 body .button.small {font-size:12px;min-height:38px;padding:8px 10px}
 .screen-tabs {max-width:calc(100% - 20px);gap:2px}
 .screen-tabs button {font-size:12px;padding:8px 10px;min-height:40px}
}
@media(max-width:359px) {body .button.small {font-size:11px;padding:8px}.screen-tabs button {padding:8px;font-size:11px}}
@media(prefers-reduced-motion:reduce) {body :is(.button,.pill,.partner-button,.marketing-partner,.partner-demo),.screen-tabs button,body .inquiry-form .field :is(input,textarea,select) {transition:none}}