#savio-prism .fg-stage {
  min-height: 960px;
  padding: 26px 12px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}
#savio-prism .fg-color-tools {
  width: 150px;
  max-width: 100%;
  padding-top: 65px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#savio-prism .fg-color-tools[hidden] {
  display: none;
}
#savio-prism .fg-color-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 620px) {
  #savio-prism .fg-color-tools {
    order: -1;
    width: 100%;
    padding-top: 0;
    align-items: center;
    gap: 6px;
  }
}
#savio-prism .fg-phone {
  --fg-accent: #176663;
  --fg-glow: #c4eef3;
  --fg-glow2: #cedcfc;
  --fg-bg: #fff;
  --fg-ink: #172c31;
  --fg-muted: #566d72;
  --fg-panel: #f4f8fa;
  --fg-glass: rgba(248, 252, 255, 0.9);
  --fg-line: rgba(52, 88, 100, 0.16);
  --fg-shadow: rgba(43, 82, 105, 0.14);
  --fg-soft: #e5f3f1;
  --fg-action: #183f45;
  --fg-on-action: #fff;
  --fg-good: #1e8e3e;
  --fg-bad: #ad3328;
  --fg-radius: 28px;
  box-sizing: border-box;
  width: 100%;
  max-width: 406px;
  min-height: 785px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-radius: 38px;
  background: var(--fg-bg);
  color: var(--fg-ink);
  box-shadow:
    0 22px 70px var(--fg-shadow),
    0 0 0 1px var(--fg-line);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: start;
}
#savio-prism .fg-phone *,
#savio-prism .fg-phone *:before,
#savio-prism .fg-phone *:after {
  box-sizing: border-box;
}
#savio-prism .fg-phone[data-theme='dark'] {
  --fg-bg: #080a0d;
  --fg-ink: #f0f4f6;
  --fg-muted: #a3b2b9;
  --fg-panel: #171d24;
  --fg-glass: rgba(22, 31, 38, 0.92);
  --fg-line: rgba(215, 239, 249, 0.14);
  --fg-shadow: rgba(0, 0, 0, 0.4);
  --fg-soft: #213a3b;
  --fg-action: #c9f2f2;
  --fg-on-action: #092a2b;
  --fg-good: #78d896;
  --fg-bad: #ffb3a8;
  --fg-accent: #8de1df;
  --fg-glow: #183c47;
  --fg-glow2: #24293d;
  color-scheme: dark;
}
#savio-prism .fg-phone[data-design='Prism'] {
  --fg-accent: #9f5500;
  --fg-soft: #fef4e8;
  --fg-action: #f58300;
  --fg-on-action: #000000;
  --fg-glow: #feeedb;
  --fg-glow2: #fef4e8;
  --fg-action-sheen: rgba(255, 255, 255, 0.08);
}
#savio-prism .fg-phone[data-design='Prism'][data-theme='dark'] {
  --fg-accent: #f58300;
  --fg-soft: #3f2f1e;
  --fg-action: #f58300;
  --fg-on-action: #000000;
  --fg-glow: #3f260a;
  --fg-glow2: #2e1d0b;
}
#savio-prism .fg-phone:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 5% 8%, var(--fg-glow) 0, transparent 45%),
    radial-gradient(ellipse at 97% 44%, var(--fg-glow2) 0, transparent 52%);
  opacity: 0.84;
  pointer-events: none;
}
#savio-prism .fg-phone p,
#savio-prism .fg-phone h1,
#savio-prism .fg-phone h2,
#savio-prism .fg-phone h3 {
  margin: 0;
}
#savio-prism .fg-phone h1 {
  font-size: 31px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -1.3px;
}
#savio-prism .fg-phone h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.7px;
}
#savio-prism .fg-phone h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
}
#savio-prism .fg-phone button,
#savio-prism .fg-phone input,
#savio-prism .fg-phone select,
#savio-prism .fg-phone textarea {
  font: inherit;
  color: inherit;
}
#savio-prism .fg-phone button {
  min-height: 44px;
  border: 0;
  background: none;
  touch-action: manipulation;
}
#savio-prism .fg-phone button:disabled {
  opacity: 0.55;
}
#savio-prism .fg-phone svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
#savio-prism .fg-phone i[data-lucide] {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
#savio-prism .fg-screen {
  min-height: 785px;
  display: flex;
  flex-direction: column;
  padding: 0 21px 13px;
  position: relative;
}
#savio-prism .fg-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 5px 4px;
  font-size: 12px;
  font-weight: 500;
  direction: ltr;
}
#savio-prism .fg-status span:last-child {
  display: flex;
  gap: 5px;
  align-items: center;
}
#savio-prism .fg-status svg {
  width: 14px;
  height: 14px;
}
#savio-prism .fg-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin: 14px 0 22px;
}
#savio-prism .fg-brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  direction: ltr;
  font-size: 22px;
  letter-spacing: -0.6px;
  font-weight: 500;
}
#savio-prism .fg-brand-logo {
  display: block;
  width: 31px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}
#savio-prism .fg-brand-name {
  text-align: center;
}
#savio-prism .fg-icon-button {
  width: 44px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--fg-glass) !important;
  border: 1px solid var(--fg-line) !important;
}
#savio-prism .fg-tag {
  font-size: 11px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-accent);
}
#savio-prism .fg-muted {
  color: var(--fg-muted);
}
#savio-prism .fg-small {
  font-size: 12px;
}
#savio-prism .fg-glass {
  position: relative;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  border-radius: var(--fg-radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 24px var(--fg-shadow);
  backdrop-filter: blur(24px) saturate(1.5);
}
#savio-prism .fg-glass:before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.14),
    transparent 40%,
    rgba(255, 255, 255, 0.035)
  );
  z-index: 0;
}
#savio-prism .fg-primary {
  background: var(--fg-action) !important;
  color: var(--fg-on-action) !important;
  width: 100%;
  border-radius: 18px;
  padding: 13px 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 500 !important;
}
#savio-prism .fg-secondary {
  background: var(--fg-glass) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: 18px;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#savio-prism .fg-link {
  color: var(--fg-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#savio-prism .fg-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  min-height: 44px;
  padding: 9px 15px;
  border-radius: 20px;
  border: 1px solid var(--fg-line) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), transparent 65%), var(--fg-glass) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 3px var(--fg-shadow),
    0 4px 12px var(--fg-shadow);
  backdrop-filter: blur(24px) saturate(1.3);
}
#savio-prism .fg-phone[dir='rtl'] .fg-back svg {
  transform: scaleX(-1);
}
#savio-prism .fg-welcome {
  padding: 11px 3px 24px;
}
#savio-prism .fg-login-hero {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 0 12px;
}
#savio-prism .fg-login-hero .fg-tag {
  margin-top: 0;
}
#savio-prism .fg-login-visual {
  position: relative;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#savio-prism .fg-orb {
  width: 106px;
  height: 106px;
  border-radius: 35%;
  display: grid;
  place-items: center;
  transform: rotate(-12deg);
  background: linear-gradient(145deg, var(--fg-glass), var(--fg-glow));
  border: 1px solid var(--fg-line);
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.65),
    inset -3px -4px 5px var(--fg-shadow),
    0 18px 30px var(--fg-shadow);
}
#savio-prism .fg-orb svg {
  width: 36px;
  height: 36px;
  color: var(--fg-accent);
  transform: rotate(12deg);
}
#savio-prism .fg-float {
  position: absolute;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  box-shadow:
    0 6px 20px var(--fg-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 12px;
  display: flex;
  gap: 7px;
  align-items: center;
  white-space: nowrap;
}
#savio-prism .fg-float-a {
  inset-inline-start: 2px;
  top: 15px;
  transform: rotate(-7deg);
}
#savio-prism .fg-float-b {
  inset-inline-end: 0;
  bottom: 12px;
  transform: rotate(6deg);
}
#savio-prism .fg-login-form {
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#savio-prism .fg-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: start;
}
#savio-prism .fg-field > span {
  font-size: 12px;
  font-weight: 500;
}
#savio-prism .fg-field input,
#savio-prism .fg-field select,
#savio-prism .fg-field textarea {
  min-height: 48px;
  width: 100%;
  border: 1px solid var(--fg-line);
  border-radius: 14px;
  background: var(--fg-panel);
  padding: 10px 12px;
  font-size: 16px;
  box-shadow: inset 0 1px 3px var(--fg-shadow);
}
#savio-prism .fg-field input::placeholder,
#savio-prism .fg-composer input::placeholder {
  color: var(--fg-muted);
  opacity: 1;
}
#savio-prism .fg-field select {
  appearance: auto;
}
#savio-prism .fg-field input[type='checkbox'] {
  width: 20px;
  min-height: 20px;
  padding: 0;
  box-shadow: none;
}
#savio-prism .fg-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
#savio-prism .fg-login-foot {
  display: flex;
  justify-content: center;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0;
  font-size: 12px;
}
#savio-prism .fg-login-foot button {
  font-size: 12px;
  padding: 0 4px;
}
#savio-prism .fg-preview-line {
  font-size: 11px;
  color: var(--fg-muted);
  text-align: center;
  padding: 15px 0 2px;
  line-height: 1.6;
  margin-top: auto;
}
#savio-prism .fg-home-line {
  height: 4px;
  width: 90px;
  background: var(--fg-ink);
  opacity: 0.25;
  border-radius: 20px;
  margin: 9px auto 0;
}
#savio-prism .fg-pane {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  padding-bottom: 18px;
  min-width: 0;
  min-height: var(--fg-pane-floor, 0px);
}
#savio-prism .fg-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  grid-area: 1/1;
}
#savio-prism .fg-pane > .fg-content {
  align-self: start;
}
#savio-prism .fg-measure {
  position: absolute;
  inset: 0 0 auto;
  visibility: hidden;
  pointer-events: none;
}
#savio-prism .fg-outgoing {
  position: absolute;
  inset: 0 0 18px;
  pointer-events: none;
  user-select: none;
  z-index: 2;
  overflow: hidden;
}
#savio-prism .fg-history-results,
#savio-prism .fg-ai-content,
#savio-prism .fg-search-results {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}
#savio-prism .fg-history-results > .fg-outgoing,
#savio-prism .fg-ai-content > .fg-outgoing,
#savio-prism .fg-search-results > .fg-outgoing {
  inset: 0;
}
#savio-prism .fg-heading {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
#savio-prism .fg-subtitle {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.6;
}
#savio-prism .fg-mode {
  position: relative;
  isolation: isolate;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--fg-line);
  background: var(--fg-glass);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
