:root {
  --ink: #1e2022;
  --ink-soft: #595959;
  --muted: #8a8a8a;
  --paper: #ffffff;
  --paper-2: #fafafa;
  --green-50: #f4f5eb;
  --brand-gradient: linear-gradient(40.37deg, #22b591 -0.13%, #d0e02a 100.03%);
  --lime: #d0e02a;
  --teal: #22b591;
  --lime-2: #f1f2e1;
  --btc: #f7931a;
  --btc-soft: #fff5eb;
  --btc-line: rgba(247, 147, 26, 0.18);
  --line: rgba(30, 32, 34, 0.1);
  --shadow: 0 8px 32px rgba(30, 32, 34, 0.08);
  --shadow-lg: 0 24px 64px rgba(30, 32, 34, 0.1);
  --radius-xl: 24px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --max: 1080px;
}

.urble-bitcoin-page,
.urble-bitcoin-page * {
  box-sizing: border-box;
}
.urble-bitcoin-page {
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.urble-bitcoin-page a {
  color: inherit;
  text-decoration: none;
}
.urble-bitcoin-page a:hover {
  text-decoration: none;
}
.gtm-noscript-frame,
.urble-meta-image {
  display: none;
  visibility: hidden;
}
.wrap {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.44rem 0.9rem;
  border-radius: 999px;
  background: var(--btc-soft);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
  margin-bottom: 32px;
}
.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--btc);
  flex: 0 0 auto;
}

.urble-bitcoin-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  cursor: pointer;
}
.urble-bitcoin-page .btn:hover {
  transform: translateY(-1px);
}
.urble-bitcoin-page .btn-primary {
  background: var(--ink);
  color: #fff;
}
.urble-bitcoin-page .btn-primary:hover {
  background: #000;
}
.urble-bitcoin-page .btn-btc {
  background: var(--btc);
  color: #fff;
  font-weight: 700;
}
.urble-bitcoin-page .btn-btc:hover {
  background: #e0820f;
}
.urble-bitcoin-page .btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.urble-bitcoin-page .btn-ghost:hover {
  background: var(--btc-soft);
}
.urble-bitcoin-page .btn-small {
  min-height: 38px;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
}

.hero {
  width: 1144px;
  max-width: 100%;
  margin: auto;
  padding: 72px 32px 52px;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--btc-soft) 100%);
}
.hero .wrap {
  width: 1080px;
  max-width: 100%;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.7fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.urble-bitcoin-page h1,
.urble-bitcoin-page h2,
.urble-bitcoin-page h3,
.urble-bitcoin-page p {
  margin-top: 0;
}
.urble-bitcoin-page h1 {
  font-family: 'Quicksand', sans-serif;
  max-width: 900px;
  font-size: clamp(3.2rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--ink);
}
.urble-bitcoin-page .hero h1 .soft {
  font-family: 'Quicksand', sans-serif;
  color: var(--ink);
}
.urble-bitcoin-page .hero h1 .hero-underline-word {
  font-family: 'Quicksand', sans-serif;
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.urble-bitcoin-page .hero h1 .hero-underline-word::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 4px;
  height: 19px;
  border-radius: 24px;
  background: var(--brand-gradient);
  z-index: -1;
}
.lead {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-soft);
  max-width: 680px;
  font-weight: 400;
  margin-bottom: 28px;
}
.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
}

