/* Make every element calculate width and height using border-box. */
* {
  box-sizing: border-box;
}

/* Remove the browser's default page margin. */
html {
  margin: 0;
}

/* Give the page a neutral background outside the mobile frame. */
html {
  background: #e8edf2;
}

/* Make the body fill at least one screen. */
body {
  min-height: 100vh;
}

/* Remove the body's default margin. */
body {
  margin: 0;
}

/* Use an Android-like font stack without bundling any font file. */
body {
  font-family: Roboto, Arial, "Helvetica Neue", sans-serif;
}

/* Set the default text colour. */
body {
  color: #202124;
}

/* Smooth text rendering on supported browsers. */
body {
  -webkit-font-smoothing: antialiased;
}

/* Keep buttons and inputs on the same font as the rest of the screen. */
button,
input {
  font: inherit;
}

/* Remove the blue mobile tap highlight. */
button,
input {
  -webkit-tap-highlight-color: transparent;
}

/* Main mobile application shell. */
.phone-app {
  position: relative;
}

/* Match the reference-image width on desktop preview. */
.phone-app {
  width: min(100%, 448px);
}

/* Fill the mobile screen vertically. */
.phone-app {
  min-height: 100dvh;
}

/* Center the app when viewed on a wider desktop browser. */
.phone-app {
  margin: 0 auto;
}

/* Give the app a white base. */
.phone-app {
  background: #ffffff;
}

/* Hide anything that extends sideways beyond the app frame. */
.phone-app {
  overflow-x: hidden;
}

/* Leave room for the fixed bottom navigation. */
.phone-app {
  padding-bottom: 92px;
}

/* Top hero area. */
.hero {
  position: relative;
}

/* Match the pale sky from the reference. */
.hero {
  background: #e0f2ff;
}

/* Keep a fixed cinematic proportion at reference width. */
.hero {
  height: 292px;
}

/* Hide artwork outside the hero box. */
.hero {
  overflow: hidden;
}

/* Demo status row. */
.status-row {
  position: relative;
}

/* Keep status icons above the landscape. */
.status-row {
  z-index: 5;
}

/* Lay status content in one line. */
.status-row {
  display: flex;
}

/* Vertically center tiny status content. */
.status-row {
  align-items: center;
}

/* Give left and right groups natural spacing. */
.status-row {
  justify-content: space-between;
}

/* Match the approximate height of the supplied phone status area. */
.status-row {
  height: 42px;
}

/* Give the row horizontal breathing room. */
.status-row {
  padding: 0 27px 0 80px;
}

/* Use small dark text like a phone status bar. */
.status-row {
  font-size: 12px;
}

/* Keep status elements crisp. */
.status-row {
  font-weight: 600;
}

/* Position the clock slightly left of centre like the reference. */
.demo-time {
  white-space: nowrap;
}

/* Middle status indicators. */
.status-middle {
  display: flex;
}

/* Put small spacing between status indicators. */
.status-middle {
  gap: 6px;
}

/* Vertically align middle indicators. */
.status-middle {
  align-items: center;
}

/* Right-side status group. */
.status-right {
  display: flex;
}

/* Put a small gap between right-side items. */
.status-right {
  gap: 5px;
}

/* Vertically align right-side items. */
.status-right {
  align-items: center;
}

/* Tiny square status mark. */
.status-mini {
  font-size: 10px;
}

/* Generic dot status mark. */
.status-dot {
  font-size: 8px;
}

/* Slightly smaller dot. */
.status-dot.small {
  font-size: 6px;
}

/* Signal bars. */
.signal-bars {
  font-size: 12px;
}

/* Battery percentage. */
.battery-text {
  font-size: 12px;
}

/* Search area row. */
.search-area {
  position: relative;
}

/* Keep search UI above the hero art. */
.search-area {
  z-index: 6;
}

/* Put search box and profile icon in one line. */
.search-area {
  display: flex;
}

/* Vertically align the two controls. */
.search-area {
  align-items: center;
}

/* Match the screenshot's horizontal spacing. */
.search-area {
  gap: 12px;
}

/* Match the screenshot's side margins. */
.search-area {
  margin: 0 26px 0 31px;
}

/* Pill-shaped search box. */
.search-box {
  display: flex;
}

/* Center contents vertically. */
.search-box {
  align-items: center;
}

/* Let the search box consume the remaining row width. */
.search-box {
  flex: 1;
}

/* Keep the search box at the approximate reference height. */
.search-box {
  height: 60px;
}

/* Create the large rounded pill. */
.search-box {
  border-radius: 32px;
}