#savio-prism .fg-mode button {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 5px;
  border-radius: 16px;
  font-size: 12px;
}
#savio-prism .fg-mode button[aria-pressed='true'] {
  background: transparent;
  color: var(--fg-on-action);
}
#savio-prism .fg-segment-glass {
  position: absolute;
  left: 0;
  top: 3px;
  z-index: 0;
  border-radius: 16px;
  background:
    linear-gradient(120deg, var(--fg-action-sheen, transparent), transparent 70%), var(--fg-action);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    0 2px 6px var(--fg-shadow);
  pointer-events: none;
  will-change: transform;
}
#savio-prism .fg-mode button svg {
  width: 17px;
  height: 17px;
}
#savio-prism .fg-scan-stage {
  min-height: 217px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 17px;
  border-radius: 32px;
}
#savio-prism .fg-target {
  width: 164px;
  height: 92px;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 17px;
  border: 1px solid var(--fg-line);
  background: linear-gradient(130deg, rgba(255, 255, 255, 0.05), var(--fg-soft));
  box-shadow: inset 0 0 25px var(--fg-shadow);
}
#savio-prism .fg-target:before,
#savio-prism .fg-target:after {
  content: '';
  position: absolute;
  width: 32px;
  height: 28px;
  border: 2px solid var(--fg-accent);
}
#savio-prism .fg-target:before {
  top: -5px;
  inset-inline-start: -5px;
  border-inline-end: 0;
  border-bottom: 0;
  border-start-start-radius: 11px;
}
#savio-prism .fg-target:after {
  bottom: -5px;
  inset-inline-end: -5px;
  border-inline-start: 0;
  border-top: 0;
  border-end-end-radius: 11px;
}
#savio-prism .fg-bars {
  width: 110px;
  height: 46px;
  opacity: 0.75;
  color: var(--fg-ink);
  background: repeating-linear-gradient(
    90deg,
    currentColor 0 2px,
    transparent 2px 6px,
    currentColor 6px 7px,
    transparent 7px 12px,
    currentColor 12px 15px,
    transparent 15px 19px
  );
}
#savio-prism .fg-scan-line {
  width: 190px;
  height: 1px;
  background: var(--fg-accent);
  position: absolute;
  top: 50%;
  box-shadow: 0 0 9px var(--fg-accent);
  opacity: 0.75;
}
#savio-prism .fg-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#savio-prism .fg-section-label {
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#savio-prism .fg-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#savio-prism .fg-product-row {
  width: 100%;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: start;
  background: var(--fg-glass) !important;
  border: 1px solid var(--fg-line) !important;
  border-radius: 21px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
#savio-prism .fg-thumb {
  width: 46px;
  height: 51px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--fg-soft);
  color: var(--fg-accent);
  border: 1px solid var(--fg-line);
}
#savio-prism .fg-thumb svg {
  width: 25px;
  height: 25px;
}
#savio-prism .fg-product-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#savio-prism .fg-product-text > span:first-child {
  font-size: 13px;
  font-weight: 500;
}
#savio-prism .fg-product-text > span:last-child {
  font-size: 11px;
  color: var(--fg-muted);
}
#savio-prism .fg-score-small {
  font-size: 18px;
  font-weight: 500;
  color: var(--fg-good);
  min-width: 37px;
  text-align: center;
}
#savio-prism .fg-bottom {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  border-radius: 23px;
  padding: 3px 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 7px 22px var(--fg-shadow);
  margin-top: auto;
  backdrop-filter: blur(30px) saturate(1.25);
}
#savio-prism .fg-bottom button {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 52px;
  min-width: 0;
  font-size: 11px;
  border-radius: 19px;
  padding: 3px 1px;
  color: var(--fg-muted);
}
#savio-prism .fg-bottom button[aria-current='page'] {
  background: transparent;
  color: var(--fg-accent);
}
#savio-prism .fg-nav-glass {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 3px;
  height: 52px;
  border-radius: 19px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 62%), var(--fg-soft);
  border: 1px solid var(--fg-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 3px var(--fg-shadow),
    0 2px 7px var(--fg-shadow);
  backdrop-filter: blur(20px) saturate(1.2);
  transform-origin: center;
}
#savio-prism .fg-bottom svg {
  width: 19px;
  height: 19px;
}
#savio-prism .fg-settings-group {
  padding: 17px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#savio-prism .fg-settings-group:has(.fg-language[open]) {
  z-index: 5;
}
#savio-prism .fg-language-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
#savio-prism .fg-language-field:has(.fg-language[open]) {
  z-index: 6;
}
#savio-prism .fg-language-field input[type='hidden'] {
  display: none;
}
#savio-prism .fg-language-field > span {
  font-size: 12px;
  font-weight: 500;
}
#savio-prism .fg-language {
  position: relative;
}
#savio-prism .fg-language summary {
  list-style: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 16px;
  border: 1px solid var(--fg-line);
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent), var(--fg-glass);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 3px 8px var(--fg-shadow);
}
#savio-prism .fg-language summary::-webkit-details-marker {
  display: none;
}
#savio-prism .fg-language summary svg {
  width: 16px;
  height: 16px;
  color: var(--fg-muted);
}
#savio-prism .fg-language[open] summary svg {
  transform: rotate(180deg);
}
#savio-prism .fg-language-menu {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px;
  border-radius: 20px;
  border: 1px solid var(--fg-line);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 65%), var(--fg-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 12px 30px var(--fg-shadow);
  backdrop-filter: blur(30px) saturate(1.3);
  transform-origin: top center;
}
#savio-prism .fg-language-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 14px;
  text-align: start;
  background: transparent;
}
#savio-prism .fg-language-menu button[aria-pressed='true'] {
  background: var(--fg-soft);
  color: var(--fg-accent);
}
#savio-prism .fg-language-menu button svg {
  width: 17px;
  height: 17px;
}
#savio-prism .fg-language[data-language='activity'] .fg-language-menu {
  position: relative;
  top: auto;
  inset-inline: auto;
  margin-top: 6px;
}
#savio-prism .fg-option-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#savio-prism .fg-option-label {
  font-size: 13px;
  font-weight: 500;
}
#savio-prism .fg-option-help {
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted);
}
#savio-prism .fg-preference-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#savio-prism .fg-paywall-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 15, 22, 0.36);
  backdrop-filter: blur(8px) saturate(0.9);
}
#savio-prism .fg-paywall {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 370px;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--fg-line);
  border-radius: 30px;
  background: linear-gradient(145deg, var(--fg-soft), transparent 58%), var(--fg-panel);
  color: var(--fg-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 18px 50px var(--fg-shadow);
}
#savio-prism .fg-paywall-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
#savio-prism .fg-premium-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--fg-glass);
  color: var(--fg-accent);
  border: 1px solid var(--fg-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 5px 16px var(--fg-shadow);
}
#savio-prism .fg-premium-mark svg {
  width: 24px;
  height: 24px;
}
#savio-prism .fg-paywall-copy {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
#savio-prism .fg-premium-benefits {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 13px;
}
#savio-prism .fg-premium-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
#savio-prism .fg-premium-benefits svg {
  color: var(--fg-accent);
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
#savio-prism .fg-paywall-note {
  text-align: center;
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.6;
}
#savio-prism .fg-settings-title {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}

