/* Shared action feedback. No header underline and no changes to app demos. */
:root {
  --ui-action-duration: 180ms; --ui-action-ease: cubic-bezier(.2,.7,.2,1);
  --ui-control-height: 44px; --ui-feature-action-height: 52px; --ui-header-action-height: 40px;
}
/* Shared sizes include borders and padding, regardless of a page's reset. */
.site-layout :is(.button, .studio-button, .ot-btn, .plan-select, .purchase-button, .retry-button, .inquiry-button, .doc-actions a, .policy-actions a, .account-security__actions button, .dialog-actions button, .payment-history-actions button, .payment-history-actions a, .payment-admin-actions button, .faq-results-meta button, .faq-contact > a, .contact-form button[type="submit"], .contact-gate a, .contact-gate button, .news-pagination button, .news-status button) {
  box-sizing: border-box; min-height: var(--ui-control-height); padding: 10px 20px;
  font: 500 14px/1.5 var(--ui-font); text-align: center;
}
.site-header .site-header__account :is(button, .site-header__signup) {
  box-sizing: border-box; min-height: var(--ui-header-action-height); height: var(--ui-header-action-height);
  font: 500 14px/1.5 var(--ui-font);
}
.site-layout :is(.product-hero .buttons, .product-final-cta .buttons, .about-hero__actions) > :is(.button, .studio-button),
.site-layout .ot-btn { min-height: var(--ui-feature-action-height); padding-block: 14px; }
.site-layout :is(.button, .studio-button, .ot-btn, .plan-select, .purchase-button, .retry-button, .inquiry-button, .doc-actions a, .policy-actions a, .account-security__actions button, .dialog-actions button, .payment-history-actions button, .payment-history-actions a, .payment-admin-actions button, .faq-results-meta button, .faq-contact > a, .contact-form button[type="submit"], .contact-gate a, .contact-gate button, .news-pagination button, .news-status button) {
  cursor: pointer;
  transition: color var(--ui-action-duration), background-color var(--ui-action-duration), border-color var(--ui-action-duration), box-shadow var(--ui-action-duration), transform var(--ui-action-duration) var(--ui-action-ease);
}
.site-layout :is(.button, .studio-button, .ot-btn, .plan-select, .retry-button, .inquiry-button, .doc-actions a, .policy-actions a, .account-security__actions button, .dialog-actions button, .payment-history-actions button, .payment-history-actions a, .payment-admin-actions button, .faq-results-meta button, .faq-contact > a, .contact-gate a, .contact-gate button, .news-pagination button, .news-status button):not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--ui-text);
  box-shadow: 0 3px 14px #0003, inset 0 1px 0 #ffffff18;
  transform: translateY(-1px);
}
.site-layout :is(.button, .studio-button, .ot-btn, .plan-select, .purchase-button, .retry-button, .inquiry-button, .doc-actions a, .policy-actions a, .account-security__actions button, .dialog-actions button, .payment-history-actions button, .faq-results-meta button, .faq-contact > a, .contact-form button[type="submit"]):not(:disabled):not([aria-disabled="true"]):active {
  transform: translateY(0); box-shadow: inset 0 2px 4px #0003;
}
.site-layout :is(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--ui-text); outline-offset: 4px; }
.site-layout :is(button, .button, .studio-button, .ot-btn):is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.site-layout button[aria-busy="true"] { cursor: progress; }
.site-layout :is(.button, .studio-button, .doc-actions a, .policy-actions a, .contact-gate a, .contact-gate button, .news-pagination button, .news-status button) { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.site-layout :is(.studio-button, .policy-actions a) :is(svg, span[aria-hidden="true"]),
.site-layout .product-detail__cta > i { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.site-layout :is(.product-link, .hero-inline-note, .capacity-row footer a, .account-shortcuts a, .faq-answer > a, .site-trust-footer__links a):hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* B3: only the icon compartment expands. Label and outer dimensions stay fixed. */
html body.site-layout :is(.button, .ot-btn).ui-download {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: var(--ui-feature-action-height); padding: 12px 64px 12px 24px; border: 1px solid var(--ui-border); border-radius: 999px;
  background: var(--ui-bg); color: var(--ui-text); overflow: hidden; line-height: 1.5; font-size: 14px; font-weight: 500;
}
.ui-download__label { position: relative; z-index: 1; pointer-events: none; }
.ui-download__icon { position: absolute; z-index: 0; top: 4px; bottom: 4px; right: 4px; width: 42px; border-radius: 999px; background: var(--ui-text); color: var(--ui-bg); transition: width .3s var(--ui-action-ease), top .3s var(--ui-action-ease), bottom .3s var(--ui-action-ease), right .3s var(--ui-action-ease); }
html body.site-layout .ui-download__icon svg { position: absolute; width: 21px; height: 21px; top: 50%; right: 10px; transform: translateY(-50%); fill: none; stroke: currentColor; stroke-width: 1.7; }
html body.site-layout :is(.button, .ot-btn).ui-download:is(:hover, :focus-visible):not([aria-disabled="true"]) { background: var(--ui-bg); color: var(--ui-bg); transform: none; box-shadow: none; }
.ui-download:is(:hover, :focus-visible):not([aria-disabled="true"]) .ui-download__icon { top: 0; bottom: 0; right: 0; width: 100%; }
html body.site-layout .ui-download:is(:hover, :focus-visible) .ui-download__icon svg { right: 14px; }
html body.site-layout .ui-download:active:not([aria-disabled="true"]) .ui-download__icon { background: #deddd6; }

/* T1: one moving selected surface, scoped to body navigation only. */
.site-layout .ui-tabs {
  box-sizing: border-box;
  position: relative; isolation: isolate; display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px;
  width: fit-content; max-width: 100%; padding: 4px; border: 1px solid var(--ui-line); border-radius: 12px; background: #0c0d0c;
}
.site-layout .ui-tabs::before {
  content: ""; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;
  width: var(--ui-tab-width, 0px); height: var(--ui-tab-height, 0px); transform: translate(var(--ui-tab-x, 0px), var(--ui-tab-y, 0px));
  background: #292a27; border-radius: 8px; box-shadow: inset 0 1px 0 #ffffff10; opacity: 0;
}
.site-layout .ui-tabs[data-ui-ready]::before { opacity: 1; }
.site-layout .ui-tabs[data-ui-animated]::before { transition: transform .24s var(--ui-action-ease), width .24s var(--ui-action-ease), height .24s var(--ui-action-ease); }
.site-layout .ui-tabs > :is(a, button) {
  box-sizing: border-box;
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; min-height: var(--ui-control-height); padding: 10px 18px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ui-muted); font: 500 14px/1.5 var(--ui-font); text-decoration: none; cursor: pointer; box-shadow: none; transform: none;
  transition: color .18s ease;
}
.site-layout .ui-tabs > :is(a, button):hover { color: var(--ui-text); }
.site-layout .ui-tabs > :is([aria-current="page"], [aria-selected="true"], [aria-pressed="true"]) { color: var(--ui-text); background: #292a27; border: 0; box-shadow: none; }
.site-layout .ui-tabs[data-ui-ready] > :is(a, button) { background: transparent; }
.site-layout .ui-tabs > :is(a, button):focus-visible { outline: 2px solid var(--ui-text); outline-offset: -2px; }
.site-layout .ui-tabs.capability-tabs { display: grid; width: 100%; align-content: start; }
.site-layout .ui-tabs.capability-tabs > button { display: grid; grid-template-columns: 28px minmax(0,1fr); min-height: 88px; text-align: left; padding: 14px 16px; justify-content: start; gap: 6px 12px; }
.site-layout .ui-tabs.capability-tabs > button small { font-size: 12px; color: var(--ui-muted); }
.site-layout .ui-tabs.capability-tabs > button b { font-size: 14px; }
/* Filters select visible results; they are not page-navigation tabs. */
.site-layout .ui-filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-block: 0 28px; }
.site-layout .ui-filters > button {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--ui-control-height); padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 999px;
  background: transparent; color: var(--ui-muted); font: 500 13px/1.5 var(--ui-font); cursor: pointer;
  transition: color var(--ui-action-duration), background-color var(--ui-action-duration), border-color var(--ui-action-duration);
}
.site-layout .ui-filters > button:hover { background: var(--ui-panel); color: var(--ui-text); }
.site-layout .ui-filters > button[aria-pressed="true"] { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-bg); }
.site-layout .ui-filter-check { flex: 0 0 12px; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; opacity: 0; transition: opacity var(--ui-action-duration); }
.site-layout .ui-filters > button[aria-pressed="true"] .ui-filter-check { opacity: 1; }
.site-layout .ui-filters > button b { color: inherit; opacity: .6; }