/* Use a very light surface similar to the screenshot. */
.search-box {
  background: rgba(250, 250, 252, 0.96);
}

/* Add the soft shadow visible below the search field. */
.search-box {
  box-shadow: 0 2px 6px rgba(60, 64, 67, 0.22);
}

/* Give content room inside the pill. */
.search-box {
  padding: 0 18px;
}

/* Search magnifying-glass icon. */
.search-icon {
  width: 26px;
}

/* Give the icon a matching height. */
.search-icon {
  height: 26px;
}

/* Keep the icon from shrinking. */
.search-icon {
  flex: 0 0 auto;
}

/* Add the same icon-to-text spacing. */
.search-icon {
  margin-right: 20px;
}

/* Search input. */
.search-box input {
  flex: 1;
}

/* Prevent flex overflow on narrow devices. */
.search-box input {
  min-width: 0;
}

/* Remove the browser input border. */
.search-box input {
  border: 0;
}

/* Remove the default focus outline. */
.search-box input {
  outline: 0;
}

/* Keep the input transparent inside the pill. */
.search-box input {
  background: transparent;
}

/* Match the reference text size. */
.search-box input {
  font-size: 17px;
}

/* Use dark text when the user types. */
.search-box input {
  color: #202124;
}

/* Remove extra internal input padding. */
.search-box input {
  padding: 0;
}

/* Light placeholder like the reference. */
.search-box input::placeholder {
  color: #d4d7dc;
}

/* Keep placeholder fully visible. */
.search-box input::placeholder {
  opacity: 1;
}

/* Fictional round profile button. */
.profile-button {
  width: 42px;
}

/* Match width and height. */
.profile-button {
  height: 42px;
}

/* Keep it circular. */
.profile-button {
  border-radius: 50%;
}

/* Remove the default button border. */
.profile-button {
  border: 0;
}

/* Remove internal padding. */
.profile-button {
  padding: 0;
}

/* Hide image corners outside the circle. */
.profile-button {
  overflow: hidden;
}

/* Give it a soft fallback background. */
.profile-button {
  background: #c8e3de;
}

/* Show pointer on desktop preview. */
.profile-button {
  cursor: pointer;
}

/* Profile image fill. */
.profile-button img {
  display: block;
}

/* Fill the circle horizontally. */
.profile-button img {
  width: 100%;
}

/* Fill the circle vertically. */
.profile-button img {
  height: 100%;
}

/* Decorative landscape asset. */
.hero-illustration {
  position: absolute;
}

/* Anchor the art to the left. */
.hero-illustration {
  left: 0;
}

/* Anchor the art to the bottom. */
.hero-illustration {
  bottom: 0;
}

/* Fill the complete app width. */
.hero-illustration {
  width: 100%;
}

/* Match the approximate landscape height in the screenshot. */
.hero-illustration {
  height: 164px;
}

/* Stretch the illustration neatly across the hero region. */
.hero-illustration {
  object-fit: cover;
}

/* Do not let the decorative art capture clicks. */
.hero-illustration {
  pointer-events: none;
}

/* Main white content section. */
.home-content {
  position: relative;
}

/* Keep content above plain background. */
.home-content {
  z-index: 2;
}

/* Use a white surface. */
.home-content {
  background: #ffffff;
}

/* Match top spacing below the landscape. */
.home-content {
  padding: 32px 22px 24px;
}

/* Primary four-column action grid. */
.primary-grid {
  display: grid;
}

/* Create four equal columns. */
.primary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Keep the same spacing between columns. */
.primary-grid {
  gap: 13px;
}

/* Individual action button. */
.primary-action {
  display: flex;
}

/* Arrange icon above text. */
.primary-action {
  flex-direction: column;
}

/* Center icon and label. */
.primary-action {
  align-items: center;
}

/* Remove browser button background. */
.primary-action {
  background: transparent;
}

/* Remove browser button border. */
.primary-action {
  border: 0;
}

/* Remove extra browser button padding. */
.primary-action {
  padding: 0;
}

/* Use the inherited dark text. */
.primary-action {
  color: inherit;
}

/* Show pointer on desktop. */
.primary-action {
  cursor: pointer;
}

/* Large rounded icon tile. */
.primary-icon-tile {
  display: grid;
}

/* Center the icon inside the tile. */
.primary-icon-tile {
  place-items: center;
}

/* Match the screenshot's approximate tile size. */
.primary-icon-tile {
  width: 80px;
}

/* Match tile width and height. */
.primary-icon-tile {
  height: 80px;
}

/* Rounded corners similar to the reference. */
.primary-icon-tile {
  border-radius: 20px;
}