/* Production integration. Same Prism tokens, now with the live PWA nodes. */
html[data-prism-theme='light'] {
  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-sunk: #f4f8fa;
  --border: rgba(52, 88, 100, 0.16);
  --border-strong: #b6c7ce;
  --text: #172c31;
  --text-muted: #566d72;
  --text-faint: #566d72;
  --accent: #f58300;
  --accent-ink: #9f5500;
  --accent-tint: #fef4e8;
  --accent-border: #f4d0a7;
  --on-accent: #000;
  --danger: #ad3328;
  --glass-bg: rgba(248, 252, 255, 0.9);
  --glass-bg-strong: rgba(248, 252, 255, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.7);
  --glass-line: rgba(52, 88, 100, 0.16);
  --glass-hi: rgba(255, 255, 255, 0.95);
  --glass-shade: 0 10px 25px rgba(43, 82, 105, 0.14);
  --blob-1: #feeedb;
  --blob-2: #fef4e8;
  --blob-3: #feeedb;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}
html[data-prism-theme='dark'] {
  --bg: #080a0d;
  --surface: #171d24;
  --surface-sunk: #171d24;
  --border: rgba(215, 239, 249, 0.14);
  --border-strong: #50616e;
  --text: #f0f4f6;
  --text-muted: #a3b2b9;
  --text-faint: #a3b2b9;
  --accent: #f58300;
  --accent-ink: #f58300;
  --accent-tint: #3f2f1e;
  --accent-border: #61451f;
  --on-accent: #000;
  --danger: #ffb3a8;
  --glass-bg: rgba(22, 31, 38, 0.92);
  --glass-bg-strong: rgba(22, 31, 38, 0.96);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-line: rgba(215, 239, 249, 0.14);
  --glass-hi: rgba(255, 255, 255, 0.2);
  --glass-shade: 0 12px 32px rgba(0, 0, 0, 0.4);
  --blob-1: #3f260a;
  --blob-2: #2e1d0b;
  --blob-3: #3f260a;
  --spring: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
html,
body {
  height: auto;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
}
body {
  background: var(--bg);
  color: var(--text);
}
#savio-prism {
  padding: 18px 10px;
  min-height: 100dvh;
}
#savio-prism .app.fg-phone {
  max-width: 406px;
  width: 100%;
  height: auto;
  min-height: calc(100dvh - 36px);
  padding: 24px 18px 12px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-radius: 38px;
}
#savio-prism .prism-header {
  flex: none;
  min-height: 40px;
}
#savio-prism .view {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: none;
  background: transparent;
}
#savio-prism .view.is-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 18px;
}
#savio-prism .topbar[hidden],
#savio-prism [hidden] {
  display: none !important;
}
#savio-prism .prism-panes {
  display: grid;
  position: relative;
  flex: 1;
  min-height: 540px;
  padding-bottom: 80px;
}
#savio-prism .prism-pane {
  grid-area: 1/1;
  align-self: start;
  width: 100%;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 12px;
}
#savio-prism .prism-outgoing {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
#savio-prism .prism-scan-chrome,
#savio-prism .prism-product-chrome,
#savio-prism .prism-product-facts,
#savio-prism .prism-settings-chrome,
#savio-prism .prism-ai-chrome {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
#savio-prism .prism-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 36px), 370px);
  bottom: 10px;
  margin-top: auto;
  flex: none;
  z-index: 15;
}
#savio-prism .cam {
  position: relative;
  inset: auto;
  flex: none;
  height: clamp(300px, 42dvh, 360px);
  width: 100%;
  min-height: 0;
  border-radius: 28px;
  border: 1px solid var(--fg-line);
  margin: 0;
}
#savio-prism .cam__video {
  border-radius: 28px;
}
#savio-prism .cam__frame {
  /* Large, responsive barcode guide, centered even on narrow iPhones. */
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 36px);
  height: 156px;
}
#savio-prism .cam__off {
  padding: 15px;
  gap: 10px;
  border-radius: 28px;
}
#savio-prism .cam__off-title {
  font-size: 16px;
}
#savio-prism .cam__off-text {
  font-size: 12px;
}
#savio-prism .prism-manual {
  padding: 14px;
  border-radius: 22px;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
}
#savio-prism .result {
  display: flex;
  margin: 0;
  padding: 14px;
  border-radius: 23px;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  min-height: 78px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#savio-prism .stage {
  width: 100%;
  min-height: 300px;
  flex: none;
  margin: 0;
  padding: 0;
  background: none;
  overflow: visible;
}
#savio-prism .chat {
  padding: 0;
  overflow: visible;
  max-height: none;
  height: auto;
  min-height: 220px;
  gap: 13px;
}
#savio-prism .msg__bubble,
#savio-prism .bubble {
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  border-radius: 23px;
  padding: 15px 17px;
  font-size: 13px;
  color: var(--fg-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#savio-prism .msg--me .msg__bubble,
#savio-prism .msg--me .bubble {
  background: var(--fg-action);
  color: var(--fg-on-action);
  border: 0;
  border-end-end-radius: 6px;
}
#savio-prism .composer {
  margin: 12px 0 0;
  padding: 0;
  gap: 8px;
}
#savio-prism .composer__field {
  border-radius: 25px;
  padding: 6px 7px 6px 13px;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 5px 16px var(--fg-shadow);
}
#savio-prism .composer__input {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  min-height: 38px;
  color: var(--fg-ink);
  font-size: 16px;
}
#savio-prism .composer__send,
#savio-prism .composer__voice {
  border-radius: 18px;
  background: var(--fg-action);
  color: var(--fg-on-action);
}
#savio-prism .voice {
  padding: 20px 0;
  gap: 18px;
  min-height: 350px;
}
#savio-prism .stage__caption,
#savio-prism .stage__said {
  white-space: pre-wrap;
  overflow: visible;
  max-height: none;
  display: block;
  font-size: 16px;
}
#savio-prism .stage__caption:empty::before {
  content: none;
}
#savio-prism .orb__core {
  color: var(--fg-accent);
}
#savio-prism .orb__ring {
  border-color: var(--fg-line);
}
#savio-prism .prism-inline-sheet {
  position: relative;
  inset: auto;
  z-index: auto;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: block;
  background: transparent;
  transform: none;
}
#savio-prism .prism-inline-sheet > .sheet__scrim,
#savio-prism .prism-inline-sheet .sheet__grab,
#savio-prism .prism-inline-sheet > .sheet__panel > .sheet__head {
  display: none;
}
#savio-prism .prism-inline-sheet > .sheet__panel {
  position: relative;
  inset: auto;
  transform: none !important;
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  border: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  transition: none;
  display: block;
}
#savio-prism .prism-inline-sheet .sheet__body {
  padding: 0;
  max-height: none;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#savio-prism .detail__hero {
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  padding: 21px;
  border-radius: 28px;
}
#savio-prism .detail__score {
  justify-content: center;
  margin: 0;
  padding: 10px;
}
#savio-prism .detail__points li,
#savio-prism .detail__profile {
  border-radius: 18px;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
}
#savio-prism .detail__source {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--fg-muted);
}
#savio-prism .group {
  padding: 17px;
  border-radius: 24px;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  margin: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#savio-prism .choice,