.phone-card {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
}
.blob {
  position: absolute;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #f7931a 0%, #d0e02a 100%);
  opacity: 0.15;
  filter: blur(52px);
}
.phone {
  display: block;
  position: relative;
  z-index: 1;
  width: min(320px, 86vw);
  height: auto;
  transform: rotate(10deg);
  filter: drop-shadow(0 32px 48px rgba(30, 32, 34, 0.16));
}
.screen {
  min-height: 540px;
  border-radius: 32px;
  padding: 20px;
  background: linear-gradient(180deg, #fff 0%, var(--btc-soft) 100%);
  overflow: hidden;
}
.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-weight: 700;
  font-size: 0.9rem;
}
.phone-title {
  font-weight: 700;
}
.tiny-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
}
.goal-card {
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--btc-line);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}
.goal-label {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.goal-name {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 10px;
  color: var(--ink);
}
.goal-amount {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 4px;
}
.goal-sub {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 10px;
}
.progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--btc-line);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--btc);
}
.progress-fill-20 {
  width: 20%;
}
.supporter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.supporter-avatars {
  display: flex;
}
.s-av {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.55rem;
  font-weight: 700;
  margin-left: -6px;
}
.s-av:first-child {
  margin-left: 0;
}
.s-av.btc {
  background: var(--btc);
}
.mini-goal {
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mini-goal-left {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.mini-goal-sub {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
}
.mini-goal-right {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--btc);
}
.btc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  padding: 0.28rem 0.55rem;
  background: var(--btc-soft);
  border: 1px solid var(--btc-line);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--btc);
}
.btc-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}
.text-white {
  color: #fff;
}

.urble-bitcoin-page section {
  padding: 72px 0;
}
.section-head {
  margin-bottom: 36px;
}
.urble-bitcoin-page #faq {
  padding-bottom: 32px;
}
.urble-bitcoin-page .final-cta {
  padding-top: 32px;
}
.eyebrow {
  color: var(--btc);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;
  margin-bottom: 10px;
}
.urble-bitcoin-page h2 {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--ink);
}
.section-copy {
  max-width: 720px;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
}

/* A section that keeps its right-hand column clear so the bubbles have somewhere to live:
   the head is capped at the same 720px measure .section-copy already uses, so a disc can
   never land on the headline no matter how long the string is in either language. */
.urble-bubble-lane .wrap {
  position: relative;
}
.urble-bubble-lane .section-head h2 {
  max-width: 720px;
}
.urble-bubble-lane .urble-circle-1,
.urble-bubble-lane .urble-circle-2,
.urble-bubble-lane .urble-circle-3 {
  position: absolute;
  border-radius: 600px;
  background: var(--urble-linear-gradient);
}
/* The early explainer section opens with an upward, right-edge cluster; the largest disc
   slightly overhangs the content container. */
.urble-bubble-lane__intro .urble-circle-1 {
  width: 114px;
  height: 114px;
  top: -24px;
  right: -24px;
}
.urble-bubble-lane__intro .urble-circle-2 {
  width: 66px;
  height: 66px;
  top: 64px;
  right: 160px;
}
.urble-bubble-lane__intro .urble-circle-3 {
  width: 49px;
  height: 49px;
  top: 24px;
  right: 240px;
}

/* The social section keeps the same reliable free column, but uses a lower, staggered
   grouping so the two bubble lanes do not feel mechanically repeated. */
.urble-bubble-lane__social .urble-circle-1 {
  width: 114px;
  height: 114px;
  top: 48px;
  right: -32px;
}
.urble-bubble-lane__social .urble-circle-2 {
  width: 66px;
  height: 66px;
  top: 16px;
  right: 96px;
}
.urble-bubble-lane__social .urble-circle-3 {
  width: 49px;
  height: 49px;
  top: 112px;
  right: 168px;
}

/* Narrow variant, for sections whose headline carries an authored <br> — capping those at
   720px would re-wrap the authored lines and leave orphans, so the cap is 960px, the lane is
   120px, and it holds two discs with the larger one overhanging the container edge (the
   About / Community circles do the same). */