/* Pale blue action background. */
.primary-icon-tile {
  background: #dce8ff;
}

/* Smoothly animate touch feedback. */
.primary-icon-tile {
  transition: transform 120ms ease, background-color 120ms ease;
}

/* Shrink a tile very slightly when pressed. */
.primary-action:active .primary-icon-tile {
  transform: scale(0.965);
}

/* Slightly deepen the blue when pressed. */
.primary-action:active .primary-icon-tile {
  background: #cfdefb;
}

/* Size the SVG icon inside the tile. */
.primary-icon-tile img {
  width: 36px;
}

/* Match icon width and height. */
.primary-icon-tile img {
  height: 36px;
}

/* Primary action label. */
.primary-text {
  display: block;
}

/* Add the gap below each icon tile. */
.primary-text {
  margin-top: 11px;
}

/* Match the reference label size. */
.primary-text {
  font-size: 17px;
}

/* Match the reference two-line spacing. */
.primary-text {
  line-height: 1.38;
}

/* Center the text. */
.primary-text {
  text-align: center;
}

/* Keep label weight regular. */
.primary-text {
  font-weight: 400;
}

/* Window around the shortcut row. */
.shortcut-window {
  width: calc(100% + 22px);
}

/* Clip the row at the right edge like the supplied screen. */
.shortcut-window {
  overflow: hidden;
}

/* Match the vertical spacing above shortcuts. */
.shortcut-window {
  margin-top: 20px;
}

/* Shortcut row. */
.shortcut-row {
  display: flex;
}

/* Vertically align shortcut pills. */
.shortcut-row {
  align-items: center;
}

/* Add consistent space between shortcuts. */
.shortcut-row {
  gap: 10px;
}

/* Do not wrap onto a second row. */
.shortcut-row {
  flex-wrap: nowrap;
}

/* Common shortcut pill. */
.shortcut-pill {
  display: flex;
}

/* Align pill contents vertically. */
.shortcut-pill {
  align-items: center;
}

/* Keep icon and text left aligned. */
.shortcut-pill {
  justify-content: flex-start;
}

/* Keep pill width stable in horizontal row. */
.shortcut-pill {
  flex: 0 0 auto;
}

/* Match screenshot pill height. */
.shortcut-pill {
  height: 76px;
}

/* Create rounded pill corners. */
.shortcut-pill {
  border-radius: 39px;
}

/* Use a subtle outline. */
.shortcut-pill {
  border: 1px solid #dfe2e7;
}

/* Keep the surface white. */
.shortcut-pill {
  background: #ffffff;
}

/* Add internal spacing. */
.shortcut-pill {
  padding: 0 14px;
}

/* Add icon-to-copy spacing. */
.shortcut-pill {
  gap: 10px;
}

/* Use dark text. */
.shortcut-pill {
  color: #303134;
}

/* Show pointer on desktop. */
.shortcut-pill {
  cursor: pointer;
}

/* First shortcut width. */
.shortcut-wide {
  width: 178px;
}

/* Second shortcut width. */
.shortcut-medium {
  width: 154px;
}

/* Trophy shortcut width. */
.reward-shortcut {
  width: 82px;
}

/* Center the trophy in its small pill. */
.reward-shortcut {
  justify-content: center;
}

/* Remove extra trophy pill side padding. */
.reward-shortcut {
  padding: 0;
}

/* Circular icon holder. */
.shortcut-circle {
  display: grid;
}

/* Center icon. */
.shortcut-circle {
  place-items: center;
}

/* Set circle width. */
.shortcut-circle {
  width: 46px;
}

/* Set circle height. */
.shortcut-circle {
  height: 46px;
}

/* Make it circular. */
.shortcut-circle {
  border-radius: 50%;
}

/* Use a subtle pale background. */
.shortcut-circle {
  background: #f1f5f9;
}

/* Keep circle from shrinking. */
.shortcut-circle {
  flex: 0 0 auto;
}

/* Stronger blue background for Tap & Pay. */
.shortcut-circle.blue-circle {
  background: #d9e8ff;
}

/* Shortcut icon size. */
.shortcut-circle img {
  width: 31px;
}

/* Shortcut icon height. */
.shortcut-circle img {
  height: 31px;
}

/* Shortcut text block. */
.shortcut-copy {
  display: flex;
}

/* Put title and subtitle on separate rows. */
.shortcut-copy {
  flex-direction: column;
}

/* Keep text left aligned. */
.shortcut-copy {
  align-items: flex-start;
}

/* Prevent odd wrapping. */
.shortcut-copy {
  white-space: nowrap;
}