#savio-prism .list__row,
#savio-prism .btn {
  border-radius: 16px;
  font-weight: 500;
}
#savio-prism .choice {
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
}
#savio-prism .group__title {
  font-weight: 500;
}
/* Settings keeps its own spacing after the phone-wide heading/paragraph reset. */
#savio-prism .fg-phone #sheet-settings .sheet__body {
  gap: 24px;
}
#savio-prism .fg-phone #sheet-settings .group {
  padding: 20px;
}
#savio-prism .fg-phone #sheet-settings .group__title {
  margin-block: 0 14px;
  margin-inline: 2px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
}
#savio-prism .fg-phone #sheet-settings .group__note {
  margin-block: 16px 0;
  margin-inline: 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
}
#savio-prism .fg-phone #sheet-settings .group__note--top {
  margin-block: 0 16px;
}
#savio-prism .fg-phone #sheet-settings .group__note:empty {
  margin: 0;
}
#savio-prism .fg-phone #sheet-settings .list__row {
  min-height: 52px;
  padding: 16px;
}
#savio-prism .fg-phone #sheet-settings .list > .list__row {
  border-radius: 0;
}
#savio-prism .fg-phone #sheet-settings .list > .list__row + .list__row,
#savio-prism .fg-phone #sheet-settings .choices--list .choice + .choice {
  border-block-start: 1px solid var(--fg-line);
}
#savio-prism .fg-phone #sheet-settings .list__row--danger {
  color: var(--fg-bad);
}
#savio-prism .ob__bg,
#savio-prism .ob-wordmark {
  display: none;
}
#savio-prism .ob__top {
  position: relative;
  inset: auto;
  padding: 0;
  flex: none;
}
#savio-prism .ob__stage {
  position: relative;
  inset: auto;
  flex: none;
  min-height: 0;
  padding: 0;
  overflow: visible;
}
#savio-prism .ob-page {
  position: relative;
  inset: auto;
  width: 100%;
  max-height: none;
  overflow: visible;
  padding: 0;
  gap: 18px;
}
#savio-prism .ob-page.is-leaving {
  position: absolute;
  inset: 0;
}
#savio-prism .ob__foot {
  position: relative;
  inset: auto;
  padding: 0;
  flex: none;
  gap: 10px;
  background: none;
}
#savio-prism .ob__cta {
  width: 100%;
  min-height: 48px;
  border-radius: 18px;
  font-weight: 500;
  color: var(--fg-on-action);
  background: var(--fg-action);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 9px var(--fg-shadow);
}
#savio-prism .ob-account {
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  padding: 17px;
  border-radius: 28px;
  gap: 13px;
}
#savio-prism .ob-form--scroll {
  overflow: visible;
  max-height: none;
  flex: none;
}
#savio-prism .ob-field,
#savio-prism .ob-account__field {
  border-radius: 16px;
  background: var(--fg-panel);
}
#savio-prism .ob-account__tabs {
  position: relative;
  isolation: isolate;
  padding: 3px;
  gap: 2px;
  display: flex;
}
#savio-prism .ob-account__tab {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 500;
  min-width: 0;
  flex: 1;
}
#savio-prism .ob-account__tab[aria-pressed='true'] {
  color: var(--fg-on-action);
}
#savio-prism .ob-google {
  border-radius: 18px;
  min-height: 48px;
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
}
#savio-prism .ob-head {
  margin: 0;
  padding: 0;
}
#savio-prism .ob-title {
  font-size: 25px;
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: -0.7px;
}
#savio-prism .ob-choices,
#savio-prism .ob-chips,
#savio-prism .ob-groups {
  overflow: visible;
  max-height: none;
}
#savio-prism .ob-note {
  font-size: 12px;
}
/* The calorie chart is not an icon: reserve its full space above the facts. */
#savio-prism .fg-phone .ob-kcal__ring {
  width: 190px;
  height: 190px;
}
#savio-prism .prism-premium {
  max-width: 360px;
  width: calc(100% - 32px);
  padding: 24px;
  background: var(--fg-panel);
  color: var(--fg-ink);
  border: 1px solid var(--fg-line);
  border-radius: 30px;
  box-shadow: 0 20px 60px var(--fg-shadow);
  margin: auto;
}
#savio-prism .prism-premium:not([open]) {
  display: none;
}
#savio-prism .prism-premium::backdrop {
  background: rgba(8, 15, 22, 0.36);
  backdrop-filter: blur(8px);
}
#savio-prism .prism-profile-form section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#savio-prism .prism-profile-form .fg-language[data-picker='activity'] .fg-language-menu {
  position: relative;
  inset: auto;
  margin-top: 6px;
}
#savio-prism button,
#savio-prism summary {
  transition:
    filter 250ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 250ms cubic-bezier(0.22, 1, 0.36, 1);
}
#savio-prism button:active,
#savio-prism summary:active {
  filter: brightness(0.97);
}
@media (max-width: 450px) {
  #savio-prism {
    padding: 0;
  }
  #savio-prism .app.fg-phone {
    max-width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    padding-top: max(20px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  #savio-prism .prism-nav {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}
@media (prefers-reduced-motion: reduce) {
  #savio-prism *,
  #savio-prism *::before,
  #savio-prism *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

#savio-prism .fg-checkbox {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  font-size: 14px;
  cursor: pointer;
}
#savio-prism .fg-checkbox input {
  flex: none;
  width: 28px;
  height: 28px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--fg-accent);
}
#savio-prism .fg-info {
  background: var(--fg-soft);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-ink);
}
#savio-prism .fg-error {
  color: var(--fg-bad);
  font-size: 12px;
}
#savio-prism .fg-profile-hero {
  padding: 21px;
  display: flex;
  gap: 14px;
  align-items: center;
}
#savio-prism .fg-avatar {
  width: 59px;
  height: 59px;
  border-radius: 50%;
  background: var(--fg-soft);
  color: var(--fg-accent);
  display: grid;
  place-items: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
#savio-prism .fg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#savio-prism .fg-profile-form {
  display: flex;
  flex-direction: column;
  gap: 17px;
}
#savio-prism .fg-chip-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
#savio-prism .fg-chip {
  border: 1px solid var(--fg-line) !important;
  border-radius: 13px;
  padding: 7px 11px;
  font-size: 12px !important;
  background: var(--fg-glass) !important;
}
#savio-prism .fg-chip[aria-pressed='true'] {
  background: var(--fg-action) !important;
  color: var(--fg-on-action) !important;
}
#savio-prism .fg-calorie {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
}
#savio-prism .fg-calorie > div:first-child {
  width: 49px;
  height: 49px;
  border-radius: 16px;
  background: var(--fg-soft);
  display: grid;
  place-items: center;
  color: var(--fg-accent);
}
#savio-prism .fg-calorie strong {
  font-size: 26px;
  font-weight: 500;
}
#savio-prism .fg-detail-hero {
  padding: 23px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