.urble-bubble-lane-narrow .wrap {
  position: relative;
}
.urble-bubble-lane-narrow .section-head h2 {
  max-width: 960px;
}
.urble-bubble-lane-narrow .urble-circle-1,
.urble-bubble-lane-narrow .urble-circle-3 {
  position: absolute;
  border-radius: 600px;
  background: var(--urble-linear-gradient);
}
.urble-bubble-lane-narrow .urble-circle-1 {
  width: 114px;
  height: 114px;
  top: -16px;
  right: -32px;
}
.urble-bubble-lane-narrow .urble-circle-3 {
  width: 49px;
  height: 49px;
  top: 128px;
  right: 32px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.card {
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.card.flat {
  box-shadow: none;
  background: var(--paper-2);
}
.card.dark {
  background: var(--ink);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.1);
}
.card.btc-card {
  background: var(--btc);
  color: #fff;
  border-color: transparent;
}
.card.btc-soft {
  background: var(--btc-soft);
  border-color: var(--btc-line);
  box-shadow: none;
}
.card h3 {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: 0;
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 10px;
}
.card p,
.card li {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
}
.card.dark p,
.card.dark li {
  color: rgba(255, 255, 255, 0.75);
}
.card.btc-card p,
.card.btc-card li {
  color: rgba(255, 255, 255, 0.85);
}
.card.btc-soft p,
.card.btc-soft li {
  color: var(--ink-soft);
}
.card ul {
  margin: 14px 0 0;
  padding-left: 1.1rem;
}
.card li {
  margin: 0.4rem 0;
}

.icon-card {
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.icon-card .icon {
  font-size: 2rem;
  margin-bottom: 14px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--btc-soft);
  display: grid;
  place-items: center;
}
.icon-card h3 {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0;
}
.icon-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

/* Goal-type badges: circular gradient discs with a white glyph, matching the goal picker in the app. */
.icon-card .urble-goal-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  font-size: 28px;
  color: var(--_Prim-Color-light-000-White);
  background: var(--urble-linear-gradient);
}
.icon-card .urble-goal-icon-date {
  background: var(--urble-linear-gradient-violet);
}
.icon-card .urble-goal-icon-ongoing {
  background: var(--urble-linear-gradient-amber);
}

/* The dark self-custody card carries a second, smaller pair of bubbles. The extra right
   padding opens the lane they live in, so they can never land on the copy — the same move
   as the constrained headline on the final CTA. The 114px disc overhangs the card edge,
   as the About / Community circles do. */
.urble-security-card {
  position: relative;
  padding-right: 96px;
}
.urble-security-card .urble-circle-1,
.urble-security-card .urble-circle-3 {
  position: absolute;
  border-radius: 600px;
  background: var(--urble-linear-gradient);
}
.urble-security-card .urble-circle-1 {
  width: 114px;
  height: 114px;
  right: -24px;
  bottom: -32px;
}
.urble-security-card .urble-circle-3 {
  width: 49px;
  height: 49px;
  top: 32px;
  right: 40px;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.social-feature-card {
  margin-bottom: 18px;
}
.social-side-cards {
  display: grid;
  align-content: start;
  gap: 18px;
}
.moment-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.moment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--btc-soft);
  border: 1px solid var(--btc-line);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}
.moment-icon {
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.steps {
  counter-reset: step;
  display: grid;
  gap: 12px;
}
.step {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--btc);
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
}
.step h3 {
  font-family: 'Quicksand', sans-serif;
  margin-bottom: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.step p {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.95rem;
}

.flow {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin: 24px 0 0;
  flex-wrap: wrap;
}
.flow-item {
  flex: 1 1 120px;
  min-height: 80px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  text-align: center;
}
.flow-item strong {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}
.flow-item span {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.82rem;
}
.arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 500;
  align-self: center;
}

.projection-strip {
  border-radius: var(--radius-md);
  padding: 16px 20px;
  background: var(--btc-soft);
  border: 1px solid var(--btc-line);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}
.projection-strip .proj-icon {
  font-size: 24px;
  line-height: 1;
  color: var(--btc);
  flex: 0 0 auto;
}
.projection-strip p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.projection-strip strong {
  color: var(--ink);
}

.comparison {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: #fff;
}
.comparison-label {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.comparison-label-muted {
  color: var(--muted);
}
.comparison-label-light {
  color: #fff;
}
.urble-bitcoin-page table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.urble-bitcoin-page th,
.urble-bitcoin-page td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 400;
  vertical-align: top;
  line-height: 1.5;
}
.urble-bitcoin-page th {
  color: var(--ink);
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--btc-soft);
}
.urble-bitcoin-page tr:last-child td {
  border-bottom: 0;
}