/* Shortcut title. */
.shortcut-title {
  font-size: 15px;
}

/* Match title line height. */
.shortcut-title {
  line-height: 1.22;
}

/* Shortcut subtitle. */
.shortcut-subtitle {
  font-size: 15px;
}

/* Match subtitle line height. */
.shortcut-subtitle {
  line-height: 1.22;
}

/* Make the zero amount red as in the reference composition. */
.amount-zero {
  color: #c5221f;
}

/* People heading. */
.people-heading {
  margin: 38px 10px 28px;
}

/* Match the large reference heading. */
.people-heading {
  font-size: 28px;
}

/* Keep the heading weight light/regular. */
.people-heading {
  font-weight: 400;
}

/* Tight heading line height. */
.people-heading {
  line-height: 1;
}

/* People grid. */
.people-grid {
  display: grid;
}

/* Create four equal contact columns. */
.people-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Match horizontal spacing. */
.people-grid {
  column-gap: 12px;
}

/* Match vertical spacing between rows. */
.people-grid {
  row-gap: 20px;
}

/* Individual person button. */
.person {
  display: flex;
}

/* Put avatar above label. */
.person {
  flex-direction: column;
}

/* Center each contact. */
.person {
  align-items: center;
}

/* Remove default background. */
.person {
  background: transparent;
}

/* Remove button border. */
.person {
  border: 0;
}

/* Remove button padding. */
.person {
  padding: 0;
}

/* Use inherited text colour. */
.person {
  color: inherit;
}

/* Show pointer on desktop. */
.person {
  cursor: pointer;
}

/* Circular contact avatar. */
.person-avatar {
  display: grid;
}

/* Center initials. */
.person-avatar {
  place-items: center;
}

/* Match screenshot avatar width. */
.person-avatar {
  width: 68px;
}

/* Match screenshot avatar height. */
.person-avatar {
  height: 68px;
}

/* Make it a circle. */
.person-avatar {
  border-radius: 50%;
}

/* Hide corners of image avatars. */
.person-avatar {
  overflow: hidden;
}

/* Use white initials. */
.person-avatar {
  color: #ffffff;
}

/* Match initial size. */
.person-avatar {
  font-size: 34px;
}

/* Keep initials regular rather than bold. */
.person-avatar {
  font-weight: 400;
}

/* First avatar colour. */
.avatar-pink {
  background: #c91557;
}

/* Second avatar colour. */
.avatar-orange {
  background: #f36c00;
}

/* Fourth avatar colour. */
.avatar-purple {
  background: #744ac9;
}

/* Fifth avatar colour. */
.avatar-blue {
  background: #0067a6;
}

/* Sixth avatar colour. */
.avatar-cyan {
  background: #078fc7;
}

/* Seventh avatar colour. */
.avatar-red {
  background: #b22615;
}

/* Image avatar fallback background. */
.image-avatar {
  background: #d9f0f4;
}

/* Fill image avatar. */
.image-avatar img {
  display: block;
}

/* Fill image width. */
.image-avatar img {
  width: 100%;
}

/* Fill image height. */
.image-avatar img {
  height: 100%;
}

/* More contacts circle. */
.more-avatar {
  background: #ffffff;
}

/* Add the thin grey ring. */
.more-avatar {
  border: 1px solid #ccd0d6;
}

/* Down arrow icon size. */
.more-avatar img {
  width: 29px;
}

/* Down arrow height. */
.more-avatar img {
  height: 29px;
}

/* Person label. */
.person-label {
  margin-top: 10px;
}

/* Match reference label size. */
.person-label {
  font-size: 16px;
}

/* Match two-line label spacing. */
.person-label {
  line-height: 1.25;
}

/* Center labels under avatars. */
.person-label {
  text-align: center;
}

/* Reserve approximately the same label height. */
.person-label {
  min-height: 40px;
}

/* Keep blank more-button label from affecting appearance. */
.blank-label {
  color: transparent;
}

/* Small persistent cinematic disclosure. */
.cinematic-mark {
  position: fixed;
}

/* Keep it aligned to the same mobile frame. */
.cinematic-mark {
  left: 50%;
}

/* Center relative to the app width. */
.cinematic-mark {
  transform: translateX(-50%);
}

/* Place it just above the bottom nav. */
.cinematic-mark {
  bottom: 85px;
}

/* Keep it inside the app's width. */
.cinematic-mark {
  width: min(100%, 448px);
}

/* Right-align the small disclosure. */
.cinematic-mark {
  text-align: right;
}

/* Give it side padding. */
.cinematic-mark {
  padding: 0 10px;
}