#savio-prism .fg-detail-hero .fg-thumb {
  width: 64px;
  height: 70px;
  border-radius: 22px;
}
#savio-prism .fg-big-score {
  width: 103px;
  height: 103px;
  border: 5px solid var(--fg-good);
  background: var(--fg-panel);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--fg-good);
  box-shadow: 0 8px 20px var(--fg-shadow);
}
#savio-prism .fg-big-score strong {
  font-weight: 500;
  font-size: 37px;
  line-height: 1.1;
  letter-spacing: -1px;
}
#savio-prism .fg-big-score span {
  font-size: 11px;
  color: var(--fg-muted);
}
#savio-prism .fg-detail-facts {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
}
#savio-prism .fg-nutrient {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--fg-line);
  font-size: 13px;
}
#savio-prism .fg-nutrient:last-child {
  border-bottom: 0;
}
#savio-prism .fg-nutrient span:last-child {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#savio-prism .fg-pair-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#savio-prism .fg-chat-context {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 20px;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  font-size: 12px;
}
#savio-prism .fg-chat-context svg {
  color: var(--fg-accent);
}
#savio-prism .fg-chat-log {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 145px;
}
#savio-prism .fg-bubble {
  padding: 15px 17px;
  border-radius: 23px;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  font-size: 13px;
  max-width: 93%;
  align-self: flex-start;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#savio-prism .fg-bubble.fg-me {
  align-self: flex-end;
  background: var(--fg-action);
  color: var(--fg-on-action);
  border: 0;
  border-end-end-radius: 6px;
}
#savio-prism .fg-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
#savio-prism .fg-composer {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px 6px 13px;
  border-radius: 25px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 65%), var(--fg-glass);
  border: 1px solid var(--fg-line);
  margin-top: auto;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 5px 16px var(--fg-shadow);
  backdrop-filter: blur(24px) saturate(1.3);
}
#savio-prism .fg-composer:focus-within {
  outline: 2px solid var(--fg-accent);
  outline-offset: -2px;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    0 5px 18px var(--fg-shadow);
}
#savio-prism .fg-composer input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 2px;
  background: transparent;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  outline: none;
  font-size: 16px;
}
#savio-prism .fg-composer button {
  width: 44px;
  flex-shrink: 0;
  background: var(--fg-action);
  color: var(--fg-on-action);
  border-radius: 16px;
  display: grid;
  place-items: center;
}
#savio-prism .fg-voice-space {
  padding: 32px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 19px;
}
#savio-prism .fg-voice-orb {
  border-radius: 50%;
  width: 126px;
  min-height: 126px !important;
  display: grid;
  place-items: center;
  background: radial-gradient(
    circle at 28% 22%,
    var(--fg-glass),
    var(--fg-glow) 63%,
    var(--fg-glow2)
  ) !important;
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.6),
    inset 0 -7px 22px var(--fg-shadow),
    0 17px 40px var(--fg-shadow);
  border: 1px solid var(--fg-line) !important;
  color: var(--fg-accent) !important;
}
#savio-prism .fg-voice-orb svg {
  width: 36px;
  height: 36px;
}
#savio-prism .fg-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 32px;
}
#savio-prism .fg-wave i {
  width: 4px;
  height: 12px;
  background: var(--fg-accent);
  border-radius: 8px;
}
#savio-prism .fg-wave i:nth-child(2),
#savio-prism .fg-wave i:nth-child(6) {
  height: 20px;
}
#savio-prism .fg-wave i:nth-child(3),
#savio-prism .fg-wave i:nth-child(5) {
  height: 27px;
}
#savio-prism .fg-wave i:nth-child(4) {
  height: 32px;
}
#savio-prism .fg-error:empty {
  display: none;
}
#savio-prism [hidden] {
  display: none !important;
}
@media (max-width: 420px) {
  #savio-prism .fg-stage {
    padding: 14px 1px;
    min-height: 960px;
  }
  #savio-prism .fg-screen {
    padding: 0 16px 12px;
  }
  #savio-prism .fg-phone {
    border-radius: 30px;
  }
  #savio-prism .fg-bottom button {
    font-size: 11px;
  }
  #savio-prism .fg-float {
    padding: 8px 10px;
    font-size: 11px;
  }
  #savio-prism .fg-login-form {
    padding: 17px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  #savio-prism .fg-phone {
    transition:
      background-color 0.3s ease,
      color 0.25s ease;
  }
  #savio-prism .fg-phone button {
    transition:
      background-color 0.22s ease,
      color 0.2s ease,
      box-shadow 0.22s ease,
      transform var(--fg-motion-tap, 250ms) var(--fg-motion-ease, cubic-bezier(0.22, 1, 0.36, 1)),
      filter 0.2s ease;
    transform-origin: center;
  }
  #savio-prism .fg-phone button:active,
  #savio-prism .fg-phone button.fg-pressing {
    transform: scale(0.985);
    filter: brightness(1.035);
    box-shadow: inset 0 1px 4px var(--fg-shadow);
  }
  #savio-prism .fg-language summary,
  #savio-prism .fg-language summary svg {
    transition:
      background-color 0.24s ease,
      box-shadow 0.24s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  #savio-prism .fg-language summary:active {
    transform: scale(0.992);
  }
  #savio-prism .fg-glass,
  #savio-prism .fg-bottom,
  #savio-prism .fg-nav-glass {
    transition:
      background-color 0.3s ease,
      border-color 0.3s ease,
      color 0.25s ease;
  }
  #savio-prism .fg-field input,
  #savio-prism .fg-field select,
  #savio-prism .fg-composer {
    transition:
      background-color 0.25s ease,
      box-shadow 0.25s ease;
  }
  #savio-prism .fg-field:focus-within input,
  #savio-prism .fg-field:focus-within select {
    box-shadow:
      inset 0 1px 3px var(--fg-shadow),
      0 0 0 3px var(--fg-soft);
  }
}
@media (prefers-reduced-motion: reduce) {
  #savio-prism .fg-phone *,
  #savio-prism .fg-phone *:before,
  #savio-prism .fg-phone *:after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Onboarding story, outro and Premium ------------------------------
 * The intro before the account, the outro after the profile and the plans.
 * Illustrations come from onboarding-art.js. Hidden starting states live
 * only in keyframes, so with reduced motion every picture is complete. */
#savio-prism .fg-phone .ob__foot {
  margin-top: auto;
}
/* The generic Prism button reset outranked the CTA's orange fill. */
#savio-prism .fg-phone .ob__cta {
  color: var(--fg-on-action);
  background: var(--fg-action);
}
#savio-prism .fg-phone .ob__cta:disabled {
  opacity: 0.45;
}
#savio-prism .fg-phone .ob-story,
#savio-prism .fg-phone .pw {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#savio-prism .fg-phone .ob.is-story .ob-title {
  font-size: 28px;
  line-height: 1.17;
  letter-spacing: -0.9px;
}
#savio-prism .fg-phone .ob.is-story .ob-sub {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--fg-muted);
}
/* On the story and Premium pages the button stays on screen while the
 * page scrolls under it, pinned like Prism's navigation bar. */
#savio-prism .fg-phone .ob.is-story {
  padding-bottom: 104px;
}
#savio-prism .fg-phone .ob.is-story .ob__foot {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 15;
  width: min(100%, 406px);
  padding: 22px 18px max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--fg-bg) 30%);
}
/* Story pages fill the screen; the logo pages sit in its middle. */
#savio-prism .fg-phone .ob.is-story .ob__stage {
  display: flex;
  flex: 1;
  flex-direction: column;
}
#savio-prism .fg-phone .ob.is-story .ob-page.ob-center {
  margin-block: auto;
}
#savio-prism .fg-phone .ob-center,
#savio-prism .fg-phone .ob-center .ob-head {
  text-align: center;
  align-items: center;
}
#savio-prism .fg-phone .ob-art {
  display: grid;
  place-items: center;
  width: 100%;
  animation: art-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
#savio-prism .fg-phone .ob-art .art {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}
#savio-prism .fg-phone .art-floor {
  fill: var(--fg-shadow);
}
#savio-prism .fg-phone .art-barcode {
  fill: #172c31;
}
#savio-prism .fg-phone .art-hole {
  fill: var(--fg-bg);
}
#savio-prism .fg-phone .art-score {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 8px;
  border-radius: 13px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  box-shadow: 0 8px 20px var(--fg-shadow);
}
#savio-prism .fg-phone .art-score--1 {
  background: var(--score-1);
}
#savio-prism .fg-phone .art-score--2 {
  background: var(--score-2);
}
#savio-prism .fg-phone .art-score--3 {
  background: var(--score-3);
}
#savio-prism .fg-phone .art-score--4 {
  background: var(--score-4);
}
#savio-prism .fg-phone .art-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--fg-ink);
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  box-shadow: 0 10px 26px var(--fg-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#savio-prism .fg-phone .art-flag i {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}
#savio-prism .fg-phone .art-flag--bad i {
  background: var(--score-1);
}
#savio-prism .fg-phone .art-flag--mid i {
  background: var(--score-2);
}
#savio-prism .fg-phone .art-stack {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 8px auto 0;
}
#savio-prism .fg-phone .art-pin {
  position: absolute;
  z-index: 1;
  animation:
    art-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--pin, 0.4s) both,
    art-float 5s ease-in-out calc(var(--pin, 0.4s) + 0.5s) infinite;
}
#savio-prism .fg-phone .art-pin--a {
  top: 0;
  inset-inline-start: 36%;
  --pin: 0.35s;
}
#savio-prism .fg-phone .art-pin--b {
  bottom: 16%;
  inset-inline-start: 0;
  --pin: 0.55s;
}
#savio-prism .fg-phone .art-pin--c {
  bottom: 7%;
  inset-inline-end: 0;
  --pin: 0.75s;
}
#savio-prism .fg-phone .art-stack--card {
  padding: 18px 8px 26px;
}
#savio-prism .fg-phone .art-pin--d {
  top: 0;
  inset-inline-end: 0;
  --pin: 0.45s;
}
#savio-prism .fg-phone .art-pin--e {
  bottom: 2px;
  inset-inline-start: 0;
  --pin: 0.65s;
}
#savio-prism .fg-phone .art-pin--f {
  bottom: 2px;
  inset-inline-end: 4px;
  --pin: 0.85s;
}

/* Savio's orb: the logo on a disc with two slow rings. */
#savio-prism .fg-phone .art-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 176px;
  height: 176px;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fg-soft) 0 52%, transparent 71%);
}
#savio-prism .fg-phone .art-orb img {
  position: relative;
  z-index: 1;
  width: 66px;
  height: 66px;
  padding: 22px;
  box-sizing: content-box;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  box-shadow:
    0 16px 40px var(--fg-shadow),
    0 0 0 1px var(--fg-line);
}
#savio-prism .fg-phone .art-orb__ring {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--fg-action);
  opacity: 0;
  animation: art-ring 3.2s ease-out infinite;
}
#savio-prism .fg-phone .art-orb__ring--2 {
  animation-delay: 1.6s;
}
#savio-prism .fg-phone .ob-congrats .ob-head {
  position: relative;
  z-index: 2;
}
#savio-prism .fg-phone .art-confetti i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 13px;
  margin: -6px 0 0 -4px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0;
  animation: art-confetti 2.8s cubic-bezier(0.16, 1, 0.3, 1) var(--d) infinite;
}