.final-cta {
  text-align: center;
  padding: 80px 0;
}
.final-cta .wrap {
  position: relative;
}
.urble-bitcoin-triangle-section .wrap {
  position: relative;
}
.urble-bitcoin-triangle-section .section-head,
.urble-bitcoin-triangle-section .grid-2 {
  position: relative;
  z-index: 1;
}
.urble-bitcoin-triangle-section .urble-figure {
  position: absolute;
  width: 360px;
  height: 360px;
  bottom: -128px;
  left: -160px;
  right: auto;
  border-radius: 48px 256px 64px 48px;
  background: var(--urble-linear-gradient);
  z-index: 0;
  pointer-events: none;
  rotate: 90deg;
}
.final-cta .card {
  background: var(--ink);
  color: #fff;
  padding: clamp(32px, 6vw, 64px);
  border: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.final-cta .card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 40%, rgba(247, 147, 26, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.final-cta h2 {
  color: #fff;
  font-family: 'Quicksand', sans-serif;
  /* Keeps the headline clear of the bubbles in the band's right-hand column. */
  max-width: 720px;
  margin-inline: auto;
}

/* Gradient bubbles — the decorative discs the rest of the site floats over its dark bands
   (about.css §5, community.css §6, urble_couple.css §11, chf_savings.css §6 and §9).
   The 114 / 66 / 49 trio is the established set of sizes, and the gradient comes from the
   shared token rather than this file's local --brand-gradient alias. */
.final-cta .card .urble-circle-1,
.final-cta .card .urble-circle-2,
.final-cta .card .urble-circle-3 {
  position: absolute;
  border-radius: 600px;
  background: var(--urble-linear-gradient);
}
.final-cta .card .urble-circle-1 {
  width: 114px;
  height: 114px;
  top: 32px;
  right: 24px;
}
.final-cta .card .urble-circle-2 {
  width: 66px;
  height: 66px;
  bottom: 40px;
  right: 88px;
}
.final-cta .card .urble-circle-3 {
  width: 49px;
  height: 49px;
  top: 152px;
  right: 8px;
}
.final-cta p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 680px;
  margin: 0 auto 28px;
  font-size: 1.1rem;
  font-weight: 400;
}
.final-cta .urble-download {
  justify-content: center;
  flex-wrap: wrap;
}
.final-cta .btn-btc {
  box-shadow: 0 4px 20px rgba(247, 147, 26, 0.35);
}
.security-note {
  margin-top: 12px;
}
.final-pill {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
}
.store-badge {
  height: 40px;
}

/* 1120px is the site-wide tablet switch (GUIDELINES §4). Below it the band loses its free
   left-hand column, so the bubbles come off — same as the circles on About / Community. */
@media (max-width: 1120px) {
  .urble-bubble-lane .urble-circle-1,
  .urble-bubble-lane .urble-circle-2,
  .urble-bubble-lane .urble-circle-3,
  .urble-bubble-lane-narrow .urble-circle-1,
  .urble-bubble-lane-narrow .urble-circle-3,
  .final-cta .card .urble-circle-1,
  .final-cta .card .urble-circle-2,
  .final-cta .card .urble-circle-3,
  .urble-bitcoin-triangle-section .urble-figure,
  .urble-security-card .urble-circle-1,
  .urble-security-card .urble-circle-3 {
    display: none;
  }

  /* No bubbles, no lane — the card goes back to even padding. */
  .urble-security-card {
    padding-right: clamp(20px, 3vw, 28px);
  }
}
@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .phone-card {
    min-height: auto;
    padding: 10px 0 28px;
  }
  .grid-3,
  .grid-2,
  .social-grid {
    grid-template-columns: 1fr;
  }
  .urble-bitcoin-page section {
    padding: 52px 0;
  }
}
@media (max-width: 560px) {
  .wrap {
    width: min(100% - 32px, var(--max));
  }
  .hero {
    padding-top: 40px;
  }
  .urble-bitcoin-page h1 {
    font-size: clamp(2.6rem, 14vw, 4rem);
  }
  .urble-bitcoin-page h2 {
    font-size: clamp(1.8rem, 10vw, 2.8rem);
  }
  .step {
    grid-template-columns: 1fr;
  }
  .flow {
    display: grid;
  }
  .arrow {
    transform: rotate(90deg);
  }
}