/* Keep it visually quiet. */
.cinematic-mark {
  font-size: 7px;
}

/* Use subtle grey. */
.cinematic-mark {
  color: rgba(80, 85, 90, 0.52);
}

/* Add a little tracking. */
.cinematic-mark {
  letter-spacing: 0.07em;
}

/* Keep it above content. */
.cinematic-mark {
  z-index: 19;
}

/* Prevent the disclosure from capturing taps. */
.cinematic-mark {
  pointer-events: none;
}

/* Fixed bottom app navigation. */
.bottom-nav {
  position: fixed;
}

/* Center navigation with the phone frame. */
.bottom-nav {
  left: 50%;
}

/* Center the fixed element. */
.bottom-nav {
  transform: translateX(-50%);
}

/* Anchor to bottom. */
.bottom-nav {
  bottom: 0;
}

/* Match the phone frame width. */
.bottom-nav {
  width: min(100%, 448px);
}

/* Match reference navigation height. */
.bottom-nav {
  height: 86px;
}

/* Use a very pale blue-white surface. */
.bottom-nav {
  background: #f8fbff;
}

/* Create three equal columns. */
.bottom-nav {
  display: grid;
}

/* Create Home, Money and You columns. */
.bottom-nav {
  grid-template-columns: repeat(3, 1fr);
}

/* Keep nav above page content. */
.bottom-nav {
  z-index: 20;
}

/* Give a subtle top divider. */
.bottom-nav {
  border-top: 1px solid #f0f2f5;
}

/* Respect an iPhone/Android safe bottom area if present. */
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Navigation button. */
.nav-button {
  display: flex;
}

/* Stack icon above label. */
.nav-button {
  flex-direction: column;
}

/* Center items horizontally. */
.nav-button {
  align-items: center;
}

/* Center items vertically. */
.nav-button {
  justify-content: center;
}

/* Set small icon-to-label spacing. */
.nav-button {
  gap: 5px;
}

/* Remove browser button border. */
.nav-button {
  border: 0;
}

/* Remove browser button background. */
.nav-button {
  background: transparent;
}

/* Use inherited dark text. */
.nav-button {
  color: #4f5358;
}

/* Show pointer on desktop. */
.nav-button {
  cursor: pointer;
}

/* Navigation icon holder. */
.nav-icon-holder {
  display: grid;
}

/* Center icon. */
.nav-icon-holder {
  place-items: center;
}

/* Default holder width. */
.nav-icon-holder {
  width: 42px;
}

/* Default holder height. */
.nav-icon-holder {
  height: 34px;
}

/* Active Home tab gets the light blue elongated pill. */
.nav-button.active .nav-icon-holder {
  width: 80px;
}

/* Active pill height. */
.nav-button.active .nav-icon-holder {
  height: 40px;
}

/* Active pill rounding. */
.nav-button.active .nav-icon-holder {
  border-radius: 24px;
}

/* Active pill colour. */
.nav-button.active .nav-icon-holder {
  background: #cbeeff;
}

/* Normal nav icon width. */
.nav-icon-holder img {
  width: 29px;
}

/* Normal nav icon height. */
.nav-icon-holder img {
  height: 29px;
}

/* Keep the profile navigation image circular. */
.profile-nav-holder img {
  border-radius: 50%;
}

/* Nav label. */
.nav-label {
  font-size: 14px;
}

/* Slightly emphasize active Home label. */
.nav-button.active .nav-label {
  font-weight: 700;
}

/* Use dark text for active nav label. */
.nav-button.active .nav-label {
  color: #202124;
}

/* Touch feedback without any popup, alert or dialog. */
button:active {
  opacity: 0.92;
}

/* Narrow-phone adjustments. */
@media (max-width: 390px) {

  /* Reduce search side margins slightly. */
  .search-area {
    margin-left: 22px;
    margin-right: 20px;
  }

  /* Reduce search icon-to-text space. */
  .search-icon {
    margin-right: 14px;
  }

  /* Reduce main content side padding. */
  .home-content {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Reduce action-grid spacing. */
  .primary-grid {
    gap: 8px;
  }

  /* Slightly shrink action tiles. */
  .primary-icon-tile {
    width: 72px;
    height: 72px;
  }

  /* Slightly reduce primary label text. */
  .primary-text {
    font-size: 16px;
  }

  /* Slightly shrink contact avatars. */
  .person-avatar {
    width: 62px;
    height: 62px;
  }

  /* Slightly shrink contact labels. */
  .person-label {
    font-size: 15px;
  }

  /* Extend clipped shortcut window to the phone edge. */
  .shortcut-window {
    width: calc(100% + 16px);
  }
}