/* "Simply scan any barcode": a phone slides over the label, reads it, and
 * the score pops. The resting style is the end state. */
#savio-prism .fg-phone .art-scan {
  position: relative;
  width: 260px;
  height: 300px;
  margin: 4px auto 0;
  overflow: hidden;
  border-radius: 30px;
  background: radial-gradient(ellipse at 50% 46%, var(--fg-soft) 0 48%, transparent 72%);
}
#savio-prism .fg-phone .ob-art .art--scan-product {
  position: absolute;
  top: 22px;
  left: 64px;
  width: 132px;
  max-width: none;
}
#savio-prism .fg-phone .art-scan__phone {
  position: absolute;
  top: 128px;
  left: 70px;
  width: 120px;
  height: 152px;
  border: 7px solid #11181b;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  transform: rotate(-4deg);
  animation: art-scan-phone 3.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
#savio-prism .fg-phone .art-scan__screen {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 2px rgba(245, 131, 0, 0.6);
}
#savio-prism .fg-phone .art-scan__line {
  position: absolute;
  inset-inline: 10px;
  top: 50%;
  height: 3px;
  border-radius: 3px;
  background: var(--fg-action);
  box-shadow: 0 0 14px 2px rgba(245, 131, 0, 0.7);
  opacity: 0;
  animation: art-scan-line 3.8s ease-in-out infinite;
}
#savio-prism .fg-phone .art-scan__score {
  position: absolute;
  top: 98px;
  left: 168px;
  z-index: 2;
  animation: art-scan-score 3.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* The product card of the rating page. */
#savio-prism .fg-phone .art-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 26px;
  text-align: start;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  box-shadow: 0 20px 50px var(--fg-shadow);
}
#savio-prism .fg-phone .art-card__row {
  display: flex;
  align-items: center;
  gap: 12px;
}
#savio-prism .fg-phone .art-card__thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 66px;
  border-radius: 15px;
  background: var(--fg-panel);
}
#savio-prism .fg-phone .art-card__thumb svg {
  width: 30px;
  height: 48px;
}
#savio-prism .fg-phone .art-card__text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
#savio-prism .fg-phone .art-card__text small {
  font-size: 12px;
  color: var(--fg-muted);
}
#savio-prism .fg-phone .art-card__text b {
  font-size: 15px;
  font-weight: 600;
}
#savio-prism .fg-phone .art-card__verdict {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.4;
}
#savio-prism .fg-phone .art-card__verdict b {
  font-size: 15px;
  font-weight: 600;
}
#savio-prism .fg-phone .art-card__verdict--1 {
  background: color-mix(in srgb, var(--score-1) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--score-1) 34%, transparent);
}
#savio-prism .fg-phone .art-card__verdict--2 {
  background: color-mix(in srgb, var(--score-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--score-2) 40%, transparent);
}
#savio-prism .fg-phone .art-card__bars {
  display: grid;
  gap: 7px;
}
#savio-prism .fg-phone .art-card__bars i {
  height: 8px;
  border-radius: 4px;
  background: var(--fg-panel);
}
#savio-prism .fg-phone .art-card__bars i:nth-child(2) {
  width: 76%;
}
#savio-prism .fg-phone .art-card__bars i:nth-child(3) {
  width: 52%;
}

/* A worse product, an arrow, a better one. */
#savio-prism .fg-phone .art-swap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 0 4px;
}
#savio-prism .fg-phone .art-swap__item {
  position: relative;
  width: 118px;
}
#savio-prism .fg-phone .art-swap__item .art {
  width: 100%;
}
#savio-prism .fg-phone .art-swap__item + .art-swap__arrow + .art-swap__item {
  animation: art-pop 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
#savio-prism .fg-phone .art-swap__score {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
}
#savio-prism .fg-phone .art-swap__label {
  display: block;
  width: max-content;
  margin: 8px auto 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
#savio-prism .fg-phone .art-swap__label--1 {
  color: var(--score-1);
  background: color-mix(in srgb, var(--score-1) 12%, transparent);
}
#savio-prism .fg-phone .art-swap__label--4 {
  color: var(--score-4);
  background: color-mix(in srgb, var(--score-4) 12%, transparent);
}
#savio-prism .fg-phone .art-swap__arrow {
  flex: none;
  width: 34px;
  height: 34px;
  color: var(--fg-accent);
}
#savio-prism .fg-phone[dir='rtl'] .art-swap__arrow {
  transform: scaleX(-1);
}

/* From now to your goal. In Arabic the curve runs right to left. */
#savio-prism .fg-phone .art-journey {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 26px auto 30px;
}
#savio-prism .fg-phone .art-journey .art {
  max-width: none;
}
#savio-prism .fg-phone[dir='rtl'] .art-journey .art {
  transform: scaleX(-1);
}
#savio-prism .fg-phone .art-journey__axis {
  stroke: var(--fg-line);
  stroke-width: 2;
}
#savio-prism .fg-phone .art-journey__guide {
  stroke: var(--fg-muted);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0.45;
}
#savio-prism .fg-phone .art-journey__curve {
  fill: none;
  stroke: var(--fg-action);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: art-draw 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
}
#savio-prism .fg-phone .art-journey__dot {
  fill: var(--fg-action);
}
#savio-prism .fg-phone .art-journey__halo {
  fill: var(--fg-action);
  opacity: 0.18;
}
#savio-prism .fg-phone .art-journey__now,
#savio-prism .fg-phone .art-journey__goal,
#savio-prism .fg-phone .art-journey__label {
  position: absolute;
  translate: -50% 0;
}
#savio-prism .fg-phone .art-journey__now {
  left: 23.3%;
  top: calc(67.4% - 58px);
  animation: art-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
#savio-prism .fg-phone .art-journey__goal {
  left: 76.7%;
  top: calc(23.2% - 64px);
  animation: art-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}
#savio-prism .fg-phone .art-journey__label {
  top: calc(87.4% + 10px);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  white-space: nowrap;
}
#savio-prism .fg-phone .art-journey__label--now {
  left: 23.3%;
}
#savio-prism .fg-phone .art-journey__label--goal {
  left: 76.7%;
}
#savio-prism .fg-phone[dir='rtl'] .art-journey__now,
#savio-prism .fg-phone[dir='rtl'] .art-journey__label--now {
  left: 76.7%;
}
#savio-prism .fg-phone[dir='rtl'] .art-journey__goal,
#savio-prism .fg-phone[dir='rtl'] .art-journey__label--goal {
  left: 23.3%;
}

/* The one-time offer. */
#savio-prism .fg-phone .ob-offer .ob-art {
  padding: 22px 10px;
  border-radius: 28px;
  background: var(--fg-soft);
}
#savio-prism .fg-phone .art-gift__text {
  font:
    700 46px/1 Inter,
    -apple-system,
    sans-serif;
  letter-spacing: -1.5px;
  fill: #1a1205;
}
#savio-prism .fg-phone .art-spark {
  fill: var(--fg-action);
  transform-box: fill-box;
  transform-origin: center;
  animation: art-twinkle 2.4s ease-in-out infinite;
}
#savio-prism .fg-phone .art-spark:nth-of-type(2) {
  animation-delay: 0.8s;
}
#savio-prism .fg-phone .art-spark:nth-of-type(3) {
  animation-delay: 1.6s;
}

/* First intro page: what they want, as checkboxes. */
#savio-prism .fg-phone .ob-checks {
  display: grid;
  gap: 10px;
}
#savio-prism .fg-phone .ob-check {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: start;
  color: var(--fg-ink);
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  animation: art-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(0.08s + var(--i) * 0.05s) both;
}
#savio-prism .fg-phone .ob-check__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: transparent;
  background: var(--fg-bg);
  border: 1.5px solid var(--fg-line);
}
#savio-prism .fg-phone .ob-check[aria-pressed='true'] {
  background: var(--fg-soft);
  border-color: var(--fg-action);
}
#savio-prism .fg-phone .ob-check[aria-pressed='true'] .ob-check__box {
  color: var(--fg-on-action);
  background: var(--fg-action);
  border-color: var(--fg-action);
}