/* Forms keep the same feedback hierarchy as other actions. */
body.auth-locked.overhouse-public-home .auth-card :is(#authSubmit, #authEmailSend, #authEmailConfirm, #authEmailChange),
body.auth-locked.overhouse-public-home .house-social-login button {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body.auth-locked.overhouse-public-home .auth-card :is(#authSubmit, #authEmailSend, #authEmailConfirm):hover:not(:disabled) { background: #deddd6 !important; border-color: #deddd6 !important; }
body.auth-locked.overhouse-public-home .auth-card button:focus-visible { outline: 2px solid var(--ui-text) !important; outline-offset: 4px; }
body.auth-locked.overhouse-public-home .auth-card button:disabled { opacity: .45 !important; cursor: not-allowed; box-shadow: none !important; transform: none !important; }
.site-layout .contact-form button[type="submit"]:hover:not(:disabled) { background: #deddd6; border-color: #deddd6; }
.site-layout .faq-item summary { transition: color .18s ease, background-color .18s ease; }
.site-layout .faq-item summary:hover { background: #ffffff04; }
.site-layout .faq-item[open] > summary { color: var(--ui-text); }
.site-layout .addon-check { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.site-layout .addon-check svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 18; stroke-dashoffset: 18; transition: stroke-dashoffset var(--ui-action-duration); }
.site-layout .addon-toggle[aria-pressed="true"] .addon-check svg { stroke-dashoffset: 0; }

/* Shared login action for support pages. */
.site-layout .contact-gate [data-contact-login], .site-layout .inquiry-login .inquiry-button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 104px; min-height: var(--ui-control-height);
  padding: 10px 20px; border: 1px solid var(--ui-text); border-radius: 999px;
  background: var(--ui-text); color: var(--ui-bg); font: 500 14px/1.5 var(--ui-font); text-decoration: none;
}
.site-layout .contact-gate [data-contact-login]:hover { background: #deddd6; color: var(--ui-bg); }
.site-quick-help { transition: bottom var(--ui-action-duration) var(--ui-action-ease); }
.site-quick-help.is-footer-visible { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 72px); }
.site-layout .site-trust-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }

/* Only the guide chrome changes. The app canvas, scenario and product content do not. */
.site-layout .og-root {
  --og-ink: var(--ui-bg); --og-ink-2: var(--ui-panel); --og-line: var(--ui-line);
  --og-line-strong: var(--ui-border); --og-text: var(--ui-text); --og-muted: var(--ui-muted);
}
.site-layout .og-shell, .site-layout .og-bar, .site-layout .og-progress { background: var(--ui-panel); border-color: var(--ui-line); font-family: var(--ui-font); }
.site-layout :is(.og-bar, .og-progress, .og-tip) { --og-accent: var(--ui-text); --og-accent-2: var(--ui-soft); }
.site-layout .og-tip, .site-layout .og-tip[data-nub]::after { background: var(--ui-panel); border-color: var(--ui-line); }
.site-layout .og-tip { font-family: var(--ui-font); }
.site-layout .og-brand-mark { background: var(--ui-text); box-shadow: none; }
.site-layout .og-badge { border-color: var(--ui-border); background: var(--ui-raised); color: var(--ui-soft); }
.site-layout .og-tool { box-sizing: border-box; height: 36px; border-color: var(--ui-border); background: transparent; color: var(--ui-text); }
.site-layout .og-tool:hover { border-color: var(--ui-text); background: var(--ui-raised); }
.site-layout .og-btn { box-sizing: border-box; min-height: var(--ui-control-height); border-radius: 999px; background: transparent; border-color: var(--ui-border); color: var(--ui-text); box-shadow: none; }
.site-layout .og-btn--primary { background: var(--ui-text); border-color: var(--ui-text); color: var(--ui-bg); }
.site-layout .og-btn--primary:hover:not(:disabled) { background: #deddd6; border-color: #deddd6; color: var(--ui-bg); }
.site-layout .og-btn:focus-visible { outline-color: var(--ui-text); }

@media (max-width: 700px) {
  .site-header .site-header__account :is(button, .site-header__signup) { font-size: 13px; }
  .site-layout .ui-tabs { gap: 2px; }
  .site-layout .ui-tabs > :is(a, button) { padding: 10px 12px; font-size: 13px; }
  .site-layout .ui-tabs.capability-tabs > button { padding: 12px 10px; gap: 6px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-quick-help, .site-layout .ui-tabs::before, .site-layout .ui-download__icon,
  .site-layout :is(button, a, .addon-check, .addon-check svg, .ui-filter-check) { transition: none !important; }
  .site-layout :is(button, a):hover { transform: none !important; }
}