/* iPhone 15 / 14 / 13 preview shell and layout QA overrides. */
:root {
  --ios-frame: #11191e;
  --ios-separator: rgba(17, 25, 30, .14);
  --ios-bar: rgba(255, 252, 243, .94);
  --ios-content-width: 358px;
}

html { background: var(--sun); }
body { padding: 24px 16px; background: var(--sun); }
.demo-stage { max-width: 390px; align-items: flex-start; gap: 0; }
.demo-note { display: none; }
.device {
  width: 390px;
  height: 844px;
  padding: 0;
  flex: 0 0 390px;
  position: relative;
  overflow: hidden;
  background: var(--ios-frame);
  border: 0;
  border-radius: 48px;
  box-shadow: 0 20px 55px rgba(81, 55, 18, .22), inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.device::before {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  border: 6px solid var(--ios-frame);
  border-radius: 48px;
  pointer-events: none;
}
.phone-shell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 47px minmax(0, 1fr) 34px;
  overflow: hidden;
  border-radius: 42px;
  background: var(--cream);
}
.phone-statusbar {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  color: var(--ink);
  background: var(--ios-bar);
  font: 600 15px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.status-time { justify-self: start; letter-spacing: -.01em; }
.dynamic-island {
  width: 104px;
  height: 28px;
  border-radius: 999px;
  background: var(--ios-frame);
}
.status-icons { justify-self: end; display: flex; align-items: center; gap: 5px; }
.status-icons i { display: block; position: relative; width: 16px; height: 14px; }
.status-signal::before { content: ""; position: absolute; inset: 5px 0 0; border-bottom: 2px solid var(--ink); border-radius: 0 0 10px 10px; transform: skewX(-24deg); }
.status-wifi::before { content: ""; position: absolute; inset: 2px 0 0; border: 2px solid var(--ink); border-color: var(--ink) transparent transparent; border-radius: 50%; transform: rotate(45deg); }
.status-battery { border: 1.5px solid var(--ink); border-radius: 4px; width: 20px !important; height: 10px !important; }
.status-battery::before { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 4px; border-radius: 2px; background: var(--green); }
.status-battery::after { content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; border-radius: 0 2px 2px 0; background: var(--ink); }
.device-screen.ripple-app { height: auto; min-height: 0; border: 0; border-radius: 0; }
.phone-home-area { display: grid; place-items: center; background: var(--ios-bar); }
.home-indicator { width: 134px; height: 5px; border-radius: 999px; background: var(--ios-frame); }

/* The app content is 390 pt wide, with the library's 16 pt page gutters. */
.ripple-app > .screen { min-width: 0; width: 100%; height: 100%; padding: 0 !important; }
.ripple-app { min-width: 0; overflow: hidden; }
.ripple-app > .screen { overflow: hidden; }
.ripple-app .screen-scroll,
.ripple-app .view-panel,
.ripple-app .create-panel,
.ripple-app .chat-list { min-width: 0; overflow-x: hidden; }
.ripple-app .screen-scroll,
.ripple-app .view-panel,
.ripple-app .create-panel,
.ripple-app .chat-list { overflow-y: auto; }
.ripple-app .discover-screen > .discover-tabs,
.ripple-app .create-screen > .create-tabs { width: calc(100% - 32px); }
.ripple-app .discover-screen > .filter-row,
.ripple-app .discover-screen > .view-panel,
.ripple-app .create-screen > .create-panel,
.ripple-app > .screen > .chat-list { width: 100%; }
.ripple-app .screen-header { height: 44px; min-height: 44px; padding: 0 8px; }
.ripple-app .screen-header h1 { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; }
.ripple-app .screen-header button,
.ripple-app .icon-button { width: 44px; height: 44px; min-height: 44px; }
.ripple-app .discover-screen,
.ripple-app .create-screen { padding-bottom: 50px !important; }
.ripple-app .screen-header i,
.ripple-app .detail-top i,
.ripple-app .chat-header i,
.ripple-app .composer i { font-size: 20px; }
.ripple-app .metadata-list i,
.ripple-app .pinned-card i,
.ripple-app .chat-message i { font-size: 16px; }
.ripple-app .bottom-nav button i { font-size: 24px; }
.ripple-app .empty-state > i { font-size: 48px; }

/* Registration forms: keep every field and action inside the 358 pt content column. */
.ripple-app .welcome { width: 100%; min-width: 0; max-width: none; padding: 16px 16px 24px !important; box-sizing: border-box; }
.ripple-app .screen-scroll { width: 100%; min-width: 0; max-width: none; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.ripple-app .screen-scroll { padding-top: 24px; }
.ripple-app .welcome { overflow-x: hidden; }
.ripple-app .welcome .form-stack,
.ripple-app .welcome .form-foot { width: 100%; min-width: 0; }
.ripple-app .phone-field { width: 100%; min-width: 0; grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
.ripple-app .phone-field > *,
.ripple-app .field input,
.ripple-app .field select,
.ripple-app .field textarea { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.ripple-app .phone-field select,
.ripple-app .field input,
.ripple-app .field select,
.ripple-app .field textarea { min-height: 48px; height: auto; padding: 0 12px; font-size: 17px; line-height: 24px; }
.ripple-app .phone-field select { padding-left: 8px; padding-right: 8px; }
.ripple-app .country-code-trigger { width: 100%; min-height: 48px; height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 8px; border: 1px solid #d9d3c7; border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 600; text-align: left; }
.ripple-app .country-code-trigger i { flex: 0 0 auto; font-size: 16px; color: var(--muted); }
.ripple-app .country-picker-sheet { max-width: 100%; box-sizing: border-box; padding-bottom: 26px; }
.ripple-app .country-picker-sheet .option { min-height: 48px; font-size: 17px; }
.ripple-app input[type="date"] { color-scheme: light; appearance: auto; }
.ripple-app .welcome .primary-action,
.ripple-app .form-foot .primary-action { width: 100%; max-width: 100%; box-sizing: border-box; }
.ripple-app .welcome .wordmark-large { width: 236px; height: 112px; margin-top: 36px; margin-bottom: 12px; }
.ripple-app .welcome h1 { margin-top: 24px; }
.ripple-app .welcome .form-stack { margin-top: 36px; }
.ripple-app .welcome .form-foot { padding-top: 16px; }
.ripple-app .welcome .privacy-copy { margin-bottom: 24px; }
.ripple-app .verification-screen .form-stack > .text-action { align-self: flex-start; }
.ripple-app .phone-entry-screen .form-stack > .text-action { align-self: center; }

/* Onboarding keeps its explanation at the top and its decisions in the easy-to-reach lower half. */
.ripple-app .onboarding-scroll { padding-top: 32px; padding-bottom: 24px; }
.ripple-app .onboarding-scroll .intro-copy { margin-top: 20px; }
.ripple-app .onboarding-scroll .form-stack { margin-top: 32px; }
.ripple-app .onboarding-scroll .identity-card { margin-top: 32px; }
.ripple-app .onboarding-scroll .bubble-field { margin-top: 32px; }
.ripple-app .onboarding-scroll .form-foot { padding-top: 24px; }
.ripple-app .contacts-scroll .illustration { margin-top: 18px; margin-bottom: 28px; }
.ripple-app .contacts-scroll .permission-copy { margin-top: 22px; }
.ripple-app .contacts-scroll .form-foot { margin-top: 32px; }
.ripple-app .otp { width: 100%; min-width: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.ripple-app .otp input { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 0; font-size: 17px; }
.ripple-app .date-field input { min-height: 48px; font-size: 17px; }
.ripple-app .date-picker-trigger { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px; border: 1px solid #d9d3c7; border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 17px; font-weight: 500; text-align: left; }
.ripple-app .date-picker-trigger i { flex: 0 0 auto; font-size: 20px; color: var(--muted); }
.ripple-app .date-picker-sheet { max-width: 100%; box-sizing: border-box; padding-bottom: 26px; }
.ripple-app .date-picker-popover { width: 100%; min-width: 0; box-sizing: border-box; padding: 16px; border: 1px solid #e0dbce; border-radius: 18px; background: var(--cream); box-shadow: 0 7px 22px rgba(64,45,18,.10); display: grid; gap: 10px; }
.ripple-app .date-picker-popover .primary-action { width: 100%; }
.ripple-app .sheet-title-row { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; }
.ripple-app .sheet-title-row h2 { min-width: 0; }
.ripple-app .sheet-title-row .icon-button { justify-self: end; width: 44px; height: 44px; }
.ripple-app .date-picker-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; margin: 8px 0 2px; }
.ripple-app .date-picker-part { min-width: 0; display: grid; gap: 4px; }
.ripple-app .date-picker-part > span { font-size: 11px; font-weight: 800; color: var(--muted); }
.ripple-app .date-picker-part select { width: 100%; min-width: 0; min-height: 48px; height: 48px; padding: 0 8px; font-size: 17px; line-height: 24px; }

/* Native-feeling horizontal filters stay inside the phone and remain scrollable. */
.ripple-app .chat-filter { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; padding-left: 16px; padding-right: 16px; }
.ripple-app .chat-filter button { flex: 0 0 auto; width: auto; min-width: 44px; max-width: none; padding-left: 16px; padding-right: 16px; }

/* Chat is a borderless conversation surface with a composer kept above the Home Indicator. */
.ripple-app .chat-screen { min-width: 0; padding: 0 10px 16px !important; box-sizing: border-box; gap: 0; }
.ripple-app .chat-screen .message-list { min-width: 0; overflow-x: hidden; border: 0; background: transparent; }
.ripple-app .chat-screen .chat-message { min-width: 0; border: 0; background: transparent; box-shadow: none; }
.ripple-app .chat-screen .chat-message > div > span { background: transparent; border: 0; padding: 0; max-width: 100%; }
.ripple-app .chat-screen .chat-message.own-message > div > span { background: var(--red); color: #fff; border: 0; padding: 10px 12px; }
.ripple-app .chat-screen .reply-strip { flex: 0 0 auto; min-width: 0; max-width: 100%; overflow-x: auto; }
.ripple-app .chat-screen .composer { flex: 0 0 48px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

/* The tab strips are swipe surfaces; vertical scrolling remains native. */
.ripple-app .swipe-tabs { touch-action: pan-y; user-select: none; }

/* Poster Board: equal columns, equal gutters, aligned top edge, natural card heights. */
.ripple-app .poster-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: 12px;
  padding: 0;
}
.ripple-app .poster-column { min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.ripple-app .poster-card,
.ripple-app .poster-card:nth-child(2n) {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}
.ripple-app .poster-card > img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.ripple-app .poster-card h3 { font-size: 13px; line-height: 17px; overflow-wrap: anywhere; }
.ripple-app .poster-card p { font-size: 9px; line-height: 14px; overflow-wrap: anywhere; }
.ripple-app .poster-card footer { font-size: 8px; line-height: 12px; }
.ripple-app .filter-row { align-items:start; padding-top:8px; padding-bottom:9px; }
.ripple-app .filter-row:not(.chat-filter) button { min-height:58px; height:58px; padding:0; border:0; box-shadow:none; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; font-size:9px; font-weight:600; color:var(--ink); }
.ripple-app .filter-row:not(.chat-filter) .filter-orb { width:25px; height:25px; border:0; border-radius:0; background:transparent; display:grid; place-items:center; color:#0e1720; }
.ripple-app .filter-row:not(.chat-filter) button.active { color:var(--red); }
.ripple-app .filter-row:not(.chat-filter) button.active .filter-orb { background:transparent; color:var(--red); }
.ripple-app .filter-row:not(.chat-filter) button.active > span:last-child { position:relative; }
.ripple-app .filter-row:not(.chat-filter) button.active > span:last-child::after { content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); width:28px; height:2px; background:var(--red); border-radius:999px; }
.ripple-app .filter-orb .poster-icon { width:22px; height:22px; stroke-width:2; display:block; }
.ripple-app .filter-orb .poster-icon--fire { width:22px; height:22px; stroke-width:1.5; }
.ripple-app .filter-orb .poster-icon--fire .fire-shape { fill:currentColor; stroke:currentColor; }
.ripple-app .filter-orb .poster-icon--fire path:last-child { stroke:#fff7f2; }
.ripple-app .poster-card { position:relative; }
.ripple-app .poster-label { position:absolute; top:14px; left:14px; min-height:24px; display:inline-flex; align-items:center; gap:4px; padding:0 9px; border-radius:999px; background:rgba(255,249,247,.94); color:var(--red-dark); font-size:8px; font-weight:800; box-shadow:0 2px 6px rgba(51,36,17,.08); }
.ripple-app .poster-label.event { color:#2446c3; background:rgba(239,242,255,.94); }
.ripple-app .poster-label i { font-size:12px; }
.ripple-app .poster-label .poster-icon { width:14px; height:14px; flex:0 0 14px; stroke-width:2.35; }
.ripple-app .poster-card .event-link { display:flex; align-items:center; gap:4px; color:#1f50d4; margin-top:3px; }
.ripple-app .poster-card .poster-meta { display:grid !important; grid-template-columns:14px minmax(0,1fr); align-items:center; column-gap:5px; }
.ripple-app .poster-card .poster-meta .poster-icon { display:block; width:15px; height:15px; color:#59667d; stroke-width:2.45; }
.ripple-app .poster-card .poster-meta .poster-icon .calendar-bar { fill:currentColor; stroke:none; }
.ripple-app .poster-card footer { justify-content:flex-start; }
.ripple-app .poster-card footer span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ripple-app .poster-card footer b { margin-left:auto; white-space:nowrap; font-weight:500; }
.ripple-app .poster-card footer b .poster-icon { vertical-align:-2px; width:14px; height:14px; margin-right:3px; stroke-width:2.3; }

/* Fixed iOS hit areas, while retaining the compact Ripple visual treatment. */
.ripple-app button,
.ripple-app select,
.ripple-app input,
.ripple-app textarea { min-height: 44px; }
.ripple-app .segmented { min-height: 44px; height: 44px; }
.ripple-app .segmented button,
.ripple-app .filter-row button,
.ripple-app .reply-strip button { min-height: 44px; height: 44px; }
.ripple-app .filter-row button { min-width: 44px; }
.ripple-app .bottom-nav { height: 50px; min-height: 50px; }
.ripple-app .bottom-nav button { min-width: 44px; min-height: 44px; }
.ripple-app .toast { pointer-events: none; }

/* Keep the confirmation copy and both choices in their natural reading order. */
.ripple-app .sheet:has([data-action="contacts-allow"]),
.ripple-app .sheet:has([data-action="confirm-join"]) {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 24px 16px 26px;
}
.ripple-app .sheet:has([data-action="contacts-allow"]) p,
.ripple-app .sheet:has([data-action="confirm-join"]) p {
  min-height: 34px;
}
.ripple-app .sheet:has([data-action="contacts-allow"]) .primary-action,
.ripple-app .sheet:has([data-action="confirm-join"]) .primary-action,
.ripple-app .sheet:has([data-action="contacts-allow"]) .secondary-action,
.ripple-app .sheet:has([data-action="confirm-join"]) .secondary-action {
  width: 100% !important;
  height: 52px;
  min-height: 52px;
  margin: 0;
  transform: none !important;
}

/* Map frame 8: match the Figma section geometry while keeping iOS hit areas. */
.ripple-app .map-view {
  height: 578px;
  min-height: 578px;
  box-sizing: border-box;
}
.ripple-app .map-label {
  top: 19px;
  left: 19px;
  width: 91px;
  height: 28px;
  box-sizing: border-box;
  padding: 0;
  display: grid;
  place-items: center;
}
.ripple-app .search-area {
  top: 14px;
  left: calc(50% + 7px);
  width: 108px;
  height: 44px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 2px 4px rgba(50, 38, 15, .08);
}
.ripple-app .locate {
  top: 17px;
  right: 17px;
}
.ripple-app .map-preview {
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 119px;
  box-sizing: border-box;
}
.ripple-app .map-preview > div { min-height: 0; }
.ripple-app .map-preview button {
  width: 93px;
  height: 44px;
  min-height: 44px;
  box-sizing: border-box;
  line-height: 1;
}

/* Figma's blue approximate-location beacon is an iOS system affordance. */
.ripple-app .map-current-location {
  position: absolute;
  left: 124px;
  top: 254px;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 2;
}
.ripple-app .map-current-location::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 4px;
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-left: 28px solid rgba(0, 122, 255, .18);
  transform: rotate(22deg);
  transform-origin: 0 50%;
}
.ripple-app .map-current-location::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 16px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #007aff;
  box-shadow: 0 2px 5px rgba(17, 25, 30, .18);
}

@media (max-width: 760px) {
  body { padding: 0; background: var(--sun); }
  .demo-stage { display: block; width: 100%; }
  .device { width: min(390px, 100vw); height: min(844px, 100dvh); min-height: 680px; margin: 0 auto; flex-basis: auto; border-radius: 0; }
  .device::before { border-width: 4px; border-radius: 0; }
  .phone-shell { border-radius: 0; }
  .demo-note { display: none; }
}

@media (max-width: 360px) {
  .phone-statusbar { padding-inline: 16px; }
  .dynamic-island { width: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Figma registration flow alignment: measurements are relative to the 390 x 844 frame. */
.ripple-app .welcome .wordmark-large {
  width: 236px !important;
  height: 136px !important;
  max-width: 236px !important;
  margin-top: 50px !important;
  margin-bottom: 16px !important;
  transform: none !important;
}
.ripple-app .welcome h1 {
  width: 100% !important;
  max-width: 340px !important;
  margin-top: 36px !important;
  margin-bottom: 10px !important;
}
.ripple-app .welcome .privacy-copy { margin-bottom: 0 !important; }
.ripple-app .phone-entry-screen .form-stack { margin-top: 72px !important; }
.ripple-app .verification-screen .form-stack { margin-top: 55px !important; }
.ripple-app .phone-entry-screen .form-foot,
.ripple-app .verification-screen .form-foot { transform: translateY(-24px) !important; }
.ripple-app .verification-screen h1 { margin-bottom: 12px !important; }

.ripple-app .contacts-scroll .illustration {
  height: 230px !important;
  margin-top: 8px !important;
  margin-bottom: 28px !important;
}
.ripple-app .contacts-scroll .permission-copy { margin-top: 28px !important; }
.ripple-app .contacts-scroll .form-foot { transform: translateY(-7px) !important; }

.ripple-app .identity-scroll .intro-copy,
.ripple-app .basics-scroll .intro-copy,
.ripple-app .interests-scroll .intro-copy { margin-top: 29px !important; }
.ripple-app .identity-scroll .identity-card {
  min-height: 418px !important;
  box-sizing: border-box;
  margin-top: 25px !important;
}
.ripple-app .identity-scroll .form-foot {
  transform: none !important;
  padding-top: 29px !important;
}

.ripple-app .basics-scroll .form-stack {
  margin-top: 0 !important;
  padding-top: 40px !important;
}
.ripple-app .basics-scroll .form-stack > .field:first-child {
  min-height: 101px !important;
  box-sizing: border-box;
  display: block;
}
.ripple-app .basics-scroll .form-stack > .field:first-child > span {
  display: block;
  line-height: 16px;
}
.ripple-app .basics-scroll .form-stack > .field:first-child .date-picker-trigger {
  height: 48px;
  margin-top: 7px;
}
.ripple-app .basics-scroll .form-stack > .field:nth-child(2) .option-list { margin-top: 9px !important; }
.ripple-app .basics-scroll .form-foot {
  transform: none !important;
  padding-top: 116px !important;
}

.ripple-app .interests-scroll .intro-copy {
  min-height: 102px;
  box-sizing: border-box;
}
.ripple-app .interests-scroll .bubble-field {
  position: relative;
  display: block;
  height: 327px;
  margin-top: 9.8px !important;
  margin-bottom: 19.4px;
}
.ripple-app .interests-scroll .bubble-field .bubble {
  position: absolute;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 10px;
  line-height: 16px;
}
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(1) { left: 19px; top: 77.2px; width: 73px; height: 73px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(2) { left: 76px; top: 7.2px; width: 106px; height: 102px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(3) { left: 233px; top: 9.2px; width: 100px; height: 97px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(4) { left: 25px; top: 156.2px; width: 53px; height: 54px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(5) { left: 92px; top: 135.2px; width: 74px; height: 73px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(6) { left: 170px; top: 73.2px; width: 75px; height: 75px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(7) { left: 276px; top: 107.2px; width: 70px; height: 68px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(8) { left: 15px; top: 235.2px; width: 82px; height: 81px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(9) { left: 105px; top: 210.2px; width: 74px; height: 72px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(10) { left: 186px; top: 150.2px; width: 76px; height: 76px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(11) { left: 268px; top: 183.2px; width: 85px; height: 86px; }
.ripple-app .interests-scroll .bubble-field .bubble:nth-child(12) { left: 184px; top: 232.2px; width: 88px; height: 88px; }
.ripple-app .interests-scroll .form-foot {
  transform: none !important;
  padding-top: 58px !important;
}