/* The four bands of the score. */
#savio-prism .fg-phone .ob-scale {
  display: grid;
  gap: 10px;
}
#savio-prism .fg-phone .ob-scale__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 20px;
  background: var(--fg-glass);
  border: 1px solid var(--fg-line);
  animation: art-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--i) * 0.08s) both;
}
#savio-prism .fg-phone .ob-scale__row--4 {
  border-color: color-mix(in srgb, var(--score-4) 34%, transparent);
}
#savio-prism .fg-phone .ob-scale__row--3 {
  border-color: color-mix(in srgb, var(--score-3) 40%, transparent);
}
#savio-prism .fg-phone .ob-scale__row--2 {
  border-color: color-mix(in srgb, var(--score-2) 40%, transparent);
}
#savio-prism .fg-phone .ob-scale__row--1 {
  border-color: color-mix(in srgb, var(--score-1) 34%, transparent);
}
#savio-prism .fg-phone .ob-scale__range {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 76px;
  height: 42px;
  border-radius: 13px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#savio-prism .fg-phone .ob-scale__text {
  display: grid;
  gap: 2px;
  line-height: 1.35;
}
#savio-prism .fg-phone .ob-scale__text b {
  font-size: 16px;
  font-weight: 600;
}
#savio-prism .fg-phone .ob-scale__text span {
  font-size: 13.5px;
  color: var(--fg-muted);
}

/* "Your personal scanner is ready": the orb peeks over a checklist. */
#savio-prism .fg-phone .ob-ready__panel {
  position: relative;
  margin-top: 84px;
  padding: 74px 16px 16px;
  border-radius: 28px;
  background: var(--fg-soft);
}
#savio-prism .fg-phone .ob-ready__panel > .ob-art {
  position: absolute;
  top: -88px;
  inset-inline: 0;
}
#savio-prism .fg-phone .ob-ready__list {
  display: grid;
  margin: 0;
  padding: 6px 18px;
  list-style: none;
  border-radius: 20px;
  background: var(--fg-bg);
  box-shadow: 0 12px 30px var(--fg-shadow);
}
#savio-prism .fg-phone .ob-ready__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  font-size: 16px;
  font-weight: 500;
  animation: art-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(0.35s + var(--i) * 0.25s) both;
}
#savio-prism .fg-phone .ob-ready__list li + li {
  border-top: 1px solid var(--fg-line);
}
#savio-prism .fg-phone .ob-ready__tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  color: var(--score-4);
  border: 2px solid var(--score-4);
}

/* Premium: features, plans, the honest note and the fine print. */
#savio-prism .fg-phone .pw-brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 13px 6px 8px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-accent);
  background: var(--fg-soft);
}
#savio-prism .fg-phone .pw-brand img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
#savio-prism .fg-phone .pw .ob-title {
  font-size: 28px;
  line-height: 1.17;
  letter-spacing: -0.9px;
}
#savio-prism .fg-phone .pw-features {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#savio-prism .fg-phone .pw-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#savio-prism .fg-phone .pw-feature__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--fg-accent);
  background: var(--fg-soft);
}
#savio-prism .fg-phone .pw-feature__text {
  display: grid;
  gap: 1px;
  line-height: 1.38;
}
#savio-prism .fg-phone .pw-feature__text b {
  font-size: 15px;
  font-weight: 600;
}
#savio-prism .fg-phone .pw-feature__text span {
  font-size: 13.5px;
  color: var(--fg-muted);
}
#savio-prism .fg-phone .pw-plans {
  display: grid;
  gap: 10px;
}
#savio-prism .fg-phone .pw-plan {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 20px;
  font: inherit;
  text-align: start;
  color: var(--fg-ink);
  background: var(--fg-glass);
  border: 1.5px solid var(--fg-line);
}
#savio-prism .fg-phone .pw-plan[aria-checked='true'] {
  background: var(--fg-soft);
  border-color: var(--fg-action);
}
#savio-prism .fg-phone .pw-plan__text {
  display: grid;
  flex: 1;
  gap: 1px;
  line-height: 1.3;
}
#savio-prism .fg-phone .pw-plan__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
}
#savio-prism .fg-phone .pw-plan__price {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
#savio-prism .fg-phone .pw-plan__equiv {
  font-size: 13px;
  color: var(--fg-muted);
}
#savio-prism .fg-phone .pw-plan__trial {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-good);
}
#savio-prism .fg-phone .pw-plan__radio {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--fg-line);
}
#savio-prism .fg-phone .pw-plan[aria-checked='true'] .pw-plan__radio {
  border-color: var(--fg-action);
  background: radial-gradient(circle, var(--fg-action) 0 42%, transparent 47%);
}
#savio-prism .fg-phone .pw-plan__badge {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  vertical-align: 1px;
  color: var(--fg-on-action);
  background: var(--fg-action);
}
#savio-prism .fg-phone .pw-note {
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.4;
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
}
#savio-prism .fg-phone .pw-fine {
  font-size: 12px;
  text-align: center;
  color: var(--fg-muted);
}
#savio-prism .fg-phone .pw-later {
  align-self: center;
  min-height: 44px;
  font: inherit;
  font-weight: 500;
  color: var(--fg-muted);
  background: none;
  border: 0;
}
#savio-prism .fg-phone .prism-premium {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

@keyframes art-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}
@keyframes art-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  70% {
    transform: scale(1.08);
  }
}
@keyframes art-float {
  50% {
    transform: translateY(-5px);
  }
}
@keyframes art-ring {
  from {
    opacity: 0.8;
    transform: scale(0.72);
  }
  to {
    opacity: 0;
    transform: scale(1.14);
  }
}
@keyframes art-confetti {
  from {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(0.5);
  }
  70% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(var(--x), calc(var(--y) + 12px)) rotate(var(--r)) scale(1);
  }
}
@keyframes art-scan-phone {
  0% {
    opacity: 0;
    transform: translate(34px, 170px) rotate(12deg);
  }
  12% {
    opacity: 1;
  }
  28%,
  80% {
    opacity: 1;
    transform: rotate(-4deg);
  }
  94%,
  100% {
    opacity: 0;
    transform: translate(34px, 170px) rotate(12deg);
  }
}
@keyframes art-scan-line {
  0%,
  28% {
    top: 14%;
    opacity: 0;
  }
  32% {
    opacity: 1;
  }
  44% {
    top: 82%;
  }
  56% {
    top: 14%;
    opacity: 1;
  }
  60%,
  100% {
    top: 14%;
    opacity: 0;
  }
}
@keyframes art-scan-score {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.3);
  }
  64% {
    opacity: 1;
    transform: scale(1.14);
  }
  70%,
  84% {
    opacity: 1;
    transform: scale(1);
  }
  92%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes art-draw {
  from {
    stroke-dashoffset: 1;
  }
}
@keyframes art-twinkle {
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

/* "Have a Premium code?": a quiet link that opens a field (paywall, Settings). */
#savio-prism .fg-phone .pw-code {
  display: grid;
  justify-items: center;
  gap: 8px;
}
#savio-prism .fg-phone .pw-code[hidden] {
  display: none;
}
#savio-prism .fg-phone .pw-code__open {
  min-height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
#savio-prism .fg-phone .pw-code__form {
  display: flex;
  gap: 8px;
  width: 100%;
}
#savio-prism .fg-phone .pw-code__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border-radius: 16px;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-ink);
  background: var(--fg-panel);
  border: 1px solid var(--fg-line);
}
#savio-prism .fg-phone .pw-code__input:focus {
  outline: none;
  border-color: var(--fg-action);
}
#savio-prism .fg-phone .pw-code__submit {
  padding: 0 18px;
  border-radius: 16px;
  font-weight: 600;
  color: var(--fg-on-action);
  background: var(--fg-action);
}
#savio-prism .fg-phone .pw-code__submit:disabled {
  opacity: 0.5;
}
#savio-prism .fg-phone .pw-code__status {
  min-height: 0;
  font-size: 13.5px;
  text-align: center;
  color: var(--fg-muted);
}
#savio-prism .fg-phone .pw-code__status:empty {
  display: none;
}
#savio-prism .fg-phone .pw-code__status.is-ok {
  color: var(--score-4);
  font-weight: 600;
}
#savio-prism .fg-phone .pw-code__status.is-error {
  color: var(--fg-bad);
}

