/* Universal Tag — per-domain feature toggles + live embed snippet.
   Shell (header/footer/menu/domain selector) comes from shared/app-chrome.css. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

.ut-page {
  font-family: "Mulish", system-ui, sans-serif;
  color: #33404F;
  background: linear-gradient(180deg, #F5F3FB 0%, #F1F6F6 100%);
}
.ut-page .app-shell { min-height: 100vh; display: flex; flex-direction: column; }
/* Match the suite: header/footer inner span the same 90% as the content. */
.app-shell .rm-header-inner,
.app-shell .rm-footer-inner { max-width: 90%; }

.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.ut-loading { max-width: 90%; margin: 0 auto; padding: 48px 32px; color: #8791A0; font-size: 15px; }

/* live region for copy/save announcements (visually hidden) */
.ut-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero */
.ut-hero-inner { max-width: 90%; margin: 0 auto; padding: 32px 32px 8px; }
.ut-title { font-family: "Poppins"; font-weight: 700; font-size: 32px; line-height: 1.05; letter-spacing: -0.5px; color: #16273F; margin: 0; }
.ut-url { font-family: "Mulish"; font-weight: 600; font-size: 15px; color: #2F6FE0; text-decoration: none; }
.ut-url:hover { color: #1E56C0; }

/* Main split */
.ut-main { flex: 1; width: 100%; }
.ut-grid { max-width: 90%; margin: 0 auto; padding: 24px 32px 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 26px; align-items: start; }

/* Left — features */
.ut-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ut-section-title { font-family: "Poppins"; font-weight: 700; font-size: 20px; color: #16273F; margin: 0; }
.ut-section-sub { font-size: 13.5px; color: #8791A0; margin: 3px 0 0; }
.ut-active-chip { display: inline-flex; align-items: center; gap: 8px; font-family: "Poppins"; font-weight: 700; font-size: 12.5px; color: #1F8A5B; background: #E7F7F1; border: 1px solid #C9EBDD; border-radius: 999px; padding: 6px 14px; }
.ut-active-dot { width: 7px; height: 7px; border-radius: 50%; background: #28B36B; }

.ut-cards { display: flex; flex-direction: column; gap: 12px; }
.ut-card { display: flex; align-items: center; gap: 15px; background: #fff; border: 1px solid #EAEDF3; border-radius: 16px; box-shadow: 0 2px 8px rgba(18,38,63,0.04); padding: 17px 20px; transition: border-color .15s ease; }
.ut-card.on { border-color: #F3D8D2; }
.ut-card-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #F2F4F8; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.ut-card.on .ut-card-icon { background: #FBE9E5; }
.ut-card-main { flex: 1; min-width: 0; }
.ut-card-name { font-family: "Poppins"; font-weight: 700; font-size: 15.5px; color: #16273F; }
.ut-card-desc { font-size: 13px; line-height: 1.5; color: #5B6675; margin-top: 2px; }

/* Toggle switch */
.ut-switch { flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px; border: none; cursor: pointer; padding: 0; position: relative; background: #D5DBE4; transition: background .18s ease; }
.ut-switch.on { background: #28B36B; }
.ut-switch:focus-visible { outline: 3px solid rgba(40,179,107,0.35); outline-offset: 2px; }
.ut-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left .18s ease; }
.ut-switch.on .ut-knob { left: 23px; }
.ut-switch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Right — embed code (sticky) */
.ut-right { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
.ut-code { background: #0E1B2A; border: 1px solid #0B1622; border-radius: 18px; box-shadow: 0 10px 30px rgba(11,22,34,0.28); overflow: hidden; }
.ut-code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #1C2E42; }
.ut-code-label { display: flex; align-items: center; gap: 9px; font-family: "Poppins"; font-weight: 700; font-size: 13.5px; color: #CFE0F2; }
.ut-copy { display: inline-flex; align-items: center; gap: 6px; font-family: "Poppins"; font-weight: 600; font-size: 12px; color: #CFE0F2; background: #1B2E42; border: 1px solid #29405A; border-radius: 8px; padding: 7px 12px; cursor: pointer; transition: background .13s ease; }
.ut-copy:hover { background: #243B54; }
.ut-copy:focus-visible { outline: 3px solid rgba(207,224,242,0.4); outline-offset: 2px; }
.ut-pre { margin: 0; padding: 20px; font-size: 12.6px; line-height: 1.7; color: #B7D2EC; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.ut-pre:focus-visible { outline: 2px solid #2F6FE0; outline-offset: -2px; }

/* Install note */
.ut-note { background: #fff; border: 1px solid #EAEDF3; border-radius: 16px; box-shadow: 0 4px 16px rgba(18,38,63,0.05); padding: 18px 20px; display: flex; gap: 11px; align-items: flex-start; }
.ut-note-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: #EAF1FC; display: flex; align-items: center; justify-content: center; }
.ut-note-title { font-family: "Poppins"; font-weight: 700; font-size: 14px; color: #16273F; }
.ut-note-body { font-size: 13px; line-height: 1.6; color: #5B6675; margin-top: 3px; }
.ut-note-body .mono { color: #16273F; }

/* Actions */
.ut-actions { display: flex; gap: 12px; }
.ut-save { flex: 1; font-family: "Poppins"; font-weight: 700; font-size: 14.5px; color: #fff; background: #E8402A; border: none; border-radius: 12px; padding: 13px; cursor: pointer; box-shadow: 0 6px 16px rgba(232,64,42,0.28); transition: background .13s ease; }
.ut-save:hover { background: #D5361F; }
.ut-save:focus-visible { outline: 3px solid rgba(232,64,42,0.4); outline-offset: 2px; }
.ut-email { font-family: "Poppins"; font-weight: 600; font-size: 14.5px; color: #16273F; background: #fff; border: 1px solid #E4E8EF; border-radius: 12px; padding: 13px 18px; cursor: pointer; transition: border-color .13s ease, color .13s ease; }
.ut-email:hover { border-color: #3C7CE0; color: #3C7CE0; }
.ut-email:focus-visible { outline: 3px solid rgba(60,124,224,0.3); outline-offset: 2px; }

@media (max-width: 980px) {
  .ut-grid { grid-template-columns: 1fr; }
  .ut-right { position: static; }
}
@media (max-width: 720px) {
  .ut-hero-inner, .ut-grid { padding-left: 18px; padding-right: 18px; }
}