/* Approved product layout: Score story. Shared Prism colours and motion stay intact. */
#savio-prism #sheet-detail .detail__hero {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  align-items: center;
  gap: 12px;
}
#savio-prism #sheet-detail .detail__heading {
  min-width: 0;
}
#savio-prism #sheet-detail .detail__name {
  font-size: 20px;
  overflow-wrap: anywhere;
}
#savio-prism .prism-score-hero {
  --prism-score-ink: var(--fg-good);
  padding: 17px;
}
#savio-prism .prism-score-hero[data-score-band='1'],
#savio-prism .prism-score-hero[data-score-band='2'] {
  --prism-score-ink: var(--fg-bad);
}
#savio-prism .prism-score-hero[data-score-band='3'] {
  --prism-score-ink: var(--fg-accent);
}
#savio-prism .prism-score-hero[data-score-band='none'] {
  --prism-score-ink: var(--fg-muted);
}
#savio-prism .prism-score-eyebrow {
  color: var(--fg-accent);
  font-size: 11px;
  letter-spacing: 0.08em;
}
#savio-prism .prism-score-hero .detail__score {
  justify-content: space-between;
  gap: 15px;
  padding: 10px 0 0;
}
#savio-prism .prism-score-hero .detail__score > div {
  order: -1;
  min-width: 0;
}
#savio-prism .prism-score-hero .detail__band {
  color: var(--fg-ink);
  font-size: 18px;
  overflow-wrap: anywhere;
}
#savio-prism .prism-score-hero .detail__of {
  color: var(--fg-muted);
  font-size: 12px;
}
#savio-prism .prism-score-hero .score-chip {
  flex: none;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--prism-score-ink);
  font-size: 51px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -1.6px;
  font-variant-numeric: tabular-nums;
}
#savio-prism .prism-score-track {
  height: 7px;
  margin-top: 15px;
  border-radius: 7px;
  overflow: hidden;
  background: var(--fg-line);
}
#savio-prism .prism-score-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--prism-score-ink);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
#savio-prism .prism-score-ledger {
  display: flex;
  flex-direction: column;
  gap: 0;
}
#savio-prism .prism-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--fg-line);
}
#savio-prism .prism-score-row > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#savio-prism .prism-score-row strong {
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
#savio-prism .prism-score-row small {
  font-size: 11px;
  color: var(--fg-muted);
}
#savio-prism .prism-score-row b {
  flex: none;
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
#savio-prism .prism-score-loss b {
  color: var(--fg-accent);
}
#savio-prism .prism-score-final {
  padding: 12px;
  margin-top: 6px;
  border: 1px solid var(--fg-line);
  border-radius: 16px;
  background: var(--fg-glass);
}
#savio-prism .prism-score-equation {
  text-align: end;
  margin-block: 10px !important;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#savio-prism #sheet-detail .detail__verdict:empty,
#savio-prism #sheet-detail .detail__profile:empty {
  display: none;
}
#savio-prism .prism-product-facts {
  gap: 10px;
}
#savio-prism .prism-details-heading {
  margin-block: 7px 2px;
}
#savio-prism .prism-product-section {
  border-radius: 19px;
  overflow: hidden;
}
#savio-prism .prism-product-section > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 59px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}
#savio-prism .prism-product-section > summary::-webkit-details-marker {
  display: none;
}
#savio-prism .prism-product-section > summary > span {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
#savio-prism .prism-product-section > summary strong {
  font-size: 13px;
  font-weight: 500;
}
#savio-prism .prism-product-section > summary small {
  font-size: 11px;
  color: var(--fg-muted);
}
#savio-prism .prism-product-section > summary > svg {
  flex: none;
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
#savio-prism .prism-product-section[open] > summary {
  color: var(--fg-accent);
  background: var(--fg-soft);
}
#savio-prism .prism-product-section[open] > summary > svg {
  transform: rotate(270deg);
}
#savio-prism .prism-product-section-body {
  padding: 12px 14px 17px;
  overflow-wrap: anywhere;
}
#savio-prism .prism-product-section-body .fg-detail-facts {
  padding: 0;
}
#savio-prism .prism-product-section-body .detail__points {
  margin: 0;
}
#savio-prism .prism-product-section-body .detail__points li {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-inline-start: 16px;
}
#savio-prism .prism-additives {
  padding-inline-start: 18px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

/* Compact cards are only for the in-app dialog, not registration's paywall. */
#savio-prism .fg-phone .prism-premium {
  padding: 16px;
  border-radius: 24px;
}
#savio-prism .fg-phone .pw-compact,
#savio-prism .fg-phone .pw-info {
  display: grid;
  gap: 8px;
}
#savio-prism .fg-phone .pw-compact__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#savio-prism .fg-phone .pw-compact__brand {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-accent);
}
#savio-prism .fg-phone .pw-compact__title,
#savio-prism .fg-phone .pw-info__title {
  margin: 2px 0 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  font-weight: 500;
}
#savio-prism .fg-phone .pw-compact__close {
  flex: none;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg-ink);
  font-size: 28px;
  line-height: 1;
}
#savio-prism .fg-phone .pw-compact__summary {
  margin: 0;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.4;
}
#savio-prism .fg-phone .pw-compact__more,
#savio-prism .fg-phone .pw-compact__back {
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--fg-accent);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#savio-prism .fg-phone .pw-compact__more {
  text-align: start;
}
#savio-prism .fg-phone .pw-compact__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
#savio-prism .fg-phone .pw-compact__plan {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  min-width: 0;
  min-height: 96px;
  padding: 8px 4px;
  border: 1.5px solid var(--fg-line);
  border-radius: 14px;
  background: var(--fg-bg);
  color: var(--fg-ink);
  text-align: center;
}
#savio-prism .fg-phone .pw-compact__plan[aria-checked='true'] {
  border-color: var(--fg-action);
  background: var(--fg-soft);
}
#savio-prism .fg-phone .pw-compact__name,
#savio-prism .fg-phone .pw-compact__period {
  font-size: 12px;
  line-height: 1.3;
}
#savio-prism .fg-phone .pw-compact__price {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
}
#savio-prism .fg-phone .pw-compact__period {
  color: var(--fg-muted);
}
#savio-prism .fg-phone .pw-compact__trial {
  min-height: 15px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--fg-accent);
}
#savio-prism .fg-phone .pw-compact__actions {
  display: flex;
  gap: 8px;
}
#savio-prism .fg-phone .pw-compact__actions .pw-cta {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.3;
}
#savio-prism .fg-phone .pw-compact__actions .pw-later {
  min-width: 80px;
  min-height: 46px;
  padding: 8px;
  border: 1px solid var(--fg-line);
  border-radius: 16px;
  font-size: 14px;
}
#savio-prism .fg-phone .pw-compact .pw-fine,
#savio-prism .fg-phone .pw-compact .pw-note {
  margin: 0;
  line-height: 1.4;
}
#savio-prism .fg-phone .pw-compact .pw-note {
  padding: 8px 10px;
  font-size: 13px;
}
#savio-prism .fg-phone .pw-compact .pw-code {
  min-width: 0;
  gap: 4px;
}
#savio-prism .fg-phone .pw-compact .pw-code__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}
#savio-prism .fg-phone .pw-compact .pw-code__input {
  width: 100%;
  min-width: 0;
}
#savio-prism .fg-phone .pw-compact .pw-code__submit {
  min-width: 0;
  padding-inline: 12px;
  font-size: 14px;
}
#savio-prism .fg-phone .pw-compact .pw-code__open {
  min-height: 44px;
  padding: 6px 0;
}
#savio-prism .fg-phone .pw-compact .pw-code__status:empty {
  display: none;
}
#savio-prism .fg-phone .pw-compact.is-code .pw-compact__benefits,
#savio-prism .fg-phone .pw-compact.is-code .pw-compact__plans,
#savio-prism .fg-phone .pw-compact.is-code .pw-compact__actions,
#savio-prism .fg-phone .pw-compact.is-code .pw-fine {
  display: none;
}
#savio-prism .fg-phone .pw-info__title {
  font-size: 22px;
}
#savio-prism .fg-phone .pw-info__basic {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--fg-soft);
}
#savio-prism .fg-phone .pw-info__features {
  display: grid;
  gap: 12px;
}
#savio-prism .fg-phone .pw-info h3 {
  margin: 0 0 3px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
}
#savio-prism .fg-phone .pw-info p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.4;
}
#savio-prism .fg-phone .pw-info .pw-info__fine {
  font-size: 12px;
}
#savio-prism .fg-phone .pw-info .ob__cta {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 15px;
}
/* Keep an accessible scroll fallback for enlarged text or a very short viewport;
 * ordinary phone sizes fit the default card without needing it. */
@media (max-height: 620px) {
  #savio-prism .fg-phone .prism-premium {
    padding: 14px;
  }
  #savio-prism .fg-phone .pw-compact {
    gap: 6px;
  }
  #savio-prism .fg-phone .pw-compact__plan {
    min-height: 88px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #savio-prism .prism-score-track > span,
  #savio-prism .prism-product-section > summary > svg {
    transition: none;
  }
}